@transferwise/components 0.0.0-experimental-4533565 → 0.0.0-experimental-da1781d

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

@@ -1,13 +1,43 @@
-import { ElementType, FC, ReactNode } from 'react';
-export type ListItemProps = {
+import { ReactNode } from 'react';
+export type ListItemTypes = 'non-interactive' | 'navigation' | 'radio' | 'checkbox' | 'switch' | 'button' | 'icon-button';
+export type Props = {
+    as?: 'li' | 'div' | 'span';
+    inverted?: boolean;
+    disabled?: boolean;
+    spotlight?: 'active' | 'inactive';
     title: ReactNode;
-    value: ReactNode;
+    subtitle?: ReactNode;
+    additionalInfo?: ReactNode;
+    valueTitle?: ReactNode;
+    valueSubtitle?: ReactNode;
     media?: ReactNode;
-    action?: ReactNode;
-    className?: string;
-    isContainerAligned?: boolean;
-    as?: ElementType;
+    control?: ReactNode;
+    prompt?: ReactNode;
+};
+export type ListItemContextData = {
+    setControlType: (type: ListItemTypes) => void;
+    ids: {
+        label: string;
+        additionalInfo: string;
+        value: string;
+        control: string;
+        prompt: string;
+    };
+    props: Pick<Props, 'as' | 'disabled' | 'inverted'>;
+};
+export declare const ListItemContext: import("react").Context<ListItemContextData>;
+export declare const ListItem: {
+    ({ as: View, title, subtitle, additionalInfo, prompt, inverted, media, spotlight, valueTitle, valueSubtitle, control, disabled, }: Props): import("react").JSX.Element;
+    Image: ({ alt, size, ...props }: import("./ListItemMedia").ListItemImageProps) => import("react").JSX.Element;
+    AvatarView: ({ className, size, ...props }: import("./ListItemMedia").ListItemAvatarViewProps) => import("react").JSX.Element;
+    AvatarLayout: ({ className, size, ...props }: import("./ListItemMedia").ListItemAvatarLayoutProps) => import("react").JSX.Element;
+    AdditionalInfo: ({ children, action }: import("./ListItemAdditionalInfo").ListItemAdditionalInfoProps) => import("react").JSX.Element;
+    Checkbox: (props: import("./ListItemCheckbox").ListItemCheckboxProps) => import("react").JSX.Element;
+    IconButton: (props: import("./ListItemIconButton").ListItemIconButtonProps) => import("react").JSX.Element;
+    Navigation: ({ onClick }: import("./ListItemNavigation").ListItemNavigationProps) => import("react").JSX.Element;
+    Button: ({ priority, ...props }: import("./ListItemButton").ListItemButtonProps) => import("react").JSX.Element;
+    Switch: (props: import("..").SwitchProps) => import("react").JSX.Element;
+    Prompt: ({ type, children, action }: import("./prompt/Prompt").ListItemPromptProps) => import("react").JSX.Element;
 };
-declare const ListItem: FC<ListItemProps>;
 export default ListItem;
 //# sourceMappingURL=ListItem.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../src/listItem/ListItem.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAInD,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,EAAE,CAAC,EAAE,WAAW,CAAC;CAClB,CAAC;AAEF,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CAmC/B,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../src/listItem/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAA4B,MAAM,OAAO,CAAC;AAa3E,MAAM,MAAM,aAAa,GACrB,iBAAiB,GACjB,YAAY,GACZ,OAAO,GACP,UAAU,GACV,QAAQ,GACR,QAAQ,GACR,aAAa,CAAC;AAElB,MAAM,MAAM,KAAK,GAAG;IAClB,EAAE,CAAC,EAAE,IAAI,GAAG,KAAK,GAAG,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAClC,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,cAAc,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IAC9C,GAAG,EAAE;QACH,KAAK,EAAE,MAAM,CAAC;QACd,cAAc,EAAE,MAAM,CAAC;QACvB,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,CAAC;QAChB,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,GAAG,UAAU,GAAG,UAAU,CAAC,CAAC;CACpD,CAAC;AAIF,eAAO,MAAM,eAAe,8CAA2C,CAAC;AAExE,eAAO,MAAM,QAAQ;uIAalB,KAAK;;;;;;;;;;;CAqGP,CAAC;AAeF,eAAe,QAAQ,CAAC"}

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

@@ -0,0 +1,9 @@
+import { PropsWithChildren } from 'react';
+import { LinkProps } from '../link';
+export type ListItemAdditionalInfoProps = PropsWithChildren<{
+    action?: Pick<LinkProps, 'href' | 'onClick' | 'target'> & {
+        label?: string;
+    };
+}>;
+export declare const AdditionalInfo: ({ children, action }: ListItemAdditionalInfoProps) => import("react").JSX.Element;
+//# sourceMappingURL=ListItemAdditionalInfo.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemAdditionalInfo.d.ts","sourceRoot":"","sources":["../../../src/listItem/ListItemAdditionalInfo.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAc,MAAM,OAAO,CAAC;AAGtD,OAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAG1C,MAAM,MAAM,2BAA2B,GAAG,iBAAiB,CAAC;IAC1D,MAAM,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC,GAAG;QAAE,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CAC9E,CAAC,CAAC;AAEH,eAAO,MAAM,cAAc,yBAAmC,2BAA2B,gCAoBxF,CAAC"}

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

@@ -0,0 +1,4 @@
+import { NewButtonProps } from '../button';
+export type ListItemButtonProps = Omit<NewButtonProps, 'v2' | 'size' | 'disabled'>;
+export declare const Button: ({ priority, ...props }: ListItemButtonProps) => import("react").JSX.Element;
+//# sourceMappingURL=ListItemButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemButton.d.ts","sourceRoot":"","sources":["../../../src/listItem/ListItemButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAyB,cAAc,EAAE,MAAM,WAAW,CAAC;AAGlE,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,cAAc,EAAE,IAAI,GAAG,MAAM,GAAG,UAAU,CAAC,CAAC;AAEnF,eAAO,MAAM,MAAM,2BAA0C,mBAAmB,gCAY/E,CAAC"}

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

@@ -0,0 +1,4 @@
+import { CheckboxButtonProps } from '../checkboxButton/CheckboxButton';
+export type ListItemCheckboxProps = Pick<CheckboxButtonProps, 'checked' | 'indeterminate' | 'onChange'>;
+export declare const Checkbox: (props: ListItemCheckboxProps) => import("react").JSX.Element;
+//# sourceMappingURL=ListItemCheckbox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemCheckbox.d.ts","sourceRoot":"","sources":["../../../src/listItem/ListItemCheckbox.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AAGvE,MAAM,MAAM,qBAAqB,GAAG,IAAI,CACtC,mBAAmB,EACnB,SAAS,GAAG,eAAe,GAAG,UAAU,CACzC,CAAC;AAEF,eAAO,MAAM,QAAQ,UAAoB,qBAAqB,gCAI7D,CAAC"}

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

@@ -0,0 +1,7 @@
+import { IconButtonProps } from '../iconButton';
+import { ReactNode } from 'react';
+export type ListItemIconButtonProps = Pick<IconButtonProps, 'onClick' | 'href' | 'target'> & {
+    children: ReactNode;
+};
+export declare const IconButton: (props: ListItemIconButtonProps) => import("react").JSX.Element;
+//# sourceMappingURL=ListItemIconButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemIconButton.d.ts","sourceRoot":"","sources":["../../../src/listItem/ListItemIconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6B,eAAe,EAAE,MAAM,eAAe,CAAC;AAE3E,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,eAAe,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC,GAAG;IAC3F,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,UAAU,UAAoB,uBAAuB,gCAIjE,CAAC"}

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

@@ -0,0 +1,19 @@
+import { AvatarViewProps } from '../avatarView';
+import { AvatarLayoutProps } from '../avatarLayout';
+import { ImageProps } from '../image/Image';
+type SizeProp = {
+    size?: 32 | 40 | 48 | 56 | 72;
+};
+export type ListItemAvatarViewProps = Omit<AvatarViewProps, 'size' | 'interactive'> & SizeProp;
+export declare const AvatarView: ({ className, size, ...props }: ListItemAvatarViewProps) => import("react").JSX.Element;
+export type ListItemAvatarLayoutProps = Omit<AvatarLayoutProps, 'size' | 'interactive'> & SizeProp;
+export declare const AvatarLayout: ({ className, size, ...props }: ListItemAvatarLayoutProps) => import("react").JSX.Element;
+export type ListItemImageProps = Omit<ImageProps, 'stretch' | 'shrink' | 'id' | 'alt'> & SizeProp & {
+    alt?: string;
+};
+/**
+ * TODO: mention that image is for rare cases not for DS illustrations, they discouraged
+ */
+export declare const Image: ({ alt, size, ...props }: ListItemImageProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=ListItemMedia.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemMedia.d.ts","sourceRoot":"","sources":["../../../src/listItem/ListItemMedia.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6B,eAAe,EAAE,MAAM,eAAe,CAAC;AAC3E,OAAO,EAA+B,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACjF,OAAO,EAAwB,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAGlE,KAAK,QAAQ,GAAG;IAAE,IAAI,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAA;CAAE,CAAC;AAElD,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,eAAe,EAAE,MAAM,GAAG,aAAa,CAAC,GAAG,QAAQ,CAAC;AAE/F,eAAO,MAAM,UAAU,kCAAwC,uBAAuB,gCAQrF,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAAC,iBAAiB,EAAE,MAAM,GAAG,aAAa,CAAC,GAAG,QAAQ,CAAC;AAEnG,eAAO,MAAM,YAAY,kCAAwC,yBAAyB,gCAQzF,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,UAAU,EAAE,SAAS,GAAG,QAAQ,GAAG,IAAI,GAAG,KAAK,CAAC,GACpF,QAAQ,GAAG;IACT,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEJ;;GAEG;AACH,eAAO,MAAM,KAAK,4BAAuC,kBAAkB,gCAY1E,CAAC"}

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

@@ -0,0 +1,4 @@
+import { ButtonProps } from '../button/Button.types';
+export type ListItemNavigationProps = Pick<ButtonProps, 'onClick' | 'href'>;
+export declare const Navigation: ({ onClick }: ListItemNavigationProps) => import("react").JSX.Element;
+//# sourceMappingURL=ListItemNavigation.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemNavigation.d.ts","sourceRoot":"","sources":["../../../src/listItem/ListItemNavigation.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAGrD,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,MAAM,CAAC,CAAC;AAE5E,eAAO,MAAM,UAAU,gBAAoC,uBAAuB,gCAIjF,CAAC"}

package/build/types/{item/ItemSwitch.d.ts → listItem/ListItemSwitch.d.ts}

@@ -1,3 +1,3 @@
 import { SwitchProps } from '../switch';
 export declare const Switch: (props: SwitchProps) => import("react").JSX.Element;
-//# sourceMappingURL=ItemSwitch.d.ts.map
+//# sourceMappingURL=ListItemSwitch.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemSwitch.d.ts","sourceRoot":"","sources":["../../../src/listItem/ListItemSwitch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAyB,WAAW,EAAE,MAAM,WAAW,CAAC;AAG/D,eAAO,MAAM,MAAM,UAAoB,WAAW,gCAIjD,CAAC"}

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

@@ -1,5 +1,6 @@
-export { List } from './List';
-export type { ListProps } from './List';
+export type { Props as ListItemProps } from './ListItem';
+export type { ListItemAdditionalInfoProps } from './ListItemAdditionalInfo';
+export type { ListItemCheckboxProps } from './ListItemCheckbox';
+export type { ListItemImageProps, ListItemAvatarViewProps, ListItemAvatarLayoutProps, } from './ListItemMedia';
 export { default } from './ListItem';
-export type { ListItemProps } from './ListItem';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/listItem/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC"}
+{"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,0BAA0B,CAAC;AAC5E,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAChE,YAAY,EACV,kBAAkB,EAClB,uBAAuB,EACvB,yBAAyB,GAC1B,MAAM,iBAAiB,CAAC;AAEzB,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC"}

package/build/types/{item → listItem}/prompt/Prompt.d.ts

@@ -1,12 +1,12 @@
 import { Sentiment } from '../../common';
 import { LinkProps } from '../../link';
-export type ItemPromptProps = {
+export type ListItemPromptProps = {
     type: `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}` | 'discount' | 'savings';
     children: React.ReactNode;
     action?: Pick<LinkProps, 'href' | 'target' | 'onClick'> & {
         'aria-label'?: string;
     };
 };
-export declare const ItemPrompt: ({ type, children, action }: ItemPromptProps) => import("react").JSX.Element;
-export default ItemPrompt;
+export declare const Prompt: ({ type, children, action }: ListItemPromptProps) => import("react").JSX.Element;
+export default Prompt;
 //# sourceMappingURL=Prompt.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Prompt.d.ts","sourceRoot":"","sources":["../../../../src/listItem/prompt/Prompt.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAGzC,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAGvC,MAAM,MAAM,mBAAmB,GAAG;IAChC,IAAI,EACA,GAAG,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,OAAO,GAAG,SAAS,CAAC,OAAO,EAAE,GACpF,UAAU,GACV,SAAS,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC,GAAG;QAAE,YAAY,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACrF,CAAC;AAEF,eAAO,MAAM,MAAM,+BAAgC,mBAAmB,gCAyBrE,CAAC;AAEF,eAAe,MAAM,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"useItemControl.d.ts","sourceRoot":"","sources":["../../../src/listItem/useItemControl.tsx"],"names":[],"mappings":"AACA,OAAO,EAAwC,aAAa,EAAE,MAAM,YAAY,CAAC;AAEjF,wBAAgB,cAAc,CAAC,WAAW,EAAE,aAAa;;EAQxD"}

package/build/types/phoneNumberInput/utils/isValidPhoneNumber/isValidPhoneNumber.d.ts

@@ -1,7 +1,7 @@
 /**
  *
  * @param phoneNumber
- * @returns True if number that starts with "+" and contains a mix of digits and spaces with at least 4 digits.
+ * @returns True if number that starts with "+" and contains a mix of digits and spaces with a configurable min length that defaults to 4.
  */
-export declare const isValidPhoneNumber: (phoneNumber: string) => boolean;
+export declare const isValidPhoneNumber: (phoneNumber: string, minLength?: number) => boolean;
 //# sourceMappingURL=isValidPhoneNumber.d.ts.map

package/build/types/phoneNumberInput/utils/isValidPhoneNumber/isValidPhoneNumber.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"isValidPhoneNumber.d.ts","sourceRoot":"","sources":["../../../../../src/phoneNumberInput/utils/isValidPhoneNumber/isValidPhoneNumber.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,gBAAiB,MAAM,YACsC,CAAC"}
+{"version":3,"file":"isValidPhoneNumber.d.ts","sourceRoot":"","sources":["../../../../../src/phoneNumberInput/utils/isValidPhoneNumber/isValidPhoneNumber.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,gBAAiB,MAAM,gCAEU,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-4533565",
+  "version": "0.0.0-experimental-da1781d",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -95,13 +95,13 @@
     "rollup-preserve-directives": "^1.1.1",
     "storybook": "^8.2.2",
     "@transferwise/less-config": "3.1.1",
-    "@transferwise/neptune-css": "0.0.0-experimental-4533565",
+    "@transferwise/neptune-css": "14.24.4",
     "@wise/components-theming": "1.6.2",
     "@wise/wds-configs": "0.0.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.21.0",
-    "@transferwise/neptune-css": "0.0.0-experimental-4533565",
+    "@transferwise/neptune-css": "^14.24",
     "@wise/art": "^2.16",
     "@wise/components-theming": "^1.0.0",
     "react": ">=18",

package/src/flowNavigation/animatedLabel/AnimatedLabel.tsx

@@ -6,7 +6,7 @@ import BottomSheet from '../../common/bottomSheet';
 import Option from '../../common/Option';
 import { Check, ChevronDown } from '@transferwise/icons';
 import { OverlayIdContext, OverlayIdProvider } from '../../provider/overlay/OverlayIdProvider';
-import { List } from '../../listItem';
+import { List } from '../../legacylistItem';
 
 export interface AnimatedLabelProps {
   activeLabel: number;

package/src/index.ts

@@ -51,7 +51,7 @@ export type {
 export type { TextAreaProps } from './inputs/TextArea';
 export type { InstructionsListProps } from './instructionsList';
 export type { LabelProps, LabelOptionalProps, LabelDescriptionProps } from './label/Label';
-export type { ListProps, ListItemProps } from './listItem';
+export type { ListProps, LegacyListItemProps } from './legacylistItem';
 export type { LoaderProps } from './loader';
 export type { MarkdownProps } from './markdown';
 export type { ModalProps } from './modal';
@@ -109,7 +109,7 @@ export type {
   TableCellStatus,
   TableCellType,
 } from './table';
-export type { ItemProps, ItemAdditionalInfoProps, ItemCheckboxProps } from './item';
+export type { ListItemProps, ListItemAdditionalInfoProps, ListItemCheckboxProps } from './listItem';
 
 /**
  * Components
@@ -168,7 +168,7 @@ export { TextArea } from './inputs/TextArea';
 export { default as InstructionsList } from './instructionsList';
 export { Label } from './label/Label';
 export { default as Link } from './link';
-export { List, default as ListItem } from './listItem';
+export { List, default as LegacyListItem } from './legacylistItem';
 export { default as Loader } from './loader';
 export { default as Logo } from './logo';
 export { default as Markdown } from './markdown';

package/src/legacylistItem/LegacyListItem.css

@@ -0,0 +1,6 @@
+.np-list-item {
+  width: 100%;
+}
+.np-list-item__action {
+  flex-shrink: 0;
+}

package/src/legacylistItem/LegacyListItem.less

@@ -0,0 +1,7 @@
+.np-list-item {
+  width: 100%;
+
+  &__action {
+    flex-shrink: 0;
+  }
+}

package/src/legacylistItem/LegacyListItem.story.tsx

@@ -0,0 +1,120 @@
+import { action } from '@storybook/addon-actions';
+import { Documents, FastFlag } from '@transferwise/icons';
+import { ComponentProps } from 'react';
+
+import { Button, IconButton } from '..';
+import AvatarView from '../avatarView';
+import Info from '../info';
+import Title from '../title/Title';
+import LegacyListItem, { List } from '.';
+
+export default {
+  component: LegacyListItem,
+  title: 'Other/LegacyListItem',
+  tags: ['autodocs'],
+};
+
+const Template = ({
+  title = 'Wise',
+  value = 'We’re building the world’s most international account',
+  ...props
+}: Partial<ComponentProps<typeof LegacyListItem>>) => {
+  return <LegacyListItem title={title} value={value} {...props} />;
+};
+
+export const Basic = () => {
+  return (
+    <List>
+      <Template />
+    </List>
+  );
+};
+
+export const Variants = () => {
+  return (
+    <div>
+      <div className="m-t-4 m-b-2">
+        <Title type="title-body">With Icon Avatar</Title>
+        <List>
+          <Template media={<AvatarView imgSrc="../tapestry-01.png" />} />
+        </List>
+      </div>
+      <div className="m-t-4 m-b-2">
+        <Title type="title-body">With Contact Avatar</Title>
+        <List>
+          <Template
+            title="Sandra Pepper"
+            value="Personal account"
+            media={<AvatarView profileName="Super Pepa" badge={{ icon: <FastFlag /> }} />}
+          />
+        </List>
+      </div>
+      <div className="m-t-4 m-b-2">
+        <Title type="title-body">With Avatar and Action</Title>
+        <List>
+          <Template
+            title="Account holder"
+            value="Sandra Pepper"
+            media={<AvatarView profileName="Super Pepa" badge={{ icon: <FastFlag /> }} />}
+            action={
+              <Button v2 size="sm">
+                Share details
+              </Button>
+            }
+          />
+        </List>
+      </div>
+      <div className="m-t-4 m-b-2">
+        <Title type="title-body">Text Only List</Title>
+        <List>
+          <Template title="Sort code" value="23-14-71" />
+          <Template title="Account number" value="12345678" />
+        </List>
+      </div>
+      <div className="m-t-4 m-b-2">
+        <Title type="title-body">Text With Action Button</Title>
+        <List>
+          <Template
+            title="SWIFT/BIC"
+            value="••• •••"
+            action={
+              <Button v2 size="sm" onClick={() => action('clicked')}>
+                Reveal
+              </Button>
+            }
+          />
+        </List>
+      </div>
+      <div className="m-t-4 m-b-2">
+        <Title type="title-body">Text With Other Action</Title>
+        <List>
+          <Template
+            title="Account number"
+            value="123456789"
+            action={
+              <IconButton size={24} aria-label="Copy" priority="minimal">
+                <Documents />
+              </IconButton>
+            }
+          />
+        </List>
+      </div>
+      <div className="m-t-4 m-b-2">
+        <Title type="title-body">Text With Info Action</Title>
+        <List>
+          <Template
+            title="Routing number"
+            value="987654"
+            action={
+              <Info
+                size="lg"
+                aria-label="More information"
+                content="Use this routing number to receive ACH and Wire transfers."
+              />
+            }
+          />
+        </List>
+      </div>
+    </div>
+  );
+};

package/src/{listItem/ListItem.tests.story.tsx → legacylistItem/LegacyListItem.tests.story.tsx}

@@ -1,15 +1,15 @@
 import { FastFlag } from '@transferwise/icons';
 import Button from '../button';
 import AvatarView from '../avatarView';
-import ListItem, { List, type ListItemProps } from '.';
+import LegacyListItem, { List, type LegacyListItemProps } from '.';
 
 export default {
-  component: ListItem,
-  title: 'Other/ListItem/tests',
+  component: LegacyListItem,
+  title: 'Other/LegacyListItem/tests',
 };
 
 export const LongText = () => {
-  const sharedProps: Partial<ListItemProps> = {
+  const sharedProps: Partial<LegacyListItemProps> = {
     media: <AvatarView profileName="Super Pepa" badge={{ icon: <FastFlag /> }} />,
     action: (
       <Button v2 size="sm" onClick={() => {}}>
@@ -21,13 +21,13 @@ export const LongText = () => {
   return (
     <div style={{ width: '35rem' }}>
       <List>
-        <ListItem
+        <LegacyListItem
           {...sharedProps}
           title="Default behaviour"
           value="This is a test of a long word dontbreakme dontbreakme dontbreakme breakmebreakmebreakmebreakmebreakmebreakmebreakmebreakmebreakmebreakme word."
         />
 
-        <ListItem
+        <LegacyListItem
           {...sharedProps}
           title="Wrapping the long word with a 'span.text-word-break'"
           value={
@@ -41,7 +41,7 @@ export const LongText = () => {
           }
         />
 
-        <ListItem
+        <LegacyListItem
           {...sharedProps}
           title="Using '&amp;shy;' HTML entitty"
           value="This is a test of a a very long word dontbreakme dontbreakme dontbreakme break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me word."

package/src/legacylistItem/LegacyListItem.tsx

@@ -0,0 +1,53 @@
+import { clsx } from 'clsx';
+import { ElementType, FC, ReactNode } from 'react';
+
+import Body from '../body/Body';
+
+export type LegacyListItemProps = {
+  title: ReactNode;
+  value: ReactNode;
+  media?: ReactNode;
+  action?: ReactNode;
+  className?: string;
+  isContainerAligned?: boolean;
+  as?: ElementType;
+};
+
+const LegacyListItem: FC<LegacyListItemProps> = ({
+  media,
+  action,
+  className,
+  title,
+  value,
+  isContainerAligned,
+  as = 'li',
+  ...rest
+}) => {
+  const Element = as;
+
+  return (
+    <Element
+      className={clsx('np-list-item d-flex align-items-center p-y-2', className, {
+        'p-x-2': !isContainerAligned,
+      })}
+      {...rest}
+    >
+      {media}
+
+      <div className={clsx('d-flex flex-column', { 'p-l-2': !!media, 'p-r-2': !!action })}>
+        <Body type="body-default" className="text-secondary m-b-0">
+          {title}
+        </Body>
+        {value && (
+          <Body type="body-large" className="text-primary text-overflow-wrap m-b-0">
+            {value}
+          </Body>
+        )}
+      </div>
+
+      {action ? <div className="np-list-item__action m-l-auto">{action}</div> : null}
+    </Element>
+  );
+};
+
+export default LegacyListItem;

package/src/legacylistItem/index.ts

@@ -0,0 +1,4 @@
+export { List } from './List';
+export type { ListProps } from './List';
+export { default } from './LegacyListItem';
+export type { LegacyListItemProps } from './LegacyListItem';