Fix padding on Tag in RTL

packages/orbit-components/src/Tag/Tag.ct-story.tsx

@@ -28,6 +28,9 @@ export function DefaultTestStory() {
         <Tag selected onRemove={() => {}} onClick={() => {}}>
           Selected Removable
         </Tag>
+        <Tag onRemove={() => {}} iconLeft={<Icons.PlusMinus />}>
+          Removable with icon
+        </Tag>
       </div>
       <h2>Colored</h2>
       <div className="gap-sm flex flex-wrap">
@@ -47,6 +50,9 @@ export function DefaultTestStory() {
         <Tag type="colored" selected onRemove={() => {}} onClick={() => {}}>
           Selected Removable
         </Tag>
+        <Tag type="colored" onRemove={() => {}} iconLeft={<Icons.PlusMinus />}>
+          Removable with icon
+        </Tag>
       </div>
       <h2>dateTag</h2>
       <div className="gap-sm flex flex-wrap">
@@ -76,6 +82,9 @@ export function DefaultTestStory() {
         <Tag size="small" onRemove={() => {}}>
           Small removable
         </Tag>
+        <Tag size="small" onRemove={() => {}} iconLeft={<Icons.PlusMinus />}>
+          Small removable with icon
+        </Tag>
       </div>
     </div>
   );

packages/orbit-components/src/Tag/Tag.ct.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import { test, expect } from "@playwright/experimental-ct-react";
 
 import { TestTag, DefaultTestStory } from "./Tag.ct-story";
+import RenderInRtl from "../utils/rtl/RenderInRtl";
 
 const NON_INTERACTABLE_TAGS = [
   {
@@ -87,4 +88,14 @@ test.describe("visual Tag", () => {
       await expect(component).toHaveScreenshot();
     });
   });
+
+  test("screenshot rtl general", async ({ mount }) => {
+    const component = await mount(
+      <RenderInRtl>
+        <DefaultTestStory />
+      </RenderInRtl>,
+    );
+
+    await expect(component).toHaveScreenshot();
+  });
 });

packages/orbit-components/src/Tag/index.tsx

@@ -89,7 +89,7 @@ const Tag = React.forwardRef<HTMLDivElement, Props>(
         onKeyDown={ev => buttonClickEmulation(ev, onClick)}
       >
         {iconLeft && (
-          <div className="pr-xs [&_svg]:size-icon-small flex flex-row items-center justify-center">
+          <div className="pe-xs [&_svg]:size-icon-small flex flex-row items-center justify-center">
             {iconLeft}
           </div>
         )}