@transferwise/components 0.0.0-experimental-102c421 → 0.0.0-experimental-151e673

package/build/styles/styles/less/accordion.css

@@ -5,9 +5,6 @@
 .tw-chevron.top {
   transform: rotate(0deg);
 }
-[dir="rtl"] .tw-chevron.top {
-  transform: rotate(360deg);
-}
 .tw-chevron.right {
   transform: rotate(90deg);
 }

package/build/styles/styles/less/buttons.css

@@ -1277,11 +1277,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;

package/build/styles/styles/less/chevron.css

@@ -5,9 +5,6 @@
 .tw-chevron.top {
   transform: rotate(0deg);
 }
-[dir="rtl"] .tw-chevron.top {
-  transform: rotate(360deg);
-}
 .tw-chevron.right {
   transform: rotate(90deg);
 }

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/build/types/SegmentedControl/SegmentedControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../src/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"AAMA,KAAK,WAAW,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAEhE,KAAK,OAAO,GAAG,WAAW,GAAG;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAClD,KAAK,mBAAmB,GAAG,WAAW,GAAG;IAAE,QAAQ,EAAE,MAAM,CAAA;CAAE,CAAC;AAE9D,MAAM,MAAM,QAAQ,GAAG,SAAS,OAAO,EAAE,GAAG,SAAS,mBAAmB,EAAE,CAAC;AAE3E,KAAK,yBAAyB,GAAG;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,OAAO,GAAG,MAAM,CAAC;IACvB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF,KAAK,yBAAyB,GAAG;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,SAAS,mBAAmB,EAAE,CAAC;CAC1C,CAAC;AAEF,KAAK,0BAA0B,GAAG;IAChC,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,SAAS,OAAO,EAAE,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,yBAAyB,GAC3D,CAAC,yBAAyB,GAAG,0BAA0B,CAAC,CAAC;AAE3D,QAAA,MAAM,gBAAgB,GAAI,4CAMvB,qBAAqB,gCAgIvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../src/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"AAOA,KAAK,WAAW,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAEhE,KAAK,OAAO,GAAG,WAAW,GAAG;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAClD,KAAK,mBAAmB,GAAG,WAAW,GAAG;IAAE,QAAQ,EAAE,MAAM,CAAA;CAAE,CAAC;AAE9D,MAAM,MAAM,QAAQ,GAAG,SAAS,OAAO,EAAE,GAAG,SAAS,mBAAmB,EAAE,CAAC;AAE3E,KAAK,yBAAyB,GAAG;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,OAAO,GAAG,MAAM,CAAC;IACvB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF,KAAK,yBAAyB,GAAG;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,SAAS,mBAAmB,EAAE,CAAC;CAC1C,CAAC;AAEF,KAAK,0BAA0B,GAAG;IAChC,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,SAAS,OAAO,EAAE,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,yBAAyB,GAC3D,CAAC,yBAAyB,GAAG,0BAA0B,CAAC,CAAC;AAE3D,QAAA,MAAM,gBAAgB,GAAI,4CAMvB,qBAAqB,gCAqIvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-102c421",
+  "version": "0.0.0-experimental-151e673",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/AvatarLayout/AvatarLayout.css

@@ -8,35 +8,52 @@
   block-size: var(--np-avatar-layout-size);
 }
 .np-avatar-layout-diagonal-mask {
+  --np-avatar-layout-mask-direction: right;
   -webkit-mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) right calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
           mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) right calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
+  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) var(--np-avatar-layout-mask-direction) calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
+          mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) var(--np-avatar-layout-mask-direction) calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
 }
 [dir="rtl"] .np-avatar-layout-diagonal-mask {
-  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) left calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
-          mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) left calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
+  --np-avatar-layout-mask-direction: left;
+  margin-inline-start: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
+  margin-inline-end: unset;
 }
 .np-avatar-layout-diagonal-child {
   margin-inline-start: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
   margin-block-start: calc(var(--np-avatar-layout-size) - var(--np-avatar-size));
 }
 [dir="rtl"] .np-avatar-layout-diagonal-child {
-  margin-inline-start: 0;
-  margin-inline-end: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
+  -webkit-mask-image: initial;
+          mask-image: initial;
 }
 .np-avatar-layout-horizontal {
+  --np-avatar-layout-mask-direction: left;
   inline-size: calc(var(--np-avatar-size) * var(--np-avatar-avatars-count) - (var(--np-avatar-offset) * (var(--np-avatar-avatars-count) - 1)));
   inline-size: calc(var(--np-avatar-size) * var(--np-avatar-avatars-count) - calc(var(--np-avatar-offset) * calc(var(--np-avatar-avatars-count) - 1)));
   block-size: var(--np-avatar-layout-size);
 }
-.np-avatar-layout-horizontal-mask {
-  -webkit-mask-image: radial-gradient(circle at top calc(100% - (var(--np-avatar-size) / 2)) left calc(100% + (var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
-          mask-image: radial-gradient(circle at top calc(100% - (var(--np-avatar-size) / 2)) left calc(100% + (var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
-  -webkit-mask-image: radial-gradient(circle at top calc(100% - calc(var(--np-avatar-size) / 2)) left calc(100% + calc(var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
-          mask-image: radial-gradient(circle at top calc(100% - calc(var(--np-avatar-size) / 2)) left calc(100% + calc(var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
+[dir="rtl"] .np-avatar-layout-horizontal {
+  --np-avatar-layout-mask-direction: right;
+}
+.np-avatar-layout-horizontal-mask,
+[dir="rtl"] .np-avatar-layout-horizontal-child {
+  -webkit-mask-image: radial-gradient(circle at top calc(100% - (var(--np-avatar-size) / 2)) var(--np-avatar-layout-mask-direction) calc(100% + (var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
+          mask-image: radial-gradient(circle at top calc(100% - (var(--np-avatar-size) / 2)) var(--np-avatar-layout-mask-direction) calc(100% + (var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
+  -webkit-mask-image: radial-gradient(circle at top calc(100% - calc(var(--np-avatar-size) / 2)) var(--np-avatar-layout-mask-direction) calc(100% + calc(var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
+          mask-image: radial-gradient(circle at top calc(100% - calc(var(--np-avatar-size) / 2)) var(--np-avatar-layout-mask-direction) calc(100% + calc(var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
+}
+[dir="rtl"] .np-avatar-layout-horizontal-mask {
+  margin-inline-end: calc(var(--np-avatar-offset) * -1);
+}
+[dir="rtl"] .np-avatar-layout-horizontal-mask:last-child {
+  -webkit-mask-image: initial;
+          mask-image: initial;
 }
 .np-avatar-layout-horizontal-child {
   margin-inline-start: calc(var(--np-avatar-offset) * -1);
 }
 [dir="rtl"] .np-avatar-layout-horizontal-child {
+  margin-inline-start: unset;
   margin-inline-end: calc(var(--np-avatar-offset) * -1);
 }

package/src/AvatarLayout/AvatarLayout.less

@@ -8,18 +8,20 @@
     height: var(--np-avatar-layout-size);
 
     &-mask {
-      mask-image:
-        radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) right calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)),
-          transparent 0,
-          transparent calc(var(--np-avatar-size) / 2 + 2px),
-          black 0);
-    
-      :dir(rtl) & {
-        mask-image:
-          radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) left calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)),
-            transparent 0,
-            transparent calc(var(--np-avatar-size) / 2 + 2px),
-            black 0);
+      --np-avatar-layout-mask-direction: right;
+      mask-image: radial-gradient(
+        circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset))
+          var(--np-avatar-layout-mask-direction)
+          calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)),
+        transparent 0,
+        transparent calc(var(--np-avatar-size) / 2 + 2px),
+        black 0
+      );
+
+      [dir="rtl"] & {
+        --np-avatar-layout-mask-direction: left;
+        margin-left: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
+        margin-right: unset;
       }
     }
 
@@ -27,30 +29,52 @@
       margin-left: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
       margin-top: calc(var(--np-avatar-layout-size) - var(--np-avatar-size));
 
-      :dir(rtl) & {
-        margin-left: 0;
-        margin-right: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
+      [dir="rtl"] & {
+        mask-image: unset;
       }
     }
   }
 
   &-horizontal {
-    width: calc(var(--np-avatar-size) * var(--np-avatar-avatars-count) - calc(var(--np-avatar-offset) * calc(var(--np-avatar-avatars-count) - 1)));
+    --np-avatar-layout-mask-direction: left;
+    width: calc(
+      var(--np-avatar-size) * var(--np-avatar-avatars-count) -
+        calc(var(--np-avatar-offset) * calc(var(--np-avatar-avatars-count) - 1))
+    );
     height: var(--np-avatar-layout-size);
 
+    [dir="rtl"] & {
+      --np-avatar-layout-mask-direction: right;
+    }
+
+    &-mask,
+    [dir="rtl"] &-child {
+      mask-image: radial-gradient(
+        circle at top calc(100% - calc(var(--np-avatar-size) / 2))
+          var(--np-avatar-layout-mask-direction)
+          calc(100% + calc(var(--np-avatar-size) / 2) - var(--np-avatar-offset)),
+        transparent,
+        transparent calc(var(--np-avatar-size) / 2 + 2px),
+        black 0
+      );
+    }
+
     &-mask {
-      mask-image: radial-gradient(circle at top calc(100% - calc(var(--np-avatar-size) / 2)) left calc(100% + calc(var(--np-avatar-size) / 2) - var(--np-avatar-offset)),
-          transparent,
-          transparent calc(var(--np-avatar-size) / 2 + 2px),
-          black 0);
+      [dir="rtl"] & {
+        &:last-child {
+          mask-image: unset;
+        }
+        margin-right: calc(var(--np-avatar-offset) * -1);
+      }
     }
 
     &-child {
       margin-left: calc(var(--np-avatar-offset) * -1);
 
-      :dir(rtl) & {
+      [dir="rtl"] & {
+        margin-left: unset;
         margin-right: calc(var(--np-avatar-offset) * -1);
       }
     }
   }
-}
+}

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

@@ -117,27 +117,26 @@ export const EdgeInstances: Story = {
   ),
 };
 
+const horizontalSizes = [16, 24, 32, 40, 48, 56, 72, 88, 96] as const;
+const diagonalSizes = [24, 32, 40, 48, 56, 72, 88, 96] as const;
+
+const rowStyle = { display: 'flex', alignItems: 'center', gap: '16px', flexWrap: 'wrap' } as const;
+const twoAvatars = [{ asset: <Plane /> }, { asset: <Plane /> }] as const;
+
 export const RTLDiff: Story = {
   render: () => (
     <>
-      <AvatarLayout
-        orientation="horizontal"
-        size={48}
-        avatars={[{ asset: <Flag code="br" /> }, { asset: <Flag code="jp" /> }]}
-      />
-
-      <AvatarLayout
-        orientation="horizontal"
-        size={48}
-        interactive
-        avatars={[{ asset: <Freeze /> }, { asset: <Freeze /> }]}
-      />
+      <div style={rowStyle}>
+        {horizontalSizes.map((size) => (
+          <AvatarLayout key={size} orientation="horizontal" size={size} avatars={[...twoAvatars]} />
+        ))}
+      </div>
 
-      <AvatarLayout
-        orientation="horizontal"
-        size={48}
-        avatars={[{ profileName: 'Jay Jay' }, { profileName: 'Amy Amy' }]}
-      />
+      <div style={rowStyle}>
+        {diagonalSizes.map((size) => (
+          <AvatarLayout key={size} orientation="diagonal" size={size} avatars={[...twoAvatars]} />
+        ))}
+      </div>
 
       <AvatarLayout
         orientation="horizontal"
@@ -148,32 +147,8 @@ export const RTLDiff: Story = {
 
       <AvatarLayout
         orientation="horizontal"
-        size={32}
-        avatars={[{ asset: <Flag code="eu" /> }, { asset: <Flag code="gb" /> }]}
-      />
-
-      <AvatarLayout
-        orientation="horizontal"
-        size={72}
-        avatars={[{ asset: <Freeze /> }, { asset: <Freeze /> }, { asset: <Freeze /> }]}
-      />
-
-      <AvatarLayout
-        orientation="diagonal"
-        size={48}
-        avatars={[{ asset: <Flag code="br" /> }, { asset: <Flag code="jp" /> }]}
-      />
-
-      <AvatarLayout
-        orientation="diagonal"
-        size={48}
-        avatars={[{ profileName: 'Jay Jay' }, { profileName: 'Amy Amy' }]}
-      />
-
-      <AvatarLayout
-        orientation="diagonal"
         size={72}
-        avatars={[{ asset: <Freeze /> }, { asset: <Freeze /> }]}
+        avatars={[{ asset: <Plane /> }, { asset: <Plane /> }, { asset: <Plane /> }]}
       />
     </>
   ),

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(),
 };