@transferwise/components 0.0.0-experimental-a1b5585 → 0.0.0-experimental-999c033

package/build/styles/styles/less/neptune.css

@@ -5350,9 +5350,6 @@ tbody.collapse.in {
 .tw-chevron.top {
   transform: rotate(0deg);
 }
-[dir="rtl"] .tw-chevron.top {
-  transform: rotate(360deg);
-}
 .tw-chevron.right {
   transform: rotate(90deg);
 }
@@ -7496,11 +7493,17 @@ input[type="button"].btn-block {
   display: inline-flex;
   align-items: center;
 }
-.btn-loading:not(.btn-block) .btn-loader[class] {
+.btn-loading:not(.btn-block) .btn-loader {
   margin-block-end: 0;
+}
+:not([dir="rtl"]) .btn-loading:not(.btn-block) .btn-loader {
   margin-inline-start: 16px;
   margin-inline-end: 0;
 }
+[dir="rtl"] .btn-loading:not(.btn-block) .btn-loader {
+  margin-inline-start: 0 !important;
+  margin-inline-end: 16px !important;
+}
 .btn-loading.btn-block .btn-loader {
   inset-block-start: 0;
   inset-block-end: 0;
@@ -16957,9 +16960,6 @@ button.popover-close {
   inset-inline-start: 25%;
   inset-block-start: 25%;
 }
-[dir="rtl"] .process-icon-container {
-  transform: rotate(45deg) scaleX(-1);
-}
 .process-icon-horizontal,
 .process-icon-vertical {
   position: absolute;
@@ -17039,37 +17039,37 @@ button.popover-close {
 .process-stopped .process-icon-container {
   display: none;
 }
-.process-xxs {
+.process-xs {
   inline-size: 12px;
   block-size: 12px;
 }
-.process-xxs .process-circle {
+.process-xs .process-circle {
   /* Hide before animation to prevent glitching */
   stroke-dashoffset: 31.41592654px;
   stroke-dasharray: 31.41592654px;
   stroke-width: 1.5px;
 }
-.process-xxs.process-danger .process-icon-horizontal {
+.process-xs.process-danger .process-icon-horizontal {
   inset-block-start: 2.5px;
   block-size: 1px;
 }
-.process-xxs.process-danger .process-icon-vertical {
+.process-xs.process-danger .process-icon-vertical {
   inset-inline-start: 2.5px;
   inline-size: 1px;
 }
-.process-xxs .process-icon-horizontal,
-.process-xxs .process-icon-vertical {
+.process-xs .process-icon-horizontal,
+.process-xs .process-icon-vertical {
   border-radius: 0.5px;
 }
-.process-xxs.process-success .process-icon-container {
+.process-xs.process-success .process-icon-container {
   inline-size: 2.5px;
   block-size: 5px;
   inset-inline-start: 4.5px;
 }
-.process-xxs.process-success .process-icon-horizontal {
+.process-xs.process-success .process-icon-horizontal {
   block-size: 1px;
 }
-.process-xxs.process-success .process-icon-vertical {
+.process-xs.process-success .process-icon-vertical {
   inline-size: 1px;
 }
 .process-xs {
@@ -17171,9 +17171,6 @@ button.popover-close {
 .process-xl.process-success .process-icon-vertical {
   inline-size: 8px;
 }
-.process-xxs .process-icon-container {
-  display: none;
-}
 .process-xxs .process-circle {
   animation-name: process-chase-circle-xxs;
 }
@@ -18814,13 +18811,10 @@ a[data-toggle="tooltip"] {
   position: absolute;
   background: #ffffff;
   background: var(--color-background-screen);
-  transform: translateX(-1.5px) rotate(-45deg);
+  transform: translateX(0.5px) rotate(-45deg);
   transform-origin: left bottom;
-}
-[dir="rtl"] .tw-checkbox-check::before,
-[dir="rtl"] .tw-checkbox-check::after {
-  transform: translateX(-1.5px) rotate(-45deg) scaleX(-1);
-  transform-origin: right bottom;
+  inset-inline-start: 8px;
+  inset-inline-start: var(--size-8);
 }
 .tw-checkbox-check .has-error::before,
 .tw-checkbox-check .has-error::after {

package/build/styles/styles/less/process.css

@@ -55,9 +55,6 @@
   inset-inline-start: 25%;
   inset-block-start: 25%;
 }
-[dir="rtl"] .process-icon-container {
-  transform: rotate(45deg) scaleX(-1);
-}
 .process-icon-horizontal,
 .process-icon-vertical {
   position: absolute;
@@ -137,37 +134,37 @@
 .process-stopped .process-icon-container {
   display: none;
 }
-.process-xxs {
+.process-xs {
   inline-size: 12px;
   block-size: 12px;
 }
-.process-xxs .process-circle {
+.process-xs .process-circle {
   /* Hide before animation to prevent glitching */
   stroke-dashoffset: 31.41592654px;
   stroke-dasharray: 31.41592654px;
   stroke-width: 1.5px;
 }
-.process-xxs.process-danger .process-icon-horizontal {
+.process-xs.process-danger .process-icon-horizontal {
   inset-block-start: 2.5px;
   block-size: 1px;
 }
-.process-xxs.process-danger .process-icon-vertical {
+.process-xs.process-danger .process-icon-vertical {
   inset-inline-start: 2.5px;
   inline-size: 1px;
 }
-.process-xxs .process-icon-horizontal,
-.process-xxs .process-icon-vertical {
+.process-xs .process-icon-horizontal,
+.process-xs .process-icon-vertical {
   border-radius: 0.5px;
 }
-.process-xxs.process-success .process-icon-container {
+.process-xs.process-success .process-icon-container {
   inline-size: 2.5px;
   block-size: 5px;
   inset-inline-start: 4.5px;
 }
-.process-xxs.process-success .process-icon-horizontal {
+.process-xs.process-success .process-icon-horizontal {
   block-size: 1px;
 }
-.process-xxs.process-success .process-icon-vertical {
+.process-xs.process-success .process-icon-vertical {
   inline-size: 1px;
 }
 .process-xs {
@@ -269,9 +266,6 @@
 .process-xl.process-success .process-icon-vertical {
   inline-size: 8px;
 }
-.process-xxs .process-icon-container {
-  display: none;
-}
 .process-xxs .process-circle {
   animation-name: process-chase-circle-xxs;
 }

package/build/styles/styles/less/tick.css

@@ -10,13 +10,10 @@
   position: absolute;
   background: #ffffff;
   background: var(--color-background-screen);
-  transform: translateX(-1.5px) rotate(-45deg);
+  transform: translateX(0.5px) rotate(-45deg);
   transform-origin: left bottom;
-}
-[dir="rtl"] .tw-checkbox-check::before,
-[dir="rtl"] .tw-checkbox-check::after {
-  transform: translateX(-1.5px) rotate(-45deg) scaleX(-1);
-  transform-origin: right bottom;
+  inset-inline-start: 8px;
+  inset-inline-start: var(--size-8);
 }
 .tw-checkbox-check .has-error::before,
 .tw-checkbox-check .has-error::after {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-a1b5585",
+  "version": "0.0.0-experimental-999c033",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -71,7 +71,7 @@
     "@types/react-dom": "^18.3.7",
     "@types/react-transition-group": "4.4.12",
     "@monaco-editor/react": "^4.7.0",
-    "monaco-editor": "^0.55.1",
+    "monaco-editor": "^0.56.0",
     "monaco-editor-webpack-plugin": "^7.1.1",
     "@wise/art": "^2.32.0",
     "@wise/eslint-config": "^14.2.1",

package/src/AvatarView/AvatarView.css

@@ -4,18 +4,10 @@
   display: inline-block;
 }
 .np-dot-mask {
-  --np-dot-h-side: left;
   -webkit-mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
           mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
-  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) var(--np-dot-h-side) calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
-          mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) var(--np-dot-h-side) calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
   -webkit-mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
           mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
-  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) var(--np-dot-h-side) calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
-          mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) var(--np-dot-h-side) calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
-}
-[dir="rtl"] .np-dot-mask {
-  --np-dot-h-side: right;
 }
 .np-dot-badge {
   position: absolute;

package/src/AvatarView/Dot/Dot.css

@@ -4,18 +4,10 @@
   display: inline-block;
 }
 .np-dot-mask {
-  --np-dot-h-side: left;
   -webkit-mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
           mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
-  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) var(--np-dot-h-side) calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
-          mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) var(--np-dot-h-side) calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
   -webkit-mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
           mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
-  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) var(--np-dot-h-side) calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
-          mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) var(--np-dot-h-side) calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
-}
-[dir="rtl"] .np-dot-mask {
-  --np-dot-h-side: right;
 }
 .np-dot-badge {
   position: absolute;

package/src/AvatarView/Dot/Dot.less

@@ -4,14 +4,8 @@
   display: inline-block;
 
   &-mask {
-    --np-dot-h-side: left;
-
-    [dir="rtl"] & {
-      --np-dot-h-side: right;
-    }
-
     mask-image: radial-gradient(
-      circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) var(--np-dot-h-side)
+      circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left
         calc(100% - calc(var(--np-dot-size) / 2)),
       transparent 0,
       transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)),

package/src/Button/_stories/Button.test.story.tsx

@@ -34,7 +34,7 @@ const buttonPriorities = ['primary', 'secondary', 'secondary-neutral', 'tertiary
 const buttonSizes = ['sm', 'md', 'lg'] as const;
 export const AllVariants: Story = {
   tags: ['!autodocs'],
-  ...withVariantConfig(['default', 'dark', 'bright-green', 'forest-green'], {
+  ...withVariantConfig(['default', 'dark', 'bright-green', 'forest-green', 'rtl'], {
     parameters: {
       padding: '0',
     },

package/src/Checkbox/_stories/Checkbox.story.tsx

@@ -52,7 +52,7 @@ export const Multiple: Story = {
       </>
     );
   },
-  ...withVariantConfig(['default', 'dark']),
+  ...withVariantConfig(['default', 'dark', 'rtl']),
 };
 
 export const WithinField = {

package/src/Checkbox/_stories/Checkbox.test.story.tsx

@@ -30,7 +30,7 @@ export const MultipleMobile: Story = {
       </>
     );
   },
-  ...withVariantConfig(['default', 'dark', 'mobile']),
+  ...withVariantConfig(['default', 'dark', 'rtl', 'mobile']),
 };
 
 /**
@@ -41,9 +41,8 @@ export const MultipleMobile: Story = {
 export const RTLDiff: Story = {
   render: () => (
     <>
-      <Checkbox checked label="Label only" onChange={() => {}} />
+      <Checkbox label="Label only" onChange={() => {}} />
       <Checkbox
-        checked
         label="Label with secondary"
         secondary="Secondary description text"
         onChange={() => {}}

package/src/CheckboxButton/CheckboxButton.css

@@ -32,9 +32,6 @@
   background: var(--color-background-screen);
   transform: translate(-50%, -50%);
 }
-[dir="rtl"] .np-tw-checkbox-indeterminate::after {
-  transform: translate(50%, -50%);
-}
 .np-tw-checkbox-indeterminate .has-error::after {
   background-color: #e74848;
   background-color: var(--color-interactive-negative);

package/src/CheckboxButton/CheckboxButton.less

@@ -40,10 +40,6 @@
     left: 50%;
     background: var(--color-background-screen);
     transform: translate(-50%, -50%);
-
-    [dir="rtl"] & {
-      transform: translate(50%, -50%);
-    }
   }
 
   .has-error {

package/src/Chevron/_stories/Chevron.test.story.tsx

@@ -17,10 +17,10 @@ type Story = StoryObj<typeof Chevron>;
  */
 export const RTLDiff: Story = {
   render: () => (
-    <>
+    <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
       <Chevron orientation="left" size="md" />
       <Chevron orientation="right" size="md" />
-    </>
+    </div>
   ),
   ...withRTLDiff(),
 };

package/src/Header/_stories/Header.test.story.tsx

@@ -86,7 +86,7 @@ export const SectionTrailingSpaceWithAction: Story = {
 };
 
 export const AllVariants: Story = {
-  ...withVariantConfig(['default', 'dark', 'bright-green', 'forest-green'], {
+  ...withVariantConfig(['default', 'dark', 'bright-green', 'forest-green', 'rtl'], {
     parameters: {
       padding: '0',
     },

package/src/Info/_stories/Info.rtl.test.story.tsx

@@ -12,6 +12,8 @@ export default {
 
 type Story = StoryObj<typeof Info>;
 
+const iframeDiff = withRTLDiff({ renderAs: 'iframe' });
+
 const openInfo = async ({ canvasElement }: { canvasElement: HTMLElement }) => {
   const canvas = within(canvasElement);
   const button = canvas.queryByRole('button');
@@ -19,60 +21,32 @@ const openInfo = async ({ canvasElement }: { canvasElement: HTMLElement }) => {
   await userEvent.click(button);
 };
 
-export const PlacementTop: Story = {
-  render: () => (
-    <Info
-      aria-label="Info trigger"
-      title="Information"
-      content="This is some descriptive content inside the info component."
-      presentation="POPOVER"
-      preferredPlacement="top"
-    />
-  ),
-  play: openInfo,
-  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'center', vAlign: 'bottom' }),
-};
-
-export const PlacementRight: Story = {
-  render: () => (
-    <Info
-      aria-label="Info trigger"
-      title="Information"
-      content="This is some descriptive content inside the info component."
-      presentation="POPOVER"
-      preferredPlacement="right"
-    />
-  ),
-  play: openInfo,
-  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'left', vAlign: 'center' }),
-};
-
-export const PlacementBottom: Story = {
+export const Popover: Story = {
   render: () => (
     <Info
       aria-label="Info trigger"
       title="Information"
       content="This is some descriptive content inside the info component."
       presentation="POPOVER"
-      preferredPlacement="bottom"
+      size="sm"
     />
   ),
   play: openInfo,
-  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'center' }),
+  ...iframeDiff,
 };
 
-export const PlacementLeft: Story = {
+export const PopoverLarge: Story = {
   render: () => (
     <Info
       aria-label="Info trigger"
       title="Information"
       content="This is some descriptive content inside the info component."
       presentation="POPOVER"
-      preferredPlacement="left"
+      size="lg"
     />
   ),
   play: openInfo,
-  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'right', vAlign: 'center' }),
+  ...iframeDiff,
 };
 
 export const Modal: Story = {
@@ -82,8 +56,9 @@ export const Modal: Story = {
       title="Information"
       content="This is some descriptive content inside the info component."
       presentation="MODAL"
+      size="sm"
     />
   ),
   play: openInfo,
-  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'center', vAlign: 'center' }),
+  ...iframeDiff,
 };

package/src/Info/_stories/Info.story.tsx

@@ -36,5 +36,5 @@ export const Sandbox = createSandboxStory({
 });
 
 export const Basic: Story = {
-  ...withVariantConfig(['default', 'dark']),
+  ...withVariantConfig(['default', 'dark', 'rtl']),
 };

package/src/Inputs/SelectInput/_stories/SelectInput.test.story.tsx

@@ -166,7 +166,7 @@ export const Variants: Story<TestCurrency> = {
       </div>
     );
   },
-  ...withVariantConfig(['default', 'dark', 'bright-green', 'forest-green']),
+  ...withVariantConfig(['default', 'dark', 'bright-green', 'forest-green', 'rtl']),
 };
 
 /**

package/src/ListItem/_stories/subcomponents.tsx

@@ -60,7 +60,7 @@ export const SB_LIST_ITEM_CONTROLS: Record<SB_ListItem_ControlType, ReactNode> =
   ),
   navigation: <ListItem.Navigation href="https://wise.com" />,
   navigationAsButton: <ListItem.Navigation onClick={fn()} />,
-  checkbox: <ListItem.Checkbox checked onChange={() => {}} />,
+  checkbox: <ListItem.Checkbox onChange={() => {}} />,
   radio: <ListItem.Radio name="radio" value={Math.random().toString()} onChange={() => {}} />,
   switch: <ListItem.Switch onClick={() => {}} />,
   iconButton: (

package/src/MoneyInput/_stories/MoneyInput.rtl.test.story.tsx

@@ -84,5 +84,5 @@ export const OpenDropdown: Story = {
     if (!trigger) return;
     await userEvent.click(trigger);
   },
-  ...withRTLDiff({ renderAs: 'iframe', width: '40%' }),
+  ...withRTLDiff({ renderAs: 'iframe', width: '80%' }),
 };

package/src/Nudge/Nudge.css

@@ -41,10 +41,7 @@
   inline-size: 161px;
 }
 [dir="rtl"] .wds-nudge-media-globe {
-  margin-inline-start: -63px;
-  margin-block-start: -15px;
-  position: absolute;
-  inline-size: 161px;
+  transform: scaleX(-1);
 }
 .wds-nudge-media-lock {
   margin-inline-start: -11px;
@@ -53,24 +50,36 @@
   inline-size: 104px;
   transform: rotate(-14.86deg);
 }
+[dir="rtl"] .wds-nudge-media-lock {
+  transform: scaleX(-1);
+}
 .wds-nudge-media-wallet {
   margin-inline-start: -15px;
   margin-block-start: 18px;
   position: absolute;
   inline-size: 107px;
 }
+[dir="rtl"] .wds-nudge-media-wallet {
+  transform: scaleX(-1);
+}
 .wds-nudge-media-gear {
   margin-inline-start: -18px;
   margin-block-start: 19px;
   position: absolute;
   inline-size: 111px;
 }
+[dir="rtl"] .wds-nudge-media-gear {
+  transform: scaleX(-1);
+}
 .wds-nudge-media-invite-letter {
   margin-inline-start: -17px;
   margin-block-start: -2px;
   position: absolute;
   inline-size: 105px;
 }
+[dir="rtl"] .wds-nudge-media-invite-letter {
+  transform: scaleX(-1);
+}
 .wds-nudge-media-personal-card,
 .wds-nudge-media-business-card {
   margin-inline-start: -15px;
@@ -78,48 +87,73 @@
   position: absolute;
   inline-size: 104px;
 }
+[dir="rtl"] .wds-nudge-media-personal-card,
+[dir="rtl"] .wds-nudge-media-business-card {
+  transform: scaleX(-1);
+}
 .wds-nudge-media-heart {
   margin-inline-start: -7px;
   margin-block-start: 11px;
   position: absolute;
   inline-size: 95px;
 }
+[dir="rtl"] .wds-nudge-media-heart {
+  transform: scaleX(-1);
+}
 .wds-nudge-media-multi-currency {
   margin-inline-start: -30px;
   margin-block-start: 1px;
   position: absolute;
   inline-size: 131px;
 }
+[dir="rtl"] .wds-nudge-media-multi-currency {
+  transform: scaleX(-1);
+}
 .wds-nudge-media-shopping-bag {
   margin-inline-start: -9px;
   margin-block-start: 14px;
   position: absolute;
   inline-size: 116px;
 }
+[dir="rtl"] .wds-nudge-media-shopping-bag {
+  transform: scaleX(-1);
+}
 .wds-nudge-media-flower {
   margin-inline-start: -24px;
   margin-block-start: 11px;
   position: absolute;
   inline-size: 156px;
 }
+[dir="rtl"] .wds-nudge-media-flower {
+  transform: scaleX(-1);
+}
 .wds-nudge-media-backpack {
   margin-inline-start: -16px;
   margin-block-start: 6px;
   position: absolute;
   inline-size: 123px;
 }
+[dir="rtl"] .wds-nudge-media-backpack {
+  transform: scaleX(-1);
+}
 .wds-nudge-media-gift-box {
   margin-inline-start: -22px;
   margin-block-start: 6px;
   position: absolute;
   inline-size: 129px;
 }
+[dir="rtl"] .wds-nudge-media-gift-box {
+  transform: scaleX(-1);
+}
 .wds-nudge-media-documents {
   margin-inline-start: -8px;
   margin-block-start: 8px;
   position: absolute;
   inline-size: 120px;
 }
+[dir="rtl"] .wds-nudge-media-documents {
+  transform: scaleX(-1);
+}
 .wds-nudge-container {
   align-items: stretch;
   display: flex;

package/src/Nudge/Nudge.less

@@ -32,10 +32,6 @@
 
     &-globe {
       .media-position(161px, -76px, -5px);
-
-      [dir="rtl"] & {
-        .media-position(161px, -63px, -15px);
-      }
     }
 
     &-lock {
@@ -133,4 +129,8 @@
   margin-top: @margin-top;
   position: absolute;
   width: @size;
+
+  [dir="rtl"] & {
+    transform: scaleX(-1);
+  }
 }