@transferwise/components 46.138.0 → 46.140.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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BA,MAAMA,cAAc,GAAGA,CAAC;AACtBC,EAAAA,UAAU,GAAG,CAAC;EACdC,MAAM;AACNC,EAAAA,IAAI,gBAAGC,GAAA,CAACC,IAAI,IAAA,CAAG;AACfC,EAAAA,IAAI,GAAG,KAAK;EACZC,OAAO;EACPC,QAAQ;AACRC,EAAAA;AAAK,CACe,KAAI;AACxB,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE;EAEtB,MAAMC,WAAW,GAAGL,OAAO,IAAI,IAAI,iBAAIH,GAAA,CAACS,WAAW,EAAA;AAACC,IAAAA,IAAI,EAAC,IAAI;AAACC,IAAAA,OAAO,EAAER;AAAQ,IAAG;AAElF,EAAA,MAAMS,QAAQ,GAAGC,aAAa,CAACC,UAAU,CAACC,KAAK,CAAC;AAChD,EAAA,MAAMC,QAAQ,GAAGH,aAAa,CAACC,UAAU,CAACG,KAAK,CAAC;AAEhD,EAAA,MAAMC,SAAS,GAAGhB,IAAI,GAAG,IAAI,GAAGJ,MAAM;EAEtC,MAAMqB,aAAa,GAAGf,QAAQ,IAAI,IAAI,IAAIP,UAAU,GAAG,CAAC;AAExD,EAAA,oBACEG,GAAA,CAAA,KAAA,EAAA;AACEoB,IAAAA,SAAS,EAAEC,IAAI,CAAC,2EAA2E,EAAE;AAC3F,MAAA,mCAAmC,EAAE,CAACnB;AACvC,KAAA,CAAE;IAAAoB,QAAA,eAEHtB,GAAA,CAACuB,UAAU,EAAA;MACTH,SAAS,EAAEC,IAAI,CACb,mCAAmC,EACnCT,QAAQ,IAAI,IAAI,GACZ,4BAA4B,GAC5B;QACE,4BAA4B,EAAE,CAACA,QAAQ;AACvC;AACA,QAAA,wBAAwB,EAAEA,QAAQ;AAClC,QAAA,wBAAwB,EAAEI;AAC3B,OAAA,CACL;MACFQ,WAAW,eACTC,IAAA,CAAAC,QAAA,EAAA;QAAAJ,QAAA,EAAA,CACG,CAACV,QAAQ,IAAIO,aAAa,gBACzBnB,GAAA,CAAC2B,UAAU,EAAA;AACTjB,UAAAA,IAAI,EAAE,EAAG;AACTkB,UAAAA,QAAQ,EAAC,UAAU;AACnBC,UAAAA,IAAI,EAAC,SAAS;AACd,UAAA,YAAA,EAAYvB,IAAI,CAACwB,aAAa,CAACC,QAAQ,CAACC,IAAI,CAAE;AAC9CrB,UAAAA,OAAO,EAAEP,QAAS;AAAAkB,UAAAA,QAAA,eAElBtB,GAAA,CAACiC,SAAS,EAAA,EAAA;SACA,CAAC,gBAEbjC,GAAA,CAAA,KAAA,EAAA;AAAKoB,UAAAA,SAAS,EAAC,sBAAsB;AAAAE,UAAAA,QAAA,EAAEvB;SAAU,CAClD,EACA,CAACa,QAAQ,IAAI,CAACV,IAAI,iBACjBF,GAAA,CAACkC,aAAa,EAAA;AAACd,UAAAA,SAAS,EAAC,OAAO;AAACf,UAAAA,KAAK,EAAEA,KAAM;AAAC8B,UAAAA,WAAW,EAAEtC;AAAW,SAAA,CACxE;AAAA,OACH,CACD;AACDuC,MAAAA,YAAY,eACVX,IAAA,CAAA,KAAA,EAAA;AAAKL,QAAAA,SAAS,EAAC,iFAAiF;AAAAE,QAAAA,QAAA,GAC7FJ,SAAS,EACTA,SAAS,IAAIV,WAAW,iBAAIR,GAAA,CAAA,MAAA,EAAA;AAAMoB,UAAAA,SAAS,EAAC;SAAO,CAAG,EACtDZ,WAAW;AAAA,OACT,CACN;AACD6B,MAAAA,aAAa,EACX,CAACnC,IAAI,IAAIG,KAAK,CAACiC,MAAM,GAAG,CAAC,gBACvBtC,GAAA,CAACuC,OAAO,EAAA;AACN1C,QAAAA,UAAU,EAAEA,UAAW;AACvBQ,QAAAA,KAAK,EAAEA,KAAM;QACbe,SAAS,EAAEC,IAAI,CAAC,6BAA6B;OAAE,CAC/C,GACA,IACL;MACDmB,MAAM,EAAE,CAACxB,QAAQ,GAAGyB,MAAM,CAACC,QAAQ,GAAGD,MAAM,CAACE;KAAW;AAE5D,GAAK,CAAC;AAEV;;;;"}

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;;;;"}