@transferwise/components 0.0.0-experimental-e76a002 → 0.0.0-experimental-a39eaa6

package/build/Container/Container.js

@@ -7,7 +7,6 @@ var jsxRuntime = require('react/jsx-runtime');
 
 const Container = ({
   size = 'standard',
-  alignContent = 'none',
   as,
   className,
   children,
@@ -16,7 +15,7 @@ const Container = ({
   const Element = as ?? 'div';
   return /*#__PURE__*/jsxRuntime.jsx(Element, {
     ...otherProps,
-    className: clsx.clsx('wds-container', `wds-container--${size}`, alignContent !== 'none' && `wds-container--align-${alignContent}`, className),
+    className: clsx.clsx('wds-container', `wds-container--${size}`, className),
     children: children
   });
 };

package/build/Container/Container.js.map

@@ -1 +1 @@
-{"version":3,"file":"Container.js","sources":["../../src/Container/Container.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport type { ComponentPropsWithRef, ElementType, PropsWithChildren } from 'react';\n\nimport { CommonProps } from '../common';\n\ntype ContainerOwnProps<T extends ElementType> = CommonProps & {\n  /** Controls the maximum width: `fluid` (100%), `standard` (1160px), `narrow` (840px), `compact` (600px). @default 'standard' */\n  size?: 'fluid' | 'standard' | 'narrow' | 'compact';\n  /** Controls content alignment within the container.\n   * `none` applies no positioning, `center` centers content both vertically and horizontally.\n   * @default 'none' */\n  alignContent?: 'none' | 'center';\n  as?: T;\n};\n\nexport type ContainerProps<T extends ElementType = 'div'> = PropsWithChildren<\n  ContainerOwnProps<T>\n> &\n  Omit<ComponentPropsWithRef<T>, keyof ContainerOwnProps<T> | 'children'>;\n\n/**\n * Centers page content within a responsive max-width boundary, with automatic horizontal padding that adapts to the viewport size.\n *\n * **Design guidance**: <a href=\"https://docs.wise.design/foundations/grid\" target=\"_blank\">wise.design/foundations/grid</a>\n */\nconst Container = <T extends ElementType = 'div'>({\n  size = 'standard',\n  alignContent = 'none',\n  as,\n  className,\n  children,\n  ...otherProps\n}: ContainerProps<T>) => {\n  const Element = as ?? 'div';\n  return (\n    <Element\n      {...otherProps}\n      className={clsx(\n        'wds-container',\n        `wds-container--${size}`,\n        alignContent !== 'none' && `wds-container--align-${alignContent}`,\n        className,\n      )}\n    >\n      {children}\n    </Element>\n  );\n};\n\nexport default Container;\n"],"names":["Container","size","alignContent","as","className","children","otherProps","Element","_jsx","clsx"],"mappings":";;;;;;;AAyBA,MAAMA,SAAS,GAAGA,CAAgC;AAChDC,EAAAA,IAAI,GAAG,UAAU;AACjBC,EAAAA,YAAY,GAAG,MAAM;EACrBC,EAAE;EACFC,SAAS;EACTC,QAAQ;EACR,GAAGC;AAAU,CACK,KAAI;AACtB,EAAA,MAAMC,OAAO,GAAGJ,EAAE,IAAI,KAAK;EAC3B,oBACEK,cAAA,CAACD,OAAO,EAAA;AAAA,IAAA,GACFD,UAAU;AACdF,IAAAA,SAAS,EAAEK,SAAI,CACb,eAAe,EACf,CAAA,eAAA,EAAkBR,IAAI,CAAA,CAAE,EACxBC,YAAY,KAAK,MAAM,IAAI,CAAA,qBAAA,EAAwBA,YAAY,CAAA,CAAE,EACjEE,SAAS,CACT;AAAAC,IAAAA,QAAA,EAEDA;AAAQ,GACF,CAAC;AAEd;;;;"}
+{"version":3,"file":"Container.js","sources":["../../src/Container/Container.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport type { ComponentPropsWithRef, ElementType, PropsWithChildren } from 'react';\n\nimport { CommonProps } from '../common';\n\ntype ContainerOwnProps<T extends ElementType> = CommonProps & {\n  /** Controls the maximum width: `fluid` (100%), `standard` (1160px), `narrow` (840px), `compact` (600px). @default 'standard' */\n  size?: 'fluid' | 'standard' | 'narrow' | 'compact';\n  as?: T;\n};\n\nexport type ContainerProps<T extends ElementType = 'div'> = PropsWithChildren<\n  ContainerOwnProps<T>\n> &\n  Omit<ComponentPropsWithRef<T>, keyof ContainerOwnProps<T> | 'children'>;\n\n/**\n * Centers page content within a responsive max-width boundary, with automatic horizontal padding that adapts to the viewport size.\n *\n * **Design guidance**: <a href=\"https://docs.wise.design/foundations/grid\" target=\"_blank\">wise.design/foundations/grid</a>\n */\nconst Container = <T extends ElementType = 'div'>({\n  size = 'standard',\n  as,\n  className,\n  children,\n  ...otherProps\n}: ContainerProps<T>) => {\n  const Element = as ?? 'div';\n  return (\n    <Element {...otherProps} className={clsx('wds-container', `wds-container--${size}`, className)}>\n      {children}\n    </Element>\n  );\n};\n\nexport default Container;\n"],"names":["Container","size","as","className","children","otherProps","Element","_jsx","clsx"],"mappings":";;;;;;;AAqBA,MAAMA,SAAS,GAAGA,CAAgC;AAChDC,EAAAA,IAAI,GAAG,UAAU;EACjBC,EAAE;EACFC,SAAS;EACTC,QAAQ;EACR,GAAGC;AAAU,CACK,KAAI;AACtB,EAAA,MAAMC,OAAO,GAAGJ,EAAE,IAAI,KAAK;EAC3B,oBACEK,cAAA,CAACD,OAAO,EAAA;AAAA,IAAA,GAAKD,UAAU;IAAEF,SAAS,EAAEK,SAAI,CAAC,eAAe,EAAE,kBAAkBP,IAAI,CAAA,CAAE,EAAEE,SAAS,CAAE;AAAAC,IAAAA,QAAA,EAC5FA;AAAQ,GACF,CAAC;AAEd;;;;"}

package/build/Container/Container.mjs

@@ -3,7 +3,6 @@ import { jsx } from 'react/jsx-runtime';
 
 const Container = ({
   size = 'standard',
-  alignContent = 'none',
   as,
   className,
   children,
@@ -12,7 +11,7 @@ const Container = ({
   const Element = as ?? 'div';
   return /*#__PURE__*/jsx(Element, {
     ...otherProps,
-    className: clsx('wds-container', `wds-container--${size}`, alignContent !== 'none' && `wds-container--align-${alignContent}`, className),
+    className: clsx('wds-container', `wds-container--${size}`, className),
     children: children
   });
 };

package/build/Container/Container.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Container.mjs","sources":["../../src/Container/Container.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport type { ComponentPropsWithRef, ElementType, PropsWithChildren } from 'react';\n\nimport { CommonProps } from '../common';\n\ntype ContainerOwnProps<T extends ElementType> = CommonProps & {\n  /** Controls the maximum width: `fluid` (100%), `standard` (1160px), `narrow` (840px), `compact` (600px). @default 'standard' */\n  size?: 'fluid' | 'standard' | 'narrow' | 'compact';\n  /** Controls content alignment within the container.\n   * `none` applies no positioning, `center` centers content both vertically and horizontally.\n   * @default 'none' */\n  alignContent?: 'none' | 'center';\n  as?: T;\n};\n\nexport type ContainerProps<T extends ElementType = 'div'> = PropsWithChildren<\n  ContainerOwnProps<T>\n> &\n  Omit<ComponentPropsWithRef<T>, keyof ContainerOwnProps<T> | 'children'>;\n\n/**\n * Centers page content within a responsive max-width boundary, with automatic horizontal padding that adapts to the viewport size.\n *\n * **Design guidance**: <a href=\"https://docs.wise.design/foundations/grid\" target=\"_blank\">wise.design/foundations/grid</a>\n */\nconst Container = <T extends ElementType = 'div'>({\n  size = 'standard',\n  alignContent = 'none',\n  as,\n  className,\n  children,\n  ...otherProps\n}: ContainerProps<T>) => {\n  const Element = as ?? 'div';\n  return (\n    <Element\n      {...otherProps}\n      className={clsx(\n        'wds-container',\n        `wds-container--${size}`,\n        alignContent !== 'none' && `wds-container--align-${alignContent}`,\n        className,\n      )}\n    >\n      {children}\n    </Element>\n  );\n};\n\nexport default Container;\n"],"names":["Container","size","alignContent","as","className","children","otherProps","Element","_jsx","clsx"],"mappings":";;;AAyBA,MAAMA,SAAS,GAAGA,CAAgC;AAChDC,EAAAA,IAAI,GAAG,UAAU;AACjBC,EAAAA,YAAY,GAAG,MAAM;EACrBC,EAAE;EACFC,SAAS;EACTC,QAAQ;EACR,GAAGC;AAAU,CACK,KAAI;AACtB,EAAA,MAAMC,OAAO,GAAGJ,EAAE,IAAI,KAAK;EAC3B,oBACEK,GAAA,CAACD,OAAO,EAAA;AAAA,IAAA,GACFD,UAAU;AACdF,IAAAA,SAAS,EAAEK,IAAI,CACb,eAAe,EACf,CAAA,eAAA,EAAkBR,IAAI,CAAA,CAAE,EACxBC,YAAY,KAAK,MAAM,IAAI,CAAA,qBAAA,EAAwBA,YAAY,CAAA,CAAE,EACjEE,SAAS,CACT;AAAAC,IAAAA,QAAA,EAEDA;AAAQ,GACF,CAAC;AAEd;;;;"}
+{"version":3,"file":"Container.mjs","sources":["../../src/Container/Container.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport type { ComponentPropsWithRef, ElementType, PropsWithChildren } from 'react';\n\nimport { CommonProps } from '../common';\n\ntype ContainerOwnProps<T extends ElementType> = CommonProps & {\n  /** Controls the maximum width: `fluid` (100%), `standard` (1160px), `narrow` (840px), `compact` (600px). @default 'standard' */\n  size?: 'fluid' | 'standard' | 'narrow' | 'compact';\n  as?: T;\n};\n\nexport type ContainerProps<T extends ElementType = 'div'> = PropsWithChildren<\n  ContainerOwnProps<T>\n> &\n  Omit<ComponentPropsWithRef<T>, keyof ContainerOwnProps<T> | 'children'>;\n\n/**\n * Centers page content within a responsive max-width boundary, with automatic horizontal padding that adapts to the viewport size.\n *\n * **Design guidance**: <a href=\"https://docs.wise.design/foundations/grid\" target=\"_blank\">wise.design/foundations/grid</a>\n */\nconst Container = <T extends ElementType = 'div'>({\n  size = 'standard',\n  as,\n  className,\n  children,\n  ...otherProps\n}: ContainerProps<T>) => {\n  const Element = as ?? 'div';\n  return (\n    <Element {...otherProps} className={clsx('wds-container', `wds-container--${size}`, className)}>\n      {children}\n    </Element>\n  );\n};\n\nexport default Container;\n"],"names":["Container","size","as","className","children","otherProps","Element","_jsx","clsx"],"mappings":";;;AAqBA,MAAMA,SAAS,GAAGA,CAAgC;AAChDC,EAAAA,IAAI,GAAG,UAAU;EACjBC,EAAE;EACFC,SAAS;EACTC,QAAQ;EACR,GAAGC;AAAU,CACK,KAAI;AACtB,EAAA,MAAMC,OAAO,GAAGJ,EAAE,IAAI,KAAK;EAC3B,oBACEK,GAAA,CAACD,OAAO,EAAA;AAAA,IAAA,GAAKD,UAAU;IAAEF,SAAS,EAAEK,IAAI,CAAC,eAAe,EAAE,kBAAkBP,IAAI,CAAA,CAAE,EAAEE,SAAS,CAAE;AAAAC,IAAAA,QAAA,EAC5FA;AAAQ,GACF,CAAC;AAEd;;;;"}

package/build/FlowNavigation/FlowNavigation.js

@@ -46,7 +46,6 @@ const FlowNavigation = ({
   onClose,
   onGoBack,
   steps,
-  composable = false,
   showBottomBorder = true
 }) => {
   const intl = reactIntl.useIntl();
@@ -59,7 +58,7 @@ const FlowNavigation = ({
   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' : {
+    className: clsx.clsx('np-flow-navigation__content', 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,
@@ -95,18 +94,10 @@ const FlowNavigation = ({
     }) : 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 p-y-3', {
-      'np-flow-navigation--border-bottom': !done
+  return /*#__PURE__*/jsxRuntime.jsx(Container.default, {
+    size: "fluid",
+    className: clsx.clsx('np-flow-navigation', {
+      'np-flow-navigation--border-bottom': showBottomBorder
     }),
     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;\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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"}
+{"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 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        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  return (\n    <Container\n      size=\"fluid\"\n      className={clsx('np-flow-navigation', {\n        'np-flow-navigation--border-bottom': showBottomBorder,\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","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/FlowNavigation/FlowNavigation.mjs

@@ -42,7 +42,6 @@ const FlowNavigation = ({
   onClose,
   onGoBack,
   steps,
-  composable = false,
   showBottomBorder = true
 }) => {
   const intl = useIntl();
@@ -55,7 +54,7 @@ const FlowNavigation = ({
   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' : {
+    className: clsx('np-flow-navigation__content', 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,
@@ -91,18 +90,10 @@ const FlowNavigation = ({
     }) : 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 p-y-3', {
-      'np-flow-navigation--border-bottom': !done
+  return /*#__PURE__*/jsx(Container, {
+    size: "fluid",
+    className: clsx('np-flow-navigation', {
+      'np-flow-navigation--border-bottom': showBottomBorder
     }),
     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;\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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"}
+{"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 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        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  return (\n    <Container\n      size=\"fluid\"\n      className={clsx('np-flow-navigation', {\n        'np-flow-navigation--border-bottom': showBottomBorder,\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","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/_deprecated/OverlayHeader/OverlayHeader.js

@@ -2,32 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var clsx = require('clsx');
-require('../../common/theme.js');
-require('../../common/direction.js');
-require('@transferwise/neptune-tokens');
-require('../../common/PropsValues/control.js');
-var size = require('../../common/PropsValues/size.js');
-require('../../common/PropsValues/typography.js');
-require('../../common/PropsValues/width.js');
-require('../../common/PropsValues/type.js');
-require('../../common/PropsValues/dateMode.js');
-require('../../common/PropsValues/monthFormat.js');
-require('../../common/PropsValues/position.js');
-require('../../common/PropsValues/layouts.js');
-require('../../common/PropsValues/status.js');
-require('../../common/PropsValues/sentiment.js');
-require('../../common/PropsValues/profileType.js');
-require('../../common/PropsValues/variant.js');
-require('../../common/PropsValues/scroll.js');
-require('../../common/PropsValues/markdownNodeType.js');
-require('../../common/fileType.js');
-require('@transferwise/formatting');
-var CloseButton = require('../../common/CloseButton/CloseButton.js');
-require('react');
-var jsxRuntime = require('react/jsx-runtime');
-var FlowHeader = require('../../common/FlowHeader/FlowHeader.js');
 var Logo = require('../../Logo/Logo.js');
+var FlowNavigation = require('../../FlowNavigation/FlowNavigation.js');
+var jsxRuntime = require('react/jsx-runtime');
 
 const defaultLogo = /*#__PURE__*/jsxRuntime.jsx(Logo.default, {});
 /**
@@ -38,22 +15,10 @@ function OverlayHeader({
   onClose,
   logo = defaultLogo
 }) {
-  const closeButton = onClose && /*#__PURE__*/jsxRuntime.jsx(CloseButton.CloseButton, {
-    size: size.Size.LARGE,
-    onClick: onClose
-  });
-  return /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: "np-overlay-header d-flex justify-content-center",
-    children: /*#__PURE__*/jsxRuntime.jsx(FlowHeader.default, {
-      className: "np-overlay-header__content p-a-3",
-      leftContent: logo,
-      rightContent: /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: clsx.clsx('d-flex', 'align-items-center', 'order-2'),
-        children: [avatar, avatar && closeButton && /*#__PURE__*/jsxRuntime.jsx("span", {
-          className: clsx.clsx('m-x-1')
-        }), closeButton]
-      })
-    })
+  return /*#__PURE__*/jsxRuntime.jsx(FlowNavigation.default, {
+    avatar,
+    onClose,
+    logo
   });
 }
 

package/build/_deprecated/OverlayHeader/OverlayHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"OverlayHeader.js","sources":["../../../src/_deprecated/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;;;;"}
+{"version":3,"file":"OverlayHeader.js","sources":["../../../src/_deprecated/OverlayHeader/OverlayHeader.tsx"],"sourcesContent":["import Logo from '../../Logo';\nimport FlowNavigation from '../../FlowNavigation';\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  return <FlowNavigation {...{ avatar, onClose, logo }} />;\n}\n"],"names":["defaultLogo","_jsx","Logo","OverlayHeader","avatar","onClose","logo","FlowNavigation"],"mappings":";;;;;;;;AAcA,MAAMA,WAAW,gBAAGC,cAAA,CAACC,YAAI,KAAG;AAE5B;;AAEG;AACW,SAAUC,aAAaA,CAAC;EAAEC,MAAM;EAAEC,OAAO;AAAEC,EAAAA,IAAI,GAAGN;AAAW,CAAsB,EAAA;EAC/F,oBAAOC,cAAA,CAACM,sBAAc,EAAA;IAAOH,MAAM;IAAEC,OAAO;AAAEC,IAAAA;AAAI,IAAM;AAC1D;;;;"}

package/build/_deprecated/OverlayHeader/OverlayHeader.mjs

@@ -1,29 +1,6 @@
-import { clsx } from 'clsx';
-import '../../common/theme.mjs';
-import '../../common/direction.mjs';
-import '@transferwise/neptune-tokens';
-import '../../common/PropsValues/control.mjs';
-import { Size } from '../../common/PropsValues/size.mjs';
-import '../../common/PropsValues/typography.mjs';
-import '../../common/PropsValues/width.mjs';
-import '../../common/PropsValues/type.mjs';
-import '../../common/PropsValues/dateMode.mjs';
-import '../../common/PropsValues/monthFormat.mjs';
-import '../../common/PropsValues/position.mjs';
-import '../../common/PropsValues/layouts.mjs';
-import '../../common/PropsValues/status.mjs';
-import '../../common/PropsValues/sentiment.mjs';
-import '../../common/PropsValues/profileType.mjs';
-import '../../common/PropsValues/variant.mjs';
-import '../../common/PropsValues/scroll.mjs';
-import '../../common/PropsValues/markdownNodeType.mjs';
-import '../../common/fileType.mjs';
-import '@transferwise/formatting';
-import { CloseButton } from '../../common/CloseButton/CloseButton.mjs';
-import 'react';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import FlowHeader from '../../common/FlowHeader/FlowHeader.mjs';
 import Logo from '../../Logo/Logo.mjs';
+import FlowNavigation from '../../FlowNavigation/FlowNavigation.mjs';
+import { jsx } from 'react/jsx-runtime';
 
 const defaultLogo = /*#__PURE__*/jsx(Logo, {});
 /**
@@ -34,22 +11,10 @@ function OverlayHeader({
   onClose,
   logo = defaultLogo
 }) {
-  const closeButton = onClose && /*#__PURE__*/jsx(CloseButton, {
-    size: Size.LARGE,
-    onClick: onClose
-  });
-  return /*#__PURE__*/jsx("div", {
-    className: "np-overlay-header d-flex justify-content-center",
-    children: /*#__PURE__*/jsx(FlowHeader, {
-      className: "np-overlay-header__content p-a-3",
-      leftContent: logo,
-      rightContent: /*#__PURE__*/jsxs("div", {
-        className: clsx('d-flex', 'align-items-center', 'order-2'),
-        children: [avatar, avatar && closeButton && /*#__PURE__*/jsx("span", {
-          className: clsx('m-x-1')
-        }), closeButton]
-      })
-    })
+  return /*#__PURE__*/jsx(FlowNavigation, {
+    avatar,
+    onClose,
+    logo
   });
 }
 

package/build/_deprecated/OverlayHeader/OverlayHeader.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"OverlayHeader.mjs","sources":["../../../src/_deprecated/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;;;;"}
+{"version":3,"file":"OverlayHeader.mjs","sources":["../../../src/_deprecated/OverlayHeader/OverlayHeader.tsx"],"sourcesContent":["import Logo from '../../Logo';\nimport FlowNavigation from '../../FlowNavigation';\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  return <FlowNavigation {...{ avatar, onClose, logo }} />;\n}\n"],"names":["defaultLogo","_jsx","Logo","OverlayHeader","avatar","onClose","logo","FlowNavigation"],"mappings":";;;;AAcA,MAAMA,WAAW,gBAAGC,GAAA,CAACC,IAAI,KAAG;AAE5B;;AAEG;AACW,SAAUC,aAAaA,CAAC;EAAEC,MAAM;EAAEC,OAAO;AAAEC,EAAAA,IAAI,GAAGN;AAAW,CAAsB,EAAA;EAC/F,oBAAOC,GAAA,CAACM,cAAc,EAAA;IAAOH,MAAM;IAAEC,OAAO;AAAEC,IAAAA;AAAI,IAAM;AAC1D;;;;"}

package/build/main.css

@@ -26110,12 +26110,6 @@ a[data-toggle="tooltip"] {
   max-width: var(--wds-container-width-fluid);
 }
 
-.wds-container--align-center {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
 .critical-comms {
   border-radius: 16px;
   border-radius: var(--radius-medium);
@@ -29019,7 +29013,13 @@ button.np-option {
   justify-content: center;
   width: 100%;
   box-sizing: border-box;
-  min-height: 96px;
+  min-height: 80px;
+}
+
+@media (min-width: 320.02px) {
+  .np-flow-navigation {
+    min-height: 128px;
+  }
 }
 
 .np-flow-navigation--border-bottom {
@@ -29030,7 +29030,7 @@ button.np-option {
 .np-flow-navigation__content {
   width: 100%;
   min-width: 320px;
-  max-width: calc(1160px - 36px);
+  max-width: none;
 }
 
 .np-flow-navigation__stepper {
@@ -29107,20 +29107,6 @@ 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 {
@@ -31656,24 +31642,6 @@ html:not([dir="rtl"]) .np-navigation-option {
           text-decoration: var(--nudge-link-text-decoration);
 }
 
-.np-overlay-header .np-overlay-header__content {
-  min-height: 97px;
-  width: 100%;
-  min-width: 320px;
-  max-width: calc(1160px - 36px);
-}
-
-.np-theme-personal .np-overlay-header {
-  border-bottom: 1px solid rgba(0,0,0,0.10196);
-  border-bottom: 1px solid var(--color-border-neutral);
-}
-
-.np-theme-personal--forest-green .np-overlay-header .np-flow-header__left path,
-.np-theme-personal--bright-green .np-overlay-header .np-flow-header__left path,
-.np-theme-personal--dark .np-overlay-header .np-flow-header__left path {
-  fill: var(--color-interactive-primary);
-}
-
 .tw-telephone {
   display: flex;
 }

package/build/styles/Container/Container.css

@@ -36,8 +36,3 @@
 .wds-container--fluid {
   max-width: var(--wds-container-width-fluid);
 }
-.wds-container--align-center {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}

package/build/styles/FlowNavigation/FlowNavigation.css

@@ -4,7 +4,12 @@
   justify-content: center;
   width: 100%;
   box-sizing: border-box;
-  min-height: 96px;
+  min-height: 80px;
+}
+@media (min-width: 320.02px) {
+  .np-flow-navigation {
+    min-height: 128px;
+  }
 }
 .np-flow-navigation--border-bottom {
   border-bottom: 1px solid rgba(0,0,0,0.10196);
@@ -13,7 +18,7 @@
 .np-flow-navigation__content {
   width: 100%;
   min-width: 320px;
-  max-width: calc(1160px - 36px);
+  max-width: none;
 }
 .np-flow-navigation__stepper {
   padding-bottom: 0 !important;
@@ -72,17 +77,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 .np-flow-navigation--hidden {
   visibility: hidden;
 }
-.np-flow-navigation--composable {
-  min-height: 80px;
-}
-@media (min-width: 320.02px) {
-  .np-flow-navigation--composable {
-    min-height: 128px;
-  }
-}
-.np-flow-navigation--composable .np-flow-navigation__content {
-  max-width: none;
-}
 .np-theme-personal--forest-green .np-flow-navigation .np-flow-header__left path,
 .np-theme-personal--bright-green .np-flow-navigation .np-flow-header__left path,
 .np-theme-personal--dark .np-flow-navigation .np-flow-header__left path {

package/build/styles/main.css

@@ -26110,12 +26110,6 @@ a[data-toggle="tooltip"] {
   max-width: var(--wds-container-width-fluid);
 }
 
-.wds-container--align-center {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
 .critical-comms {
   border-radius: 16px;
   border-radius: var(--radius-medium);
@@ -29019,7 +29013,13 @@ button.np-option {
   justify-content: center;
   width: 100%;
   box-sizing: border-box;
-  min-height: 96px;
+  min-height: 80px;
+}
+
+@media (min-width: 320.02px) {
+  .np-flow-navigation {
+    min-height: 128px;
+  }
 }
 
 .np-flow-navigation--border-bottom {
@@ -29030,7 +29030,7 @@ button.np-option {
 .np-flow-navigation__content {
   width: 100%;
   min-width: 320px;
-  max-width: calc(1160px - 36px);
+  max-width: none;
 }
 
 .np-flow-navigation__stepper {
@@ -29107,20 +29107,6 @@ 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 {
@@ -31656,24 +31642,6 @@ html:not([dir="rtl"]) .np-navigation-option {
           text-decoration: var(--nudge-link-text-decoration);
 }
 
-.np-overlay-header .np-overlay-header__content {
-  min-height: 97px;
-  width: 100%;
-  min-width: 320px;
-  max-width: calc(1160px - 36px);
-}
-
-.np-theme-personal .np-overlay-header {
-  border-bottom: 1px solid rgba(0,0,0,0.10196);
-  border-bottom: 1px solid var(--color-border-neutral);
-}
-
-.np-theme-personal--forest-green .np-overlay-header .np-flow-header__left path,
-.np-theme-personal--bright-green .np-overlay-header .np-flow-header__left path,
-.np-theme-personal--dark .np-overlay-header .np-flow-header__left path {
-  fill: var(--color-interactive-primary);
-}
-
 .tw-telephone {
   display: flex;
 }

package/build/types/Container/Container.d.ts

@@ -3,10 +3,6 @@ import { CommonProps } from '../common';
 type ContainerOwnProps<T extends ElementType> = CommonProps & {
     /** Controls the maximum width: `fluid` (100%), `standard` (1160px), `narrow` (840px), `compact` (600px). @default 'standard' */
     size?: 'fluid' | 'standard' | 'narrow' | 'compact';
-    /** Controls content alignment within the container.
-     * `none` applies no positioning, `center` centers content both vertically and horizontally.
-     * @default 'none' */
-    alignContent?: 'none' | 'center';
     as?: T;
 };
 export type ContainerProps<T extends ElementType = 'div'> = PropsWithChildren<ContainerOwnProps<T>> & Omit<ComponentPropsWithRef<T>, keyof ContainerOwnProps<T> | 'children'>;
@@ -15,6 +11,6 @@ export type ContainerProps<T extends ElementType = 'div'> = PropsWithChildren<Co
  *
  * **Design guidance**: <a href="https://docs.wise.design/foundations/grid" target="_blank">wise.design/foundations/grid</a>
  */
-declare const Container: <T extends ElementType = "div">({ size, alignContent, as, className, children, ...otherProps }: ContainerProps<T>) => import("react").JSX.Element;
+declare const Container: <T extends ElementType = "div">({ size, as, className, children, ...otherProps }: ContainerProps<T>) => import("react").JSX.Element;
 export default Container;
 //# sourceMappingURL=Container.d.ts.map

package/build/types/Container/Container.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Container.d.ts","sourceRoot":"","sources":["../../../src/Container/Container.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEnF,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAExC,KAAK,iBAAiB,CAAC,CAAC,SAAS,WAAW,IAAI,WAAW,GAAG;IAC5D,gIAAgI;IAChI,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,SAAS,CAAC;IACnD;;yBAEqB;IACrB,YAAY,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IACjC,EAAE,CAAC,EAAE,CAAC,CAAC;CACR,CAAC;AAEF,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IAAI,iBAAiB,CAC3E,iBAAiB,CAAC,CAAC,CAAC,CACrB,GACC,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,MAAM,iBAAiB,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,CAAC;AAE1E;;;;GAIG;AACH,QAAA,MAAM,SAAS,GAAI,CAAC,SAAS,WAAW,GAAG,KAAK,EAAE,gEAO/C,cAAc,CAAC,CAAC,CAAC,gCAenB,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"Container.d.ts","sourceRoot":"","sources":["../../../src/Container/Container.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEnF,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAExC,KAAK,iBAAiB,CAAC,CAAC,SAAS,WAAW,IAAI,WAAW,GAAG;IAC5D,gIAAgI;IAChI,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,SAAS,CAAC;IACnD,EAAE,CAAC,EAAE,CAAC,CAAC;CACR,CAAC;AAEF,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IAAI,iBAAiB,CAC3E,iBAAiB,CAAC,CAAC,CAAC,CACrB,GACC,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,MAAM,iBAAiB,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,CAAC;AAE1E;;;;GAIG;AACH,QAAA,MAAM,SAAS,GAAI,CAAC,SAAS,WAAW,GAAG,KAAK,EAAE,kDAM/C,cAAc,CAAC,CAAC,CAAC,gCAOnB,CAAC;AAEF,eAAe,SAAS,CAAC"}