@transferwise/components 46.137.1 → 46.139.0

package/build/flowNavigation/FlowNavigation.js

@@ -88,13 +88,11 @@ const FlowNavigation = ({
           className: "m-x-1"
         }), closeButton]
       }),
-      bottomContent: !done && (steps.length > 0 ? /*#__PURE__*/jsxRuntime.jsx(Stepper.default, {
+      bottomContent: !done && steps.length > 0 ? /*#__PURE__*/jsxRuntime.jsx(Stepper.default, {
         activeStep: activeStep,
         steps: steps,
         className: clsx.clsx('np-flow-navigation__stepper')
-      }) : /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "np-flow-navigation__stepper"
-      })),
+      }) : null,
       layout: !screenLg ? layouts.Layout.VERTICAL : layouts.Layout.HORIZONTAL
     })
   });

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

package/build/flowNavigation/FlowNavigation.mjs

@@ -84,13 +84,11 @@ const FlowNavigation = ({
           className: "m-x-1"
         }), closeButton]
       }),
-      bottomContent: !done && (steps.length > 0 ? /*#__PURE__*/jsx(Stepper, {
+      bottomContent: !done && steps.length > 0 ? /*#__PURE__*/jsx(Stepper, {
         activeStep: activeStep,
         steps: steps,
         className: clsx('np-flow-navigation__stepper')
-      }) : /*#__PURE__*/jsx("div", {
-        className: "np-flow-navigation__stepper"
-      })),
+      }) : null,
       layout: !screenLg ? Layout.VERTICAL : Layout.HORIZONTAL
     })
   });

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

package/build/i18n/uk.json

@@ -16,6 +16,8 @@
   "neptune.DateLookup.selected": "вибрано",
   "neptune.DateLookup.twentyYears": "20 років",
   "neptune.DateLookup.year": "рік",
+  "neptune.Expander.collapseAriaLabel": "Згорнути",
+  "neptune.Expander.expandAriaLabel": "Розгорнути",
   "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Вкажіть валюту / країну",
   "neptune.ExpressiveMoneyInput.currency.select.currency": "Виберіть валюту",
   "neptune.FlowNavigation.back": "назад до попереднього кроку",

package/build/i18n/uk.json.js

@@ -20,6 +20,8 @@ var uk = {
 	"neptune.DateLookup.selected": "вибрано",
 	"neptune.DateLookup.twentyYears": "20 років",
 	"neptune.DateLookup.year": "рік",
+	"neptune.Expander.collapseAriaLabel": "Згорнути",
+	"neptune.Expander.expandAriaLabel": "Розгорнути",
 	"neptune.ExpressiveMoneyInput.currency.search.placeholder": "Вкажіть валюту / країну",
 	"neptune.ExpressiveMoneyInput.currency.select.currency": "Виберіть валюту",
 	"neptune.FlowNavigation.back": "назад до попереднього кроку",

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

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

package/build/i18n/uk.json.mjs

@@ -16,6 +16,8 @@ var uk = {
 	"neptune.DateLookup.selected": "вибрано",
 	"neptune.DateLookup.twentyYears": "20 років",
 	"neptune.DateLookup.year": "рік",
+	"neptune.Expander.collapseAriaLabel": "Згорнути",
+	"neptune.Expander.expandAriaLabel": "Розгорнути",
 	"neptune.ExpressiveMoneyInput.currency.search.placeholder": "Вкажіть валюту / країну",
 	"neptune.ExpressiveMoneyInput.currency.select.currency": "Виберіть валюту",
 	"neptune.FlowNavigation.back": "назад до попереднього кроку",

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

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

package/build/loader/Loader.js

@@ -5,12 +5,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var componentsTheming = require('@wise/components-theming');
 var clsx = require('clsx');
 var React = require('react');
+var Body = require('../body/Body.js');
 require('../common/theme.js');
 require('../common/direction.js');
 require('../common/propsValues/control.js');
 require('../common/propsValues/breakpoint.js');
 var size = require('../common/propsValues/size.js');
-require('../common/propsValues/typography.js');
+var typography = require('../common/propsValues/typography.js');
 require('../common/propsValues/width.js');
 require('../common/propsValues/type.js');
 require('../common/propsValues/dateMode.js');
@@ -34,6 +35,7 @@ const Loader = ({
   small = false,
   size: size$1 = size.Size.MEDIUM,
   displayInstantly = false,
+  label,
   classNames = {},
   ...restProps
 }) => {
@@ -64,11 +66,19 @@ const Loader = ({
     console.warn('Loader is forbidden to use with Forest Green theme. Check the https://wise.design/components/screen-loader for more info.');
     return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {});
   }
-  return /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: clsx.clsx(style('tw-loader'), style(`tw-loader--${supportedSize}`), {
-      'tw-loader--visible': hasDebounced
-    }),
-    "data-testid": restProps['data-testid']
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: style('tw-loader'),
+    "data-testid": restProps['data-testid'],
+    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+      className: clsx.clsx(style('tw-loader-asset'), style(`tw-loader-asset--${supportedSize}`), {
+        'tw-loader-asset--visible': hasDebounced
+      })
+    }), label && hasDebounced && /*#__PURE__*/jsxRuntime.jsx(Body.default, {
+      type: typography.Typography.BODY_LARGE_BOLD,
+      as: "span",
+      className: style('text-secondary'),
+      children: label
+    })]
   });
 };
 const getSupportedSize = size$1 => {

package/build/loader/Loader.js.map

@@ -1 +1 @@
-{"version":3,"file":"Loader.js","sources":["../../src/loader/Loader.tsx"],"sourcesContent":["import { useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { useEffect, useState } from 'react';\n\nimport { Size, SizeExtraSmall, SizeSmall, SizeMedium, SizeLarge, SizeExtraLarge } from '../common';\n\n// TODO: We gracefully deprecated xs, lg and xl -- remove these as part of a future breaking change to this component\ntype DeprecatedSize = SizeExtraSmall | SizeLarge | SizeExtraLarge;\n\ntype SizeType = SizeSmall | SizeMedium;\n\nexport type LoaderProps = {\n  /**\n   * @deprecated Use `size` instead.\n   * @default false\n   */\n  small?: boolean;\n  /** @default 'md' */\n  size?: SizeType | DeprecatedSize;\n  /** @default false */\n  displayInstantly?: boolean;\n  // TODO: refactor in favor of prop from `CommonProps` type\n  /** @default {} */\n  classNames?: Record<string, string>;\n  'data-testid'?: string;\n};\n\n/**\n * Loader component\n *\n * Docs link: https://transferwise.github.io/neptune-web/components/progress/Loader\n *\n * @param root0\n * @param root0.small\n * @param root0.size\n * @param root0.classNames\n */\nconst Loader = ({\n  small = false,\n  size = Size.MEDIUM,\n  displayInstantly = false,\n  classNames = {},\n  ...restProps\n}: LoaderProps) => {\n  const { theme } = useTheme();\n  const [hasDebounced, setHasDebounced] = useState(displayInstantly);\n\n  useEffect(() => {\n    let cancelled: boolean;\n    let timeout: ReturnType<typeof setTimeout> | undefined;\n\n    if (!displayInstantly) {\n      timeout = setTimeout(() => {\n        if (!cancelled) {\n          setHasDebounced(true);\n        }\n      }, 1000);\n    }\n\n    return () => {\n      cancelled = true;\n\n      clearTimeout(timeout);\n    };\n  }, []);\n\n  const style = (className: string): string => classNames[className] || className;\n  const legacySize: SizeType | DeprecatedSize = small ? Size.SMALL : size;\n  const supportedSize = getSupportedSize(legacySize);\n\n  if (theme === 'forest-green') {\n    // eslint-disable-next-line no-console\n    console.warn(\n      'Loader is forbidden to use with Forest Green theme. Check the https://wise.design/components/screen-loader for more info.',\n    );\n    return <></>;\n  }\n\n  return (\n    <div\n      className={clsx(style('tw-loader'), style(`tw-loader--${supportedSize}`), {\n        'tw-loader--visible': hasDebounced,\n      })}\n      data-testid={restProps['data-testid']}\n    />\n  );\n};\n\nconst getSupportedSize = (size: SizeType | DeprecatedSize): SizeType => {\n  switch (size) {\n    case Size.SMALL:\n    case Size.EXTRA_SMALL:\n      return Size.SMALL;\n\n    case Size.EXTRA_LARGE:\n    case Size.LARGE:\n    case Size.MEDIUM:\n    default:\n      return Size.MEDIUM;\n  }\n};\n\nexport default Loader;\n"],"names":["Loader","small","size","Size","MEDIUM","displayInstantly","classNames","restProps","theme","useTheme","hasDebounced","setHasDebounced","useState","useEffect","cancelled","timeout","setTimeout","clearTimeout","style","className","legacySize","SMALL","supportedSize","getSupportedSize","console","warn","_jsx","_Fragment","clsx","EXTRA_SMALL","EXTRA_LARGE","LARGE"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCA,MAAMA,MAAM,GAAGA,CAAC;AACdC,EAAAA,KAAK,GAAG,KAAK;QACbC,MAAI,GAAGC,SAAI,CAACC,MAAM;AAClBC,EAAAA,gBAAgB,GAAG,KAAK;EACxBC,UAAU,GAAG,EAAE;EACf,GAAGC;AAAS,CACA,KAAI;EAChB,MAAM;AAAEC,IAAAA;GAAO,GAAGC,0BAAQ,EAAE;EAC5B,MAAM,CAACC,YAAY,EAAEC,eAAe,CAAC,GAAGC,cAAQ,CAACP,gBAAgB,CAAC;AAElEQ,EAAAA,eAAS,CAAC,MAAK;AACb,IAAA,IAAIC,SAAkB;AACtB,IAAA,IAAIC,OAAkD;IAEtD,IAAI,CAACV,gBAAgB,EAAE;MACrBU,OAAO,GAAGC,UAAU,CAAC,MAAK;QACxB,IAAI,CAACF,SAAS,EAAE;UACdH,eAAe,CAAC,IAAI,CAAC;AACvB,QAAA;MACF,CAAC,EAAE,IAAI,CAAC;AACV,IAAA;AAEA,IAAA,OAAO,MAAK;AACVG,MAAAA,SAAS,GAAG,IAAI;MAEhBG,YAAY,CAACF,OAAO,CAAC;IACvB,CAAC;EACH,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMG,KAAK,GAAIC,SAAiB,IAAab,UAAU,CAACa,SAAS,CAAC,IAAIA,SAAS;EAC/E,MAAMC,UAAU,GAA8BnB,KAAK,GAAGE,SAAI,CAACkB,KAAK,GAAGnB,MAAI;AACvE,EAAA,MAAMoB,aAAa,GAAGC,gBAAgB,CAACH,UAAU,CAAC;EAElD,IAAIZ,KAAK,KAAK,cAAc,EAAE;AAC5B;AACAgB,IAAAA,OAAO,CAACC,IAAI,CACV,2HAA2H,CAC5H;AACD,IAAA,oBAAOC,cAAA,CAAAC,mBAAA,EAAA,GAAK;AACd,EAAA;AAEA,EAAA,oBACED,cAAA,CAAA,KAAA,EAAA;AACEP,IAAAA,SAAS,EAAES,SAAI,CAACV,KAAK,CAAC,WAAW,CAAC,EAAEA,KAAK,CAAC,CAAA,WAAA,EAAcI,aAAa,CAAA,CAAE,CAAC,EAAE;AACxE,MAAA,oBAAoB,EAAEZ;AACvB,KAAA,CAAE;IACH,aAAA,EAAaH,SAAS,CAAC,aAAa;AAAE,GAAA,CACtC;AAEN;AAEA,MAAMgB,gBAAgB,GAAIrB,MAA+B,IAAc;AACrE,EAAA,QAAQA,MAAI;IACV,KAAKC,SAAI,CAACkB,KAAK;IACf,KAAKlB,SAAI,CAAC0B,WAAW;MACnB,OAAO1B,SAAI,CAACkB,KAAK;IAEnB,KAAKlB,SAAI,CAAC2B,WAAW;IACrB,KAAK3B,SAAI,CAAC4B,KAAK;IACf,KAAK5B,SAAI,CAACC,MAAM;AAChB,IAAA;MACE,OAAOD,SAAI,CAACC,MAAM;AACtB;AACF,CAAC;;;;"}
+{"version":3,"file":"Loader.js","sources":["../../src/loader/Loader.tsx"],"sourcesContent":["import { useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { ReactNode, useEffect, useState } from 'react';\n\nimport Body from '../body';\nimport { Size, SizeExtraSmall, SizeSmall, SizeMedium, SizeLarge, SizeExtraLarge } from '../common';\nimport { Typography } from '../common/propsValues/typography';\n\n// TODO: We gracefully deprecated xs, lg and xl -- remove these as part of a future breaking change to this component\ntype DeprecatedSize = SizeExtraSmall | SizeLarge | SizeExtraLarge;\n\ntype SizeType = SizeSmall | SizeMedium;\n\nexport type LoaderProps = {\n  /**\n   * @deprecated Use `size` instead.\n   * @default false\n   */\n  small?: boolean;\n  /** @default 'md' */\n  size?: SizeType | DeprecatedSize;\n  /** @default false */\n  displayInstantly?: boolean;\n  /** Optional label displayed below the loader */\n  label?: ReactNode;\n  // TODO: refactor in favor of prop from `CommonProps` type\n  /** @default {} */\n  classNames?: Record<string, string>;\n  'data-testid'?: string;\n};\n\n/**\n * Loader component\n *\n * Docs link: https://transferwise.github.io/neptune-web/components/progress/Loader\n *\n * @param root0\n * @param root0.small\n * @param root0.size\n * @param root0.classNames\n */\nconst Loader = ({\n  small = false,\n  size = Size.MEDIUM,\n  displayInstantly = false,\n  label,\n  classNames = {},\n  ...restProps\n}: LoaderProps) => {\n  const { theme } = useTheme();\n  const [hasDebounced, setHasDebounced] = useState(displayInstantly);\n\n  useEffect(() => {\n    let cancelled: boolean;\n    let timeout: ReturnType<typeof setTimeout> | undefined;\n\n    if (!displayInstantly) {\n      timeout = setTimeout(() => {\n        if (!cancelled) {\n          setHasDebounced(true);\n        }\n      }, 1000);\n    }\n\n    return () => {\n      cancelled = true;\n\n      clearTimeout(timeout);\n    };\n  }, []);\n\n  const style = (className: string): string => classNames[className] || className;\n  const legacySize: SizeType | DeprecatedSize = small ? Size.SMALL : size;\n  const supportedSize = getSupportedSize(legacySize);\n\n  if (theme === 'forest-green') {\n    // eslint-disable-next-line no-console\n    console.warn(\n      'Loader is forbidden to use with Forest Green theme. Check the https://wise.design/components/screen-loader for more info.',\n    );\n    return <></>;\n  }\n\n  return (\n    <div className={style('tw-loader')} data-testid={restProps['data-testid']}>\n      <div\n        className={clsx(style('tw-loader-asset'), style(`tw-loader-asset--${supportedSize}`), {\n          'tw-loader-asset--visible': hasDebounced,\n        })}\n      />\n      {label && hasDebounced && (\n        <Body type={Typography.BODY_LARGE_BOLD} as=\"span\" className={style('text-secondary')}>\n          {label}\n        </Body>\n      )}\n    </div>\n  );\n};\n\nconst getSupportedSize = (size: SizeType | DeprecatedSize): SizeType => {\n  switch (size) {\n    case Size.SMALL:\n    case Size.EXTRA_SMALL:\n      return Size.SMALL;\n\n    case Size.EXTRA_LARGE:\n    case Size.LARGE:\n    case Size.MEDIUM:\n    default:\n      return Size.MEDIUM;\n  }\n};\n\nexport default Loader;\n"],"names":["Loader","small","size","Size","MEDIUM","displayInstantly","label","classNames","restProps","theme","useTheme","hasDebounced","setHasDebounced","useState","useEffect","cancelled","timeout","setTimeout","clearTimeout","style","className","legacySize","SMALL","supportedSize","getSupportedSize","console","warn","_jsx","_Fragment","_jsxs","children","clsx","Body","type","Typography","BODY_LARGE_BOLD","as","EXTRA_SMALL","EXTRA_LARGE","LARGE"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA,MAAMA,MAAM,GAAGA,CAAC;AACdC,EAAAA,KAAK,GAAG,KAAK;QACbC,MAAI,GAAGC,SAAI,CAACC,MAAM;AAClBC,EAAAA,gBAAgB,GAAG,KAAK;EACxBC,KAAK;EACLC,UAAU,GAAG,EAAE;EACf,GAAGC;AAAS,CACA,KAAI;EAChB,MAAM;AAAEC,IAAAA;GAAO,GAAGC,0BAAQ,EAAE;EAC5B,MAAM,CAACC,YAAY,EAAEC,eAAe,CAAC,GAAGC,cAAQ,CAACR,gBAAgB,CAAC;AAElES,EAAAA,eAAS,CAAC,MAAK;AACb,IAAA,IAAIC,SAAkB;AACtB,IAAA,IAAIC,OAAkD;IAEtD,IAAI,CAACX,gBAAgB,EAAE;MACrBW,OAAO,GAAGC,UAAU,CAAC,MAAK;QACxB,IAAI,CAACF,SAAS,EAAE;UACdH,eAAe,CAAC,IAAI,CAAC;AACvB,QAAA;MACF,CAAC,EAAE,IAAI,CAAC;AACV,IAAA;AAEA,IAAA,OAAO,MAAK;AACVG,MAAAA,SAAS,GAAG,IAAI;MAEhBG,YAAY,CAACF,OAAO,CAAC;IACvB,CAAC;EACH,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMG,KAAK,GAAIC,SAAiB,IAAab,UAAU,CAACa,SAAS,CAAC,IAAIA,SAAS;EAC/E,MAAMC,UAAU,GAA8BpB,KAAK,GAAGE,SAAI,CAACmB,KAAK,GAAGpB,MAAI;AACvE,EAAA,MAAMqB,aAAa,GAAGC,gBAAgB,CAACH,UAAU,CAAC;EAElD,IAAIZ,KAAK,KAAK,cAAc,EAAE;AAC5B;AACAgB,IAAAA,OAAO,CAACC,IAAI,CACV,2HAA2H,CAC5H;AACD,IAAA,oBAAOC,cAAA,CAAAC,mBAAA,EAAA,GAAK;AACd,EAAA;AAEA,EAAA,oBACEC,eAAA,CAAA,KAAA,EAAA;AAAKT,IAAAA,SAAS,EAAED,KAAK,CAAC,WAAW,CAAE;IAAC,aAAA,EAAaX,SAAS,CAAC,aAAa,CAAE;AAAAsB,IAAAA,QAAA,gBACxEH,cAAA,CAAA,KAAA,EAAA;AACEP,MAAAA,SAAS,EAAEW,SAAI,CAACZ,KAAK,CAAC,iBAAiB,CAAC,EAAEA,KAAK,CAAC,CAAA,iBAAA,EAAoBI,aAAa,CAAA,CAAE,CAAC,EAAE;AACpF,QAAA,0BAA0B,EAAEZ;OAC7B;KAAE,CAEL,EAACL,KAAK,IAAIK,YAAY,iBACpBgB,cAAA,CAACK,YAAI,EAAA;MAACC,IAAI,EAAEC,qBAAU,CAACC,eAAgB;AAACC,MAAAA,EAAE,EAAC,MAAM;AAAChB,MAAAA,SAAS,EAAED,KAAK,CAAC,gBAAgB,CAAE;AAAAW,MAAAA,QAAA,EAClFxB;AAAK,KACF,CACP;AAAA,GACE,CAAC;AAEV;AAEA,MAAMkB,gBAAgB,GAAItB,MAA+B,IAAc;AACrE,EAAA,QAAQA,MAAI;IACV,KAAKC,SAAI,CAACmB,KAAK;IACf,KAAKnB,SAAI,CAACkC,WAAW;MACnB,OAAOlC,SAAI,CAACmB,KAAK;IAEnB,KAAKnB,SAAI,CAACmC,WAAW;IACrB,KAAKnC,SAAI,CAACoC,KAAK;IACf,KAAKpC,SAAI,CAACC,MAAM;AAChB,IAAA;MACE,OAAOD,SAAI,CAACC,MAAM;AACtB;AACF,CAAC;;;;"}

package/build/loader/Loader.mjs

@@ -1,12 +1,13 @@
 import { useTheme } from '@wise/components-theming';
 import { clsx } from 'clsx';
 import { useState, useEffect } from 'react';
+import Body from '../body/Body.mjs';
 import '../common/theme.mjs';
 import '../common/direction.mjs';
 import '../common/propsValues/control.mjs';
 import '../common/propsValues/breakpoint.mjs';
 import { Size } from '../common/propsValues/size.mjs';
-import '../common/propsValues/typography.mjs';
+import { Typography } from '../common/propsValues/typography.mjs';
 import '../common/propsValues/width.mjs';
 import '../common/propsValues/type.mjs';
 import '../common/propsValues/dateMode.mjs';
@@ -24,12 +25,13 @@ import '@transferwise/formatting';
 import '@transferwise/icons';
 import 'react-intl';
 import '../common/closeButton/CloseButton.messages.mjs';
-import { jsx, Fragment } from 'react/jsx-runtime';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 
 const Loader = ({
   small = false,
   size = Size.MEDIUM,
   displayInstantly = false,
+  label,
   classNames = {},
   ...restProps
 }) => {
@@ -60,11 +62,19 @@ const Loader = ({
     console.warn('Loader is forbidden to use with Forest Green theme. Check the https://wise.design/components/screen-loader for more info.');
     return /*#__PURE__*/jsx(Fragment, {});
   }
-  return /*#__PURE__*/jsx("div", {
-    className: clsx(style('tw-loader'), style(`tw-loader--${supportedSize}`), {
-      'tw-loader--visible': hasDebounced
-    }),
-    "data-testid": restProps['data-testid']
+  return /*#__PURE__*/jsxs("div", {
+    className: style('tw-loader'),
+    "data-testid": restProps['data-testid'],
+    children: [/*#__PURE__*/jsx("div", {
+      className: clsx(style('tw-loader-asset'), style(`tw-loader-asset--${supportedSize}`), {
+        'tw-loader-asset--visible': hasDebounced
+      })
+    }), label && hasDebounced && /*#__PURE__*/jsx(Body, {
+      type: Typography.BODY_LARGE_BOLD,
+      as: "span",
+      className: style('text-secondary'),
+      children: label
+    })]
   });
 };
 const getSupportedSize = size => {

package/build/loader/Loader.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Loader.mjs","sources":["../../src/loader/Loader.tsx"],"sourcesContent":["import { useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { useEffect, useState } from 'react';\n\nimport { Size, SizeExtraSmall, SizeSmall, SizeMedium, SizeLarge, SizeExtraLarge } from '../common';\n\n// TODO: We gracefully deprecated xs, lg and xl -- remove these as part of a future breaking change to this component\ntype DeprecatedSize = SizeExtraSmall | SizeLarge | SizeExtraLarge;\n\ntype SizeType = SizeSmall | SizeMedium;\n\nexport type LoaderProps = {\n  /**\n   * @deprecated Use `size` instead.\n   * @default false\n   */\n  small?: boolean;\n  /** @default 'md' */\n  size?: SizeType | DeprecatedSize;\n  /** @default false */\n  displayInstantly?: boolean;\n  // TODO: refactor in favor of prop from `CommonProps` type\n  /** @default {} */\n  classNames?: Record<string, string>;\n  'data-testid'?: string;\n};\n\n/**\n * Loader component\n *\n * Docs link: https://transferwise.github.io/neptune-web/components/progress/Loader\n *\n * @param root0\n * @param root0.small\n * @param root0.size\n * @param root0.classNames\n */\nconst Loader = ({\n  small = false,\n  size = Size.MEDIUM,\n  displayInstantly = false,\n  classNames = {},\n  ...restProps\n}: LoaderProps) => {\n  const { theme } = useTheme();\n  const [hasDebounced, setHasDebounced] = useState(displayInstantly);\n\n  useEffect(() => {\n    let cancelled: boolean;\n    let timeout: ReturnType<typeof setTimeout> | undefined;\n\n    if (!displayInstantly) {\n      timeout = setTimeout(() => {\n        if (!cancelled) {\n          setHasDebounced(true);\n        }\n      }, 1000);\n    }\n\n    return () => {\n      cancelled = true;\n\n      clearTimeout(timeout);\n    };\n  }, []);\n\n  const style = (className: string): string => classNames[className] || className;\n  const legacySize: SizeType | DeprecatedSize = small ? Size.SMALL : size;\n  const supportedSize = getSupportedSize(legacySize);\n\n  if (theme === 'forest-green') {\n    // eslint-disable-next-line no-console\n    console.warn(\n      'Loader is forbidden to use with Forest Green theme. Check the https://wise.design/components/screen-loader for more info.',\n    );\n    return <></>;\n  }\n\n  return (\n    <div\n      className={clsx(style('tw-loader'), style(`tw-loader--${supportedSize}`), {\n        'tw-loader--visible': hasDebounced,\n      })}\n      data-testid={restProps['data-testid']}\n    />\n  );\n};\n\nconst getSupportedSize = (size: SizeType | DeprecatedSize): SizeType => {\n  switch (size) {\n    case Size.SMALL:\n    case Size.EXTRA_SMALL:\n      return Size.SMALL;\n\n    case Size.EXTRA_LARGE:\n    case Size.LARGE:\n    case Size.MEDIUM:\n    default:\n      return Size.MEDIUM;\n  }\n};\n\nexport default Loader;\n"],"names":["Loader","small","size","Size","MEDIUM","displayInstantly","classNames","restProps","theme","useTheme","hasDebounced","setHasDebounced","useState","useEffect","cancelled","timeout","setTimeout","clearTimeout","style","className","legacySize","SMALL","supportedSize","getSupportedSize","console","warn","_jsx","_Fragment","clsx","EXTRA_SMALL","EXTRA_LARGE","LARGE"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCA,MAAMA,MAAM,GAAGA,CAAC;AACdC,EAAAA,KAAK,GAAG,KAAK;EACbC,IAAI,GAAGC,IAAI,CAACC,MAAM;AAClBC,EAAAA,gBAAgB,GAAG,KAAK;EACxBC,UAAU,GAAG,EAAE;EACf,GAAGC;AAAS,CACA,KAAI;EAChB,MAAM;AAAEC,IAAAA;GAAO,GAAGC,QAAQ,EAAE;EAC5B,MAAM,CAACC,YAAY,EAAEC,eAAe,CAAC,GAAGC,QAAQ,CAACP,gBAAgB,CAAC;AAElEQ,EAAAA,SAAS,CAAC,MAAK;AACb,IAAA,IAAIC,SAAkB;AACtB,IAAA,IAAIC,OAAkD;IAEtD,IAAI,CAACV,gBAAgB,EAAE;MACrBU,OAAO,GAAGC,UAAU,CAAC,MAAK;QACxB,IAAI,CAACF,SAAS,EAAE;UACdH,eAAe,CAAC,IAAI,CAAC;AACvB,QAAA;MACF,CAAC,EAAE,IAAI,CAAC;AACV,IAAA;AAEA,IAAA,OAAO,MAAK;AACVG,MAAAA,SAAS,GAAG,IAAI;MAEhBG,YAAY,CAACF,OAAO,CAAC;IACvB,CAAC;EACH,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMG,KAAK,GAAIC,SAAiB,IAAab,UAAU,CAACa,SAAS,CAAC,IAAIA,SAAS;EAC/E,MAAMC,UAAU,GAA8BnB,KAAK,GAAGE,IAAI,CAACkB,KAAK,GAAGnB,IAAI;AACvE,EAAA,MAAMoB,aAAa,GAAGC,gBAAgB,CAACH,UAAU,CAAC;EAElD,IAAIZ,KAAK,KAAK,cAAc,EAAE;AAC5B;AACAgB,IAAAA,OAAO,CAACC,IAAI,CACV,2HAA2H,CAC5H;AACD,IAAA,oBAAOC,GAAA,CAAAC,QAAA,EAAA,GAAK;AACd,EAAA;AAEA,EAAA,oBACED,GAAA,CAAA,KAAA,EAAA;AACEP,IAAAA,SAAS,EAAES,IAAI,CAACV,KAAK,CAAC,WAAW,CAAC,EAAEA,KAAK,CAAC,CAAA,WAAA,EAAcI,aAAa,CAAA,CAAE,CAAC,EAAE;AACxE,MAAA,oBAAoB,EAAEZ;AACvB,KAAA,CAAE;IACH,aAAA,EAAaH,SAAS,CAAC,aAAa;AAAE,GAAA,CACtC;AAEN;AAEA,MAAMgB,gBAAgB,GAAIrB,IAA+B,IAAc;AACrE,EAAA,QAAQA,IAAI;IACV,KAAKC,IAAI,CAACkB,KAAK;IACf,KAAKlB,IAAI,CAAC0B,WAAW;MACnB,OAAO1B,IAAI,CAACkB,KAAK;IAEnB,KAAKlB,IAAI,CAAC2B,WAAW;IACrB,KAAK3B,IAAI,CAAC4B,KAAK;IACf,KAAK5B,IAAI,CAACC,MAAM;AAChB,IAAA;MACE,OAAOD,IAAI,CAACC,MAAM;AACtB;AACF,CAAC;;;;"}
+{"version":3,"file":"Loader.mjs","sources":["../../src/loader/Loader.tsx"],"sourcesContent":["import { useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { ReactNode, useEffect, useState } from 'react';\n\nimport Body from '../body';\nimport { Size, SizeExtraSmall, SizeSmall, SizeMedium, SizeLarge, SizeExtraLarge } from '../common';\nimport { Typography } from '../common/propsValues/typography';\n\n// TODO: We gracefully deprecated xs, lg and xl -- remove these as part of a future breaking change to this component\ntype DeprecatedSize = SizeExtraSmall | SizeLarge | SizeExtraLarge;\n\ntype SizeType = SizeSmall | SizeMedium;\n\nexport type LoaderProps = {\n  /**\n   * @deprecated Use `size` instead.\n   * @default false\n   */\n  small?: boolean;\n  /** @default 'md' */\n  size?: SizeType | DeprecatedSize;\n  /** @default false */\n  displayInstantly?: boolean;\n  /** Optional label displayed below the loader */\n  label?: ReactNode;\n  // TODO: refactor in favor of prop from `CommonProps` type\n  /** @default {} */\n  classNames?: Record<string, string>;\n  'data-testid'?: string;\n};\n\n/**\n * Loader component\n *\n * Docs link: https://transferwise.github.io/neptune-web/components/progress/Loader\n *\n * @param root0\n * @param root0.small\n * @param root0.size\n * @param root0.classNames\n */\nconst Loader = ({\n  small = false,\n  size = Size.MEDIUM,\n  displayInstantly = false,\n  label,\n  classNames = {},\n  ...restProps\n}: LoaderProps) => {\n  const { theme } = useTheme();\n  const [hasDebounced, setHasDebounced] = useState(displayInstantly);\n\n  useEffect(() => {\n    let cancelled: boolean;\n    let timeout: ReturnType<typeof setTimeout> | undefined;\n\n    if (!displayInstantly) {\n      timeout = setTimeout(() => {\n        if (!cancelled) {\n          setHasDebounced(true);\n        }\n      }, 1000);\n    }\n\n    return () => {\n      cancelled = true;\n\n      clearTimeout(timeout);\n    };\n  }, []);\n\n  const style = (className: string): string => classNames[className] || className;\n  const legacySize: SizeType | DeprecatedSize = small ? Size.SMALL : size;\n  const supportedSize = getSupportedSize(legacySize);\n\n  if (theme === 'forest-green') {\n    // eslint-disable-next-line no-console\n    console.warn(\n      'Loader is forbidden to use with Forest Green theme. Check the https://wise.design/components/screen-loader for more info.',\n    );\n    return <></>;\n  }\n\n  return (\n    <div className={style('tw-loader')} data-testid={restProps['data-testid']}>\n      <div\n        className={clsx(style('tw-loader-asset'), style(`tw-loader-asset--${supportedSize}`), {\n          'tw-loader-asset--visible': hasDebounced,\n        })}\n      />\n      {label && hasDebounced && (\n        <Body type={Typography.BODY_LARGE_BOLD} as=\"span\" className={style('text-secondary')}>\n          {label}\n        </Body>\n      )}\n    </div>\n  );\n};\n\nconst getSupportedSize = (size: SizeType | DeprecatedSize): SizeType => {\n  switch (size) {\n    case Size.SMALL:\n    case Size.EXTRA_SMALL:\n      return Size.SMALL;\n\n    case Size.EXTRA_LARGE:\n    case Size.LARGE:\n    case Size.MEDIUM:\n    default:\n      return Size.MEDIUM;\n  }\n};\n\nexport default Loader;\n"],"names":["Loader","small","size","Size","MEDIUM","displayInstantly","label","classNames","restProps","theme","useTheme","hasDebounced","setHasDebounced","useState","useEffect","cancelled","timeout","setTimeout","clearTimeout","style","className","legacySize","SMALL","supportedSize","getSupportedSize","console","warn","_jsx","_Fragment","_jsxs","children","clsx","Body","type","Typography","BODY_LARGE_BOLD","as","EXTRA_SMALL","EXTRA_LARGE","LARGE"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA,MAAMA,MAAM,GAAGA,CAAC;AACdC,EAAAA,KAAK,GAAG,KAAK;EACbC,IAAI,GAAGC,IAAI,CAACC,MAAM;AAClBC,EAAAA,gBAAgB,GAAG,KAAK;EACxBC,KAAK;EACLC,UAAU,GAAG,EAAE;EACf,GAAGC;AAAS,CACA,KAAI;EAChB,MAAM;AAAEC,IAAAA;GAAO,GAAGC,QAAQ,EAAE;EAC5B,MAAM,CAACC,YAAY,EAAEC,eAAe,CAAC,GAAGC,QAAQ,CAACR,gBAAgB,CAAC;AAElES,EAAAA,SAAS,CAAC,MAAK;AACb,IAAA,IAAIC,SAAkB;AACtB,IAAA,IAAIC,OAAkD;IAEtD,IAAI,CAACX,gBAAgB,EAAE;MACrBW,OAAO,GAAGC,UAAU,CAAC,MAAK;QACxB,IAAI,CAACF,SAAS,EAAE;UACdH,eAAe,CAAC,IAAI,CAAC;AACvB,QAAA;MACF,CAAC,EAAE,IAAI,CAAC;AACV,IAAA;AAEA,IAAA,OAAO,MAAK;AACVG,MAAAA,SAAS,GAAG,IAAI;MAEhBG,YAAY,CAACF,OAAO,CAAC;IACvB,CAAC;EACH,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMG,KAAK,GAAIC,SAAiB,IAAab,UAAU,CAACa,SAAS,CAAC,IAAIA,SAAS;EAC/E,MAAMC,UAAU,GAA8BpB,KAAK,GAAGE,IAAI,CAACmB,KAAK,GAAGpB,IAAI;AACvE,EAAA,MAAMqB,aAAa,GAAGC,gBAAgB,CAACH,UAAU,CAAC;EAElD,IAAIZ,KAAK,KAAK,cAAc,EAAE;AAC5B;AACAgB,IAAAA,OAAO,CAACC,IAAI,CACV,2HAA2H,CAC5H;AACD,IAAA,oBAAOC,GAAA,CAAAC,QAAA,EAAA,GAAK;AACd,EAAA;AAEA,EAAA,oBACEC,IAAA,CAAA,KAAA,EAAA;AAAKT,IAAAA,SAAS,EAAED,KAAK,CAAC,WAAW,CAAE;IAAC,aAAA,EAAaX,SAAS,CAAC,aAAa,CAAE;AAAAsB,IAAAA,QAAA,gBACxEH,GAAA,CAAA,KAAA,EAAA;AACEP,MAAAA,SAAS,EAAEW,IAAI,CAACZ,KAAK,CAAC,iBAAiB,CAAC,EAAEA,KAAK,CAAC,CAAA,iBAAA,EAAoBI,aAAa,CAAA,CAAE,CAAC,EAAE;AACpF,QAAA,0BAA0B,EAAEZ;OAC7B;KAAE,CAEL,EAACL,KAAK,IAAIK,YAAY,iBACpBgB,GAAA,CAACK,IAAI,EAAA;MAACC,IAAI,EAAEC,UAAU,CAACC,eAAgB;AAACC,MAAAA,EAAE,EAAC,MAAM;AAAChB,MAAAA,SAAS,EAAED,KAAK,CAAC,gBAAgB,CAAE;AAAAW,MAAAA,QAAA,EAClFxB;AAAK,KACF,CACP;AAAA,GACE,CAAC;AAEV;AAEA,MAAMkB,gBAAgB,GAAItB,IAA+B,IAAc;AACrE,EAAA,QAAQA,IAAI;IACV,KAAKC,IAAI,CAACmB,KAAK;IACf,KAAKnB,IAAI,CAACkC,WAAW;MACnB,OAAOlC,IAAI,CAACmB,KAAK;IAEnB,KAAKnB,IAAI,CAACmC,WAAW;IACrB,KAAKnC,IAAI,CAACoC,KAAK;IACf,KAAKpC,IAAI,CAACC,MAAM;AAChB,IAAA;MACE,OAAOD,IAAI,CAACC,MAAM;AACtB;AACF,CAAC;;;;"}

package/build/logo/Logo.js

@@ -73,16 +73,18 @@ function Logo({
   type = 'WISE',
   format = 'default',
   display = 'responsive',
+  size = 24,
   'aria-label': ariaLabel
 }) {
   const isScreenSm = !useScreenSize.useScreenSize(breakpoint.Breakpoint.SMALL);
   const compact = display === 'compact' || display === 'responsive' && isScreenSm;
   const assetName = compact ? 'FastFlag' : getAssetName(type, format);
   const Asset = logoAssets[assetName];
+  const sizes = logoAssets$1.logoAssetsDimensions[assetName];
   const {
     width,
     height
-  } = logoAssets$1.logoAssetsDimensions[assetName];
+  } = logoAssets$1.logoAssetsDimensions[assetName][Number(size)] ?? sizes[24];
   return /*#__PURE__*/jsxRuntime.jsx("span", {
     className: clsx.clsx('np-logo', className),
     role: "img",

package/build/logo/Logo.js.map

@@ -1 +1 @@
-{"version":3,"file":"Logo.js","sources":["../../src/logo/Logo.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport {\n  WiseLogo,\n  WiseBusinessPrimary,\n  WiseBusinessSecondary,\n  WisePlatformPrimary,\n  WisePlatformSecondary,\n  FastFlag,\n  logoAssetsDimensions,\n} from './logo-assets';\nimport type { LogoAssetName } from './logo-assets';\nimport { Breakpoint } from '../common';\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport { AriaAttributes } from 'react';\n\nexport enum LogoType {\n  WISE = 'WISE',\n  WISE_BUSINESS = 'WISE_BUSINESS',\n  WISE_PLATFORM = 'WISE_PLATFORM',\n}\n\nexport enum LogoDisplay {\n  RESPONSIVE = 'responsive',\n  COMPACT = 'compact',\n  FULL = 'full',\n}\n\nexport enum LogoFormat {\n  DEFAULT = 'default',\n  PRIMARY_LOCKUP = 'primary-lockup',\n  SECONDARY_LOCKUP = 'secondary-lockup',\n}\n\nexport interface LogoProps {\n  /** Extra classes applied to Logo */\n  className?: string;\n  /**\n   * Renders a light-coloured version suited for dark backgrounds.\n   * @default false\n   * @deprecated dark mode comes out of the box, this property has no effect\n   */\n  inverse?: boolean;\n  /**\n   * What type of logo to display\n   * @default 'WISE'\n   */\n  type?: `${LogoType}`;\n  /**\n   * Controls which logo variant is shown.\n   * - `\"responsive\"` (default): full wordmark on large screens, fast-flag mark on small screens (<600 px).\n   * - `\"compact\"`: always renders the fast-flag mark regardless of screen size.\n   * - `\"full\"`: always renders the full wordmark/lockup regardless of screen size.\n   * @default 'responsive'\n   */\n  display?: `${LogoDisplay}`;\n  /**\n   * Controls the format of the logo.\n   * - `\"default\"`: plain Wise wordmark, no product name.\n   * - `\"primary-lockup\"`: product name shown inline alongside the wordmark.\n   * - `\"secondary-lockup\"`: stacked (two-line) variant with the product name.\n   * @default 'default'\n   */\n  format?: `${LogoFormat}`;\n  /**\n   * Override default ({@link labelByType}) screen reader messages\n   */\n  'aria-label'?: AriaAttributes['aria-label'];\n}\n\nconst labelByType = {\n  WISE: 'Wise',\n  WISE_BUSINESS: 'Wise Business',\n  WISE_PLATFORM: 'Wise Platform',\n} satisfies Record<`${LogoType}`, string>;\n\nconst logoAssets: Record<LogoAssetName, () => JSX.Element> = {\n  FastFlag,\n  WiseLogo,\n  WiseBusinessPrimary,\n  WiseBusinessSecondary,\n  WisePlatformPrimary,\n  WisePlatformSecondary,\n};\n\n/**\n * Renders the Wise wordmark logo. Responsive — shows the flag-only mark on small viewports\n * and the full wordmark on ≥576px (small breakpoint and above).\n *\n * @see {@link https://wise.design/foundations/logo Design Spec}\n */\nexport default function Logo({\n  className,\n  type = 'WISE',\n  format = 'default',\n  display = 'responsive',\n  'aria-label': ariaLabel,\n}: LogoProps) {\n  const isScreenSm = !useScreenSize(Breakpoint.SMALL);\n  const compact = display === 'compact' || (display === 'responsive' && isScreenSm);\n\n  const assetName = compact ? 'FastFlag' : getAssetName(type, format);\n  const Asset = logoAssets[assetName];\n  const { width, height } = logoAssetsDimensions[assetName];\n\n  return (\n    <span\n      className={clsx('np-logo', className)}\n      role=\"img\"\n      aria-label={ariaLabel ?? labelByType[type]}\n      style={\n        {\n          '--wds-logo-width': `${width}px`,\n          '--wds-logo-height': `${height}px`,\n        } as React.CSSProperties\n      }\n    >\n      <Asset />\n    </span>\n  );\n}\n\nfunction getAssetName(type: `${LogoType}`, format: `${LogoFormat}`): LogoAssetName {\n  if (format !== 'default') {\n    if (type === 'WISE_BUSINESS') {\n      return format === 'secondary-lockup' ? 'WiseBusinessSecondary' : 'WiseBusinessPrimary';\n    }\n    if (type === 'WISE_PLATFORM') {\n      return format === 'secondary-lockup' ? 'WisePlatformSecondary' : 'WisePlatformPrimary';\n    }\n  }\n  return 'WiseLogo';\n}\n"],"names":["LogoType","LogoDisplay","LogoFormat","labelByType","WISE","WISE_BUSINESS","WISE_PLATFORM","logoAssets","FastFlag","WiseLogo","WiseBusinessPrimary","WiseBusinessSecondary","WisePlatformPrimary","WisePlatformSecondary","Logo","className","type","format","display","ariaLabel","isScreenSm","useScreenSize","Breakpoint","SMALL","compact","assetName","getAssetName","Asset","width","height","logoAssetsDimensions","_jsx","clsx","role","style","children"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBYA;AAAZ,CAAA,UAAYA,QAAQ,EAAA;AAClBA,EAAAA,QAAA,CAAA,MAAA,CAAA,GAAA,MAAa;AACbA,EAAAA,QAAA,CAAA,eAAA,CAAA,GAAA,eAA+B;AAC/BA,EAAAA,QAAA,CAAA,eAAA,CAAA,GAAA,eAA+B;AACjC,CAAC,EAJWA,gBAAQ,KAARA,gBAAQ,GAAA,EAAA,CAAA,CAAA;AAMRC;AAAZ,CAAA,UAAYA,WAAW,EAAA;AACrBA,EAAAA,WAAA,CAAA,YAAA,CAAA,GAAA,YAAyB;AACzBA,EAAAA,WAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnBA,EAAAA,WAAA,CAAA,MAAA,CAAA,GAAA,MAAa;AACf,CAAC,EAJWA,mBAAW,KAAXA,mBAAW,GAAA,EAAA,CAAA,CAAA;AAMXC;AAAZ,CAAA,UAAYA,UAAU,EAAA;AACpBA,EAAAA,UAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnBA,EAAAA,UAAA,CAAA,gBAAA,CAAA,GAAA,gBAAiC;AACjCA,EAAAA,UAAA,CAAA,kBAAA,CAAA,GAAA,kBAAqC;AACvC,CAAC,EAJWA,kBAAU,KAAVA,kBAAU,GAAA,EAAA,CAAA,CAAA;AA0CtB,MAAMC,WAAW,GAAG;AAClBC,EAAAA,IAAI,EAAE,MAAM;AACZC,EAAAA,aAAa,EAAE,eAAe;AAC9BC,EAAAA,aAAa,EAAE;CACwB;AAEzC,MAAMC,UAAU,GAA6C;YAC3DC,qBAAQ;YACRC,qBAAQ;uBACRC,gCAAmB;yBACnBC,kCAAqB;uBACrBC,gCAAmB;AACnBC,yBAAAA;CACD;AAED;;;;;AAKG;AACW,SAAUC,IAAIA,CAAC;EAC3BC,SAAS;AACTC,EAAAA,IAAI,GAAG,MAAM;AACbC,EAAAA,MAAM,GAAG,SAAS;AAClBC,EAAAA,OAAO,GAAG,YAAY;AACtB,EAAA,YAAY,EAAEC;AAAS,CACb,EAAA;EACV,MAAMC,UAAU,GAAG,CAACC,2BAAa,CAACC,qBAAU,CAACC,KAAK,CAAC;EACnD,MAAMC,OAAO,GAAGN,OAAO,KAAK,SAAS,IAAKA,OAAO,KAAK,YAAY,IAAIE,UAAW;EAEjF,MAAMK,SAAS,GAAGD,OAAO,GAAG,UAAU,GAAGE,YAAY,CAACV,IAAI,EAAEC,MAAM,CAAC;AACnE,EAAA,MAAMU,KAAK,GAAGpB,UAAU,CAACkB,SAAS,CAAC;EACnC,MAAM;IAAEG,KAAK;AAAEC,IAAAA;AAAM,GAAE,GAAGC,iCAAoB,CAACL,SAAS,CAAC;AAEzD,EAAA,oBACEM,cAAA,CAAA,MAAA,EAAA;AACEhB,IAAAA,SAAS,EAAEiB,SAAI,CAAC,SAAS,EAAEjB,SAAS,CAAE;AACtCkB,IAAAA,IAAI,EAAC,KAAK;AACV,IAAA,YAAA,EAAYd,SAAS,IAAIhB,WAAW,CAACa,IAAI,CAAE;AAC3CkB,IAAAA,KAAK,EACH;MACE,kBAAkB,EAAE,CAAA,EAAGN,KAAK,CAAA,EAAA,CAAI;MAChC,mBAAmB,EAAE,GAAGC,MAAM,CAAA,EAAA;KAEjC;AAAAM,IAAAA,QAAA,eAEDJ,cAAA,CAACJ,KAAK,EAAA,EAAA;AACR,GAAM,CAAC;AAEX;AAEA,SAASD,YAAYA,CAACV,IAAmB,EAAEC,MAAuB,EAAA;EAChE,IAAIA,MAAM,KAAK,SAAS,EAAE;IACxB,IAAID,IAAI,KAAK,eAAe,EAAE;AAC5B,MAAA,OAAOC,MAAM,KAAK,kBAAkB,GAAG,uBAAuB,GAAG,qBAAqB;AACxF,IAAA;IACA,IAAID,IAAI,KAAK,eAAe,EAAE;AAC5B,MAAA,OAAOC,MAAM,KAAK,kBAAkB,GAAG,uBAAuB,GAAG,qBAAqB;AACxF,IAAA;AACF,EAAA;AACA,EAAA,OAAO,UAAU;AACnB;;;;"}
+{"version":3,"file":"Logo.js","sources":["../../src/logo/Logo.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport {\n  WiseLogo,\n  WiseBusinessPrimary,\n  WiseBusinessSecondary,\n  WisePlatformPrimary,\n  WisePlatformSecondary,\n  FastFlag,\n  logoAssetsDimensions,\n} from './logo-assets';\nimport type { LogoAssetName } from './logo-assets';\nimport { Breakpoint } from '../common';\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport { AriaAttributes } from 'react';\n\nexport enum LogoType {\n  WISE = 'WISE',\n  WISE_BUSINESS = 'WISE_BUSINESS',\n  WISE_PLATFORM = 'WISE_PLATFORM',\n}\n\nexport enum LogoDisplay {\n  RESPONSIVE = 'responsive',\n  COMPACT = 'compact',\n  FULL = 'full',\n}\n\nexport enum LogoFormat {\n  DEFAULT = 'default',\n  PRIMARY_LOCKUP = 'primary-lockup',\n  SECONDARY_LOCKUP = 'secondary-lockup',\n}\n\nexport type LogoSize = 16 | 18 | 20 | 24 | 28 | 36 | '16' | '18' | '20' | '24' | '28' | '36';\n\nexport interface LogoProps {\n  /** Extra classes applied to Logo */\n  className?: string;\n  /**\n   * Renders a light-coloured version suited for dark backgrounds.\n   * @default false\n   * @deprecated dark mode comes out of the box, this property has no effect\n   */\n  inverse?: boolean;\n  /**\n   * What type of logo to display\n   * @default 'WISE'\n   */\n  type?: `${LogoType}`;\n  /**\n   * Controls which logo variant is shown.\n   * - `\"responsive\"` (default): full wordmark on large screens, fast-flag mark on small screens (<600 px).\n   * - `\"compact\"`: always renders the fast-flag mark regardless of screen size.\n   * - `\"full\"`: always renders the full wordmark/lockup regardless of screen size.\n   * @default 'responsive'\n   */\n  display?: `${LogoDisplay}`;\n  /**\n   * Controls the format of the logo.\n   * - `\"default\"`: plain Wise wordmark, no product name.\n   * - `\"primary-lockup\"`: product name shown inline alongside the wordmark.\n   * - `\"secondary-lockup\"`: stacked (two-line) variant with the product name.\n   * @default 'default'\n   */\n  format?: `${LogoFormat}`;\n  /**\n   * Controls the height and width of the logo in pixels.\n   * @default 24\n   */\n  size?: LogoSize;\n  /**\n   * Override default ({@link labelByType}) screen reader messages\n   */\n  'aria-label'?: AriaAttributes['aria-label'];\n}\n\nconst labelByType = {\n  WISE: 'Wise',\n  WISE_BUSINESS: 'Wise Business',\n  WISE_PLATFORM: 'Wise Platform',\n} satisfies Record<`${LogoType}`, string>;\n\nconst logoAssets: Record<LogoAssetName, () => JSX.Element> = {\n  FastFlag,\n  WiseLogo,\n  WiseBusinessPrimary,\n  WiseBusinessSecondary,\n  WisePlatformPrimary,\n  WisePlatformSecondary,\n};\n\n/**\n * Renders the Wise wordmark logo. Responsive — shows the flag-only mark on small viewports\n * and the full wordmark on ≥576px (small breakpoint and above).\n *\n * @see {@link https://wise.design/foundations/logo Design Spec}\n */\nexport default function Logo({\n  className,\n  type = 'WISE',\n  format = 'default',\n  display = 'responsive',\n  size = 24,\n  'aria-label': ariaLabel,\n}: LogoProps) {\n  const isScreenSm = !useScreenSize(Breakpoint.SMALL);\n  const compact = display === 'compact' || (display === 'responsive' && isScreenSm);\n\n  const assetName = compact ? 'FastFlag' : getAssetName(type, format);\n  const Asset = logoAssets[assetName];\n  const sizes = logoAssetsDimensions[assetName];\n  const { width, height } =\n    logoAssetsDimensions[assetName][Number(size) as keyof typeof sizes] ?? sizes[24];\n\n  return (\n    <span\n      className={clsx('np-logo', className)}\n      role=\"img\"\n      aria-label={ariaLabel ?? labelByType[type]}\n      style={\n        {\n          '--wds-logo-width': `${width}px`,\n          '--wds-logo-height': `${height}px`,\n        } as React.CSSProperties\n      }\n    >\n      <Asset />\n    </span>\n  );\n}\n\nfunction getAssetName(type: `${LogoType}`, format: `${LogoFormat}`): LogoAssetName {\n  if (format !== 'default') {\n    if (type === 'WISE_BUSINESS') {\n      return format === 'secondary-lockup' ? 'WiseBusinessSecondary' : 'WiseBusinessPrimary';\n    }\n    if (type === 'WISE_PLATFORM') {\n      return format === 'secondary-lockup' ? 'WisePlatformSecondary' : 'WisePlatformPrimary';\n    }\n  }\n  return 'WiseLogo';\n}\n"],"names":["LogoType","LogoDisplay","LogoFormat","labelByType","WISE","WISE_BUSINESS","WISE_PLATFORM","logoAssets","FastFlag","WiseLogo","WiseBusinessPrimary","WiseBusinessSecondary","WisePlatformPrimary","WisePlatformSecondary","Logo","className","type","format","display","size","ariaLabel","isScreenSm","useScreenSize","Breakpoint","SMALL","compact","assetName","getAssetName","Asset","sizes","logoAssetsDimensions","width","height","Number","_jsx","clsx","role","style","children"],"mappings":"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"}

package/build/logo/Logo.mjs

@@ -69,16 +69,18 @@ function Logo({
   type = 'WISE',
   format = 'default',
   display = 'responsive',
+  size = 24,
   'aria-label': ariaLabel
 }) {
   const isScreenSm = !useScreenSize(Breakpoint.SMALL);
   const compact = display === 'compact' || display === 'responsive' && isScreenSm;
   const assetName = compact ? 'FastFlag' : getAssetName(type, format);
   const Asset = logoAssets[assetName];
+  const sizes = logoAssetsDimensions[assetName];
   const {
     width,
     height
-  } = logoAssetsDimensions[assetName];
+  } = logoAssetsDimensions[assetName][Number(size)] ?? sizes[24];
   return /*#__PURE__*/jsx("span", {
     className: clsx('np-logo', className),
     role: "img",

package/build/logo/Logo.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Logo.mjs","sources":["../../src/logo/Logo.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport {\n  WiseLogo,\n  WiseBusinessPrimary,\n  WiseBusinessSecondary,\n  WisePlatformPrimary,\n  WisePlatformSecondary,\n  FastFlag,\n  logoAssetsDimensions,\n} from './logo-assets';\nimport type { LogoAssetName } from './logo-assets';\nimport { Breakpoint } from '../common';\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport { AriaAttributes } from 'react';\n\nexport enum LogoType {\n  WISE = 'WISE',\n  WISE_BUSINESS = 'WISE_BUSINESS',\n  WISE_PLATFORM = 'WISE_PLATFORM',\n}\n\nexport enum LogoDisplay {\n  RESPONSIVE = 'responsive',\n  COMPACT = 'compact',\n  FULL = 'full',\n}\n\nexport enum LogoFormat {\n  DEFAULT = 'default',\n  PRIMARY_LOCKUP = 'primary-lockup',\n  SECONDARY_LOCKUP = 'secondary-lockup',\n}\n\nexport interface LogoProps {\n  /** Extra classes applied to Logo */\n  className?: string;\n  /**\n   * Renders a light-coloured version suited for dark backgrounds.\n   * @default false\n   * @deprecated dark mode comes out of the box, this property has no effect\n   */\n  inverse?: boolean;\n  /**\n   * What type of logo to display\n   * @default 'WISE'\n   */\n  type?: `${LogoType}`;\n  /**\n   * Controls which logo variant is shown.\n   * - `\"responsive\"` (default): full wordmark on large screens, fast-flag mark on small screens (<600 px).\n   * - `\"compact\"`: always renders the fast-flag mark regardless of screen size.\n   * - `\"full\"`: always renders the full wordmark/lockup regardless of screen size.\n   * @default 'responsive'\n   */\n  display?: `${LogoDisplay}`;\n  /**\n   * Controls the format of the logo.\n   * - `\"default\"`: plain Wise wordmark, no product name.\n   * - `\"primary-lockup\"`: product name shown inline alongside the wordmark.\n   * - `\"secondary-lockup\"`: stacked (two-line) variant with the product name.\n   * @default 'default'\n   */\n  format?: `${LogoFormat}`;\n  /**\n   * Override default ({@link labelByType}) screen reader messages\n   */\n  'aria-label'?: AriaAttributes['aria-label'];\n}\n\nconst labelByType = {\n  WISE: 'Wise',\n  WISE_BUSINESS: 'Wise Business',\n  WISE_PLATFORM: 'Wise Platform',\n} satisfies Record<`${LogoType}`, string>;\n\nconst logoAssets: Record<LogoAssetName, () => JSX.Element> = {\n  FastFlag,\n  WiseLogo,\n  WiseBusinessPrimary,\n  WiseBusinessSecondary,\n  WisePlatformPrimary,\n  WisePlatformSecondary,\n};\n\n/**\n * Renders the Wise wordmark logo. Responsive — shows the flag-only mark on small viewports\n * and the full wordmark on ≥576px (small breakpoint and above).\n *\n * @see {@link https://wise.design/foundations/logo Design Spec}\n */\nexport default function Logo({\n  className,\n  type = 'WISE',\n  format = 'default',\n  display = 'responsive',\n  'aria-label': ariaLabel,\n}: LogoProps) {\n  const isScreenSm = !useScreenSize(Breakpoint.SMALL);\n  const compact = display === 'compact' || (display === 'responsive' && isScreenSm);\n\n  const assetName = compact ? 'FastFlag' : getAssetName(type, format);\n  const Asset = logoAssets[assetName];\n  const { width, height } = logoAssetsDimensions[assetName];\n\n  return (\n    <span\n      className={clsx('np-logo', className)}\n      role=\"img\"\n      aria-label={ariaLabel ?? labelByType[type]}\n      style={\n        {\n          '--wds-logo-width': `${width}px`,\n          '--wds-logo-height': `${height}px`,\n        } as React.CSSProperties\n      }\n    >\n      <Asset />\n    </span>\n  );\n}\n\nfunction getAssetName(type: `${LogoType}`, format: `${LogoFormat}`): LogoAssetName {\n  if (format !== 'default') {\n    if (type === 'WISE_BUSINESS') {\n      return format === 'secondary-lockup' ? 'WiseBusinessSecondary' : 'WiseBusinessPrimary';\n    }\n    if (type === 'WISE_PLATFORM') {\n      return format === 'secondary-lockup' ? 'WisePlatformSecondary' : 'WisePlatformPrimary';\n    }\n  }\n  return 'WiseLogo';\n}\n"],"names":["LogoType","LogoDisplay","LogoFormat","labelByType","WISE","WISE_BUSINESS","WISE_PLATFORM","logoAssets","FastFlag","WiseLogo","WiseBusinessPrimary","WiseBusinessSecondary","WisePlatformPrimary","WisePlatformSecondary","Logo","className","type","format","display","ariaLabel","isScreenSm","useScreenSize","Breakpoint","SMALL","compact","assetName","getAssetName","Asset","width","height","logoAssetsDimensions","_jsx","clsx","role","style","children"],"mappings":"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"}
+{"version":3,"file":"Logo.mjs","sources":["../../src/logo/Logo.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport {\n  WiseLogo,\n  WiseBusinessPrimary,\n  WiseBusinessSecondary,\n  WisePlatformPrimary,\n  WisePlatformSecondary,\n  FastFlag,\n  logoAssetsDimensions,\n} from './logo-assets';\nimport type { LogoAssetName } from './logo-assets';\nimport { Breakpoint } from '../common';\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport { AriaAttributes } from 'react';\n\nexport enum LogoType {\n  WISE = 'WISE',\n  WISE_BUSINESS = 'WISE_BUSINESS',\n  WISE_PLATFORM = 'WISE_PLATFORM',\n}\n\nexport enum LogoDisplay {\n  RESPONSIVE = 'responsive',\n  COMPACT = 'compact',\n  FULL = 'full',\n}\n\nexport enum LogoFormat {\n  DEFAULT = 'default',\n  PRIMARY_LOCKUP = 'primary-lockup',\n  SECONDARY_LOCKUP = 'secondary-lockup',\n}\n\nexport type LogoSize = 16 | 18 | 20 | 24 | 28 | 36 | '16' | '18' | '20' | '24' | '28' | '36';\n\nexport interface LogoProps {\n  /** Extra classes applied to Logo */\n  className?: string;\n  /**\n   * Renders a light-coloured version suited for dark backgrounds.\n   * @default false\n   * @deprecated dark mode comes out of the box, this property has no effect\n   */\n  inverse?: boolean;\n  /**\n   * What type of logo to display\n   * @default 'WISE'\n   */\n  type?: `${LogoType}`;\n  /**\n   * Controls which logo variant is shown.\n   * - `\"responsive\"` (default): full wordmark on large screens, fast-flag mark on small screens (<600 px).\n   * - `\"compact\"`: always renders the fast-flag mark regardless of screen size.\n   * - `\"full\"`: always renders the full wordmark/lockup regardless of screen size.\n   * @default 'responsive'\n   */\n  display?: `${LogoDisplay}`;\n  /**\n   * Controls the format of the logo.\n   * - `\"default\"`: plain Wise wordmark, no product name.\n   * - `\"primary-lockup\"`: product name shown inline alongside the wordmark.\n   * - `\"secondary-lockup\"`: stacked (two-line) variant with the product name.\n   * @default 'default'\n   */\n  format?: `${LogoFormat}`;\n  /**\n   * Controls the height and width of the logo in pixels.\n   * @default 24\n   */\n  size?: LogoSize;\n  /**\n   * Override default ({@link labelByType}) screen reader messages\n   */\n  'aria-label'?: AriaAttributes['aria-label'];\n}\n\nconst labelByType = {\n  WISE: 'Wise',\n  WISE_BUSINESS: 'Wise Business',\n  WISE_PLATFORM: 'Wise Platform',\n} satisfies Record<`${LogoType}`, string>;\n\nconst logoAssets: Record<LogoAssetName, () => JSX.Element> = {\n  FastFlag,\n  WiseLogo,\n  WiseBusinessPrimary,\n  WiseBusinessSecondary,\n  WisePlatformPrimary,\n  WisePlatformSecondary,\n};\n\n/**\n * Renders the Wise wordmark logo. Responsive — shows the flag-only mark on small viewports\n * and the full wordmark on ≥576px (small breakpoint and above).\n *\n * @see {@link https://wise.design/foundations/logo Design Spec}\n */\nexport default function Logo({\n  className,\n  type = 'WISE',\n  format = 'default',\n  display = 'responsive',\n  size = 24,\n  'aria-label': ariaLabel,\n}: LogoProps) {\n  const isScreenSm = !useScreenSize(Breakpoint.SMALL);\n  const compact = display === 'compact' || (display === 'responsive' && isScreenSm);\n\n  const assetName = compact ? 'FastFlag' : getAssetName(type, format);\n  const Asset = logoAssets[assetName];\n  const sizes = logoAssetsDimensions[assetName];\n  const { width, height } =\n    logoAssetsDimensions[assetName][Number(size) as keyof typeof sizes] ?? sizes[24];\n\n  return (\n    <span\n      className={clsx('np-logo', className)}\n      role=\"img\"\n      aria-label={ariaLabel ?? labelByType[type]}\n      style={\n        {\n          '--wds-logo-width': `${width}px`,\n          '--wds-logo-height': `${height}px`,\n        } as React.CSSProperties\n      }\n    >\n      <Asset />\n    </span>\n  );\n}\n\nfunction getAssetName(type: `${LogoType}`, format: `${LogoFormat}`): LogoAssetName {\n  if (format !== 'default') {\n    if (type === 'WISE_BUSINESS') {\n      return format === 'secondary-lockup' ? 'WiseBusinessSecondary' : 'WiseBusinessPrimary';\n    }\n    if (type === 'WISE_PLATFORM') {\n      return format === 'secondary-lockup' ? 'WisePlatformSecondary' : 'WisePlatformPrimary';\n    }\n  }\n  return 'WiseLogo';\n}\n"],"names":["LogoType","LogoDisplay","LogoFormat","labelByType","WISE","WISE_BUSINESS","WISE_PLATFORM","logoAssets","FastFlag","WiseLogo","WiseBusinessPrimary","WiseBusinessSecondary","WisePlatformPrimary","WisePlatformSecondary","Logo","className","type","format","display","size","ariaLabel","isScreenSm","useScreenSize","Breakpoint","SMALL","compact","assetName","getAssetName","Asset","sizes","logoAssetsDimensions","width","height","Number","_jsx","clsx","role","style","children"],"mappings":"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"}

package/build/logo/logo-assets.js

@@ -4,39 +4,171 @@ var jsxRuntime = require('react/jsx-runtime');
 
 const logoAssetsDimensions = {
   FastFlag: {
-    width: 22,
-    height: 24
+    16: {
+      width: 16,
+      height: 16
+    },
+    18: {
+      width: 18,
+      height: 18
+    },
+    20: {
+      width: 20,
+      height: 20
+    },
+    24: {
+      width: 24,
+      height: 24
+    },
+    28: {
+      width: 28,
+      height: 28
+    },
+    36: {
+      width: 36,
+      height: 36
+    }
   },
   WiseLogo: {
-    width: 94,
-    height: 24
+    16: {
+      width: 64,
+      height: 16
+    },
+    18: {
+      width: 72,
+      height: 18
+    },
+    20: {
+      width: 80,
+      height: 20
+    },
+    24: {
+      width: 96,
+      height: 24
+    },
+    28: {
+      width: 112,
+      height: 28
+    },
+    36: {
+      width: 144,
+      height: 36
+    }
   },
   WiseBusinessPrimary: {
-    width: 210,
-    height: 24
+    16: {
+      width: 140,
+      height: 16
+    },
+    18: {
+      width: 157.5,
+      height: 18
+    },
+    20: {
+      width: 175,
+      height: 20
+    },
+    24: {
+      width: 210,
+      height: 24
+    },
+    28: {
+      width: 245,
+      height: 28
+    },
+    36: {
+      width: 315,
+      height: 36
+    }
   },
   WiseBusinessSecondary: {
-    width: 97,
-    height: 46
+    16: {
+      width: 68,
+      height: 32
+    },
+    18: {
+      width: 76.5,
+      height: 36
+    },
+    20: {
+      width: 85,
+      height: 40
+    },
+    24: {
+      width: 102,
+      height: 48
+    },
+    28: {
+      width: 119,
+      height: 56
+    },
+    36: {
+      width: 153,
+      height: 72
+    }
   },
   WisePlatformPrimary: {
-    width: 205,
-    height: 24
+    16: {
+      width: 136,
+      height: 16
+    },
+    18: {
+      width: 153,
+      height: 18
+    },
+    20: {
+      width: 170,
+      height: 20
+    },
+    24: {
+      width: 204,
+      height: 24
+    },
+    28: {
+      width: 238,
+      height: 28
+    },
+    36: {
+      width: 306,
+      height: 36
+    }
   },
   WisePlatformSecondary: {
-    width: 94,
-    height: 46
+    16: {
+      width: 64,
+      height: 32
+    },
+    18: {
+      width: 72,
+      height: 36
+    },
+    20: {
+      width: 80,
+      height: 40
+    },
+    24: {
+      width: 96,
+      height: 48
+    },
+    28: {
+      width: 112,
+      height: 56
+    },
+    36: {
+      width: 144,
+      height: 72
+    }
   }
 };
 function svgProps(name) {
   const {
     width,
     height
-  } = logoAssetsDimensions[name];
+  } = logoAssetsDimensions[name][24];
   return {
     xmlns: 'http://www.w3.org/2000/svg',
-    width,
-    height,
+    width: '100%',
+    height: '100%',
     viewBox: `0 0 ${width} ${height}`
   };
 }