@transferwise/components 46.148.1 → 46.149.0

package/src/flowNavigation/FlowNavigation.tsx

@@ -7,6 +7,7 @@ import { CloseButton } from '../common/closeButton';
 import FlowHeader from '../common/flowHeader/FlowHeader';
 import Logo from '../logo';
 import Stepper, { type Step } from '../stepper/Stepper';
+import Container from '../container';
 
 import { useScreenSize } from '../common/hooks/useScreenSize';
 import messages from './FlowNavigation.messages';
@@ -14,6 +15,8 @@ import AnimatedLabel from './animatedLabel';
 import IconButton from '../iconButton';
 import { ArrowLeft } from '@transferwise/icons';
 
+const defaultLogo = <Logo />;
+
 export interface FlowNavigationProps {
   /** @default 0 */
   activeStep?: number;
@@ -26,86 +29,116 @@ 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;
 }
 
 const FlowNavigation = ({
   activeStep = 0,
   avatar,
-  logo = <Logo />,
+  logo = defaultLogo,
   done = false,
   onClose,
   onGoBack,
   steps,
+  composable = false,
+  showBottomBorder = true,
 }: FlowNavigationProps) => {
   const intl = useIntl();
-
-  const closeButton = onClose != null && <CloseButton size="lg" onClick={onClose} />;
-
   const screenSm = useScreenSize(Breakpoint.SMALL);
   const screenLg = useScreenSize(Breakpoint.LARGE);
 
-  const newAvatar = done ? null : avatar;
+  const closeButton = onClose != null && <CloseButton size="lg" onClick={onClose} />;
 
+  const newAvatar = done ? null : avatar;
   const displayGoBack = onGoBack != null && activeStep > 0;
 
+  const flowHeaderContent = (
+    <FlowHeader
+      className={clsx(
+        'np-flow-navigation__content',
+        !composable && 'p-x-3',
+        screenSm == null
+          ? 'np-flow-navigation--hidden'
+          : {
+              'np-flow-navigation--xs-max': !screenSm,
+              // Size switches on parent container which may or may not have the same size as the window.
+              'np-flow-navigation--sm': screenSm,
+              'np-flow-navigation--lg': screenLg,
+            },
+      )}
+      leftContent={
+        <>
+          {!screenSm && displayGoBack ? (
+            <IconButton
+              size={40}
+              priority="tertiary"
+              type="default"
+              aria-label={intl.formatMessage(messages.back)}
+              onClick={onGoBack}
+            >
+              <ArrowLeft />
+            </IconButton>
+          ) : (
+            <div className="np-flow-header__left">{logo}</div>
+          )}
+          {!screenSm && !done && steps && steps.length > 0 && (
+            <AnimatedLabel className="m-x-1" steps={steps} activeLabel={activeStep} />
+          )}
+        </>
+      }
+      rightContent={
+        <div className="np-flow-header__right d-flex align-items-center justify-content-end order-2--lg">
+          {newAvatar}
+          {newAvatar && closeButton && <span className="m-x-1" />}
+          {closeButton}
+        </div>
+      }
+      bottomContent={
+        !done && steps && steps.length > 0 ? (
+          <Stepper
+            activeStep={activeStep}
+            steps={steps}
+            className={clsx('np-flow-navigation__stepper')}
+          />
+        ) : null
+      }
+      layout={!screenLg ? Layout.VERTICAL : Layout.HORIZONTAL}
+    />
+  );
+
+  if (composable) {
+    return (
+      <Container
+        size="fluid"
+        className={clsx('np-flow-navigation np-flow-navigation--composable', {
+          'np-flow-navigation--border-bottom': showBottomBorder,
+        })}
+      >
+        {flowHeaderContent}
+      </Container>
+    );
+  }
+
   return (
     <div
-      className={clsx('np-flow-navigation d-flex align-items-center justify-content-center p-y-3', {
+      className={clsx('np-flow-navigation p-y-3', {
         'np-flow-navigation--border-bottom': !done,
       })}
     >
-      <FlowHeader
-        className={clsx(
-          'np-flow-navigation__content p-x-3',
-          screenSm == null
-            ? 'np-flow-navigation--hidden'
-            : {
-                'np-flow-navigation--xs-max': !screenSm,
-                // Size switches on parent container which may or may not have the same size as the window.
-                'np-flow-navigation--sm': screenSm,
-                'np-flow-navigation--lg': screenLg,
-              },
-        )}
-        leftContent={
-          <>
-            {!screenSm && displayGoBack ? (
-              <IconButton
-                size={40}
-                priority="tertiary"
-                type="default"
-                aria-label={intl.formatMessage(messages.back)}
-                onClick={onGoBack}
-              >
-                <ArrowLeft />
-              </IconButton>
-            ) : (
-              <div className="np-flow-header__left">{logo}</div>
-            )}
-            {!screenSm && !done && (
-              <AnimatedLabel className="m-x-1" steps={steps} activeLabel={activeStep} />
-            )}
-          </>
-        }
-        rightContent={
-          <div className="np-flow-header__right d-flex align-items-center justify-content-end order-2--lg">
-            {newAvatar}
-            {newAvatar && closeButton && <span className="m-x-1" />}
-            {closeButton}
-          </div>
-        }
-        bottomContent={
-          !done && steps.length > 0 ? (
-            <Stepper
-              activeStep={activeStep}
-              steps={steps}
-              className={clsx('np-flow-navigation__stepper')}
-            />
-          ) : null
-        }
-        layout={!screenLg ? Layout.VERTICAL : Layout.HORIZONTAL}
-      />
+      {flowHeaderContent}
     </div>
   );
 };

package/src/header/Header.story.tsx

@@ -1,9 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import Header, { HeaderProps } from './Header';
-import {
-  createSandboxStory,
-  globalScope,
-} from '../../.storybook/components/sandbox/SandboxEditor';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 
 const withContainer = (Story: any) => (
   <div style={{ display: 'flex', justifyContent: 'center' }}>

package/src/inputWithDisplayFormat/InputWithDisplayFormat.story.tsx

@@ -1,9 +1,6 @@
 import { userEvent, within, fn } from 'storybook/test';
 
-import {
-  createSandboxStory,
-  globalScope,
-} from '../../.storybook/components/sandbox/SandboxEditor';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 import InputWithDisplayFormat, { InputWithDisplayFormatProps } from '.';
 import { Field, FieldProps } from '../field/Field';
 import { Meta, type StoryObj } from '@storybook/react-webpack5';

package/src/inputs/InputGroup.story.tsx

@@ -2,10 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { Search } from '@transferwise/icons';
 import { useRef, useState } from 'react';
 
-import {
-  createSandboxStory,
-  globalScope,
-} from '../../.storybook/components/sandbox/SandboxEditor';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 import { Button } from '..';
 import { Field } from '../field/Field';
 

package/src/inputs/SearchInput.story.tsx

@@ -1,10 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { useState } from 'react';
 
-import {
-  createSandboxStory,
-  globalScope,
-} from '../../.storybook/components/sandbox/SandboxEditor';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 import { Size } from '../common';
 import { Field } from '../field/Field';
 

package/src/inputs/TextArea.story.tsx

@@ -1,10 +1,7 @@
 import { useEffect, useState } from 'react';
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 
-import {
-  createSandboxStory,
-  globalScope,
-} from '../../.storybook/components/sandbox/SandboxEditor';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 import { Field } from '../field/Field';
 import { Sentiment } from '../common';
 import { TextArea } from './TextArea';

package/src/instructionsList/InstructionsList.story.tsx

@@ -4,10 +4,7 @@ import { fn } from 'storybook/test';
 import Link from '../link';
 
 import InstructionsList, { InstructionsListProps } from './InstructionsList';
-import {
-  createSandboxStory,
-  globalScope,
-} from '../../.storybook/components/sandbox/SandboxEditor';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 
 export default {
   component: InstructionsList,

package/src/label/Label.story.tsx

@@ -1,7 +1,4 @@
-import {
-  createSandboxStory,
-  globalScope,
-} from '../../.storybook/components/sandbox/SandboxEditor';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 import Info from '../info';
 import { Label } from './Label';
 

package/src/link/Link.story.tsx

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

package/src/loader/Loader.story.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
-import { createSandboxStory }  from '../../.storybook/components/sandbox/SandboxEditor';
+import { createSandboxStory } from '../../.storybook/components/sandbox/SandboxEditor';
 
 import Loader from './Loader';
 

package/src/main.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 {
@@ -1990,7 +1990,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
  */
 
 .wds-sentiment-negative-light-base {
@@ -28754,12 +28754,15 @@ button.np-option {
 }
 
 .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);
 }
@@ -28844,6 +28847,20 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   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/markdown/Markdown.story.tsx

@@ -1,10 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 
 import Markdown from './Markdown';
-import {
-  createSandboxStory,
-  globalScope,
-} from '../../.storybook/components/sandbox/SandboxEditor';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 
 export default {
   component: Markdown,
@@ -34,4 +31,3 @@ export const Basic: Story = {
      - sublist`,
   },
 };
-

package/src/money/Money.story.tsx

@@ -21,4 +21,3 @@ export const Basic: Story = {
     currency: 'GBP',
   },
 };
-

package/src/moneyInput/MoneyInput.story.tsx

@@ -3,10 +3,7 @@ import { within, userEvent, expect } from 'storybook/test';
 import { Padlock } from '@transferwise/icons';
 import { useState } from 'react';
 
-import {
-  createSandboxStory,
-  globalScope,
-} from '../../.storybook/components/sandbox/SandboxEditor';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 import MoneyInput, { CurrencyOptionItem } from '.';
 import { Field } from '../field/Field';
 import translations from '../i18n/en.json';

package/src/overlayHeader/OverlayHeader.story.tsx

@@ -15,9 +15,13 @@ interface CustomControls {
 }
 export type StoryArgs = OverlayHeaderProps & CustomControls;
 
+/**
+ * @deprecated Use `FlowNavigation` component instead
+ */
 const meta: Meta<StoryArgs> = {
   component: OverlayHeader,
   title: 'Navigation/OverlayHeader',
+  tags: ['deprecated'],
   argTypes: {
     avatarType: { control: 'select', options: ['', 'Business', 'Profile'] },
     avatarURL: { control: 'text' },

package/src/overlayHeader/OverlayHeader.tsx

@@ -5,6 +5,9 @@ import { CloseButton } from '../common/closeButton';
 import FlowHeader from '../common/flowHeader';
 import Logo from '../logo';
 
+/**
+ * @deprecated Use `FlowNavigation` component instead, with `steps={[]}`
+ */
 export interface OverlayHeaderProps {
   /** An Avatar */
   avatar?: React.ReactNode;
@@ -15,6 +18,9 @@ export interface OverlayHeaderProps {
 
 const defaultLogo = <Logo />;
 
+/**
+ * @deprecated Use `FlowNavigation` component instead
+ */
 export default function OverlayHeader({ avatar, onClose, logo = defaultLogo }: OverlayHeaderProps) {
   const closeButton = onClose && <CloseButton size={Size.LARGE} onClick={onClose} />;
   return (

package/src/phoneNumberInput/PhoneNumberInput.story.tsx

@@ -1,9 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 
-import {
-  createSandboxStory,
-  globalScope,
-} from '../../.storybook/components/sandbox/SandboxEditor';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 import { Field } from '../field/Field';
 import PhoneNumberInput from './PhoneNumberInput';
 

package/src/promoCard/PromoCard.story.tsx

@@ -2,10 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { StarFill } from '@transferwise/icons';
 
 import PromoCard, { type PromoCardCheckedProps, type PromoCardLinkProps } from './PromoCard';
-import {
-  createSandboxStory,
-  globalScope,
-} from '../../.storybook/components/sandbox/SandboxEditor';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 
 const meta: Meta<typeof PromoCard> = {
   component: PromoCard,

package/src/promoCard/PromoCardGroup.story.tsx

@@ -2,10 +2,7 @@ import { Meta, StoryObj } from '@storybook/react-webpack5';
 
 import PromoCard from './PromoCard';
 import PromoCardGroup from './PromoCardGroup';
-import {
-  createSandboxStory,
-  globalScope,
-} from '../../.storybook/components/sandbox/SandboxEditor';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 
 const PromoCards = () => {
   return (

package/src/prompt/CriticalBanner/CriticalBanner.story.tsx

@@ -19,7 +19,7 @@ const meta = {
   component: CriticalBanner,
   title: 'Prompts/CriticalBanner',
   tags: ['new'],
-  parameters: { docs: { toc: true }, padding: '0', },
+  parameters: { docs: { toc: true }, padding: '0' },
   args: {
     title: 'Your account requires verification',
     description: 'Please verify your identity to continue using all features.',

package/src/prompt/CriticalBanner/CriticalBanner.tsx

@@ -80,9 +80,9 @@ export const CriticalBanner = ({
 
   const bannerSurface = (
     <Container
+      ref={containerRef}
       size="fluid"
       as={PrimitivePrompt as ElementType}
-      ref={containerRef}
       id={id}
       sentiment={sentiment}
       emphasis={sentiment === 'neutral' ? 'base' : 'elevated'}

package/src/radio/Radio.story.tsx

@@ -1,9 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { useState } from 'react';
-import {
-  createSandboxStory,
-  globalScope,
-} from '../../.storybook/components/sandbox/SandboxEditor';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 import Radio, { type RadioProps } from './Radio';
 import AvatarView from '../avatarView';
 import { Flag } from '@wise/art';

package/src/radioGroup/RadioGroup.story.tsx

@@ -1,8 +1,5 @@
 import { Flag } from '@wise/art';
-import {
-  createSandboxStory,
-  globalScope,
-} from '../../.storybook/components/sandbox/SandboxEditor';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 import RadioGroup, { RadioGroupProps, RadioGroupRadio } from './RadioGroup';
 import { Field } from '../field/Field';
 import { Meta, StoryObj } from '@storybook/react-webpack5';

package/src/segmentedControl/SegmentedControl.story.tsx

@@ -1,10 +1,7 @@
 import { StoryFn, StoryObj } from '@storybook/react-webpack5';
 import React from 'react';
 
-import {
-  createSandboxStory,
-  globalScope,
-} from '../../.storybook/components/sandbox/SandboxEditor';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 import Button from '../button';
 
 import SegmentedControl from './SegmentedControl';

package/src/sentimentSurface/SentimentSurface.css

@@ -1,6 +1,6 @@
 /**
  * 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
  */
 
 

package/src/statusIcon/StatusIcon.story.tsx

@@ -39,7 +39,7 @@ export const Playground: Story = {
 
 export const Sandbox = createSandboxStory({
   code: `<StatusIcon sentiment="positive" size={48} />`,
-  scope: {  StatusIcon },
+  scope: { StatusIcon },
 });
 
 /**