@transferwise/components 46.103.1 → 46.105.0

package/build/types/listItem/ListItem.d.ts

@@ -0,0 +1,111 @@
+import { type ReactNode } from 'react';
+import { type ListItemIconButtonProps } from './IconButton';
+import { type ListItemCheckboxProps } from './Checkbox';
+import { type ListItemNavigationProps } from './Navigation';
+import { type ListItemButtonProps } from './Button';
+import { type ListItemRadioProps } from './Radio';
+import { type ListItemSwitchProps } from './Switch';
+export type ListItemTypes = 'non-interactive' | 'navigation' | 'radio' | 'checkbox' | 'switch' | 'button' | 'icon-button';
+export type ListItemControlProps = ListItemNavigationProps | ListItemCheckboxProps | ListItemButtonProps | ListItemIconButtonProps | ListItemRadioProps | ListItemSwitchProps;
+export type ListItemProps = {
+    as?: 'li' | 'div';
+    /**
+     * Swaps vertical hierarchy of title and subtitle and their corresponding right values.
+     */
+    inverted?: boolean;
+    disabled?: boolean;
+    /**
+     * Highlights the list item as an action to be taken or already taken. <br />
+     */
+    spotlight?: 'active' | 'inactive';
+    title: ReactNode;
+    subtitle?: ReactNode;
+    /**
+     * Requires `<ListItem.AdditionalInfo />` component as a sole child. <br />
+     * Can be only rendered if `subtitle` is also provided.
+     */
+    additionalInfo?: ReactNode;
+    valueTitle?: ReactNode;
+    valueSubtitle?: ReactNode;
+    /**
+     * Requires one of the following as a sole child: <br />
+     * `<ListItem.AvatarView />`,
+     * `<ListItem.AvatarLayout />` or
+     * `<ListItem.Image />`
+     */
+    media?: ReactNode;
+    /**
+     * Requires one of the following as a sole child: <br/>
+     * `<ListItem.Button />`, <br/>
+     * `<ListItem.Checkbox />`, <br/>
+     * `<ListItem.IconButton />`, <br/>
+     * `<ListItem.Navigation />`, <br/>
+     * `<ListItem.Radio />`, or
+     * `<ListItem.Switch />`
+     */
+    control?: ReactNode;
+    /**
+     * Requires `<ListItem.Prompt />` component as a sole child.
+     */
+    prompt?: ReactNode;
+    className?: string;
+    /**
+     * A number between `0–100` which resolves to a `fr` value of a `grid-template-columns` declaration. E.g. `valueColumnWidth={25}` will result in a `75fr 25fr`. <br />
+     * Controls the width ratio of left side content (title and subtitle) to the right side content.
+     */
+    valueColumnWidth?: number;
+    id?: string;
+};
+/**
+ * @see [Design documentation](https://wise.design/components/list-item)
+ * @see [Storybook documentation](https://storybook.wise.design/?path=/docs/content-listitem--docs)
+ */
+export declare const ListItem: {
+    ({ as: ListItemElement, title, subtitle, additionalInfo, prompt, inverted, media, spotlight, valueTitle, valueSubtitle, control, disabled, className, valueColumnWidth, id, }: ListItemProps): import("react").JSX.Element;
+    Image: {
+        ({ alt, size, className, ...props }: import("./Image").ListItemImageProps): import("react").JSX.Element;
+        displayName: string;
+    };
+    AvatarView: {
+        ({ className, size, ...props }: import("./AvatarView").ListItemAvatarViewProps): import("react").JSX.Element;
+        displayName: string;
+    };
+    AvatarLayout: {
+        ({ className, size, ...props }: import("./AvatarLayout").ListItemAvatarLayoutProps): import("react").JSX.Element;
+        displayName: string;
+    };
+    AdditionalInfo: {
+        ({ children, action }: import("./AdditionalInfo").ListItemAdditionalInfoProps): import("react").JSX.Element;
+        displayName: string;
+    };
+    Checkbox: {
+        (props: ListItemCheckboxProps): import("react").JSX.Element;
+        displayName: string;
+    };
+    Radio: {
+        (props: ListItemRadioProps): import("react").JSX.Element;
+        displayName: string;
+    };
+    IconButton: {
+        ({ priority, "aria-label": ariaLabel, ...props }: ListItemIconButtonProps): import("react").JSX.Element;
+        displayName: string;
+    };
+    Navigation: {
+        ({ href, ...props }: ListItemNavigationProps): import("react").JSX.Element;
+        displayName: string;
+    };
+    Button: {
+        ({ priority, partiallyInteractive, ...props }: ListItemButtonProps): import("react").JSX.Element;
+        displayName: string;
+    };
+    Switch: {
+        (props: ListItemSwitchProps): import("react").JSX.Element;
+        displayName: string;
+    };
+    Prompt: {
+        ({ sentiment, children }: import("./Prompt").ListItemPromptProps): import("react").JSX.Element;
+        displayName: string;
+    };
+};
+export default ListItem;
+//# sourceMappingURL=ListItem.d.ts.map

package/build/types/listItem/ListItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../src/listItem/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,EAAc,KAAK,uBAAuB,EAAE,MAAM,cAAc,CAAC;AACxE,OAAO,EAAY,KAAK,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAClE,OAAO,EAAc,KAAK,uBAAuB,EAAE,MAAM,cAAc,CAAC;AAExE,OAAO,EAAU,KAAK,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAC5D,OAAO,EAAS,KAAK,kBAAkB,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,EAAU,KAAK,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAY5D,MAAM,MAAM,aAAa,GACrB,iBAAiB,GACjB,YAAY,GACZ,OAAO,GACP,UAAU,GACV,QAAQ,GACR,QAAQ,GACR,aAAa,CAAC;AAElB,MAAM,MAAM,oBAAoB,GAC5B,uBAAuB,GACvB,qBAAqB,GACrB,mBAAmB,GACnB,uBAAuB,GACvB,kBAAkB,GAClB,mBAAmB,CAAC;AAExB,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,CAAC,EAAE,IAAI,GAAG,KAAK,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAClC,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,QAAQ;mLAgBlB,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkOf,CAAC;AAiGF,eAAe,QAAQ,CAAC"}

package/build/types/listItem/ListItemContext.d.ts

@@ -0,0 +1,21 @@
+import type { ListItemTypes, ListItemControlProps, ListItemProps } from './ListItem';
+export type ListItemMediaSize = 32 | 40 | 48 | 56 | 72;
+export type ListItemContextData = {
+    setControlType: (type: ListItemTypes) => void;
+    setControlProps: (props: ListItemControlProps) => void;
+    setMediaSize: (size: ListItemMediaSize | undefined) => void;
+    ids: {
+        title: string;
+        subtitle?: string;
+        valueTitle?: string;
+        valueSubtitle?: string;
+        additionalInfo?: string;
+        control: string;
+        prompt?: string;
+    };
+    props: Pick<ListItemProps, 'disabled' | 'inverted'>;
+    mediaSize?: ListItemMediaSize;
+    describedByIds: string;
+};
+export declare const ListItemContext: import("react").Context<ListItemContextData>;
+//# sourceMappingURL=ListItemContext.d.ts.map

package/build/types/listItem/ListItemContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemContext.d.ts","sourceRoot":"","sources":["../../../src/listItem/ListItemContext.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,oBAAoB,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAErF,MAAM,MAAM,iBAAiB,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAEvD,MAAM,MAAM,mBAAmB,GAAG;IAChC,cAAc,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IAC9C,eAAe,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,IAAI,CAAC;IACvD,YAAY,EAAE,CAAC,IAAI,EAAE,iBAAiB,GAAG,SAAS,KAAK,IAAI,CAAC;IAC5D,GAAG,EAAE;QACH,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,aAAa,CAAC,EAAE,MAAM,CAAC;QACvB,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,OAAO,EAAE,MAAM,CAAC;QAChB,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,UAAU,GAAG,UAAU,CAAC,CAAC;IACpD,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,cAAc,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,eAAO,MAAM,eAAe,8CAE3B,CAAC"}

package/build/types/listItem/Navigation/ListItemNavigation.d.ts

@@ -0,0 +1,15 @@
+import type { ButtonProps } from '../../button/Button.types';
+export type ListItemNavigationProps = Pick<ButtonProps, 'onClick' | 'href' | 'target'>;
+/**
+ * This component allows for rendering a control functionally synonymous with HTML `anchor` or a
+ * `button`, giving users a rich way to choose between options and navigate to another screen or
+ * step in a flow. It offers only a subset of features of the HTML element in line with the
+ * ListItem's constraints.<br />
+ * <br />
+ * Please refer to the [Design documentation](https://wise.design/components/list-item---navigation) for details.
+ */
+export declare const Navigation: {
+    ({ href, ...props }: ListItemNavigationProps): import("react").JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=ListItemNavigation.d.ts.map

package/build/types/listItem/Navigation/ListItemNavigation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemNavigation.d.ts","sourceRoot":"","sources":["../../../../src/listItem/Navigation/ListItemNavigation.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAM7D,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC,CAAC;AAEvF;;;;;;;GAOG;AACH,eAAO,MAAM,UAAU;yBAA2C,uBAAuB;;CAmBxF,CAAC"}

package/build/types/listItem/Navigation/index.d.ts

@@ -0,0 +1,3 @@
+export type { ListItemNavigationProps } from './ListItemNavigation';
+export { Navigation } from './ListItemNavigation';
+//# sourceMappingURL=index.d.ts.map

package/build/types/listItem/Navigation/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/listItem/Navigation/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC"}

package/build/types/listItem/Prompt/ListItemPrompt.d.ts

@@ -0,0 +1,16 @@
+import { Sentiment } from '../../common';
+export type ListItemPromptProps = {
+    sentiment?: `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`;
+    children: React.ReactNode;
+};
+/**
+ * This component allows for rendering an Inline Prompt. <br />In the future it will be a thin wrapper around a standalone component.<br />
+ *
+ * Please refer to the [Design documentation](https://wise.design/components/list-item#prompt) for details.
+ */
+export declare const Prompt: {
+    ({ sentiment, children }: ListItemPromptProps): import("react").JSX.Element;
+    displayName: string;
+};
+export default Prompt;
+//# sourceMappingURL=ListItemPrompt.d.ts.map

package/build/types/listItem/Prompt/ListItemPrompt.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemPrompt.d.ts","sourceRoot":"","sources":["../../../../src/listItem/Prompt/ListItemPrompt.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAKzC,MAAM,MAAM,mBAAmB,GAAG;IAChC,SAAS,CAAC,EAAE,GAAG,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,OAAO,GAAG,SAAS,CAAC,OAAO,EAAE,CAAC;IACjG,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,MAAM;8BAAiD,mBAAmB;;CAWtF,CAAC;AAGF,eAAe,MAAM,CAAC"}

package/build/types/listItem/Prompt/index.d.ts

@@ -0,0 +1,3 @@
+export type { ListItemPromptProps } from './ListItemPrompt';
+export { Prompt } from './ListItemPrompt';
+//# sourceMappingURL=index.d.ts.map

package/build/types/listItem/Prompt/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/listItem/Prompt/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC"}

package/build/types/listItem/Radio/ListItemRadio.d.ts

@@ -0,0 +1,14 @@
+import { type RadioButtonProps } from '../../common/RadioButton/RadioButton';
+export type ListItemRadioProps = Omit<RadioButtonProps, 'disabled' | 'readOnly' | 'className' | 'id'>;
+/**
+ * This component allows for rendering a Button control. It's a thin wrapper around the
+ * [Button component](https://storybook.wise.design/?path=/docs/content-button--docs), but offers only
+ * a subset of its features in line with the ListItem's constraints. <br />
+ * <br />
+ * Please refer to the [Design documentation](https://wise.design/components/list-item---button) for details.
+ */
+export declare const Radio: {
+    (props: ListItemRadioProps): import("react").JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=ListItemRadio.d.ts.map

package/build/types/listItem/Radio/ListItemRadio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemRadio.d.ts","sourceRoot":"","sources":["../../../../src/listItem/Radio/ListItemRadio.tsx"],"names":[],"mappings":"AACA,OAAoB,EAAE,KAAK,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAI1F,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,gBAAgB,EAChB,UAAU,GAAG,UAAU,GAAG,WAAW,GAAG,IAAI,CAC7C,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,KAAK;YAAoB,kBAAkB;;CAavD,CAAC"}

package/build/types/listItem/Radio/index.d.ts

@@ -0,0 +1,3 @@
+export type { ListItemRadioProps } from './ListItemRadio';
+export { Radio } from './ListItemRadio';
+//# sourceMappingURL=index.d.ts.map

package/build/types/listItem/Radio/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/listItem/Radio/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC"}

package/build/types/listItem/Switch/ListItemSwitch.d.ts

@@ -0,0 +1,14 @@
+import { type SwitchProps } from '../../switch';
+export type ListItemSwitchProps = Omit<SwitchProps, 'disabled' | 'id' | 'aria-labelledby' | 'aria-label'>;
+/**
+ * This component allows for rendering a switch control within a fully interactive ListItem. <br />It's a thin wrapper around the
+ * [CheckboxButton component](https://storybook.wise.design/?path=/docs/actions-switch--docs),
+ * but offers only a subset of its features in line with the ListItem's constraints. <br />
+ *
+ * Please refer to the [Design documentation](https://wise.design/components/list-item---switch) for details.
+ */
+export declare const Switch: {
+    (props: ListItemSwitchProps): import("react").JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=ListItemSwitch.d.ts.map

package/build/types/listItem/Switch/ListItemSwitch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemSwitch.d.ts","sourceRoot":"","sources":["../../../../src/listItem/Switch/ListItemSwitch.tsx"],"names":[],"mappings":"AACA,OAAmB,EAAE,KAAK,WAAW,EAAE,MAAM,cAAc,CAAC;AAI5D,MAAM,MAAM,mBAAmB,GAAG,IAAI,CACpC,WAAW,EACX,UAAU,GAAG,IAAI,GAAG,iBAAiB,GAAG,YAAY,CACrD,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,MAAM;YAAoB,mBAAmB;;CAazD,CAAC"}

package/build/types/listItem/Switch/index.d.ts

@@ -0,0 +1,3 @@
+export type { ListItemSwitchProps } from './ListItemSwitch';
+export { Switch } from './ListItemSwitch';
+//# sourceMappingURL=index.d.ts.map

package/build/types/listItem/Switch/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/listItem/Switch/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC"}

package/build/types/listItem/_stories/helpers.d.ts

@@ -0,0 +1,27 @@
+import { StoryObj, type Decorator } from '@storybook/react-webpack5';
+import type { ListItemProps } from '../ListItem';
+type Story = StoryObj<ListItemProps>;
+/**
+ * Recent storybook versions render the full source including all story parameters which
+ * creates noise, this simple workaround only shows the render function.
+ * This is a workaround for the issue.
+ * @see https://github.com/storybookjs/storybook/issues/22281
+ */
+export declare const storySourceWithoutNoise: (config: Story) => Story;
+/**
+ * In order to make preview controls work correctly, we have to refresh the render
+ * by swapping the `key`. This is a workaround for the Storybook's limitation.
+ */
+export declare const withoutKey: Decorator;
+/**
+ * Not all stories need access to all controls as it causes unnecessary UI noise.
+ */
+export declare const disableControls: (hiddenByDefault?: string[]) => (hiddenForStory?: string[]) => {
+    [k: string]: {
+        table: {
+            disable: boolean;
+        };
+    };
+};
+export {};
+//# sourceMappingURL=helpers.d.ts.map

package/build/types/listItem/_stories/helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../src/listItem/_stories/helpers.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,KAAK,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAC;AAErC;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,GAAI,QAAQ,KAAK,KAAG,KAuBvD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,UAAU,EAAE,SAExB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,GACzB,kBAAiB,MAAM,EAAO,MAC9B,iBAAgB,MAAM,EAAO;;;;;;CAG7B,CAAC"}

package/build/types/listItem/_stories/subcomponents.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+export type SB_ListItem_ControlType = 'non-interactive' | 'button' | 'buttonAsLink' | 'partialButton' | 'partialButtonAsLink' | 'iconButton' | 'iconButtonAsLink' | 'iconButtonWithLabel' | 'iconButtonAsLinkWithLabel' | 'partialIconButton' | 'partialIconButtonAsLink' | 'partialIconButtonWithLabel' | 'partialIconButtonAsLinkWithLabel' | 'navigation' | 'navigationAsButton' | 'checkbox' | 'radio' | 'switch';
+export declare const SB_LIST_ITEM_CONTROLS: Record<SB_ListItem_ControlType, ReactNode>;
+export declare const SB_LIST_ITEM_ADDITIONAL_INFO: {
+    readonly interactive: import("react").JSX.Element;
+    readonly nonInteractive: import("react").JSX.Element;
+};
+export declare const SB_LIST_ITEM_PROMPTS: {
+    readonly interactive: import("react").JSX.Element;
+    readonly nonInteractive: import("react").JSX.Element;
+};
+export declare const SB_LIST_ITEM_MEDIA: {
+    readonly image: import("react").JSX.Element;
+    readonly avatarSingle: import("react").JSX.Element;
+    readonly avatarDouble: import("react").JSX.Element;
+    readonly avatarDiagonal: import("react").JSX.Element;
+};
+//# sourceMappingURL=subcomponents.d.ts.map

package/build/types/listItem/_stories/subcomponents.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"subcomponents.d.ts","sourceRoot":"","sources":["../../../../src/listItem/_stories/subcomponents.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOlC,MAAM,MAAM,uBAAuB,GAC/B,iBAAiB,GACjB,QAAQ,GACR,cAAc,GACd,eAAe,GACf,qBAAqB,GACrB,YAAY,GACZ,kBAAkB,GAClB,qBAAqB,GACrB,2BAA2B,GAC3B,mBAAmB,GACnB,yBAAyB,GACzB,4BAA4B,GAC5B,kCAAkC,GAClC,YAAY,GACZ,oBAAoB,GACpB,UAAU,GACV,OAAO,GACP,QAAQ,CAAC;AAEb,eAAO,MAAM,qBAAqB,EAAE,MAAM,CAAC,uBAAuB,EAAE,SAAS,CA2DnE,CAAC;AAEX,eAAO,MAAM,4BAA4B;;;CAe/B,CAAC;AAEX,eAAO,MAAM,oBAAoB;;;CAavB,CAAC;AAEX,eAAO,MAAM,kBAAkB;;;;;CAoBrB,CAAC"}

package/build/types/listItem/index.d.ts

@@ -0,0 +1,14 @@
+export type { ListItemProps } from './ListItem';
+export type { ListItemAdditionalInfoProps } from './AdditionalInfo';
+export type { ListItemAvatarLayoutProps } from './AvatarLayout';
+export type { ListItemAvatarViewProps } from './AvatarView';
+export type { ListItemButtonProps } from './Button';
+export type { ListItemCheckboxProps } from './Checkbox';
+export type { ListItemIconButtonProps } from './IconButton';
+export type { ListItemImageProps } from './Image';
+export type { ListItemNavigationProps } from './Navigation';
+export type { ListItemPromptProps } from './Prompt';
+export type { ListItemRadioProps } from './Radio';
+export type { ListItemSwitchProps } from './Switch';
+export { default } from './ListItem';
+//# sourceMappingURL=index.d.ts.map

package/build/types/listItem/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/listItem/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,YAAY,EAAE,2BAA2B,EAAE,MAAM,kBAAkB,CAAC;AACpE,YAAY,EAAE,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAChE,YAAY,EAAE,uBAAuB,EAAE,MAAM,cAAc,CAAC;AAC5D,YAAY,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AACpD,YAAY,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AACxD,YAAY,EAAE,uBAAuB,EAAE,MAAM,cAAc,CAAC;AAC5D,YAAY,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAClD,YAAY,EAAE,uBAAuB,EAAE,MAAM,cAAc,CAAC;AAC5D,YAAY,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AACpD,YAAY,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAClD,YAAY,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAEpD,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC"}

package/build/types/listItem/test-utils.d.ts

@@ -0,0 +1,7 @@
+import { type RenderResult } from '../test-utils';
+export declare const mockSetControlType: jest.Mock<any, any, any>;
+export declare const mockSetControlProps: jest.Mock<any, any, any>;
+export declare const mockSetMediaSize: jest.Mock<any, any, any>;
+export declare const renderWithListItemContext: (ui: React.ReactNode) => RenderResult;
+export declare const clearListItemMocks: () => void;
+//# sourceMappingURL=test-utils.d.ts.map

package/build/types/listItem/test-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"test-utils.d.ts","sourceRoot":"","sources":["../../../src/listItem/test-utils.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,YAAY,EAAE,MAAM,eAAe,CAAC;AAG1D,eAAO,MAAM,kBAAkB,0BAAY,CAAC;AAC5C,eAAO,MAAM,mBAAmB,0BAAY,CAAC;AAC7C,eAAO,MAAM,gBAAgB,0BAAY,CAAC;AAE1C,eAAO,MAAM,yBAAyB,GAAI,IAAI,KAAK,CAAC,SAAS,KAAG,YAqB/D,CAAC;AAEF,eAAO,MAAM,kBAAkB,YAE9B,CAAC"}

package/build/types/listItem/useListItemControl.d.ts

@@ -0,0 +1,5 @@
+import type { ListItemTypes, ListItemControlProps } from './ListItem';
+export declare function useListItemControl(controlType: ListItemTypes, controlProps: ListItemControlProps): {
+    baseItemProps: Pick<import("./ListItem").ListItemProps, "disabled" | "inverted">;
+};
+//# sourceMappingURL=useListItemControl.d.ts.map

package/build/types/listItem/useListItemControl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useListItemControl.d.ts","sourceRoot":"","sources":["../../../src/listItem/useListItemControl.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAC;AAEtE,wBAAgB,kBAAkB,CAAC,WAAW,EAAE,aAAa,EAAE,YAAY,EAAE,oBAAoB;;EAahG"}

package/build/types/listItem/useListItemMedia.d.ts

@@ -0,0 +1,6 @@
+import { type ListItemMediaSize } from './ListItemContext';
+export declare function useListItemMedia(size?: ListItemMediaSize): {
+    mediaSize: ListItemMediaSize | undefined;
+    setMediaSize: (size: ListItemMediaSize | undefined) => void;
+};
+//# sourceMappingURL=useListItemMedia.d.ts.map

package/build/types/listItem/useListItemMedia.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useListItemMedia.d.ts","sourceRoot":"","sources":["../../../src/listItem/useListItemMedia.tsx"],"names":[],"mappings":"AACA,OAAO,EAGL,KAAK,iBAAiB,EACvB,MAAM,mBAAmB,CAAC;AAE3B,wBAAgB,gBAAgB,CAAC,IAAI,CAAC,EAAE,iBAAiB;;;EAQxD"}

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

@@ -1,15 +1,14 @@
-import { LabelHTMLAttributes, LiHTMLAttributes } from 'react';
+import React from 'react';
 import { TitleTypes, Heading } from '../common';
-type Props = LabelHTMLAttributes<HTMLHeadingElement | HTMLSpanElement | HTMLLabelElement> & LiHTMLAttributes<HTMLLIElement> & {
+declare const Title: React.ForwardRefExoticComponent<React.LabelHTMLAttributes<HTMLSpanElement | HTMLHeadingElement | HTMLLabelElement> & React.LiHTMLAttributes<HTMLLIElement> & {
     /**
      * Default value will based one `type` prop
      */
-    as?: 'span' | 'label' | 'li' | 'legend' | 'header' | Heading;
+    as?: "span" | "label" | "li" | "legend" | "header" | Heading;
     /**
      * Default value: {@link DEFAULT_TYPE}
      */
     type?: TitleTypes;
-};
-declare function Title({ as, type, className, ...props }: Props): import("react").JSX.Element;
+} & React.RefAttributes<HTMLSpanElement | HTMLHeadingElement | HTMLLabelElement>>;
 export default Title;
 //# sourceMappingURL=Title.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Title.d.ts","sourceRoot":"","sources":["../../../src/title/Title.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,gBAAgB,EAAa,MAAM,OAAO,CAAC;AAEzE,OAAO,EAAE,UAAU,EAAc,OAAO,EAAE,MAAM,WAAW,CAAC;AAY5D,KAAK,KAAK,GAAG,mBAAmB,CAAC,kBAAkB,GAAG,eAAe,GAAG,gBAAgB,CAAC,GACvF,gBAAgB,CAAC,aAAa,CAAC,GAAG;IAChC;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC7D;;OAEG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB,CAAC;AAEJ,iBAAS,KAAK,CAAC,EAAE,EAAE,EAAE,IAAmB,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,+BAUrE;AAED,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Title.d.ts","sourceRoot":"","sources":["../../../src/title/Title.tsx"],"names":[],"mappings":"AACA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAEjF,OAAO,EAAE,UAAU,EAAc,OAAO,EAAE,MAAM,WAAW,CAAC;AAwB5D,QAAA,MAAM,KAAK;IAVP;;OAEG;SACE,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO;IAC5D;;OAEG;WACI,UAAU;iFA0BpB,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.103.1",
+  "version": "46.105.0",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -85,8 +85,8 @@
     "storybook-addon-test-codegen": "^2.0.1",
     "@transferwise/less-config": "3.1.2",
     "@transferwise/neptune-css": "14.24.5",
-    "@wise/wds-configs": "0.0.0",
-    "@wise/components-theming": "1.6.4"
+    "@wise/components-theming": "1.6.4",
+    "@wise/wds-configs": "0.0.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.22.3",

package/src/button/Button.spec.tsx

@@ -1,5 +1,5 @@
 import { Freeze } from '@transferwise/icons';
-import { mockMatchMedia, render, screen } from '../test-utils';
+import { mockMatchMedia, render, screen, userEvent } from '../test-utils';
 import Button, { ButtonProps } from './Button.resolver';
 import { CommonProps } from './Button.types';
 
@@ -377,4 +377,28 @@ describe('Button', () => {
       });
     });
   });
+
+  describe('onClick', () => {
+    it('should call the handler when rendered as HTML button', async () => {
+      const onClick = jest.fn();
+      render(
+        <Button v2 onClick={onClick}>
+          Button
+        </Button>,
+      );
+      await userEvent.click(screen.getByRole('button'));
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('should call the handler when rendered as HTML anchor', async () => {
+      const onClick = jest.fn();
+      render(
+        <Button v2 href="https://wise.com" onClick={onClick}>
+          Anchor
+        </Button>,
+      );
+      await userEvent.click(screen.getByRole('link'));
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
+  });
 });

package/src/button/Button.story.tsx

@@ -152,6 +152,7 @@ const getPropsForPreview = (args: PreviewStoryArgs) => {
 const meta: Meta<typeof Button> = {
   component: Button,
   title: 'Actions/Button',
+  tags: ['new'],
   argTypes: {
     v2: {
       table: {

package/src/header/Header.accessibility.docs.mdx

@@ -0,0 +1,85 @@
+import { Meta, Canvas, Source } from '@storybook/addon-docs/blocks';
+import { NavigationOption } from '..';
+import { Bulb } from '@transferwise/icons';
+import * as stories from './Header.story';
+
+<Meta title="Typography/Header/Accessibility" />
+
+# Accessibility
+
+Given the `Header` is a key component for structuring content and conveying hierarchy, ensuring its accessibility is crucial for an inclusive experience.
+
+<NavigationOption
+  media={<Bulb size={24} />}
+  title="Design guidance"
+  content="Before you start, familiarise yourself with the dedicated accessibility documentation."
+  href="https://wise.design/components/section-header#accessibility"
+/>
+
+<br />
+<br />
+
+## Semantic headings
+
+The `Header` component should always use semantic HTML heading tags (`<h1>` to `<h6>`) to convey the document structure. Avoid using non-semantic tags unless absolutely necessary.
+
+<Source dark code={`
+// ✅ semantic heading
+<Header as="h1">Main heading</Header>
+
+// ⚠️ use with care
+
+<Header as="div">Non-semantic heading</Header>
+`}/>
+
+**Additional resources:**
+
+1. [Deque: Headings must follow a logical order](https://dequeuniversity.com/rules/axe/4.2/heading-order)
+2. [MDN: Using headings](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements)
+
+<br />
+
+## ARIA roles
+
+If the `Header` is used in a non-semantic context, ensure it is accessible by applying appropriate ARIA roles, such as `role="heading"`, and providing a `aria-level` attribute to indicate its level in the hierarchy.
+
+<Source
+  dark
+  code={`
+// ⚠️ use with care
+<Header as="div" role="heading" aria-level="1">
+  Main heading
+</Header>
+`}
+/>
+
+<br />
+
+## Accessibility with actions
+
+When using the `Header` with actions (e.g., buttons or links), ensure the actions are accessible by providing clear labels and ARIA attributes.
+
+<Source
+  dark
+  code={`
+// ✅ accessible action
+<Header
+  as="h2"
+  action={{
+    'aria-label': 'Edit section',
+    text: 'Edit',
+    onClick: () => alert('Edit clicked'),
+  }}
+>
+  Section heading
+</Header>
+`}
+/>
+
+<br />
+
+## Visual hierarchy
+
+Ensure the `Header` visually aligns with its semantic level. For example, an `<h1>` should be the largest and most prominent, while an `<h6>` should be the smallest.
+
+<Canvas of={stories.Playground} />

package/src/header/Header.css

@@ -1,26 +1,33 @@
 .np-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-end;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  grid-column-gap: 24px;
+  grid-column-gap: var(--size-24);
+  -moz-column-gap: 24px;
+       column-gap: 24px;
+  -moz-column-gap: var(--size-24);
+       column-gap: var(--size-24);
+  align-items: center;
+  margin-bottom: 8px;
+  margin-bottom: var(--size-8);
   max-width: 100%;
   padding: 8px 0;
   padding: var(--size-8) 0;
+  width: 100%;
+}
+.np-header--group {
+  align-items: flex-end;
   border-bottom: 1px solid rgba(0,0,0,0.10196);
   border-bottom: 1px solid var(--color-border-neutral);
-  margin-bottom: 8px;
-  margin-bottom: var(--size-8);
-  -moz-column-gap: 24px;
-       column-gap: 24px;
-  -moz-column-gap: var(--size-24);
-       column-gap: var(--size-24);
 }
 .np-header__title {
   color: #5d7079;
   color: var(--color-content-secondary);
+  margin: 0;
 }
-.np-header__button {
-  margin-inline: calc(16px * -1);
-  margin-inline: calc(var(--size-16) * -1);
-  margin-bottom: calc(4px * -1);
-  margin-bottom: calc(var(--size-4) * -1);
+.np-header__action {
+  margin: 0;
+  height: 20px;
+  display: flex;
+  align-items: center;
 }

package/src/header/Header.less

@@ -1,20 +1,27 @@
 .np-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-end;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  column-gap: var(--size-24);
+  align-items: center;
+  margin-bottom: var(--size-8);
   max-width: 100%;
   padding: var(--size-8) 0;
-  border-bottom: 1px solid var(--color-border-neutral);
-  margin-bottom: var(--size-8);
+  width: 100%;
+
+  &--group {
+    align-items: flex-end;
+    border-bottom: 1px solid var(--color-border-neutral);
+  }
 
   &__title {
     color: var(--color-content-secondary);
+    margin: 0;
   }
 
-  column-gap: var(--size-24);
-
-  &__button {
-    margin-inline: calc(var(--size-16) * -1);
-    margin-bottom: calc(var(--size-4) * -1);
+  &__action {
+    margin: 0;
+    height: 20px;
+    display: flex;
+    align-items: center;
   }
 }