@transferwise/components 0.0.0-experimental-99bbbb3 → 0.0.0-experimental-20085a3

package/build/i18n/id.json

@@ -12,10 +12,6 @@
   "neptune.DateLookup.goTo20YearView": "Lihat tampilan 20 tahun",
   "neptune.DateLookup.month": "bulan",
   "neptune.DateLookup.next": "berikutnya",
-  "neptune.DateLookup.notAvailable": "tidak tersedia",
-  "neptune.DateLookup.outOfRangeAfter": "Silakan masukkan {min} atau tanggal yang lebih nanti.",
-  "neptune.DateLookup.outOfRangeBefore": "Silakan masukkan {max} atau tanggal yang lebih awal.",
-  "neptune.DateLookup.outOfRangeBetween": "Silakan pilih tanggal antara {min} dan {max}.",
   "neptune.DateLookup.previous": "sebelumnya",
   "neptune.DateLookup.selected": "terpilih",
   "neptune.DateLookup.twentyYears": "20 tahun",
@@ -50,7 +46,6 @@
   "neptune.Table.loaded": "Data tabel telah dimuat",
   "neptune.Table.loading": "Data tabel sedang dimuat",
   "neptune.Table.refreshPage": "Muat ulang halaman",
-  "neptune.Typeahead.suggestionsLabel": "Saran",
   "neptune.Upload.csButtonText": "Unggah file lainnya?",
   "neptune.Upload.csFailureText": "Unggahan gagal. Silakan coba lagi",
   "neptune.Upload.csSuccessText": "Pengunggahan selesai!",

package/build/i18n/id.json.js

@@ -16,10 +16,6 @@ var id = {
 	"neptune.DateLookup.goTo20YearView": "Lihat tampilan 20 tahun",
 	"neptune.DateLookup.month": "bulan",
 	"neptune.DateLookup.next": "berikutnya",
-	"neptune.DateLookup.notAvailable": "tidak tersedia",
-	"neptune.DateLookup.outOfRangeAfter": "Silakan masukkan {min} atau tanggal yang lebih nanti.",
-	"neptune.DateLookup.outOfRangeBefore": "Silakan masukkan {max} atau tanggal yang lebih awal.",
-	"neptune.DateLookup.outOfRangeBetween": "Silakan pilih tanggal antara {min} dan {max}.",
 	"neptune.DateLookup.previous": "sebelumnya",
 	"neptune.DateLookup.selected": "terpilih",
 	"neptune.DateLookup.twentyYears": "20 tahun",
@@ -54,7 +50,6 @@ var id = {
 	"neptune.Table.loaded": "Data tabel telah dimuat",
 	"neptune.Table.loading": "Data tabel sedang dimuat",
 	"neptune.Table.refreshPage": "Muat ulang halaman",
-	"neptune.Typeahead.suggestionsLabel": "Saran",
 	"neptune.Upload.csButtonText": "Unggah file lainnya?",
 	"neptune.Upload.csFailureText": "Unggahan gagal. Silakan coba lagi",
 	"neptune.Upload.csSuccessText": "Pengunggahan selesai!",

package/build/i18n/id.json.js.map

@@ -1 +1 @@
-{"version":3,"file":"id.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"id.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/i18n/id.json.mjs

@@ -12,10 +12,6 @@ var id = {
 	"neptune.DateLookup.goTo20YearView": "Lihat tampilan 20 tahun",
 	"neptune.DateLookup.month": "bulan",
 	"neptune.DateLookup.next": "berikutnya",
-	"neptune.DateLookup.notAvailable": "tidak tersedia",
-	"neptune.DateLookup.outOfRangeAfter": "Silakan masukkan {min} atau tanggal yang lebih nanti.",
-	"neptune.DateLookup.outOfRangeBefore": "Silakan masukkan {max} atau tanggal yang lebih awal.",
-	"neptune.DateLookup.outOfRangeBetween": "Silakan pilih tanggal antara {min} dan {max}.",
 	"neptune.DateLookup.previous": "sebelumnya",
 	"neptune.DateLookup.selected": "terpilih",
 	"neptune.DateLookup.twentyYears": "20 tahun",
@@ -50,7 +46,6 @@ var id = {
 	"neptune.Table.loaded": "Data tabel telah dimuat",
 	"neptune.Table.loading": "Data tabel sedang dimuat",
 	"neptune.Table.refreshPage": "Muat ulang halaman",
-	"neptune.Typeahead.suggestionsLabel": "Saran",
 	"neptune.Upload.csButtonText": "Unggah file lainnya?",
 	"neptune.Upload.csFailureText": "Unggahan gagal. Silakan coba lagi",
 	"neptune.Upload.csSuccessText": "Pengunggahan selesai!",

package/build/i18n/id.json.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"id.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"id.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/types/Body/Body.d.ts

@@ -11,7 +11,7 @@ export type BodyProps = HTMLAttributes<HTMLSpanElement | HTMLParagraphElement> &
      */
     preserveNewlines?: boolean;
 };
-declare const Body: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement | HTMLSpanElement> & {
+declare const Body: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement | HTMLParagraphElement> & {
     /** @default 'body-default' */
     type?: BodyTypes;
     /** @default 'div' */
@@ -21,6 +21,6 @@ declare const Body: import("react").ForwardRefExoticComponent<HTMLAttributes<HTM
      * @default false
      */
     preserveNewlines?: boolean;
-} & import("react").RefAttributes<HTMLDivElement | HTMLParagraphElement | HTMLSpanElement | null>>;
+} & import("react").RefAttributes<HTMLDivElement | HTMLSpanElement | HTMLParagraphElement | null>>;
 export default Body;
 //# sourceMappingURL=Body.d.ts.map

package/build/types/IconButton/IconButton.d.ts

@@ -16,6 +16,6 @@ declare const IconButton: import("react").ForwardRefExoticComponent<{
     /** @default 'default' */
     type?: "default" | "negative";
     'data-testid'?: string;
-} & Pick<AnchorHTMLAttributes<HTMLAnchorElement>, "onClick" | "target" | "href"> & Pick<ButtonHTMLAttributes<HTMLButtonElement>, "disabled" | "onClick"> & Pick<HTMLAttributes<HTMLDivElement>, "id" | "className" | "tabIndex" | "role" | "aria-label" | "children"> & import("react").RefAttributes<unknown>>;
+} & Pick<AnchorHTMLAttributes<HTMLAnchorElement>, "onClick" | "target" | "href"> & Pick<ButtonHTMLAttributes<HTMLButtonElement>, "disabled" | "onClick"> & Pick<HTMLAttributes<HTMLDivElement>, "children" | "className" | "id" | "tabIndex" | "role" | "aria-label"> & import("react").RefAttributes<unknown>>;
 export default IconButton;
 //# sourceMappingURL=IconButton.d.ts.map

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,YAiI1B,CAAC"}
+{"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"}

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

@@ -55,7 +55,6 @@ 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;
@@ -67,6 +66,7 @@ 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;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;;AAib7B,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;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;;AAyanB,wBAA2F"}

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<HTMLHeadingElement | HTMLLabelElement | HTMLSpanElement> & React.LiHTMLAttributes<HTMLLIElement> & {
+declare const Title: React.ForwardRefExoticComponent<React.LabelHTMLAttributes<HTMLSpanElement | HTMLHeadingElement | HTMLLabelElement> & 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<HTMLHeadingElement | HTMLLabelElement | HTMLLegendElement | HTMLLIElement | HTMLSpanElement>>;
+} & React.RefAttributes<HTMLSpanElement | HTMLHeadingElement | HTMLLabelElement | HTMLLegendElement | HTMLLIElement>>;
 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 | Iterable<import("react").ReactNode> | import("react").JSX.Element;
+    getImage: () => number | true | import("react").JSX.Element | Iterable<import("react").ReactNode>;
     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<HTMLAnchorElement | HTMLDivElement>>;
+} & import("react").RefAttributes<HTMLDivElement | HTMLAnchorElement>>;
 //# sourceMappingURL=UploadItemLink.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-99bbbb3",
+  "version": "0.0.0-experimental-20085a3",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

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

@@ -0,0 +1,71 @@
+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 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',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof Accordion>;
+
+type Story = StoryObj<typeof Accordion>;
+
+export const RTLDiff: Story = {
+  render: () => <Accordion items={items} indexOpen={0} />,
+  play: async ({ canvasElement }) => {
+    await forEachColumn(canvasElement, async (column) => {
+      const scope = within(column);
+      const buttons = scope.getAllByRole('button');
+      await userEvent.click(buttons[1]);
+    });
+  },
+  ...withRTLDiff(),
+};

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

@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { Freeze } from '@transferwise/icons';
+import { Flag } from '@wise/art';
+
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import AvatarLayout from '..';
+
+export default {
+  component: AvatarLayout,
+  title: 'Content/AvatarLayout/Tests',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof AvatarLayout>;
+
+type Story = StoryObj<typeof AvatarLayout>;
+
+export const RTLDiff: Story = {
+  render: () => (
+    <>
+      <AvatarLayout
+        orientation="horizontal"
+        size={48}
+        avatars={[{ asset: <Flag code="br" /> }, { asset: <Flag code="jp" /> }]}
+      />
+
+      <AvatarLayout
+        orientation="horizontal"
+        size={48}
+        interactive
+        avatars={[{ asset: <Freeze /> }, { asset: <Freeze /> }]}
+      />
+
+      <AvatarLayout
+        orientation="horizontal"
+        size={48}
+        avatars={[{ profileName: 'Jay Jay' }, { profileName: 'Amy Amy' }]}
+      />
+
+      <AvatarLayout
+        orientation="horizontal"
+        size={48}
+        interactive
+        avatars={[{ asset: <Flag code="gb" /> }, { asset: <Flag code="br" /> }, { asset: '3+' }]}
+      />
+
+      <AvatarLayout
+        orientation="horizontal"
+        size={32}
+        avatars={[{ asset: <Flag code="eu" /> }, { asset: <Flag code="gb" /> }]}
+      />
+
+      <AvatarLayout
+        orientation="horizontal"
+        size={72}
+        avatars={[{ asset: <Freeze /> }, { asset: <Freeze /> }, { asset: <Freeze /> }]}
+      />
+
+      <AvatarLayout
+        orientation="diagonal"
+        size={48}
+        avatars={[{ asset: <Flag code="br" /> }, { asset: <Flag code="jp" /> }]}
+      />
+
+      <AvatarLayout
+        orientation="diagonal"
+        size={48}
+        avatars={[{ profileName: 'Jay Jay' }, { profileName: 'Amy Amy' }]}
+      />
+
+      <AvatarLayout
+        orientation="diagonal"
+        size={72}
+        avatars={[{ asset: <Freeze /> }, { asset: <Freeze /> }]}
+      />
+    </>
+  ),
+  ...withRTLDiff(),
+};

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

@@ -0,0 +1,162 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { Freeze, FastFlag, Camera, Convert } from '@transferwise/icons';
+
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import AvatarView from '..';
+
+export default {
+  component: AvatarView,
+  title: 'Content/AvatarView/Tests',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof AvatarView>;
+
+type Story = StoryObj<typeof AvatarView>;
+
+const sizes = [24, 32, 40, 48, 56, 72] as const;
+
+export const RTLDiff: Story = {
+  render: () => (
+    <>
+      {/* Badge positioning: bottom-right dot (notification/online) — key RTL indicator */}
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: `repeat(${sizes.length}, min-content)`,
+          gap: '1rem',
+          alignItems: 'center',
+        }}
+      >
+        {sizes.map((size) => (
+          <AvatarView key={`notif-${size}`} size={size} badge={{ type: 'notification' }}>
+            <Freeze />
+          </AvatarView>
+        ))}
+      </div>
+
+      {/* Online dot */}
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: `repeat(${sizes.length}, min-content)`,
+          gap: '1rem',
+          alignItems: 'center',
+        }}
+      >
+        {sizes.map((size) => (
+          <AvatarView key={`online-${size}`} size={size} badge={{ type: 'online' }}>
+            <Freeze />
+          </AvatarView>
+        ))}
+      </div>
+
+      {/* Badge with flag (bottom-right corner badge) */}
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: `repeat(${sizes.length}, min-content)`,
+          gap: '1rem',
+          alignItems: 'center',
+        }}
+      >
+        {sizes.map((size) => (
+          <AvatarView key={`flag-${size}`} size={size} badge={{ flagCode: 'GBP' }}>
+            <Freeze />
+          </AvatarView>
+        ))}
+      </div>
+
+      {/* Badge with icon */}
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: `repeat(${sizes.length}, min-content)`,
+          gap: '1rem',
+          alignItems: 'center',
+        }}
+      >
+        {sizes.map((size) => (
+          <AvatarView key={`icon-badge-${size}`} size={size} badge={{ icon: <FastFlag /> }}>
+            <Freeze />
+          </AvatarView>
+        ))}
+      </div>
+
+      {/* Badge type action with icon (camera) */}
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: `repeat(${sizes.length}, min-content)`,
+          gap: '1rem',
+          alignItems: 'center',
+        }}
+      >
+        {sizes.map((size) => (
+          <AvatarView
+            key={`action-${size}`}
+            size={size}
+            imgSrc="../avatar-square-dude.webp"
+            badge={{ type: 'action', icon: <Camera /> }}
+          />
+        ))}
+      </div>
+
+      {/* Badge type reference with icon */}
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: `repeat(${sizes.length}, min-content)`,
+          gap: '1rem',
+          alignItems: 'center',
+        }}
+      >
+        {sizes.map((size) => (
+          <AvatarView
+            key={`ref-${size}`}
+            size={size}
+            imgSrc="../avatar-square-dude.webp"
+            badge={{ type: 'reference', icon: <Convert /> }}
+          />
+        ))}
+      </div>
+
+      {/* Selected state (border highlight) */}
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: `repeat(${sizes.length}, min-content)`,
+          gap: '1rem',
+          alignItems: 'center',
+        }}
+      >
+        {sizes.map((size) => (
+          <AvatarView key={`selected-${size}`} size={size} selected interactive>
+            <Freeze />
+          </AvatarView>
+        ))}
+      </div>
+
+      {/* Selected + badge combined */}
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: `repeat(${sizes.length}, min-content)`,
+          gap: '1rem',
+          alignItems: 'center',
+        }}
+      >
+        {sizes.map((size) => (
+          <AvatarView
+            key={`selected-badge-${size}`}
+            size={size}
+            selected
+            interactive
+            badge={{ flagCode: 'USD' }}
+          >
+            <Freeze />
+          </AvatarView>
+        ))}
+      </div>
+    </>
+  ),
+  ...withRTLDiff(),
+};

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

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
+import LegacyButton from '../LegacyButton';
+
+export default {
+  component: LegacyButton,
+  title: 'Actions/Button/Legacy Button/Tests',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof LegacyButton>;
+
+type Story = StoryObj<typeof LegacyButton>;
+
+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(),
+};

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

@@ -0,0 +1,87 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { ArrowRight, Freeze } from '@transferwise/icons';
+import { Flag } from '@wise/art';
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import Button from '../Button';
+
+export default {
+  component: Button,
+  title: 'Actions/Button/Tests',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof Button>;
+
+type Story = StoryObj<typeof Button>;
+
+export const RTLDiff: Story = {
+  render: () => (
+    <>
+      {/* md size: addonStart icon only */}
+      <Button v2 size="md" addonStart={{ type: 'icon', value: <Freeze /> }}>
+        Start icon
+      </Button>
+
+      {/* md size: addonEnd icon only */}
+      <Button v2 size="md" addonEnd={{ type: 'icon', value: <ArrowRight /> }}>
+        End icon
+      </Button>
+
+      {/* md size: both addonStart and addonEnd */}
+      <Button
+        v2
+        size="md"
+        addonStart={{ type: 'icon', value: <Freeze /> }}
+        addonEnd={{ type: 'icon', value: <ArrowRight /> }}
+      >
+        Both icons
+      </Button>
+
+      {/* md size: addonStart avatar */}
+      <Button v2 size="md" addonStart={{ type: 'avatar', value: [{ asset: <Flag code="pl" /> }] }}>
+        Avatar start
+      </Button>
+
+      {/* md size: addonStart double avatar */}
+      <Button
+        v2
+        size="md"
+        addonStart={{
+          type: 'avatar',
+          value: [{ asset: <Flag code="gb" /> }, { asset: <Flag code="br" /> }],
+        }}
+      >
+        Double avatar
+      </Button>
+
+      {/* sm size: addonStart icon */}
+      <Button v2 size="sm" addonStart={{ type: 'icon', value: <Freeze /> }}>
+        Sm start icon
+      </Button>
+
+      {/* sm size: addonEnd icon */}
+      <Button v2 size="sm" addonEnd={{ type: 'icon', value: <ArrowRight /> }}>
+        Sm end icon
+      </Button>
+
+      {/* sm size: both addonStart and addonEnd */}
+      <Button
+        v2
+        size="sm"
+        addonStart={{ type: 'icon', value: <Freeze /> }}
+        addonEnd={{ type: 'icon', value: <ArrowRight /> }}
+      >
+        Sm both icons
+      </Button>
+
+      {/* loading state with spinner — changes internal layout */}
+      <Button v2 size="md" loading addonEnd={{ type: 'icon', value: <ArrowRight /> }}>
+        Loading
+      </Button>
+
+      {/* block layout */}
+      <Button v2 size="md" block addonStart={{ type: 'icon', value: <Freeze /> }}>
+        Block with start icon
+      </Button>
+    </>
+  ),
+  ...withRTLDiff(),
+};

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

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { userEvent, within } from 'storybook/test';
+
+import { forEachColumn, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import Calendar from '../Calendar';
+
+export default {
+  component: Calendar,
+  title: 'Forms/Calendar/Tests',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof Calendar>;
+
+type Story = StoryObj<typeof Calendar>;
+
+const selectedDate = new Date(2024, 5, 15);
+const minDate = new Date(2024, 2, 1);
+const maxDate = new Date(2024, 9, 31);
+
+const disabledRules = {
+  weekdays: ['sat', 'sun'] as ('sat' | 'sun')[],
+  dates: [new Date(2024, 5, 10)],
+  reason: 'Weekends and specific dates are unavailable.',
+};
+
+export const RTLDiff: Story = {
+  render: () => (
+    <>
+      <div data-testid="day-view">
+        <Calendar value={selectedDate} min={minDate} max={maxDate} disabledRules={disabledRules} />
+      </div>
+      <div data-testid="month-view">
+        <Calendar value={selectedDate} min={minDate} max={maxDate} />
+      </div>
+      <div data-testid="year-view">
+        <Calendar value={selectedDate} min={minDate} max={maxDate} />
+      </div>
+    </>
+  ),
+  play: async ({ canvasElement }) => {
+    await forEachColumn(canvasElement, async (column) => {
+      const monthContainer = column.querySelector('[data-testid="month-view"]')!;
+      const monthScope = within(monthContainer as HTMLElement);
+      await userEvent.click(monthScope.getByRole('button', { name: /year view/iu }));
+      await userEvent.click(monthScope.getByRole('button', { name: /2024.*selected year/iu }));
+
+      const yearContainer = column.querySelector('[data-testid="year-view"]')!;
+      const yearScope = within(yearContainer as HTMLElement);
+      await userEvent.click(yearScope.getByRole('button', { name: /year view/iu }));
+    });
+  },
+  ...withRTLDiff(),
+};