@transferwise/components 46.161.3 → 46.162.0

package/build/FlowNavigation/FlowNavigation.js

@@ -36,6 +36,18 @@ var FlowNavigation_messages = require('./FlowNavigation.messages.js');
 var AnimatedLabel = require('./AnimatedLabel/AnimatedLabel.js');
 var IconButton = require('../IconButton/IconButton.js');
 var icons = require('@transferwise/icons');
+require('../StatusIcon/StatusIcon.js');
+require('../Body/Body.js');
+require('../Prompt/PrimitivePrompt/PrimitivePrompt.js');
+require('../Button/Button.resolver.js');
+require('../_deprecated/Badge/Badge.js');
+require('@wise/art');
+require('@transferwise/neptune-validation');
+require('../Provider/Direction/DirectionProvider.js');
+require('../Primitives/PrimitiveButton/PrimitiveButton.js');
+require('../Primitives/PrimitiveAnchor/PrimitiveAnchor.js');
+require('../Link/Link.messages.js');
+var CriticalBanner = require('../Prompt/CriticalBanner/CriticalBanner.js');
 
 const defaultLogo = /*#__PURE__*/jsxRuntime.jsx(Logo.default, {});
 const FlowNavigation = ({
@@ -46,6 +58,7 @@ const FlowNavigation = ({
   onClose,
   onGoBack,
   steps,
+  banner = null,
   showBottomBorder = true
 }) => {
   const intl = reactIntl.useIntl();
@@ -95,13 +108,17 @@ const FlowNavigation = ({
     }) : null,
     layout: !screenLg ? layouts.Layout.VERTICAL : layouts.Layout.HORIZONTAL
   });
-  return /*#__PURE__*/jsxRuntime.jsx(Container.default, {
-    size: "fluid",
-    className: clsx.clsx('np-flow-navigation', {
-      'np-flow-navigation--border-bottom': showBottomBorder,
-      'np-flow-navigation--no-steps': !hasSteps || done
-    }),
-    children: flowHeaderContent
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [banner && /*#__PURE__*/jsxRuntime.jsx(CriticalBanner.CriticalBanner, {
+      ...banner
+    }), /*#__PURE__*/jsxRuntime.jsx(Container.default, {
+      size: "fluid",
+      className: clsx.clsx('np-flow-navigation', {
+        'np-flow-navigation--border-bottom': showBottomBorder,
+        'np-flow-navigation--no-steps': !hasSteps || done
+      }),
+      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';\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) | React.MouseEventHandler<HTMLButtonElement>;\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   * Controls whether the bottom border is displayed.\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  showBottomBorder = true,\n}: FlowNavigationProps) => {\n  const intl = useIntl();\n  const screenSm = useScreenSize(Breakpoint.SMALL);\n  const screenLg = useScreenSize(Breakpoint.LARGE);\n\n  const hasSteps = steps && steps.length > 0;\n  const displayGoBack = onGoBack != null && activeStep > 0;\n\n  const closeButton = onClose != null && <CloseButton size=\"lg\" onClick={onClose} />;\n  const newAvatar = done ? null : avatar;\n\n  const flowHeaderContent = (\n    <FlowHeader\n      className={clsx(\n        'np-flow-navigation__content',\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 && hasSteps && (\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 && hasSteps ? (\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  return (\n    <Container\n      size=\"fluid\"\n      className={clsx('np-flow-navigation', {\n        'np-flow-navigation--border-bottom': showBottomBorder,\n        'np-flow-navigation--no-steps': !hasSteps || done,\n      })}\n    >\n      {flowHeaderContent}\n    </Container>\n  );\n};\n\nexport default FlowNavigation;\n"],"names":["defaultLogo","_jsx","Logo","FlowNavigation","activeStep","avatar","logo","done","onClose","onGoBack","steps","showBottomBorder","intl","useIntl","screenSm","useScreenSize","Breakpoint","SMALL","screenLg","LARGE","hasSteps","length","displayGoBack","closeButton","CloseButton","size","onClick","newAvatar","flowHeaderContent","FlowHeader","className","clsx","leftContent","_jsxs","_Fragment","children","IconButton","priority","type","formatMessage","messages","back","ArrowLeft","AnimatedLabel","activeLabel","rightContent","bottomContent","Stepper","layout","Layout","VERTICAL","HORIZONTAL","Container"],"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';\nimport { CriticalBanner, CriticalBannerProps } from '../Prompt';\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) | React.MouseEventHandler<HTMLButtonElement>;\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  /** Optional critical banner data, to be displayed above the flow navigation. */\n  banner?: CriticalBannerProps | null;\n  /**\n   * Controls whether the bottom border is displayed.\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  banner = null,\n  showBottomBorder = true,\n}: FlowNavigationProps) => {\n  const intl = useIntl();\n  const screenSm = useScreenSize(Breakpoint.SMALL);\n  const screenLg = useScreenSize(Breakpoint.LARGE);\n\n  const hasSteps = steps && steps.length > 0;\n  const displayGoBack = onGoBack != null && activeStep > 0;\n\n  const closeButton = onClose != null && <CloseButton size=\"lg\" onClick={onClose} />;\n  const newAvatar = done ? null : avatar;\n\n  const flowHeaderContent = (\n    <FlowHeader\n      className={clsx(\n        'np-flow-navigation__content',\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 && hasSteps && (\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 && hasSteps ? (\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  return (\n    <>\n      {banner && <CriticalBanner {...banner} />}\n      <Container\n        size=\"fluid\"\n        className={clsx('np-flow-navigation', {\n          'np-flow-navigation--border-bottom': showBottomBorder,\n          'np-flow-navigation--no-steps': !hasSteps || done,\n        })}\n      >\n        {flowHeaderContent}\n      </Container>\n    </>\n  );\n};\n\nexport default FlowNavigation;\n"],"names":["defaultLogo","_jsx","Logo","FlowNavigation","activeStep","avatar","logo","done","onClose","onGoBack","steps","banner","showBottomBorder","intl","useIntl","screenSm","useScreenSize","Breakpoint","SMALL","screenLg","LARGE","hasSteps","length","displayGoBack","closeButton","CloseButton","size","onClick","newAvatar","flowHeaderContent","FlowHeader","className","clsx","leftContent","_jsxs","_Fragment","children","IconButton","priority","type","formatMessage","messages","back","ArrowLeft","AnimatedLabel","activeLabel","rightContent","bottomContent","Stepper","layout","Layout","VERTICAL","HORIZONTAL","CriticalBanner","Container"],"mappings":"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"}

package/build/FlowNavigation/FlowNavigation.mjs

@@ -32,6 +32,18 @@ import messages from './FlowNavigation.messages.mjs';
 import AnimatedLabel from './AnimatedLabel/AnimatedLabel.mjs';
 import IconButton from '../IconButton/IconButton.mjs';
 import { ArrowLeft } from '@transferwise/icons';
+import '../StatusIcon/StatusIcon.mjs';
+import '../Body/Body.mjs';
+import '../Prompt/PrimitivePrompt/PrimitivePrompt.mjs';
+import '../Button/Button.resolver.mjs';
+import '../_deprecated/Badge/Badge.mjs';
+import '@wise/art';
+import '@transferwise/neptune-validation';
+import '../Provider/Direction/DirectionProvider.mjs';
+import '../Primitives/PrimitiveButton/PrimitiveButton.mjs';
+import '../Primitives/PrimitiveAnchor/PrimitiveAnchor.mjs';
+import '../Link/Link.messages.mjs';
+import { CriticalBanner } from '../Prompt/CriticalBanner/CriticalBanner.mjs';
 
 const defaultLogo = /*#__PURE__*/jsx(Logo, {});
 const FlowNavigation = ({
@@ -42,6 +54,7 @@ const FlowNavigation = ({
   onClose,
   onGoBack,
   steps,
+  banner = null,
   showBottomBorder = true
 }) => {
   const intl = useIntl();
@@ -91,13 +104,17 @@ const FlowNavigation = ({
     }) : null,
     layout: !screenLg ? Layout.VERTICAL : Layout.HORIZONTAL
   });
-  return /*#__PURE__*/jsx(Container, {
-    size: "fluid",
-    className: clsx('np-flow-navigation', {
-      'np-flow-navigation--border-bottom': showBottomBorder,
-      'np-flow-navigation--no-steps': !hasSteps || done
-    }),
-    children: flowHeaderContent
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [banner && /*#__PURE__*/jsx(CriticalBanner, {
+      ...banner
+    }), /*#__PURE__*/jsx(Container, {
+      size: "fluid",
+      className: clsx('np-flow-navigation', {
+        'np-flow-navigation--border-bottom': showBottomBorder,
+        'np-flow-navigation--no-steps': !hasSteps || done
+      }),
+      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';\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) | React.MouseEventHandler<HTMLButtonElement>;\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   * Controls whether the bottom border is displayed.\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  showBottomBorder = true,\n}: FlowNavigationProps) => {\n  const intl = useIntl();\n  const screenSm = useScreenSize(Breakpoint.SMALL);\n  const screenLg = useScreenSize(Breakpoint.LARGE);\n\n  const hasSteps = steps && steps.length > 0;\n  const displayGoBack = onGoBack != null && activeStep > 0;\n\n  const closeButton = onClose != null && <CloseButton size=\"lg\" onClick={onClose} />;\n  const newAvatar = done ? null : avatar;\n\n  const flowHeaderContent = (\n    <FlowHeader\n      className={clsx(\n        'np-flow-navigation__content',\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 && hasSteps && (\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 && hasSteps ? (\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  return (\n    <Container\n      size=\"fluid\"\n      className={clsx('np-flow-navigation', {\n        'np-flow-navigation--border-bottom': showBottomBorder,\n        'np-flow-navigation--no-steps': !hasSteps || done,\n      })}\n    >\n      {flowHeaderContent}\n    </Container>\n  );\n};\n\nexport default FlowNavigation;\n"],"names":["defaultLogo","_jsx","Logo","FlowNavigation","activeStep","avatar","logo","done","onClose","onGoBack","steps","showBottomBorder","intl","useIntl","screenSm","useScreenSize","Breakpoint","SMALL","screenLg","LARGE","hasSteps","length","displayGoBack","closeButton","CloseButton","size","onClick","newAvatar","flowHeaderContent","FlowHeader","className","clsx","leftContent","_jsxs","_Fragment","children","IconButton","priority","type","formatMessage","messages","back","ArrowLeft","AnimatedLabel","activeLabel","rightContent","bottomContent","Stepper","layout","Layout","VERTICAL","HORIZONTAL","Container"],"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';\nimport { CriticalBanner, CriticalBannerProps } from '../Prompt';\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) | React.MouseEventHandler<HTMLButtonElement>;\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  /** Optional critical banner data, to be displayed above the flow navigation. */\n  banner?: CriticalBannerProps | null;\n  /**\n   * Controls whether the bottom border is displayed.\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  banner = null,\n  showBottomBorder = true,\n}: FlowNavigationProps) => {\n  const intl = useIntl();\n  const screenSm = useScreenSize(Breakpoint.SMALL);\n  const screenLg = useScreenSize(Breakpoint.LARGE);\n\n  const hasSteps = steps && steps.length > 0;\n  const displayGoBack = onGoBack != null && activeStep > 0;\n\n  const closeButton = onClose != null && <CloseButton size=\"lg\" onClick={onClose} />;\n  const newAvatar = done ? null : avatar;\n\n  const flowHeaderContent = (\n    <FlowHeader\n      className={clsx(\n        'np-flow-navigation__content',\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 && hasSteps && (\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 && hasSteps ? (\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  return (\n    <>\n      {banner && <CriticalBanner {...banner} />}\n      <Container\n        size=\"fluid\"\n        className={clsx('np-flow-navigation', {\n          'np-flow-navigation--border-bottom': showBottomBorder,\n          'np-flow-navigation--no-steps': !hasSteps || done,\n        })}\n      >\n        {flowHeaderContent}\n      </Container>\n    </>\n  );\n};\n\nexport default FlowNavigation;\n"],"names":["defaultLogo","_jsx","Logo","FlowNavigation","activeStep","avatar","logo","done","onClose","onGoBack","steps","banner","showBottomBorder","intl","useIntl","screenSm","useScreenSize","Breakpoint","SMALL","screenLg","LARGE","hasSteps","length","displayGoBack","closeButton","CloseButton","size","onClick","newAvatar","flowHeaderContent","FlowHeader","className","clsx","leftContent","_jsxs","_Fragment","children","IconButton","priority","type","formatMessage","messages","back","ArrowLeft","AnimatedLabel","activeLabel","rightContent","bottomContent","Stepper","layout","Layout","VERTICAL","HORIZONTAL","CriticalBanner","Container"],"mappings":"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"}

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

@@ -1,4 +1,5 @@
 import { type Step } from '../Stepper/Stepper';
+import { CriticalBannerProps } from '../Prompt';
 export interface FlowNavigationProps {
     /** @default 0 */
     activeStep?: number;
@@ -13,12 +14,14 @@ export interface FlowNavigationProps {
     onGoBack?: () => void;
     /** Steps to be displayed in stepper. If not provided, the stepper won't show. */
     steps?: readonly Step[];
+    /** Optional critical banner data, to be displayed above the flow navigation. */
+    banner?: CriticalBannerProps | null;
     /**
      * Controls whether the bottom border is displayed.
      * @default true
      */
     showBottomBorder?: boolean;
 }
-declare const FlowNavigation: ({ activeStep, avatar, logo, done, onClose, onGoBack, steps, showBottomBorder, }: FlowNavigationProps) => import("react").JSX.Element;
+declare const FlowNavigation: ({ activeStep, avatar, logo, done, onClose, onGoBack, steps, banner, 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;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,CAAC,MAAM,IAAI,CAAC,GAAG,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACpE,sIAAsI;IACtI,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,iFAAiF;IACjF,KAAK,CAAC,EAAE,SAAS,IAAI,EAAE,CAAC;IACxB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,QAAA,MAAM,cAAc,GAAI,iFASrB,mBAAmB,gCA2ErB,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;AAQxD,OAAO,EAAkB,mBAAmB,EAAE,MAAM,WAAW,CAAC;AAIhE,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,CAAC,MAAM,IAAI,CAAC,GAAG,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACpE,sIAAsI;IACtI,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,iFAAiF;IACjF,KAAK,CAAC,EAAE,SAAS,IAAI,EAAE,CAAC;IACxB,gFAAgF;IAChF,MAAM,CAAC,EAAE,mBAAmB,GAAG,IAAI,CAAC;IACpC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,QAAA,MAAM,cAAc,GAAI,yFAUrB,mBAAmB,gCA8ErB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.161.3",
+  "version": "46.162.0",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/FlowNavigation/FlowNavigation.tsx

@@ -14,6 +14,7 @@ import messages from './FlowNavigation.messages';
 import AnimatedLabel from './AnimatedLabel';
 import IconButton from '../IconButton';
 import { ArrowLeft } from '@transferwise/icons';
+import { CriticalBanner, CriticalBannerProps } from '../Prompt';
 
 const defaultLogo = <Logo />;
 
@@ -31,6 +32,8 @@ export interface FlowNavigationProps {
   onGoBack?: () => void;
   /** Steps to be displayed in stepper. If not provided, the stepper won't show. */
   steps?: readonly Step[];
+  /** Optional critical banner data, to be displayed above the flow navigation. */
+  banner?: CriticalBannerProps | null;
   /**
    * Controls whether the bottom border is displayed.
    * @default true
@@ -46,6 +49,7 @@ const FlowNavigation = ({
   onClose,
   onGoBack,
   steps,
+  banner = null,
   showBottomBorder = true,
 }: FlowNavigationProps) => {
   const intl = useIntl();
@@ -112,15 +116,18 @@ const FlowNavigation = ({
   );
 
   return (
-    <Container
-      size="fluid"
-      className={clsx('np-flow-navigation', {
-        'np-flow-navigation--border-bottom': showBottomBorder,
-        'np-flow-navigation--no-steps': !hasSteps || done,
-      })}
-    >
-      {flowHeaderContent}
-    </Container>
+    <>
+      {banner && <CriticalBanner {...banner} />}
+      <Container
+        size="fluid"
+        className={clsx('np-flow-navigation', {
+          'np-flow-navigation--border-bottom': showBottomBorder,
+          'np-flow-navigation--no-steps': !hasSteps || done,
+        })}
+      >
+        {flowHeaderContent}
+      </Container>
+    </>
   );
 };
 

package/src/FlowNavigation/_stories/FlowNavigation.story.tsx

@@ -538,3 +538,111 @@ export const BorderControl: Story = {
     );
   },
 };
+
+export const WithCriticalBanner: Story = {
+  args: {
+    profileType: ProfileType.PERSONAL,
+    showCloseButton: true,
+    showMobileBackButton: true,
+    avatarURL: '../tapestry-01.png',
+  },
+  parameters: {
+    chromatic: {
+      viewports,
+    },
+    padding: '0',
+  },
+  render: (args) => {
+    const [activeStep, setActiveStep] = useState(2);
+
+    const steps = [
+      {
+        label: 'Recipient',
+        onClick: () => setActiveStep(0),
+      },
+      {
+        label: 'Amount',
+        hoverLabel: (
+          <>
+            You send 100 GBP <br />
+            You get 99.39 GBP{' '}
+          </>
+        ),
+        ...(activeStep > 1 && { onClick: () => setActiveStep(1) }),
+      },
+      {
+        label: 'Review',
+        ...(activeStep > 2 && { onClick: () => setActiveStep(2) }),
+      },
+      {
+        label: 'Pay',
+        ...(activeStep > 3 && { onClick: () => setActiveStep(3) }),
+      },
+    ];
+
+    return (
+      <>
+        {/* With critical banner - negative sentiment */}
+        <FlowNavigation
+          avatar={<AvatarView profileType={args.profileType} />}
+          logo={<Logo />}
+          activeStep={activeStep}
+          steps={steps}
+          banner={{
+            sentiment: 'negative',
+            title: 'Action required',
+            description: 'Please verify your identity to continue with this transfer.',
+            action: {
+              label: 'Verify now',
+              onClick: () => console.log('Verify clicked'),
+            },
+          }}
+          onClose={args.showCloseButton ? () => {} : undefined}
+          onGoBack={
+            args.showMobileBackButton
+              ? () => setActiveStep(activeStep > 0 ? activeStep - 1 : 0)
+              : undefined
+          }
+        />
+
+        <Container size="narrow" className="m-y-5">
+          <Body className="text-xs-center">
+            <Display type={Typography.DISPLAY_SMALL}>Critical Banner Examples</Display>
+          </Body>
+        </Container>
+
+        {/* With critical banner - warning sentiment */}
+        <FlowNavigation
+          avatar={<AvatarView profileType={args.profileType} />}
+          logo={<Logo />}
+          activeStep={activeStep}
+          steps={steps}
+          banner={{
+            sentiment: 'warning',
+            title: 'Rate expires soon',
+            description:
+              'Your guaranteed rate will expire in 2 hours. Complete your transfer to lock it in.',
+            action: {
+              label: 'Continue',
+              onClick: () => console.log('Continue clicked'),
+            },
+            actionSecondary: {
+              label: 'Cancel transfer',
+              onClick: () => console.log('Cancel clicked'),
+            },
+          }}
+          onClose={args.showCloseButton ? () => {} : undefined}
+          onGoBack={
+            args.showMobileBackButton
+              ? () => setActiveStep(activeStep > 0 ? activeStep - 1 : 0)
+              : undefined
+          }
+        />
+
+        <Container size="narrow" className="m-y-3">
+          <Body>Example content below the navigation</Body>
+        </Container>
+      </>
+    );
+  },
+};

package/src/FlowNavigation/_stories/FlowNavigation.test.story.tsx

@@ -3,6 +3,7 @@ import { Meta, StoryObj } from '@storybook/react-webpack5';
 import AvatarView from '../../AvatarView';
 import { ProfileType } from '../../common';
 import Logo from '../../Logo';
+import { withVariantConfig } from '../../../.storybook/helpers';
 import { allModes } from '../../../.storybook/modes';
 
 import FlowNavigation, { FlowNavigationProps } from '../FlowNavigation';
@@ -45,23 +46,6 @@ export const EmptySteps: Story = {
 };
 
 export const LongLabel: Story = {
-  parameters: {
-    chromatic: {
-      viewports: [360],
-    },
-    viewport: {
-      options: {
-        narrow: {
-          name: '360px',
-          styles: { width: '360px', height: '600px' },
-          type: 'mobile',
-        },
-      },
-    },
-  },
-  globals: {
-    viewport: 'narrow',
-  },
   render: () => (
     <FlowNavigation
       {...baseProps}
@@ -75,4 +59,71 @@ export const LongLabel: Story = {
       activeStep={2}
     />
   ),
+  ...withVariantConfig(['mobile']),
+};
+
+export const CriticalBannerMobile: Story = {
+  render: () => (
+    <>
+      <FlowNavigation
+        {...baseProps}
+        steps={[
+          { label: 'Amount', hoverLabel: '100 GBP', onClick: noop },
+          { label: 'You', hoverLabel: 'Elena Durante', onClick: noop },
+          { label: 'Recipient', hoverLabel: 'Daniele Tomboro', onClick: noop },
+          { label: 'Review', onClick: noop },
+          { label: 'Pay', onClick: noop },
+        ]}
+        activeStep={2}
+        banner={{
+          sentiment: 'negative',
+          title: 'Action required',
+          description: 'Please verify your identity to continue with this transfer.',
+          action: {
+            label: 'Verify now',
+            onClick: noop,
+          },
+        }}
+      />
+      <FlowNavigation
+        {...baseProps}
+        steps={[
+          { label: 'Amount', hoverLabel: '100 GBP', onClick: noop },
+          { label: 'You', hoverLabel: 'Elena Durante', onClick: noop },
+          { label: 'Recipient', hoverLabel: 'Daniele Tomboro', onClick: noop },
+          { label: 'Review', onClick: noop },
+          { label: 'Pay', onClick: noop },
+        ]}
+        activeStep={1}
+        banner={{
+          sentiment: 'warning',
+          title: 'Rate expires soon',
+          description:
+            'Your guaranteed rate will expire in 2 hours. Complete your transfer to lock it in.',
+          action: {
+            label: 'Continue',
+            onClick: noop,
+          },
+          actionSecondary: {
+            label: 'Cancel',
+            onClick: noop,
+          },
+        }}
+      />
+      <FlowNavigation
+        {...baseProps}
+        steps={[
+          { label: 'Amount', hoverLabel: '100 GBP', onClick: noop },
+          { label: 'You', hoverLabel: 'Elena Durante', onClick: noop },
+          { label: 'Recipient', hoverLabel: 'Daniele Tomboro', onClick: noop },
+        ]}
+        activeStep={0}
+        banner={{
+          sentiment: 'neutral',
+          description: 'This is a neutral informational banner without a title.',
+        }}
+      />
+    </>
+  ),
+  ...withVariantConfig(['mobile']),
 };