@transferwise/components 46.148.1 → 46.149.0

package/build/flowNavigation/FlowNavigation.js

@@ -30,71 +30,85 @@ var jsxRuntime = require('react/jsx-runtime');
 var FlowHeader = require('../common/flowHeader/FlowHeader.js');
 var Logo = require('../logo/Logo.js');
 var Stepper = require('../stepper/Stepper.js');
+var Container = require('../container/Container.js');
 var useScreenSize = require('../common/hooks/useScreenSize.js');
 var FlowNavigation_messages = require('./FlowNavigation.messages.js');
 var AnimatedLabel = require('./animatedLabel/AnimatedLabel.js');
 var IconButton = require('../iconButton/IconButton.js');
 var icons = require('@transferwise/icons');
 
+const defaultLogo = /*#__PURE__*/jsxRuntime.jsx(Logo.default, {});
 const FlowNavigation = ({
   activeStep = 0,
   avatar,
-  logo = /*#__PURE__*/jsxRuntime.jsx(Logo.default, {}),
+  logo = defaultLogo,
   done = false,
   onClose,
   onGoBack,
-  steps
+  steps,
+  composable = false,
+  showBottomBorder = true
 }) => {
   const intl = reactIntl.useIntl();
+  const screenSm = useScreenSize.useScreenSize(neptuneTokens.Breakpoint.SMALL);
+  const screenLg = useScreenSize.useScreenSize(neptuneTokens.Breakpoint.LARGE);
   const closeButton = onClose != null && /*#__PURE__*/jsxRuntime.jsx(CloseButton.CloseButton, {
     size: "lg",
     onClick: onClose
   });
-  const screenSm = useScreenSize.useScreenSize(neptuneTokens.Breakpoint.SMALL);
-  const screenLg = useScreenSize.useScreenSize(neptuneTokens.Breakpoint.LARGE);
   const newAvatar = done ? null : avatar;
   const displayGoBack = onGoBack != null && activeStep > 0;
+  const flowHeaderContent = /*#__PURE__*/jsxRuntime.jsx(FlowHeader.default, {
+    className: clsx.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: /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [!screenSm && displayGoBack ? /*#__PURE__*/jsxRuntime.jsx(IconButton.default, {
+        size: 40,
+        priority: "tertiary",
+        type: "default",
+        "aria-label": intl.formatMessage(FlowNavigation_messages.default.back),
+        onClick: onGoBack,
+        children: /*#__PURE__*/jsxRuntime.jsx(icons.ArrowLeft, {})
+      }) : /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "np-flow-header__left",
+        children: logo
+      }), !screenSm && !done && steps && steps.length > 0 && /*#__PURE__*/jsxRuntime.jsx(AnimatedLabel.default, {
+        className: "m-x-1",
+        steps: steps,
+        activeLabel: activeStep
+      })]
+    }),
+    rightContent: /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "np-flow-header__right d-flex align-items-center justify-content-end order-2--lg",
+      children: [newAvatar, newAvatar && closeButton && /*#__PURE__*/jsxRuntime.jsx("span", {
+        className: "m-x-1"
+      }), closeButton]
+    }),
+    bottomContent: !done && steps && steps.length > 0 ? /*#__PURE__*/jsxRuntime.jsx(Stepper.default, {
+      activeStep: activeStep,
+      steps: steps,
+      className: clsx.clsx('np-flow-navigation__stepper')
+    }) : null,
+    layout: !screenLg ? layouts.Layout.VERTICAL : layouts.Layout.HORIZONTAL
+  });
+  if (composable) {
+    return /*#__PURE__*/jsxRuntime.jsx(Container.default, {
+      size: "fluid",
+      className: clsx.clsx('np-flow-navigation np-flow-navigation--composable', {
+        'np-flow-navigation--border-bottom': showBottomBorder
+      }),
+      children: flowHeaderContent
+    });
+  }
   return /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: clsx.clsx('np-flow-navigation d-flex align-items-center justify-content-center p-y-3', {
+    className: clsx.clsx('np-flow-navigation p-y-3', {
       'np-flow-navigation--border-bottom': !done
     }),
-    children: /*#__PURE__*/jsxRuntime.jsx(FlowHeader.default, {
-      className: clsx.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: /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [!screenSm && displayGoBack ? /*#__PURE__*/jsxRuntime.jsx(IconButton.default, {
-          size: 40,
-          priority: "tertiary",
-          type: "default",
-          "aria-label": intl.formatMessage(FlowNavigation_messages.default.back),
-          onClick: onGoBack,
-          children: /*#__PURE__*/jsxRuntime.jsx(icons.ArrowLeft, {})
-        }) : /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "np-flow-header__left",
-          children: logo
-        }), !screenSm && !done && /*#__PURE__*/jsxRuntime.jsx(AnimatedLabel.default, {
-          className: "m-x-1",
-          steps: steps,
-          activeLabel: activeStep
-        })]
-      }),
-      rightContent: /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "np-flow-header__right d-flex align-items-center justify-content-end order-2--lg",
-        children: [newAvatar, newAvatar && closeButton && /*#__PURE__*/jsxRuntime.jsx("span", {
-          className: "m-x-1"
-        }), closeButton]
-      }),
-      bottomContent: !done && steps.length > 0 ? /*#__PURE__*/jsxRuntime.jsx(Stepper.default, {
-        activeStep: activeStep,
-        steps: steps,
-        className: clsx.clsx('np-flow-navigation__stepper')
-      }) : null,
-      layout: !screenLg ? layouts.Layout.VERTICAL : layouts.Layout.HORIZONTAL
-    })
+    children: flowHeaderContent
   });
 };
 

package/build/flowNavigation/FlowNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"FlowNavigation.js","sources":["../../src/flowNavigation/FlowNavigation.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\nimport { Breakpoint } from '@transferwise/neptune-tokens';\n\nimport { Layout } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport FlowHeader from '../common/flowHeader/FlowHeader';\nimport Logo from '../logo';\nimport Stepper, { type Step } from '../stepper/Stepper';\n\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport messages from './FlowNavigation.messages';\nimport AnimatedLabel from './animatedLabel';\nimport IconButton from '../iconButton';\nimport { ArrowLeft } from '@transferwise/icons';\n\nexport interface FlowNavigationProps {\n  /** @default 0 */\n  activeStep?: number;\n  avatar?: React.ReactNode;\n  /** @default <Logo /> */\n  logo?: React.ReactNode;\n  /** @default false */\n  done?: boolean;\n  /** Called when the close button is clicked. If not provided the close button won't show */\n  onClose?: () => void;\n  /** Called when the back button is clicked. If not provided the back button won't show. The back button only shows on small screens */\n  onGoBack?: () => void;\n  /** Steps to be displayed in stepper. If you don't need the stepper, please use OverlayHeader instead */\n  steps: readonly Step[];\n}\n\nconst FlowNavigation = ({\n  activeStep = 0,\n  avatar,\n  logo = <Logo />,\n  done = false,\n  onClose,\n  onGoBack,\n  steps,\n}: FlowNavigationProps) => {\n  const intl = useIntl();\n\n  const closeButton = onClose != null && <CloseButton size=\"lg\" onClick={onClose} />;\n\n  const screenSm = useScreenSize(Breakpoint.SMALL);\n  const screenLg = useScreenSize(Breakpoint.LARGE);\n\n  const newAvatar = done ? null : avatar;\n\n  const displayGoBack = onGoBack != null && activeStep > 0;\n\n  return (\n    <div\n      className={clsx('np-flow-navigation d-flex align-items-center justify-content-center p-y-3', {\n        'np-flow-navigation--border-bottom': !done,\n      })}\n    >\n      <FlowHeader\n        className={clsx(\n          'np-flow-navigation__content p-x-3',\n          screenSm == null\n            ? 'np-flow-navigation--hidden'\n            : {\n                'np-flow-navigation--xs-max': !screenSm,\n                // Size switches on parent container which may or may not have the same size as the window.\n                'np-flow-navigation--sm': screenSm,\n                'np-flow-navigation--lg': screenLg,\n              },\n        )}\n        leftContent={\n          <>\n            {!screenSm && displayGoBack ? (\n              <IconButton\n                size={40}\n                priority=\"tertiary\"\n                type=\"default\"\n                aria-label={intl.formatMessage(messages.back)}\n                onClick={onGoBack}\n              >\n                <ArrowLeft />\n              </IconButton>\n            ) : (\n              <div className=\"np-flow-header__left\">{logo}</div>\n            )}\n            {!screenSm && !done && (\n              <AnimatedLabel className=\"m-x-1\" steps={steps} activeLabel={activeStep} />\n            )}\n          </>\n        }\n        rightContent={\n          <div className=\"np-flow-header__right d-flex align-items-center justify-content-end order-2--lg\">\n            {newAvatar}\n            {newAvatar && closeButton && <span className=\"m-x-1\" />}\n            {closeButton}\n          </div>\n        }\n        bottomContent={\n          !done && steps.length > 0 ? (\n            <Stepper\n              activeStep={activeStep}\n              steps={steps}\n              className={clsx('np-flow-navigation__stepper')}\n            />\n          ) : null\n        }\n        layout={!screenLg ? Layout.VERTICAL : Layout.HORIZONTAL}\n      />\n    </div>\n  );\n};\n\nexport default FlowNavigation;\n"],"names":["FlowNavigation","activeStep","avatar","logo","_jsx","Logo","done","onClose","onGoBack","steps","intl","useIntl","closeButton","CloseButton","size","onClick","screenSm","useScreenSize","Breakpoint","SMALL","screenLg","LARGE","newAvatar","displayGoBack","className","clsx","children","FlowHeader","leftContent","_jsxs","_Fragment","IconButton","priority","type","formatMessage","messages","back","ArrowLeft","AnimatedLabel","activeLabel","rightContent","bottomContent","length","Stepper","layout","Layout","VERTICAL","HORIZONTAL"],"mappings":"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"}
+{"version":3,"file":"FlowNavigation.js","sources":["../../src/flowNavigation/FlowNavigation.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\nimport { Breakpoint } from '@transferwise/neptune-tokens';\n\nimport { Layout } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport FlowHeader from '../common/flowHeader/FlowHeader';\nimport Logo from '../logo';\nimport Stepper, { type Step } from '../stepper/Stepper';\nimport Container from '../container';\n\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport messages from './FlowNavigation.messages';\nimport AnimatedLabel from './animatedLabel';\nimport IconButton from '../iconButton';\nimport { ArrowLeft } from '@transferwise/icons';\n\nconst defaultLogo = <Logo />;\n\nexport interface FlowNavigationProps {\n  /** @default 0 */\n  activeStep?: number;\n  avatar?: React.ReactNode;\n  /** @default <Logo /> */\n  logo?: React.ReactNode;\n  /** @default false */\n  done?: boolean;\n  /** Called when the close button is clicked. If not provided the close button won't show */\n  onClose?: () => void;\n  /** Called when the back button is clicked. If not provided the back button won't show. The back button only shows on small screens */\n  onGoBack?: () => void;\n  /** Steps to be displayed in stepper. If not provided, the stepper won't show. */\n  steps?: readonly Step[];\n  /**\n   * When true, renders in composable mode using a fluid Container.\n   * This allows the FlowNavigation to be used within custom layout containers.\n   * @default false\n   */\n  composable?: boolean;\n  /**\n   * Controls whether the bottom border is displayed.\n   * Only applies to the composable variant. Non-composable variant always uses the done state.\n   * @default true\n   */\n  showBottomBorder?: boolean;\n}\n\nconst FlowNavigation = ({\n  activeStep = 0,\n  avatar,\n  logo = defaultLogo,\n  done = false,\n  onClose,\n  onGoBack,\n  steps,\n  composable = false,\n  showBottomBorder = true,\n}: FlowNavigationProps) => {\n  const intl = useIntl();\n  const screenSm = useScreenSize(Breakpoint.SMALL);\n  const screenLg = useScreenSize(Breakpoint.LARGE);\n\n  const closeButton = onClose != null && <CloseButton size=\"lg\" onClick={onClose} />;\n\n  const newAvatar = done ? null : avatar;\n  const displayGoBack = onGoBack != null && activeStep > 0;\n\n  const flowHeaderContent = (\n    <FlowHeader\n      className={clsx(\n        'np-flow-navigation__content',\n        !composable && 'p-x-3',\n        screenSm == null\n          ? 'np-flow-navigation--hidden'\n          : {\n              'np-flow-navigation--xs-max': !screenSm,\n              // Size switches on parent container which may or may not have the same size as the window.\n              'np-flow-navigation--sm': screenSm,\n              'np-flow-navigation--lg': screenLg,\n            },\n      )}\n      leftContent={\n        <>\n          {!screenSm && displayGoBack ? (\n            <IconButton\n              size={40}\n              priority=\"tertiary\"\n              type=\"default\"\n              aria-label={intl.formatMessage(messages.back)}\n              onClick={onGoBack}\n            >\n              <ArrowLeft />\n            </IconButton>\n          ) : (\n            <div className=\"np-flow-header__left\">{logo}</div>\n          )}\n          {!screenSm && !done && steps && steps.length > 0 && (\n            <AnimatedLabel className=\"m-x-1\" steps={steps} activeLabel={activeStep} />\n          )}\n        </>\n      }\n      rightContent={\n        <div className=\"np-flow-header__right d-flex align-items-center justify-content-end order-2--lg\">\n          {newAvatar}\n          {newAvatar && closeButton && <span className=\"m-x-1\" />}\n          {closeButton}\n        </div>\n      }\n      bottomContent={\n        !done && steps && steps.length > 0 ? (\n          <Stepper\n            activeStep={activeStep}\n            steps={steps}\n            className={clsx('np-flow-navigation__stepper')}\n          />\n        ) : null\n      }\n      layout={!screenLg ? Layout.VERTICAL : Layout.HORIZONTAL}\n    />\n  );\n\n  if (composable) {\n    return (\n      <Container\n        size=\"fluid\"\n        className={clsx('np-flow-navigation np-flow-navigation--composable', {\n          'np-flow-navigation--border-bottom': showBottomBorder,\n        })}\n      >\n        {flowHeaderContent}\n      </Container>\n    );\n  }\n\n  return (\n    <div\n      className={clsx('np-flow-navigation p-y-3', {\n        'np-flow-navigation--border-bottom': !done,\n      })}\n    >\n      {flowHeaderContent}\n    </div>\n  );\n};\n\nexport default FlowNavigation;\n"],"names":["defaultLogo","_jsx","Logo","FlowNavigation","activeStep","avatar","logo","done","onClose","onGoBack","steps","composable","showBottomBorder","intl","useIntl","screenSm","useScreenSize","Breakpoint","SMALL","screenLg","LARGE","closeButton","CloseButton","size","onClick","newAvatar","displayGoBack","flowHeaderContent","FlowHeader","className","clsx","leftContent","_jsxs","_Fragment","children","IconButton","priority","type","formatMessage","messages","back","ArrowLeft","length","AnimatedLabel","activeLabel","rightContent","bottomContent","Stepper","layout","Layout","VERTICAL","HORIZONTAL","Container"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBA,MAAMA,WAAW,gBAAGC,cAAA,CAACC,YAAI,KAAG;AA8B5B,MAAMC,cAAc,GAAGA,CAAC;AACtBC,EAAAA,UAAU,GAAG,CAAC;EACdC,MAAM;AACNC,EAAAA,IAAI,GAAGN,WAAW;AAClBO,EAAAA,IAAI,GAAG,KAAK;EACZC,OAAO;EACPC,QAAQ;EACRC,KAAK;AACLC,EAAAA,UAAU,GAAG,KAAK;AAClBC,EAAAA,gBAAgB,GAAG;AAAI,CACH,KAAI;AACxB,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE;AACtB,EAAA,MAAMC,QAAQ,GAAGC,2BAAa,CAACC,wBAAU,CAACC,KAAK,CAAC;AAChD,EAAA,MAAMC,QAAQ,GAAGH,2BAAa,CAACC,wBAAU,CAACG,KAAK,CAAC;EAEhD,MAAMC,WAAW,GAAGb,OAAO,IAAI,IAAI,iBAAIP,cAAA,CAACqB,uBAAW,EAAA;AAACC,IAAAA,IAAI,EAAC,IAAI;AAACC,IAAAA,OAAO,EAAEhB;AAAQ,IAAG;AAElF,EAAA,MAAMiB,SAAS,GAAGlB,IAAI,GAAG,IAAI,GAAGF,MAAM;EACtC,MAAMqB,aAAa,GAAGjB,QAAQ,IAAI,IAAI,IAAIL,UAAU,GAAG,CAAC;AAExD,EAAA,MAAMuB,iBAAiB,gBACrB1B,cAAA,CAAC2B,kBAAU,EAAA;AACTC,IAAAA,SAAS,EAAEC,SAAI,CACb,6BAA6B,EAC7B,CAACnB,UAAU,IAAI,OAAO,EACtBI,QAAQ,IAAI,IAAI,GACZ,4BAA4B,GAC5B;MACE,4BAA4B,EAAE,CAACA,QAAQ;AACvC;AACA,MAAA,wBAAwB,EAAEA,QAAQ;AAClC,MAAA,wBAAwB,EAAEI;AAC3B,KAAA,CACL;IACFY,WAAW,eACTC,eAAA,CAAAC,mBAAA,EAAA;MAAAC,QAAA,EAAA,CACG,CAACnB,QAAQ,IAAIW,aAAa,gBACzBzB,cAAA,CAACkC,kBAAU,EAAA;AACTZ,QAAAA,IAAI,EAAE,EAAG;AACTa,QAAAA,QAAQ,EAAC,UAAU;AACnBC,QAAAA,IAAI,EAAC,SAAS;AACd,QAAA,YAAA,EAAYxB,IAAI,CAACyB,aAAa,CAACC,+BAAQ,CAACC,IAAI,CAAE;AAC9ChB,QAAAA,OAAO,EAAEf,QAAS;AAAAyB,QAAAA,QAAA,eAElBjC,cAAA,CAACwC,eAAS,EAAA,EAAA;OACA,CAAC,gBAEbxC,cAAA,CAAA,KAAA,EAAA;AAAK4B,QAAAA,SAAS,EAAC,sBAAsB;AAAAK,QAAAA,QAAA,EAAE5B;AAAI,OAAM,CAClD,EACA,CAACS,QAAQ,IAAI,CAACR,IAAI,IAAIG,KAAK,IAAIA,KAAK,CAACgC,MAAM,GAAG,CAAC,iBAC9CzC,cAAA,CAAC0C,qBAAa,EAAA;AAACd,QAAAA,SAAS,EAAC,OAAO;AAACnB,QAAAA,KAAK,EAAEA,KAAM;AAACkC,QAAAA,WAAW,EAAExC;AAAW,OAAA,CACxE;AAAA,KACH,CACD;AACDyC,IAAAA,YAAY,eACVb,eAAA,CAAA,KAAA,EAAA;AAAKH,MAAAA,SAAS,EAAC,iFAAiF;AAAAK,MAAAA,QAAA,GAC7FT,SAAS,EACTA,SAAS,IAAIJ,WAAW,iBAAIpB,cAAA,CAAA,MAAA,EAAA;AAAM4B,QAAAA,SAAS,EAAC;OAAO,CAAG,EACtDR,WAAW;AAAA,KACT,CACN;AACDyB,IAAAA,aAAa,EACX,CAACvC,IAAI,IAAIG,KAAK,IAAIA,KAAK,CAACgC,MAAM,GAAG,CAAC,gBAChCzC,cAAA,CAAC8C,eAAO,EAAA;AACN3C,MAAAA,UAAU,EAAEA,UAAW;AACvBM,MAAAA,KAAK,EAAEA,KAAM;MACbmB,SAAS,EAAEC,SAAI,CAAC,6BAA6B;KAAE,CAC/C,GACA,IACL;IACDkB,MAAM,EAAE,CAAC7B,QAAQ,GAAG8B,cAAM,CAACC,QAAQ,GAAGD,cAAM,CAACE;AAAW,GAAA,CAE3D;AAED,EAAA,IAAIxC,UAAU,EAAE;IACd,oBACEV,cAAA,CAACmD,iBAAS,EAAA;AACR7B,MAAAA,IAAI,EAAC,OAAO;AACZM,MAAAA,SAAS,EAAEC,SAAI,CAAC,mDAAmD,EAAE;AACnE,QAAA,mCAAmC,EAAElB;AACtC,OAAA,CAAE;AAAAsB,MAAAA,QAAA,EAEFP;AAAiB,KACT,CAAC;AAEhB,EAAA;AAEA,EAAA,oBACE1B,cAAA,CAAA,KAAA,EAAA;AACE4B,IAAAA,SAAS,EAAEC,SAAI,CAAC,0BAA0B,EAAE;AAC1C,MAAA,mCAAmC,EAAE,CAACvB;AACvC,KAAA,CAAE;AAAA2B,IAAAA,QAAA,EAEFP;AAAiB,GACf,CAAC;AAEV;;;;"}

package/build/flowNavigation/FlowNavigation.mjs

@@ -26,71 +26,85 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import FlowHeader from '../common/flowHeader/FlowHeader.mjs';
 import Logo from '../logo/Logo.mjs';
 import Stepper from '../stepper/Stepper.mjs';
+import Container from '../container/Container.mjs';
 import { useScreenSize } from '../common/hooks/useScreenSize.mjs';
 import messages from './FlowNavigation.messages.mjs';
 import AnimatedLabel from './animatedLabel/AnimatedLabel.mjs';
 import IconButton from '../iconButton/IconButton.mjs';
 import { ArrowLeft } from '@transferwise/icons';
 
+const defaultLogo = /*#__PURE__*/jsx(Logo, {});
 const FlowNavigation = ({
   activeStep = 0,
   avatar,
-  logo = /*#__PURE__*/jsx(Logo, {}),
+  logo = defaultLogo,
   done = false,
   onClose,
   onGoBack,
-  steps
+  steps,
+  composable = false,
+  showBottomBorder = true
 }) => {
   const intl = useIntl();
+  const screenSm = useScreenSize(Breakpoint.SMALL);
+  const screenLg = useScreenSize(Breakpoint.LARGE);
   const closeButton = onClose != null && /*#__PURE__*/jsx(CloseButton, {
     size: "lg",
     onClick: onClose
   });
-  const screenSm = useScreenSize(Breakpoint.SMALL);
-  const screenLg = useScreenSize(Breakpoint.LARGE);
   const newAvatar = done ? null : avatar;
   const displayGoBack = onGoBack != null && activeStep > 0;
+  const flowHeaderContent = /*#__PURE__*/jsx(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: /*#__PURE__*/jsxs(Fragment, {
+      children: [!screenSm && displayGoBack ? /*#__PURE__*/jsx(IconButton, {
+        size: 40,
+        priority: "tertiary",
+        type: "default",
+        "aria-label": intl.formatMessage(messages.back),
+        onClick: onGoBack,
+        children: /*#__PURE__*/jsx(ArrowLeft, {})
+      }) : /*#__PURE__*/jsx("div", {
+        className: "np-flow-header__left",
+        children: logo
+      }), !screenSm && !done && steps && steps.length > 0 && /*#__PURE__*/jsx(AnimatedLabel, {
+        className: "m-x-1",
+        steps: steps,
+        activeLabel: activeStep
+      })]
+    }),
+    rightContent: /*#__PURE__*/jsxs("div", {
+      className: "np-flow-header__right d-flex align-items-center justify-content-end order-2--lg",
+      children: [newAvatar, newAvatar && closeButton && /*#__PURE__*/jsx("span", {
+        className: "m-x-1"
+      }), closeButton]
+    }),
+    bottomContent: !done && steps && steps.length > 0 ? /*#__PURE__*/jsx(Stepper, {
+      activeStep: activeStep,
+      steps: steps,
+      className: clsx('np-flow-navigation__stepper')
+    }) : null,
+    layout: !screenLg ? Layout.VERTICAL : Layout.HORIZONTAL
+  });
+  if (composable) {
+    return /*#__PURE__*/jsx(Container, {
+      size: "fluid",
+      className: clsx('np-flow-navigation np-flow-navigation--composable', {
+        'np-flow-navigation--border-bottom': showBottomBorder
+      }),
+      children: flowHeaderContent
+    });
+  }
   return /*#__PURE__*/jsx("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
     }),
-    children: /*#__PURE__*/jsx(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: /*#__PURE__*/jsxs(Fragment, {
-        children: [!screenSm && displayGoBack ? /*#__PURE__*/jsx(IconButton, {
-          size: 40,
-          priority: "tertiary",
-          type: "default",
-          "aria-label": intl.formatMessage(messages.back),
-          onClick: onGoBack,
-          children: /*#__PURE__*/jsx(ArrowLeft, {})
-        }) : /*#__PURE__*/jsx("div", {
-          className: "np-flow-header__left",
-          children: logo
-        }), !screenSm && !done && /*#__PURE__*/jsx(AnimatedLabel, {
-          className: "m-x-1",
-          steps: steps,
-          activeLabel: activeStep
-        })]
-      }),
-      rightContent: /*#__PURE__*/jsxs("div", {
-        className: "np-flow-header__right d-flex align-items-center justify-content-end order-2--lg",
-        children: [newAvatar, newAvatar && closeButton && /*#__PURE__*/jsx("span", {
-          className: "m-x-1"
-        }), closeButton]
-      }),
-      bottomContent: !done && steps.length > 0 ? /*#__PURE__*/jsx(Stepper, {
-        activeStep: activeStep,
-        steps: steps,
-        className: clsx('np-flow-navigation__stepper')
-      }) : null,
-      layout: !screenLg ? Layout.VERTICAL : Layout.HORIZONTAL
-    })
+    children: flowHeaderContent
   });
 };
 

package/build/flowNavigation/FlowNavigation.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FlowNavigation.mjs","sources":["../../src/flowNavigation/FlowNavigation.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\nimport { Breakpoint } from '@transferwise/neptune-tokens';\n\nimport { Layout } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport FlowHeader from '../common/flowHeader/FlowHeader';\nimport Logo from '../logo';\nimport Stepper, { type Step } from '../stepper/Stepper';\n\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport messages from './FlowNavigation.messages';\nimport AnimatedLabel from './animatedLabel';\nimport IconButton from '../iconButton';\nimport { ArrowLeft } from '@transferwise/icons';\n\nexport interface FlowNavigationProps {\n  /** @default 0 */\n  activeStep?: number;\n  avatar?: React.ReactNode;\n  /** @default <Logo /> */\n  logo?: React.ReactNode;\n  /** @default false */\n  done?: boolean;\n  /** Called when the close button is clicked. If not provided the close button won't show */\n  onClose?: () => void;\n  /** Called when the back button is clicked. If not provided the back button won't show. The back button only shows on small screens */\n  onGoBack?: () => void;\n  /** Steps to be displayed in stepper. If you don't need the stepper, please use OverlayHeader instead */\n  steps: readonly Step[];\n}\n\nconst FlowNavigation = ({\n  activeStep = 0,\n  avatar,\n  logo = <Logo />,\n  done = false,\n  onClose,\n  onGoBack,\n  steps,\n}: FlowNavigationProps) => {\n  const intl = useIntl();\n\n  const closeButton = onClose != null && <CloseButton size=\"lg\" onClick={onClose} />;\n\n  const screenSm = useScreenSize(Breakpoint.SMALL);\n  const screenLg = useScreenSize(Breakpoint.LARGE);\n\n  const newAvatar = done ? null : avatar;\n\n  const displayGoBack = onGoBack != null && activeStep > 0;\n\n  return (\n    <div\n      className={clsx('np-flow-navigation d-flex align-items-center justify-content-center p-y-3', {\n        'np-flow-navigation--border-bottom': !done,\n      })}\n    >\n      <FlowHeader\n        className={clsx(\n          'np-flow-navigation__content p-x-3',\n          screenSm == null\n            ? 'np-flow-navigation--hidden'\n            : {\n                'np-flow-navigation--xs-max': !screenSm,\n                // Size switches on parent container which may or may not have the same size as the window.\n                'np-flow-navigation--sm': screenSm,\n                'np-flow-navigation--lg': screenLg,\n              },\n        )}\n        leftContent={\n          <>\n            {!screenSm && displayGoBack ? (\n              <IconButton\n                size={40}\n                priority=\"tertiary\"\n                type=\"default\"\n                aria-label={intl.formatMessage(messages.back)}\n                onClick={onGoBack}\n              >\n                <ArrowLeft />\n              </IconButton>\n            ) : (\n              <div className=\"np-flow-header__left\">{logo}</div>\n            )}\n            {!screenSm && !done && (\n              <AnimatedLabel className=\"m-x-1\" steps={steps} activeLabel={activeStep} />\n            )}\n          </>\n        }\n        rightContent={\n          <div className=\"np-flow-header__right d-flex align-items-center justify-content-end order-2--lg\">\n            {newAvatar}\n            {newAvatar && closeButton && <span className=\"m-x-1\" />}\n            {closeButton}\n          </div>\n        }\n        bottomContent={\n          !done && steps.length > 0 ? (\n            <Stepper\n              activeStep={activeStep}\n              steps={steps}\n              className={clsx('np-flow-navigation__stepper')}\n            />\n          ) : null\n        }\n        layout={!screenLg ? Layout.VERTICAL : Layout.HORIZONTAL}\n      />\n    </div>\n  );\n};\n\nexport default FlowNavigation;\n"],"names":["FlowNavigation","activeStep","avatar","logo","_jsx","Logo","done","onClose","onGoBack","steps","intl","useIntl","closeButton","CloseButton","size","onClick","screenSm","useScreenSize","Breakpoint","SMALL","screenLg","LARGE","newAvatar","displayGoBack","className","clsx","children","FlowHeader","leftContent","_jsxs","_Fragment","IconButton","priority","type","formatMessage","messages","back","ArrowLeft","AnimatedLabel","activeLabel","rightContent","bottomContent","length","Stepper","layout","Layout","VERTICAL","HORIZONTAL"],"mappings":"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"}
+{"version":3,"file":"FlowNavigation.mjs","sources":["../../src/flowNavigation/FlowNavigation.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\nimport { Breakpoint } from '@transferwise/neptune-tokens';\n\nimport { Layout } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport FlowHeader from '../common/flowHeader/FlowHeader';\nimport Logo from '../logo';\nimport Stepper, { type Step } from '../stepper/Stepper';\nimport Container from '../container';\n\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport messages from './FlowNavigation.messages';\nimport AnimatedLabel from './animatedLabel';\nimport IconButton from '../iconButton';\nimport { ArrowLeft } from '@transferwise/icons';\n\nconst defaultLogo = <Logo />;\n\nexport interface FlowNavigationProps {\n  /** @default 0 */\n  activeStep?: number;\n  avatar?: React.ReactNode;\n  /** @default <Logo /> */\n  logo?: React.ReactNode;\n  /** @default false */\n  done?: boolean;\n  /** Called when the close button is clicked. If not provided the close button won't show */\n  onClose?: () => void;\n  /** Called when the back button is clicked. If not provided the back button won't show. The back button only shows on small screens */\n  onGoBack?: () => void;\n  /** Steps to be displayed in stepper. If not provided, the stepper won't show. */\n  steps?: readonly Step[];\n  /**\n   * When true, renders in composable mode using a fluid Container.\n   * This allows the FlowNavigation to be used within custom layout containers.\n   * @default false\n   */\n  composable?: boolean;\n  /**\n   * Controls whether the bottom border is displayed.\n   * Only applies to the composable variant. Non-composable variant always uses the done state.\n   * @default true\n   */\n  showBottomBorder?: boolean;\n}\n\nconst FlowNavigation = ({\n  activeStep = 0,\n  avatar,\n  logo = defaultLogo,\n  done = false,\n  onClose,\n  onGoBack,\n  steps,\n  composable = false,\n  showBottomBorder = true,\n}: FlowNavigationProps) => {\n  const intl = useIntl();\n  const screenSm = useScreenSize(Breakpoint.SMALL);\n  const screenLg = useScreenSize(Breakpoint.LARGE);\n\n  const closeButton = onClose != null && <CloseButton size=\"lg\" onClick={onClose} />;\n\n  const newAvatar = done ? null : avatar;\n  const displayGoBack = onGoBack != null && activeStep > 0;\n\n  const flowHeaderContent = (\n    <FlowHeader\n      className={clsx(\n        'np-flow-navigation__content',\n        !composable && 'p-x-3',\n        screenSm == null\n          ? 'np-flow-navigation--hidden'\n          : {\n              'np-flow-navigation--xs-max': !screenSm,\n              // Size switches on parent container which may or may not have the same size as the window.\n              'np-flow-navigation--sm': screenSm,\n              'np-flow-navigation--lg': screenLg,\n            },\n      )}\n      leftContent={\n        <>\n          {!screenSm && displayGoBack ? (\n            <IconButton\n              size={40}\n              priority=\"tertiary\"\n              type=\"default\"\n              aria-label={intl.formatMessage(messages.back)}\n              onClick={onGoBack}\n            >\n              <ArrowLeft />\n            </IconButton>\n          ) : (\n            <div className=\"np-flow-header__left\">{logo}</div>\n          )}\n          {!screenSm && !done && steps && steps.length > 0 && (\n            <AnimatedLabel className=\"m-x-1\" steps={steps} activeLabel={activeStep} />\n          )}\n        </>\n      }\n      rightContent={\n        <div className=\"np-flow-header__right d-flex align-items-center justify-content-end order-2--lg\">\n          {newAvatar}\n          {newAvatar && closeButton && <span className=\"m-x-1\" />}\n          {closeButton}\n        </div>\n      }\n      bottomContent={\n        !done && steps && steps.length > 0 ? (\n          <Stepper\n            activeStep={activeStep}\n            steps={steps}\n            className={clsx('np-flow-navigation__stepper')}\n          />\n        ) : null\n      }\n      layout={!screenLg ? Layout.VERTICAL : Layout.HORIZONTAL}\n    />\n  );\n\n  if (composable) {\n    return (\n      <Container\n        size=\"fluid\"\n        className={clsx('np-flow-navigation np-flow-navigation--composable', {\n          'np-flow-navigation--border-bottom': showBottomBorder,\n        })}\n      >\n        {flowHeaderContent}\n      </Container>\n    );\n  }\n\n  return (\n    <div\n      className={clsx('np-flow-navigation p-y-3', {\n        'np-flow-navigation--border-bottom': !done,\n      })}\n    >\n      {flowHeaderContent}\n    </div>\n  );\n};\n\nexport default FlowNavigation;\n"],"names":["defaultLogo","_jsx","Logo","FlowNavigation","activeStep","avatar","logo","done","onClose","onGoBack","steps","composable","showBottomBorder","intl","useIntl","screenSm","useScreenSize","Breakpoint","SMALL","screenLg","LARGE","closeButton","CloseButton","size","onClick","newAvatar","displayGoBack","flowHeaderContent","FlowHeader","className","clsx","leftContent","_jsxs","_Fragment","children","IconButton","priority","type","formatMessage","messages","back","ArrowLeft","length","AnimatedLabel","activeLabel","rightContent","bottomContent","Stepper","layout","Layout","VERTICAL","HORIZONTAL","Container"],"mappings":"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"}

package/build/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/build/overlayHeader/OverlayHeader.js

@@ -30,6 +30,9 @@ var FlowHeader = require('../common/flowHeader/FlowHeader.js');
 var Logo = require('../logo/Logo.js');
 
 const defaultLogo = /*#__PURE__*/jsxRuntime.jsx(Logo.default, {});
+/**
+ * @deprecated Use `FlowNavigation` component instead
+ */
 function OverlayHeader({
   avatar,
   onClose,

package/build/overlayHeader/OverlayHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"OverlayHeader.js","sources":["../../src/overlayHeader/OverlayHeader.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport { Size } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport FlowHeader from '../common/flowHeader';\nimport Logo from '../logo';\n\nexport interface OverlayHeaderProps {\n  /** An Avatar */\n  avatar?: React.ReactNode;\n  logo?: React.ReactNode;\n  /** Function called when the close is clicked */\n  onClose?: React.MouseEventHandler<HTMLButtonElement>;\n}\n\nconst defaultLogo = <Logo />;\n\nexport default function OverlayHeader({ avatar, onClose, logo = defaultLogo }: OverlayHeaderProps) {\n  const closeButton = onClose && <CloseButton size={Size.LARGE} onClick={onClose} />;\n  return (\n    <div className=\"np-overlay-header d-flex justify-content-center\">\n      <FlowHeader\n        className=\"np-overlay-header__content p-a-3\"\n        leftContent={logo}\n        rightContent={\n          <div className={clsx('d-flex', 'align-items-center', 'order-2')}>\n            {avatar}\n            {avatar && closeButton && <span className={clsx('m-x-1')} />}\n            {closeButton}\n          </div>\n        }\n      />\n    </div>\n  );\n}\n"],"names":["defaultLogo","_jsx","Logo","OverlayHeader","avatar","onClose","logo","closeButton","CloseButton","size","Size","LARGE","onClick","className","children","FlowHeader","leftContent","rightContent","_jsxs","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeA,MAAMA,WAAW,gBAAGC,cAAA,CAACC,YAAI,KAAG;AAEd,SAAUC,aAAaA,CAAC;EAAEC,MAAM;EAAEC,OAAO;AAAEC,EAAAA,IAAI,GAAGN;AAAW,CAAsB,EAAA;AAC/F,EAAA,MAAMO,WAAW,GAAGF,OAAO,iBAAIJ,cAAA,CAACO,uBAAW,EAAA;IAACC,IAAI,EAAEC,SAAI,CAACC,KAAM;AAACC,IAAAA,OAAO,EAAEP;AAAQ,GAAA,CAAG;AAClF,EAAA,oBACEJ,cAAA,CAAA,KAAA,EAAA;AAAKY,IAAAA,SAAS,EAAC,iDAAiD;IAAAC,QAAA,eAC9Db,cAAA,CAACc,kBAAU,EAAA;AACTF,MAAAA,SAAS,EAAC,kCAAkC;AAC5CG,MAAAA,WAAW,EAAEV,IAAK;AAClBW,MAAAA,YAAY,eACVC,eAAA,CAAA,KAAA,EAAA;QAAKL,SAAS,EAAEM,SAAI,CAAC,QAAQ,EAAE,oBAAoB,EAAE,SAAS,CAAE;AAAAL,QAAAA,QAAA,GAC7DV,MAAM,EACNA,MAAM,IAAIG,WAAW,iBAAIN,cAAA,CAAA,MAAA,EAAA;UAAMY,SAAS,EAAEM,SAAI,CAAC,OAAO;UAAK,EAC3DZ,WAAW;OACT;KACN;AAEL,GAAK,CAAC;AAEV;;;;"}
+{"version":3,"file":"OverlayHeader.js","sources":["../../src/overlayHeader/OverlayHeader.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport { Size } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport FlowHeader from '../common/flowHeader';\nimport Logo from '../logo';\n\n/**\n * @deprecated Use `FlowNavigation` component instead, with `steps={[]}`\n */\nexport interface OverlayHeaderProps {\n  /** An Avatar */\n  avatar?: React.ReactNode;\n  logo?: React.ReactNode;\n  /** Function called when the close is clicked */\n  onClose?: React.MouseEventHandler<HTMLButtonElement>;\n}\n\nconst defaultLogo = <Logo />;\n\n/**\n * @deprecated Use `FlowNavigation` component instead\n */\nexport default function OverlayHeader({ avatar, onClose, logo = defaultLogo }: OverlayHeaderProps) {\n  const closeButton = onClose && <CloseButton size={Size.LARGE} onClick={onClose} />;\n  return (\n    <div className=\"np-overlay-header d-flex justify-content-center\">\n      <FlowHeader\n        className=\"np-overlay-header__content p-a-3\"\n        leftContent={logo}\n        rightContent={\n          <div className={clsx('d-flex', 'align-items-center', 'order-2')}>\n            {avatar}\n            {avatar && closeButton && <span className={clsx('m-x-1')} />}\n            {closeButton}\n          </div>\n        }\n      />\n    </div>\n  );\n}\n"],"names":["defaultLogo","_jsx","Logo","OverlayHeader","avatar","onClose","logo","closeButton","CloseButton","size","Size","LARGE","onClick","className","children","FlowHeader","leftContent","rightContent","_jsxs","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,MAAMA,WAAW,gBAAGC,cAAA,CAACC,YAAI,KAAG;AAE5B;;AAEG;AACW,SAAUC,aAAaA,CAAC;EAAEC,MAAM;EAAEC,OAAO;AAAEC,EAAAA,IAAI,GAAGN;AAAW,CAAsB,EAAA;AAC/F,EAAA,MAAMO,WAAW,GAAGF,OAAO,iBAAIJ,cAAA,CAACO,uBAAW,EAAA;IAACC,IAAI,EAAEC,SAAI,CAACC,KAAM;AAACC,IAAAA,OAAO,EAAEP;AAAQ,GAAA,CAAG;AAClF,EAAA,oBACEJ,cAAA,CAAA,KAAA,EAAA;AAAKY,IAAAA,SAAS,EAAC,iDAAiD;IAAAC,QAAA,eAC9Db,cAAA,CAACc,kBAAU,EAAA;AACTF,MAAAA,SAAS,EAAC,kCAAkC;AAC5CG,MAAAA,WAAW,EAAEV,IAAK;AAClBW,MAAAA,YAAY,eACVC,eAAA,CAAA,KAAA,EAAA;QAAKL,SAAS,EAAEM,SAAI,CAAC,QAAQ,EAAE,oBAAoB,EAAE,SAAS,CAAE;AAAAL,QAAAA,QAAA,GAC7DV,MAAM,EACNA,MAAM,IAAIG,WAAW,iBAAIN,cAAA,CAAA,MAAA,EAAA;UAAMY,SAAS,EAAEM,SAAI,CAAC,OAAO;UAAK,EAC3DZ,WAAW;OACT;KACN;AAEL,GAAK,CAAC;AAEV;;;;"}

package/build/overlayHeader/OverlayHeader.mjs

@@ -26,6 +26,9 @@ import FlowHeader from '../common/flowHeader/FlowHeader.mjs';
 import Logo from '../logo/Logo.mjs';
 
 const defaultLogo = /*#__PURE__*/jsx(Logo, {});
+/**
+ * @deprecated Use `FlowNavigation` component instead
+ */
 function OverlayHeader({
   avatar,
   onClose,

package/build/overlayHeader/OverlayHeader.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"OverlayHeader.mjs","sources":["../../src/overlayHeader/OverlayHeader.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport { Size } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport FlowHeader from '../common/flowHeader';\nimport Logo from '../logo';\n\nexport interface OverlayHeaderProps {\n  /** An Avatar */\n  avatar?: React.ReactNode;\n  logo?: React.ReactNode;\n  /** Function called when the close is clicked */\n  onClose?: React.MouseEventHandler<HTMLButtonElement>;\n}\n\nconst defaultLogo = <Logo />;\n\nexport default function OverlayHeader({ avatar, onClose, logo = defaultLogo }: OverlayHeaderProps) {\n  const closeButton = onClose && <CloseButton size={Size.LARGE} onClick={onClose} />;\n  return (\n    <div className=\"np-overlay-header d-flex justify-content-center\">\n      <FlowHeader\n        className=\"np-overlay-header__content p-a-3\"\n        leftContent={logo}\n        rightContent={\n          <div className={clsx('d-flex', 'align-items-center', 'order-2')}>\n            {avatar}\n            {avatar && closeButton && <span className={clsx('m-x-1')} />}\n            {closeButton}\n          </div>\n        }\n      />\n    </div>\n  );\n}\n"],"names":["defaultLogo","_jsx","Logo","OverlayHeader","avatar","onClose","logo","closeButton","CloseButton","size","Size","LARGE","onClick","className","children","FlowHeader","leftContent","rightContent","_jsxs","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAeA,MAAMA,WAAW,gBAAGC,GAAA,CAACC,IAAI,KAAG;AAEd,SAAUC,aAAaA,CAAC;EAAEC,MAAM;EAAEC,OAAO;AAAEC,EAAAA,IAAI,GAAGN;AAAW,CAAsB,EAAA;AAC/F,EAAA,MAAMO,WAAW,GAAGF,OAAO,iBAAIJ,GAAA,CAACO,WAAW,EAAA;IAACC,IAAI,EAAEC,IAAI,CAACC,KAAM;AAACC,IAAAA,OAAO,EAAEP;AAAQ,GAAA,CAAG;AAClF,EAAA,oBACEJ,GAAA,CAAA,KAAA,EAAA;AAAKY,IAAAA,SAAS,EAAC,iDAAiD;IAAAC,QAAA,eAC9Db,GAAA,CAACc,UAAU,EAAA;AACTF,MAAAA,SAAS,EAAC,kCAAkC;AAC5CG,MAAAA,WAAW,EAAEV,IAAK;AAClBW,MAAAA,YAAY,eACVC,IAAA,CAAA,KAAA,EAAA;QAAKL,SAAS,EAAEM,IAAI,CAAC,QAAQ,EAAE,oBAAoB,EAAE,SAAS,CAAE;AAAAL,QAAAA,QAAA,GAC7DV,MAAM,EACNA,MAAM,IAAIG,WAAW,iBAAIN,GAAA,CAAA,MAAA,EAAA;UAAMY,SAAS,EAAEM,IAAI,CAAC,OAAO;UAAK,EAC3DZ,WAAW;OACT;KACN;AAEL,GAAK,CAAC;AAEV;;;;"}
+{"version":3,"file":"OverlayHeader.mjs","sources":["../../src/overlayHeader/OverlayHeader.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport { Size } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport FlowHeader from '../common/flowHeader';\nimport Logo from '../logo';\n\n/**\n * @deprecated Use `FlowNavigation` component instead, with `steps={[]}`\n */\nexport interface OverlayHeaderProps {\n  /** An Avatar */\n  avatar?: React.ReactNode;\n  logo?: React.ReactNode;\n  /** Function called when the close is clicked */\n  onClose?: React.MouseEventHandler<HTMLButtonElement>;\n}\n\nconst defaultLogo = <Logo />;\n\n/**\n * @deprecated Use `FlowNavigation` component instead\n */\nexport default function OverlayHeader({ avatar, onClose, logo = defaultLogo }: OverlayHeaderProps) {\n  const closeButton = onClose && <CloseButton size={Size.LARGE} onClick={onClose} />;\n  return (\n    <div className=\"np-overlay-header d-flex justify-content-center\">\n      <FlowHeader\n        className=\"np-overlay-header__content p-a-3\"\n        leftContent={logo}\n        rightContent={\n          <div className={clsx('d-flex', 'align-items-center', 'order-2')}>\n            {avatar}\n            {avatar && closeButton && <span className={clsx('m-x-1')} />}\n            {closeButton}\n          </div>\n        }\n      />\n    </div>\n  );\n}\n"],"names":["defaultLogo","_jsx","Logo","OverlayHeader","avatar","onClose","logo","closeButton","CloseButton","size","Size","LARGE","onClick","className","children","FlowHeader","leftContent","rightContent","_jsxs","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,MAAMA,WAAW,gBAAGC,GAAA,CAACC,IAAI,KAAG;AAE5B;;AAEG;AACW,SAAUC,aAAaA,CAAC;EAAEC,MAAM;EAAEC,OAAO;AAAEC,EAAAA,IAAI,GAAGN;AAAW,CAAsB,EAAA;AAC/F,EAAA,MAAMO,WAAW,GAAGF,OAAO,iBAAIJ,GAAA,CAACO,WAAW,EAAA;IAACC,IAAI,EAAEC,IAAI,CAACC,KAAM;AAACC,IAAAA,OAAO,EAAEP;AAAQ,GAAA,CAAG;AAClF,EAAA,oBACEJ,GAAA,CAAA,KAAA,EAAA;AAAKY,IAAAA,SAAS,EAAC,iDAAiD;IAAAC,QAAA,eAC9Db,GAAA,CAACc,UAAU,EAAA;AACTF,MAAAA,SAAS,EAAC,kCAAkC;AAC5CG,MAAAA,WAAW,EAAEV,IAAK;AAClBW,MAAAA,YAAY,eACVC,IAAA,CAAA,KAAA,EAAA;QAAKL,SAAS,EAAEM,IAAI,CAAC,QAAQ,EAAE,oBAAoB,EAAE,SAAS,CAAE;AAAAL,QAAAA,QAAA,GAC7DV,MAAM,EACNA,MAAM,IAAIG,WAAW,iBAAIN,GAAA,CAAA,MAAA,EAAA;UAAMY,SAAS,EAAEM,IAAI,CAAC,OAAO;UAAK,EAC3DZ,WAAW;OACT;KACN;AAEL,GAAK,CAAC;AAEV;;;;"}

package/build/prompt/CriticalBanner/CriticalBanner.js

@@ -60,9 +60,9 @@ const CriticalBanner = ({
   const descId = React.useId();
   const ariaLabelledByIds = [media['aria-hidden'] ? undefined : mediaId, !title ? undefined : titleId].filter(Boolean).join(' ');
   const bannerSurface = /*#__PURE__*/jsxRuntime.jsxs(Container.default, {
+    ref: containerRef,
     size: "fluid",
     as: PrimitivePrompt.PrimitivePrompt,
-    ref: containerRef,
     id: id,
     sentiment: sentiment,
     emphasis: sentiment === 'neutral' ? 'base' : 'elevated',

package/build/prompt/CriticalBanner/CriticalBanner.js.map

@@ -1 +1 @@
-{"version":3,"file":"CriticalBanner.js","sources":["../../../src/prompt/CriticalBanner/CriticalBanner.tsx"],"sourcesContent":["import { ElementType, ReactNode, useId, useState } from 'react';\nimport { clsx } from 'clsx';\n\nimport Body from '../../body';\nimport Button from '../../button';\nimport Container from '../../container';\nimport { Breakpoint, LiveRegion, Typography } from '../../common';\nimport { ButtonProps } from '../../button/Button.types';\nimport { PrimitivePrompt, PrimitivePromptProps } from '../PrimitivePrompt';\n\nimport { renderPromptMedia, PromptMedia } from '../helpers/promptMedia';\nimport { ExpanderToggle } from '../common/Expander/Expander';\nimport { buildAnnouncementString } from './helpers';\nimport { useContainerSize } from '../../common/hooks/useContainerSize';\n\nexport type CriticalBannerProps = {\n  title?: ReactNode;\n  description: ReactNode;\n  media?: PromptMedia;\n  action?: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {\n    label: ButtonProps['children'];\n  };\n  actionSecondary?: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {\n    label: ButtonProps['children'];\n  };\n  sentiment?: Exclude<PrimitivePromptProps['sentiment'], 'proposition'>;\n  /**\n   * Controls whether the description and actions are visible, as a controlled component.\n   * When collapsed with a title, only the title is shown.\n   * When collapsed without a title, the description is trimmed to 2 lines.\n   *\n   * Note: On desktop (container width >= 768px), the banner is always expanded\n   * regardless of this prop value.\n   */\n  expanded?: boolean;\n  /**\n   * Called when the user clicks the chevron toggle.\n   * If not provided, the component will manage expanded state internally.\n   */\n  onToggle?: () => void;\n} & Pick<PrimitivePromptProps, 'id' | 'className' | 'data-testid'>;\n\n/**\n * A full-width, non-dismissible banner for critical messages such as account blocks or\n * time-sensitive actions that require immediate user attention.\n\n * @see {@link https://docs.wise.design/components/critical-banner Design Spec}\n */\nexport const CriticalBanner = ({\n  sentiment = 'negative',\n  title,\n  description,\n  media = {},\n  action,\n  actionSecondary,\n  expanded: expandedProp,\n  onToggle,\n  id,\n  className,\n  'data-testid': testId,\n}: CriticalBannerProps) => {\n  const [containerRef, isDesktop] = useContainerSize(Breakpoint.MEDIUM);\n  const isControlled = expandedProp !== undefined && onToggle !== undefined;\n  const [internalExpanded, setInternalExpanded] = useState(true);\n  const resolvedExpanded = isDesktop ? true : isControlled ? expandedProp : internalExpanded;\n  const handleToggle = isControlled\n    ? onToggle\n    : () => setInternalExpanded((previousExpanded) => !previousExpanded);\n  const hasActions = action ?? actionSecondary;\n  const mediaId = useId();\n  const titleId = useId();\n  const descId = useId();\n\n  const ariaLabelledByIds = [\n    media['aria-hidden'] ? undefined : mediaId,\n    !title ? undefined : titleId,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const bannerSurface = (\n    <Container\n      size=\"fluid\"\n      as={PrimitivePrompt as ElementType}\n      ref={containerRef}\n      id={id}\n      sentiment={sentiment}\n      emphasis={sentiment === 'neutral' ? 'base' : 'elevated'}\n      data-testid={testId}\n      className={clsx(\n        'wds-critical-banner',\n        'wds-critical-banner-overhang',\n        {\n          'wds-critical-banner--collapsed': !resolvedExpanded,\n          'wds-critical-banner--with-two-actions': !!actionSecondary,\n        },\n        className,\n      )}\n      media={renderPromptMedia({\n        media,\n        sentiment,\n        mediaId,\n        imgClassName: 'wds-critical-banner--media-image',\n      })}\n      actions={\n        hasActions ? (\n          <div aria-hidden={!resolvedExpanded ? true : undefined} style={{ display: 'contents' }}>\n            {actionSecondary && (\n              // @ts-expect-error onClick type mismatch\n              <Button\n                v2\n                size=\"md\"\n                priority=\"secondary\"\n                href={actionSecondary.href}\n                tabIndex={resolvedExpanded ? undefined : -1}\n                onClick={actionSecondary?.onClick}\n              >\n                {actionSecondary.label}\n              </Button>\n            )}\n            {action && (\n              // @ts-expect-error onClick type mismatch\n              <Button\n                v2\n                size=\"md\"\n                priority=\"primary\"\n                href={action.href}\n                tabIndex={resolvedExpanded ? undefined : -1}\n                onClick={action.onClick}\n              >\n                {action.label}\n              </Button>\n            )}\n          </div>\n        ) : undefined\n      }\n      role=\"region\"\n      aria-labelledby={ariaLabelledByIds || undefined}\n      aria-describedby={description ? descId : undefined}\n    >\n      <div className=\"wds-critical-banner__text-wrapper\">\n        {title && (\n          <Body\n            id={titleId}\n            type={Typography.BODY_LARGE_BOLD}\n            className=\"wds-critical-banner__content wds-critical-banner__title\"\n          >\n            {title}\n          </Body>\n        )}\n        {description && (\n          <Body\n            id={descId}\n            className={clsx('wds-critical-banner__content', 'wds-critical-banner__description', {\n              'wds-critical-banner__description--with-title': !!title,\n            })}\n          >\n            {description}\n          </Body>\n        )}\n      </div>\n      <ExpanderToggle\n        expanded={resolvedExpanded}\n        size={24}\n        className=\"wds-critical-banner__toggle\"\n        onToggle={handleToggle}\n      />\n    </Container>\n  );\n\n  return (\n    <LiveRegion\n      aria-live=\"assertive\"\n      announceOnChange={buildAnnouncementString({\n        title,\n        description,\n        expanded: resolvedExpanded,\n        actionLabel: action?.label,\n        actionSecondaryLabel: actionSecondary?.label,\n      })}\n    >\n      <div className=\"wds-critical-banner-overhang-query\">\n        <div className=\"wds-critical-banner__entry-mask\">\n          <div className=\"wds-critical-banner__entry-track\">{bannerSurface}</div>\n        </div>\n      </div>\n    </LiveRegion>\n  );\n};\n\nexport default CriticalBanner;\n"],"names":["CriticalBanner","sentiment","title","description","media","action","actionSecondary","expanded","expandedProp","onToggle","id","className","testId","containerRef","isDesktop","useContainerSize","Breakpoint","MEDIUM","isControlled","undefined","internalExpanded","setInternalExpanded","useState","resolvedExpanded","handleToggle","previousExpanded","hasActions","mediaId","useId","titleId","descId","ariaLabelledByIds","filter","Boolean","join","bannerSurface","_jsxs","Container","size","as","PrimitivePrompt","ref","emphasis","clsx","renderPromptMedia","imgClassName","actions","style","display","children","_jsx","Button","v2","priority","href","tabIndex","onClick","label","role","Body","type","Typography","BODY_LARGE_BOLD","ExpanderToggle","LiveRegion","announceOnChange","buildAnnouncementString","actionLabel","actionSecondaryLabel"],"mappings":"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"}
+{"version":3,"file":"CriticalBanner.js","sources":["../../../src/prompt/CriticalBanner/CriticalBanner.tsx"],"sourcesContent":["import { ElementType, ReactNode, useId, useState } from 'react';\nimport { clsx } from 'clsx';\n\nimport Body from '../../body';\nimport Button from '../../button';\nimport Container from '../../container';\nimport { Breakpoint, LiveRegion, Typography } from '../../common';\nimport { ButtonProps } from '../../button/Button.types';\nimport { PrimitivePrompt, PrimitivePromptProps } from '../PrimitivePrompt';\n\nimport { renderPromptMedia, PromptMedia } from '../helpers/promptMedia';\nimport { ExpanderToggle } from '../common/Expander/Expander';\nimport { buildAnnouncementString } from './helpers';\nimport { useContainerSize } from '../../common/hooks/useContainerSize';\n\nexport type CriticalBannerProps = {\n  title?: ReactNode;\n  description: ReactNode;\n  media?: PromptMedia;\n  action?: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {\n    label: ButtonProps['children'];\n  };\n  actionSecondary?: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {\n    label: ButtonProps['children'];\n  };\n  sentiment?: Exclude<PrimitivePromptProps['sentiment'], 'proposition'>;\n  /**\n   * Controls whether the description and actions are visible, as a controlled component.\n   * When collapsed with a title, only the title is shown.\n   * When collapsed without a title, the description is trimmed to 2 lines.\n   *\n   * Note: On desktop (container width >= 768px), the banner is always expanded\n   * regardless of this prop value.\n   */\n  expanded?: boolean;\n  /**\n   * Called when the user clicks the chevron toggle.\n   * If not provided, the component will manage expanded state internally.\n   */\n  onToggle?: () => void;\n} & Pick<PrimitivePromptProps, 'id' | 'className' | 'data-testid'>;\n\n/**\n * A full-width, non-dismissible banner for critical messages such as account blocks or\n * time-sensitive actions that require immediate user attention.\n\n * @see {@link https://docs.wise.design/components/critical-banner Design Spec}\n */\nexport const CriticalBanner = ({\n  sentiment = 'negative',\n  title,\n  description,\n  media = {},\n  action,\n  actionSecondary,\n  expanded: expandedProp,\n  onToggle,\n  id,\n  className,\n  'data-testid': testId,\n}: CriticalBannerProps) => {\n  const [containerRef, isDesktop] = useContainerSize(Breakpoint.MEDIUM);\n  const isControlled = expandedProp !== undefined && onToggle !== undefined;\n  const [internalExpanded, setInternalExpanded] = useState(true);\n  const resolvedExpanded = isDesktop ? true : isControlled ? expandedProp : internalExpanded;\n  const handleToggle = isControlled\n    ? onToggle\n    : () => setInternalExpanded((previousExpanded) => !previousExpanded);\n  const hasActions = action ?? actionSecondary;\n  const mediaId = useId();\n  const titleId = useId();\n  const descId = useId();\n\n  const ariaLabelledByIds = [\n    media['aria-hidden'] ? undefined : mediaId,\n    !title ? undefined : titleId,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const bannerSurface = (\n    <Container\n      ref={containerRef}\n      size=\"fluid\"\n      as={PrimitivePrompt as ElementType}\n      id={id}\n      sentiment={sentiment}\n      emphasis={sentiment === 'neutral' ? 'base' : 'elevated'}\n      data-testid={testId}\n      className={clsx(\n        'wds-critical-banner',\n        'wds-critical-banner-overhang',\n        {\n          'wds-critical-banner--collapsed': !resolvedExpanded,\n          'wds-critical-banner--with-two-actions': !!actionSecondary,\n        },\n        className,\n      )}\n      media={renderPromptMedia({\n        media,\n        sentiment,\n        mediaId,\n        imgClassName: 'wds-critical-banner--media-image',\n      })}\n      actions={\n        hasActions ? (\n          <div aria-hidden={!resolvedExpanded ? true : undefined} style={{ display: 'contents' }}>\n            {actionSecondary && (\n              // @ts-expect-error onClick type mismatch\n              <Button\n                v2\n                size=\"md\"\n                priority=\"secondary\"\n                href={actionSecondary.href}\n                tabIndex={resolvedExpanded ? undefined : -1}\n                onClick={actionSecondary?.onClick}\n              >\n                {actionSecondary.label}\n              </Button>\n            )}\n            {action && (\n              // @ts-expect-error onClick type mismatch\n              <Button\n                v2\n                size=\"md\"\n                priority=\"primary\"\n                href={action.href}\n                tabIndex={resolvedExpanded ? undefined : -1}\n                onClick={action.onClick}\n              >\n                {action.label}\n              </Button>\n            )}\n          </div>\n        ) : undefined\n      }\n      role=\"region\"\n      aria-labelledby={ariaLabelledByIds || undefined}\n      aria-describedby={description ? descId : undefined}\n    >\n      <div className=\"wds-critical-banner__text-wrapper\">\n        {title && (\n          <Body\n            id={titleId}\n            type={Typography.BODY_LARGE_BOLD}\n            className=\"wds-critical-banner__content wds-critical-banner__title\"\n          >\n            {title}\n          </Body>\n        )}\n        {description && (\n          <Body\n            id={descId}\n            className={clsx('wds-critical-banner__content', 'wds-critical-banner__description', {\n              'wds-critical-banner__description--with-title': !!title,\n            })}\n          >\n            {description}\n          </Body>\n        )}\n      </div>\n      <ExpanderToggle\n        expanded={resolvedExpanded}\n        size={24}\n        className=\"wds-critical-banner__toggle\"\n        onToggle={handleToggle}\n      />\n    </Container>\n  );\n\n  return (\n    <LiveRegion\n      aria-live=\"assertive\"\n      announceOnChange={buildAnnouncementString({\n        title,\n        description,\n        expanded: resolvedExpanded,\n        actionLabel: action?.label,\n        actionSecondaryLabel: actionSecondary?.label,\n      })}\n    >\n      <div className=\"wds-critical-banner-overhang-query\">\n        <div className=\"wds-critical-banner__entry-mask\">\n          <div className=\"wds-critical-banner__entry-track\">{bannerSurface}</div>\n        </div>\n      </div>\n    </LiveRegion>\n  );\n};\n\nexport default CriticalBanner;\n"],"names":["CriticalBanner","sentiment","title","description","media","action","actionSecondary","expanded","expandedProp","onToggle","id","className","testId","containerRef","isDesktop","useContainerSize","Breakpoint","MEDIUM","isControlled","undefined","internalExpanded","setInternalExpanded","useState","resolvedExpanded","handleToggle","previousExpanded","hasActions","mediaId","useId","titleId","descId","ariaLabelledByIds","filter","Boolean","join","bannerSurface","_jsxs","Container","ref","size","as","PrimitivePrompt","emphasis","clsx","renderPromptMedia","imgClassName","actions","style","display","children","_jsx","Button","v2","priority","href","tabIndex","onClick","label","role","Body","type","Typography","BODY_LARGE_BOLD","ExpanderToggle","LiveRegion","announceOnChange","buildAnnouncementString","actionLabel","actionSecondaryLabel"],"mappings":"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"}

package/build/prompt/CriticalBanner/CriticalBanner.mjs

@@ -58,9 +58,9 @@ const CriticalBanner = ({
   const descId = useId();
   const ariaLabelledByIds = [media['aria-hidden'] ? undefined : mediaId, !title ? undefined : titleId].filter(Boolean).join(' ');
   const bannerSurface = /*#__PURE__*/jsxs(Container, {
+    ref: containerRef,
     size: "fluid",
     as: PrimitivePrompt,
-    ref: containerRef,
     id: id,
     sentiment: sentiment,
     emphasis: sentiment === 'neutral' ? 'base' : 'elevated',