@transferwise/components 46.132.1 → 46.133.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.132.1",
+  "version": "46.133.0",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -43,17 +43,17 @@
     "@babel/preset-env": "^7.29.0",
     "@babel/preset-react": "^7.28.5",
     "@babel/preset-typescript": "^7.28.5",
-    "@formatjs/cli": "^6.12.2",
+    "@formatjs/cli": "^6.13.1",
     "@rollup/plugin-babel": "^6.1.0",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-typescript": "^12.3.0",
     "@rollup/plugin-url": "^8.0.2",
-    "@storybook/addon-a11y": "^10.3.0-alpha.4",
-    "@storybook/addon-docs": "^10.3.0-alpha.4",
-    "@storybook/addon-mcp": "^0.2.2",
+    "@storybook/addon-a11y": "^10.3.2",
+    "@storybook/addon-docs": "^10.3.2",
+    "@storybook/addon-mcp": "^0.4.1",
     "@storybook/addon-webpack5-compiler-babel": "^4.0.0",
-    "@storybook/react-webpack5": "^10.3.0-alpha.4",
+    "@storybook/react-webpack5": "^10.3.2",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
@@ -63,7 +63,7 @@
     "@types/babel__core": "^7.20.5",
     "@types/commonmark": "^0.27.10",
     "@types/jest": "^30.0.0",
-    "@types/lodash": "4.17.23",
+    "@types/lodash": "4.17.24",
     "@types/lodash.clamp": "^4.0.9",
     "@types/lodash.debounce": "^4.0.9",
     "@types/react": "^18.3.28",
@@ -72,10 +72,10 @@
     "@wise/art": "^2.26.0",
     "@wise/eslint-config": "^13.3.0",
     "babel-plugin-formatjs": "^10.5.41",
-    "eslint": "^9.39.2",
-    "eslint-plugin-storybook": "^10.3.0-alpha.4",
+    "eslint": "^9.39.4",
+    "eslint-plugin-storybook": "^10.3.2",
     "gulp": "^5.0.1",
-    "jest": "^30.2.0",
+    "jest": "^30.3.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-fetch-mock": "^3.0.3",
     "jsdom-testing-mocks": "^1.16.0",
@@ -83,13 +83,13 @@
     "react-intl": "^7.1.14",
     "rollup": "^4.57.1",
     "rollup-preserve-directives": "^1.1.3",
-    "storybook": "^10.3.0-alpha.4",
-    "storybook-addon-tag-badges": "^3.0.6",
+    "storybook": "^10.3.2",
+    "storybook-addon-tag-badges": "^3.1.0",
     "storybook-addon-test-codegen": "^3.0.1",
     "@transferwise/less-config": "3.1.2",
-    "@transferwise/neptune-css": "14.27.1",
+    "@wise/wds-configs": "0.0.0",
     "@wise/components-theming": "1.10.1",
-    "@wise/wds-configs": "0.0.0"
+    "@transferwise/neptune-css": "14.27.1"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3 || ^4",
@@ -102,24 +102,24 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.28.6",
-    "@floating-ui/react": "^0.27.18",
+    "@floating-ui/react": "^0.27.19",
     "@headlessui/react": "^2.2.9",
     "@popperjs/core": "^2.11.8",
-    "@react-aria/focus": "^3.21.4",
-    "@react-aria/overlays": "^3.31.1",
-    "@transferwise/formatting": "^2.13.5",
+    "@react-aria/focus": "^3.21.5",
+    "@react-aria/overlays": "^3.31.2",
+    "@transferwise/formatting": "^2.13.7",
     "@transferwise/neptune-validation": "^3.3.3",
     "clsx": "^2.1.1",
     "commonmark": "^0.31.2",
     "core-js": "^3.48.0",
-    "framer-motion": "^12.33.0",
+    "framer-motion": "^12.36.0",
     "lodash.clamp": "^4.0.3",
     "lodash.debounce": "^4.0.8",
     "merge-props": "^6.0.0",
     "react-popper": "^2.3.0",
     "react-transition-group": "^4.4.5",
-    "virtua": "^0.48.5",
-    "@transferwise/neptune-tokens": "^8.16.0"
+    "virtua": "^0.48.8",
+    "@transferwise/neptune-tokens": "^8.20.3"
   },
   "publishConfig": {
     "access": "public",

package/src/button/_stories/Button.accessibility.docs.mdx

@@ -1,7 +1,7 @@
 import { Meta, Canvas, Source } from '@storybook/addon-docs/blocks';
 import { Bulb } from '@transferwise/icons';
-import { NavigationOption } from '../../navigationOption/NavigationOption';
-import * as stories from './Button.story';
+import ListItem from '../../listItem';
+import * as stories from './Button.test.story';
 
 <Meta title="Actions/Button/Accessibility" />
 
@@ -9,11 +9,15 @@ import * as stories from './Button.story';
 
 Given the `Button` is a widely used and highly sensitive component, there are some instances where care is required to ensure inclusive and accessible experience.
 
-<NavigationOption
-  media={<Bulb size={24} />}
+<ListItem
   title="Design guidance"
-  content="Before you start, familiarise yourself with the dedicated accessibility documentation."
-  href="https://wise.design/components/button#accessibility"
+  subtitle="Before you start, familiarise yourself with the dedicated accessibility documentation."
+  control={<ListItem.Navigation href="https://wise.design/components/button#accessibility" />}
+  media={
+    <ListItem.AvatarView>
+      <Bulb />
+    </ListItem.AvatarView>
+  }
 />
 
 <br />

package/src/button/_stories/Button.story.tsx

@@ -153,7 +153,6 @@ const getPropsForPreview = (args: PreviewStoryArgs) => {
 const meta: Meta<typeof Button> = {
   component: Button,
   title: 'Actions/Button',
-  tags: ['new'],
   argTypes: {
     v2: {
       table: {
@@ -306,7 +305,6 @@ export const Playground: StoryObj<PreviewStoryArgs> = {
     onMouseLeave: { table: { disable: true } },
     ...previewArgTypes,
   },
-  tags: ['!autodocs'],
 };
 
 /**

package/src/common/bottomSheet/BottomSheet.story.tsx

@@ -2,15 +2,13 @@ import { action } from 'storybook/actions';
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { FastFlag } from '@transferwise/icons';
 import { useState } from 'react';
-
-import Body from '../../body/Body';
 import Button from '../../button';
-import NavigationOption from '../../navigationOption';
-import { lorem10, lorem500 } from '../../test-utils';
+import { lorem10 } from '../../test-utils';
 import Title from '../../title/Title';
 import { Typography } from '../propsValues/typography';
 
 import BottomSheet from './BottomSheet';
+import ListItem from '../../listItem';
 
 export default {
   component: BottomSheet,
@@ -48,11 +46,15 @@ export const Basic: Story = {
         {lorem10}
         <br />
         <br />
-        <NavigationOption
-          title="Navigation option"
-          content="Button and icon are vertically centered."
-          media={<FastFlag size={24} />}
-          isContainerAligned
+        <ListItem
+          title="List item"
+          subtitle="Button and icon are vertically centered."
+          control={<ListItem.Navigation href="#" />}
+          media={
+            <ListItem.AvatarView>
+              <FastFlag />
+            </ListItem.AvatarView>
+          }
         />
       </>
     ),

package/src/common/bottomSheet/BottomSheet.test.story.tsx

@@ -8,8 +8,8 @@ import { Typography } from '../propsValues/typography';
 import Alert from '../../alert';
 import Body from '../../body';
 import Button from '../../button';
-import NavigationOption from '../../navigationOption';
 import Title from '../../title';
+import ListItem from '../../listItem';
 import BottomSheet from './BottomSheet';
 import { withVariantConfig } from '../../../.storybook/helpers';
 
@@ -109,11 +109,15 @@ const Basic: Story = {
         {lorem10}
         <br />
         <br />
-        <NavigationOption
-          title="Navigation option"
-          content="Button and icon are vertically centered."
-          media={<FastFlag size={24} />}
-          isContainerAligned
+        <ListItem
+          title="List item"
+          subtitle="Button and icon are vertically centered."
+          control={<ListItem.Navigation href="#" />}
+          media={
+            <ListItem.AvatarView>
+              <FastFlag />
+            </ListItem.AvatarView>
+          }
         />
       </>
     ),
@@ -153,16 +157,25 @@ const WithOverflowContent: Story = {
       <>
         <Title type={Typography.TITLE_SECTION}>Money without borders</Title>
         {lorem10}
-        <NavigationOption
-          title="Navigation option"
-          content="Button and icon are vertically centered."
-          media={<FastFlag size={24} />}
+        <ListItem
+          title="List item"
+          subtitle="Button and icon are vertically centered."
+          control={<ListItem.Navigation href="#" />}
+          media={
+            <ListItem.AvatarView>
+              <FastFlag />
+            </ListItem.AvatarView>
+          }
         />
-        <NavigationOption
-          title="Navigation option"
-          content="Button and icon are vertically centered."
-          media={<FastFlag size={24} />}
-          isContainerAligned
+        <ListItem
+          title="List item"
+          subtitle="Button and icon are vertically centered."
+          control={<ListItem.Navigation href="#" />}
+          media={
+            <ListItem.AvatarView>
+              <FastFlag />
+            </ListItem.AvatarView>
+          }
         />
         {lorem500}
         <Body type={Typography.BODY_DEFAULT_BOLD}>{lorem10}</Body>

package/src/divider/Divider.accessibility.docs.mdx

@@ -1,6 +1,4 @@
-import { Meta, Canvas, Source } from '@storybook/addon-docs/blocks';
-import { NavigationOption } from '..';
-import { Bulb } from '@transferwise/icons';
+import { Meta, Source } from '@storybook/addon-docs/blocks';
 
 <Meta title="Layouts/Divider/Accessibility" />
 
@@ -8,13 +6,6 @@ import { Bulb } from '@transferwise/icons';
 
 A Divider is used to separate sections of content. While it doesn't directly announce anything to screen readers, there are a few considerations:
 
-<NavigationOption
-  media={<Bulb size={24} />}
-  title="Design guidance"
-  content="Before you start, please review the documentation on how separators should be used, announced or hidden from assistive tech."
-  href="https://wise.design/components/divider"
-/>
-
 <br />
 <br />
 

package/src/divider/Divider.story.tsx

@@ -84,7 +84,6 @@ export const Playground: Story = {
   args: {
     level: 'section',
   },
-  tags: ['!autodocs'],
 };
 
 /**

package/src/expressiveMoneyInput/ExpressiveMoneyInput.story.tsx

@@ -52,7 +52,7 @@ const withScrollbarProtector: Decorator = (Story) => (
 export default {
   title: 'Forms/ExpressiveMoneyInput',
   component: ExpressiveMoneyInput,
-  tags: ['contribution'],
+  tags: ['early-access', 'contribution'],
   parameters: {
     docs: {
       canvas: {
@@ -78,7 +78,6 @@ export default {
 type Story = StoryObj<ExpressiveMoneyInputProps>;
 
 export const Playground: Story = {
-  tags: ['!autodocs'],
   render: (args: ExpressiveMoneyInputProps) => <ExpressiveMoneyInput {...args} />,
 };
 

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

@@ -1,6 +1,6 @@
 import { Meta, Canvas, Source } from '@storybook/addon-docs/blocks';
-import { NavigationOption } from '..';
 import { Bulb } from '@transferwise/icons';
+import ListItem from '../listItem';
 import * as stories from './Header.story';
 
 <Meta title="Typography/Header/Accessibility" />
@@ -9,11 +9,15 @@ import * as stories from './Header.story';
 
 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} />}
+<ListItem
   title="Design guidance"
-  content="Before you start, familiarise yourself with the dedicated accessibility documentation."
-  href="https://wise.design/components/section-header#accessibility"
+  subtitle="Before you start, familiarise yourself with the provided guidance."
+  control={<ListItem.Navigation href="https://wise.design/components/section-header" />}
+  media={
+    <ListItem.AvatarView>
+      <Bulb />
+    </ListItem.AvatarView>
+  }
 />
 
 <br />

package/src/inputs/InputGroup.css

@@ -10,6 +10,10 @@
   grid-column-start: 1;
   grid-row-start: 1;
 }
+.np-input-group .np-input-addon--avatar + fieldset .form-control.np-form-control.np-form-control--size-md.np-button-input {
+  padding-left: 48px;
+  padding-left: var(--size-48);
+}
 .np-input-addon {
   pointer-events: none;
   z-index: 10;
@@ -21,14 +25,18 @@
   transition-timing-function: ease-out;
   transition-duration: 150ms;
 }
+.np-input-addon.np-input-addon--avatar > .np-avatar-view {
+  margin-right: 8px;
+  margin-right: var(--size-8);
+}
 .np-input-group:disabled .np-input-addon:not(.np-input-addon--interactive) {
   opacity: 0.45;
   mix-blend-mode: luminosity;
 }
-.np-input-group:has( > :is(input,button,select):focus-visible) .np-input-addon {
+.np-input-group:has( > :is(input, button, select):focus-visible) .np-input-addon {
   color: var(--color-interactive-primary);
 }
-.np-input-group:has( > :is(input,button,select):hover) .np-input-addon {
+.np-input-group:has( > :is(input, button, select):hover) .np-input-addon {
   color: #b5b7ba;
   color: var(--color-interactive-secondary-hover);
 }

package/src/inputs/InputGroup.less

@@ -10,9 +10,19 @@
 
   /* Prevent unwanted `group-hover/input` triggers */
   border-radius: var(--radius-full);
+
+  .np-input-addon--avatar
+    + fieldset
+    .form-control.np-form-control.np-form-control--size-md.np-button-input {
+    padding-left: 48px;
+    padding-left: var(--size-48);
+  }
 }
 
 .np-input-addon {
+  &.np-input-addon--avatar > .np-avatar-view {
+    margin-right: var(--size-8);
+  }
   pointer-events: none;
   z-index: 10;
   display: inline-flex;
@@ -27,11 +37,11 @@
     mix-blend-mode: luminosity;
   }
 
-  .np-input-group:has(>:is(input,button,select):focus-visible) & {
+  .np-input-group:has(> :is(input, button, select):focus-visible) & {
     color: var(--color-interactive-primary);
   }
 
-  .np-input-group:has(>:is(input,button,select):hover) & {
+  .np-input-group:has(> :is(input, button, select):hover) & {
     color: var(--color-interactive-secondary-hover);
   }
 

package/src/inputs/InputGroup.story.tsx

@@ -6,7 +6,10 @@ import { Button } from '..';
 import { Field } from '../field/Field';
 
 import { Input } from './Input';
+import { Flag } from '@wise/art';
 import { InputGroup } from './InputGroup';
+import AvatarView from '../avatarView';
+import PhoneNumberInput from '../phoneNumberInput';
 
 export default {
   component: InputGroup,
@@ -81,3 +84,27 @@ function InputGroupWithSuffix(args: NonNullable<Story['args']>) {
     </InputGroup>
   );
 }
+
+export const PhoneNumberWithPrefix: Story = {
+  render: (args) => <PhoneNumberInputGroupWithPrefix {...args} />,
+  args: {
+    disabled: false,
+  },
+};
+
+function PhoneNumberInputGroupWithPrefix(args: NonNullable<Story['args']>) {
+  return (
+    <InputGroup
+      {...args}
+      addonStart={{
+        content: (
+          <AvatarView size={24}>
+            <Flag code="gbp" />
+          </AvatarView>
+        ),
+      }}
+    >
+      <PhoneNumberInput onChange={() => {}} />
+    </InputGroup>
+  );
+}

package/src/inputs/InputGroup.tsx

@@ -126,6 +126,15 @@ function InputAddon({
     }
   });
 
+  const isAvatarView = (node: unknown): boolean => {
+    if (!node || typeof node !== 'object') return false;
+    const { type } = node as { type?: { displayName?: string; name?: string } };
+    if (!type || (typeof type !== 'function' && typeof type !== 'object')) return false;
+    return type.displayName === 'AvatarView' || type.name === 'AvatarView';
+  };
+
+  const hasAvatarView = Array.isArray(content) ? content.some(isAvatarView) : isAvatarView(content);
+
   return (
     /* Prevent nested controls from being labeled redundantly */
     <FieldLabelContextProvider value={undefined}>
@@ -145,6 +154,7 @@ function InputAddon({
                   'np-input-addon--padding-sm': padding === 'sm',
                   'np-input-addon--padding-md': padding === 'md',
                 },
+                hasAvatarView && 'np-input-addon--avatar',
               )}
             >
               {content}

package/src/inputs/SelectInput/_stories/SelectInput.story.tsx

@@ -61,7 +61,6 @@ const meta = {
   },
   parameters: {
     actions: { argTypesRegex: '' },
-    docs: { toc: true },
   },
 } satisfies Meta<typeof SelectInput>;
 export default meta;

package/src/legacylistItem/LegacyListItem.test.story.tsx

@@ -6,7 +6,7 @@ import List from '../list';
 
 export default {
   component: LegacyListItem,
-  tags: ['!autodocs', 'deprecated', '!manifest'],
+  tags: ['!autodocs', '!manifest', 'deprecated'],
   title: 'Content/LegacyListItem/Tests',
 };
 

package/src/listItem/AdditionalInfo/ListItemAdditionalInfo.story.tsx

@@ -75,7 +75,6 @@ const previewArgTypes = {
 } as const;
 
 export const Playground: StoryObj<PreviewStoryArgs> = {
-  tags: ['!autodocs'],
   argTypes: previewArgTypes,
   args: {
     children: lorem20,

package/src/listItem/AvatarLayout/ListItemAvatarLayout.story.tsx

@@ -41,7 +41,6 @@ export default {
 type Story = StoryObj<ListItemAvatarLayoutProps>;
 
 export const Playground: Story = {
-  tags: ['!autodocs'],
   render: (args: ListItemAvatarLayoutProps) => {
     return (
       <List>

package/src/listItem/AvatarView/ListItemAvatarView.story.tsx

@@ -117,7 +117,6 @@ export default {
 type Story = StoryObj<ListItemAvatarViewProps>;
 
 export const Playground: Story = {
-  tags: ['!autodocs'],
   render: (args: ListItemAvatarViewProps) => {
     return (
       <List>

package/src/listItem/Button/ListItemButton.story.tsx

@@ -146,7 +146,6 @@ export default meta;
 type Story = StoryObj<ListItemButtonProps>;
 
 export const Playground: StoryObj<PreviewStoryArgs> = {
-  tags: ['!autodocs'],
   render: (args: PreviewStoryArgs) => {
     const [props, previewProps] = getPropsForPreview(args);
 

package/src/listItem/Checkbox/ListItemCheckbox.story.tsx

@@ -51,7 +51,6 @@ export default meta;
 type Story = StoryObj<ListItemCheckboxProps>;
 
 export const Playground: Story = {
-  tags: ['!autodocs'],
   render: (args: ListItemCheckboxProps) => {
     return (
       <List>

package/src/listItem/IconButton/ListItemIconButton.story.tsx

@@ -84,7 +84,6 @@ export default meta;
 type Story = StoryObj<ListItemIconButtonProps>;
 
 export const Playground: Story = {
-  tags: ['!autodocs'],
   render: (args: ListItemIconButtonProps) => {
     return (
       <List>

package/src/listItem/Navigation/ListItemNavigation.story.tsx

@@ -37,7 +37,6 @@ export default meta;
 type Story = StoryObj<ListItemNavigationProps>;
 
 export const Playground: Story = {
-  tags: ['!autodocs'],
   render: (args: ListItemNavigationProps) => {
     return (
       <List>

package/src/listItem/Prompt/ListItemPrompt.story.tsx

@@ -50,7 +50,6 @@ export default meta;
 type Story = StoryObj<ListItemPromptProps>;
 
 export const Playground: Story = {
-  tags: ['!autodocs'],
   parameters: {
     docs: {
       source: 'dynamic',

package/src/listItem/Radio/ListItemRadio.story.tsx

@@ -33,7 +33,6 @@ export default meta;
 type Story = StoryObj<ListItemRadioProps>;
 
 export const Playground: Story = {
-  tags: ['!autodocs'],
   render: (args: ListItemRadioProps) => {
     return (
       <List>

package/src/listItem/Switch/ListItemSwitch.story.tsx

@@ -33,7 +33,6 @@ export default meta;
 type Story = StoryObj<ListItemSwitchProps>;
 
 export const Playground: Story = {
-  tags: ['!autodocs'],
   render: (args: ListItemSwitchProps) => {
     return (
       <List>

package/src/listItem/_stories/ListItem.story.tsx

@@ -33,6 +33,7 @@ const hideControls = disableControls([
  */
 export default {
   component: ListItem,
+  tags: ['new'],
   subcomponents: {
     'ListItem.AdditionalInfo': ListItem.AdditionalInfo,
     'ListItem.Prompt': ListItem.Prompt,

package/src/main.css

@@ -30167,6 +30167,11 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   grid-row-start: 1;
 }
 
+.np-input-group .np-input-addon--avatar + fieldset .form-control.np-form-control.np-form-control--size-md.np-button-input {
+  padding-left: 48px;
+  padding-left: var(--size-48);
+}
+
 .np-input-addon {
   pointer-events: none;
   z-index: 10;
@@ -30179,16 +30184,21 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   transition-duration: 150ms;
 }
 
+.np-input-addon.np-input-addon--avatar > .np-avatar-view {
+  margin-right: 8px;
+  margin-right: var(--size-8);
+}
+
 .np-input-group:disabled .np-input-addon:not(.np-input-addon--interactive) {
   opacity: 0.45;
   mix-blend-mode: luminosity;
 }
 
-.np-input-group:has( > :is(input,button,select):focus-visible) .np-input-addon {
+.np-input-group:has( > :is(input, button, select):focus-visible) .np-input-addon {
   color: var(--color-interactive-primary);
 }
 
-.np-input-group:has( > :is(input,button,select):hover) .np-input-addon {
+.np-input-group:has( > :is(input, button, select):hover) .np-input-addon {
   color: #b5b7ba;
   color: var(--color-interactive-secondary-hover);
 }
@@ -31687,6 +31697,12 @@ html:not([dir="rtl"]) .np-navigation-option {
   width: 100%;
 }
 
+.tw-telephone__country-select--with-input-group-addon-start .np-button-input {
+  padding-inline-start: 48px;
+  padding-inline-start: var(--size-48);
+  padding-inline-end: 26px !important;
+}
+
 .tw-telephone__number-input {
   flex: auto 1 1;
 }

package/src/phoneNumberInput/PhoneNumberInput.css

@@ -18,6 +18,11 @@
 .tw-telephone__country-select .np-input-group {
   width: 100%;
 }
+.tw-telephone__country-select--with-input-group-addon-start .np-button-input {
+  padding-inline-start: 48px;
+  padding-inline-start: var(--size-48);
+  padding-inline-end: 26px !important;
+}
 .tw-telephone__number-input {
   flex: auto 1 1;
 }

package/src/phoneNumberInput/PhoneNumberInput.less

@@ -19,6 +19,13 @@
   }
 }
 
+.tw-telephone__country-select--with-input-group-addon-start {
+  .np-button-input {
+    padding-inline-start: var(--size-48);
+    padding-inline-end: 26px !important;
+  }
+}
+
 .tw-telephone__number-input {
   flex: auto 1 1;
 }