@transferwise/components 46.165.0 → 46.165.1

package/build/types/ListItem/_stories/variants/helpers.d.ts

@@ -1,10 +1,47 @@
+import { ReactNode } from 'react';
 import { StoryObj } from '@storybook/react-webpack5';
+import { type ListItemProps } from '../../ListItem';
 import { SB_ListItem_ControlType as ControlType } from '../subcomponents';
+type VariantPartial = {
+    title: string;
+} & Partial<ListItemProps>;
 type Variant = 'default' | 'dark' | 'rtl' | 'forest-green' | 'bright-green' | 'mobile' | '400%';
-type VariantStoryProps = {
+export type VariantText = {
+    title: string;
+    subtitle: string;
+    valueTitle: string;
+    valueSubtitle: string;
+    longTitle: string;
+    longSubtitle: string;
+    longValueTitle: ReactNode;
+};
+/**
+ * Every piece of copy and every slot the instance matrix is built from. Extracted so a story can
+ * render the same matrix with different content — the RTL diff swaps in localised versions.
+ */
+export type VariantContent = {
+    text: VariantText;
+    media: ReactNode;
+    additionalInfo: {
+        interactive: ReactNode;
+        nonInteractive: ReactNode;
+    };
+    prompt: {
+        interactive: ReactNode;
+        nonInteractive: ReactNode;
+    };
+};
+export declare const DEFAULT_VARIANT_CONTENT: VariantContent;
+export declare const getVariantInstances: (controlType: ControlType, { text, media, additionalInfo: info, prompt: prompts }: VariantContent) => VariantPartial[];
+export type VariantStoryProps = {
     controlType: ControlType;
     variant?: Variant;
 };
+type VariantListProps = VariantStoryProps & {
+    content?: VariantContent;
+    controls?: Record<ControlType, ReactNode>;
+};
+export declare const VariantList: ({ controlType, variant, content, controls, }: VariantListProps) => import("react").JSX.Element;
 type VariantStory = StoryObj<VariantStoryProps>;
 export declare const VariantStory: VariantStory;
 export {};

package/build/types/ListItem/_stories/variants/helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../../src/ListItem/_stories/variants/helpers.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAGrD,OAAO,EAML,uBAAuB,IAAI,WAAW,EACvC,MAAM,kBAAkB,CAAC;AAG1B,KAAK,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,KAAK,GAAG,cAAc,GAAG,cAAc,GAAG,QAAQ,GAAG,MAAM,CAAC;AAOhG,KAAK,iBAAiB,GAAG;IACvB,WAAW,EAAE,WAAW,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,KAAK,YAAY,GAAG,QAAQ,CAAC,iBAAiB,CAAC,CAAC;AAEhD,eAAO,MAAM,YAAY,EAAE,YA6H1B,CAAC"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../../src/ListItem/_stories/variants/helpers.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAErD,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC9D,OAAO,EAML,uBAAuB,IAAI,WAAW,EACvC,MAAM,kBAAkB,CAAC;AAE1B,KAAK,cAAc,GAAG;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,GAAG,OAAO,CAAC,aAAa,CAAC,CAAC;AACjE,KAAK,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,KAAK,GAAG,cAAc,GAAG,cAAc,GAAG,QAAQ,GAAG,MAAM,CAAC;AAShG,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,SAAS,CAAC;CAC3B,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,WAAW,CAAC;IAClB,KAAK,EAAE,SAAS,CAAC;IACjB,cAAc,EAAE;QAAE,WAAW,EAAE,SAAS,CAAC;QAAC,cAAc,EAAE,SAAS,CAAA;KAAE,CAAC;IACtE,MAAM,EAAE;QAAE,WAAW,EAAE,SAAS,CAAC;QAAC,cAAc,EAAE,SAAS,CAAA;KAAE,CAAC;CAC/D,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,cAKrC,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAC9B,aAAa,WAAW,EACxB,wDAAwD,cAAc,KACrE,cAAc,EA8GhB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,WAAW,EAAE,WAAW,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,KAAK,gBAAgB,GAAG,iBAAiB,GAAG;IAC1C,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;CAC3C,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,8CAKzB,gBAAgB,gCAUlB,CAAC;AAEF,KAAK,YAAY,GAAG,QAAQ,CAAC,iBAAiB,CAAC,CAAC;AAEhD,eAAO,MAAM,YAAY,EAAE,YAK1B,CAAC"}

package/build/types/MoneyInput/MoneyInput.d.ts

@@ -55,6 +55,7 @@ declare const _default: import("react").FC<{
     selectProps?: Partial<SelectInputProps<CurrencyOptionItem>> | undefined;
     amount: number | null;
     searchPlaceholder?: string | undefined;
+    decimals?: number | undefined;
     currencies: readonly CurrencyItem[];
     selectedCurrency: CurrencyOptionItem;
     onCurrencyChange?: ((value: CurrencyOptionItem) => void) | undefined;
@@ -66,7 +67,6 @@ declare const _default: import("react").FC<{
     }) => void) | undefined;
     customActionLabel?: import("react").ReactNode;
     onCustomAction?: (() => void) | undefined;
-    decimals?: number | undefined;
 }>;
 export default _default;
 //# sourceMappingURL=MoneyInput.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"MoneyInput.d.ts","sourceRoot":"","sources":["../../../src/MoneyInput/MoneyInput.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAc,KAAK,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAE9E,OAAO,EAGL,SAAS,EACT,UAAU,EACV,SAAS,EAEV,MAAM,WAAW,CAAC;AACnB,OAAO,EAAuB,wBAAwB,EAAE,MAAM,oBAAoB,CAAC;AAEnF,OAAO,EAKL,gBAAgB,EACjB,MAAM,uBAAuB,CAAC;AAO/B,MAAM,WAAW,kBAAkB;IACjC,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,MAAM,YAAY,GAAG,kBAAkB,GAAG,kBAAkB,CAAC;AAoDnE,MAAM,WAAW,eAAgB,SAAQ,qBAAqB;IAC5D,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,UAAU,EAAE,SAAS,YAAY,EAAE,CAAC;IACpC,gBAAgB,EAAE,kBAAkB,CAAC;IACrC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACvD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IAC1C,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,WAAW,EAAE,MAAM,CAAC;QAAC,eAAe,EAAE,YAAY,EAAE,CAAA;KAAE,KAAK,IAAI,CAAC;IAC3F,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACpC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,WAAW,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAC5D;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,MAAM,kCAAkC,GAAG,eAAe,GAC9D,OAAO,CAAC,wBAAwB,CAAC,CAAC;;SA5B7B,MAAM;wBACS,MAAM;YAMnB,SAAS,GAAG,UAAU,GAAG,SAAS;kBAF3B,MAAM;iBAYP,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;kBACrB,OAAO,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC;YAZnD,MAAM,GAAG,IAAI;wBAID,MAAM;gBARd,SAAS,YAAY,EAAE;sBACjB,kBAAkB;wBACjB,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI;sBAIrC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI;;sBAM9B,CAAC,KAAK,EAAE;QAAE,WAAW,EAAE,MAAM,CAAC;QAAC,eAAe,EAAE,YAAY,EAAE,CAAA;KAAE,KAAK,IAAI;;sBAEzE,MAAM,IAAI;eAQhB,MAAM;;AA0anB,wBAA2F"}
+{"version":3,"file":"MoneyInput.d.ts","sourceRoot":"","sources":["../../../src/MoneyInput/MoneyInput.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAc,KAAK,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAE9E,OAAO,EAGL,SAAS,EACT,UAAU,EACV,SAAS,EAEV,MAAM,WAAW,CAAC;AACnB,OAAO,EAAuB,wBAAwB,EAAE,MAAM,oBAAoB,CAAC;AAEnF,OAAO,EAKL,gBAAgB,EACjB,MAAM,uBAAuB,CAAC;AAO/B,MAAM,WAAW,kBAAkB;IACjC,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,MAAM,YAAY,GAAG,kBAAkB,GAAG,kBAAkB,CAAC;AAoDnE,MAAM,WAAW,eAAgB,SAAQ,qBAAqB;IAC5D,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,UAAU,EAAE,SAAS,YAAY,EAAE,CAAC;IACpC,gBAAgB,EAAE,kBAAkB,CAAC;IACrC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACvD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IAC1C,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,WAAW,EAAE,MAAM,CAAC;QAAC,eAAe,EAAE,YAAY,EAAE,CAAA;KAAE,KAAK,IAAI,CAAC;IAC3F,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACpC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,WAAW,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAC5D;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,MAAM,kCAAkC,GAAG,eAAe,GAC9D,OAAO,CAAC,wBAAwB,CAAC,CAAC;;SA5B7B,MAAM;wBACS,MAAM;YAMnB,SAAS,GAAG,UAAU,GAAG,SAAS;kBAF3B,MAAM;iBAYP,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;kBACrB,OAAO,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC;YAZnD,MAAM,GAAG,IAAI;wBAID,MAAM;eAcf,MAAM;gBAtBL,SAAS,YAAY,EAAE;sBACjB,kBAAkB;wBACjB,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI;sBAIrC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI;;sBAM9B,CAAC,KAAK,EAAE;QAAE,WAAW,EAAE,MAAM,CAAC;QAAC,eAAe,EAAE,YAAY,EAAE,CAAA;KAAE,KAAK,IAAI;;sBAEzE,MAAM,IAAI;;AAkb7B,wBAA2F"}

package/build/types/Snackbar/Snackbar.d.ts

@@ -1,4 +1,3 @@
-import { Component } from 'react';
 import type { ThemeDark, ThemeLight } from '../common';
 export interface SnackbarProps {
     action?: {
@@ -11,20 +10,7 @@ export interface SnackbarProps {
     timeout: number;
     timestamp: number;
 }
-interface SnackbarState extends Pick<SnackbarProps, 'action' | 'text' | 'theme'> {
-    visible: boolean;
-}
-export declare class Snackbar extends Component<SnackbarProps, SnackbarState> {
-    bodyRef: import("react").RefObject<HTMLSpanElement>;
-    timeout: number;
-    transitionTimeout: number;
-    constructor(props: SnackbarProps);
-    componentWillUnmount(): void;
-    shouldComponentUpdate(nextProps: SnackbarProps, nextState: SnackbarState): boolean;
-    setLeaveTimeout: () => void;
-    componentDidUpdate(previousProps: SnackbarProps): void;
-    render(): import("react").JSX.Element;
-}
+export declare const Snackbar: (props: SnackbarProps) => import("react").JSX.Element;
 declare const _default: (props: SnackbarProps) => import("react").ReactPortal | null;
 export default _default;
 //# sourceMappingURL=Snackbar.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Snackbar.d.ts","sourceRoot":"","sources":["../../../src/Snackbar/Snackbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAa,MAAM,OAAO,CAAC;AAK7C,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAMvD,MAAM,WAAW,aAAa;IAC5B,MAAM,CAAC,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;KACtD,CAAC;IACF,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,kBAAkB;IAClB,KAAK,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IAC/B,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,UAAU,aAAc,SAAQ,IAAI,CAAC,aAAa,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAC9E,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,qBAAa,QAAS,SAAQ,SAAS,CAAC,aAAa,EAAE,aAAa,CAAC;IACnE,OAAO,6CAAgC;IACvC,OAAO,SAAK;IACZ,iBAAiB,SAAK;gBAEV,KAAK,EAAE,aAAa;IAQhC,oBAAoB;IAKpB,qBAAqB,CAAC,SAAS,EAAE,aAAa,EAAE,SAAS,EAAE,aAAa;IAexE,eAAe,aAMb;IAEF,kBAAkB,CAAC,aAAa,EAAE,aAAa;IAwB/C,MAAM;CA6BP;;AAID,wBAAwC"}
+{"version":3,"file":"Snackbar.d.ts","sourceRoot":"","sources":["../../../src/Snackbar/Snackbar.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAKvD,MAAM,WAAW,aAAa;IAC5B,MAAM,CAAC,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;KACtD,CAAC;IACF,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,kBAAkB;IAClB,KAAK,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IAC/B,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;CACnB;AAMD,eAAO,MAAM,QAAQ,GAAI,OAAO,aAAa,gCAoG5C,CAAC;;AAEF,wBAAwC"}

package/build/types/Title/Title.d.ts

@@ -10,7 +10,7 @@ export type TitleProps = LabelHTMLAttributes<HTMLHeadingElement | HTMLSpanElemen
      */
     type?: TitleTypes;
 };
-declare const Title: React.ForwardRefExoticComponent<React.LabelHTMLAttributes<HTMLSpanElement | HTMLHeadingElement | HTMLLabelElement> & React.LiHTMLAttributes<HTMLLIElement> & {
+declare const Title: React.ForwardRefExoticComponent<React.LabelHTMLAttributes<HTMLHeadingElement | HTMLLabelElement | HTMLSpanElement> & React.LiHTMLAttributes<HTMLLIElement> & {
     /**
      * Default value will based one `type` prop
      */
@@ -19,6 +19,6 @@ declare const Title: React.ForwardRefExoticComponent<React.LabelHTMLAttributes<H
      * Default value: {@link DEFAULT_TYPE}
      */
     type?: TitleTypes;
-} & React.RefAttributes<HTMLSpanElement | HTMLHeadingElement | HTMLLabelElement | HTMLLegendElement | HTMLLIElement>>;
+} & React.RefAttributes<HTMLHeadingElement | HTMLLabelElement | HTMLLegendElement | HTMLLIElement | HTMLSpanElement>>;
 export default Title;
 //# sourceMappingURL=Title.d.ts.map

package/build/types/Upload/Steps/UploadImageStep/UploadImageStep.d.ts

@@ -15,7 +15,7 @@ export default class UploadImageStep extends PureComponent<UploadImageStepProps>
     uploadInputRef: import("react").RefObject<HTMLInputElement>;
     onManualUpload: () => void;
     onKeyDown: (event: React.KeyboardEvent<HTMLLabelElement>) => void;
-    getImage: () => number | true | import("react").JSX.Element | Iterable<import("react").ReactNode>;
+    getImage: () => number | true | Iterable<import("react").ReactNode> | import("react").JSX.Element;
     render(): import("react").JSX.Element;
 }
 //# sourceMappingURL=UploadImageStep.d.ts.map

package/build/types/UploadInput/UploadItem/UploadItemLink.d.ts

@@ -5,5 +5,5 @@ export declare const UploadItemLink: import("react").ForwardRefExoticComponent<{
     singleFileUpload: boolean;
 } & {
     children?: import("react").ReactNode | undefined;
-} & import("react").RefAttributes<HTMLDivElement | HTMLAnchorElement>>;
+} & import("react").RefAttributes<HTMLAnchorElement | HTMLDivElement>>;
 //# sourceMappingURL=UploadItemLink.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.165.0",
+  "version": "46.165.1",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

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

@@ -2,54 +2,13 @@ import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { userEvent, within } from 'storybook/test';
 import { FastFlag as FastFlagIcon } from '@transferwise/icons';
 
-import { forEachColumn, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import {
+  forEachColumn,
+  useRtlDiffI18n,
+  withRTLDiff,
+} from '../../../.storybook/decorators/RtlDiffDecorator';
 import Accordion from '../Accordion';
 
-const items = [
-  {
-    title: 'Item with icon',
-    subtitle: 'Subtitle text',
-    content: 'Content for item with icon.',
-    id: 'icon',
-    icon: <FastFlagIcon size={24} />,
-  },
-  {
-    title: 'Plain item without icon',
-    content: 'Content for item without icon.',
-    id: 'no-icon',
-  },
-  {
-    title: 'Media with circle',
-    subtitle: 'Shows media in a circle',
-    content: 'Expanded content with media circle.',
-    id: 'media-circle',
-    media: (
-      <img
-        src="https://wise.com/public-resources/assets/spend/card/asset//digital_card_2023.png"
-        alt=""
-      />
-    ),
-    showMediaCircle: true,
-    showMediaAtAllSizes: true,
-    isContainerAligned: true,
-  },
-  {
-    title: 'Media without circle',
-    subtitle: 'Not container aligned',
-    content: 'Expanded content with plain media.',
-    id: 'media-no-circle',
-    media: (
-      <img
-        src="https://wise.com/public-resources/assets/spend/card/asset//digital_card_2023.png"
-        alt=""
-      />
-    ),
-    showMediaCircle: false,
-    showMediaAtAllSizes: false,
-    isContainerAligned: false,
-  },
-];
-
 export default {
   component: Accordion,
   title: 'Content/Accordion/Tests',
@@ -59,7 +18,54 @@ export default {
 type Story = StoryObj<typeof Accordion>;
 
 export const RTLDiff: Story = {
-  render: () => <Accordion items={items} indexOpen={0} />,
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    const items = [
+      {
+        title: i18n.withIconTitle,
+        subtitle: i18n.withIconSubtitle,
+        content: i18n.withIconContent,
+        id: 'icon',
+        icon: <FastFlagIcon size={24} />,
+      },
+      {
+        title: i18n.noIconTitle,
+        content: i18n.noIconContent,
+        id: 'no-icon',
+      },
+      {
+        title: i18n.mediaCircleTitle,
+        subtitle: i18n.mediaCircleSubtitle,
+        content: i18n.mediaCircleContent,
+        id: 'media-circle',
+        media: (
+          <img
+            src="https://wise.com/public-resources/assets/spend/card/asset//digital_card_2023.png"
+            alt=""
+          />
+        ),
+        showMediaCircle: true,
+        showMediaAtAllSizes: true,
+        isContainerAligned: true,
+      },
+      {
+        title: i18n.mediaNoCircleTitle,
+        subtitle: i18n.mediaNoCircleSubtitle,
+        content: i18n.mediaNoCircleContent,
+        id: 'media-no-circle',
+        media: (
+          <img
+            src="https://wise.com/public-resources/assets/spend/card/asset//digital_card_2023.png"
+            alt=""
+          />
+        ),
+        showMediaCircle: false,
+        showMediaAtAllSizes: false,
+        isContainerAligned: false,
+      },
+    ];
+    return <Accordion items={items} indexOpen={0} />;
+  },
   play: async ({ canvasElement }) => {
     await forEachColumn(canvasElement, async (column) => {
       const scope = within(column);
@@ -67,5 +73,25 @@ export const RTLDiff: Story = {
       await userEvent.click(buttons[1]);
     });
   },
-  ...withRTLDiff(),
+  ...withRTLDiff({
+    i18n: {
+      withIconTitle: { en: 'Item with icon', ar: 'عنصر مع أيقونة' },
+      withIconSubtitle: { en: 'Subtitle text', ar: 'نص العنوان الفرعي' },
+      withIconContent: { en: 'Content for item with icon.', ar: 'محتوى العنصر ذي الأيقونة.' },
+      noIconTitle: { en: 'Plain item without icon', ar: 'عنصر عادي بدون أيقونة' },
+      noIconContent: { en: 'Content for item without icon.', ar: 'محتوى العنصر بدون أيقونة.' },
+      mediaCircleTitle: { en: 'Media with circle', ar: 'وسائط داخل دائرة' },
+      mediaCircleSubtitle: { en: 'Shows media in a circle', ar: 'يعرض الوسائط داخل دائرة' },
+      mediaCircleContent: {
+        en: 'Expanded content with media circle.',
+        ar: 'محتوى موسَّع مع وسائط داخل دائرة.',
+      },
+      mediaNoCircleTitle: { en: 'Media without circle', ar: 'وسائط بدون دائرة' },
+      mediaNoCircleSubtitle: { en: 'Not container aligned', ar: 'غير محاذٍ للحاوية' },
+      mediaNoCircleContent: {
+        en: 'Expanded content with plain media.',
+        ar: 'محتوى موسَّع مع وسائط عادية.',
+      },
+    },
+  }),
 };

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

@@ -2,7 +2,7 @@ import { Meta, StoryObj } from '@storybook/react-webpack5';
 import AvatarLayout from '..';
 import { Freeze, Plane } from '@transferwise/icons';
 import { Flag } from '@wise/art';
-import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 
 const meta: Meta<typeof AvatarLayout> = {
   component: AvatarLayout,
@@ -124,33 +124,49 @@ const rowStyle = { display: 'flex', alignItems: 'center', gap: '16px', flexWrap:
 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>
-
-      <div style={rowStyle}>
-        {diagonalSizes.map((size) => (
-          <AvatarLayout key={size} orientation="diagonal" size={size} avatars={[...twoAvatars]} />
-        ))}
-      </div>
-
-      <AvatarLayout
-        orientation="horizontal"
-        size={48}
-        interactive
-        avatars={[{ asset: <Flag code="gb" /> }, { asset: <Flag code="br" /> }, { asset: '3+' }]}
-      />
-
-      <AvatarLayout
-        orientation="horizontal"
-        size={72}
-        avatars={[{ asset: <Plane /> }, { asset: <Plane /> }, { asset: <Plane /> }]}
-      />
-    </>
-  ),
-  ...withRTLDiff(),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <>
+        <div style={rowStyle}>
+          {horizontalSizes.map((size) => (
+            <AvatarLayout
+              key={size}
+              orientation="horizontal"
+              size={size}
+              avatars={[...twoAvatars]}
+            />
+          ))}
+        </div>
+
+        <div style={rowStyle}>
+          {diagonalSizes.map((size) => (
+            <AvatarLayout key={size} orientation="diagonal" size={size} avatars={[...twoAvatars]} />
+          ))}
+        </div>
+
+        <AvatarLayout
+          orientation="horizontal"
+          size={48}
+          interactive
+          avatars={[
+            { asset: <Flag code="gb" /> },
+            { asset: <Flag code="br" /> },
+            { asset: i18n.overflowCount },
+          ]}
+        />
+
+        <AvatarLayout
+          orientation="horizontal"
+          size={72}
+          avatars={[{ asset: <Plane /> }, { asset: <Plane /> }, { asset: <Plane /> }]}
+        />
+      </>
+    );
+  },
+  ...withRTLDiff({
+    i18n: {
+      overflowCount: { en: '3+', ar: '+٣' },
+    },
+  }),
 };

package/src/Button/LegacyButton/_stories/LegacyButton.test.story.tsx

@@ -4,7 +4,7 @@ import { useState } from 'react';
 
 import Button from '../..';
 import LegacyButton from '../LegacyButton';
-import { withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
 
 LegacyButton.displayName = 'Button';
 
@@ -38,22 +38,32 @@ export const Focused: Story = {
 };
 
 export const RTLDiff: Story = {
-  render: () => (
-    <>
-      {/* default (inline) layout */}
-      <LegacyButton>Default button</LegacyButton>
-
-      {/* block layout — full width */}
-      <LegacyButton block>Block button</LegacyButton>
-
-      {/* loading state — appends ProcessIndicator inside button */}
-      <LegacyButton loading>Loading button</LegacyButton>
-
-      {/* loading + block combined */}
-      <LegacyButton loading block>
-        Loading block button
-      </LegacyButton>
-    </>
-  ),
-  ...withRTLDiff(),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <>
+        {/* default (inline) layout */}
+        <LegacyButton>{i18n.defaultButton}</LegacyButton>
+
+        {/* block layout — full width */}
+        <LegacyButton block>{i18n.blockButton}</LegacyButton>
+
+        {/* loading state — appends ProcessIndicator inside button */}
+        <LegacyButton loading>{i18n.loadingButton}</LegacyButton>
+
+        {/* loading + block combined */}
+        <LegacyButton loading block>
+          {i18n.loadingBlockButton}
+        </LegacyButton>
+      </>
+    );
+  },
+  ...withRTLDiff({
+    i18n: {
+      defaultButton: { en: 'Default button', ar: 'زر افتراضي' },
+      blockButton: { en: 'Block button', ar: 'زر بعرض كامل' },
+      loadingButton: { en: 'Loading button', ar: 'زر قيد التحميل' },
+      loadingBlockButton: { en: 'Loading block button', ar: 'زر بعرض كامل قيد التحميل' },
+    },
+  }),
 };

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

@@ -5,7 +5,7 @@ import { expect, userEvent, within } from 'storybook/test';
 import Button from '../Button.resolver';
 import { ButtonPriority } from '../Button.types';
 import { withVariantConfig } from '../../../.storybook/helpers';
-import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 
 const meta: Meta<typeof Button> = {
   component: Button,
@@ -167,66 +167,100 @@ export const AccessibilityAddons: Story = {
   },
 };
 
+type RTLDiffLabels = {
+  startIcon: string;
+  endIcon: string;
+  bothIcons: string;
+  avatarStart: string;
+  doubleAvatar: string;
+  smStartIcon: string;
+  smEndIcon: string;
+  smBothIcons: string;
+  loading: string;
+  blockWithStartIcon: string;
+};
+
 export const RTLDiff: Story = {
-  render: () => (
-    <>
-      <Button v2 size="md" addonStart={{ type: 'icon', value: <Freeze /> }}>
-        Start icon
-      </Button>
-
-      <Button v2 size="md" addonEnd={{ type: 'icon', value: <ArrowEnd /> }}>
-        End icon
-      </Button>
-
-      <Button
-        v2
-        size="md"
-        addonStart={{ type: 'icon', value: <Freeze /> }}
-        addonEnd={{ type: 'icon', value: <ArrowEnd /> }}
-      >
-        Both icons
-      </Button>
-
-      <Button v2 size="md" addonStart={{ type: 'avatar', value: [{ asset: <Flag code="pl" /> }] }}>
-        Avatar start
-      </Button>
-
-      <Button
-        v2
-        size="md"
-        addonStart={{
-          type: 'avatar',
-          value: [{ asset: <Flag code="gb" /> }, { asset: <Flag code="br" /> }],
-        }}
-      >
-        Double avatar
-      </Button>
-
-      <Button v2 size="sm" addonStart={{ type: 'icon', value: <Freeze /> }}>
-        Sm start icon
-      </Button>
-
-      <Button v2 size="sm" addonEnd={{ type: 'icon', value: <ArrowEnd /> }}>
-        Sm end icon
-      </Button>
-
-      <Button
-        v2
-        size="sm"
-        addonStart={{ type: 'icon', value: <Freeze /> }}
-        addonEnd={{ type: 'icon', value: <ArrowEnd /> }}
-      >
-        Sm both icons
-      </Button>
-
-      <Button v2 size="md" loading addonEnd={{ type: 'icon', value: <ArrowEnd /> }}>
-        Loading
-      </Button>
-
-      <Button v2 size="md" block addonStart={{ type: 'icon', value: <Freeze /> }}>
-        Block with start icon
-      </Button>
-    </>
-  ),
-  ...withRTLDiff(),
+  render: () => {
+    const i18n = useRtlDiffI18n<RTLDiffLabels>();
+
+    return (
+      <>
+        <Button v2 size="md" addonStart={{ type: 'icon', value: <Freeze /> }}>
+          {i18n.startIcon}
+        </Button>
+
+        <Button v2 size="md" addonEnd={{ type: 'icon', value: <ArrowEnd /> }}>
+          {i18n.endIcon}
+        </Button>
+
+        <Button
+          v2
+          size="md"
+          addonStart={{ type: 'icon', value: <Freeze /> }}
+          addonEnd={{ type: 'icon', value: <ArrowEnd /> }}
+        >
+          {i18n.bothIcons}
+        </Button>
+
+        <Button
+          v2
+          size="md"
+          addonStart={{ type: 'avatar', value: [{ asset: <Flag code="pl" /> }] }}
+        >
+          {i18n.avatarStart}
+        </Button>
+
+        <Button
+          v2
+          size="md"
+          addonStart={{
+            type: 'avatar',
+            value: [{ asset: <Flag code="gb" /> }, { asset: <Flag code="br" /> }],
+          }}
+        >
+          {i18n.doubleAvatar}
+        </Button>
+
+        <Button v2 size="sm" addonStart={{ type: 'icon', value: <Freeze /> }}>
+          {i18n.smStartIcon}
+        </Button>
+
+        <Button v2 size="sm" addonEnd={{ type: 'icon', value: <ArrowEnd /> }}>
+          {i18n.smEndIcon}
+        </Button>
+
+        <Button
+          v2
+          size="sm"
+          addonStart={{ type: 'icon', value: <Freeze /> }}
+          addonEnd={{ type: 'icon', value: <ArrowEnd /> }}
+        >
+          {i18n.smBothIcons}
+        </Button>
+
+        <Button v2 size="md" loading addonEnd={{ type: 'icon', value: <ArrowEnd /> }}>
+          {i18n.loading}
+        </Button>
+
+        <Button v2 size="md" block addonStart={{ type: 'icon', value: <Freeze /> }}>
+          {i18n.blockWithStartIcon}
+        </Button>
+      </>
+    );
+  },
+  ...withRTLDiff({
+    i18n: {
+      startIcon: { en: 'Start icon', ar: 'أيقونة البداية' },
+      endIcon: { en: 'End icon', ar: 'أيقونة النهاية' },
+      bothIcons: { en: 'Both icons', ar: 'كلتا الأيقونتين' },
+      avatarStart: { en: 'Avatar start', ar: 'صورة رمزية في البداية' },
+      doubleAvatar: { en: 'Double avatar', ar: 'صورتان رمزيتان' },
+      smStartIcon: { en: 'Sm start icon', ar: 'أيقونة بداية صغيرة' },
+      smEndIcon: { en: 'Sm end icon', ar: 'أيقونة نهاية صغيرة' },
+      smBothIcons: { en: 'Sm both icons', ar: 'كلتا الأيقونتين صغيرة' },
+      loading: { en: 'Loading', ar: 'جارٍ التحميل' },
+      blockWithStartIcon: { en: 'Block with start icon', ar: 'زر بعرض كامل مع أيقونة البداية' },
+    },
+  }),
 };