@transferwise/components 0.0.0-experimental-8b2d17e → 0.0.0-experimental-2e92e2c

package/build/main.css

@@ -19403,10 +19403,13 @@ a[data-toggle="tooltip"] {
   position: absolute;
   background: #ffffff;
   background: var(--color-background-screen);
-  transform: translateX(0.5px) rotate(-45deg);
+  transform: translateX(-1.5px) rotate(-45deg);
   transform-origin: left bottom;
-  inset-inline-start: 8px;
-  inset-inline-start: var(--size-8);
+}
+[dir="rtl"] .tw-checkbox-check::before,
+[dir="rtl"] .tw-checkbox-check::after {
+  transform: translateX(-1.5px) rotate(-45deg) scaleX(-1);
+  transform-origin: right bottom;
 }
 .tw-checkbox-check .has-error::before,
 .tw-checkbox-check .has-error::after {
@@ -21238,6 +21241,9 @@ a[data-toggle="tooltip"] {
   background: var(--color-background-screen);
   transform: translate(-50%, -50%);
 }
+[dir="rtl"] .np-tw-checkbox-indeterminate::after {
+  transform: translateX(50%);
+}
 .np-tw-checkbox-indeterminate .has-error::after {
   background-color: #e74848;
   background-color: var(--color-interactive-negative);
@@ -26929,8 +26935,7 @@ button.np-link {
 .np-upload-input__item .np-upload-input__title,
 .np-upload-input__item .np-upload-input__text {
   margin: 0;
-  -moz-text-align-last: left;
-       text-align-last: left;
+  text-align: start;
   color: #5d7079;
   color: var(--color-content-secondary);
 }
@@ -26986,7 +26991,7 @@ button.np-link {
   justify-content: center;
 }
 .np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button:before {
-  content: '';
+  content: "";
   display: block;
   inline-size: var(--clickAreaSize);
   block-size: var(--clickAreaSize);
@@ -27041,8 +27046,8 @@ button.np-link {
   padding-inline-start: var(--size-16);
 }
 .np-upload-input__item .np-upload-input-errors > li::before {
-  content: '•' ;
-  content: '•' / '';
+  content: "•" ;
+  content: "•" / "";
   position: absolute;
   display: block;
   inset-inline-start: 0;

package/build/styles/CheckboxButton/CheckboxButton.css

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

package/build/styles/UploadInput/UploadItem/UploadItem.css

@@ -41,8 +41,7 @@
 .np-upload-input__item .np-upload-input__title,
 .np-upload-input__item .np-upload-input__text {
   margin: 0;
-  -moz-text-align-last: left;
-       text-align-last: left;
+  text-align: start;
   color: #5d7079;
   color: var(--color-content-secondary);
 }
@@ -98,7 +97,7 @@
   justify-content: center;
 }
 .np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button:before {
-  content: '';
+  content: "";
   display: block;
   inline-size: var(--clickAreaSize);
   block-size: var(--clickAreaSize);
@@ -153,8 +152,8 @@
   padding-inline-start: var(--size-16);
 }
 .np-upload-input__item .np-upload-input-errors > li::before {
-  content: '•' ;
-  content: '•' / '';
+  content: "•" ;
+  content: "•" / "";
   position: absolute;
   display: block;
   inset-inline-start: 0;

package/build/styles/css/neptune.css

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

package/build/styles/css/tick.css

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

package/build/styles/main.css

@@ -19403,10 +19403,13 @@ a[data-toggle="tooltip"] {
   position: absolute;
   background: #ffffff;
   background: var(--color-background-screen);
-  transform: translateX(0.5px) rotate(-45deg);
+  transform: translateX(-1.5px) rotate(-45deg);
   transform-origin: left bottom;
-  inset-inline-start: 8px;
-  inset-inline-start: var(--size-8);
+}
+[dir="rtl"] .tw-checkbox-check::before,
+[dir="rtl"] .tw-checkbox-check::after {
+  transform: translateX(-1.5px) rotate(-45deg) scaleX(-1);
+  transform-origin: right bottom;
 }
 .tw-checkbox-check .has-error::before,
 .tw-checkbox-check .has-error::after {
@@ -21238,6 +21241,9 @@ a[data-toggle="tooltip"] {
   background: var(--color-background-screen);
   transform: translate(-50%, -50%);
 }
+[dir="rtl"] .np-tw-checkbox-indeterminate::after {
+  transform: translateX(50%);
+}
 .np-tw-checkbox-indeterminate .has-error::after {
   background-color: #e74848;
   background-color: var(--color-interactive-negative);
@@ -26929,8 +26935,7 @@ button.np-link {
 .np-upload-input__item .np-upload-input__title,
 .np-upload-input__item .np-upload-input__text {
   margin: 0;
-  -moz-text-align-last: left;
-       text-align-last: left;
+  text-align: start;
   color: #5d7079;
   color: var(--color-content-secondary);
 }
@@ -26986,7 +26991,7 @@ button.np-link {
   justify-content: center;
 }
 .np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button:before {
-  content: '';
+  content: "";
   display: block;
   inline-size: var(--clickAreaSize);
   block-size: var(--clickAreaSize);
@@ -27041,8 +27046,8 @@ button.np-link {
   padding-inline-start: var(--size-16);
 }
 .np-upload-input__item .np-upload-input-errors > li::before {
-  content: '•' ;
-  content: '•' / '';
+  content: "•" ;
+  content: "•" / "";
   position: absolute;
   display: block;
   inset-inline-start: 0;

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

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

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

@@ -10,10 +10,13 @@
   position: absolute;
   background: #ffffff;
   background: var(--color-background-screen);
-  transform: translateX(0.5px) rotate(-45deg);
+  transform: translateX(-1.5px) rotate(-45deg);
   transform-origin: left bottom;
-  inset-inline-start: 8px;
-  inset-inline-start: var(--size-8);
+}
+[dir="rtl"] .tw-checkbox-check::before,
+[dir="rtl"] .tw-checkbox-check::after {
+  transform: translateX(-1.5px) rotate(-45deg) scaleX(-1);
+  transform-origin: right bottom;
 }
 .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-8b2d17e",
+  "version": "0.0.0-experimental-2e92e2c",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -91,7 +91,7 @@
     "storybook": "^10.5.4",
     "storybook-addon-tag-badges": "^3.1.0",
     "storybook-addon-test-codegen": "^3.0.4",
-    "@transferwise/less-config": "0.0.0-experimental-8b2d17e",
+    "@transferwise/less-config": "0.0.0-experimental-2e92e2c",
     "@wise/components-theming": "1.10.3",
     "@wise/wds-configs": "0.0.0"
   },

package/src/CheckboxButton/CheckboxButton.css

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

package/src/CheckboxButton/CheckboxButton.less

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

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 onChange={() => {}} />,
+  checkbox: <ListItem.Checkbox checked onChange={() => {}} />,
   radio: <ListItem.Radio name="radio" value={Math.random().toString()} onChange={() => {}} />,
   switch: <ListItem.Switch onClick={() => {}} />,
   iconButton: (

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

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import Loader from '..';
+
+export default {
+  component: Loader,
+  title: 'Loading/Loader/Tests',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof Loader>;
+
+type Story = StoryObj<typeof Loader>;
+
+export const RTLDiff: Story = {
+  render: () => (
+    <>
+      <Loader size="sm" displayInstantly />
+      <Loader size="md" displayInstantly />
+      <Loader size="sm" displayInstantly label="Sending your money" />
+      <Loader size="md" displayInstantly label="Sending your money" />
+    </>
+  ),
+  ...withRTLDiff(),
+};

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

@@ -10,28 +10,45 @@ export default {
 
 type Story = StoryObj<typeof Nudge>;
 
+const MEDIA_NAMES = [
+  'globe',
+  'lock',
+  'wallet',
+  'gear',
+  'invite-letter',
+  'personal-card',
+  'business-card',
+  'heart',
+  'multi-currency',
+  'shopping-bag',
+  'flower',
+  'gift-box',
+  'backpack',
+  'documents',
+] as const;
+
 export const RTLDiff: Story = {
   render: () => (
     <>
+      {MEDIA_NAMES.map((mediaName) => (
+        <Nudge
+          key={mediaName}
+          mediaName={mediaName}
+          title={mediaName}
+          link="Link"
+          href="#"
+          onDismiss={() => {}}
+        />
+      ))}
       <Nudge
         mediaName="globe"
-        title="With media and dismiss"
-        link="Link"
-        href="#"
-        onDismiss={() => {}}
-      />
-      <div style={{ marginTop: 16 }} />
-      <Nudge
-        mediaName="globe"
-        title="With media, action, and dismiss"
+        title="With action"
         action={{ text: 'Learn more', href: '#' }}
         onDismiss={() => {}}
       />
-      <div style={{ marginTop: 16 }} />
       <Nudge title="Without media, with dismiss" link="Link" href="#" onDismiss={() => {}} />
-      <div style={{ marginTop: 16 }} />
       <Nudge title="Without media, no dismiss" link="Link" href="#" />
     </>
   ),
-  ...withRTLDiff(),
+  ...withRTLDiff({ width: 'stretch' }),
 };

package/src/UploadInput/UploadItem/UploadItem.css

@@ -41,8 +41,7 @@
 .np-upload-input__item .np-upload-input__title,
 .np-upload-input__item .np-upload-input__text {
   margin: 0;
-  -moz-text-align-last: left;
-       text-align-last: left;
+  text-align: start;
   color: #5d7079;
   color: var(--color-content-secondary);
 }
@@ -98,7 +97,7 @@
   justify-content: center;
 }
 .np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button:before {
-  content: '';
+  content: "";
   display: block;
   inline-size: var(--clickAreaSize);
   block-size: var(--clickAreaSize);
@@ -153,8 +152,8 @@
   padding-inline-start: var(--size-16);
 }
 .np-upload-input__item .np-upload-input-errors > li::before {
-  content: '•' ;
-  content: '•' / '';
+  content: "•" ;
+  content: "•" / "";
   position: absolute;
   display: block;
   inset-inline-start: 0;

package/src/UploadInput/UploadItem/UploadItem.less

@@ -39,7 +39,7 @@
   .np-upload-input__title,
   .np-upload-input__text {
     margin: 0;
-    text-align-last: left;
+    text-align: left;
     color: var(--color-content-secondary);
   }
 
@@ -64,7 +64,7 @@
     --buttonTopRightOffset: var(--size-16);
     // Offset towards the parent's top-right edge
     // ensuring no overflow on smaller screens
-    --clickAreaTopRightOffset: calc((var(--clickAreaSize) - var(--iconSize)) * -.5);
+    --clickAreaTopRightOffset: calc((var(--clickAreaSize) - var(--iconSize)) * -0.5);
 
     position: absolute;
     right: var(--buttonTopRightOffset);
@@ -84,14 +84,16 @@
       border: 0;
       background-color: var(--color-background-neutral);
       color: var(--color-interactive-primary);
-      transition: color, background-color 0.15s ease-in-out;
+      transition:
+        color,
+        background-color 0.15s ease-in-out;
       outline-offset: 0;
       display: flex;
       align-items: center;
       justify-content: center;
 
       &:before {
-        content: '';
+        content: "";
         display: block;
         width: var(--clickAreaSize);
         height: var(--clickAreaSize);
@@ -116,7 +118,6 @@
     padding: 0;
 
     &:hover:not(:has(.np-upload-input__item-button:hover)) {
-
       &:before,
       & + .np-upload-input__item:before {
         width: 100%;
@@ -158,7 +159,7 @@
       padding-left: var(--size-16);
 
       &::before {
-        content: '•' / '';
+        content: "•" / "";
         position: absolute;
         display: block;
         left: 0;

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

@@ -345,5 +345,5 @@ export const RTLDiff: Story = {
       />
     </>
   ),
-  ...withRTLDiff(),
+  ...withRTLDiff({ renderAs: 'iframe' }),
 };

package/src/main.css

@@ -19403,10 +19403,13 @@ a[data-toggle="tooltip"] {
   position: absolute;
   background: #ffffff;
   background: var(--color-background-screen);
-  transform: translateX(0.5px) rotate(-45deg);
+  transform: translateX(-1.5px) rotate(-45deg);
   transform-origin: left bottom;
-  inset-inline-start: 8px;
-  inset-inline-start: var(--size-8);
+}
+[dir="rtl"] .tw-checkbox-check::before,
+[dir="rtl"] .tw-checkbox-check::after {
+  transform: translateX(-1.5px) rotate(-45deg) scaleX(-1);
+  transform-origin: right bottom;
 }
 .tw-checkbox-check .has-error::before,
 .tw-checkbox-check .has-error::after {
@@ -21238,6 +21241,9 @@ a[data-toggle="tooltip"] {
   background: var(--color-background-screen);
   transform: translate(-50%, -50%);
 }
+[dir="rtl"] .np-tw-checkbox-indeterminate::after {
+  transform: translateX(50%);
+}
 .np-tw-checkbox-indeterminate .has-error::after {
   background-color: #e74848;
   background-color: var(--color-interactive-negative);
@@ -26929,8 +26935,7 @@ button.np-link {
 .np-upload-input__item .np-upload-input__title,
 .np-upload-input__item .np-upload-input__text {
   margin: 0;
-  -moz-text-align-last: left;
-       text-align-last: left;
+  text-align: start;
   color: #5d7079;
   color: var(--color-content-secondary);
 }
@@ -26986,7 +26991,7 @@ button.np-link {
   justify-content: center;
 }
 .np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button:before {
-  content: '';
+  content: "";
   display: block;
   inline-size: var(--clickAreaSize);
   block-size: var(--clickAreaSize);
@@ -27041,8 +27046,8 @@ button.np-link {
   padding-inline-start: var(--size-16);
 }
 .np-upload-input__item .np-upload-input-errors > li::before {
-  content: '•' ;
-  content: '•' / '';
+  content: "•" ;
+  content: "•" / "";
   position: absolute;
   display: block;
   inset-inline-start: 0;

package/src/styles/less/neptune.css

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

package/src/styles/less/tick.css

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

package/src/styles/less/tick.less

@@ -11,9 +11,13 @@
     content: "";
     position: absolute;
     background: var(--color-background-screen);
-    transform: translateX(0.5px) rotate(-45deg);
+    transform: translateX(-1.5px) rotate(-45deg);
     transform-origin: left bottom;
-    left: var(--size-8);
+
+    [dir="rtl"] & {
+      transform: translateX(-1.5px) rotate(-45deg) scaleX(-1);
+      transform-origin: right bottom;
+    }
   }
 
   .has-error {
@@ -34,4 +38,4 @@
     height: 2px;
     width: 11px;
   }
-}
+}