@transferwise/components 46.83.3 → 46.84.0

package/build/common/closeButton/CloseButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"CloseButton.js","sources":["../../../src/common/closeButton/CloseButton.tsx"],"sourcesContent":["import { Cross, CrossCircleFill } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { forwardRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Size, SizeLarge, SizeMedium, SizeSmall } from '../propsValues/size';\n\nimport messages from './CloseButton.messages';\n\nexport type CloseButtonProps = Pick<\n  React.ComponentPropsWithoutRef<'button'>,\n  'aria-label' | 'className' | 'onClick'\n> & {\n  size?: SizeSmall | SizeMedium | SizeLarge;\n  filled?: boolean;\n  isDisabled?: boolean;\n  testId?: string;\n};\n\nexport const CloseButton = forwardRef(function CloseButton(\n  {\n    'aria-label': ariaLabel,\n    size = Size.MEDIUM,\n    filled = false,\n    className,\n    onClick,\n    isDisabled,\n    testId,\n  }: CloseButtonProps,\n  reference: React.ForwardedRef<HTMLButtonElement | null>,\n) {\n  const intl = useIntl();\n  ariaLabel ??= intl.formatMessage(messages.ariaLabel);\n  const Icon = filled ? CrossCircleFill : Cross;\n\n  return (\n    <button\n      ref={reference}\n      type=\"button\"\n      className={clsx(\n        'np-close-button',\n        'close btn-link',\n        'text-no-decoration',\n        {\n          'np-close-button--large': size === Size.MEDIUM,\n          'np-close-button--x-large': size === Size.LARGE,\n        },\n        className,\n      )}\n      aria-label={ariaLabel}\n      aria-disabled={isDisabled}\n      disabled={isDisabled}\n      data-testid={testId}\n      onClick={onClick}\n    >\n      <Icon size={size === Size.SMALL ? 16 : 24} />\n    </button>\n  );\n});\n"],"names":["CloseButton","forwardRef","ariaLabel","size","Size","MEDIUM","filled","className","onClick","isDisabled","testId","reference","intl","useIntl","formatMessage","messages","Icon","CrossCircleFill","Cross","_jsx","ref","type","clsx","LARGE","disabled","children","SMALL"],"mappings":";;;;;;;;;;MAmBaA,WAAW,gBAAGC,gBAAU,CAAC,SAASD,WAAWA,CACxD;AACE,EAAA,YAAY,EAAEE,SAAS;QACvBC,MAAI,GAAGC,SAAI,CAACC,MAAM;AAClBC,EAAAA,MAAM,GAAG,KAAK;EACdC,SAAS;EACTC,OAAO;EACPC,UAAU;AACVC,EAAAA,MAAAA;AAAM,CACW,EACnBC,SAAuD,EAAA;AAEvD,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE,CAAA;EACtBX,SAAS,KAAKU,IAAI,CAACE,aAAa,CAACC,oBAAQ,CAACb,SAAS,CAAC,CAAA;AACpD,EAAA,MAAMc,IAAI,GAAGV,MAAM,GAAGW,qBAAe,GAAGC,WAAK,CAAA;AAE7C,EAAA,oBACEC,cAAA,CAAA,QAAA,EAAA;AACEC,IAAAA,GAAG,EAAET,SAAU;AACfU,IAAAA,IAAI,EAAC,QAAQ;IACbd,SAAS,EAAEe,SAAI,CACb,iBAAiB,EACjB,gBAAgB,EAChB,oBAAoB,EACpB;AACE,MAAA,wBAAwB,EAAEnB,MAAI,KAAKC,SAAI,CAACC,MAAM;AAC9C,MAAA,0BAA0B,EAAEF,MAAI,KAAKC,SAAI,CAACmB,KAAAA;KAC3C,EACDhB,SAAS,CACT;AACF,IAAA,YAAA,EAAYL,SAAU;AACtB,IAAA,eAAA,EAAeO,UAAW;AAC1Be,IAAAA,QAAQ,EAAEf,UAAW;AACrB,IAAA,aAAA,EAAaC,MAAO;AACpBF,IAAAA,OAAO,EAAEA,OAAQ;IAAAiB,QAAA,eAEjBN,cAAA,CAACH,IAAI,EAAA;MAACb,IAAI,EAAEA,MAAI,KAAKC,SAAI,CAACsB,KAAK,GAAG,EAAE,GAAG,EAAA;KACzC,CAAA;AAAA,GAAQ,CAAC,CAAA;AAEb,CAAC;;;;"}
+{"version":3,"file":"CloseButton.js","sources":["../../../src/common/closeButton/CloseButton.tsx"],"sourcesContent":["import { Cross, CrossCircleFill } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { forwardRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Size, SizeLarge, SizeMedium, SizeSmall } from '../propsValues/size';\n\nimport messages from './CloseButton.messages';\n\nexport type CloseButtonProps = Pick<\n  React.ComponentPropsWithoutRef<'button'>,\n  'aria-label' | 'className' | 'onClick'\n> & {\n  size?: SizeSmall | SizeMedium | SizeLarge;\n  filled?: boolean;\n  isDisabled?: boolean;\n  testId?: string;\n};\n\n/**\n * @deprecated Use `<IconButton />` component instead\n */\nexport const CloseButton = forwardRef(function CloseButton(\n  {\n    'aria-label': ariaLabel,\n    size = Size.MEDIUM,\n    filled = false,\n    className,\n    onClick,\n    isDisabled,\n    testId,\n  }: CloseButtonProps,\n  reference: React.ForwardedRef<HTMLButtonElement | null>,\n) {\n  const intl = useIntl();\n  ariaLabel ??= intl.formatMessage(messages.ariaLabel);\n  const Icon = filled ? CrossCircleFill : Cross;\n\n  return (\n    <button\n      ref={reference}\n      type=\"button\"\n      className={clsx(\n        'np-close-button',\n        'close btn-link',\n        'text-no-decoration',\n        {\n          'np-close-button--large': size === Size.MEDIUM,\n          'np-close-button--x-large': size === Size.LARGE,\n        },\n        className,\n      )}\n      aria-label={ariaLabel}\n      aria-disabled={isDisabled}\n      disabled={isDisabled}\n      data-testid={testId}\n      onClick={onClick}\n    >\n      <Icon size={size === Size.SMALL ? 16 : 24} />\n    </button>\n  );\n});\n"],"names":["CloseButton","forwardRef","ariaLabel","size","Size","MEDIUM","filled","className","onClick","isDisabled","testId","reference","intl","useIntl","formatMessage","messages","Icon","CrossCircleFill","Cross","_jsx","ref","type","clsx","LARGE","disabled","children","SMALL"],"mappings":";;;;;;;;;;MAsBaA,WAAW,gBAAGC,gBAAU,CAAC,SAASD,WAAWA,CACxD;AACE,EAAA,YAAY,EAAEE,SAAS;QACvBC,MAAI,GAAGC,SAAI,CAACC,MAAM;AAClBC,EAAAA,MAAM,GAAG,KAAK;EACdC,SAAS;EACTC,OAAO;EACPC,UAAU;AACVC,EAAAA,MAAAA;AAAM,CACW,EACnBC,SAAuD,EAAA;AAEvD,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE,CAAA;EACtBX,SAAS,KAAKU,IAAI,CAACE,aAAa,CAACC,oBAAQ,CAACb,SAAS,CAAC,CAAA;AACpD,EAAA,MAAMc,IAAI,GAAGV,MAAM,GAAGW,qBAAe,GAAGC,WAAK,CAAA;AAE7C,EAAA,oBACEC,cAAA,CAAA,QAAA,EAAA;AACEC,IAAAA,GAAG,EAAET,SAAU;AACfU,IAAAA,IAAI,EAAC,QAAQ;IACbd,SAAS,EAAEe,SAAI,CACb,iBAAiB,EACjB,gBAAgB,EAChB,oBAAoB,EACpB;AACE,MAAA,wBAAwB,EAAEnB,MAAI,KAAKC,SAAI,CAACC,MAAM;AAC9C,MAAA,0BAA0B,EAAEF,MAAI,KAAKC,SAAI,CAACmB,KAAAA;KAC3C,EACDhB,SAAS,CACT;AACF,IAAA,YAAA,EAAYL,SAAU;AACtB,IAAA,eAAA,EAAeO,UAAW;AAC1Be,IAAAA,QAAQ,EAAEf,UAAW;AACrB,IAAA,aAAA,EAAaC,MAAO;AACpBF,IAAAA,OAAO,EAAEA,OAAQ;IAAAiB,QAAA,eAEjBN,cAAA,CAACH,IAAI,EAAA;MAACb,IAAI,EAAEA,MAAI,KAAKC,SAAI,CAACsB,KAAK,GAAG,EAAE,GAAG,EAAA;KACzC,CAAA;AAAA,GAAQ,CAAC,CAAA;AAEb,CAAC;;;;"}

package/build/common/closeButton/CloseButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CloseButton.mjs","sources":["../../../src/common/closeButton/CloseButton.tsx"],"sourcesContent":["import { Cross, CrossCircleFill } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { forwardRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Size, SizeLarge, SizeMedium, SizeSmall } from '../propsValues/size';\n\nimport messages from './CloseButton.messages';\n\nexport type CloseButtonProps = Pick<\n  React.ComponentPropsWithoutRef<'button'>,\n  'aria-label' | 'className' | 'onClick'\n> & {\n  size?: SizeSmall | SizeMedium | SizeLarge;\n  filled?: boolean;\n  isDisabled?: boolean;\n  testId?: string;\n};\n\nexport const CloseButton = forwardRef(function CloseButton(\n  {\n    'aria-label': ariaLabel,\n    size = Size.MEDIUM,\n    filled = false,\n    className,\n    onClick,\n    isDisabled,\n    testId,\n  }: CloseButtonProps,\n  reference: React.ForwardedRef<HTMLButtonElement | null>,\n) {\n  const intl = useIntl();\n  ariaLabel ??= intl.formatMessage(messages.ariaLabel);\n  const Icon = filled ? CrossCircleFill : Cross;\n\n  return (\n    <button\n      ref={reference}\n      type=\"button\"\n      className={clsx(\n        'np-close-button',\n        'close btn-link',\n        'text-no-decoration',\n        {\n          'np-close-button--large': size === Size.MEDIUM,\n          'np-close-button--x-large': size === Size.LARGE,\n        },\n        className,\n      )}\n      aria-label={ariaLabel}\n      aria-disabled={isDisabled}\n      disabled={isDisabled}\n      data-testid={testId}\n      onClick={onClick}\n    >\n      <Icon size={size === Size.SMALL ? 16 : 24} />\n    </button>\n  );\n});\n"],"names":["CloseButton","forwardRef","ariaLabel","size","Size","MEDIUM","filled","className","onClick","isDisabled","testId","reference","intl","useIntl","formatMessage","messages","Icon","CrossCircleFill","Cross","_jsx","ref","type","clsx","LARGE","disabled","children","SMALL"],"mappings":";;;;;;;;MAmBaA,WAAW,gBAAGC,UAAU,CAAC,SAASD,WAAWA,CACxD;AACE,EAAA,YAAY,EAAEE,SAAS;EACvBC,IAAI,GAAGC,IAAI,CAACC,MAAM;AAClBC,EAAAA,MAAM,GAAG,KAAK;EACdC,SAAS;EACTC,OAAO;EACPC,UAAU;AACVC,EAAAA,MAAAA;AAAM,CACW,EACnBC,SAAuD,EAAA;AAEvD,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE,CAAA;EACtBX,SAAS,KAAKU,IAAI,CAACE,aAAa,CAACC,QAAQ,CAACb,SAAS,CAAC,CAAA;AACpD,EAAA,MAAMc,IAAI,GAAGV,MAAM,GAAGW,eAAe,GAAGC,KAAK,CAAA;AAE7C,EAAA,oBACEC,GAAA,CAAA,QAAA,EAAA;AACEC,IAAAA,GAAG,EAAET,SAAU;AACfU,IAAAA,IAAI,EAAC,QAAQ;IACbd,SAAS,EAAEe,IAAI,CACb,iBAAiB,EACjB,gBAAgB,EAChB,oBAAoB,EACpB;AACE,MAAA,wBAAwB,EAAEnB,IAAI,KAAKC,IAAI,CAACC,MAAM;AAC9C,MAAA,0BAA0B,EAAEF,IAAI,KAAKC,IAAI,CAACmB,KAAAA;KAC3C,EACDhB,SAAS,CACT;AACF,IAAA,YAAA,EAAYL,SAAU;AACtB,IAAA,eAAA,EAAeO,UAAW;AAC1Be,IAAAA,QAAQ,EAAEf,UAAW;AACrB,IAAA,aAAA,EAAaC,MAAO;AACpBF,IAAAA,OAAO,EAAEA,OAAQ;IAAAiB,QAAA,eAEjBN,GAAA,CAACH,IAAI,EAAA;MAACb,IAAI,EAAEA,IAAI,KAAKC,IAAI,CAACsB,KAAK,GAAG,EAAE,GAAG,EAAA;KACzC,CAAA;AAAA,GAAQ,CAAC,CAAA;AAEb,CAAC;;;;"}
+{"version":3,"file":"CloseButton.mjs","sources":["../../../src/common/closeButton/CloseButton.tsx"],"sourcesContent":["import { Cross, CrossCircleFill } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { forwardRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Size, SizeLarge, SizeMedium, SizeSmall } from '../propsValues/size';\n\nimport messages from './CloseButton.messages';\n\nexport type CloseButtonProps = Pick<\n  React.ComponentPropsWithoutRef<'button'>,\n  'aria-label' | 'className' | 'onClick'\n> & {\n  size?: SizeSmall | SizeMedium | SizeLarge;\n  filled?: boolean;\n  isDisabled?: boolean;\n  testId?: string;\n};\n\n/**\n * @deprecated Use `<IconButton />` component instead\n */\nexport const CloseButton = forwardRef(function CloseButton(\n  {\n    'aria-label': ariaLabel,\n    size = Size.MEDIUM,\n    filled = false,\n    className,\n    onClick,\n    isDisabled,\n    testId,\n  }: CloseButtonProps,\n  reference: React.ForwardedRef<HTMLButtonElement | null>,\n) {\n  const intl = useIntl();\n  ariaLabel ??= intl.formatMessage(messages.ariaLabel);\n  const Icon = filled ? CrossCircleFill : Cross;\n\n  return (\n    <button\n      ref={reference}\n      type=\"button\"\n      className={clsx(\n        'np-close-button',\n        'close btn-link',\n        'text-no-decoration',\n        {\n          'np-close-button--large': size === Size.MEDIUM,\n          'np-close-button--x-large': size === Size.LARGE,\n        },\n        className,\n      )}\n      aria-label={ariaLabel}\n      aria-disabled={isDisabled}\n      disabled={isDisabled}\n      data-testid={testId}\n      onClick={onClick}\n    >\n      <Icon size={size === Size.SMALL ? 16 : 24} />\n    </button>\n  );\n});\n"],"names":["CloseButton","forwardRef","ariaLabel","size","Size","MEDIUM","filled","className","onClick","isDisabled","testId","reference","intl","useIntl","formatMessage","messages","Icon","CrossCircleFill","Cross","_jsx","ref","type","clsx","LARGE","disabled","children","SMALL"],"mappings":";;;;;;;;MAsBaA,WAAW,gBAAGC,UAAU,CAAC,SAASD,WAAWA,CACxD;AACE,EAAA,YAAY,EAAEE,SAAS;EACvBC,IAAI,GAAGC,IAAI,CAACC,MAAM;AAClBC,EAAAA,MAAM,GAAG,KAAK;EACdC,SAAS;EACTC,OAAO;EACPC,UAAU;AACVC,EAAAA,MAAAA;AAAM,CACW,EACnBC,SAAuD,EAAA;AAEvD,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE,CAAA;EACtBX,SAAS,KAAKU,IAAI,CAACE,aAAa,CAACC,QAAQ,CAACb,SAAS,CAAC,CAAA;AACpD,EAAA,MAAMc,IAAI,GAAGV,MAAM,GAAGW,eAAe,GAAGC,KAAK,CAAA;AAE7C,EAAA,oBACEC,GAAA,CAAA,QAAA,EAAA;AACEC,IAAAA,GAAG,EAAET,SAAU;AACfU,IAAAA,IAAI,EAAC,QAAQ;IACbd,SAAS,EAAEe,IAAI,CACb,iBAAiB,EACjB,gBAAgB,EAChB,oBAAoB,EACpB;AACE,MAAA,wBAAwB,EAAEnB,IAAI,KAAKC,IAAI,CAACC,MAAM;AAC9C,MAAA,0BAA0B,EAAEF,IAAI,KAAKC,IAAI,CAACmB,KAAAA;KAC3C,EACDhB,SAAS,CACT;AACF,IAAA,YAAA,EAAYL,SAAU;AACtB,IAAA,eAAA,EAAeO,UAAW;AAC1Be,IAAAA,QAAQ,EAAEf,UAAW;AACrB,IAAA,aAAA,EAAaC,MAAO;AACpBF,IAAAA,OAAO,EAAEA,OAAQ;IAAAiB,QAAA,eAEjBN,GAAA,CAACH,IAAI,EAAA;MAACb,IAAI,EAAEA,IAAI,KAAKC,IAAI,CAACsB,KAAK,GAAG,EAAE,GAAG,EAAA;KACzC,CAAA;AAAA,GAAQ,CAAC,CAAA;AAEb,CAAC;;;;"}

package/build/flowNavigation/FlowNavigation.js

@@ -28,7 +28,8 @@ var Stepper = require('../stepper/Stepper.js');
 var useScreenSize = require('../common/hooks/useScreenSize.js');
 var FlowNavigation_messages = require('./FlowNavigation.messages.js');
 var AnimatedLabel = require('./animatedLabel/AnimatedLabel.js');
-var BackButton = require('./backButton/BackButton.js');
+var IconButton = require('../iconButton/IconButton.js');
+var icons = require('@transferwise/icons');
 var jsxRuntime = require('react/jsx-runtime');
 
 const FlowNavigation = ({
@@ -61,9 +62,13 @@ const FlowNavigation = ({
         'np-flow-navigation--lg': screenLg
       }),
       leftContent: /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [!screenSm && displayGoBack ? /*#__PURE__*/jsxRuntime.jsx(BackButton, {
+        children: [!screenSm && displayGoBack ? /*#__PURE__*/jsxRuntime.jsx(IconButton, {
+          size: 40,
+          priority: "tertiary",
+          type: "default",
           "aria-label": intl.formatMessage(FlowNavigation_messages.back),
-          onClick: onGoBack
+          onClick: onGoBack,
+          children: /*#__PURE__*/jsxRuntime.jsx(icons.ArrowLeft, {})
         }) : /*#__PURE__*/jsxRuntime.jsx("div", {
           className: "np-flow-header__left",
           children: logo

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';\n\nimport { Breakpoint, 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 BackButton from './backButton';\n\nexport interface FlowNavigationProps {\n  activeStep?: number;\n  avatar?: React.ReactNode;\n  logo?: React.ReactNode;\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              <BackButton aria-label={intl.formatMessage(messages.back)} onClick={onGoBack} />\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 && (\n            <Stepper\n              activeStep={activeStep}\n              steps={steps}\n              className={clsx('np-flow-navigation__stepper')}\n            />\n          )\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","BackButton","formatMessage","messages","back","AnimatedLabel","activeLabel","rightContent","bottomContent","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';\n\nimport { Breakpoint, 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  activeStep?: number;\n  avatar?: React.ReactNode;\n  logo?: React.ReactNode;\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 && (\n            <Stepper\n              activeStep={activeStep}\n              steps={steps}\n              className={clsx('np-flow-navigation__stepper')}\n            />\n          )\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","Stepper","layout","Layout","VERTICAL","HORIZONTAL"],"mappings":"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"}

package/build/flowNavigation/FlowNavigation.mjs

@@ -26,7 +26,8 @@ import Stepper from '../stepper/Stepper.mjs';
 import { useScreenSize } from '../common/hooks/useScreenSize.mjs';
 import messages from './FlowNavigation.messages.mjs';
 import AnimatedLabel from './animatedLabel/AnimatedLabel.mjs';
-import BackButton from './backButton/BackButton.mjs';
+import IconButton from '../iconButton/IconButton.mjs';
+import { ArrowLeft } from '@transferwise/icons';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 const FlowNavigation = ({
@@ -59,9 +60,13 @@ const FlowNavigation = ({
         'np-flow-navigation--lg': screenLg
       }),
       leftContent: /*#__PURE__*/jsxs(Fragment, {
-        children: [!screenSm && displayGoBack ? /*#__PURE__*/jsx(BackButton, {
+        children: [!screenSm && displayGoBack ? /*#__PURE__*/jsx(IconButton, {
+          size: 40,
+          priority: "tertiary",
+          type: "default",
           "aria-label": intl.formatMessage(messages.back),
-          onClick: onGoBack
+          onClick: onGoBack,
+          children: /*#__PURE__*/jsx(ArrowLeft, {})
         }) : /*#__PURE__*/jsx("div", {
           className: "np-flow-header__left",
           children: logo

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';\n\nimport { Breakpoint, 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 BackButton from './backButton';\n\nexport interface FlowNavigationProps {\n  activeStep?: number;\n  avatar?: React.ReactNode;\n  logo?: React.ReactNode;\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              <BackButton aria-label={intl.formatMessage(messages.back)} onClick={onGoBack} />\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 && (\n            <Stepper\n              activeStep={activeStep}\n              steps={steps}\n              className={clsx('np-flow-navigation__stepper')}\n            />\n          )\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","BackButton","formatMessage","messages","back","AnimatedLabel","activeLabel","rightContent","bottomContent","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';\n\nimport { Breakpoint, 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  activeStep?: number;\n  avatar?: React.ReactNode;\n  logo?: React.ReactNode;\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 && (\n            <Stepper\n              activeStep={activeStep}\n              steps={steps}\n              className={clsx('np-flow-navigation__stepper')}\n            />\n          )\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","Stepper","layout","Layout","VERTICAL","HORIZONTAL"],"mappings":"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"}

package/build/i18n/de.json

@@ -35,6 +35,11 @@
   "neptune.Summary.statusDone": "Schritt erledigt",
   "neptune.Summary.statusNotDone": "Schritt noch zu erledigen",
   "neptune.Summary.statusPending": "Schritt ausstehend",
+  "neptune.Table.actionHeader": "Aktion",
+  "neptune.Table.emptyData": "Keine Ergebnisse gefunden",
+  "neptune.Table.loaded": "Tabellendaten wurden geladen",
+  "neptune.Table.loading": "Tabellendaten werden geladen",
+  "neptune.Table.refreshPage": "Seite aktualisieren",
   "neptune.Upload.csButtonText": "Eine andere Datei hochladen?",
   "neptune.Upload.csFailureText": "Hochladen fehlgeschlagen. Bitte versuche es erneut",
   "neptune.Upload.csSuccessText": "Fertig hochgeladen!",

package/build/i18n/de.json.js

@@ -37,6 +37,11 @@ var de = {
 	"neptune.Summary.statusDone": "Schritt erledigt",
 	"neptune.Summary.statusNotDone": "Schritt noch zu erledigen",
 	"neptune.Summary.statusPending": "Schritt ausstehend",
+	"neptune.Table.actionHeader": "Aktion",
+	"neptune.Table.emptyData": "Keine Ergebnisse gefunden",
+	"neptune.Table.loaded": "Tabellendaten wurden geladen",
+	"neptune.Table.loading": "Tabellendaten werden geladen",
+	"neptune.Table.refreshPage": "Seite aktualisieren",
 	"neptune.Upload.csButtonText": "Eine andere Datei hochladen?",
 	"neptune.Upload.csFailureText": "Hochladen fehlgeschlagen. Bitte versuche es erneut",
 	"neptune.Upload.csSuccessText": "Fertig hochgeladen!",

package/build/i18n/de.json.js.map

@@ -1 +1 @@
-{"version":3,"file":"de.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"de.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/i18n/de.json.mjs

@@ -35,6 +35,11 @@ var de = {
 	"neptune.Summary.statusDone": "Schritt erledigt",
 	"neptune.Summary.statusNotDone": "Schritt noch zu erledigen",
 	"neptune.Summary.statusPending": "Schritt ausstehend",
+	"neptune.Table.actionHeader": "Aktion",
+	"neptune.Table.emptyData": "Keine Ergebnisse gefunden",
+	"neptune.Table.loaded": "Tabellendaten wurden geladen",
+	"neptune.Table.loading": "Tabellendaten werden geladen",
+	"neptune.Table.refreshPage": "Seite aktualisieren",
 	"neptune.Upload.csButtonText": "Eine andere Datei hochladen?",
 	"neptune.Upload.csFailureText": "Hochladen fehlgeschlagen. Bitte versuche es erneut",
 	"neptune.Upload.csSuccessText": "Fertig hochgeladen!",

package/build/i18n/de.json.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"de.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"de.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/iconButton/IconButton.js

@@ -0,0 +1,41 @@
+'use strict';
+
+var React = require('react');
+var PrimitiveButton = require('../primitives/PrimitiveButton/src/PrimitiveButton.js');
+var PrimitiveAnchor = require('../primitives/PrimitiveAnchor/src/PrimitiveAnchor.js');
+var Circle = require('../common/circle/Circle.js');
+var clsx = require('clsx');
+var jsxRuntime = require('react/jsx-runtime');
+
+const IconButton = /*#__PURE__*/React.forwardRef(function IconButton({
+  size = 48,
+  href = '#',
+  children,
+  className,
+  priority = 'primary',
+  type = 'default',
+  ...props
+}, ref) {
+  const isLink = href !== '#';
+  return (
+    /*#__PURE__*/
+    // @ts-expect-error it's either link or `button` element so it has `onClick` / `href`
+    jsxRuntime.jsx(Circle, {
+      ref: ref,
+      as: isLink ? PrimitiveAnchor : PrimitiveButton,
+      size: size,
+      fixedSize: true,
+      className: clsx.clsx('np-icon-button', `np-icon-button-${priority}-${type}`, {
+        disabled: props.disabled
+      }, className),
+      ...(isLink ? {
+        href
+      } : {}),
+      ...props,
+      children: children
+    })
+  );
+});
+
+module.exports = IconButton;
+//# sourceMappingURL=IconButton.js.map

package/build/iconButton/IconButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.js","sources":["../../src/iconButton/IconButton.tsx"],"sourcesContent":["import { AnchorHTMLAttributes, ButtonHTMLAttributes, forwardRef, HTMLAttributes } from 'react';\nimport { PrimitiveAnchor, PrimitiveButton } from '../primitives';\nimport Circle from '../common/circle';\nimport { clsx } from 'clsx';\n\nexport type Props = {\n  size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;\n  priority?: 'primary' | 'secondary' | 'tertiary' | 'minimal';\n  type?: 'default' | 'negative';\n  'data-testid'?: string;\n} & Pick<AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'target' | 'onClick'> &\n  Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'disabled'> &\n  Pick<HTMLAttributes<HTMLDivElement>, 'className' | 'role' | 'children' | 'aria-label'>;\n\nconst IconButton = forwardRef(function IconButton(\n  {\n    size = 48,\n    href = '#',\n    children,\n    className,\n    priority = 'primary',\n    type = 'default',\n    ...props\n  }: Props,\n  ref,\n) {\n  const isLink = href !== '#';\n  return (\n    // @ts-expect-error it's either link or `button` element so it has `onClick` / `href`\n    <Circle\n      ref={ref}\n      as={isLink ? PrimitiveAnchor : PrimitiveButton}\n      size={size}\n      fixedSize\n      className={clsx(\n        'np-icon-button',\n        `np-icon-button-${priority}-${type}`,\n        {\n          disabled: props.disabled,\n        },\n        className,\n      )}\n      {...(isLink ? { href } : {})}\n      {...props}\n    >\n      {children}\n    </Circle>\n  );\n});\n\nexport default IconButton;\n"],"names":["IconButton","forwardRef","size","href","children","className","priority","type","props","ref","isLink","_jsx","Circle","as","PrimitiveAnchor","PrimitiveButton","fixedSize","clsx","disabled"],"mappings":";;;;;;;;;AAcA,MAAMA,UAAU,gBAAGC,gBAAU,CAAC,SAASD,UAAUA,CAC/C;AACEE,EAAAA,IAAI,GAAG,EAAE;AACTC,EAAAA,IAAI,GAAG,GAAG;EACVC,QAAQ;EACRC,SAAS;AACTC,EAAAA,QAAQ,GAAG,SAAS;AACpBC,EAAAA,IAAI,GAAG,SAAS;EAChB,GAAGC,KAAAA;AAAK,CACF,EACRC,GAAG,EAAA;AAEH,EAAA,MAAMC,MAAM,GAAGP,IAAI,KAAK,GAAG,CAAA;AAC3B,EAAA;AAAA;AACE;AACAQ,IAAAA,cAAA,CAACC,MAAM,EAAA;AACLH,MAAAA,GAAG,EAAEA,GAAI;AACTI,MAAAA,EAAE,EAAEH,MAAM,GAAGI,eAAe,GAAGC,eAAgB;AAC/Cb,MAAAA,IAAI,EAAEA,IAAK;MACXc,SAAS,EAAA,IAAA;MACTX,SAAS,EAAEY,SAAI,CACb,gBAAgB,EAChB,kBAAkBX,QAAQ,CAAA,CAAA,EAAIC,IAAI,CAAA,CAAE,EACpC;QACEW,QAAQ,EAAEV,KAAK,CAACU,QAAAA;OACjB,EACDb,SAAS,CACT;AAAA,MAAA,IACGK,MAAM,GAAG;AAAEP,QAAAA,IAAAA;OAAM,GAAG,EAAE,CAAA;AAAA,MAAA,GACvBK,KAAK;AAAAJ,MAAAA,QAAA,EAERA,QAAAA;KACK,CAAA;AAAC,IAAA;AAEb,CAAC;;;;"}

package/build/iconButton/IconButton.mjs

@@ -0,0 +1,39 @@
+import { forwardRef } from 'react';
+import PrimitiveButton from '../primitives/PrimitiveButton/src/PrimitiveButton.mjs';
+import PrimitiveAnchor from '../primitives/PrimitiveAnchor/src/PrimitiveAnchor.mjs';
+import Circle from '../common/circle/Circle.mjs';
+import { clsx } from 'clsx';
+import { jsx } from 'react/jsx-runtime';
+
+const IconButton = /*#__PURE__*/forwardRef(function IconButton({
+  size = 48,
+  href = '#',
+  children,
+  className,
+  priority = 'primary',
+  type = 'default',
+  ...props
+}, ref) {
+  const isLink = href !== '#';
+  return (
+    /*#__PURE__*/
+    // @ts-expect-error it's either link or `button` element so it has `onClick` / `href`
+    jsx(Circle, {
+      ref: ref,
+      as: isLink ? PrimitiveAnchor : PrimitiveButton,
+      size: size,
+      fixedSize: true,
+      className: clsx('np-icon-button', `np-icon-button-${priority}-${type}`, {
+        disabled: props.disabled
+      }, className),
+      ...(isLink ? {
+        href
+      } : {}),
+      ...props,
+      children: children
+    })
+  );
+});
+
+export { IconButton as default };
+//# sourceMappingURL=IconButton.mjs.map

package/build/iconButton/IconButton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.mjs","sources":["../../src/iconButton/IconButton.tsx"],"sourcesContent":["import { AnchorHTMLAttributes, ButtonHTMLAttributes, forwardRef, HTMLAttributes } from 'react';\nimport { PrimitiveAnchor, PrimitiveButton } from '../primitives';\nimport Circle from '../common/circle';\nimport { clsx } from 'clsx';\n\nexport type Props = {\n  size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;\n  priority?: 'primary' | 'secondary' | 'tertiary' | 'minimal';\n  type?: 'default' | 'negative';\n  'data-testid'?: string;\n} & Pick<AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'target' | 'onClick'> &\n  Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'disabled'> &\n  Pick<HTMLAttributes<HTMLDivElement>, 'className' | 'role' | 'children' | 'aria-label'>;\n\nconst IconButton = forwardRef(function IconButton(\n  {\n    size = 48,\n    href = '#',\n    children,\n    className,\n    priority = 'primary',\n    type = 'default',\n    ...props\n  }: Props,\n  ref,\n) {\n  const isLink = href !== '#';\n  return (\n    // @ts-expect-error it's either link or `button` element so it has `onClick` / `href`\n    <Circle\n      ref={ref}\n      as={isLink ? PrimitiveAnchor : PrimitiveButton}\n      size={size}\n      fixedSize\n      className={clsx(\n        'np-icon-button',\n        `np-icon-button-${priority}-${type}`,\n        {\n          disabled: props.disabled,\n        },\n        className,\n      )}\n      {...(isLink ? { href } : {})}\n      {...props}\n    >\n      {children}\n    </Circle>\n  );\n});\n\nexport default IconButton;\n"],"names":["IconButton","forwardRef","size","href","children","className","priority","type","props","ref","isLink","_jsx","Circle","as","PrimitiveAnchor","PrimitiveButton","fixedSize","clsx","disabled"],"mappings":";;;;;;;AAcA,MAAMA,UAAU,gBAAGC,UAAU,CAAC,SAASD,UAAUA,CAC/C;AACEE,EAAAA,IAAI,GAAG,EAAE;AACTC,EAAAA,IAAI,GAAG,GAAG;EACVC,QAAQ;EACRC,SAAS;AACTC,EAAAA,QAAQ,GAAG,SAAS;AACpBC,EAAAA,IAAI,GAAG,SAAS;EAChB,GAAGC,KAAAA;AAAK,CACF,EACRC,GAAG,EAAA;AAEH,EAAA,MAAMC,MAAM,GAAGP,IAAI,KAAK,GAAG,CAAA;AAC3B,EAAA;AAAA;AACE;AACAQ,IAAAA,GAAA,CAACC,MAAM,EAAA;AACLH,MAAAA,GAAG,EAAEA,GAAI;AACTI,MAAAA,EAAE,EAAEH,MAAM,GAAGI,eAAe,GAAGC,eAAgB;AAC/Cb,MAAAA,IAAI,EAAEA,IAAK;MACXc,SAAS,EAAA,IAAA;MACTX,SAAS,EAAEY,IAAI,CACb,gBAAgB,EAChB,kBAAkBX,QAAQ,CAAA,CAAA,EAAIC,IAAI,CAAA,CAAE,EACpC;QACEW,QAAQ,EAAEV,KAAK,CAACU,QAAAA;OACjB,EACDb,SAAS,CACT;AAAA,MAAA,IACGK,MAAM,GAAG;AAAEP,QAAAA,IAAAA;OAAM,GAAG,EAAE,CAAA;AAAA,MAAA,GACvBK,KAAK;AAAAJ,MAAAA,QAAA,EAERA,QAAAA;KACK,CAAA;AAAC,IAAA;AAEb,CAAC;;;;"}

package/build/index.js

@@ -22,6 +22,7 @@ var Image = require('./image/Image.js');
 require('@transferwise/icons');
 var Body = require('./body/Body.js');
 var Button = require('./button/Button.js');
+var IconButton = require('./iconButton/IconButton.js');
 var Carousel = require('./carousel/Carousel.js');
 var Card = require('./card/Card.js');
 var Checkbox = require('./checkbox/Checkbox.js');
@@ -164,6 +165,7 @@ Object.defineProperty(exports, "Breakpoint", {
 exports.Image = Image.default;
 exports.Body = Body;
 exports.Button = Button;
+exports.IconButton = IconButton;
 exports.Carousel = Carousel;
 exports.Card = Card;
 exports.Checkbox = Checkbox;

package/build/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/index.mjs

@@ -20,6 +20,7 @@ export { default as Image } from './image/Image.mjs';
 import '@transferwise/icons';
 export { default as Body } from './body/Body.mjs';
 export { default as Button } from './button/Button.mjs';
+export { default as IconButton } from './iconButton/IconButton.mjs';
 export { default as Carousel } from './carousel/Carousel.mjs';
 export { default as Card } from './card/Card.mjs';
 export { default as Checkbox } from './checkbox/Checkbox.mjs';

package/build/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/main.css

@@ -535,6 +535,88 @@ div.critical-comms .critical-comms-body {
 .np-avatar-layout-horizontal-child {
   margin-left: calc(var(--np-avatar-offset) * -1);
 }
+.np-icon-button {
+  border: none;
+}
+.np-icon-button-tertiary-default {
+  color: var(--color-interactive-primary);
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--color-background-neutral);
+}
+.np-icon-button-tertiary-default:not(.disabled):not(:disabled):hover {
+  background-color: var(--color-background-neutral-hover);
+}
+.np-icon-button-tertiary-default:not(.disabled):not(:disabled):active {
+  background-color: var(--color-background-neutral-active);
+}
+.np-icon-button-primary-default {
+  color: var(--color-interactive-control);
+  background-color: #00a2dd;
+  background-color: var(--color-interactive-accent);
+}
+.np-icon-button-primary-default:not(.disabled):not(:disabled):hover {
+  background-color: #008fc9;
+  background-color: var(--color-interactive-accent-hover);
+}
+.np-icon-button-primary-default:not(.disabled):not(:disabled):active {
+  background-color: #0081ba;
+  background-color: var(--color-interactive-accent-active);
+}
+.np-icon-button-primary-negative {
+  color: var(--color-contrast-overlay);
+  background-color: var(--color-sentiment-negative-primary);
+}
+.np-icon-button-primary-negative:not(.disabled):not(:disabled):hover {
+  background-color: var(--color-sentiment-negative-primary-hover);
+}
+.np-icon-button-primary-negative:not(.disabled):not(:disabled):active {
+  background-color: var(--color-sentiment-negative-primary-active);
+}
+.np-theme-personal--bright-green .np-icon-button-primary-negative {
+  color: var(--color-white);
+}
+.np-icon-button-minimal-default {
+  color: var(--color-interactive-primary);
+  background-color: #ffffff;
+  background-color: var(--color-background-screen);
+  background-color: transparent;
+}
+.np-icon-button-minimal-default:not(.disabled):not(:disabled):hover {
+  background-color: var(--color-background-screen-hover);
+}
+.np-icon-button-minimal-default:not(.disabled):not(:disabled):active {
+  background-color: var(--color-background-screen-active);
+}
+.np-icon-button-secondary-default {
+  color: var(--color-interactive-primary);
+  background-color: var(--color-interactive-neutral);
+}
+.np-icon-button-secondary-default:not(.disabled):not(:disabled):hover {
+  background-color: var(--color-interactive-neutral-hover);
+}
+.np-icon-button-secondary-default:not(.disabled):not(:disabled):active {
+  background-color: var(--color-interactive-neutral-active);
+}
+.np-theme-personal--bright-green .np-icon-button-secondary-default,
+.np-theme-personal--forest-green .np-icon-button-secondary-default {
+  color: var(--color-interactive-control);
+}
+.np-icon-button-secondary-negative {
+  color: var(--color-sentiment-negative-primary);
+  background-color: var(--color-sentiment-negative-secondary);
+}
+.np-icon-button-secondary-negative:not(.disabled):not(:disabled):hover {
+  background-color: var(--color-sentiment-negative-secondary-hover);
+}
+.np-icon-button-secondary-negative:not(.disabled):not(:disabled):active {
+  background-color: var(--color-sentiment-negative-secondary-active);
+}
+.np-theme-personal--bright-green .np-icon-button-secondary-negative {
+  color: var(--color-white);
+}
+.np-theme-personal--forest-green .np-icon-button-secondary-negative {
+  color: var(--color-contrast-overlay);
+}
 .tw-badge {
   position: relative;
   display: inline-block;
@@ -2201,38 +2283,6 @@ button.np-option {
   outline: var(--ring-outline-color) solid var(--ring-outline-width);
   outline-offset: var(--ring-outline-offset);
 }
-.np-back-button {
-  color: #00a2dd;
-  color: var(--color-interactive-accent);
-  display: flex !important;
-}
-.np-back-button:hover {
-  color: #008fc9;
-  color: var(--color-interactive-accent-hover);
-}
-.np-back-button:active {
-  color: #0081ba;
-  color: var(--color-interactive-accent-active);
-}
-.np-theme-personal .np-back-button {
-  color: #37517e;
-  color: var(--color-content-primary);
-}
-.np-theme-personal .np-back-button:hover {
-  color: var(--color-content-primary-hover);
-}
-.np-theme-personal .np-back-button:active {
-  color: var(--color-content-primary-active);
-}
-.np-theme-personal .np-back-button .tw-icon {
-  color: var(--color-interactive-primary);
-}
-.np-theme-personal .np-back-button .tw-icon:hover {
-  color: var(--color-interactive-primary-hover);
-}
-.np-theme-personal .np-back-button .tw-icon:active {
-  color: var(--color-interactive-primary-active);
-}
 .np-flow-navigation {
   width: 100%;
   min-height: 97px;
@@ -4950,6 +5000,10 @@ html:not([dir="rtl"]) .np-navigation-option {
   padding-left: calc(var(--size-24) + var(--size-8));
   padding-right: 0;
 }
+.np-summary__description-icon {
+  margin-top: 4px;
+  margin-top: var(--size-4);
+}
 .np-summary__action {
   margin-top: 4px;
   margin-top: var(--size-4);

package/build/primitives/PrimitiveAnchor/src/PrimitiveAnchor.js

@@ -0,0 +1,83 @@
+'use strict';
+
+var React = require('react');
+var clsx = require('clsx');
+var jsxRuntime = require('react/jsx-runtime');
+
+const PrimitiveAnchor = /*#__PURE__*/React.forwardRef(({
+  children,
+  className,
+  href,
+  id,
+  disabled = false,
+  testId,
+  onClick,
+  onFocus,
+  onBlur,
+  onMouseEnter,
+  onMouseLeave,
+  onKeyDown,
+  ...props
+}, ref) => {
+  const anchorClasses = clsx.clsx('wds-Anchor', {
+    'wds-Anchor--disabled': disabled
+  }, className);
+  const handleClick = React.useCallback(event => {
+    if (disabled) {
+      event.preventDefault();
+    } else {
+      onClick?.(event);
+    }
+  }, [disabled, onClick]);
+  const handleFocus = React.useCallback(event => {
+    onFocus?.(event);
+  }, [onFocus]);
+  const handleBlur = React.useCallback(event => {
+    onBlur?.(event);
+  }, [onBlur]);
+  const handleMouseEnter = React.useCallback(event => {
+    onMouseEnter?.(event);
+  }, [onMouseEnter]);
+  const handleMouseLeave = React.useCallback(event => {
+    onMouseLeave?.(event);
+  }, [onMouseLeave]);
+  const handleKeyDown = React.useCallback(event => {
+    onKeyDown?.(event);
+  }, [onKeyDown]);
+  /**
+   * The following props are set to handle the `disabled` state for the link:
+   *
+   * - `aria-disabled`: Exposes the link as disabled to assistive technologies.
+   * - `href`: Removed when `disabled` is true to prevent navigation.
+   * - `role`: Set to 'link' when `disabled` is true to ensure the element
+   *    is still exposed as a link.
+   *
+   * For more details, refer to Scott O'Hara's article on disabling links:
+   * https://www.scottohara.me/blog/2021/05/28/disabled-links.html
+   */
+  const anchorProps = {
+    'aria-disabled': disabled,
+    className: anchorClasses,
+    'data-testid': testId,
+    href: disabled ? undefined : href,
+    id,
+    ref,
+    role: disabled ? 'link' : undefined,
+    rel: props.target === '_blank' ? 'noopener noreferrer' : undefined,
+    onClick: handleClick,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    onKeyDown: handleKeyDown,
+    ...props
+  };
+  return /*#__PURE__*/jsxRuntime.jsx("a", {
+    ...anchorProps,
+    children: children
+  });
+});
+PrimitiveAnchor.displayName = 'PrimitiveAnchor';
+
+module.exports = PrimitiveAnchor;
+//# sourceMappingURL=PrimitiveAnchor.js.map

package/build/primitives/PrimitiveAnchor/src/PrimitiveAnchor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PrimitiveAnchor.js","sources":["../../../../src/primitives/PrimitiveAnchor/src/PrimitiveAnchor.tsx"],"sourcesContent":["import React, { forwardRef, useCallback } from 'react';\nimport { clsx } from 'clsx';\nimport type { PrimitiveAnchorProps } from '..';\n\n/**\n * The Primitive `PrimitiveAnchor` component is customisable link element that can be\n * used in various parts of the Wise Design System internally. It supports\n * different states such as disabled and provides event handlers for common\n * interactions like click, focus, blur, mouse enter, mouse leave, and key down.\n *\n * @see {@link PrimitiveAnchor} for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/primitive-anchor--docs|Storybook Wise Design}\n */\nconst PrimitiveAnchor = forwardRef<HTMLAnchorElement, PrimitiveAnchorProps>(\n  (\n    {\n      children,\n      className,\n      href,\n      id,\n      disabled = false,\n      testId,\n      onClick,\n      onFocus,\n      onBlur,\n      onMouseEnter,\n      onMouseLeave,\n      onKeyDown,\n      ...props\n    },\n    ref,\n  ) => {\n    const anchorClasses = clsx(\n      'wds-Anchor',\n      {\n        'wds-Anchor--disabled': disabled,\n      },\n      className,\n    );\n\n    const handleClick = useCallback(\n      (event: React.MouseEvent<HTMLAnchorElement>) => {\n        if (disabled) {\n          event.preventDefault();\n        } else {\n          onClick?.(event);\n        }\n      },\n      [disabled, onClick],\n    );\n\n    const handleFocus = useCallback(\n      (event: React.FocusEvent<HTMLAnchorElement>) => {\n        onFocus?.(event);\n      },\n      [onFocus],\n    );\n\n    const handleBlur = useCallback(\n      (event: React.FocusEvent<HTMLAnchorElement>) => {\n        onBlur?.(event);\n      },\n      [onBlur],\n    );\n\n    const handleMouseEnter = useCallback(\n      (event: React.MouseEvent<HTMLAnchorElement>) => {\n        onMouseEnter?.(event);\n      },\n      [onMouseEnter],\n    );\n\n    const handleMouseLeave = useCallback(\n      (event: React.MouseEvent<HTMLAnchorElement>) => {\n        onMouseLeave?.(event);\n      },\n      [onMouseLeave],\n    );\n\n    const handleKeyDown = useCallback(\n      (event: React.KeyboardEvent<HTMLAnchorElement>) => {\n        onKeyDown?.(event);\n      },\n      [onKeyDown],\n    );\n\n    /**\n     * The following props are set to handle the `disabled` state for the link:\n     *\n     * - `aria-disabled`: Exposes the link as disabled to assistive technologies.\n     * - `href`: Removed when `disabled` is true to prevent navigation.\n     * - `role`: Set to 'link' when `disabled` is true to ensure the element\n     *    is still exposed as a link.\n     *\n     * For more details, refer to Scott O'Hara's article on disabling links:\n     * https://www.scottohara.me/blog/2021/05/28/disabled-links.html\n     */\n    const anchorProps = {\n      'aria-disabled': disabled,\n      className: anchorClasses,\n      'data-testid': testId,\n      href: disabled ? undefined : href,\n      id,\n      ref,\n      role: disabled ? 'link' : undefined,\n      rel: props.target === '_blank' ? 'noopener noreferrer' : undefined,\n      onClick: handleClick,\n      onFocus: handleFocus,\n      onBlur: handleBlur,\n      onMouseEnter: handleMouseEnter,\n      onMouseLeave: handleMouseLeave,\n      onKeyDown: handleKeyDown,\n      ...props,\n    };\n\n    return <a {...anchorProps}>{children}</a>;\n  },\n);\n\nPrimitiveAnchor.displayName = 'PrimitiveAnchor';\n\nexport default PrimitiveAnchor;\n"],"names":["PrimitiveAnchor","forwardRef","children","className","href","id","disabled","testId","onClick","onFocus","onBlur","onMouseEnter","onMouseLeave","onKeyDown","props","ref","anchorClasses","clsx","handleClick","useCallback","event","preventDefault","handleFocus","handleBlur","handleMouseEnter","handleMouseLeave","handleKeyDown","anchorProps","undefined","role","rel","target","_jsx","displayName"],"mappings":";;;;;;AAaA,MAAMA,eAAe,gBAAGC,gBAAU,CAChC,CACE;EACEC,QAAQ;EACRC,SAAS;EACTC,IAAI;EACJC,EAAE;AACFC,EAAAA,QAAQ,GAAG,KAAK;EAChBC,MAAM;EACNC,OAAO;EACPC,OAAO;EACPC,MAAM;EACNC,YAAY;EACZC,YAAY;EACZC,SAAS;EACT,GAAGC,KAAAA;CACJ,EACDC,GAAG,KACD;AACF,EAAA,MAAMC,aAAa,GAAGC,SAAI,CACxB,YAAY,EACZ;AACE,IAAA,sBAAsB,EAAEX,QAAAA;GACzB,EACDH,SAAS,CACV,CAAA;AAED,EAAA,MAAMe,WAAW,GAAGC,iBAAW,CAC5BC,KAA0C,IAAI;AAC7C,IAAA,IAAId,QAAQ,EAAE;MACZc,KAAK,CAACC,cAAc,EAAE,CAAA;AACxB,KAAC,MAAM;MACLb,OAAO,GAAGY,KAAK,CAAC,CAAA;AAClB,KAAA;AACF,GAAC,EACD,CAACd,QAAQ,EAAEE,OAAO,CAAC,CACpB,CAAA;AAED,EAAA,MAAMc,WAAW,GAAGH,iBAAW,CAC5BC,KAA0C,IAAI;IAC7CX,OAAO,GAAGW,KAAK,CAAC,CAAA;AAClB,GAAC,EACD,CAACX,OAAO,CAAC,CACV,CAAA;AAED,EAAA,MAAMc,UAAU,GAAGJ,iBAAW,CAC3BC,KAA0C,IAAI;IAC7CV,MAAM,GAAGU,KAAK,CAAC,CAAA;AACjB,GAAC,EACD,CAACV,MAAM,CAAC,CACT,CAAA;AAED,EAAA,MAAMc,gBAAgB,GAAGL,iBAAW,CACjCC,KAA0C,IAAI;IAC7CT,YAAY,GAAGS,KAAK,CAAC,CAAA;AACvB,GAAC,EACD,CAACT,YAAY,CAAC,CACf,CAAA;AAED,EAAA,MAAMc,gBAAgB,GAAGN,iBAAW,CACjCC,KAA0C,IAAI;IAC7CR,YAAY,GAAGQ,KAAK,CAAC,CAAA;AACvB,GAAC,EACD,CAACR,YAAY,CAAC,CACf,CAAA;AAED,EAAA,MAAMc,aAAa,GAAGP,iBAAW,CAC9BC,KAA6C,IAAI;IAChDP,SAAS,GAAGO,KAAK,CAAC,CAAA;AACpB,GAAC,EACD,CAACP,SAAS,CAAC,CACZ,CAAA;AAED;;;;;;;;;;AAUG;AACH,EAAA,MAAMc,WAAW,GAAG;AAClB,IAAA,eAAe,EAAErB,QAAQ;AACzBH,IAAAA,SAAS,EAAEa,aAAa;AACxB,IAAA,aAAa,EAAET,MAAM;AACrBH,IAAAA,IAAI,EAAEE,QAAQ,GAAGsB,SAAS,GAAGxB,IAAI;IACjCC,EAAE;IACFU,GAAG;AACHc,IAAAA,IAAI,EAAEvB,QAAQ,GAAG,MAAM,GAAGsB,SAAS;IACnCE,GAAG,EAAEhB,KAAK,CAACiB,MAAM,KAAK,QAAQ,GAAG,qBAAqB,GAAGH,SAAS;AAClEpB,IAAAA,OAAO,EAAEU,WAAW;AACpBT,IAAAA,OAAO,EAAEa,WAAW;AACpBZ,IAAAA,MAAM,EAAEa,UAAU;AAClBZ,IAAAA,YAAY,EAAEa,gBAAgB;AAC9BZ,IAAAA,YAAY,EAAEa,gBAAgB;AAC9BZ,IAAAA,SAAS,EAAEa,aAAa;IACxB,GAAGZ,KAAAA;GACJ,CAAA;AAED,EAAA,oBAAOkB,cAAA,CAAA,GAAA,EAAA;AAAA,IAAA,GAAOL,WAAW;AAAAzB,IAAAA,QAAA,EAAGA,QAAAA;AAAQ,GAAI,CAAC,CAAA;AAC3C,CAAC,EACF;AAEDF,eAAe,CAACiC,WAAW,GAAG,iBAAiB;;;;"}