@transferwise/components 0.0.0-experimental-5ff6475 → 0.0.0-experimental-f16de49

package/build/styles/main.css

@@ -20354,53 +20354,36 @@ a[data-toggle="tooltip"] {
   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 {
-  --np-avatar-layout-mask-direction: left;
-  margin-inline-start: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
-  margin-inline-end: unset;
+  -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-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 {
-  -webkit-mask-image: initial;
-          mask-image: initial;
+  margin-inline-start: 0;
+  margin-inline-end: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
 }
 .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);
 }
-[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-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);
 }
 .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);
 }
 .np-icon-button {
@@ -25818,8 +25801,7 @@ button.np-link {
   background: var(--color-background-screen);
   border-radius: 24px;
   border-radius: var(--size-24);
-  transition: left 300ms,
-    right 300ms;
+  transition: left 300ms;
 }
 .segmented-control__segments--no-animate::after {
   transition: none !important;

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

@@ -1 +1 @@
-{"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"}
+{"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"}

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,gCAiEd,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-5ff6475",
+  "version": "0.0.0-experimental-f16de49",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -91,9 +91,9 @@
     "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-5ff6475",
-    "@wise/wds-configs": "0.0.0",
-    "@wise/components-theming": "1.10.3"
+    "@transferwise/less-config": "0.0.0-experimental-f16de49",
+    "@wise/components-theming": "1.10.3",
+    "@wise/wds-configs": "0.0.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3 || ^4",

package/src/AvatarLayout/AvatarLayout.css

@@ -8,52 +8,35 @@
   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 {
-  --np-avatar-layout-mask-direction: left;
-  margin-inline-start: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
-  margin-inline-end: unset;
+  -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-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 {
-  -webkit-mask-image: initial;
-          mask-image: initial;
+  margin-inline-start: 0;
+  margin-inline-end: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
 }
 .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);
 }
-[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-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);
 }
 .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,20 +8,18 @@
     height: var(--np-avatar-layout-size);
 
     &-mask {
-      --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;
+      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);
       }
     }
 
@@ -29,52 +27,30 @@
       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"] & {
-        mask-image: unset;
+      :dir(rtl) & {
+        margin-left: 0;
+        margin-right: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
       }
     }
   }
 
   &-horizontal {
-    --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))
-    );
+    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 {
-      [dir="rtl"] & {
-        &:last-child {
-          mask-image: unset;
-        }
-        margin-right: calc(var(--np-avatar-offset) * -1);
-      }
+      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);
     }
 
     &-child {
       margin-left: calc(var(--np-avatar-offset) * -1);
 
-      [dir="rtl"] & {
-        margin-left: unset;
+      :dir(rtl) & {
         margin-right: calc(var(--np-avatar-offset) * -1);
       }
     }
   }
-}
+}

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

@@ -117,26 +117,27 @@ 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: () => (
     <>
-      <div style={rowStyle}>
-        {horizontalSizes.map((size) => (
-          <AvatarLayout key={size} orientation="horizontal" size={size} avatars={[...twoAvatars]} />
-        ))}
-      </div>
+      <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}>
-        {diagonalSizes.map((size) => (
-          <AvatarLayout key={size} orientation="diagonal" size={size} avatars={[...twoAvatars]} />
-        ))}
-      </div>
+      <AvatarLayout
+        orientation="horizontal"
+        size={48}
+        avatars={[{ profileName: 'Jay Jay' }, { profileName: 'Amy Amy' }]}
+      />
 
       <AvatarLayout
         orientation="horizontal"
@@ -147,8 +148,32 @@ 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: <Plane /> }, { asset: <Plane /> }, { asset: <Plane /> }]}
+        avatars={[{ asset: <Freeze /> }, { asset: <Freeze /> }]}
       />
     </>
   ),

package/src/Calendar/Calendar.test.tsx

@@ -1,4 +1,5 @@
 import { fireEvent, mockMatchMedia, render, screen, userEvent } from '../test-utils';
+import { DirectionProvider } from '../Provider/Direction/DirectionProvider';
 import Calendar from './Calendar';
 import type { DisabledRules } from './Calendar.types';
 
@@ -445,4 +446,85 @@ describe('Calendar', () => {
       expect(handleChange).not.toHaveBeenCalled();
     });
   });
+
+  describe('RTL keyboard navigation', () => {
+    describe('in day view', () => {
+      it.each([
+        ['{ArrowLeft}', +1],
+        ['{ArrowRight}', -1],
+        ['{ArrowUp}', -7],
+        ['{ArrowDown}', +7],
+      ])(
+        "handles '%s' to step %d day(s) — horizontal arrows are reversed",
+        async (text: string, step: number) => {
+          const handleDateFocus = jest.fn();
+          render(
+            <DirectionProvider direction="rtl">
+              <Calendar value={initialValue} onDateFocus={handleDateFocus} />
+            </DirectionProvider>,
+          );
+
+          await user.click(screen.getByRole('button', { name: /selected day/iu }));
+          await user.keyboard(text);
+
+          const expected = new Date(initialValue);
+          expected.setDate(initialValue.getDate() + step);
+          expect(handleDateFocus).toHaveBeenCalledWith(expected, { isEnabled: true });
+        },
+      );
+    });
+
+    describe('in year view', () => {
+      it.each([
+        ['{ArrowLeft}', +1],
+        ['{ArrowRight}', -1],
+        ['{ArrowUp}', -4],
+        ['{ArrowDown}', +4],
+      ])(
+        "handles '%s' to step %d year(s) — horizontal arrows are reversed",
+        async (text: string, step: number) => {
+          const handleDateFocus = jest.fn();
+          render(
+            <DirectionProvider direction="rtl">
+              <Calendar value={initialValue} onDateFocus={handleDateFocus} />
+            </DirectionProvider>,
+          );
+
+          await user.click(screen.getByRole('button', { name: /year view/iu }));
+          await user.keyboard(text);
+
+          const expected = new Date(initialValue);
+          expected.setFullYear(initialValue.getFullYear() + step);
+          expect(handleDateFocus).toHaveBeenCalledWith(expected, { isEnabled: true });
+        },
+      );
+    });
+
+    describe('in month view', () => {
+      it.each([
+        ['{ArrowLeft}', +1],
+        ['{ArrowRight}', -1],
+        ['{ArrowUp}', -4],
+        ['{ArrowDown}', +4],
+      ])(
+        "handles '%s' to step %d month(s) — horizontal arrows are reversed",
+        async (text: string, step: number) => {
+          const handleDateFocus = jest.fn();
+          render(
+            <DirectionProvider direction="rtl">
+              <Calendar value={initialValue} onDateFocus={handleDateFocus} />
+            </DirectionProvider>,
+          );
+
+          await user.click(screen.getByRole('button', { name: /year view/iu }));
+          await user.keyboard(' ');
+          await user.keyboard(text);
+
+          const expected = new Date(initialValue);
+          expected.setMonth(initialValue.getMonth() + step);
+          expect(handleDateFocus).toHaveBeenCalledWith(expected, { isEnabled: true });
+        },
+      );
+    });
+  });
 });

package/src/Calendar/Calendar.tsx

@@ -3,6 +3,7 @@ import { useIntl } from 'react-intl';
 import { formatDate } from '@transferwise/formatting';
 
 import { MonthFormat } from '../common';
+import { useDirection } from '../common/hooks';
 import { isWithinRange, moveToWithinRange, returnDateView } from '../common/DateUtils';
 import { clampToDayViewBoundary, isDateDisabled, hasDisabledDatesInMonth } from './_helpers';
 import { LONG_DAY_FORMAT } from './Calendar.constants';
@@ -53,6 +54,7 @@ const Calendar = ({
   onChange,
 }: CalendarProps) => {
   const intl = useIntl();
+  const { isRTL } = useDirection();
   const selectedDate = getStartOfDay(value);
   const min = getStartOfDay(minProp);
   const max = getStartOfDay(maxProp);
@@ -185,9 +187,10 @@ const Calendar = ({
 
   const handleKeyDown = useCallback(
     (event: KeyboardEvent<HTMLDivElement>) => {
+      const orientationSign = isRTL ? -1 : 1;
       switch (event.key) {
         case 'ArrowLeft':
-          adjustDate(-1, -1, -1);
+          adjustDate(-1 * orientationSign, -1 * orientationSign, -1 * orientationSign);
           event.preventDefault();
           break;
         case 'ArrowUp':
@@ -195,7 +198,7 @@ const Calendar = ({
           event.preventDefault();
           break;
         case 'ArrowRight':
-          adjustDate(1, 1, 1);
+          adjustDate(1 * orientationSign, 1 * orientationSign, 1 * orientationSign);
           event.preventDefault();
           break;
         case 'ArrowDown':
@@ -217,7 +220,7 @@ const Calendar = ({
           break;
       }
     },
-    [adjustDate, focusedDate, mode, handleSelectedDateUpdate],
+    [adjustDate, focusedDate, mode, handleSelectedDateUpdate, isRTL],
   );
 
   const focusedDateOutOfRange = focusedDate ? !isWithinRange(focusedDate, min, max) : false;

package/src/Carousel/Carousel.tsx

@@ -2,6 +2,7 @@ import { ChevronLeft, ChevronRight } from '@transferwise/icons';
 import { clsx } from 'clsx';
 import { type CSSProperties, type ReactNode, useEffect, useRef, useState } from 'react';
 
+import { useDirection } from '../common/hooks';
 import IconButton from '../IconButton';
 import Title from '../Title';
 import type { PromoCardLinkProps } from '../PromoCard/PromoCard';
@@ -48,10 +49,11 @@ const Carousel: React.FC<CarouselProps> = ({ header, className, cards, onClick }
   const [visibleCardOnMobileView, setVisibleCardOnMobileView] = useState<string>('');
   const carouselElementRef = useRef<HTMLDivElement>(null);
   const carouselCardsRef = useRef<CardsReference[]>([]);
+  const { isRTL } = useDirection();
 
-  const isLeftActionButtonEnabled = scrollPosition > LEFT_SCROLL_OFFSET;
+  const isPrevButtonEnabled = scrollPosition > LEFT_SCROLL_OFFSET;
 
-  const areActionButtonsEnabled = isLeftActionButtonEnabled || !scrollIsAtEnd;
+  const areActionButtonsEnabled = isPrevButtonEnabled || !scrollIsAtEnd;
 
   const [focusedCard, setFocusedCard] = useState(cards?.[0]?.id);
 
@@ -83,16 +85,17 @@ const Carousel: React.FC<CarouselProps> = ({ header, className, cards, onClick }
     setPreviousScrollPosition(scrollPosition);
   };
 
-  const scrollCarousel = (direction: 'left' | 'right' = 'right') => {
+  const scrollCarousel = (direction: 'forward' | 'backward') => {
     if (carouselElementRef.current) {
       const { scrollWidth } = carouselElementRef.current;
 
       const cardWidth = scrollWidth / carouselCardsRef.current.length;
 
-      const res = Math.floor(cardWidth - cardWidth * 0.05);
+      const distance = Math.floor(cardWidth - cardWidth * 0.05);
+      const sign = direction === 'forward' ? 1 : -1;
 
       carouselElementRef.current.scrollBy({
-        left: direction === 'right' ? res : -res,
+        left: isRTL ? -sign * distance : sign * distance,
         behavior: 'smooth',
       });
     }
@@ -174,10 +177,10 @@ const Carousel: React.FC<CarouselProps> = ({ header, className, cards, onClick }
               size={32}
               tabIndex={-1}
               priority="tertiary"
-              disabled={!isLeftActionButtonEnabled}
+              disabled={!isPrevButtonEnabled}
               aria-hidden="true"
               data-testid="scroll-carousel-left"
-              onClick={() => scrollCarousel('left')}
+              onClick={() => scrollCarousel('backward')}
             >
               <ChevronLeft />
             </IconButton>
@@ -189,7 +192,7 @@ const Carousel: React.FC<CarouselProps> = ({ header, className, cards, onClick }
               aria-hidden="true"
               data-testid="scroll-carousel-right"
               disabled={scrollIsAtEnd}
-              onClick={() => scrollCarousel()}
+              onClick={() => scrollCarousel('forward')}
             >
               <ChevronRight />
             </IconButton>
@@ -203,7 +206,7 @@ const Carousel: React.FC<CarouselProps> = ({ header, className, cards, onClick }
         className="carousel"
         onScroll={(event) => {
           const target = event.target as HTMLElement;
-          setScrollPosition(target.scrollLeft);
+          setScrollPosition(Math.abs(target.scrollLeft));
         }}
       >
         {cards?.map((card, index) => {
@@ -336,7 +339,7 @@ const Carousel: React.FC<CarouselProps> = ({ header, className, cards, onClick }
 
 const isVisible = (container: HTMLElement, el: HTMLElement) => {
   const cWidth = container.offsetWidth;
-  const cScrollOffset = container.scrollLeft;
+  const cScrollOffset = Math.abs(container.scrollLeft);
 
   const elemLeft = el.offsetLeft - container.offsetLeft;
   const elemRight = elemLeft + el.offsetWidth;