@transferwise/components 0.0.0-experimental-29d0f94 → 0.0.0-experimental-4b1de0a

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

@@ -0,0 +1,113 @@
+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 Props = {
+    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;
+    role?: string;
+    'aria-labelledby'?: 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, role, id, "aria-labelledby": ariaLabelledby, }: Props): 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, ...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":"AACA,OAAO,EAOL,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,KAAK,GAAG;IAClB,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;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,QAAQ;4NAkBlB,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkOP,CAAC;AAkGF,eAAe,QAAQ,CAAC"}

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

@@ -0,0 +1,22 @@
+import type { ListItemTypes, ListItemControlProps, Props as ListItemProps } from './ListItem';
+import type { ListItemAvatarViewProps } from './AvatarView';
+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?: ListItemAvatarViewProps['size'];
+    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,KAAK,IAAI,aAAa,EAAE,MAAM,YAAY,CAAC;AAC9F,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,cAAc,CAAC;AAE5D,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,uBAAuB,CAAC,MAAM,CAAC,CAAC;IAC5C,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;yBAAiD,uBAAuB;;CAoB9F,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 { Props as ItemProps } from '../ListItem';
+type Story = StoryObj<ItemProps>;
+/**
+ * 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,KAAK,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AAEtD,KAAK,KAAK,GAAG,QAAQ,CAAC,SAAS,CAAC,CAAC;AAEjC;;;;;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 = '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,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,CA0DnE,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 { Props as 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,KAAK,IAAI,aAAa,EAAE,MAAM,YAAY,CAAC;AACzD,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").Props, "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 { ListItemAvatarViewProps } from './AvatarView';
+export declare function useListItemMedia(size?: ListItemAvatarViewProps['size']): {
+    mediaSize: 32 | 40 | 48 | 56 | 72 | undefined;
+    setMediaSize: (size: import("./ListItemContext").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":"AAEA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,cAAc,CAAC;AAE5D,wBAAgB,gBAAgB,CAAC,IAAI,CAAC,EAAE,uBAAuB,CAAC,MAAM,CAAC;;;EAQtE"}

package/build/types/switch/Switch.d.ts

@@ -8,13 +8,15 @@ export type SwitchProps = CommonProps & {
     'aria-label'?: string;
     /** A reference to a label that describes the purpose of the switch. Ignored if aria-label is provided */
     'aria-labelledby'?: string;
+    /** Identifies the element(s) that describes the element on which the attribute is set */
+    'aria-describedby'?: string;
     /** Whether the switch is checked or not */
     checked?: boolean;
     disabled?: boolean;
     /** ID to apply to the switch container */
     id?: string;
     /** Function called when the switch is toggled */
-    onClick: (event?: MouseEvent<HTMLSpanElement>) => void;
+    onClick: (event?: MouseEvent<HTMLButtonElement>) => void;
 };
 declare const Switch: (props: SwitchProps) => import("react").JSX.Element;
 export default Switch;

package/build/types/switch/Switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/switch/Switch.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAwB,UAAU,EAAE,MAAM,OAAO,CAAC;AAE9D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAG7C,MAAM,MAAM,WAAW,GAAG,WAAW,GAAG;IACtC;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yGAAyG;IACzG,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,2CAA2C;IAC3C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0CAA0C;IAC1C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iDAAiD;IACjD,OAAO,EAAE,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,eAAe,CAAC,KAAK,IAAI,CAAC;CACxD,CAAC;AAEF,QAAA,MAAM,MAAM,GAAI,OAAO,WAAW,gCAwCjC,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/switch/Switch.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAwB,UAAU,EAAE,MAAM,OAAO,CAAC;AAE9D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAG7C,MAAM,MAAM,WAAW,GAAG,WAAW,GAAG;IACtC;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yGAAyG;IACzG,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,yFAAyF;IACzF,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,2CAA2C;IAC3C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0CAA0C;IAC1C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iDAAiD;IACjD,OAAO,EAAE,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAC1D,CAAC;AAEF,QAAA,MAAM,MAAM,GAAI,OAAO,WAAW,gCA0CjC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-29d0f94",
+  "version": "0.0.0-experimental-4b1de0a",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -83,10 +83,10 @@
     "storybook": "^9.0.18",
     "storybook-addon-tag-badges": "^2.0.1",
     "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"
+    "@transferwise/less-config": "3.1.2",
+    "@wise/components-theming": "1.6.4",
+    "@wise/wds-configs": "0.0.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.22.3",

package/src/avatarView/AvatarView.css

@@ -19,7 +19,8 @@
   right: 0;
 }
 .np-avatar-view .np-avatar-view-content {
-  color: var(--color-interactive-primary);
+  color: #37517e;
+  color: var(--color-content-primary);
 }
 .np-avatar-view-interactive {
   cursor: pointer;
@@ -27,6 +28,7 @@
 .np-avatar-view-interactive .np-circle {
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
+  color: var(--color-interactive-primary);
 }
 .np-avatar-view-non-interactive .np-circle {
   background-color: transparent;

package/src/avatarView/AvatarView.less

@@ -2,13 +2,14 @@
 
 .np-avatar-view {
   .np-avatar-view-content {
-    color: var(--color-interactive-primary);
+    color: var(--color-content-primary);
   }
 
   &-interactive {
     cursor: pointer;
     .np-circle {
       background-color: var(--color-background-neutral);
+      color: var(--color-interactive-primary);
     }
   }
 

package/src/button/Button.spec.tsx

@@ -202,6 +202,24 @@ describe('Button', () => {
             expect(button).not.toHaveAttribute('href');
           });
         });
+
+        describe('content id', () => {
+          it('should not set id for content by default', () => {
+            const { container } = render(<Button v2>clickMe</Button>);
+
+            expect(container.querySelector('[id$="_content"]')).not.toBeInTheDocument();
+          });
+
+          it('should set id for content by default if `id` is passed as a button prop', () => {
+            const { container } = render(
+              <Button v2 id="myId">
+                clickMe
+              </Button>,
+            );
+
+            expect(container.querySelector('#myId_content')).toBeInTheDocument();
+          });
+        });
       });
     });
   });

package/src/button/Button.tsx

@@ -62,7 +62,11 @@ const Button = forwardRef<ButtonReferenceType, NewButtonProps>(
             data-testid="button-loader-indicator"
           />
         )}
-        <span className="wds-Button-label" aria-hidden={loading}>
+        <span
+          className="wds-Button-label"
+          id={props.id ? `${props.id}_content` : undefined}
+          aria-hidden={loading}
+        >
           {size === 'lg' ? (
             <span className="wds-Button-labelText">{children}</span>
           ) : (

package/src/button/Button.types.ts

@@ -5,7 +5,7 @@ export type ButtonSentiment = 'default' | 'negative';
 export type ButtonPriority = 'primary' | 'secondary' | 'secondary-neutral' | 'tertiary';
 export type ButtonSize = 'sm' | 'md' | 'lg';
 export type ButtonReferenceType = HTMLButtonElement | HTMLAnchorElement;
-type ButtonAddonIcon = {
+export type ButtonAddonIcon = {
   type: 'icon';
   value: ReactNode;
 };

package/src/button/index.ts

@@ -1,5 +1,5 @@
 export { default } from './Button.resolver';
-export type { ButtonProps as NewButtonProps } from './Button.types';
+export type { ButtonProps as NewButtonProps, ButtonAddonIcon } from './Button.types';
 
 // export legacy button props for backwards compatibility with legacy Button interface
 // delete this when migration to new Button is done (or aleast no more deep imports, use following query)

package/src/checkboxButton/CheckboxButton.story.tsx

@@ -35,14 +35,14 @@ export const Indeterminate: Story = {
     indeterminate: true,
   },
   render: (args) => {
-    const [indeterminate, setIndeterminate] = useState(true);
+    const [checked, setChecked] = useState<boolean | undefined>(undefined);
 
     return (
       <CheckboxButton
         {...args}
-        checked
-        indeterminate={indeterminate}
-        onChange={() => setIndeterminate(!indeterminate)}
+        checked={false}
+        indeterminate={args.indeterminate}
+        onChange={() => setChecked(!checked)}
       />
     );
   },

package/src/common/RadioButton/RadioButton.tsx

@@ -8,6 +8,8 @@ export interface RadioButtonProps<T extends string | number = string> {
   disabled?: boolean;
   value?: T;
   readOnly?: boolean;
+  className?: string;
+  'aria-describedby'?: string;
 }
 
 export default function RadioButton<T extends string | number = ''>({
@@ -18,17 +20,20 @@ export default function RadioButton<T extends string | number = ''>({
   onChange,
   disabled,
   readOnly,
+  className,
+  'aria-describedby': ariaDescribedBy,
 }: RadioButtonProps<T>) {
   return (
     <>
       <input
         type="radio"
-        className="sr-only"
+        className={clsx('sr-only', className)}
         id={id}
         value={value}
         name={name}
         checked={checked}
         disabled={disabled || readOnly}
+        aria-describedby={ariaDescribedBy}
         onChange={() => {
           if (!checked) {
             onChange?.(value);

package/src/common/initials.spec.tsx

@@ -39,17 +39,4 @@ describe('getInitials', () => {
   it('handles single character', () => {
     expect(getInitials('Q')).toBe('Q');
   });
-
-  it('handles names with (parenthesized) values', () => {
-    expect(getInitials('Squirrel (GBP)')).toBe('S');
-    expect(getInitials('Fantastic Squirrel (USD)')).toBe('FS');
-    expect(getInitials('Squirrel [GBP]')).toBe('S');
-    expect(getInitials('Fantastic Squirrel [USD]')).toBe('FS');
-    expect(getInitials('Squirrel {GBP}')).toBe('S');
-    expect(getInitials('Fantastic Squirrel {USD}')).toBe('FS');
-    expect(getInitials('Squirrel <GBP>')).toBe('S');
-    expect(getInitials('Fantastic Squirrel <USD>')).toBe('FS');
-    expect(getInitials('(Super) Fantastic Squirrel')).toBe('FS');
-    expect(getInitials('Super (Fantastic) Squirrel')).toBe('SS');
-  });
 });

package/src/common/initials.ts

@@ -5,7 +5,6 @@ export function getInitials(name: string) {
 
   const allInitials = name
     .split(' ')
-    .filter((part) => !startsWithParenthesis(part))
     .map((part) => part[0])
     .join('')
     .toUpperCase();
@@ -15,8 +14,4 @@ export function getInitials(name: string) {
   }
 
   return allInitials[0] + allInitials.slice(-1);
-
-  function startsWithParenthesis(part: string) {
-    return /^[({[<]/.test(part);
-  }
 }

package/src/i18n/de.json

@@ -45,7 +45,6 @@
   "neptune.Upload.csFailureText": "Hochladen fehlgeschlagen. Bitte versuche es erneut",
   "neptune.Upload.csSuccessText": "Fertig hochgeladen!",
   "neptune.Upload.csTooLargeMessage": "Bitte wähle eine Datei aus, die kleiner als {maxSize} MB ist",
-  "neptune.Upload.csTooLargeNoLimitMessage": "Bitte stelle eine kleinere Datei zur Verfügung",
   "neptune.Upload.csWrongTypeMessage": "Dateityp wird nicht unterstützt. Bitte versuche es erneut mit einer anderen Datei",
   "neptune.Upload.psButtonText": "Abbrechen",
   "neptune.Upload.psProcessingText": "Wird hochgeladen...",
@@ -53,7 +52,6 @@
   "neptune.Upload.usButtonText": "Oder wähle eine Datei aus",
   "neptune.Upload.usDropMessage": "Datei zum Hochladen in dieses Feld ziehen",
   "neptune.Upload.usPlaceholder": "Zieh eine Datei in dieses Feld, die kleiner als {maxSize} MB ist",
-  "neptune.Upload.usPlaceholderNoLimit": "Ziehe eine Datei hierher",
   "neptune.UploadButton.allFileTypes": "Alle Dateiformate",
   "neptune.UploadButton.dropFiles": "Datei zum Hochladen in dieses Feld ziehen",
   "neptune.UploadButton.instructions": "{fileTypes}, kleiner als {size} MB",