@transferwise/components 0.0.0-experimental-5f7dae1 → 0.0.0-experimental-20085a3

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-5f7dae1",
+  "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/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(),
+};

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

@@ -28,17 +28,19 @@ export const YearViewBoundaries: Story = {
     await userEvent.click(canvas.getByRole('button', { name: /year view/iu }));
 
     // Selected year (within range) is enabled
-    await expect(
-      canvas.getByRole('button', { name: /2024.*selected year/iu }),
-    ).not.toHaveAttribute('aria-disabled');
+    await expect(canvas.getByRole('button', { name: /2024.*selected year/iu })).not.toHaveAttribute(
+      'aria-disabled',
+    );
 
     // Adjacent years outside range are disabled
-    await expect(
-      canvas.getByRole('button', { name: /^2023.*not available/iu }),
-    ).toHaveAttribute('aria-disabled', 'true');
-    await expect(
-      canvas.getByRole('button', { name: /^2025.*not available/iu }),
-    ).toHaveAttribute('aria-disabled', 'true');
+    await expect(canvas.getByRole('button', { name: /^2023.*not available/iu })).toHaveAttribute(
+      'aria-disabled',
+      'true',
+    );
+    await expect(canvas.getByRole('button', { name: /^2025.*not available/iu })).toHaveAttribute(
+      'aria-disabled',
+      'true',
+    );
 
     // Both nav arrows disabled — min and max are both in the 2020–2039 block
     await expect(canvas.getByRole('button', { name: /previous 20 years/iu })).toBeDisabled();
@@ -73,12 +75,14 @@ export const MonthViewBoundaries: Story = {
     ).not.toHaveAttribute('aria-disabled');
 
     // Months outside range are disabled
-    await expect(
-      canvas.getByRole('button', { name: /^Feb.*not available/iu }),
-    ).toHaveAttribute('aria-disabled', 'true');
-    await expect(
-      canvas.getByRole('button', { name: /^Nov.*not available/iu }),
-    ).toHaveAttribute('aria-disabled', 'true');
+    await expect(canvas.getByRole('button', { name: /^Feb.*not available/iu })).toHaveAttribute(
+      'aria-disabled',
+      'true',
+    );
+    await expect(canvas.getByRole('button', { name: /^Nov.*not available/iu })).toHaveAttribute(
+      'aria-disabled',
+      'true',
+    );
 
     // Both nav arrows disabled — min and max are both in 2024
     await expect(canvas.getByRole('button', { name: /previous year/iu })).toBeDisabled();
@@ -92,23 +96,23 @@ const disabledRules: DisabledRules = {
 };
 
 /**
- * When a disabled cell receives direct DOM focus (e.g. screen reader virtual cursor),
+ * When a disabled cell receives focus via keyboard navigation,
  * the inline prompt updates to negative sentiment showing the disabled reason.
  */
 export const DisabledDateFocusUpdatesPrompt: Story = {
   render: () => <Calendar value={new Date(2024, 6, 5)} disabledRules={disabledRules} />,
   play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    // Initially prompt is neutral (focused date is enabled)
+    // Initially prompt is neutral (focused date is enabled — July 5 is a Friday)
     const prompt = canvasElement.querySelector('.wds-inline-prompt')!;
     await expect(prompt).toHaveClass('wds-prompt--neutral');
 
-    // Simulate screen reader focus on a disabled Saturday (matches both "6 July 2024" and "July 6, 2024")
-    const saturday = canvas.getByLabelText(/(?:6 July|July 6).*2024/u);
-    saturday.focus();
+    // Tab into the calendar grid (past month nav buttons), then arrow right to Saturday (disabled)
+    await userEvent.tab();
+    await userEvent.tab();
+    await userEvent.tab();
+    await userEvent.keyboard('{ArrowRight}');
 
-    // Prompt should switch to negative after React re-render
-    await waitFor(() => expect(prompt).toHaveClass('wds-prompt--negative'));
+    // Prompt should switch to negative after navigating to the disabled date
+    await waitFor(async () => expect(prompt).toHaveClass('wds-prompt--negative'));
   },
 };

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

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import Display from '../../Display';
+import Carousel, { type CarouselCard } from '..';
+
+export default {
+  component: Carousel,
+  title: 'Navigation/Carousel/Tests',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof Carousel>;
+
+type Story = StoryObj<typeof Carousel>;
+
+const sampleCards: CarouselCard[] = [
+  {
+    id: 'card-1',
+    type: 'button',
+    content: (
+      <div className="d-flex p-a-1 flex-column align-items-center">
+        <Display type="display-small">Card one</Display>
+      </div>
+    ),
+  },
+  {
+    id: 'card-2',
+    type: 'promo',
+    href: '#',
+    title: 'Promo card',
+    description: 'Description for promo card',
+  },
+  {
+    id: 'card-3',
+    type: 'anchor',
+    href: '#',
+    hrefTarget: '_blank',
+    content: <Display type="display-small">Anchor card</Display>,
+  },
+  {
+    id: 'card-4',
+    type: 'button',
+    content: (
+      <div className="d-flex p-a-1 flex-column align-items-center">
+        <Display type="display-small">Card four</Display>
+      </div>
+    ),
+  },
+  {
+    id: 'card-5',
+    type: 'anchor',
+    href: '#',
+    content: <Display type="display-small">Card five</Display>,
+  },
+];
+
+export const RTLDiff: Story = {
+  render: () => (
+    <Carousel header="Carousel with navigation arrows" cards={sampleCards} />
+  ),
+  ...withRTLDiff(),
+};