@transferwise/components 46.50.1 → 46.51.0

package/build/selectOption/SelectOption.mjs

@@ -1,5 +1,5 @@
 import { useRef, useState } from 'react';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import Option from '../common/Option/Option.mjs';
 import Section from '../section/Section.mjs';
 import { Header } from '../header/Header.mjs';
@@ -43,11 +43,11 @@ function SelectOption({
   }
   function getOptions(isLargeScreen = false) {
     return /*#__PURE__*/jsx("div", {
-      className: classNames({
+      className: clsx({
         'np-select-option-list': isLargeScreen
       }),
       children: options.map((optionsSection, index) => /*#__PURE__*/jsxs(Section, {
-        className: classNames({
+        className: clsx({
           'p-x-2 p-y-1': isLargeScreen
         }),
         children: [optionsSection.title && /*#__PURE__*/jsx(Header, {
@@ -78,7 +78,7 @@ function SelectOption({
       }),
       title: (hasSelected ? selected : placeholder).title,
       content: (hasSelected ? selected : placeholder).content,
-      className: classNames('np-select-option', 'clickable', hasSelected ? 'np-select-option-selected' : 'np-select-option-placeholder', props.className),
+      className: clsx('np-select-option', 'clickable', hasSelected ? 'np-select-option-selected' : 'np-select-option-placeholder', props.className),
       button: /*#__PURE__*/jsx("button", {
         ...inputAttributes,
         type: "button",

package/build/selectOption/SelectOption.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SelectOption.mjs","sources":["../../src/selectOption/SelectOption.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { ActionButtonProps } from '../actionButton';\nimport classNames from 'classnames';\nimport Option from '../common/Option';\nimport type { OptionProps } from '../common/Option/Option';\nimport { Breakpoint, Position } from '../common';\nimport Section from '../section';\nimport Header from '../header';\nimport { HeaderProps } from '../header/Header';\nimport NavigationOption from '../navigationOption';\nimport NavigationOptionsList from '../navigationOptionsList';\nimport { useInputAttributes } from '../inputs/contexts';\nimport messages from './SelectOption.messages';\nimport { useIntl } from 'react-intl';\nimport ResponsivePanel from '../common/responsivePanel';\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport { ChevronDown, Plus } from '@transferwise/icons';\n\nexport type SelectOptiopsSection<T = unknown> = {\n  title?: HeaderProps['title'];\n  options: SelectOptionValue<T>[];\n};\n\nexport type SelectOptionValue<T = unknown> = Pick<\n  OptionProps,\n  'media' | 'title' | 'content' | 'disabled'\n> & {\n  value?: T;\n};\n\nexport type SelectOptionPlaceholder = Pick<OptionProps, 'media' | 'title' | 'content'> & {\n  actionLabel?: ActionButtonProps['children'];\n};\n\nexport type SelectOptionProps<T = unknown> = {\n  onChange: (selected: SelectOptionValue<T>) => void;\n  selected?: SelectOptionValue<T>;\n  options: SelectOptiopsSection<T>[];\n  placeholder: SelectOptionPlaceholder;\n} & Omit<\n  OptionProps,\n  'as' | 'title' | 'media' | 'content' | 'onClick' | 'onChange' | 'showMediaAtAllSizes' | 'decision'\n>;\n\nexport default function SelectOption<T>({\n  selected = undefined,\n  options,\n  onChange,\n  placeholder,\n  disabled,\n  ...props\n}: SelectOptionProps<T>) {\n  const intl = useIntl();\n  const rootRef = useRef(null);\n  const [showOptions, setShowOptions] = useState(false);\n\n  const hasSelected = selected !== undefined;\n  const isLargeScreen = useScreenSize(Breakpoint.SMALL);\n\n  const inputAttributes = useInputAttributes();\n  const ariaLabelledBy = props['aria-labelledby'] ?? inputAttributes?.['aria-labelledby'];\n\n  function handleOnClick(showOptionsStatus: boolean) {\n    return () => {\n      setShowOptions(showOptionsStatus);\n    };\n  }\n\n  function handleOnChange(data: SelectOptionValue<T>) {\n    return () => {\n      setShowOptions(false);\n      onChange(data);\n    };\n  }\n\n  function getOptions(isLargeScreen = false) {\n    return (\n      <div className={classNames({ 'np-select-option-list': isLargeScreen })}>\n        {options.map((optionsSection, index) => (\n          <Section key={index} className={classNames({ 'p-x-2 p-y-1': isLargeScreen })}>\n            {optionsSection.title && <Header title={optionsSection.title} />}\n            <NavigationOptionsList>\n              {optionsSection.options.map((option, index) => {\n                return (\n                  <NavigationOption\n                    key={index}\n                    isContainerAligned={!isLargeScreen}\n                    showMediaCircle\n                    showMediaAtAllSizes\n                    onClick={handleOnChange(option)}\n                    {...option}\n                  />\n                );\n              })}\n            </NavigationOptionsList>\n          </Section>\n        ))}\n      </div>\n    );\n  }\n\n  return (\n    <>\n      <Option\n        ref={rootRef}\n        as=\"div\"\n        showMediaAtAllSizes\n        disabled={disabled}\n        decision={false}\n        media={hasSelected ? selected.media : placeholder.media ?? <Plus size={24} />}\n        title={(hasSelected ? selected : placeholder).title}\n        content={(hasSelected ? selected : placeholder).content}\n        className={classNames(\n          'np-select-option',\n          'clickable',\n          hasSelected ? 'np-select-option-selected' : 'np-select-option-placeholder',\n          props.className,\n        )}\n        button={\n          <button\n            {...inputAttributes}\n            type=\"button\"\n            disabled={disabled}\n            aria-labelledby={ariaLabelledBy}\n            aria-haspopup=\"dialog\"\n            aria-expanded={showOptions}\n            className={hasSelected ? 'btn-unstyled' : 'np-action-btn'}\n            aria-label={hasSelected ? undefined : props['aria-label']}\n            onClick={handleOnClick(true)}\n          >\n            {hasSelected ? (\n              <ChevronDown title={intl.formatMessage(messages.selectedActionLabel)} />\n            ) : (\n              placeholder.actionLabel || intl.formatMessage(messages.actionLabel)\n            )}\n          </button>\n        }\n      />\n      <ResponsivePanel\n        anchorWidth\n        altAxis\n        anchorRef={rootRef}\n        open={showOptions}\n        position={Position.BOTTOM}\n        onClose={handleOnClick(false)}\n      >\n        {getOptions(isLargeScreen)}\n      </ResponsivePanel>\n    </>\n  );\n}\n"],"names":["SelectOption","selected","undefined","options","onChange","placeholder","disabled","props","intl","useIntl","rootRef","useRef","showOptions","setShowOptions","useState","hasSelected","isLargeScreen","useScreenSize","Breakpoint","SMALL","inputAttributes","useInputAttributes","ariaLabelledBy","handleOnClick","showOptionsStatus","handleOnChange","data","getOptions","_jsx","className","classNames","children","map","optionsSection","index","_jsxs","Section","title","Header","NavigationOptionsList","option","NavigationOption","isContainerAligned","showMediaCircle","showMediaAtAllSizes","onClick","_Fragment","Option","ref","as","decision","media","Plus","size","content","button","type","ChevronDown","formatMessage","messages","selectedActionLabel","actionLabel","ResponsivePanel","anchorWidth","altAxis","anchorRef","open","position","Position","BOTTOM","onClose"],"mappings":"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"}
+{"version":3,"file":"SelectOption.mjs","sources":["../../src/selectOption/SelectOption.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { ActionButtonProps } from '../actionButton';\nimport { clsx } from 'clsx';\nimport Option from '../common/Option';\nimport type { OptionProps } from '../common/Option/Option';\nimport { Breakpoint, Position } from '../common';\nimport Section from '../section';\nimport Header from '../header';\nimport { HeaderProps } from '../header/Header';\nimport NavigationOption from '../navigationOption';\nimport NavigationOptionsList from '../navigationOptionsList';\nimport { useInputAttributes } from '../inputs/contexts';\nimport messages from './SelectOption.messages';\nimport { useIntl } from 'react-intl';\nimport ResponsivePanel from '../common/responsivePanel';\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport { ChevronDown, Plus } from '@transferwise/icons';\n\nexport type SelectOptiopsSection<T = unknown> = {\n  title?: HeaderProps['title'];\n  options: SelectOptionValue<T>[];\n};\n\nexport type SelectOptionValue<T = unknown> = Pick<\n  OptionProps,\n  'media' | 'title' | 'content' | 'disabled'\n> & {\n  value?: T;\n};\n\nexport type SelectOptionPlaceholder = Pick<OptionProps, 'media' | 'title' | 'content'> & {\n  actionLabel?: ActionButtonProps['children'];\n};\n\nexport type SelectOptionProps<T = unknown> = {\n  onChange: (selected: SelectOptionValue<T>) => void;\n  selected?: SelectOptionValue<T>;\n  options: SelectOptiopsSection<T>[];\n  placeholder: SelectOptionPlaceholder;\n} & Omit<\n  OptionProps,\n  'as' | 'title' | 'media' | 'content' | 'onClick' | 'onChange' | 'showMediaAtAllSizes' | 'decision'\n>;\n\nexport default function SelectOption<T>({\n  selected = undefined,\n  options,\n  onChange,\n  placeholder,\n  disabled,\n  ...props\n}: SelectOptionProps<T>) {\n  const intl = useIntl();\n  const rootRef = useRef(null);\n  const [showOptions, setShowOptions] = useState(false);\n\n  const hasSelected = selected !== undefined;\n  const isLargeScreen = useScreenSize(Breakpoint.SMALL);\n\n  const inputAttributes = useInputAttributes();\n  const ariaLabelledBy = props['aria-labelledby'] ?? inputAttributes?.['aria-labelledby'];\n\n  function handleOnClick(showOptionsStatus: boolean) {\n    return () => {\n      setShowOptions(showOptionsStatus);\n    };\n  }\n\n  function handleOnChange(data: SelectOptionValue<T>) {\n    return () => {\n      setShowOptions(false);\n      onChange(data);\n    };\n  }\n\n  function getOptions(isLargeScreen = false) {\n    return (\n      <div className={clsx({ 'np-select-option-list': isLargeScreen })}>\n        {options.map((optionsSection, index) => (\n          <Section key={index} className={clsx({ 'p-x-2 p-y-1': isLargeScreen })}>\n            {optionsSection.title && <Header title={optionsSection.title} />}\n            <NavigationOptionsList>\n              {optionsSection.options.map((option, index) => {\n                return (\n                  <NavigationOption\n                    key={index}\n                    isContainerAligned={!isLargeScreen}\n                    showMediaCircle\n                    showMediaAtAllSizes\n                    onClick={handleOnChange(option)}\n                    {...option}\n                  />\n                );\n              })}\n            </NavigationOptionsList>\n          </Section>\n        ))}\n      </div>\n    );\n  }\n\n  return (\n    <>\n      <Option\n        ref={rootRef}\n        as=\"div\"\n        showMediaAtAllSizes\n        disabled={disabled}\n        decision={false}\n        media={hasSelected ? selected.media : (placeholder.media ?? <Plus size={24} />)}\n        title={(hasSelected ? selected : placeholder).title}\n        content={(hasSelected ? selected : placeholder).content}\n        className={clsx(\n          'np-select-option',\n          'clickable',\n          hasSelected ? 'np-select-option-selected' : 'np-select-option-placeholder',\n          props.className,\n        )}\n        button={\n          <button\n            {...inputAttributes}\n            type=\"button\"\n            disabled={disabled}\n            aria-labelledby={ariaLabelledBy}\n            aria-haspopup=\"dialog\"\n            aria-expanded={showOptions}\n            className={hasSelected ? 'btn-unstyled' : 'np-action-btn'}\n            aria-label={hasSelected ? undefined : props['aria-label']}\n            onClick={handleOnClick(true)}\n          >\n            {hasSelected ? (\n              <ChevronDown title={intl.formatMessage(messages.selectedActionLabel)} />\n            ) : (\n              placeholder.actionLabel || intl.formatMessage(messages.actionLabel)\n            )}\n          </button>\n        }\n      />\n      <ResponsivePanel\n        anchorWidth\n        altAxis\n        anchorRef={rootRef}\n        open={showOptions}\n        position={Position.BOTTOM}\n        onClose={handleOnClick(false)}\n      >\n        {getOptions(isLargeScreen)}\n      </ResponsivePanel>\n    </>\n  );\n}\n"],"names":["SelectOption","selected","undefined","options","onChange","placeholder","disabled","props","intl","useIntl","rootRef","useRef","showOptions","setShowOptions","useState","hasSelected","isLargeScreen","useScreenSize","Breakpoint","SMALL","inputAttributes","useInputAttributes","ariaLabelledBy","handleOnClick","showOptionsStatus","handleOnChange","data","getOptions","_jsx","className","clsx","children","map","optionsSection","index","_jsxs","Section","title","Header","NavigationOptionsList","option","NavigationOption","isContainerAligned","showMediaCircle","showMediaAtAllSizes","onClick","_Fragment","Option","ref","as","decision","media","Plus","size","content","button","type","ChevronDown","formatMessage","messages","selectedActionLabel","actionLabel","ResponsivePanel","anchorWidth","altAxis","anchorRef","open","position","Position","BOTTOM","onClose"],"mappings":"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"}

package/build/slidingPanel/SlidingPanel.js

@@ -2,15 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var classNames = require('classnames');
+var clsx = require('clsx');
 var React = require('react');
 var reactTransitionGroup = require('react-transition-group');
 var jsxRuntime = require('react/jsx-runtime');
 
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var classNames__default = /*#__PURE__*/_interopDefault(classNames);
-
 const EXIT_ANIMATION = 350;
 const SlidingPanel = /*#__PURE__*/React.forwardRef(({
   position = 'left',
@@ -41,7 +37,7 @@ const SlidingPanel = /*#__PURE__*/React.forwardRef(({
   }, /*#__PURE__*/jsxRuntime.jsx("div", {
     ref: localReference,
     "data-testid": testId,
-    className: classNames__default.default('sliding-panel', `sliding-panel--open-${position}`, showSlidingPanelBorder && `sliding-panel--border-${position}`, slidingPanelPositionFixed && 'sliding-panel--fixed', className),
+    className: clsx.clsx('sliding-panel', `sliding-panel--open-${position}`, showSlidingPanelBorder && `sliding-panel--border-${position}`, slidingPanelPositionFixed && 'sliding-panel--fixed', className),
     children: children
   }));
 });

package/build/slidingPanel/SlidingPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"SlidingPanel.js","sources":["../../src/slidingPanel/SlidingPanel.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { forwardRef, useImperativeHandle, useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport { Position } from '../common';\n\nexport const EXIT_ANIMATION = 350;\n\nexport interface SlidingPanelProps\n  extends Pick<React.ComponentPropsWithRef<'div'>, 'ref' | 'className' | 'children'> {\n  position?: `${Position.TOP | Position.RIGHT | Position.BOTTOM | Position.LEFT}`;\n  open: boolean;\n  showSlidingPanelBorder?: boolean;\n  slidingPanelPositionFixed?: boolean;\n  testId?: string;\n}\n\nconst SlidingPanel = forwardRef(\n  (\n    {\n      position = 'left',\n      open,\n      showSlidingPanelBorder,\n      slidingPanelPositionFixed,\n      className,\n      children,\n      testId,\n      ...rest\n    }: Omit<SlidingPanelProps, 'ref'>,\n    reference: React.ForwardedRef<HTMLDivElement | null>,\n  ) => {\n    const localReference = useRef<HTMLDivElement>(null as never);\n    useImperativeHandle(reference, () => localReference.current, []);\n\n    return (\n      <CSSTransition\n        {...rest}\n        key={`sliding-panel--open-${position}`}\n        nodeRef={localReference}\n        in={open}\n        // Wait for animation to finish before unmount.\n        timeout={{ enter: 0, exit: EXIT_ANIMATION }}\n        classNames=\"sliding-panel\"\n        appear\n        unmountOnExit\n      >\n        <div\n          ref={localReference}\n          data-testid={testId}\n          className={classNames(\n            'sliding-panel',\n            `sliding-panel--open-${position}`,\n            showSlidingPanelBorder && `sliding-panel--border-${position}`,\n            slidingPanelPositionFixed && 'sliding-panel--fixed',\n            className,\n          )}\n        >\n          {children}\n        </div>\n      </CSSTransition>\n    );\n  },\n);\n\nexport default SlidingPanel;\n"],"names":["EXIT_ANIMATION","SlidingPanel","forwardRef","position","open","showSlidingPanelBorder","slidingPanelPositionFixed","className","children","testId","rest","reference","localReference","useRef","useImperativeHandle","current","_createElement","CSSTransition","key","nodeRef","in","timeout","enter","exit","classNames","appear","unmountOnExit","_jsx","ref"],"mappings":";;;;;;;;;;;;;AAMO,MAAMA,cAAc,GAAG,IAAG;AAWjC,MAAMC,YAAY,gBAAGC,gBAAU,CAC7B,CACE;AACEC,EAAAA,QAAQ,GAAG,MAAM;EACjBC,IAAI;EACJC,sBAAsB;EACtBC,yBAAyB;EACzBC,SAAS;EACTC,QAAQ;EACRC,MAAM;EACN,GAAGC,IAAAA;AAC4B,CAAA,EACjCC,SAAoD,KAClD;AACF,EAAA,MAAMC,cAAc,GAAGC,YAAM,CAAiB,IAAa,CAAC,CAAA;EAC5DC,yBAAmB,CAACH,SAAS,EAAE,MAAMC,cAAc,CAACG,OAAO,EAAE,EAAE,CAAC,CAAA;EAEhE,oBACEC,mBAAA,CAACC,kCAAa,EAAA;AAAA,IAAA,GACRP,IAAI;IACRQ,GAAG,EAAE,CAAuBf,oBAAAA,EAAAA,QAAQ,CAAG,CAAA;AACvCgB,IAAAA,OAAO,EAAEP,cAAe;AACxBQ,IAAAA,EAAE,EAAEhB,IAAAA;AACJ;AAAA;AACAiB,IAAAA,OAAO,EAAE;AAAEC,MAAAA,KAAK,EAAE,CAAC;AAAEC,MAAAA,IAAI,EAAEvB,cAAAA;KAAiB;AAC5CwB,IAAAA,UAAU,EAAC,eAAe;IAC1BC,MAAM,EAAA,IAAA;IACNC,aAAa,EAAA,IAAA;AAAA,GAAA,eAEbC,cAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,GAAG,EAAEhB,cAAe;AACpB,IAAA,aAAA,EAAaH,MAAO;IACpBF,SAAS,EAAEiB,2BAAU,CACnB,eAAe,EACf,CAAuBrB,oBAAAA,EAAAA,QAAQ,EAAE,EACjCE,sBAAsB,IAAI,CAAyBF,sBAAAA,EAAAA,QAAQ,EAAE,EAC7DG,yBAAyB,IAAI,sBAAsB,EACnDC,SAAS,CACT;AAAAC,IAAAA,QAAA,EAEDA,QAAAA;AAAQ,GACN,CACQ,CAAC,CAAA;AAEpB,CAAC;;;;;"}
+{"version":3,"file":"SlidingPanel.js","sources":["../../src/slidingPanel/SlidingPanel.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef, useImperativeHandle, useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport { Position } from '../common';\n\nexport const EXIT_ANIMATION = 350;\n\nexport interface SlidingPanelProps\n  extends Pick<React.ComponentPropsWithRef<'div'>, 'ref' | 'className' | 'children'> {\n  position?: `${Position.TOP | Position.RIGHT | Position.BOTTOM | Position.LEFT}`;\n  open: boolean;\n  showSlidingPanelBorder?: boolean;\n  slidingPanelPositionFixed?: boolean;\n  testId?: string;\n}\n\nconst SlidingPanel = forwardRef(\n  (\n    {\n      position = 'left',\n      open,\n      showSlidingPanelBorder,\n      slidingPanelPositionFixed,\n      className,\n      children,\n      testId,\n      ...rest\n    }: Omit<SlidingPanelProps, 'ref'>,\n    reference: React.ForwardedRef<HTMLDivElement | null>,\n  ) => {\n    const localReference = useRef<HTMLDivElement>(null as never);\n    useImperativeHandle(reference, () => localReference.current, []);\n\n    return (\n      <CSSTransition\n        {...rest}\n        key={`sliding-panel--open-${position}`}\n        nodeRef={localReference}\n        in={open}\n        // Wait for animation to finish before unmount.\n        timeout={{ enter: 0, exit: EXIT_ANIMATION }}\n        classNames=\"sliding-panel\"\n        appear\n        unmountOnExit\n      >\n        <div\n          ref={localReference}\n          data-testid={testId}\n          className={clsx(\n            'sliding-panel',\n            `sliding-panel--open-${position}`,\n            showSlidingPanelBorder && `sliding-panel--border-${position}`,\n            slidingPanelPositionFixed && 'sliding-panel--fixed',\n            className,\n          )}\n        >\n          {children}\n        </div>\n      </CSSTransition>\n    );\n  },\n);\n\nexport default SlidingPanel;\n"],"names":["EXIT_ANIMATION","SlidingPanel","forwardRef","position","open","showSlidingPanelBorder","slidingPanelPositionFixed","className","children","testId","rest","reference","localReference","useRef","useImperativeHandle","current","_createElement","CSSTransition","key","nodeRef","in","timeout","enter","exit","classNames","appear","unmountOnExit","_jsx","ref","clsx"],"mappings":";;;;;;;;;AAMO,MAAMA,cAAc,GAAG,IAAG;AAWjC,MAAMC,YAAY,gBAAGC,gBAAU,CAC7B,CACE;AACEC,EAAAA,QAAQ,GAAG,MAAM;EACjBC,IAAI;EACJC,sBAAsB;EACtBC,yBAAyB;EACzBC,SAAS;EACTC,QAAQ;EACRC,MAAM;EACN,GAAGC,IAAAA;AAC4B,CAAA,EACjCC,SAAoD,KAClD;AACF,EAAA,MAAMC,cAAc,GAAGC,YAAM,CAAiB,IAAa,CAAC,CAAA;EAC5DC,yBAAmB,CAACH,SAAS,EAAE,MAAMC,cAAc,CAACG,OAAO,EAAE,EAAE,CAAC,CAAA;EAEhE,oBACEC,mBAAA,CAACC,kCAAa,EAAA;AAAA,IAAA,GACRP,IAAI;IACRQ,GAAG,EAAE,CAAuBf,oBAAAA,EAAAA,QAAQ,CAAG,CAAA;AACvCgB,IAAAA,OAAO,EAAEP,cAAe;AACxBQ,IAAAA,EAAE,EAAEhB,IAAAA;AACJ;AAAA;AACAiB,IAAAA,OAAO,EAAE;AAAEC,MAAAA,KAAK,EAAE,CAAC;AAAEC,MAAAA,IAAI,EAAEvB,cAAAA;KAAiB;AAC5CwB,IAAAA,UAAU,EAAC,eAAe;IAC1BC,MAAM,EAAA,IAAA;IACNC,aAAa,EAAA,IAAA;AAAA,GAAA,eAEbC,cAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,GAAG,EAAEhB,cAAe;AACpB,IAAA,aAAA,EAAaH,MAAO;IACpBF,SAAS,EAAEsB,SAAI,CACb,eAAe,EACf,CAAuB1B,oBAAAA,EAAAA,QAAQ,EAAE,EACjCE,sBAAsB,IAAI,CAAyBF,sBAAAA,EAAAA,QAAQ,EAAE,EAC7DG,yBAAyB,IAAI,sBAAsB,EACnDC,SAAS,CACT;AAAAC,IAAAA,QAAA,EAEDA,QAAAA;AAAQ,GACN,CACQ,CAAC,CAAA;AAEpB,CAAC;;;;;"}

package/build/slidingPanel/SlidingPanel.mjs

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { forwardRef, useRef, useImperativeHandle, createElement } from 'react';
 import { CSSTransition } from 'react-transition-group';
 import { jsx } from 'react/jsx-runtime';
@@ -33,7 +33,7 @@ const SlidingPanel = /*#__PURE__*/forwardRef(({
   }, /*#__PURE__*/jsx("div", {
     ref: localReference,
     "data-testid": testId,
-    className: classNames('sliding-panel', `sliding-panel--open-${position}`, showSlidingPanelBorder && `sliding-panel--border-${position}`, slidingPanelPositionFixed && 'sliding-panel--fixed', className),
+    className: clsx('sliding-panel', `sliding-panel--open-${position}`, showSlidingPanelBorder && `sliding-panel--border-${position}`, slidingPanelPositionFixed && 'sliding-panel--fixed', className),
     children: children
   }));
 });

package/build/slidingPanel/SlidingPanel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SlidingPanel.mjs","sources":["../../src/slidingPanel/SlidingPanel.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { forwardRef, useImperativeHandle, useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport { Position } from '../common';\n\nexport const EXIT_ANIMATION = 350;\n\nexport interface SlidingPanelProps\n  extends Pick<React.ComponentPropsWithRef<'div'>, 'ref' | 'className' | 'children'> {\n  position?: `${Position.TOP | Position.RIGHT | Position.BOTTOM | Position.LEFT}`;\n  open: boolean;\n  showSlidingPanelBorder?: boolean;\n  slidingPanelPositionFixed?: boolean;\n  testId?: string;\n}\n\nconst SlidingPanel = forwardRef(\n  (\n    {\n      position = 'left',\n      open,\n      showSlidingPanelBorder,\n      slidingPanelPositionFixed,\n      className,\n      children,\n      testId,\n      ...rest\n    }: Omit<SlidingPanelProps, 'ref'>,\n    reference: React.ForwardedRef<HTMLDivElement | null>,\n  ) => {\n    const localReference = useRef<HTMLDivElement>(null as never);\n    useImperativeHandle(reference, () => localReference.current, []);\n\n    return (\n      <CSSTransition\n        {...rest}\n        key={`sliding-panel--open-${position}`}\n        nodeRef={localReference}\n        in={open}\n        // Wait for animation to finish before unmount.\n        timeout={{ enter: 0, exit: EXIT_ANIMATION }}\n        classNames=\"sliding-panel\"\n        appear\n        unmountOnExit\n      >\n        <div\n          ref={localReference}\n          data-testid={testId}\n          className={classNames(\n            'sliding-panel',\n            `sliding-panel--open-${position}`,\n            showSlidingPanelBorder && `sliding-panel--border-${position}`,\n            slidingPanelPositionFixed && 'sliding-panel--fixed',\n            className,\n          )}\n        >\n          {children}\n        </div>\n      </CSSTransition>\n    );\n  },\n);\n\nexport default SlidingPanel;\n"],"names":["EXIT_ANIMATION","SlidingPanel","forwardRef","position","open","showSlidingPanelBorder","slidingPanelPositionFixed","className","children","testId","rest","reference","localReference","useRef","useImperativeHandle","current","_createElement","CSSTransition","key","nodeRef","in","timeout","enter","exit","classNames","appear","unmountOnExit","_jsx","ref"],"mappings":";;;;;AAMO,MAAMA,cAAc,GAAG,IAAG;AAWjC,MAAMC,YAAY,gBAAGC,UAAU,CAC7B,CACE;AACEC,EAAAA,QAAQ,GAAG,MAAM;EACjBC,IAAI;EACJC,sBAAsB;EACtBC,yBAAyB;EACzBC,SAAS;EACTC,QAAQ;EACRC,MAAM;EACN,GAAGC,IAAAA;AAC4B,CAAA,EACjCC,SAAoD,KAClD;AACF,EAAA,MAAMC,cAAc,GAAGC,MAAM,CAAiB,IAAa,CAAC,CAAA;EAC5DC,mBAAmB,CAACH,SAAS,EAAE,MAAMC,cAAc,CAACG,OAAO,EAAE,EAAE,CAAC,CAAA;EAEhE,oBACEC,aAAA,CAACC,aAAa,EAAA;AAAA,IAAA,GACRP,IAAI;IACRQ,GAAG,EAAE,CAAuBf,oBAAAA,EAAAA,QAAQ,CAAG,CAAA;AACvCgB,IAAAA,OAAO,EAAEP,cAAe;AACxBQ,IAAAA,EAAE,EAAEhB,IAAAA;AACJ;AAAA;AACAiB,IAAAA,OAAO,EAAE;AAAEC,MAAAA,KAAK,EAAE,CAAC;AAAEC,MAAAA,IAAI,EAAEvB,cAAAA;KAAiB;AAC5CwB,IAAAA,UAAU,EAAC,eAAe;IAC1BC,MAAM,EAAA,IAAA;IACNC,aAAa,EAAA,IAAA;AAAA,GAAA,eAEbC,GAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,GAAG,EAAEhB,cAAe;AACpB,IAAA,aAAA,EAAaH,MAAO;IACpBF,SAAS,EAAEiB,UAAU,CACnB,eAAe,EACf,CAAuBrB,oBAAAA,EAAAA,QAAQ,EAAE,EACjCE,sBAAsB,IAAI,CAAyBF,sBAAAA,EAAAA,QAAQ,EAAE,EAC7DG,yBAAyB,IAAI,sBAAsB,EACnDC,SAAS,CACT;AAAAC,IAAAA,QAAA,EAEDA,QAAAA;AAAQ,GACN,CACQ,CAAC,CAAA;AAEpB,CAAC;;;;"}
+{"version":3,"file":"SlidingPanel.mjs","sources":["../../src/slidingPanel/SlidingPanel.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef, useImperativeHandle, useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport { Position } from '../common';\n\nexport const EXIT_ANIMATION = 350;\n\nexport interface SlidingPanelProps\n  extends Pick<React.ComponentPropsWithRef<'div'>, 'ref' | 'className' | 'children'> {\n  position?: `${Position.TOP | Position.RIGHT | Position.BOTTOM | Position.LEFT}`;\n  open: boolean;\n  showSlidingPanelBorder?: boolean;\n  slidingPanelPositionFixed?: boolean;\n  testId?: string;\n}\n\nconst SlidingPanel = forwardRef(\n  (\n    {\n      position = 'left',\n      open,\n      showSlidingPanelBorder,\n      slidingPanelPositionFixed,\n      className,\n      children,\n      testId,\n      ...rest\n    }: Omit<SlidingPanelProps, 'ref'>,\n    reference: React.ForwardedRef<HTMLDivElement | null>,\n  ) => {\n    const localReference = useRef<HTMLDivElement>(null as never);\n    useImperativeHandle(reference, () => localReference.current, []);\n\n    return (\n      <CSSTransition\n        {...rest}\n        key={`sliding-panel--open-${position}`}\n        nodeRef={localReference}\n        in={open}\n        // Wait for animation to finish before unmount.\n        timeout={{ enter: 0, exit: EXIT_ANIMATION }}\n        classNames=\"sliding-panel\"\n        appear\n        unmountOnExit\n      >\n        <div\n          ref={localReference}\n          data-testid={testId}\n          className={clsx(\n            'sliding-panel',\n            `sliding-panel--open-${position}`,\n            showSlidingPanelBorder && `sliding-panel--border-${position}`,\n            slidingPanelPositionFixed && 'sliding-panel--fixed',\n            className,\n          )}\n        >\n          {children}\n        </div>\n      </CSSTransition>\n    );\n  },\n);\n\nexport default SlidingPanel;\n"],"names":["EXIT_ANIMATION","SlidingPanel","forwardRef","position","open","showSlidingPanelBorder","slidingPanelPositionFixed","className","children","testId","rest","reference","localReference","useRef","useImperativeHandle","current","_createElement","CSSTransition","key","nodeRef","in","timeout","enter","exit","classNames","appear","unmountOnExit","_jsx","ref","clsx"],"mappings":";;;;;AAMO,MAAMA,cAAc,GAAG,IAAG;AAWjC,MAAMC,YAAY,gBAAGC,UAAU,CAC7B,CACE;AACEC,EAAAA,QAAQ,GAAG,MAAM;EACjBC,IAAI;EACJC,sBAAsB;EACtBC,yBAAyB;EACzBC,SAAS;EACTC,QAAQ;EACRC,MAAM;EACN,GAAGC,IAAAA;AAC4B,CAAA,EACjCC,SAAoD,KAClD;AACF,EAAA,MAAMC,cAAc,GAAGC,MAAM,CAAiB,IAAa,CAAC,CAAA;EAC5DC,mBAAmB,CAACH,SAAS,EAAE,MAAMC,cAAc,CAACG,OAAO,EAAE,EAAE,CAAC,CAAA;EAEhE,oBACEC,aAAA,CAACC,aAAa,EAAA;AAAA,IAAA,GACRP,IAAI;IACRQ,GAAG,EAAE,CAAuBf,oBAAAA,EAAAA,QAAQ,CAAG,CAAA;AACvCgB,IAAAA,OAAO,EAAEP,cAAe;AACxBQ,IAAAA,EAAE,EAAEhB,IAAAA;AACJ;AAAA;AACAiB,IAAAA,OAAO,EAAE;AAAEC,MAAAA,KAAK,EAAE,CAAC;AAAEC,MAAAA,IAAI,EAAEvB,cAAAA;KAAiB;AAC5CwB,IAAAA,UAAU,EAAC,eAAe;IAC1BC,MAAM,EAAA,IAAA;IACNC,aAAa,EAAA,IAAA;AAAA,GAAA,eAEbC,GAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,GAAG,EAAEhB,cAAe;AACpB,IAAA,aAAA,EAAaH,MAAO;IACpBF,SAAS,EAAEsB,IAAI,CACb,eAAe,EACf,CAAuB1B,oBAAAA,EAAAA,QAAQ,EAAE,EACjCE,sBAAsB,IAAI,CAAyBF,sBAAAA,EAAAA,QAAQ,EAAE,EAC7DG,yBAAyB,IAAI,sBAAsB,EACnDC,SAAS,CACT;AAAAC,IAAAA,QAAA,EAEDA,QAAAA;AAAQ,GACN,CACQ,CAAC,CAAA;AAEpB,CAAC;;;;"}

package/build/statusIcon/StatusIcon.js

@@ -1,13 +1,9 @@
 'use strict';
 
 var icons = require('@transferwise/icons');
-var classNames = require('classnames');
+var clsx = require('clsx');
 var jsxRuntime = require('react/jsx-runtime');
 
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var classNames__default = /*#__PURE__*/_interopDefault(classNames);
-
 const iconTypeMap = {
   positive: icons.Check,
   neutral: icons.Info,
@@ -26,9 +22,9 @@ const StatusIcon = ({
   const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';
   return /*#__PURE__*/jsxRuntime.jsx("span", {
     "data-testid": "status-icon",
-    className: classNames__default.default('status-circle', `status-circle-${size}`, sentiment),
+    className: clsx.clsx('status-circle', `status-circle-${size}`, sentiment),
     children: /*#__PURE__*/jsxRuntime.jsx(Icon, {
-      className: classNames__default.default('status-icon', iconColor)
+      className: clsx.clsx('status-icon', iconColor)
     })
   });
 };

package/build/statusIcon/StatusIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusIcon.js","sources":["../../src/statusIcon/StatusIcon.tsx"],"sourcesContent":["import { Info, Alert, Cross, Check, ClockBorderless } from '@transferwise/icons';\nimport classNames from 'classnames';\n\nimport { SizeSmall, SizeMedium, SizeLarge, Sentiment } from '../common';\n\nexport type StatusIconProps = {\n  sentiment: `${Sentiment}`;\n  size: SizeSmall | SizeMedium | SizeLarge;\n};\n\nconst iconTypeMap = {\n  positive: Check,\n  neutral: Info,\n  warning: Alert,\n  negative: Cross,\n  pending: ClockBorderless,\n  info: Info,\n  error: Cross,\n  success: Check,\n} satisfies Record<`${Sentiment}`, React.ElementType>;\n\nconst StatusIcon = ({ sentiment = 'neutral', size = 'md' }: StatusIconProps) => {\n  const Icon = iconTypeMap[sentiment];\n  const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';\n\n  return (\n    <span\n      data-testid=\"status-icon\"\n      className={classNames('status-circle', `status-circle-${size}`, sentiment)}\n    >\n      <Icon className={classNames('status-icon', iconColor)} />\n    </span>\n  );\n};\n\nexport default StatusIcon;\n"],"names":["iconTypeMap","positive","Check","neutral","Info","warning","Alert","negative","Cross","pending","ClockBorderless","info","error","success","StatusIcon","sentiment","size","Icon","iconColor","_jsx","className","classNames","children"],"mappings":";;;;;;;;;;AAUA,MAAMA,WAAW,GAAG;AAClBC,EAAAA,QAAQ,EAAEC,WAAK;AACfC,EAAAA,OAAO,EAAEC,UAAI;AACbC,EAAAA,OAAO,EAAEC,WAAK;AACdC,EAAAA,QAAQ,EAAEC,WAAK;AACfC,EAAAA,OAAO,EAAEC,qBAAe;AACxBC,EAAAA,IAAI,EAAEP,UAAI;AACVQ,EAAAA,KAAK,EAAEJ,WAAK;AACZK,EAAAA,OAAO,EAAEX,WAAAA;CAC0C,CAAA;AAE/CY,MAAAA,UAAU,GAAGA,CAAC;AAAEC,EAAAA,SAAS,GAAG,SAAS;AAAEC,EAAAA,IAAI,GAAG,IAAA;AAAI,CAAmB,KAAI;AAC7E,EAAA,MAAMC,IAAI,GAAGjB,WAAW,CAACe,SAAS,CAAC,CAAA;AACnC,EAAA,MAAMG,SAAS,GAAGH,SAAS,KAAK,SAAS,IAAIA,SAAS,KAAK,SAAS,GAAG,MAAM,GAAG,OAAO,CAAA;AAEvF,EAAA,oBACEI,cAAA,CAAA,MAAA,EAAA;AACE,IAAA,aAAA,EAAY,aAAa;IACzBC,SAAS,EAAEC,2BAAU,CAAC,eAAe,EAAE,iBAAiBL,IAAI,CAAA,CAAE,EAAED,SAAS,CAAE;IAAAO,QAAA,eAE3EH,cAAA,CAACF,IAAI,EAAA;AAACG,MAAAA,SAAS,EAAEC,2BAAU,CAAC,aAAa,EAAEH,SAAS,CAAA;KACtD,CAAA;AAAA,GAAM,CAAC,CAAA;AAEX;;;;"}
+{"version":3,"file":"StatusIcon.js","sources":["../../src/statusIcon/StatusIcon.tsx"],"sourcesContent":["import { Info, Alert, Cross, Check, ClockBorderless } from '@transferwise/icons';\nimport { clsx } from 'clsx';\n\nimport { SizeSmall, SizeMedium, SizeLarge, Sentiment } from '../common';\n\nexport type StatusIconProps = {\n  sentiment: `${Sentiment}`;\n  size: SizeSmall | SizeMedium | SizeLarge;\n};\n\nconst iconTypeMap = {\n  positive: Check,\n  neutral: Info,\n  warning: Alert,\n  negative: Cross,\n  pending: ClockBorderless,\n  info: Info,\n  error: Cross,\n  success: Check,\n} satisfies Record<`${Sentiment}`, React.ElementType>;\n\nconst StatusIcon = ({ sentiment = 'neutral', size = 'md' }: StatusIconProps) => {\n  const Icon = iconTypeMap[sentiment];\n  const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';\n\n  return (\n    <span\n      data-testid=\"status-icon\"\n      className={clsx('status-circle', `status-circle-${size}`, sentiment)}\n    >\n      <Icon className={clsx('status-icon', iconColor)} />\n    </span>\n  );\n};\n\nexport default StatusIcon;\n"],"names":["iconTypeMap","positive","Check","neutral","Info","warning","Alert","negative","Cross","pending","ClockBorderless","info","error","success","StatusIcon","sentiment","size","Icon","iconColor","_jsx","className","clsx","children"],"mappings":";;;;;;AAUA,MAAMA,WAAW,GAAG;AAClBC,EAAAA,QAAQ,EAAEC,WAAK;AACfC,EAAAA,OAAO,EAAEC,UAAI;AACbC,EAAAA,OAAO,EAAEC,WAAK;AACdC,EAAAA,QAAQ,EAAEC,WAAK;AACfC,EAAAA,OAAO,EAAEC,qBAAe;AACxBC,EAAAA,IAAI,EAAEP,UAAI;AACVQ,EAAAA,KAAK,EAAEJ,WAAK;AACZK,EAAAA,OAAO,EAAEX,WAAAA;CAC0C,CAAA;AAE/CY,MAAAA,UAAU,GAAGA,CAAC;AAAEC,EAAAA,SAAS,GAAG,SAAS;AAAEC,EAAAA,IAAI,GAAG,IAAA;AAAI,CAAmB,KAAI;AAC7E,EAAA,MAAMC,IAAI,GAAGjB,WAAW,CAACe,SAAS,CAAC,CAAA;AACnC,EAAA,MAAMG,SAAS,GAAGH,SAAS,KAAK,SAAS,IAAIA,SAAS,KAAK,SAAS,GAAG,MAAM,GAAG,OAAO,CAAA;AAEvF,EAAA,oBACEI,cAAA,CAAA,MAAA,EAAA;AACE,IAAA,aAAA,EAAY,aAAa;IACzBC,SAAS,EAAEC,SAAI,CAAC,eAAe,EAAE,iBAAiBL,IAAI,CAAA,CAAE,EAAED,SAAS,CAAE;IAAAO,QAAA,eAErEH,cAAA,CAACF,IAAI,EAAA;AAACG,MAAAA,SAAS,EAAEC,SAAI,CAAC,aAAa,EAAEH,SAAS,CAAA;KAChD,CAAA;AAAA,GAAM,CAAC,CAAA;AAEX;;;;"}

package/build/statusIcon/StatusIcon.mjs

@@ -1,5 +1,5 @@
 import { Check, Info, Alert, Cross, ClockBorderless } from '@transferwise/icons';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { jsx } from 'react/jsx-runtime';
 
 const iconTypeMap = {
@@ -20,9 +20,9 @@ const StatusIcon = ({
   const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';
   return /*#__PURE__*/jsx("span", {
     "data-testid": "status-icon",
-    className: classNames('status-circle', `status-circle-${size}`, sentiment),
+    className: clsx('status-circle', `status-circle-${size}`, sentiment),
     children: /*#__PURE__*/jsx(Icon, {
-      className: classNames('status-icon', iconColor)
+      className: clsx('status-icon', iconColor)
     })
   });
 };

package/build/statusIcon/StatusIcon.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"StatusIcon.mjs","sources":["../../src/statusIcon/StatusIcon.tsx"],"sourcesContent":["import { Info, Alert, Cross, Check, ClockBorderless } from '@transferwise/icons';\nimport classNames from 'classnames';\n\nimport { SizeSmall, SizeMedium, SizeLarge, Sentiment } from '../common';\n\nexport type StatusIconProps = {\n  sentiment: `${Sentiment}`;\n  size: SizeSmall | SizeMedium | SizeLarge;\n};\n\nconst iconTypeMap = {\n  positive: Check,\n  neutral: Info,\n  warning: Alert,\n  negative: Cross,\n  pending: ClockBorderless,\n  info: Info,\n  error: Cross,\n  success: Check,\n} satisfies Record<`${Sentiment}`, React.ElementType>;\n\nconst StatusIcon = ({ sentiment = 'neutral', size = 'md' }: StatusIconProps) => {\n  const Icon = iconTypeMap[sentiment];\n  const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';\n\n  return (\n    <span\n      data-testid=\"status-icon\"\n      className={classNames('status-circle', `status-circle-${size}`, sentiment)}\n    >\n      <Icon className={classNames('status-icon', iconColor)} />\n    </span>\n  );\n};\n\nexport default StatusIcon;\n"],"names":["iconTypeMap","positive","Check","neutral","Info","warning","Alert","negative","Cross","pending","ClockBorderless","info","error","success","StatusIcon","sentiment","size","Icon","iconColor","_jsx","className","classNames","children"],"mappings":";;;;AAUA,MAAMA,WAAW,GAAG;AAClBC,EAAAA,QAAQ,EAAEC,KAAK;AACfC,EAAAA,OAAO,EAAEC,IAAI;AACbC,EAAAA,OAAO,EAAEC,KAAK;AACdC,EAAAA,QAAQ,EAAEC,KAAK;AACfC,EAAAA,OAAO,EAAEC,eAAe;AACxBC,EAAAA,IAAI,EAAEP,IAAI;AACVQ,EAAAA,KAAK,EAAEJ,KAAK;AACZK,EAAAA,OAAO,EAAEX,KAAAA;CAC0C,CAAA;AAE/CY,MAAAA,UAAU,GAAGA,CAAC;AAAEC,EAAAA,SAAS,GAAG,SAAS;AAAEC,EAAAA,IAAI,GAAG,IAAA;AAAI,CAAmB,KAAI;AAC7E,EAAA,MAAMC,IAAI,GAAGjB,WAAW,CAACe,SAAS,CAAC,CAAA;AACnC,EAAA,MAAMG,SAAS,GAAGH,SAAS,KAAK,SAAS,IAAIA,SAAS,KAAK,SAAS,GAAG,MAAM,GAAG,OAAO,CAAA;AAEvF,EAAA,oBACEI,GAAA,CAAA,MAAA,EAAA;AACE,IAAA,aAAA,EAAY,aAAa;IACzBC,SAAS,EAAEC,UAAU,CAAC,eAAe,EAAE,iBAAiBL,IAAI,CAAA,CAAE,EAAED,SAAS,CAAE;IAAAO,QAAA,eAE3EH,GAAA,CAACF,IAAI,EAAA;AAACG,MAAAA,SAAS,EAAEC,UAAU,CAAC,aAAa,EAAEH,SAAS,CAAA;KACtD,CAAA;AAAA,GAAM,CAAC,CAAA;AAEX;;;;"}
+{"version":3,"file":"StatusIcon.mjs","sources":["../../src/statusIcon/StatusIcon.tsx"],"sourcesContent":["import { Info, Alert, Cross, Check, ClockBorderless } from '@transferwise/icons';\nimport { clsx } from 'clsx';\n\nimport { SizeSmall, SizeMedium, SizeLarge, Sentiment } from '../common';\n\nexport type StatusIconProps = {\n  sentiment: `${Sentiment}`;\n  size: SizeSmall | SizeMedium | SizeLarge;\n};\n\nconst iconTypeMap = {\n  positive: Check,\n  neutral: Info,\n  warning: Alert,\n  negative: Cross,\n  pending: ClockBorderless,\n  info: Info,\n  error: Cross,\n  success: Check,\n} satisfies Record<`${Sentiment}`, React.ElementType>;\n\nconst StatusIcon = ({ sentiment = 'neutral', size = 'md' }: StatusIconProps) => {\n  const Icon = iconTypeMap[sentiment];\n  const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';\n\n  return (\n    <span\n      data-testid=\"status-icon\"\n      className={clsx('status-circle', `status-circle-${size}`, sentiment)}\n    >\n      <Icon className={clsx('status-icon', iconColor)} />\n    </span>\n  );\n};\n\nexport default StatusIcon;\n"],"names":["iconTypeMap","positive","Check","neutral","Info","warning","Alert","negative","Cross","pending","ClockBorderless","info","error","success","StatusIcon","sentiment","size","Icon","iconColor","_jsx","className","clsx","children"],"mappings":";;;;AAUA,MAAMA,WAAW,GAAG;AAClBC,EAAAA,QAAQ,EAAEC,KAAK;AACfC,EAAAA,OAAO,EAAEC,IAAI;AACbC,EAAAA,OAAO,EAAEC,KAAK;AACdC,EAAAA,QAAQ,EAAEC,KAAK;AACfC,EAAAA,OAAO,EAAEC,eAAe;AACxBC,EAAAA,IAAI,EAAEP,IAAI;AACVQ,EAAAA,KAAK,EAAEJ,KAAK;AACZK,EAAAA,OAAO,EAAEX,KAAAA;CAC0C,CAAA;AAE/CY,MAAAA,UAAU,GAAGA,CAAC;AAAEC,EAAAA,SAAS,GAAG,SAAS;AAAEC,EAAAA,IAAI,GAAG,IAAA;AAAI,CAAmB,KAAI;AAC7E,EAAA,MAAMC,IAAI,GAAGjB,WAAW,CAACe,SAAS,CAAC,CAAA;AACnC,EAAA,MAAMG,SAAS,GAAGH,SAAS,KAAK,SAAS,IAAIA,SAAS,KAAK,SAAS,GAAG,MAAM,GAAG,OAAO,CAAA;AAEvF,EAAA,oBACEI,GAAA,CAAA,MAAA,EAAA;AACE,IAAA,aAAA,EAAY,aAAa;IACzBC,SAAS,EAAEC,IAAI,CAAC,eAAe,EAAE,iBAAiBL,IAAI,CAAA,CAAE,EAAED,SAAS,CAAE;IAAAO,QAAA,eAErEH,GAAA,CAACF,IAAI,EAAA;AAACG,MAAAA,SAAS,EAAEC,IAAI,CAAC,aAAa,EAAEH,SAAS,CAAA;KAChD,CAAA;AAAA,GAAM,CAAC,CAAA;AAEX;;;;"}

package/build/stepper/Stepper.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var classNames = require('classnames');
+var clsx = require('clsx');
 require('react');
 var Tooltip = require('../tooltip/Tooltip.js');
 var deviceDetection = require('./deviceDetection.js');
@@ -8,10 +8,6 @@ var jsxRuntime = require('react/jsx-runtime');
 var useDirection = require('../common/hooks/useDirection/useDirection.js');
 var position = require('../common/propsValues/position.js');
 
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var classNames__default = /*#__PURE__*/_interopDefault(classNames);
-
 function clamp(from, to, value) {
   return Math.max(Math.min(to, value), from);
 }
@@ -48,7 +44,7 @@ const Stepper = ({
       children: step.label
     });
     return /*#__PURE__*/jsxRuntime.jsx("li", {
-      className: classNames__default.default('hidden-xs', 'tw-stepper__step', active ? 'np-text-body-default-bold tw-stepper__step--active' : 'np-text-body-default', clickable && 'tw-stepper__step--clickable', step.hoverLabel && 'tw-stepper__step--has-tooltip'),
+      className: clsx.clsx('hidden-xs', 'tw-stepper__step', active ? 'np-text-body-default-bold tw-stepper__step--active' : 'np-text-body-default', clickable && 'tw-stepper__step--clickable', step.hoverLabel && 'tw-stepper__step--has-tooltip'),
       "aria-current": active ? 'step' : false,
       style: isRTL ? {
         right: `${index * stepPercentage * 100}%`
@@ -63,7 +59,7 @@ const Stepper = ({
     }, index);
   };
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: classNames__default.default('tw-stepper', className),
+    className: clsx.clsx('tw-stepper', className),
     children: [/*#__PURE__*/jsxRuntime.jsx("div", {
       className: "progress",
       children: /*#__PURE__*/jsxRuntime.jsx("div", {

package/build/stepper/Stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.js","sources":["../../src/stepper/Stepper.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport * as React from 'react';\n\nimport { Position } from '../common';\nimport { useDirection } from '../common/hooks';\nimport Tooltip from '../tooltip';\n\nimport { isTouchDevice } from './deviceDetection';\n\nfunction clamp(from: number, to: number, value: number) {\n  return Math.max(Math.min(to, value), from);\n}\n\nexport interface Step {\n  label: React.ReactNode;\n  onClick?: () => void;\n  hoverLabel?: React.ReactNode;\n}\n\nexport interface StepperProps {\n  steps: readonly Step[];\n  activeStep?: number;\n  className?: string;\n}\n\n/**\n * This component is considered user-unfriendly and inaccessible on its own and will likely be made internal in the future. Please use `FlowNavigation` instead.\n * @see https://storybook.wise.design/?path=/story/navigation-flownavigation--variants\n */\nconst Stepper = ({ steps, activeStep = 0, className }: StepperProps) => {\n  const { isRTL } = useDirection();\n\n  if (steps.length === 0) {\n    return null;\n  }\n\n  const activeStepIndex = clamp(0, steps.length - 1, activeStep);\n  const stepPercentage = 1 / (steps.length - 1);\n  const percentageCompleted = activeStepIndex / (steps.length - 1);\n\n  const renderStep = (step: Step, index: number) => {\n    const active = index === activeStepIndex;\n    const clickable = step.onClick && !active;\n\n    const labelButton = clickable ? (\n      <button\n        type=\"button\"\n        className=\"btn-unstyled tw-stepper__step-label\"\n        onClick={() => clickable && step.onClick?.()}\n      >\n        <small>{step.label}</small>\n      </button>\n    ) : (\n      <span className=\"tw-stepper__step-label\">{step.label}</span>\n    );\n\n    return (\n      <li\n        key={index}\n        className={classNames(\n          'hidden-xs',\n          'tw-stepper__step',\n          active ? 'np-text-body-default-bold tw-stepper__step--active' : 'np-text-body-default',\n          clickable && 'tw-stepper__step--clickable',\n          step.hoverLabel && 'tw-stepper__step--has-tooltip',\n        )}\n        aria-current={active ? 'step' : false}\n        style={\n          isRTL\n            ? { right: `${index * stepPercentage * 100}%` }\n            : { left: `${index * stepPercentage * 100}%` }\n        }\n      >\n        {step.hoverLabel && !isTouchDevice() ? (\n          <Tooltip position={Position.BOTTOM} label={step.hoverLabel}>\n            {labelButton}\n          </Tooltip>\n        ) : (\n          labelButton\n        )}\n      </li>\n    );\n  };\n\n  return (\n    <div className={classNames('tw-stepper', className)}>\n      <div className=\"progress\">\n        <div className=\"progress-bar\" style={{ width: `${percentageCompleted * 100}%` }} />\n      </div>\n\n      <ol className=\"tw-stepper-steps p-t-1 m-b-0\">{steps.map(renderStep)}</ol>\n    </div>\n  );\n};\n\nexport default Stepper;\n"],"names":["clamp","from","to","value","Math","max","min","Stepper","steps","activeStep","className","isRTL","useDirection","length","activeStepIndex","stepPercentage","percentageCompleted","renderStep","step","index","active","clickable","onClick","labelButton","_jsx","type","children","label","classNames","hoverLabel","style","right","left","isTouchDevice","Tooltip","position","Position","BOTTOM","_jsxs","width","map"],"mappings":"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"}
+{"version":3,"file":"Stepper.js","sources":["../../src/stepper/Stepper.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport * as React from 'react';\n\nimport { Position } from '../common';\nimport { useDirection } from '../common/hooks';\nimport Tooltip from '../tooltip';\n\nimport { isTouchDevice } from './deviceDetection';\n\nfunction clamp(from: number, to: number, value: number) {\n  return Math.max(Math.min(to, value), from);\n}\n\nexport interface Step {\n  label: React.ReactNode;\n  onClick?: () => void;\n  hoverLabel?: React.ReactNode;\n}\n\nexport interface StepperProps {\n  steps: readonly Step[];\n  activeStep?: number;\n  className?: string;\n}\n\n/**\n * This component is considered user-unfriendly and inaccessible on its own and will likely be made internal in the future. Please use `FlowNavigation` instead.\n * @see https://storybook.wise.design/?path=/story/navigation-flownavigation--variants\n */\nconst Stepper = ({ steps, activeStep = 0, className }: StepperProps) => {\n  const { isRTL } = useDirection();\n\n  if (steps.length === 0) {\n    return null;\n  }\n\n  const activeStepIndex = clamp(0, steps.length - 1, activeStep);\n  const stepPercentage = 1 / (steps.length - 1);\n  const percentageCompleted = activeStepIndex / (steps.length - 1);\n\n  const renderStep = (step: Step, index: number) => {\n    const active = index === activeStepIndex;\n    const clickable = step.onClick && !active;\n\n    const labelButton = clickable ? (\n      <button\n        type=\"button\"\n        className=\"btn-unstyled tw-stepper__step-label\"\n        onClick={() => clickable && step.onClick?.()}\n      >\n        <small>{step.label}</small>\n      </button>\n    ) : (\n      <span className=\"tw-stepper__step-label\">{step.label}</span>\n    );\n\n    return (\n      <li\n        key={index}\n        className={clsx(\n          'hidden-xs',\n          'tw-stepper__step',\n          active ? 'np-text-body-default-bold tw-stepper__step--active' : 'np-text-body-default',\n          clickable && 'tw-stepper__step--clickable',\n          step.hoverLabel && 'tw-stepper__step--has-tooltip',\n        )}\n        aria-current={active ? 'step' : false}\n        style={\n          isRTL\n            ? { right: `${index * stepPercentage * 100}%` }\n            : { left: `${index * stepPercentage * 100}%` }\n        }\n      >\n        {step.hoverLabel && !isTouchDevice() ? (\n          <Tooltip position={Position.BOTTOM} label={step.hoverLabel}>\n            {labelButton}\n          </Tooltip>\n        ) : (\n          labelButton\n        )}\n      </li>\n    );\n  };\n\n  return (\n    <div className={clsx('tw-stepper', className)}>\n      <div className=\"progress\">\n        <div className=\"progress-bar\" style={{ width: `${percentageCompleted * 100}%` }} />\n      </div>\n\n      <ol className=\"tw-stepper-steps p-t-1 m-b-0\">{steps.map(renderStep)}</ol>\n    </div>\n  );\n};\n\nexport default Stepper;\n"],"names":["clamp","from","to","value","Math","max","min","Stepper","steps","activeStep","className","isRTL","useDirection","length","activeStepIndex","stepPercentage","percentageCompleted","renderStep","step","index","active","clickable","onClick","labelButton","_jsx","type","children","label","clsx","hoverLabel","style","right","left","isTouchDevice","Tooltip","position","Position","BOTTOM","_jsxs","width","map"],"mappings":"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"}

package/build/stepper/Stepper.mjs

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import 'react';
 import Tooltip from '../tooltip/Tooltip.mjs';
 import { isTouchDevice } from './deviceDetection.mjs';
@@ -42,7 +42,7 @@ const Stepper = ({
       children: step.label
     });
     return /*#__PURE__*/jsx("li", {
-      className: classNames('hidden-xs', 'tw-stepper__step', active ? 'np-text-body-default-bold tw-stepper__step--active' : 'np-text-body-default', clickable && 'tw-stepper__step--clickable', step.hoverLabel && 'tw-stepper__step--has-tooltip'),
+      className: clsx('hidden-xs', 'tw-stepper__step', active ? 'np-text-body-default-bold tw-stepper__step--active' : 'np-text-body-default', clickable && 'tw-stepper__step--clickable', step.hoverLabel && 'tw-stepper__step--has-tooltip'),
       "aria-current": active ? 'step' : false,
       style: isRTL ? {
         right: `${index * stepPercentage * 100}%`
@@ -57,7 +57,7 @@ const Stepper = ({
     }, index);
   };
   return /*#__PURE__*/jsxs("div", {
-    className: classNames('tw-stepper', className),
+    className: clsx('tw-stepper', className),
     children: [/*#__PURE__*/jsx("div", {
       className: "progress",
       children: /*#__PURE__*/jsx("div", {

package/build/stepper/Stepper.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.mjs","sources":["../../src/stepper/Stepper.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport * as React from 'react';\n\nimport { Position } from '../common';\nimport { useDirection } from '../common/hooks';\nimport Tooltip from '../tooltip';\n\nimport { isTouchDevice } from './deviceDetection';\n\nfunction clamp(from: number, to: number, value: number) {\n  return Math.max(Math.min(to, value), from);\n}\n\nexport interface Step {\n  label: React.ReactNode;\n  onClick?: () => void;\n  hoverLabel?: React.ReactNode;\n}\n\nexport interface StepperProps {\n  steps: readonly Step[];\n  activeStep?: number;\n  className?: string;\n}\n\n/**\n * This component is considered user-unfriendly and inaccessible on its own and will likely be made internal in the future. Please use `FlowNavigation` instead.\n * @see https://storybook.wise.design/?path=/story/navigation-flownavigation--variants\n */\nconst Stepper = ({ steps, activeStep = 0, className }: StepperProps) => {\n  const { isRTL } = useDirection();\n\n  if (steps.length === 0) {\n    return null;\n  }\n\n  const activeStepIndex = clamp(0, steps.length - 1, activeStep);\n  const stepPercentage = 1 / (steps.length - 1);\n  const percentageCompleted = activeStepIndex / (steps.length - 1);\n\n  const renderStep = (step: Step, index: number) => {\n    const active = index === activeStepIndex;\n    const clickable = step.onClick && !active;\n\n    const labelButton = clickable ? (\n      <button\n        type=\"button\"\n        className=\"btn-unstyled tw-stepper__step-label\"\n        onClick={() => clickable && step.onClick?.()}\n      >\n        <small>{step.label}</small>\n      </button>\n    ) : (\n      <span className=\"tw-stepper__step-label\">{step.label}</span>\n    );\n\n    return (\n      <li\n        key={index}\n        className={classNames(\n          'hidden-xs',\n          'tw-stepper__step',\n          active ? 'np-text-body-default-bold tw-stepper__step--active' : 'np-text-body-default',\n          clickable && 'tw-stepper__step--clickable',\n          step.hoverLabel && 'tw-stepper__step--has-tooltip',\n        )}\n        aria-current={active ? 'step' : false}\n        style={\n          isRTL\n            ? { right: `${index * stepPercentage * 100}%` }\n            : { left: `${index * stepPercentage * 100}%` }\n        }\n      >\n        {step.hoverLabel && !isTouchDevice() ? (\n          <Tooltip position={Position.BOTTOM} label={step.hoverLabel}>\n            {labelButton}\n          </Tooltip>\n        ) : (\n          labelButton\n        )}\n      </li>\n    );\n  };\n\n  return (\n    <div className={classNames('tw-stepper', className)}>\n      <div className=\"progress\">\n        <div className=\"progress-bar\" style={{ width: `${percentageCompleted * 100}%` }} />\n      </div>\n\n      <ol className=\"tw-stepper-steps p-t-1 m-b-0\">{steps.map(renderStep)}</ol>\n    </div>\n  );\n};\n\nexport default Stepper;\n"],"names":["clamp","from","to","value","Math","max","min","Stepper","steps","activeStep","className","isRTL","useDirection","length","activeStepIndex","stepPercentage","percentageCompleted","renderStep","step","index","active","clickable","onClick","labelButton","_jsx","type","children","label","classNames","hoverLabel","style","right","left","isTouchDevice","Tooltip","position","Position","BOTTOM","_jsxs","width","map"],"mappings":"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"}
+{"version":3,"file":"Stepper.mjs","sources":["../../src/stepper/Stepper.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport * as React from 'react';\n\nimport { Position } from '../common';\nimport { useDirection } from '../common/hooks';\nimport Tooltip from '../tooltip';\n\nimport { isTouchDevice } from './deviceDetection';\n\nfunction clamp(from: number, to: number, value: number) {\n  return Math.max(Math.min(to, value), from);\n}\n\nexport interface Step {\n  label: React.ReactNode;\n  onClick?: () => void;\n  hoverLabel?: React.ReactNode;\n}\n\nexport interface StepperProps {\n  steps: readonly Step[];\n  activeStep?: number;\n  className?: string;\n}\n\n/**\n * This component is considered user-unfriendly and inaccessible on its own and will likely be made internal in the future. Please use `FlowNavigation` instead.\n * @see https://storybook.wise.design/?path=/story/navigation-flownavigation--variants\n */\nconst Stepper = ({ steps, activeStep = 0, className }: StepperProps) => {\n  const { isRTL } = useDirection();\n\n  if (steps.length === 0) {\n    return null;\n  }\n\n  const activeStepIndex = clamp(0, steps.length - 1, activeStep);\n  const stepPercentage = 1 / (steps.length - 1);\n  const percentageCompleted = activeStepIndex / (steps.length - 1);\n\n  const renderStep = (step: Step, index: number) => {\n    const active = index === activeStepIndex;\n    const clickable = step.onClick && !active;\n\n    const labelButton = clickable ? (\n      <button\n        type=\"button\"\n        className=\"btn-unstyled tw-stepper__step-label\"\n        onClick={() => clickable && step.onClick?.()}\n      >\n        <small>{step.label}</small>\n      </button>\n    ) : (\n      <span className=\"tw-stepper__step-label\">{step.label}</span>\n    );\n\n    return (\n      <li\n        key={index}\n        className={clsx(\n          'hidden-xs',\n          'tw-stepper__step',\n          active ? 'np-text-body-default-bold tw-stepper__step--active' : 'np-text-body-default',\n          clickable && 'tw-stepper__step--clickable',\n          step.hoverLabel && 'tw-stepper__step--has-tooltip',\n        )}\n        aria-current={active ? 'step' : false}\n        style={\n          isRTL\n            ? { right: `${index * stepPercentage * 100}%` }\n            : { left: `${index * stepPercentage * 100}%` }\n        }\n      >\n        {step.hoverLabel && !isTouchDevice() ? (\n          <Tooltip position={Position.BOTTOM} label={step.hoverLabel}>\n            {labelButton}\n          </Tooltip>\n        ) : (\n          labelButton\n        )}\n      </li>\n    );\n  };\n\n  return (\n    <div className={clsx('tw-stepper', className)}>\n      <div className=\"progress\">\n        <div className=\"progress-bar\" style={{ width: `${percentageCompleted * 100}%` }} />\n      </div>\n\n      <ol className=\"tw-stepper-steps p-t-1 m-b-0\">{steps.map(renderStep)}</ol>\n    </div>\n  );\n};\n\nexport default Stepper;\n"],"names":["clamp","from","to","value","Math","max","min","Stepper","steps","activeStep","className","isRTL","useDirection","length","activeStepIndex","stepPercentage","percentageCompleted","renderStep","step","index","active","clickable","onClick","labelButton","_jsx","type","children","label","clsx","hoverLabel","style","right","left","isTouchDevice","Tooltip","position","Position","BOTTOM","_jsxs","width","map"],"mappings":"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"}

package/build/summary/Summary.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var icons = require('@transferwise/icons');
-var classNames = require('classnames');
+var clsx = require('clsx');
 var React = require('react');
 var reactIntl = require('react-intl');
 var Body = require('../body/Body.js');
@@ -16,10 +16,6 @@ var status = require('../common/propsValues/status.js');
 var size = require('../common/propsValues/size.js');
 var typography = require('../common/propsValues/typography.js');
 
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var classNames__default = /*#__PURE__*/_interopDefault(classNames);
-
 /* eslint-disable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment */
 const BadgeIcons = {
   [status.Status.DONE]: icons.CheckCircleFill,
@@ -62,7 +58,7 @@ const Summary = ({
   // @ts-expect-error Badge can be null, this is handled in code
   const Badge = status && BadgeIcons[status];
   return /*#__PURE__*/jsxRuntime.jsxs(Element, {
-    className: classNames__default.default('np-summary d-flex align-items-start', className)
+    className: clsx.clsx('np-summary d-flex align-items-start', className)
     // @ts-expect-error we check whether `status` is not null before index `statusLabels` and `messages`
     ,
     "aria-label": status && intl.formatMessage(Summary_messages[statusLabels[status]]),

package/build/summary/Summary.js.map

@@ -1 +1 @@
-{"version":3,"file":"Summary.js","sources":["../../src/summary/Summary.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment */\nimport {\n  CheckCircleFill as CheckCircleIcon,\n  ClockFill as PendingCircleIcon,\n} from '@transferwise/icons';\nimport classNames from 'classnames';\nimport { ElementType, cloneElement, ReactNode } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Body from '../body';\nimport {\n  Status,\n  StatusDone,\n  StatusNotDone,\n  StatusPending,\n  Size,\n  Typography,\n  Sentiment,\n} from '../common';\nimport Info, { InfoProps } from '../info';\nimport StatusIcon from '../statusIcon';\n\nimport messages from './Summary.messages';\nimport { Action, ActionOptions } from '../common/action/Action';\n\nconst BadgeIcons = {\n  [Status.DONE]: CheckCircleIcon,\n  [Status.PENDING]: PendingCircleIcon,\n};\n\nconst statusLabels = {\n  [Status.NOT_DONE]: 'statusNotDone',\n  [Status.DONE]: 'statusDone',\n  [Status.PENDING]: 'statusPending',\n};\n\nconst statusMapping = {\n  [Status.DONE]: Sentiment.POSITIVE,\n  [Status.PENDING]: Sentiment.PENDING,\n};\n\nexport interface Props {\n  /**\n   * Action displayed at the bottom of the Summary\n   */\n  action?: ActionOptions;\n  /**\n   * Decides which html element should wrap the Summary\n   */\n  as?: ElementType;\n  /**\n   * Extra classes applied to Summary\n   */\n  className?: string;\n  /**\n   * @deprecated please use description instead\n   */\n  content?: ReactNode;\n  /**\n   * Summary description\n   */\n  description?: ReactNode;\n  /**\n   * @deprecated please use info instead\n   */\n  help?: {\n    content: ReactNode;\n    title?: ReactNode;\n  };\n  /**\n   * Infos displayed on help Icon click inside Popover or Modal\n   */\n  info?: Pick<InfoProps, 'aria-label' | 'content' | 'onClick' | 'presentation' | 'title'>;\n  /**\n   * @deprecated please use icon instead\n   */\n  illustration?: ReactNode;\n  /**\n   * Main Summary Icon\n   */\n  icon?: ReactNode;\n  /**\n   * Decides the badge applied to Icon\n   */\n  status?: StatusNotDone | StatusDone | StatusPending;\n  /**\n   * Summary title\n   */\n  title: ReactNode;\n}\n\nconst Summary = ({\n  action,\n  as: Element = 'div',\n  className,\n  content = null,\n  description = content,\n  help,\n  icon,\n  illustration = null,\n  info = help,\n  status,\n  title,\n}: Props) => {\n  const intl = useIntl();\n\n  let media = illustration;\n  if (icon) {\n    // @ts-expect-error if icon is present it has props and size prop\n    const iconSize = icon?.props?.size as number;\n\n    media =\n      iconSize !== 24\n        ? // @ts-expect-error we need icon to adjust it's size\n          cloneElement(icon, { size: 24 })\n        : icon;\n  }\n  // @ts-expect-error Badge can be null, this is handled in code\n  const Badge = status && BadgeIcons[status];\n\n  return (\n    <Element\n      className={classNames('np-summary d-flex align-items-start', className)}\n      // @ts-expect-error we check whether `status` is not null before index `statusLabels` and `messages`\n      aria-label={status && intl.formatMessage(messages[statusLabels[status]])}\n    >\n      <div className=\"np-summary__icon\">\n        {media}\n        {Badge && (\n          <div>\n            {/* @ts-expect-error it's okey to pass `undefined` into `sentiment` prop */}\n            <StatusIcon size={Size.SMALL} sentiment={statusMapping[status]} />\n          </div>\n        )}\n      </div>\n      <div className=\"np-summary__body m-l-2\">\n        <div className=\"np-summary__title d-flex\">\n          <Body\n            as=\"span\"\n            role=\"heading\"\n            aria-level={4}\n            type={Typography.BODY_LARGE_BOLD}\n            className=\"text-primary m-b-1\"\n          >\n            {title}\n          </Body>\n          {info && (\n            <Info\n              aria-label={info['aria-label']}\n              className=\"m-l-1 hidden-xs\"\n              content={info.content}\n              presentation={info.presentation}\n              size={Size.LARGE}\n              title={info.title}\n              onClick={info.onClick}\n            />\n          )}\n        </div>\n\n        {description && (\n          <Body\n            as=\"span\"\n            type={Typography.BODY_DEFAULT}\n            className=\"d-block np-summary__description\"\n          >\n            {description}\n          </Body>\n        )}\n        {action && <Action action={action} className=\"np-summary__action\" />}\n      </div>\n      {info && (\n        <Info\n          aria-label={info['aria-label']}\n          className=\"m-l-2 hidden-sm hidden-md hidden-lg hidden-xl\"\n          content={info.content}\n          presentation={info.presentation}\n          size={Size.LARGE}\n          title={info.title}\n          onClick={info.onClick}\n        />\n      )}\n    </Element>\n  );\n};\n\nexport default Summary;\n"],"names":["BadgeIcons","Status","DONE","CheckCircleIcon","PENDING","PendingCircleIcon","statusLabels","NOT_DONE","statusMapping","Sentiment","POSITIVE","Summary","action","as","Element","className","content","description","help","icon","illustration","info","status","title","intl","useIntl","media","iconSize","props","size","cloneElement","Badge","_jsxs","classNames","formatMessage","messages","children","_jsx","StatusIcon","Size","SMALL","sentiment","Body","role","type","Typography","BODY_LARGE_BOLD","Info","presentation","LARGE","onClick","BODY_DEFAULT","Action"],"mappings":"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"}
+{"version":3,"file":"Summary.js","sources":["../../src/summary/Summary.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment */\nimport {\n  CheckCircleFill as CheckCircleIcon,\n  ClockFill as PendingCircleIcon,\n} from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { ElementType, cloneElement, ReactNode } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Body from '../body';\nimport {\n  Status,\n  StatusDone,\n  StatusNotDone,\n  StatusPending,\n  Size,\n  Typography,\n  Sentiment,\n} from '../common';\nimport Info, { InfoProps } from '../info';\nimport StatusIcon from '../statusIcon';\n\nimport messages from './Summary.messages';\nimport { Action, ActionOptions } from '../common/action/Action';\n\nconst BadgeIcons = {\n  [Status.DONE]: CheckCircleIcon,\n  [Status.PENDING]: PendingCircleIcon,\n};\n\nconst statusLabels = {\n  [Status.NOT_DONE]: 'statusNotDone',\n  [Status.DONE]: 'statusDone',\n  [Status.PENDING]: 'statusPending',\n};\n\nconst statusMapping = {\n  [Status.DONE]: Sentiment.POSITIVE,\n  [Status.PENDING]: Sentiment.PENDING,\n};\n\nexport interface Props {\n  /**\n   * Action displayed at the bottom of the Summary\n   */\n  action?: ActionOptions;\n  /**\n   * Decides which html element should wrap the Summary\n   */\n  as?: ElementType;\n  /**\n   * Extra classes applied to Summary\n   */\n  className?: string;\n  /**\n   * @deprecated please use description instead\n   */\n  content?: ReactNode;\n  /**\n   * Summary description\n   */\n  description?: ReactNode;\n  /**\n   * @deprecated please use info instead\n   */\n  help?: {\n    content: ReactNode;\n    title?: ReactNode;\n  };\n  /**\n   * Infos displayed on help Icon click inside Popover or Modal\n   */\n  info?: Pick<InfoProps, 'aria-label' | 'content' | 'onClick' | 'presentation' | 'title'>;\n  /**\n   * @deprecated please use icon instead\n   */\n  illustration?: ReactNode;\n  /**\n   * Main Summary Icon\n   */\n  icon?: ReactNode;\n  /**\n   * Decides the badge applied to Icon\n   */\n  status?: StatusNotDone | StatusDone | StatusPending;\n  /**\n   * Summary title\n   */\n  title: ReactNode;\n}\n\nconst Summary = ({\n  action,\n  as: Element = 'div',\n  className,\n  content = null,\n  description = content,\n  help,\n  icon,\n  illustration = null,\n  info = help,\n  status,\n  title,\n}: Props) => {\n  const intl = useIntl();\n\n  let media = illustration;\n  if (icon) {\n    // @ts-expect-error if icon is present it has props and size prop\n    const iconSize = icon?.props?.size as number;\n\n    media =\n      iconSize !== 24\n        ? // @ts-expect-error we need icon to adjust it's size\n          cloneElement(icon, { size: 24 })\n        : icon;\n  }\n  // @ts-expect-error Badge can be null, this is handled in code\n  const Badge = status && BadgeIcons[status];\n\n  return (\n    <Element\n      className={clsx('np-summary d-flex align-items-start', className)}\n      // @ts-expect-error we check whether `status` is not null before index `statusLabels` and `messages`\n      aria-label={status && intl.formatMessage(messages[statusLabels[status]])}\n    >\n      <div className=\"np-summary__icon\">\n        {media}\n        {Badge && (\n          <div>\n            {/* @ts-expect-error it's okey to pass `undefined` into `sentiment` prop */}\n            <StatusIcon size={Size.SMALL} sentiment={statusMapping[status]} />\n          </div>\n        )}\n      </div>\n      <div className=\"np-summary__body m-l-2\">\n        <div className=\"np-summary__title d-flex\">\n          <Body\n            as=\"span\"\n            role=\"heading\"\n            aria-level={4}\n            type={Typography.BODY_LARGE_BOLD}\n            className=\"text-primary m-b-1\"\n          >\n            {title}\n          </Body>\n          {info && (\n            <Info\n              aria-label={info['aria-label']}\n              className=\"m-l-1 hidden-xs\"\n              content={info.content}\n              presentation={info.presentation}\n              size={Size.LARGE}\n              title={info.title}\n              onClick={info.onClick}\n            />\n          )}\n        </div>\n\n        {description && (\n          <Body\n            as=\"span\"\n            type={Typography.BODY_DEFAULT}\n            className=\"d-block np-summary__description\"\n          >\n            {description}\n          </Body>\n        )}\n        {action && <Action action={action} className=\"np-summary__action\" />}\n      </div>\n      {info && (\n        <Info\n          aria-label={info['aria-label']}\n          className=\"m-l-2 hidden-sm hidden-md hidden-lg hidden-xl\"\n          content={info.content}\n          presentation={info.presentation}\n          size={Size.LARGE}\n          title={info.title}\n          onClick={info.onClick}\n        />\n      )}\n    </Element>\n  );\n};\n\nexport default Summary;\n"],"names":["BadgeIcons","Status","DONE","CheckCircleIcon","PENDING","PendingCircleIcon","statusLabels","NOT_DONE","statusMapping","Sentiment","POSITIVE","Summary","action","as","Element","className","content","description","help","icon","illustration","info","status","title","intl","useIntl","media","iconSize","props","size","cloneElement","Badge","_jsxs","clsx","formatMessage","messages","children","_jsx","StatusIcon","Size","SMALL","sentiment","Body","role","type","Typography","BODY_LARGE_BOLD","Info","presentation","LARGE","onClick","BODY_DEFAULT","Action"],"mappings":"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"}

package/build/summary/Summary.mjs

@@ -1,5 +1,5 @@
 import { CheckCircleFill, ClockFill } from '@transferwise/icons';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { cloneElement } from 'react';
 import { useIntl } from 'react-intl';
 import Body from '../body/Body.mjs';
@@ -56,7 +56,7 @@ const Summary = ({
   // @ts-expect-error Badge can be null, this is handled in code
   const Badge = status && BadgeIcons[status];
   return /*#__PURE__*/jsxs(Element, {
-    className: classNames('np-summary d-flex align-items-start', className)
+    className: clsx('np-summary d-flex align-items-start', className)
     // @ts-expect-error we check whether `status` is not null before index `statusLabels` and `messages`
     ,
     "aria-label": status && intl.formatMessage(messages[statusLabels[status]]),

package/build/summary/Summary.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Summary.mjs","sources":["../../src/summary/Summary.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment */\nimport {\n  CheckCircleFill as CheckCircleIcon,\n  ClockFill as PendingCircleIcon,\n} from '@transferwise/icons';\nimport classNames from 'classnames';\nimport { ElementType, cloneElement, ReactNode } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Body from '../body';\nimport {\n  Status,\n  StatusDone,\n  StatusNotDone,\n  StatusPending,\n  Size,\n  Typography,\n  Sentiment,\n} from '../common';\nimport Info, { InfoProps } from '../info';\nimport StatusIcon from '../statusIcon';\n\nimport messages from './Summary.messages';\nimport { Action, ActionOptions } from '../common/action/Action';\n\nconst BadgeIcons = {\n  [Status.DONE]: CheckCircleIcon,\n  [Status.PENDING]: PendingCircleIcon,\n};\n\nconst statusLabels = {\n  [Status.NOT_DONE]: 'statusNotDone',\n  [Status.DONE]: 'statusDone',\n  [Status.PENDING]: 'statusPending',\n};\n\nconst statusMapping = {\n  [Status.DONE]: Sentiment.POSITIVE,\n  [Status.PENDING]: Sentiment.PENDING,\n};\n\nexport interface Props {\n  /**\n   * Action displayed at the bottom of the Summary\n   */\n  action?: ActionOptions;\n  /**\n   * Decides which html element should wrap the Summary\n   */\n  as?: ElementType;\n  /**\n   * Extra classes applied to Summary\n   */\n  className?: string;\n  /**\n   * @deprecated please use description instead\n   */\n  content?: ReactNode;\n  /**\n   * Summary description\n   */\n  description?: ReactNode;\n  /**\n   * @deprecated please use info instead\n   */\n  help?: {\n    content: ReactNode;\n    title?: ReactNode;\n  };\n  /**\n   * Infos displayed on help Icon click inside Popover or Modal\n   */\n  info?: Pick<InfoProps, 'aria-label' | 'content' | 'onClick' | 'presentation' | 'title'>;\n  /**\n   * @deprecated please use icon instead\n   */\n  illustration?: ReactNode;\n  /**\n   * Main Summary Icon\n   */\n  icon?: ReactNode;\n  /**\n   * Decides the badge applied to Icon\n   */\n  status?: StatusNotDone | StatusDone | StatusPending;\n  /**\n   * Summary title\n   */\n  title: ReactNode;\n}\n\nconst Summary = ({\n  action,\n  as: Element = 'div',\n  className,\n  content = null,\n  description = content,\n  help,\n  icon,\n  illustration = null,\n  info = help,\n  status,\n  title,\n}: Props) => {\n  const intl = useIntl();\n\n  let media = illustration;\n  if (icon) {\n    // @ts-expect-error if icon is present it has props and size prop\n    const iconSize = icon?.props?.size as number;\n\n    media =\n      iconSize !== 24\n        ? // @ts-expect-error we need icon to adjust it's size\n          cloneElement(icon, { size: 24 })\n        : icon;\n  }\n  // @ts-expect-error Badge can be null, this is handled in code\n  const Badge = status && BadgeIcons[status];\n\n  return (\n    <Element\n      className={classNames('np-summary d-flex align-items-start', className)}\n      // @ts-expect-error we check whether `status` is not null before index `statusLabels` and `messages`\n      aria-label={status && intl.formatMessage(messages[statusLabels[status]])}\n    >\n      <div className=\"np-summary__icon\">\n        {media}\n        {Badge && (\n          <div>\n            {/* @ts-expect-error it's okey to pass `undefined` into `sentiment` prop */}\n            <StatusIcon size={Size.SMALL} sentiment={statusMapping[status]} />\n          </div>\n        )}\n      </div>\n      <div className=\"np-summary__body m-l-2\">\n        <div className=\"np-summary__title d-flex\">\n          <Body\n            as=\"span\"\n            role=\"heading\"\n            aria-level={4}\n            type={Typography.BODY_LARGE_BOLD}\n            className=\"text-primary m-b-1\"\n          >\n            {title}\n          </Body>\n          {info && (\n            <Info\n              aria-label={info['aria-label']}\n              className=\"m-l-1 hidden-xs\"\n              content={info.content}\n              presentation={info.presentation}\n              size={Size.LARGE}\n              title={info.title}\n              onClick={info.onClick}\n            />\n          )}\n        </div>\n\n        {description && (\n          <Body\n            as=\"span\"\n            type={Typography.BODY_DEFAULT}\n            className=\"d-block np-summary__description\"\n          >\n            {description}\n          </Body>\n        )}\n        {action && <Action action={action} className=\"np-summary__action\" />}\n      </div>\n      {info && (\n        <Info\n          aria-label={info['aria-label']}\n          className=\"m-l-2 hidden-sm hidden-md hidden-lg hidden-xl\"\n          content={info.content}\n          presentation={info.presentation}\n          size={Size.LARGE}\n          title={info.title}\n          onClick={info.onClick}\n        />\n      )}\n    </Element>\n  );\n};\n\nexport default Summary;\n"],"names":["BadgeIcons","Status","DONE","CheckCircleIcon","PENDING","PendingCircleIcon","statusLabels","NOT_DONE","statusMapping","Sentiment","POSITIVE","Summary","action","as","Element","className","content","description","help","icon","illustration","info","status","title","intl","useIntl","media","iconSize","props","size","cloneElement","Badge","_jsxs","classNames","formatMessage","messages","children","_jsx","StatusIcon","Size","SMALL","sentiment","Body","role","type","Typography","BODY_LARGE_BOLD","Info","presentation","LARGE","onClick","BODY_DEFAULT","Action"],"mappings":"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"}
+{"version":3,"file":"Summary.mjs","sources":["../../src/summary/Summary.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment */\nimport {\n  CheckCircleFill as CheckCircleIcon,\n  ClockFill as PendingCircleIcon,\n} from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { ElementType, cloneElement, ReactNode } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Body from '../body';\nimport {\n  Status,\n  StatusDone,\n  StatusNotDone,\n  StatusPending,\n  Size,\n  Typography,\n  Sentiment,\n} from '../common';\nimport Info, { InfoProps } from '../info';\nimport StatusIcon from '../statusIcon';\n\nimport messages from './Summary.messages';\nimport { Action, ActionOptions } from '../common/action/Action';\n\nconst BadgeIcons = {\n  [Status.DONE]: CheckCircleIcon,\n  [Status.PENDING]: PendingCircleIcon,\n};\n\nconst statusLabels = {\n  [Status.NOT_DONE]: 'statusNotDone',\n  [Status.DONE]: 'statusDone',\n  [Status.PENDING]: 'statusPending',\n};\n\nconst statusMapping = {\n  [Status.DONE]: Sentiment.POSITIVE,\n  [Status.PENDING]: Sentiment.PENDING,\n};\n\nexport interface Props {\n  /**\n   * Action displayed at the bottom of the Summary\n   */\n  action?: ActionOptions;\n  /**\n   * Decides which html element should wrap the Summary\n   */\n  as?: ElementType;\n  /**\n   * Extra classes applied to Summary\n   */\n  className?: string;\n  /**\n   * @deprecated please use description instead\n   */\n  content?: ReactNode;\n  /**\n   * Summary description\n   */\n  description?: ReactNode;\n  /**\n   * @deprecated please use info instead\n   */\n  help?: {\n    content: ReactNode;\n    title?: ReactNode;\n  };\n  /**\n   * Infos displayed on help Icon click inside Popover or Modal\n   */\n  info?: Pick<InfoProps, 'aria-label' | 'content' | 'onClick' | 'presentation' | 'title'>;\n  /**\n   * @deprecated please use icon instead\n   */\n  illustration?: ReactNode;\n  /**\n   * Main Summary Icon\n   */\n  icon?: ReactNode;\n  /**\n   * Decides the badge applied to Icon\n   */\n  status?: StatusNotDone | StatusDone | StatusPending;\n  /**\n   * Summary title\n   */\n  title: ReactNode;\n}\n\nconst Summary = ({\n  action,\n  as: Element = 'div',\n  className,\n  content = null,\n  description = content,\n  help,\n  icon,\n  illustration = null,\n  info = help,\n  status,\n  title,\n}: Props) => {\n  const intl = useIntl();\n\n  let media = illustration;\n  if (icon) {\n    // @ts-expect-error if icon is present it has props and size prop\n    const iconSize = icon?.props?.size as number;\n\n    media =\n      iconSize !== 24\n        ? // @ts-expect-error we need icon to adjust it's size\n          cloneElement(icon, { size: 24 })\n        : icon;\n  }\n  // @ts-expect-error Badge can be null, this is handled in code\n  const Badge = status && BadgeIcons[status];\n\n  return (\n    <Element\n      className={clsx('np-summary d-flex align-items-start', className)}\n      // @ts-expect-error we check whether `status` is not null before index `statusLabels` and `messages`\n      aria-label={status && intl.formatMessage(messages[statusLabels[status]])}\n    >\n      <div className=\"np-summary__icon\">\n        {media}\n        {Badge && (\n          <div>\n            {/* @ts-expect-error it's okey to pass `undefined` into `sentiment` prop */}\n            <StatusIcon size={Size.SMALL} sentiment={statusMapping[status]} />\n          </div>\n        )}\n      </div>\n      <div className=\"np-summary__body m-l-2\">\n        <div className=\"np-summary__title d-flex\">\n          <Body\n            as=\"span\"\n            role=\"heading\"\n            aria-level={4}\n            type={Typography.BODY_LARGE_BOLD}\n            className=\"text-primary m-b-1\"\n          >\n            {title}\n          </Body>\n          {info && (\n            <Info\n              aria-label={info['aria-label']}\n              className=\"m-l-1 hidden-xs\"\n              content={info.content}\n              presentation={info.presentation}\n              size={Size.LARGE}\n              title={info.title}\n              onClick={info.onClick}\n            />\n          )}\n        </div>\n\n        {description && (\n          <Body\n            as=\"span\"\n            type={Typography.BODY_DEFAULT}\n            className=\"d-block np-summary__description\"\n          >\n            {description}\n          </Body>\n        )}\n        {action && <Action action={action} className=\"np-summary__action\" />}\n      </div>\n      {info && (\n        <Info\n          aria-label={info['aria-label']}\n          className=\"m-l-2 hidden-sm hidden-md hidden-lg hidden-xl\"\n          content={info.content}\n          presentation={info.presentation}\n          size={Size.LARGE}\n          title={info.title}\n          onClick={info.onClick}\n        />\n      )}\n    </Element>\n  );\n};\n\nexport default Summary;\n"],"names":["BadgeIcons","Status","DONE","CheckCircleIcon","PENDING","PendingCircleIcon","statusLabels","NOT_DONE","statusMapping","Sentiment","POSITIVE","Summary","action","as","Element","className","content","description","help","icon","illustration","info","status","title","intl","useIntl","media","iconSize","props","size","cloneElement","Badge","_jsxs","clsx","formatMessage","messages","children","_jsx","StatusIcon","Size","SMALL","sentiment","Body","role","type","Typography","BODY_LARGE_BOLD","Info","presentation","LARGE","onClick","BODY_DEFAULT","Action"],"mappings":"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"}

package/build/switch/Switch.js

@@ -2,14 +2,10 @@
 
 var icons = require('@transferwise/icons');
 var componentsTheming = require('@wise/components-theming');
-var classNames = require('classnames');
+var clsx = require('clsx');
 var contexts = require('../inputs/contexts.js');
 var jsxRuntime = require('react/jsx-runtime');
 
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var classNames__default = /*#__PURE__*/_interopDefault(classNames);
-
 const Switch = props => {
   const inputAttributes = contexts.useInputAttributes({
     nonLabelable: true
@@ -55,7 +51,7 @@ const Switch = props => {
   };
   const ariaLabelledby = (ariaLabel ? undefined : ariaLabelledbyProp) ?? inputAttributes['aria-labelledby'];
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: classNames__default.default('np-switch', {
+    className: clsx.clsx('np-switch', {
       'np-switch--unchecked': !checked,
       'np-switch--checked': checked,
       disabled

package/build/switch/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","sources":["../../src/switch/Switch.tsx"],"sourcesContent":["import { CheckCircleFill, CrossCircleFill } from '@transferwise/icons';\nimport { useTheme } from '@wise/components-theming';\nimport classnames from 'classnames';\nimport type { KeyboardEventHandler, MouseEvent } from 'react';\n\nimport type { CommonProps } from '../common';\nimport { useInputAttributes } from '../inputs/contexts';\n\nexport type SwitchProps = CommonProps & {\n  /**\n   * Used to describe the purpose of the switch. To be used if there is no external label (i.e. aria-labelledby is null)\n   * @deprecated Use `Field` wrapper or the `aria-labelledby` attribute instead.\n   */\n  'aria-label'?: string;\n  /** A reference to a label that describes the purpose of the switch. Ignored if aria-label is provided */\n  'aria-labelledby'?: string;\n  /** Whether the switch is checked or not */\n  checked?: boolean;\n  disabled?: boolean;\n  /** ID to apply to the switch container */\n  id?: string;\n  /** Function called when the switch is toggled */\n  onClick: (event?: MouseEvent<HTMLSpanElement>) => void;\n};\n\nconst Switch = (props: SwitchProps) => {\n  const inputAttributes = useInputAttributes({ nonLabelable: true });\n\n  const { isModern } = useTheme();\n  const {\n    checked,\n    className,\n    id = inputAttributes.id,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledbyProp,\n    onClick,\n    disabled,\n  } = props;\n\n  const handleKeyDown: KeyboardEventHandler = (event) => {\n    if (event.key === ' ') {\n      event.preventDefault();\n      onClick();\n    }\n  };\n\n  const returnIcon = () => {\n    if (isModern) {\n      return <span className=\"np-switch--thumb\" />;\n    }\n\n    if (checked) {\n      return (\n        <span className=\"np-switch--thumb\">\n          <CheckCircleFill size={24} />\n        </span>\n      );\n    }\n    return (\n      <span className=\"np-switch--thumb\">\n        <CrossCircleFill size={24} />\n      </span>\n    );\n  };\n\n  const ariaLabelledby =\n    (ariaLabel ? undefined : ariaLabelledbyProp) ?? inputAttributes['aria-labelledby'];\n\n  return (\n    <span\n      className={classnames(\n        'np-switch',\n\n        {\n          'np-switch--unchecked': !checked,\n          'np-switch--checked': checked,\n          disabled,\n        },\n        className,\n      )}\n      tabIndex={0}\n      role=\"switch\"\n      aria-checked={checked}\n      aria-label={ariaLabel}\n      {...inputAttributes}\n      aria-labelledby={ariaLabelledby}\n      id={id}\n      aria-disabled={disabled}\n      onClick={!disabled ? onClick : undefined}\n      onKeyDown={!disabled ? handleKeyDown : undefined}\n    >\n      {returnIcon()}\n      <input type=\"checkbox\" checked={checked} readOnly />\n    </span>\n  );\n};\n\nexport default Switch;\n"],"names":["Switch","props","inputAttributes","useInputAttributes","nonLabelable","isModern","useTheme","checked","className","id","ariaLabel","ariaLabelledbyProp","onClick","disabled","handleKeyDown","event","key","preventDefault","returnIcon","_jsx","children","CheckCircleFill","size","CrossCircleFill","ariaLabelledby","undefined","_jsxs","classnames","tabIndex","role","onKeyDown","type","readOnly"],"mappings":";;;;;;;;;;;;AAyBMA,MAAAA,MAAM,GAAIC,KAAkB,IAAI;EACpC,MAAMC,eAAe,GAAGC,2BAAkB,CAAC;AAAEC,IAAAA,YAAY,EAAE,IAAA;AAAM,GAAA,CAAC,CAAA;EAElE,MAAM;AAAEC,IAAAA,QAAAA;GAAU,GAAGC,0BAAQ,EAAE,CAAA;EAC/B,MAAM;IACJC,OAAO;IACPC,SAAS;IACTC,EAAE,GAAGP,eAAe,CAACO,EAAE;AACvB,IAAA,YAAY,EAAEC,SAAS;AACvB,IAAA,iBAAiB,EAAEC,kBAAkB;IACrCC,OAAO;AACPC,IAAAA,QAAAA;AAAQ,GACT,GAAGZ,KAAK,CAAA;EAET,MAAMa,aAAa,GAA0BC,KAAK,IAAI;AACpD,IAAA,IAAIA,KAAK,CAACC,GAAG,KAAK,GAAG,EAAE;MACrBD,KAAK,CAACE,cAAc,EAAE,CAAA;AACtBL,MAAAA,OAAO,EAAE,CAAA;AACX,KAAA;GACD,CAAA;EAED,MAAMM,UAAU,GAAGA,MAAK;AACtB,IAAA,IAAIb,QAAQ,EAAE;AACZ,MAAA,oBAAOc,cAAA,CAAA,MAAA,EAAA;AAAMX,QAAAA,SAAS,EAAC,kBAAA;AAAkB,QAAG,CAAA;AAC9C,KAAA;AAEA,IAAA,IAAID,OAAO,EAAE;AACX,MAAA,oBACEY,cAAA,CAAA,MAAA,EAAA;AAAMX,QAAAA,SAAS,EAAC,kBAAkB;QAAAY,QAAA,eAChCD,cAAA,CAACE,qBAAe,EAAA;AAACC,UAAAA,IAAI,EAAE,EAAA;SACzB,CAAA;AAAA,OAAM,CAAC,CAAA;AAEX,KAAA;AACA,IAAA,oBACEH,cAAA,CAAA,MAAA,EAAA;AAAMX,MAAAA,SAAS,EAAC,kBAAkB;MAAAY,QAAA,eAChCD,cAAA,CAACI,qBAAe,EAAA;AAACD,QAAAA,IAAI,EAAE,EAAA;OACzB,CAAA;AAAA,KAAM,CAAC,CAAA;GAEV,CAAA;AAED,EAAA,MAAME,cAAc,GAClB,CAACd,SAAS,GAAGe,SAAS,GAAGd,kBAAkB,KAAKT,eAAe,CAAC,iBAAiB,CAAC,CAAA;AAEpF,EAAA,oBACEwB,eAAA,CAAA,MAAA,EAAA;AACElB,IAAAA,SAAS,EAAEmB,2BAAU,CACnB,WAAW,EAEX;MACE,sBAAsB,EAAE,CAACpB,OAAO;AAChC,MAAA,oBAAoB,EAAEA,OAAO;AAC7BM,MAAAA,QAAAA;KACD,EACDL,SAAS,CACT;AACFoB,IAAAA,QAAQ,EAAE,CAAE;AACZC,IAAAA,IAAI,EAAC,QAAQ;AACb,IAAA,cAAA,EAActB,OAAQ;AACtB,IAAA,YAAA,EAAYG,SAAU;AAAA,IAAA,GAClBR,eAAe;AACnB,IAAA,iBAAA,EAAiBsB,cAAe;AAChCf,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,eAAA,EAAeI,QAAS;AACxBD,IAAAA,OAAO,EAAE,CAACC,QAAQ,GAAGD,OAAO,GAAGa,SAAU;AACzCK,IAAAA,SAAS,EAAE,CAACjB,QAAQ,GAAGC,aAAa,GAAGW,SAAU;AAAAL,IAAAA,QAAA,EAEhDF,CAAAA,UAAU,EAAE,eACbC,cAAA,CAAA,OAAA,EAAA;AAAOY,MAAAA,IAAI,EAAC,UAAU;AAACxB,MAAAA,OAAO,EAAEA,OAAQ;MAACyB,QAAQ,EAAA,IAAA;AAAA,KACnD,CAAA,CAAA;AAAA,GAAM,CAAC,CAAA;AAEX;;;;"}
+{"version":3,"file":"Switch.js","sources":["../../src/switch/Switch.tsx"],"sourcesContent":["import { CheckCircleFill, CrossCircleFill } from '@transferwise/icons';\nimport { useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport type { KeyboardEventHandler, MouseEvent } from 'react';\n\nimport type { CommonProps } from '../common';\nimport { useInputAttributes } from '../inputs/contexts';\n\nexport type SwitchProps = CommonProps & {\n  /**\n   * Used to describe the purpose of the switch. To be used if there is no external label (i.e. aria-labelledby is null)\n   * @deprecated Use `Field` wrapper or the `aria-labelledby` attribute instead.\n   */\n  'aria-label'?: string;\n  /** A reference to a label that describes the purpose of the switch. Ignored if aria-label is provided */\n  'aria-labelledby'?: string;\n  /** Whether the switch is checked or not */\n  checked?: boolean;\n  disabled?: boolean;\n  /** ID to apply to the switch container */\n  id?: string;\n  /** Function called when the switch is toggled */\n  onClick: (event?: MouseEvent<HTMLSpanElement>) => void;\n};\n\nconst Switch = (props: SwitchProps) => {\n  const inputAttributes = useInputAttributes({ nonLabelable: true });\n\n  const { isModern } = useTheme();\n  const {\n    checked,\n    className,\n    id = inputAttributes.id,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledbyProp,\n    onClick,\n    disabled,\n  } = props;\n\n  const handleKeyDown: KeyboardEventHandler = (event) => {\n    if (event.key === ' ') {\n      event.preventDefault();\n      onClick();\n    }\n  };\n\n  const returnIcon = () => {\n    if (isModern) {\n      return <span className=\"np-switch--thumb\" />;\n    }\n\n    if (checked) {\n      return (\n        <span className=\"np-switch--thumb\">\n          <CheckCircleFill size={24} />\n        </span>\n      );\n    }\n    return (\n      <span className=\"np-switch--thumb\">\n        <CrossCircleFill size={24} />\n      </span>\n    );\n  };\n\n  const ariaLabelledby =\n    (ariaLabel ? undefined : ariaLabelledbyProp) ?? inputAttributes['aria-labelledby'];\n\n  return (\n    <span\n      className={clsx(\n        'np-switch',\n\n        {\n          'np-switch--unchecked': !checked,\n          'np-switch--checked': checked,\n          disabled,\n        },\n        className,\n      )}\n      tabIndex={0}\n      role=\"switch\"\n      aria-checked={checked}\n      aria-label={ariaLabel}\n      {...inputAttributes}\n      aria-labelledby={ariaLabelledby}\n      id={id}\n      aria-disabled={disabled}\n      onClick={!disabled ? onClick : undefined}\n      onKeyDown={!disabled ? handleKeyDown : undefined}\n    >\n      {returnIcon()}\n      <input type=\"checkbox\" checked={checked} readOnly />\n    </span>\n  );\n};\n\nexport default Switch;\n"],"names":["Switch","props","inputAttributes","useInputAttributes","nonLabelable","isModern","useTheme","checked","className","id","ariaLabel","ariaLabelledbyProp","onClick","disabled","handleKeyDown","event","key","preventDefault","returnIcon","_jsx","children","CheckCircleFill","size","CrossCircleFill","ariaLabelledby","undefined","_jsxs","clsx","tabIndex","role","onKeyDown","type","readOnly"],"mappings":";;;;;;;;AAyBMA,MAAAA,MAAM,GAAIC,KAAkB,IAAI;EACpC,MAAMC,eAAe,GAAGC,2BAAkB,CAAC;AAAEC,IAAAA,YAAY,EAAE,IAAA;AAAM,GAAA,CAAC,CAAA;EAElE,MAAM;AAAEC,IAAAA,QAAAA;GAAU,GAAGC,0BAAQ,EAAE,CAAA;EAC/B,MAAM;IACJC,OAAO;IACPC,SAAS;IACTC,EAAE,GAAGP,eAAe,CAACO,EAAE;AACvB,IAAA,YAAY,EAAEC,SAAS;AACvB,IAAA,iBAAiB,EAAEC,kBAAkB;IACrCC,OAAO;AACPC,IAAAA,QAAAA;AAAQ,GACT,GAAGZ,KAAK,CAAA;EAET,MAAMa,aAAa,GAA0BC,KAAK,IAAI;AACpD,IAAA,IAAIA,KAAK,CAACC,GAAG,KAAK,GAAG,EAAE;MACrBD,KAAK,CAACE,cAAc,EAAE,CAAA;AACtBL,MAAAA,OAAO,EAAE,CAAA;AACX,KAAA;GACD,CAAA;EAED,MAAMM,UAAU,GAAGA,MAAK;AACtB,IAAA,IAAIb,QAAQ,EAAE;AACZ,MAAA,oBAAOc,cAAA,CAAA,MAAA,EAAA;AAAMX,QAAAA,SAAS,EAAC,kBAAA;AAAkB,QAAG,CAAA;AAC9C,KAAA;AAEA,IAAA,IAAID,OAAO,EAAE;AACX,MAAA,oBACEY,cAAA,CAAA,MAAA,EAAA;AAAMX,QAAAA,SAAS,EAAC,kBAAkB;QAAAY,QAAA,eAChCD,cAAA,CAACE,qBAAe,EAAA;AAACC,UAAAA,IAAI,EAAE,EAAA;SACzB,CAAA;AAAA,OAAM,CAAC,CAAA;AAEX,KAAA;AACA,IAAA,oBACEH,cAAA,CAAA,MAAA,EAAA;AAAMX,MAAAA,SAAS,EAAC,kBAAkB;MAAAY,QAAA,eAChCD,cAAA,CAACI,qBAAe,EAAA;AAACD,QAAAA,IAAI,EAAE,EAAA;OACzB,CAAA;AAAA,KAAM,CAAC,CAAA;GAEV,CAAA;AAED,EAAA,MAAME,cAAc,GAClB,CAACd,SAAS,GAAGe,SAAS,GAAGd,kBAAkB,KAAKT,eAAe,CAAC,iBAAiB,CAAC,CAAA;AAEpF,EAAA,oBACEwB,eAAA,CAAA,MAAA,EAAA;AACElB,IAAAA,SAAS,EAAEmB,SAAI,CACb,WAAW,EAEX;MACE,sBAAsB,EAAE,CAACpB,OAAO;AAChC,MAAA,oBAAoB,EAAEA,OAAO;AAC7BM,MAAAA,QAAAA;KACD,EACDL,SAAS,CACT;AACFoB,IAAAA,QAAQ,EAAE,CAAE;AACZC,IAAAA,IAAI,EAAC,QAAQ;AACb,IAAA,cAAA,EAActB,OAAQ;AACtB,IAAA,YAAA,EAAYG,SAAU;AAAA,IAAA,GAClBR,eAAe;AACnB,IAAA,iBAAA,EAAiBsB,cAAe;AAChCf,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,eAAA,EAAeI,QAAS;AACxBD,IAAAA,OAAO,EAAE,CAACC,QAAQ,GAAGD,OAAO,GAAGa,SAAU;AACzCK,IAAAA,SAAS,EAAE,CAACjB,QAAQ,GAAGC,aAAa,GAAGW,SAAU;AAAAL,IAAAA,QAAA,EAEhDF,CAAAA,UAAU,EAAE,eACbC,cAAA,CAAA,OAAA,EAAA;AAAOY,MAAAA,IAAI,EAAC,UAAU;AAACxB,MAAAA,OAAO,EAAEA,OAAQ;MAACyB,QAAQ,EAAA,IAAA;AAAA,KACnD,CAAA,CAAA;AAAA,GAAM,CAAC,CAAA;AAEX;;;;"}

package/build/switch/Switch.mjs

@@ -1,6 +1,6 @@
 import { CheckCircleFill, CrossCircleFill } from '@transferwise/icons';
 import { useTheme } from '@wise/components-theming';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { useInputAttributes } from '../inputs/contexts.mjs';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -49,7 +49,7 @@ const Switch = props => {
   };
   const ariaLabelledby = (ariaLabel ? undefined : ariaLabelledbyProp) ?? inputAttributes['aria-labelledby'];
   return /*#__PURE__*/jsxs("span", {
-    className: classNames('np-switch', {
+    className: clsx('np-switch', {
       'np-switch--unchecked': !checked,
       'np-switch--checked': checked,
       disabled