@transferwise/components 46.148.1 → 46.149.1

package/build/styles/styles/less/neptune.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 27 May 2026 15:50:09 GMT
+ * Generated on Tue, 09 Jun 2026 08:11:03 GMT
  */
 
 :root {
@@ -144,7 +144,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 27 May 2026 15:50:10 GMT
+ * Generated on Tue, 09 Jun 2026 08:11:04 GMT
  */
 
 .np-theme-personal {
@@ -328,7 +328,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 27 May 2026 15:50:10 GMT
+ * Generated on Tue, 09 Jun 2026 08:11:04 GMT
  */
 
 .np-theme-personal--forest-green {
@@ -512,7 +512,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 27 May 2026 15:50:10 GMT
+ * Generated on Tue, 09 Jun 2026 08:11:04 GMT
  */
 
 .np-theme-personal--bright-green {
@@ -696,7 +696,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 27 May 2026 15:50:10 GMT
+ * Generated on Tue, 09 Jun 2026 08:11:04 GMT
  */
 
 .np-theme-personal--dark {
@@ -880,7 +880,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 27 May 2026 15:50:10 GMT
+ * Generated on Tue, 09 Jun 2026 08:11:04 GMT
  */
 
 .np-theme-platform {
@@ -1064,7 +1064,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 27 May 2026 15:50:10 GMT
+ * Generated on Tue, 09 Jun 2026 08:11:04 GMT
  */
 
 .np-theme-platform--forest-green {
@@ -1248,7 +1248,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 27 May 2026 15:50:10 GMT
+ * Generated on Tue, 09 Jun 2026 08:11:04 GMT
  */
 
 .np-theme-business {
@@ -1433,7 +1433,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 27 May 2026 15:50:10 GMT
+ * Generated on Tue, 09 Jun 2026 08:11:04 GMT
  */
 
 .np-theme-business--dark {
@@ -1618,7 +1618,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 27 May 2026 15:50:10 GMT
+ * Generated on Tue, 09 Jun 2026 08:11:04 GMT
  */
 
 .np-theme-business--forest-green {
@@ -1803,7 +1803,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 27 May 2026 15:50:11 GMT
+ * Generated on Tue, 09 Jun 2026 08:11:04 GMT
  */
 
 .np-theme-business--bright-green {

package/build/types/flowNavigation/FlowNavigation.d.ts

@@ -11,9 +11,21 @@ export interface FlowNavigationProps {
     onClose?: () => void;
     /** Called when the back button is clicked. If not provided the back button won't show. The back button only shows on small screens */
     onGoBack?: () => void;
-    /** Steps to be displayed in stepper. If you don't need the stepper, please use OverlayHeader instead */
-    steps: readonly Step[];
+    /** Steps to be displayed in stepper. If not provided, the stepper won't show. */
+    steps?: readonly Step[];
+    /**
+     * When true, renders in composable mode using a fluid Container.
+     * This allows the FlowNavigation to be used within custom layout containers.
+     * @default false
+     */
+    composable?: boolean;
+    /**
+     * Controls whether the bottom border is displayed.
+     * Only applies to the composable variant. Non-composable variant always uses the done state.
+     * @default true
+     */
+    showBottomBorder?: boolean;
 }
-declare const FlowNavigation: ({ activeStep, avatar, logo, done, onClose, onGoBack, steps, }: FlowNavigationProps) => import("react").JSX.Element;
+declare const FlowNavigation: ({ activeStep, avatar, logo, done, onClose, onGoBack, steps, composable, showBottomBorder, }: FlowNavigationProps) => import("react").JSX.Element;
 export default FlowNavigation;
 //# sourceMappingURL=FlowNavigation.d.ts.map

package/build/types/flowNavigation/FlowNavigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FlowNavigation.d.ts","sourceRoot":"","sources":["../../../src/flowNavigation/FlowNavigation.tsx"],"names":[],"mappings":"AAQA,OAAgB,EAAE,KAAK,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAQxD,MAAM,WAAW,mBAAmB;IAClC,iBAAiB;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,wBAAwB;IACxB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,qBAAqB;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,2FAA2F;IAC3F,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,sIAAsI;IACtI,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,wGAAwG;IACxG,KAAK,EAAE,SAAS,IAAI,EAAE,CAAC;CACxB;AAED,QAAA,MAAM,cAAc,GAAI,+DAQrB,mBAAmB,gCAsErB,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"FlowNavigation.d.ts","sourceRoot":"","sources":["../../../src/flowNavigation/FlowNavigation.tsx"],"names":[],"mappings":"AAQA,OAAgB,EAAE,KAAK,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAWxD,MAAM,WAAW,mBAAmB;IAClC,iBAAiB;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,wBAAwB;IACxB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,qBAAqB;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,2FAA2F;IAC3F,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,sIAAsI;IACtI,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,iFAAiF;IACjF,KAAK,CAAC,EAAE,SAAS,IAAI,EAAE,CAAC;IACxB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,QAAA,MAAM,cAAc,GAAI,6FAUrB,mBAAmB,gCAsFrB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/build/types/overlayHeader/OverlayHeader.d.ts

@@ -1,3 +1,6 @@
+/**
+ * @deprecated Use `FlowNavigation` component instead, with `steps={[]}`
+ */
 export interface OverlayHeaderProps {
     /** An Avatar */
     avatar?: React.ReactNode;
@@ -5,5 +8,8 @@ export interface OverlayHeaderProps {
     /** Function called when the close is clicked */
     onClose?: React.MouseEventHandler<HTMLButtonElement>;
 }
+/**
+ * @deprecated Use `FlowNavigation` component instead
+ */
 export default function OverlayHeader({ avatar, onClose, logo }: OverlayHeaderProps): import("react").JSX.Element;
 //# sourceMappingURL=OverlayHeader.d.ts.map

package/build/types/overlayHeader/OverlayHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OverlayHeader.d.ts","sourceRoot":"","sources":["../../../src/overlayHeader/OverlayHeader.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,kBAAkB;IACjC,gBAAgB;IAChB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,gDAAgD;IAChD,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;CACtD;AAID,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,IAAkB,EAAE,EAAE,kBAAkB,+BAiBhG"}
+{"version":3,"file":"OverlayHeader.d.ts","sourceRoot":"","sources":["../../../src/overlayHeader/OverlayHeader.tsx"],"names":[],"mappings":"AAOA;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,gBAAgB;IAChB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,gDAAgD;IAChD,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;CACtD;AAID;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,IAAkB,EAAE,EAAE,kBAAkB,+BAiBhG"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.148.1",
+  "version": "46.149.1",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -44,22 +44,22 @@
     "@babel/preset-env": "^7.29.7",
     "@babel/preset-react": "^7.29.7",
     "@babel/preset-typescript": "^7.29.7",
-    "@formatjs/cli": "^6.16.6",
+    "@formatjs/cli": "^6.16.10",
     "@rollup/plugin-babel": "^7.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.4.1",
-    "@storybook/addon-docs": "^10.4.1",
+    "@storybook/addon-a11y": "^10.4.2",
+    "@storybook/addon-docs": "^10.4.2",
     "@storybook/addon-mcp": "^0.6.0",
     "@storybook/addon-webpack5-compiler-babel": "^4.0.1",
-    "@storybook/react-webpack5": "^10.4.1",
+    "@storybook/react-webpack5": "^10.4.2",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
-    "@transferwise/icons": "^4.4.3",
+    "@transferwise/icons": "^4.4.4",
     "@tsconfig/recommended": "^1.0.13",
     "@types/babel__core": "^7.20.5",
     "@types/commonmark": "^0.27.10",
@@ -67,17 +67,17 @@
     "@types/lodash": "4.17.24",
     "@types/lodash.clamp": "^4.0.9",
     "@types/lodash.debounce": "^4.0.9",
-    "@types/react": "^18.3.29",
+    "@types/react": "^18.3.31",
     "@types/react-dom": "^18.3.7",
     "@types/react-transition-group": "4.4.12",
     "@monaco-editor/react": "^4.7.0",
     "monaco-editor": "^0.55.1",
     "monaco-editor-webpack-plugin": "^7.1.1",
-    "@wise/art": "^2.30.3",
+    "@wise/art": "^2.31.1",
     "@wise/eslint-config": "^14.2.1",
-    "babel-plugin-formatjs": "^10.5.41",
+    "babel-plugin-formatjs": "^11.3.12",
     "eslint": "^9.39.4",
-    "eslint-plugin-storybook": "^10.4.1",
+    "eslint-plugin-storybook": "^10.4.2",
     "gulp": "^5.0.1",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
@@ -86,18 +86,18 @@
     "lodash.times": "^4.3.2",
     "react-intl": "^7.1.14",
     "react-live": "^4.1.8",
-    "rollup": "^4.60.4",
+    "rollup": "^4.61.1",
     "rollup-preserve-directives": "^1.1.3",
-    "storybook": "^10.4.1",
+    "storybook": "^10.4.2",
     "storybook-addon-tag-badges": "^3.1.0",
     "storybook-addon-test-codegen": "^3.0.1",
     "@transferwise/less-config": "3.1.2",
-    "@wise/components-theming": "1.10.2",
+    "@wise/components-theming": "1.10.3",
     "@wise/wds-configs": "0.0.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3 || ^4",
-    "@wise/art": "^2.30.3",
+    "@wise/art": "^2.31.1",
     "@wise/components-theming": "^1.10.1",
     "framer-motion": "^12.23.26",
     "react": ">=18",
@@ -111,7 +111,7 @@
     "@react-aria/focus": "^3.22.1",
     "@react-aria/overlays": "^3.32.1",
     "@transferwise/formatting": "^2.14.1",
-    "@transferwise/neptune-tokens": "^8.24.0",
+    "@transferwise/neptune-tokens": "^8.24.1",
     "@transferwise/neptune-validation": "^3.3.4",
     "clsx": "^2.1.1",
     "commonmark": "^0.31.2",

package/src/avatarView/AvatarView.css

@@ -25,6 +25,7 @@
   background-color: var(--color-interactive-accent);
 }
 .np-avatar-view .np-avatar-view-content {
+  --circle-border-color: var(--color-sentiment-border-overlay, var(--color-border-neutral));
   color: #37517e;
   color: var(--color-sentiment-content-primary, var(--color-content-primary));
 }

package/src/avatarView/AvatarView.less

@@ -1,7 +1,9 @@
-@import './Dot.less';
+@import "./Dot.less";
 
 .np-avatar-view {
   .np-avatar-view-content {
+    --circle-border-color: var(--color-sentiment-border-overlay, var(--color-border-neutral));
+
     color: var(--color-sentiment-content-primary, var(--color-content-primary));
   }
 

package/src/body/Body.story.tsx

@@ -2,10 +2,7 @@ import { Typography } from '../common/propsValues/typography';
 import Title from '../title';
 
 import Body from './Body';
-import {
-  createSandboxStory,
-  globalScope,
-} from '../../.storybook/components/sandbox/SandboxEditor';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 
 export default {
   title: 'Typography/Body',
@@ -137,4 +134,3 @@ export const Basic = () => {
     </>
   );
 };
-

package/src/calendar/Calendar.story.tsx

@@ -1,10 +1,7 @@
 import { useState } from 'react';
 import { StoryObj } from '@storybook/react-webpack5';
 import { userEvent, within } from 'storybook/test';
-import {
-  createSandboxStory,
-  globalScope,
-} from '../../.storybook/components/sandbox/SandboxEditor';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 import Calendar, { type CalendarProps } from './Calendar';
 import Modal from '../modal';
 import Button from '../button';

package/src/checkbox/Checkbox.story.tsx

@@ -1,10 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { fn } from 'storybook/test';
 
-import {
-  createSandboxStory,
-  globalScope,
-} from '../../.storybook/components/sandbox/SandboxEditor';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 import { Field } from '../field/Field';
 
 import Checkbox from './Checkbox';

package/src/chevron/Chevron.story.tsx

@@ -12,7 +12,7 @@ type Story = StoryObj<typeof Chevron>;
 
 export const Sandbox = createSandboxStory({
   code: `<Chevron orientation="bottom" size="md" />`,
-  scope: {Chevron},
+  scope: { Chevron },
 });
 
 export const Basic: Story = {

package/src/container/Container.story.tsx

@@ -4,10 +4,7 @@ import Body from '../body';
 import Title from '../title';
 
 import Container from './Container';
-import {
-  createSandboxStory,
-  globalScope,
-} from '../../.storybook/components/sandbox/SandboxEditor';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 
 export default {
   component: Container,

package/src/dateInput/DateInput.story.tsx

@@ -1,10 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { fn } from 'storybook/test';
 
-import {
-  createSandboxStory,
-  globalScope,
-} from '../../.storybook/components/sandbox/SandboxEditor';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 import { DateInput } from '..';
 
 const meta: Meta<typeof DateInput> = {

package/src/dateLookup/DateLookup.story.tsx

@@ -1,9 +1,6 @@
 import { useState } from 'react';
 import { StoryObj } from '@storybook/react-webpack5';
-import {
-  createSandboxStory,
-  globalScope,
-} from '../../.storybook/components/sandbox/SandboxEditor';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 import { Field } from '..';
 import { Size } from '../common';
 import DateLookup, { type DateLookupProps } from './DateLookup';

package/src/decision/Decision.story.tsx

@@ -3,10 +3,7 @@ import { fn } from 'storybook/test';
 import { Size } from '../common';
 import AvatarView from '../avatarView';
 import Decision, { DecisionPresentation, DecisionType } from '.';
-import {
-  createSandboxStory,
-  globalScope,
-} from '../../.storybook/components/sandbox/SandboxEditor';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 
 export default {
   component: Decision,

package/src/definitionList/DefinitionList.story.tsx

@@ -6,10 +6,7 @@ import DefinitionList, { type DefinitionListLayout } from './DefinitionList';
 import { lorem10 } from '../test-utils';
 import Section from '../section';
 import Header from '../header';
-import {
-  createSandboxStory,
-  globalScope,
-} from '../../.storybook/components/sandbox/SandboxEditor';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 
 export default {
   component: DefinitionList,

package/src/dimmer/Dimmer.story.tsx

@@ -3,10 +3,7 @@ import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { useState } from 'react';
 
 import { Button, Dimmer } from '..';
-import {
-  createSandboxStory,
-  globalScope,
-} from '../../.storybook/components/sandbox/SandboxEditor';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 
 export default {
   component: Dimmer,
@@ -60,4 +57,3 @@ export const Basic: Story = {
     );
   },
 };
-

package/src/display/Display.story.tsx

@@ -3,10 +3,7 @@ import Money from '../money/Money';
 import Title from '../title/Title';
 
 import Display from './Display';
-import {
-  createSandboxStory,
-  globalScope,
-} from '../../.storybook/components/sandbox/SandboxEditor';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 
 export default {
   title: 'Typography/Display',

package/src/emphasis/Emphasis.story.tsx

@@ -1,10 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 
 import Emphasis from './Emphasis';
-import {
-  createSandboxStory,
-  globalScope,
-} from '../../.storybook/components/sandbox/SandboxEditor';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 
 export default {
   component: Emphasis,
@@ -28,4 +25,3 @@ export const Basic: Story = {
       '<script>alert("nice try!")</script>',
   },
 };
-

package/src/expressiveMoneyInput/ExpressiveMoneyInput.story.tsx

@@ -3,10 +3,7 @@ import { Meta, StoryObj, Decorator } from '@storybook/react-webpack5';
 import { fn } from 'storybook/test';
 import { Flag } from '@wise/art';
 import { Rewards, Tags } from '@transferwise/icons';
-import {
-  createSandboxStory,
-  globalScope,
-} from '../../.storybook/components/sandbox/SandboxEditor';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 import { storySourceWithoutNoise } from '../../.storybook/helpers';
 import { lorem10, lorem5 } from '../test-utils';
 import { Sentiment } from '../common';

package/src/field/Field.story.tsx

@@ -1,10 +1,7 @@
 import { useState } from 'react';
 import { action } from 'storybook/actions';
 
-import {
-  createSandboxStory,
-  globalScope,
-} from '../../.storybook/components/sandbox/SandboxEditor';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 import { Input } from '../inputs/Input';
 import { Field, FieldProps } from './Field';
 import { Sentiment } from '../common';

package/src/flowNavigation/FlowNavigation.css

@@ -1,9 +1,12 @@
 .np-flow-navigation {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: 100%;
-  min-height: 97px;
+  box-sizing: border-box;
+  min-height: 96px;
 }
 .np-flow-navigation--border-bottom {
-  min-height: 96px;
   border-bottom: 1px solid rgba(0,0,0,0.10196);
   border-bottom: 1px solid var(--color-border-neutral);
 }
@@ -69,6 +72,17 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 .np-flow-navigation--hidden {
   visibility: hidden;
 }
+.np-flow-navigation--composable {
+  min-height: 80px;
+}
+@media (min-width: 320.02px) {
+  .np-flow-navigation--composable {
+    min-height: 128px;
+  }
+}
+.np-flow-navigation--composable .np-flow-navigation__content {
+  max-width: none;
+}
 .np-theme-personal--forest-green .np-flow-navigation .np-flow-header__left path,
 .np-theme-personal--bright-green .np-flow-navigation .np-flow-header__left path,
 .np-theme-personal--dark .np-flow-navigation .np-flow-header__left path {

package/src/flowNavigation/FlowNavigation.less

@@ -2,13 +2,16 @@
 @import (reference) "./../styles/less/addons/_spacing-utilities.less";
 
 .np-flow-navigation {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: 100%;
-  // This prevents jumping when border disappears.
-  min-height: 97px;
+  box-sizing: border-box;
+
+  // This is the natural height of FlowNavigation when the Avatar is displayed.
+  min-height: 96px;
 
   &--border-bottom {
-    // This is the natural height of FlowNavigation when the Avatar is displayed.
-    min-height: 96px;
     border-bottom: 1px solid var(--color-border-neutral);
   }
 
@@ -66,6 +69,19 @@
     visibility: hidden;
   }
 
+  &--composable {
+    min-height: 80px;
+
+    @media (--screen-xs) {
+      min-height: 128px;
+    }
+
+    .np-flow-navigation__content {
+      // Remove max-width constraint for fluid layout
+      max-width: none;
+    }
+  }
+
   .np-theme-personal--forest-green &,
   .np-theme-personal--bright-green &,
   .np-theme-personal--dark & {