@transferwise/components 46.160.0 → 46.160.2

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

@@ -55,6 +55,9 @@
   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;
@@ -134,37 +137,37 @@
 .process-stopped .process-icon-container {
   display: none;
 }
-.process-xs {
+.process-xxs {
   inline-size: 12px;
   block-size: 12px;
 }
-.process-xs .process-circle {
+.process-xxs .process-circle {
   /* Hide before animation to prevent glitching */
   stroke-dashoffset: 31.41592654px;
   stroke-dasharray: 31.41592654px;
   stroke-width: 1.5px;
 }
-.process-xs.process-danger .process-icon-horizontal {
+.process-xxs.process-danger .process-icon-horizontal {
   inset-block-start: 2.5px;
   block-size: 1px;
 }
-.process-xs.process-danger .process-icon-vertical {
+.process-xxs.process-danger .process-icon-vertical {
   inset-inline-start: 2.5px;
   inline-size: 1px;
 }
-.process-xs .process-icon-horizontal,
-.process-xs .process-icon-vertical {
+.process-xxs .process-icon-horizontal,
+.process-xxs .process-icon-vertical {
   border-radius: 0.5px;
 }
-.process-xs.process-success .process-icon-container {
+.process-xxs.process-success .process-icon-container {
   inline-size: 2.5px;
   block-size: 5px;
   inset-inline-start: 4.5px;
 }
-.process-xs.process-success .process-icon-horizontal {
+.process-xxs.process-success .process-icon-horizontal {
   block-size: 1px;
 }
-.process-xs.process-success .process-icon-vertical {
+.process-xxs.process-success .process-icon-vertical {
   inline-size: 1px;
 }
 .process-xs {
@@ -266,6 +269,9 @@
 .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,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/types/Calendar/Calendar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../../src/Calendar/Calendar.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAKxC,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAOtE,MAAM,WAAW,aAAa;IAC5B,+DAA+D;IAC/D,KAAK,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,8HAA8H;IAC9H,GAAG,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,2HAA2H;IAC3H,GAAG,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,8EAA8E;IAC9E,WAAW,CAAC,EAAE,GAAG,WAAW,EAAE,CAAC;IAC/B,+EAA+E;IAC/E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uNAAuN;IACvN,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,yJAAyJ;IACzJ,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,EAAE,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IAChE,sFAAsF;IACtF,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;CACxC;AAQD;;GAEG;AACH,QAAA,MAAM,QAAQ,GAAI,wGASf,aAAa,gCAmQf,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../../src/Calendar/Calendar.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAMxC,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAOtE,MAAM,WAAW,aAAa;IAC5B,+DAA+D;IAC/D,KAAK,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,8HAA8H;IAC9H,GAAG,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,2HAA2H;IAC3H,GAAG,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,8EAA8E;IAC9E,WAAW,CAAC,EAAE,GAAG,WAAW,EAAE,CAAC;IAC/B,+EAA+E;IAC/E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uNAAuN;IACvN,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,yJAAyJ;IACzJ,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,EAAE,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IAChE,sFAAsF;IACtF,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;CACxC;AAQD;;GAEG;AACH,QAAA,MAAM,QAAQ,GAAI,wGASf,aAAa,gCAqQf,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/build/types/Carousel/Carousel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../../src/Carousel/Carousel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,SAAS,EAA+B,MAAM,OAAO,CAAC;AAIxF,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAGjE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,iBAAiB,CAAC,QAAQ,CAAC,CAAC;IACzC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,kBAAkB,GAAG;IACrD,IAAI,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC1B,OAAO,EAAE,SAAS,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,kBAAkB,GAAG;IACnD,IAAI,EAAE,OAAO,CAAC;CACf,GAAG,IAAI,CAAC,kBAAkB,EAAE,MAAM,CAAC,CAAC;AAErC,MAAM,MAAM,YAAY,GAAG,mBAAmB,GAAG,iBAAiB,CAAC;AACnE,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAUD,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAmSrC,CAAC;AAYF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../../src/Carousel/Carousel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,SAAS,EAA+B,MAAM,OAAO,CAAC;AAKxF,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAGjE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,iBAAiB,CAAC,QAAQ,CAAC,CAAC;IACzC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,kBAAkB,GAAG;IACrD,IAAI,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC1B,OAAO,EAAE,SAAS,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,kBAAkB,GAAG;IACnD,IAAI,EAAE,OAAO,CAAC;CACf,GAAG,IAAI,CAAC,kBAAkB,EAAE,MAAM,CAAC,CAAC;AAErC,MAAM,MAAM,YAAY,GAAG,mBAAmB,GAAG,iBAAiB,CAAC;AACnE,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAUD,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAqSrC,CAAC;AAYF,eAAe,QAAQ,CAAC"}

package/build/types/Carousel/_stories/constants.d.ts

@@ -0,0 +1,3 @@
+import type { CarouselCard } from '../Carousel';
+export declare const stubbedCarouselCards: CarouselCard[];
+//# sourceMappingURL=constants.d.ts.map

package/build/types/Carousel/_stories/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../src/Carousel/_stories/constants.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,eAAO,MAAM,oBAAoB,EAAE,YAAY,EAyC9C,CAAC"}

package/build/types/ExpressiveMoneyInput/Chevron/Chevron.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Chevron.d.ts","sourceRoot":"","sources":["../../../../src/ExpressiveMoneyInput/Chevron/Chevron.tsx"],"names":[],"mappings":"AAIA,UAAU,KAAK;IACb,UAAU,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,OAAO,GAAI,gBAAuB,KAAK,gCA0BnD,CAAC"}
+{"version":3,"file":"Chevron.d.ts","sourceRoot":"","sources":["../../../../src/ExpressiveMoneyInput/Chevron/Chevron.tsx"],"names":[],"mappings":"AAMA,UAAU,KAAK;IACb,UAAU,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,OAAO,GAAI,gBAAuB,KAAK,gCA6BnD,CAAC"}

package/build/types/Prompt/CriticalBanner/CriticalBanner.d.ts

@@ -13,6 +13,11 @@ export type CriticalBannerProps = {
         label: ButtonProps['children'];
     };
     sentiment?: Exclude<PrimitivePromptProps['sentiment'], 'proposition'>;
+    /**
+     * Controls whether the banner plays its entry animation 500ms after mounting.
+     * Expand and collapse animations are unaffected.
+     */
+    animateEntry?: boolean;
     /**
      * Controls whether the description and actions are visible, as a controlled component.
      * When collapsed with a title, only the title is shown.
@@ -34,6 +39,6 @@ export type CriticalBannerProps = {
 
  * @see {@link https://docs.wise.design/components/critical-banner Design Spec}
  */
-export declare const CriticalBanner: ({ sentiment, title, description, media, action, actionSecondary, expanded: expandedProp, onToggle, id, className, "data-testid": testId, }: CriticalBannerProps) => import("react").JSX.Element;
+export declare const CriticalBanner: ({ sentiment, title, description, media, action, actionSecondary, animateEntry, expanded: expandedProp, onToggle, id, className, "data-testid": testId, }: CriticalBannerProps) => import("react").JSX.Element;
 export default CriticalBanner;
 //# sourceMappingURL=CriticalBanner.d.ts.map

package/build/types/Prompt/CriticalBanner/CriticalBanner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CriticalBanner.d.ts","sourceRoot":"","sources":["../../../../src/Prompt/CriticalBanner/CriticalBanner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,SAAS,EAAmB,MAAM,OAAO,CAAC;AAOhE,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAmB,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAE3E,OAAO,EAAqB,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAKxE,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,EAAE,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,MAAM,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC,GAAG;QAC1D,KAAK,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;KAChC,CAAC;IACF,eAAe,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC,GAAG;QACnE,KAAK,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;KAChC,CAAC;IACF,SAAS,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC,WAAW,CAAC,EAAE,aAAa,CAAC,CAAC;IACtE;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,GAAG,IAAI,CAAC,oBAAoB,EAAE,IAAI,GAAG,WAAW,GAAG,aAAa,CAAC,CAAC;AAEnE;;;;;GAKG;AACH,eAAO,MAAM,cAAc,GAAI,4IAY5B,mBAAmB,gCA4HrB,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"CriticalBanner.d.ts","sourceRoot":"","sources":["../../../../src/Prompt/CriticalBanner/CriticalBanner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,SAAS,EAAmB,MAAM,OAAO,CAAC;AAOhE,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAmB,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAE3E,OAAO,EAAqB,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAKxE,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,EAAE,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,MAAM,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC,GAAG;QAC1D,KAAK,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;KAChC,CAAC;IACF,eAAe,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC,GAAG;QACnE,KAAK,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;KAChC,CAAC;IACF,SAAS,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC,WAAW,CAAC,EAAE,aAAa,CAAC,CAAC;IACtE;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,GAAG,IAAI,CAAC,oBAAoB,EAAE,IAAI,GAAG,WAAW,GAAG,aAAa,CAAC,CAAC;AAEnE;;;;;GAKG;AACH,eAAO,MAAM,cAAc,GAAI,0JAa5B,mBAAmB,gCAoIrB,CAAC;AAEF,eAAe,cAAc,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAQA,OAAO,EAGL,iBAAiB,EAEjB,SAAS,EAKV,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,WAAW,EAAY,MAAM,WAAW,CAAC;AAClD,OAAO,EACL,cAAc,EACd,YAAY,EACZ,aAAa,EACb,WAAW,EACZ,MAAM,gCAAgC,CAAC;AAExC,MAAM,MAAM,YAAY,GAAG,iBAAiB,CAAC;IAC3C,QAAQ,CAAC,EAAE,WAAW,GAAG,aAAa,GAAG,cAAc,GAAG,YAAY,CAAC;IACvE,KAAK,EAAE,SAAS,CAAC;IACjB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC,GACA,WAAW,CAAC;AAEd,QAAA,MAAM,OAAO,GAAI,+CAMd,YAAY,gCA6Dd,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAQA,OAAO,EAGL,iBAAiB,EAEjB,SAAS,EAKV,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,WAAW,EAAY,MAAM,WAAW,CAAC;AAElD,OAAO,EACL,cAAc,EACd,YAAY,EACZ,aAAa,EACb,WAAW,EACZ,MAAM,gCAAgC,CAAC;AAExC,MAAM,MAAM,YAAY,GAAG,iBAAiB,CAAC;IAC3C,QAAQ,CAAC,EAAE,WAAW,GAAG,aAAa,GAAG,cAAc,GAAG,YAAY,CAAC;IACvE,KAAK,EAAE,SAAS,CAAC;IACjB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC,GACA,WAAW,CAAC;AAEd,QAAA,MAAM,OAAO,GAAI,+CAMd,YAAY,gCAsEd,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/build/types/common/Panel/Panel.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes, PropsWithChildren, RefObject, SyntheticEvent } from 'react';
-import { type FloatingPlacement } from '..';
+import { type FloatingPlacement } from './Panel.positionUtils';
 export type PanelProps = PropsWithChildren<{
     arrow?: boolean;
     flip?: boolean;

package/build/types/common/Panel/Panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../../src/common/Panel/Panel.tsx"],"names":[],"mappings":"AAWA,OAAO,EAEL,cAAc,EACd,iBAAiB,EACjB,SAAS,EACT,cAAc,EAIf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAY,KAAK,iBAAiB,EAAuB,MAAM,IAAI,CAAC;AAwB3E,MAAM,MAAM,UAAU,GAAG,iBAAiB,CAAC;IACzC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,GAAG,cAAc,KAAK,IAAI,CAAC;IAClD,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,SAAS,EAAE,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC;IACrC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC,GACA,cAAc,CAAC,cAAc,CAAC,CAAC;AAEjC,QAAA,MAAM,KAAK;YAZD,OAAO;WACR,OAAO;cACJ,OAAO;WACV,OAAO;cACJ,CAAC,KAAK,EAAE,KAAK,GAAG,cAAc,KAAK,IAAI;eACtC,iBAAiB;eACjB,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC;kBACtB,OAAO;qBACJ,OAAO;;;mFAkGxB,CAAC;AAEH,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../../src/common/Panel/Panel.tsx"],"names":[],"mappings":"AAUA,OAAO,EAEL,cAAc,EACd,iBAAiB,EACjB,SAAS,EACT,cAAc,EAIf,MAAM,OAAO,CAAC;AAMf,OAAO,EACL,KAAK,iBAAiB,EAKvB,MAAM,uBAAuB,CAAC;AAE/B,MAAM,MAAM,UAAU,GAAG,iBAAiB,CAAC;IACzC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,GAAG,cAAc,KAAK,IAAI,CAAC;IAClD,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,SAAS,EAAE,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC;IACrC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC,GACA,cAAc,CAAC,cAAc,CAAC,CAAC;AAEjC,QAAA,MAAM,KAAK;YAZD,OAAO;WACR,OAAO;cACJ,OAAO;WACV,OAAO;cACJ,CAAC,KAAK,EAAE,KAAK,GAAG,cAAc,KAAK,IAAI;eACtC,iBAAiB;eACjB,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC;kBACtB,OAAO;qBACJ,OAAO;;;mFAoGxB,CAAC;AAEH,eAAe,KAAK,CAAC"}

package/build/types/common/Panel/Panel.positionUtils.d.ts

@@ -0,0 +1,7 @@
+import type { Placement } from '@floating-ui/react';
+export type FloatingPlacement = 'top' | 'right' | 'bottom' | 'left' | 'top-left' | 'top-right' | 'right-top' | 'right-bottom' | 'bottom-left' | 'bottom-right' | 'left-top' | 'left-bottom';
+export declare const POPOVER_OFFSET = 16;
+export declare const fallbackPlacements: Record<Placement, Placement[]>;
+export declare const positionToPlacement: (position: FloatingPlacement) => Placement;
+export declare const mirrorPositionForRtl: (position: FloatingPlacement) => FloatingPlacement;
+//# sourceMappingURL=Panel.positionUtils.d.ts.map

package/build/types/common/Panel/Panel.positionUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.positionUtils.d.ts","sourceRoot":"","sources":["../../../../src/common/Panel/Panel.positionUtils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAEpD,MAAM,MAAM,iBAAiB,GACzB,KAAK,GACL,OAAO,GACP,QAAQ,GACR,MAAM,GACN,UAAU,GACV,WAAW,GACX,WAAW,GACX,cAAc,GACd,aAAa,GACb,cAAc,GACd,UAAU,GACV,aAAa,CAAC;AAElB,eAAO,MAAM,cAAc,KAAK,CAAC;AAKjC,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,SAAS,EAAE,SAAS,EAAE,CAa7D,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,UAAU,iBAAiB,KAAG,SAqBjE,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,UAAU,iBAAiB,KAAG,iBAmBlE,CAAC"}

package/build/types/common/PropsValues/position.d.ts

@@ -1,4 +1,3 @@
-import type { Placement } from '@floating-ui/react';
 export declare enum Position {
     BOTTOM = "bottom",
     BOTTOM_LEFT = "bottom-left",
@@ -19,16 +18,4 @@ export type PositionTop = 'top';
 export type PositionRight = 'right';
 export type PositionBottom = 'bottom';
 export type PositionLeft = 'left';
-export type PositionTopLeft = 'top-left';
-export type PositionTopRight = 'top-right';
-export type PositionBottomLeft = 'bottom-left';
-export type PositionBottomRight = 'bottom-right';
-export type PositionLeftTop = 'left-top';
-export type PositionLeftBottom = 'left-bottom';
-export type PositionRightTop = 'right-top';
-export type PositionRightBottom = 'right-bottom';
-/** Neptune position values that can be converted to floating-ui Placement */
-export type FloatingPlacement = PositionTop | PositionRight | PositionBottom | PositionLeft | PositionTopLeft | PositionTopRight | PositionRightTop | PositionRightBottom | PositionBottomLeft | PositionBottomRight | PositionLeftTop | PositionLeftBottom;
-/** Maps Neptune position values to floating-ui Placement */
-export declare const positionToPlacement: (position: FloatingPlacement) => Placement;
 //# sourceMappingURL=position.d.ts.map

package/build/types/common/PropsValues/position.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"position.d.ts","sourceRoot":"","sources":["../../../../src/common/PropsValues/position.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAEpD,oBAAY,QAAQ;IAClB,MAAM,WAAW;IACjB,WAAW,gBAAgB;IAC3B,YAAY,iBAAiB;IAC7B,MAAM,WAAW;IACjB,IAAI,SAAS;IACb,WAAW,gBAAgB;IAC3B,QAAQ,aAAa;IACrB,KAAK,UAAU;IACf,YAAY,iBAAiB;IAC7B,SAAS,cAAc;IACvB,GAAG,QAAQ;IACX,QAAQ,aAAa;IACrB,SAAS,cAAc;CACxB;AAED,MAAM,MAAM,cAAc,GAAG,QAAQ,CAAC;AACtC,MAAM,MAAM,WAAW,GAAG,KAAK,CAAC;AAChC,MAAM,MAAM,aAAa,GAAG,OAAO,CAAC;AACpC,MAAM,MAAM,cAAc,GAAG,QAAQ,CAAC;AACtC,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC;AAElC,MAAM,MAAM,eAAe,GAAG,UAAU,CAAC;AACzC,MAAM,MAAM,gBAAgB,GAAG,WAAW,CAAC;AAC3C,MAAM,MAAM,kBAAkB,GAAG,aAAa,CAAC;AAC/C,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC;AACjD,MAAM,MAAM,eAAe,GAAG,UAAU,CAAC;AACzC,MAAM,MAAM,kBAAkB,GAAG,aAAa,CAAC;AAC/C,MAAM,MAAM,gBAAgB,GAAG,WAAW,CAAC;AAC3C,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC;AAEjD,6EAA6E;AAC7E,MAAM,MAAM,iBAAiB,GACzB,WAAW,GACX,aAAa,GACb,cAAc,GACd,YAAY,GACZ,eAAe,GACf,gBAAgB,GAChB,gBAAgB,GAChB,mBAAmB,GACnB,kBAAkB,GAClB,mBAAmB,GACnB,eAAe,GACf,kBAAkB,CAAC;AAEvB,4DAA4D;AAC5D,eAAO,MAAM,mBAAmB,GAAI,UAAU,iBAAiB,KAAG,SAqBjE,CAAC"}
+{"version":3,"file":"position.d.ts","sourceRoot":"","sources":["../../../../src/common/PropsValues/position.ts"],"names":[],"mappings":"AAAA,oBAAY,QAAQ;IAClB,MAAM,WAAW;IACjB,WAAW,gBAAgB;IAC3B,YAAY,iBAAiB;IAC7B,MAAM,WAAW;IACjB,IAAI,SAAS;IACb,WAAW,gBAAgB;IAC3B,QAAQ,aAAa;IACrB,KAAK,UAAU;IACf,YAAY,iBAAiB;IAC7B,SAAS,cAAc;IACvB,GAAG,QAAQ;IACX,QAAQ,aAAa;IACrB,SAAS,cAAc;CACxB;AAED,MAAM,MAAM,cAAc,GAAG,QAAQ,CAAC;AACtC,MAAM,MAAM,WAAW,GAAG,KAAK,CAAC;AAChC,MAAM,MAAM,aAAa,GAAG,OAAO,CAAC;AACpC,MAAM,MAAM,cAAc,GAAG,QAAQ,CAAC;AACtC,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC"}

package/build/types/common/ResponsivePanel/ResponsivePanel.d.ts

@@ -4,7 +4,7 @@ declare const ResponsivePanel: import("react").ForwardRefExoticComponent<{
     altAxis?: boolean;
     open?: boolean;
     onClose?: (event: Event | import("react").SyntheticEvent) => void;
-    position?: import("..").FloatingPlacement;
+    position?: import("../Panel/Panel.positionUtils").FloatingPlacement;
     anchorRef: import("react").RefObject<Element | null>;
     anchorWidth?: boolean;
     considerHeight?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.160.0",
+  "version": "46.160.2",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -52,7 +52,7 @@
     "@rollup/plugin-url": "^8.0.2",
     "@storybook/addon-a11y": "^10.5.4",
     "@storybook/addon-docs": "^10.5.4",
-    "@storybook/addon-mcp": "^0.6.0",
+    "@storybook/addon-mcp": "^0.7.0",
     "@storybook/addon-webpack5-compiler-babel": "^4.0.1",
     "@storybook/react-webpack5": "^10.5.4",
     "@testing-library/dom": "^10.4.1",
@@ -71,12 +71,12 @@
     "@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.31.1",
+    "@wise/art": "^2.32.0",
     "@wise/eslint-config": "^14.2.1",
     "babel-plugin-formatjs": "^11.3.16",
-    "eslint": "^9.39.4",
+    "eslint": "^9.39.5",
     "eslint-plugin-storybook": "^10.5.4",
     "gulp": "^5.0.1",
     "jest": "^29.7.0",
@@ -92,8 +92,8 @@
     "storybook-addon-tag-badges": "^3.1.0",
     "storybook-addon-test-codegen": "^3.0.4",
     "@transferwise/less-config": "3.2.0",
-    "@wise/wds-configs": "0.0.0",
-    "@wise/components-theming": "1.10.3"
+    "@wise/components-theming": "1.10.3",
+    "@wise/wds-configs": "0.0.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3 || ^4",
@@ -121,7 +121,7 @@
     "lodash.debounce": "^4.0.8",
     "merge-props": "^6.0.0",
     "react-transition-group": "^4.4.5",
-    "virtua": "^0.49.3"
+    "virtua": "^0.50.0"
   },
   "publishConfig": {
     "access": "public",

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,10 +4,18 @@
   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,10 +4,18 @@
   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,8 +4,14 @@
   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)) left
+      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)),

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', 'rtl'], {
+  ...withVariantConfig(['default', 'dark', 'bright-green', 'forest-green'], {
     parameters: {
       padding: '0',
     },