@transferwise/components 46.160.0 → 46.160.1

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/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.1",
   "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",

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',
     },

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

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

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

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

package/src/CheckboxButton/CheckboxButton.css

@@ -32,6 +32,9 @@
   background: var(--color-background-screen);
   transform: translate(-50%, -50%);
 }
+[dir="rtl"] .np-tw-checkbox-indeterminate::after {
+  transform: 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,6 +40,10 @@
     left: 50%;
     background: var(--color-background-screen);
     transform: translate(-50%, -50%);
+
+    [dir="rtl"] & {
+      transform: translate(50%, -50%);
+    }
   }
 
   .has-error {

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

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

package/src/ExpressiveMoneyInput/Chevron/Chevron.tsx

@@ -1,12 +1,17 @@
-import { ChevronLeft } from '@transferwise/icons';
+import { ChevronLeft, ChevronRight } from '@transferwise/icons';
 import { clsx } from 'clsx';
 import { motion } from 'motion/react';
 
+import { useDirection } from '../../common/hooks';
+
 interface Props {
   shouldShow: boolean;
 }
 
 export const Chevron = ({ shouldShow = true }: Props) => {
+  const { isRTL } = useDirection();
+  const Icon = isRTL ? ChevronRight : ChevronLeft;
+
   return (
     <div
       className={clsx(
@@ -17,7 +22,7 @@ export const Chevron = ({ shouldShow = true }: Props) => {
     >
       <motion.div
         animate={{
-          x: [12, 0, 0, -12],
+          x: isRTL ? [-12, 0, 0, 12] : [12, 0, 0, -12],
           opacity: [0, 1, 1, 0],
         }}
         transition={{
@@ -28,7 +33,7 @@ export const Chevron = ({ shouldShow = true }: Props) => {
           repeatType: 'loop',
         }}
       >
-        <ChevronLeft />
+        <Icon />
       </motion.div>
     </div>
   );

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

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

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

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

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

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

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

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

package/src/ListItem/_stories/subcomponents.tsx

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

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

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

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

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

package/src/Nudge/Nudge.css

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

package/src/Nudge/Nudge.less

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

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

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