@transferwise/components 46.50.1 → 46.52.0

package/build/inputs/_Popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"_Popover.js","sources":["../../src/inputs/_Popover.tsx"],"sourcesContent":["import {\n  autoUpdate,\n  flip,\n  FloatingFocusManager,\n  FloatingPortal,\n  offset,\n  type Placement,\n  shift,\n  size as floatingSize,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useRole,\n} from '@floating-ui/react';\nimport { Transition } from '@headlessui/react';\nimport { FocusScope } from '@react-aria/focus';\nimport { ThemeProvider, useTheme } from '@wise/components-theming';\nimport classNames from 'classnames';\nimport { useState } from 'react';\n\nimport { PreventScroll } from '../common/preventScroll/PreventScroll';\n\nexport interface PopoverProps {\n  placement?: Placement;\n  open: boolean;\n  renderTrigger: (args: {\n    ref: React.RefCallback<Element>;\n    getInteractionProps: (customEventHandlers?: React.HTMLProps<Element>) => {\n      [key: string]: unknown;\n    };\n  }) => React.ReactNode;\n  title?: string;\n  size?: 'md' | 'lg';\n  padding?: 'none' | 'md';\n  children?: React.ReactNode;\n  onClose?: () => void;\n  onCloseEnd?: () => void;\n}\n\nconst floatingPadding = 16;\n\nexport function Popover({\n  placement,\n  open,\n  renderTrigger,\n  title,\n  size = 'md',\n  padding = 'md',\n  children,\n  onClose,\n  onCloseEnd,\n}: PopoverProps) {\n  const { refs, floatingStyles, context } = useFloating<Element>({\n    placement,\n    middleware: [\n      offset(8),\n      flip({ padding: floatingPadding, crossAxis: false }),\n      shift(),\n      floatingSize({\n        padding: floatingPadding,\n        apply: ({ elements, rects, availableHeight }) => {\n          elements.floating.style.setProperty('--max-height', `${availableHeight}px`);\n          elements.floating.style.setProperty('--width', `${rects.reference.width}px`);\n        },\n      }),\n    ],\n    whileElementsMounted: autoUpdate,\n    open,\n    onOpenChange: (value) => {\n      if (!value) {\n        onClose?.();\n      }\n    },\n  });\n\n  const dismiss = useDismiss(context);\n  const role = useRole(context);\n  const { getReferenceProps, getFloatingProps } = useInteractions([role, dismiss]);\n\n  const [floatingKey, setFloatingKey] = useState(0);\n\n  const { theme, screenMode } = useTheme();\n\n  return (\n    <>\n      {open ? <PreventScroll /> : null}\n      {renderTrigger({\n        ref: refs.setReference,\n        getInteractionProps: getReferenceProps,\n      })}\n\n      <FloatingPortal>\n        <ThemeProvider\n          theme=\"personal\"\n          screenMode={theme === 'personal' ? screenMode : 'light'}\n          isNotRootProvider\n        >\n          <Transition\n            show={open}\n            leave=\"transition-opacity\"\n            leaveTo=\"opacity-0\"\n            beforeEnter={() => {\n              setFloatingKey((prev) => prev + 1);\n            }}\n            afterLeave={onCloseEnd}\n          >\n            <FocusScope>\n              <FloatingFocusManager context={context}>\n                <div\n                  key={floatingKey} // Force inner state invalidation on open\n                  ref={refs.setFloating}\n                  className={classNames('np-popover-v2-container', {\n                    'np-popover-v2-container--size-md': size === 'md',\n                    'np-popover-v2-container--size-lg': size === 'lg',\n                  })}\n                  // eslint-disable-next-line react/forbid-dom-props\n                  style={floatingStyles}\n                  {...getFloatingProps()}\n                >\n                  <div\n                    className={classNames('np-popover-v2', title && 'np-popover-v2--has-title', {\n                      'np-popover-v2--padding-md': padding === 'md',\n                    })}\n                  >\n                    {title ? (\n                      <h2 className=\"np-popover-v2-title np-text-title-body\">{title}</h2>\n                    ) : null}\n                    <div className=\"np-popover-v2-content np-text-body-default\">{children}</div>\n                  </div>\n                </div>\n              </FloatingFocusManager>\n            </FocusScope>\n          </Transition>\n        </ThemeProvider>\n      </FloatingPortal>\n    </>\n  );\n}\n"],"names":["floatingPadding","Popover","placement","open","renderTrigger","title","size","padding","children","onClose","onCloseEnd","refs","floatingStyles","context","useFloating","middleware","offset","flip","crossAxis","shift","floatingSize","apply","elements","rects","availableHeight","floating","style","setProperty","reference","width","whileElementsMounted","autoUpdate","onOpenChange","value","dismiss","useDismiss","role","useRole","getReferenceProps","getFloatingProps","useInteractions","floatingKey","setFloatingKey","useState","theme","screenMode","useTheme","_jsxs","_Fragment","_jsx","PreventScroll","ref","setReference","getInteractionProps","FloatingPortal","ThemeProvider","isNotRootProvider","Transition","show","leave","leaveTo","beforeEnter","prev","afterLeave","FocusScope","FloatingFocusManager","setFloating","className","classNames"],"mappings":"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"}
+{"version":3,"file":"_Popover.js","sources":["../../src/inputs/_Popover.tsx"],"sourcesContent":["import {\n  autoUpdate,\n  flip,\n  FloatingFocusManager,\n  FloatingPortal,\n  offset,\n  type Placement,\n  shift,\n  size as floatingSize,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useRole,\n} from '@floating-ui/react';\nimport { Transition } from '@headlessui/react';\nimport { FocusScope } from '@react-aria/focus';\nimport { ThemeProvider, useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { useState } from 'react';\n\nimport { PreventScroll } from '../common/preventScroll/PreventScroll';\n\nexport interface PopoverProps {\n  placement?: Placement;\n  open: boolean;\n  renderTrigger: (args: {\n    ref: React.RefCallback<Element>;\n    getInteractionProps: (customEventHandlers?: React.HTMLProps<Element>) => {\n      [key: string]: unknown;\n    };\n  }) => React.ReactNode;\n  title?: string;\n  size?: 'md' | 'lg';\n  padding?: 'none' | 'md';\n  children?: React.ReactNode;\n  onClose?: () => void;\n  onCloseEnd?: () => void;\n}\n\nconst floatingPadding = 16;\n\nexport function Popover({\n  placement,\n  open,\n  renderTrigger,\n  title,\n  size = 'md',\n  padding = 'md',\n  children,\n  onClose,\n  onCloseEnd,\n}: PopoverProps) {\n  const { refs, floatingStyles, context } = useFloating<Element>({\n    placement,\n    middleware: [\n      offset(8),\n      flip({ padding: floatingPadding, crossAxis: false }),\n      shift(),\n      floatingSize({\n        padding: floatingPadding,\n        apply: ({ elements, rects, availableHeight }) => {\n          elements.floating.style.setProperty('--max-height', `${availableHeight}px`);\n          elements.floating.style.setProperty('--width', `${rects.reference.width}px`);\n        },\n      }),\n    ],\n    whileElementsMounted: autoUpdate,\n    open,\n    onOpenChange: (value) => {\n      if (!value) {\n        onClose?.();\n      }\n    },\n  });\n\n  const dismiss = useDismiss(context);\n  const role = useRole(context);\n  const { getReferenceProps, getFloatingProps } = useInteractions([role, dismiss]);\n\n  const [floatingKey, setFloatingKey] = useState(0);\n\n  const { theme, screenMode } = useTheme();\n\n  return (\n    <>\n      {open ? <PreventScroll /> : null}\n      {renderTrigger({\n        ref: refs.setReference,\n        getInteractionProps: getReferenceProps,\n      })}\n\n      <FloatingPortal>\n        <ThemeProvider\n          theme=\"personal\"\n          screenMode={theme === 'personal' ? screenMode : 'light'}\n          isNotRootProvider\n        >\n          <Transition\n            show={open}\n            leave=\"transition-opacity\"\n            leaveTo=\"opacity-0\"\n            beforeEnter={() => {\n              setFloatingKey((prev) => prev + 1);\n            }}\n            afterLeave={onCloseEnd}\n          >\n            <FocusScope>\n              <FloatingFocusManager context={context}>\n                <div\n                  key={floatingKey} // Force inner state invalidation on open\n                  ref={refs.setFloating}\n                  className={clsx('np-popover-v2-container', {\n                    'np-popover-v2-container--size-md': size === 'md',\n                    'np-popover-v2-container--size-lg': size === 'lg',\n                  })}\n                  // eslint-disable-next-line react/forbid-dom-props\n                  style={floatingStyles}\n                  {...getFloatingProps()}\n                >\n                  <div\n                    className={clsx('np-popover-v2', title && 'np-popover-v2--has-title', {\n                      'np-popover-v2--padding-md': padding === 'md',\n                    })}\n                  >\n                    {title ? (\n                      <h2 className=\"np-popover-v2-title np-text-title-body\">{title}</h2>\n                    ) : null}\n                    <div className=\"np-popover-v2-content np-text-body-default\">{children}</div>\n                  </div>\n                </div>\n              </FloatingFocusManager>\n            </FocusScope>\n          </Transition>\n        </ThemeProvider>\n      </FloatingPortal>\n    </>\n  );\n}\n"],"names":["floatingPadding","Popover","placement","open","renderTrigger","title","size","padding","children","onClose","onCloseEnd","refs","floatingStyles","context","useFloating","middleware","offset","flip","crossAxis","shift","floatingSize","apply","elements","rects","availableHeight","floating","style","setProperty","reference","width","whileElementsMounted","autoUpdate","onOpenChange","value","dismiss","useDismiss","role","useRole","getReferenceProps","getFloatingProps","useInteractions","floatingKey","setFloatingKey","useState","theme","screenMode","useTheme","_jsxs","_Fragment","_jsx","PreventScroll","ref","setReference","getInteractionProps","FloatingPortal","ThemeProvider","isNotRootProvider","Transition","show","leave","leaveTo","beforeEnter","prev","afterLeave","FocusScope","FloatingFocusManager","setFloating","className","clsx"],"mappings":"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"}

package/build/inputs/_Popover.mjs

@@ -2,7 +2,7 @@ import { useFloating, offset, flip, shift, size, autoUpdate, useDismiss, useRole
 import { Transition } from '@headlessui/react';
 import { FocusScope } from '@react-aria/focus';
 import { useTheme, ThemeProvider } from '@wise/components-theming';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { useState } from 'react';
 import { PreventScroll } from '../common/preventScroll/PreventScroll.mjs';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
@@ -81,7 +81,7 @@ function Popover({
               children: /*#__PURE__*/jsx("div", {
                 // Force inner state invalidation on open
                 ref: refs.setFloating,
-                className: classNames('np-popover-v2-container', {
+                className: clsx('np-popover-v2-container', {
                   'np-popover-v2-container--size-md': size$1 === 'md',
                   'np-popover-v2-container--size-lg': size$1 === 'lg'
                 })
@@ -90,7 +90,7 @@ function Popover({
                 style: floatingStyles,
                 ...getFloatingProps(),
                 children: /*#__PURE__*/jsxs("div", {
-                  className: classNames('np-popover-v2', title && 'np-popover-v2--has-title', {
+                  className: clsx('np-popover-v2', title && 'np-popover-v2--has-title', {
                     'np-popover-v2--padding-md': padding === 'md'
                   }),
                   children: [title ? /*#__PURE__*/jsx("h2", {

package/build/inputs/_Popover.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"_Popover.mjs","sources":["../../src/inputs/_Popover.tsx"],"sourcesContent":["import {\n  autoUpdate,\n  flip,\n  FloatingFocusManager,\n  FloatingPortal,\n  offset,\n  type Placement,\n  shift,\n  size as floatingSize,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useRole,\n} from '@floating-ui/react';\nimport { Transition } from '@headlessui/react';\nimport { FocusScope } from '@react-aria/focus';\nimport { ThemeProvider, useTheme } from '@wise/components-theming';\nimport classNames from 'classnames';\nimport { useState } from 'react';\n\nimport { PreventScroll } from '../common/preventScroll/PreventScroll';\n\nexport interface PopoverProps {\n  placement?: Placement;\n  open: boolean;\n  renderTrigger: (args: {\n    ref: React.RefCallback<Element>;\n    getInteractionProps: (customEventHandlers?: React.HTMLProps<Element>) => {\n      [key: string]: unknown;\n    };\n  }) => React.ReactNode;\n  title?: string;\n  size?: 'md' | 'lg';\n  padding?: 'none' | 'md';\n  children?: React.ReactNode;\n  onClose?: () => void;\n  onCloseEnd?: () => void;\n}\n\nconst floatingPadding = 16;\n\nexport function Popover({\n  placement,\n  open,\n  renderTrigger,\n  title,\n  size = 'md',\n  padding = 'md',\n  children,\n  onClose,\n  onCloseEnd,\n}: PopoverProps) {\n  const { refs, floatingStyles, context } = useFloating<Element>({\n    placement,\n    middleware: [\n      offset(8),\n      flip({ padding: floatingPadding, crossAxis: false }),\n      shift(),\n      floatingSize({\n        padding: floatingPadding,\n        apply: ({ elements, rects, availableHeight }) => {\n          elements.floating.style.setProperty('--max-height', `${availableHeight}px`);\n          elements.floating.style.setProperty('--width', `${rects.reference.width}px`);\n        },\n      }),\n    ],\n    whileElementsMounted: autoUpdate,\n    open,\n    onOpenChange: (value) => {\n      if (!value) {\n        onClose?.();\n      }\n    },\n  });\n\n  const dismiss = useDismiss(context);\n  const role = useRole(context);\n  const { getReferenceProps, getFloatingProps } = useInteractions([role, dismiss]);\n\n  const [floatingKey, setFloatingKey] = useState(0);\n\n  const { theme, screenMode } = useTheme();\n\n  return (\n    <>\n      {open ? <PreventScroll /> : null}\n      {renderTrigger({\n        ref: refs.setReference,\n        getInteractionProps: getReferenceProps,\n      })}\n\n      <FloatingPortal>\n        <ThemeProvider\n          theme=\"personal\"\n          screenMode={theme === 'personal' ? screenMode : 'light'}\n          isNotRootProvider\n        >\n          <Transition\n            show={open}\n            leave=\"transition-opacity\"\n            leaveTo=\"opacity-0\"\n            beforeEnter={() => {\n              setFloatingKey((prev) => prev + 1);\n            }}\n            afterLeave={onCloseEnd}\n          >\n            <FocusScope>\n              <FloatingFocusManager context={context}>\n                <div\n                  key={floatingKey} // Force inner state invalidation on open\n                  ref={refs.setFloating}\n                  className={classNames('np-popover-v2-container', {\n                    'np-popover-v2-container--size-md': size === 'md',\n                    'np-popover-v2-container--size-lg': size === 'lg',\n                  })}\n                  // eslint-disable-next-line react/forbid-dom-props\n                  style={floatingStyles}\n                  {...getFloatingProps()}\n                >\n                  <div\n                    className={classNames('np-popover-v2', title && 'np-popover-v2--has-title', {\n                      'np-popover-v2--padding-md': padding === 'md',\n                    })}\n                  >\n                    {title ? (\n                      <h2 className=\"np-popover-v2-title np-text-title-body\">{title}</h2>\n                    ) : null}\n                    <div className=\"np-popover-v2-content np-text-body-default\">{children}</div>\n                  </div>\n                </div>\n              </FloatingFocusManager>\n            </FocusScope>\n          </Transition>\n        </ThemeProvider>\n      </FloatingPortal>\n    </>\n  );\n}\n"],"names":["floatingPadding","Popover","placement","open","renderTrigger","title","size","padding","children","onClose","onCloseEnd","refs","floatingStyles","context","useFloating","middleware","offset","flip","crossAxis","shift","floatingSize","apply","elements","rects","availableHeight","floating","style","setProperty","reference","width","whileElementsMounted","autoUpdate","onOpenChange","value","dismiss","useDismiss","role","useRole","getReferenceProps","getFloatingProps","useInteractions","floatingKey","setFloatingKey","useState","theme","screenMode","useTheme","_jsxs","_Fragment","_jsx","PreventScroll","ref","setReference","getInteractionProps","FloatingPortal","ThemeProvider","isNotRootProvider","Transition","show","leave","leaveTo","beforeEnter","prev","afterLeave","FocusScope","FloatingFocusManager","setFloating","className","classNames"],"mappings":"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"}
+{"version":3,"file":"_Popover.mjs","sources":["../../src/inputs/_Popover.tsx"],"sourcesContent":["import {\n  autoUpdate,\n  flip,\n  FloatingFocusManager,\n  FloatingPortal,\n  offset,\n  type Placement,\n  shift,\n  size as floatingSize,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useRole,\n} from '@floating-ui/react';\nimport { Transition } from '@headlessui/react';\nimport { FocusScope } from '@react-aria/focus';\nimport { ThemeProvider, useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { useState } from 'react';\n\nimport { PreventScroll } from '../common/preventScroll/PreventScroll';\n\nexport interface PopoverProps {\n  placement?: Placement;\n  open: boolean;\n  renderTrigger: (args: {\n    ref: React.RefCallback<Element>;\n    getInteractionProps: (customEventHandlers?: React.HTMLProps<Element>) => {\n      [key: string]: unknown;\n    };\n  }) => React.ReactNode;\n  title?: string;\n  size?: 'md' | 'lg';\n  padding?: 'none' | 'md';\n  children?: React.ReactNode;\n  onClose?: () => void;\n  onCloseEnd?: () => void;\n}\n\nconst floatingPadding = 16;\n\nexport function Popover({\n  placement,\n  open,\n  renderTrigger,\n  title,\n  size = 'md',\n  padding = 'md',\n  children,\n  onClose,\n  onCloseEnd,\n}: PopoverProps) {\n  const { refs, floatingStyles, context } = useFloating<Element>({\n    placement,\n    middleware: [\n      offset(8),\n      flip({ padding: floatingPadding, crossAxis: false }),\n      shift(),\n      floatingSize({\n        padding: floatingPadding,\n        apply: ({ elements, rects, availableHeight }) => {\n          elements.floating.style.setProperty('--max-height', `${availableHeight}px`);\n          elements.floating.style.setProperty('--width', `${rects.reference.width}px`);\n        },\n      }),\n    ],\n    whileElementsMounted: autoUpdate,\n    open,\n    onOpenChange: (value) => {\n      if (!value) {\n        onClose?.();\n      }\n    },\n  });\n\n  const dismiss = useDismiss(context);\n  const role = useRole(context);\n  const { getReferenceProps, getFloatingProps } = useInteractions([role, dismiss]);\n\n  const [floatingKey, setFloatingKey] = useState(0);\n\n  const { theme, screenMode } = useTheme();\n\n  return (\n    <>\n      {open ? <PreventScroll /> : null}\n      {renderTrigger({\n        ref: refs.setReference,\n        getInteractionProps: getReferenceProps,\n      })}\n\n      <FloatingPortal>\n        <ThemeProvider\n          theme=\"personal\"\n          screenMode={theme === 'personal' ? screenMode : 'light'}\n          isNotRootProvider\n        >\n          <Transition\n            show={open}\n            leave=\"transition-opacity\"\n            leaveTo=\"opacity-0\"\n            beforeEnter={() => {\n              setFloatingKey((prev) => prev + 1);\n            }}\n            afterLeave={onCloseEnd}\n          >\n            <FocusScope>\n              <FloatingFocusManager context={context}>\n                <div\n                  key={floatingKey} // Force inner state invalidation on open\n                  ref={refs.setFloating}\n                  className={clsx('np-popover-v2-container', {\n                    'np-popover-v2-container--size-md': size === 'md',\n                    'np-popover-v2-container--size-lg': size === 'lg',\n                  })}\n                  // eslint-disable-next-line react/forbid-dom-props\n                  style={floatingStyles}\n                  {...getFloatingProps()}\n                >\n                  <div\n                    className={clsx('np-popover-v2', title && 'np-popover-v2--has-title', {\n                      'np-popover-v2--padding-md': padding === 'md',\n                    })}\n                  >\n                    {title ? (\n                      <h2 className=\"np-popover-v2-title np-text-title-body\">{title}</h2>\n                    ) : null}\n                    <div className=\"np-popover-v2-content np-text-body-default\">{children}</div>\n                  </div>\n                </div>\n              </FloatingFocusManager>\n            </FocusScope>\n          </Transition>\n        </ThemeProvider>\n      </FloatingPortal>\n    </>\n  );\n}\n"],"names":["floatingPadding","Popover","placement","open","renderTrigger","title","size","padding","children","onClose","onCloseEnd","refs","floatingStyles","context","useFloating","middleware","offset","flip","crossAxis","shift","floatingSize","apply","elements","rects","availableHeight","floating","style","setProperty","reference","width","whileElementsMounted","autoUpdate","onOpenChange","value","dismiss","useDismiss","role","useRole","getReferenceProps","getFloatingProps","useInteractions","floatingKey","setFloatingKey","useState","theme","screenMode","useTheme","_jsxs","_Fragment","_jsx","PreventScroll","ref","setReference","getInteractionProps","FloatingPortal","ThemeProvider","isNotRootProvider","Transition","show","leave","leaveTo","beforeEnter","prev","afterLeave","FocusScope","FloatingFocusManager","setFloating","className","clsx"],"mappings":"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"}

package/build/inputs/_common.js

@@ -1,15 +1,11 @@
 'use strict';
 
-var classNames = require('classnames');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+var clsx = require('clsx');
 
 function inputClassNameBase({
   size = 'auto'
 } = {}) {
-  return classNames__default.default('form-control',
+  return clsx.clsx('form-control',
   // TODO: Deprecate
   'np-form-control', {
     'np-form-control--size-auto': size === 'auto',

package/build/inputs/_common.js.map

@@ -1 +1 @@
-{"version":3,"file":"_common.js","sources":["../../src/inputs/_common.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport { SizeLarge, SizeMedium, SizeSmall } from '../common';\n\nexport type InputPropsBase = {\n  size?: 'auto' | SizeSmall | SizeMedium | SizeLarge;\n};\n\nexport function inputClassNameBase({ size = 'auto' }: InputPropsBase = {}) {\n  return classNames(\n    'form-control', // TODO: Deprecate\n    'np-form-control',\n    {\n      'np-form-control--size-auto': size === 'auto',\n      'np-form-control--size-sm': size === 'sm',\n      'np-form-control--size-md': size === 'md',\n      'np-form-control--size-lg': size === 'lg',\n    },\n  );\n}\n"],"names":["inputClassNameBase","size","classNames"],"mappings":";;;;;;;;AAQM,SAAUA,kBAAkBA,CAAC;AAAEC,EAAAA,IAAI,GAAG,MAAA;IAA2B,EAAE,EAAA;EACvE,OAAOC,2BAAU,CACf,cAAc;AAAE;AAChB,EAAA,iBAAiB,EACjB;IACE,4BAA4B,EAAED,IAAI,KAAK,MAAM;IAC7C,0BAA0B,EAAEA,IAAI,KAAK,IAAI;IACzC,0BAA0B,EAAEA,IAAI,KAAK,IAAI;IACzC,0BAA0B,EAAEA,IAAI,KAAK,IAAA;AACtC,GAAA,CACF,CAAA;AACH;;;;"}
+{"version":3,"file":"_common.js","sources":["../../src/inputs/_common.ts"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport { SizeLarge, SizeMedium, SizeSmall } from '../common';\n\nexport type InputPropsBase = {\n  size?: 'auto' | SizeSmall | SizeMedium | SizeLarge;\n};\n\nexport function inputClassNameBase({ size = 'auto' }: InputPropsBase = {}) {\n  return clsx(\n    'form-control', // TODO: Deprecate\n    'np-form-control',\n    {\n      'np-form-control--size-auto': size === 'auto',\n      'np-form-control--size-sm': size === 'sm',\n      'np-form-control--size-md': size === 'md',\n      'np-form-control--size-lg': size === 'lg',\n    },\n  );\n}\n"],"names":["inputClassNameBase","size","clsx"],"mappings":";;;;AAQM,SAAUA,kBAAkBA,CAAC;AAAEC,EAAAA,IAAI,GAAG,MAAA;IAA2B,EAAE,EAAA;EACvE,OAAOC,SAAI,CACT,cAAc;AAAE;AAChB,EAAA,iBAAiB,EACjB;IACE,4BAA4B,EAAED,IAAI,KAAK,MAAM;IAC7C,0BAA0B,EAAEA,IAAI,KAAK,IAAI;IACzC,0BAA0B,EAAEA,IAAI,KAAK,IAAI;IACzC,0BAA0B,EAAEA,IAAI,KAAK,IAAA;AACtC,GAAA,CACF,CAAA;AACH;;;;"}

package/build/inputs/_common.mjs

@@ -1,9 +1,9 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 
 function inputClassNameBase({
   size = 'auto'
 } = {}) {
-  return classNames('form-control',
+  return clsx('form-control',
   // TODO: Deprecate
   'np-form-control', {
     'np-form-control--size-auto': size === 'auto',

package/build/inputs/_common.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"_common.mjs","sources":["../../src/inputs/_common.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport { SizeLarge, SizeMedium, SizeSmall } from '../common';\n\nexport type InputPropsBase = {\n  size?: 'auto' | SizeSmall | SizeMedium | SizeLarge;\n};\n\nexport function inputClassNameBase({ size = 'auto' }: InputPropsBase = {}) {\n  return classNames(\n    'form-control', // TODO: Deprecate\n    'np-form-control',\n    {\n      'np-form-control--size-auto': size === 'auto',\n      'np-form-control--size-sm': size === 'sm',\n      'np-form-control--size-md': size === 'md',\n      'np-form-control--size-lg': size === 'lg',\n    },\n  );\n}\n"],"names":["inputClassNameBase","size","classNames"],"mappings":";;AAQM,SAAUA,kBAAkBA,CAAC;AAAEC,EAAAA,IAAI,GAAG,MAAA;IAA2B,EAAE,EAAA;EACvE,OAAOC,UAAU,CACf,cAAc;AAAE;AAChB,EAAA,iBAAiB,EACjB;IACE,4BAA4B,EAAED,IAAI,KAAK,MAAM;IAC7C,0BAA0B,EAAEA,IAAI,KAAK,IAAI;IACzC,0BAA0B,EAAEA,IAAI,KAAK,IAAI;IACzC,0BAA0B,EAAEA,IAAI,KAAK,IAAA;AACtC,GAAA,CACF,CAAA;AACH;;;;"}
+{"version":3,"file":"_common.mjs","sources":["../../src/inputs/_common.ts"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport { SizeLarge, SizeMedium, SizeSmall } from '../common';\n\nexport type InputPropsBase = {\n  size?: 'auto' | SizeSmall | SizeMedium | SizeLarge;\n};\n\nexport function inputClassNameBase({ size = 'auto' }: InputPropsBase = {}) {\n  return clsx(\n    'form-control', // TODO: Deprecate\n    'np-form-control',\n    {\n      'np-form-control--size-auto': size === 'auto',\n      'np-form-control--size-sm': size === 'sm',\n      'np-form-control--size-md': size === 'md',\n      'np-form-control--size-lg': size === 'lg',\n    },\n  );\n}\n"],"names":["inputClassNameBase","size","clsx"],"mappings":";;AAQM,SAAUA,kBAAkBA,CAAC;AAAEC,EAAAA,IAAI,GAAG,MAAA;IAA2B,EAAE,EAAA;EACvE,OAAOC,IAAI,CACT,cAAc;AAAE;AAChB,EAAA,iBAAiB,EACjB;IACE,4BAA4B,EAAED,IAAI,KAAK,MAAM;IAC7C,0BAA0B,EAAEA,IAAI,KAAK,IAAI;IACzC,0BAA0B,EAAEA,IAAI,KAAK,IAAI;IACzC,0BAA0B,EAAEA,IAAI,KAAK,IAAA;AACtC,GAAA,CACF,CAAA;AACH;;;;"}

package/build/instructionsList/InstructionsList.js

@@ -1,15 +1,11 @@
 'use strict';
 
 var icons = require('@transferwise/icons');
-var classNames = require('classnames');
+var clsx = require('clsx');
 var Body = require('../body/Body.js');
 var jsxRuntime = require('react/jsx-runtime');
 var typography = require('../common/propsValues/typography.js');
 
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var classNames__default = /*#__PURE__*/_interopDefault(classNames);
-
 const InstructionsList = ({
   className,
   dos,
@@ -36,7 +32,7 @@ const InstructionsList = ({
     children: [dontsInstructions, dosInstructions]
   });
   return /*#__PURE__*/jsxRuntime.jsx("ul", {
-    className: classNames__default.default('tw-instructions', className),
+    className: clsx.clsx('tw-instructions', className),
     children: orderedInstructions
   });
 };

package/build/instructionsList/InstructionsList.js.map

@@ -1 +1 @@
-{"version":3,"file":"InstructionsList.js","sources":["../../src/instructionsList/InstructionsList.tsx"],"sourcesContent":["import { CrossCircleFill as DontIcon, CheckCircleFill as DoIcon } from '@transferwise/icons';\nimport classNames from 'classnames';\nimport { ReactNode } from 'react';\n\nimport Body from '../body/Body';\nimport { Typography, CommonProps } from '../common';\n\ntype InstructionNode = {\n  content: ReactNode;\n  ['aria-label']: string;\n};\n\nexport type InstructionsListProps = CommonProps &\n  (\n    | {\n        dos?: readonly ReactNode[];\n        donts?: readonly ReactNode[];\n        sort?: 'dosFirst' | 'dontsFirst';\n      }\n    | {\n        dos?: readonly InstructionNode[];\n        donts?: readonly InstructionNode[];\n        sort?: 'dosFirst' | 'dontsFirst';\n      }\n  );\n\nconst InstructionsList = ({ className, dos, donts, sort = 'dosFirst' }: InstructionsListProps) => {\n  const dosInstructions =\n    dos?.map((doThis, index) => (\n      // eslint-disable-next-line react/no-array-index-key\n      <Instruction key={index} item={doThis} type=\"do\" />\n    )) ?? null;\n\n  const dontsInstructions =\n    donts?.map((dont, index) => (\n      // eslint-disable-next-line react/no-array-index-key\n      <Instruction key={index} item={dont} type=\"dont\" />\n    )) ?? null;\n\n  const orderedInstructions =\n    sort === 'dosFirst' ? (\n      <>\n        {dosInstructions}\n        {dontsInstructions}\n      </>\n    ) : (\n      <>\n        {dontsInstructions}\n        {dosInstructions}\n      </>\n    );\n\n  return <ul className={classNames('tw-instructions', className)}>{orderedInstructions}</ul>;\n};\n\nfunction Instruction({ item, type }: { item: ReactNode | InstructionNode; type: 'do' | 'dont' }) {\n  const isInstructionNode =\n    typeof item === 'object' && item !== null && 'content' in item && 'aria-label' in item;\n  return (\n    <li\n      className=\"instruction\"\n      aria-label={isInstructionNode ? (item['aria-label'] as string) : undefined}\n    >\n      {type === 'do' ? (\n        <DoIcon size={24} className={type} />\n      ) : (\n        <DontIcon size={24} className={type} />\n      )}\n      <Body className=\"text-primary\" type={Typography.BODY_LARGE}>\n        {isInstructionNode ? item.content : item}\n      </Body>\n    </li>\n  );\n}\n\nexport default InstructionsList;\n"],"names":["InstructionsList","className","dos","donts","sort","dosInstructions","map","doThis","index","_jsx","Instruction","item","type","dontsInstructions","dont","orderedInstructions","_jsxs","_Fragment","children","classNames","isInstructionNode","undefined","DoIcon","size","DontIcon","Body","Typography","BODY_LARGE","content"],"mappings":";;;;;;;;;;;;AA0BMA,MAAAA,gBAAgB,GAAGA,CAAC;EAAEC,SAAS;EAAEC,GAAG;EAAEC,KAAK;AAAEC,EAAAA,IAAI,GAAG,UAAA;AAAU,CAAyB,KAAI;EAC/F,MAAMC,eAAe,GACnBH,GAAG,EAAEI,GAAG,CAAC,CAACC,MAAM,EAAEC,KAAK;AAAA;AACrB;AACAC,EAAAA,cAAA,CAACC,WAAW,EAAA;AAAaC,IAAAA,IAAI,EAAEJ,MAAO;AAACK,IAAAA,IAAI,EAAC,IAAA;AAAI,GAAA,EAA9BJ,MACnB,CAAC,IAAI,IAAI,CAAA;EAEZ,MAAMK,iBAAiB,GACrBV,KAAK,EAAEG,GAAG,CAAC,CAACQ,IAAI,EAAEN,KAAK;AAAA;AACrB;AACAC,EAAAA,cAAA,CAACC,WAAW,EAAA;AAAaC,IAAAA,IAAI,EAAEG,IAAK;AAACF,IAAAA,IAAI,EAAC,MAAA;AAAM,GAAA,EAA9BJ,MACnB,CAAC,IAAI,IAAI,CAAA;EAEZ,MAAMO,mBAAmB,GACvBX,IAAI,KAAK,UAAU,gBACjBY,eAAA,CAAAC,mBAAA,EAAA;IAAAC,QAAA,EAAA,CACGb,eAAe,EACfQ,iBAAiB,CAAA;AAAA,GACpB,CAAG,gBAEHG,eAAA,CAAAC,mBAAA,EAAA;IAAAC,QAAA,EAAA,CACGL,iBAAiB,EACjBR,eAAe,CAAA;AAAA,GAClB,CACD,CAAA;AAEH,EAAA,oBAAOI,cAAA,CAAA,IAAA,EAAA;AAAIR,IAAAA,SAAS,EAAEkB,2BAAU,CAAC,iBAAiB,EAAElB,SAAS,CAAE;AAAAiB,IAAAA,QAAA,EAAEH,mBAAAA;AAAmB,GAAK,CAAC,CAAA;AAC5F,EAAC;AAED,SAASL,WAAWA,CAAC;EAAEC,IAAI;AAAEC,EAAAA,IAAAA;AAAkE,CAAA,EAAA;AAC7F,EAAA,MAAMQ,iBAAiB,GACrB,OAAOT,IAAI,KAAK,QAAQ,IAAIA,IAAI,KAAK,IAAI,IAAI,SAAS,IAAIA,IAAI,IAAI,YAAY,IAAIA,IAAI,CAAA;AACxF,EAAA,oBACEK,eAAA,CAAA,IAAA,EAAA;AACEf,IAAAA,SAAS,EAAC,aAAa;AACvB,IAAA,YAAA,EAAYmB,iBAAiB,GAAIT,IAAI,CAAC,YAAY,CAAY,GAAGU,SAAU;AAAAH,IAAAA,QAAA,GAE1EN,IAAI,KAAK,IAAI,gBACZH,cAAA,CAACa,qBAAM,EAAA;AAACC,MAAAA,IAAI,EAAE,EAAG;AAACtB,MAAAA,SAAS,EAAEW,IAAAA;AAAK,MAAG,gBAErCH,cAAA,CAACe,qBAAQ,EAAA;AAACD,MAAAA,IAAI,EAAE,EAAG;AAACtB,MAAAA,SAAS,EAAEW,IAAAA;AAAK,KAAA,CACrC,eACDH,cAAA,CAACgB,IAAI,EAAA;AAACxB,MAAAA,SAAS,EAAC,cAAc;MAACW,IAAI,EAAEc,qBAAU,CAACC,UAAW;AAAAT,MAAAA,QAAA,EACxDE,iBAAiB,GAAGT,IAAI,CAACiB,OAAO,GAAGjB,IAAAA;AAAI,KACpC,CACR,CAAA;AAAA,GAAI,CAAC,CAAA;AAET;;;;"}
+{"version":3,"file":"InstructionsList.js","sources":["../../src/instructionsList/InstructionsList.tsx"],"sourcesContent":["import { CrossCircleFill as DontIcon, CheckCircleFill as DoIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { ReactNode } from 'react';\n\nimport Body from '../body/Body';\nimport { Typography, CommonProps } from '../common';\n\ntype InstructionNode = {\n  content: ReactNode;\n  ['aria-label']: string;\n};\n\nexport type InstructionsListProps = CommonProps &\n  (\n    | {\n        dos?: readonly ReactNode[];\n        donts?: readonly ReactNode[];\n        sort?: 'dosFirst' | 'dontsFirst';\n      }\n    | {\n        dos?: readonly InstructionNode[];\n        donts?: readonly InstructionNode[];\n        sort?: 'dosFirst' | 'dontsFirst';\n      }\n  );\n\nconst InstructionsList = ({ className, dos, donts, sort = 'dosFirst' }: InstructionsListProps) => {\n  const dosInstructions =\n    dos?.map((doThis, index) => (\n      // eslint-disable-next-line react/no-array-index-key\n      <Instruction key={index} item={doThis} type=\"do\" />\n    )) ?? null;\n\n  const dontsInstructions =\n    donts?.map((dont, index) => (\n      // eslint-disable-next-line react/no-array-index-key\n      <Instruction key={index} item={dont} type=\"dont\" />\n    )) ?? null;\n\n  const orderedInstructions =\n    sort === 'dosFirst' ? (\n      <>\n        {dosInstructions}\n        {dontsInstructions}\n      </>\n    ) : (\n      <>\n        {dontsInstructions}\n        {dosInstructions}\n      </>\n    );\n\n  return <ul className={clsx('tw-instructions', className)}>{orderedInstructions}</ul>;\n};\n\nfunction Instruction({ item, type }: { item: ReactNode | InstructionNode; type: 'do' | 'dont' }) {\n  const isInstructionNode =\n    typeof item === 'object' && item !== null && 'content' in item && 'aria-label' in item;\n  return (\n    <li\n      className=\"instruction\"\n      aria-label={isInstructionNode ? (item['aria-label']) : undefined}\n    >\n      {type === 'do' ? (\n        <DoIcon size={24} className={type} />\n      ) : (\n        <DontIcon size={24} className={type} />\n      )}\n      <Body className=\"text-primary\" type={Typography.BODY_LARGE}>\n        {isInstructionNode ? item.content : item}\n      </Body>\n    </li>\n  );\n}\n\nexport default InstructionsList;\n"],"names":["InstructionsList","className","dos","donts","sort","dosInstructions","map","doThis","index","_jsx","Instruction","item","type","dontsInstructions","dont","orderedInstructions","_jsxs","_Fragment","children","clsx","isInstructionNode","undefined","DoIcon","size","DontIcon","Body","Typography","BODY_LARGE","content"],"mappings":";;;;;;;;AA0BMA,MAAAA,gBAAgB,GAAGA,CAAC;EAAEC,SAAS;EAAEC,GAAG;EAAEC,KAAK;AAAEC,EAAAA,IAAI,GAAG,UAAA;AAAU,CAAyB,KAAI;EAC/F,MAAMC,eAAe,GACnBH,GAAG,EAAEI,GAAG,CAAC,CAACC,MAAM,EAAEC,KAAK;AAAA;AACrB;AACAC,EAAAA,cAAA,CAACC,WAAW,EAAA;AAAaC,IAAAA,IAAI,EAAEJ,MAAO;AAACK,IAAAA,IAAI,EAAC,IAAA;AAAI,GAAA,EAA9BJ,MACnB,CAAC,IAAI,IAAI,CAAA;EAEZ,MAAMK,iBAAiB,GACrBV,KAAK,EAAEG,GAAG,CAAC,CAACQ,IAAI,EAAEN,KAAK;AAAA;AACrB;AACAC,EAAAA,cAAA,CAACC,WAAW,EAAA;AAAaC,IAAAA,IAAI,EAAEG,IAAK;AAACF,IAAAA,IAAI,EAAC,MAAA;AAAM,GAAA,EAA9BJ,MACnB,CAAC,IAAI,IAAI,CAAA;EAEZ,MAAMO,mBAAmB,GACvBX,IAAI,KAAK,UAAU,gBACjBY,eAAA,CAAAC,mBAAA,EAAA;IAAAC,QAAA,EAAA,CACGb,eAAe,EACfQ,iBAAiB,CAAA;AAAA,GACpB,CAAG,gBAEHG,eAAA,CAAAC,mBAAA,EAAA;IAAAC,QAAA,EAAA,CACGL,iBAAiB,EACjBR,eAAe,CAAA;AAAA,GAClB,CACD,CAAA;AAEH,EAAA,oBAAOI,cAAA,CAAA,IAAA,EAAA;AAAIR,IAAAA,SAAS,EAAEkB,SAAI,CAAC,iBAAiB,EAAElB,SAAS,CAAE;AAAAiB,IAAAA,QAAA,EAAEH,mBAAAA;AAAmB,GAAK,CAAC,CAAA;AACtF,EAAC;AAED,SAASL,WAAWA,CAAC;EAAEC,IAAI;AAAEC,EAAAA,IAAAA;AAAkE,CAAA,EAAA;AAC7F,EAAA,MAAMQ,iBAAiB,GACrB,OAAOT,IAAI,KAAK,QAAQ,IAAIA,IAAI,KAAK,IAAI,IAAI,SAAS,IAAIA,IAAI,IAAI,YAAY,IAAIA,IAAI,CAAA;AACxF,EAAA,oBACEK,eAAA,CAAA,IAAA,EAAA;AACEf,IAAAA,SAAS,EAAC,aAAa;AACvB,IAAA,YAAA,EAAYmB,iBAAiB,GAAIT,IAAI,CAAC,YAAY,CAAC,GAAIU,SAAU;AAAAH,IAAAA,QAAA,GAEhEN,IAAI,KAAK,IAAI,gBACZH,cAAA,CAACa,qBAAM,EAAA;AAACC,MAAAA,IAAI,EAAE,EAAG;AAACtB,MAAAA,SAAS,EAAEW,IAAAA;AAAK,MAAG,gBAErCH,cAAA,CAACe,qBAAQ,EAAA;AAACD,MAAAA,IAAI,EAAE,EAAG;AAACtB,MAAAA,SAAS,EAAEW,IAAAA;AAAK,KAAA,CACrC,eACDH,cAAA,CAACgB,IAAI,EAAA;AAACxB,MAAAA,SAAS,EAAC,cAAc;MAACW,IAAI,EAAEc,qBAAU,CAACC,UAAW;AAAAT,MAAAA,QAAA,EACxDE,iBAAiB,GAAGT,IAAI,CAACiB,OAAO,GAAGjB,IAAAA;AAAI,KACpC,CACR,CAAA;AAAA,GAAI,CAAC,CAAA;AAET;;;;"}

package/build/instructionsList/InstructionsList.mjs

@@ -1,5 +1,5 @@
 import { CheckCircleFill, CrossCircleFill } from '@transferwise/icons';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import Body from '../body/Body.mjs';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Typography } from '../common/propsValues/typography.mjs';
@@ -30,7 +30,7 @@ const InstructionsList = ({
     children: [dontsInstructions, dosInstructions]
   });
   return /*#__PURE__*/jsx("ul", {
-    className: classNames('tw-instructions', className),
+    className: clsx('tw-instructions', className),
     children: orderedInstructions
   });
 };

package/build/instructionsList/InstructionsList.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"InstructionsList.mjs","sources":["../../src/instructionsList/InstructionsList.tsx"],"sourcesContent":["import { CrossCircleFill as DontIcon, CheckCircleFill as DoIcon } from '@transferwise/icons';\nimport classNames from 'classnames';\nimport { ReactNode } from 'react';\n\nimport Body from '../body/Body';\nimport { Typography, CommonProps } from '../common';\n\ntype InstructionNode = {\n  content: ReactNode;\n  ['aria-label']: string;\n};\n\nexport type InstructionsListProps = CommonProps &\n  (\n    | {\n        dos?: readonly ReactNode[];\n        donts?: readonly ReactNode[];\n        sort?: 'dosFirst' | 'dontsFirst';\n      }\n    | {\n        dos?: readonly InstructionNode[];\n        donts?: readonly InstructionNode[];\n        sort?: 'dosFirst' | 'dontsFirst';\n      }\n  );\n\nconst InstructionsList = ({ className, dos, donts, sort = 'dosFirst' }: InstructionsListProps) => {\n  const dosInstructions =\n    dos?.map((doThis, index) => (\n      // eslint-disable-next-line react/no-array-index-key\n      <Instruction key={index} item={doThis} type=\"do\" />\n    )) ?? null;\n\n  const dontsInstructions =\n    donts?.map((dont, index) => (\n      // eslint-disable-next-line react/no-array-index-key\n      <Instruction key={index} item={dont} type=\"dont\" />\n    )) ?? null;\n\n  const orderedInstructions =\n    sort === 'dosFirst' ? (\n      <>\n        {dosInstructions}\n        {dontsInstructions}\n      </>\n    ) : (\n      <>\n        {dontsInstructions}\n        {dosInstructions}\n      </>\n    );\n\n  return <ul className={classNames('tw-instructions', className)}>{orderedInstructions}</ul>;\n};\n\nfunction Instruction({ item, type }: { item: ReactNode | InstructionNode; type: 'do' | 'dont' }) {\n  const isInstructionNode =\n    typeof item === 'object' && item !== null && 'content' in item && 'aria-label' in item;\n  return (\n    <li\n      className=\"instruction\"\n      aria-label={isInstructionNode ? (item['aria-label'] as string) : undefined}\n    >\n      {type === 'do' ? (\n        <DoIcon size={24} className={type} />\n      ) : (\n        <DontIcon size={24} className={type} />\n      )}\n      <Body className=\"text-primary\" type={Typography.BODY_LARGE}>\n        {isInstructionNode ? item.content : item}\n      </Body>\n    </li>\n  );\n}\n\nexport default InstructionsList;\n"],"names":["InstructionsList","className","dos","donts","sort","dosInstructions","map","doThis","index","_jsx","Instruction","item","type","dontsInstructions","dont","orderedInstructions","_jsxs","_Fragment","children","classNames","isInstructionNode","undefined","DoIcon","size","DontIcon","Body","Typography","BODY_LARGE","content"],"mappings":";;;;;;AA0BMA,MAAAA,gBAAgB,GAAGA,CAAC;EAAEC,SAAS;EAAEC,GAAG;EAAEC,KAAK;AAAEC,EAAAA,IAAI,GAAG,UAAA;AAAU,CAAyB,KAAI;EAC/F,MAAMC,eAAe,GACnBH,GAAG,EAAEI,GAAG,CAAC,CAACC,MAAM,EAAEC,KAAK;AAAA;AACrB;AACAC,EAAAA,GAAA,CAACC,WAAW,EAAA;AAAaC,IAAAA,IAAI,EAAEJ,MAAO;AAACK,IAAAA,IAAI,EAAC,IAAA;AAAI,GAAA,EAA9BJ,MACnB,CAAC,IAAI,IAAI,CAAA;EAEZ,MAAMK,iBAAiB,GACrBV,KAAK,EAAEG,GAAG,CAAC,CAACQ,IAAI,EAAEN,KAAK;AAAA;AACrB;AACAC,EAAAA,GAAA,CAACC,WAAW,EAAA;AAAaC,IAAAA,IAAI,EAAEG,IAAK;AAACF,IAAAA,IAAI,EAAC,MAAA;AAAM,GAAA,EAA9BJ,MACnB,CAAC,IAAI,IAAI,CAAA;EAEZ,MAAMO,mBAAmB,GACvBX,IAAI,KAAK,UAAU,gBACjBY,IAAA,CAAAC,QAAA,EAAA;IAAAC,QAAA,EAAA,CACGb,eAAe,EACfQ,iBAAiB,CAAA;AAAA,GACpB,CAAG,gBAEHG,IAAA,CAAAC,QAAA,EAAA;IAAAC,QAAA,EAAA,CACGL,iBAAiB,EACjBR,eAAe,CAAA;AAAA,GAClB,CACD,CAAA;AAEH,EAAA,oBAAOI,GAAA,CAAA,IAAA,EAAA;AAAIR,IAAAA,SAAS,EAAEkB,UAAU,CAAC,iBAAiB,EAAElB,SAAS,CAAE;AAAAiB,IAAAA,QAAA,EAAEH,mBAAAA;AAAmB,GAAK,CAAC,CAAA;AAC5F,EAAC;AAED,SAASL,WAAWA,CAAC;EAAEC,IAAI;AAAEC,EAAAA,IAAAA;AAAkE,CAAA,EAAA;AAC7F,EAAA,MAAMQ,iBAAiB,GACrB,OAAOT,IAAI,KAAK,QAAQ,IAAIA,IAAI,KAAK,IAAI,IAAI,SAAS,IAAIA,IAAI,IAAI,YAAY,IAAIA,IAAI,CAAA;AACxF,EAAA,oBACEK,IAAA,CAAA,IAAA,EAAA;AACEf,IAAAA,SAAS,EAAC,aAAa;AACvB,IAAA,YAAA,EAAYmB,iBAAiB,GAAIT,IAAI,CAAC,YAAY,CAAY,GAAGU,SAAU;AAAAH,IAAAA,QAAA,GAE1EN,IAAI,KAAK,IAAI,gBACZH,GAAA,CAACa,eAAM,EAAA;AAACC,MAAAA,IAAI,EAAE,EAAG;AAACtB,MAAAA,SAAS,EAAEW,IAAAA;AAAK,MAAG,gBAErCH,GAAA,CAACe,eAAQ,EAAA;AAACD,MAAAA,IAAI,EAAE,EAAG;AAACtB,MAAAA,SAAS,EAAEW,IAAAA;AAAK,KAAA,CACrC,eACDH,GAAA,CAACgB,IAAI,EAAA;AAACxB,MAAAA,SAAS,EAAC,cAAc;MAACW,IAAI,EAAEc,UAAU,CAACC,UAAW;AAAAT,MAAAA,QAAA,EACxDE,iBAAiB,GAAGT,IAAI,CAACiB,OAAO,GAAGjB,IAAAA;AAAI,KACpC,CACR,CAAA;AAAA,GAAI,CAAC,CAAA;AAET;;;;"}
+{"version":3,"file":"InstructionsList.mjs","sources":["../../src/instructionsList/InstructionsList.tsx"],"sourcesContent":["import { CrossCircleFill as DontIcon, CheckCircleFill as DoIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { ReactNode } from 'react';\n\nimport Body from '../body/Body';\nimport { Typography, CommonProps } from '../common';\n\ntype InstructionNode = {\n  content: ReactNode;\n  ['aria-label']: string;\n};\n\nexport type InstructionsListProps = CommonProps &\n  (\n    | {\n        dos?: readonly ReactNode[];\n        donts?: readonly ReactNode[];\n        sort?: 'dosFirst' | 'dontsFirst';\n      }\n    | {\n        dos?: readonly InstructionNode[];\n        donts?: readonly InstructionNode[];\n        sort?: 'dosFirst' | 'dontsFirst';\n      }\n  );\n\nconst InstructionsList = ({ className, dos, donts, sort = 'dosFirst' }: InstructionsListProps) => {\n  const dosInstructions =\n    dos?.map((doThis, index) => (\n      // eslint-disable-next-line react/no-array-index-key\n      <Instruction key={index} item={doThis} type=\"do\" />\n    )) ?? null;\n\n  const dontsInstructions =\n    donts?.map((dont, index) => (\n      // eslint-disable-next-line react/no-array-index-key\n      <Instruction key={index} item={dont} type=\"dont\" />\n    )) ?? null;\n\n  const orderedInstructions =\n    sort === 'dosFirst' ? (\n      <>\n        {dosInstructions}\n        {dontsInstructions}\n      </>\n    ) : (\n      <>\n        {dontsInstructions}\n        {dosInstructions}\n      </>\n    );\n\n  return <ul className={clsx('tw-instructions', className)}>{orderedInstructions}</ul>;\n};\n\nfunction Instruction({ item, type }: { item: ReactNode | InstructionNode; type: 'do' | 'dont' }) {\n  const isInstructionNode =\n    typeof item === 'object' && item !== null && 'content' in item && 'aria-label' in item;\n  return (\n    <li\n      className=\"instruction\"\n      aria-label={isInstructionNode ? (item['aria-label']) : undefined}\n    >\n      {type === 'do' ? (\n        <DoIcon size={24} className={type} />\n      ) : (\n        <DontIcon size={24} className={type} />\n      )}\n      <Body className=\"text-primary\" type={Typography.BODY_LARGE}>\n        {isInstructionNode ? item.content : item}\n      </Body>\n    </li>\n  );\n}\n\nexport default InstructionsList;\n"],"names":["InstructionsList","className","dos","donts","sort","dosInstructions","map","doThis","index","_jsx","Instruction","item","type","dontsInstructions","dont","orderedInstructions","_jsxs","_Fragment","children","clsx","isInstructionNode","undefined","DoIcon","size","DontIcon","Body","Typography","BODY_LARGE","content"],"mappings":";;;;;;AA0BMA,MAAAA,gBAAgB,GAAGA,CAAC;EAAEC,SAAS;EAAEC,GAAG;EAAEC,KAAK;AAAEC,EAAAA,IAAI,GAAG,UAAA;AAAU,CAAyB,KAAI;EAC/F,MAAMC,eAAe,GACnBH,GAAG,EAAEI,GAAG,CAAC,CAACC,MAAM,EAAEC,KAAK;AAAA;AACrB;AACAC,EAAAA,GAAA,CAACC,WAAW,EAAA;AAAaC,IAAAA,IAAI,EAAEJ,MAAO;AAACK,IAAAA,IAAI,EAAC,IAAA;AAAI,GAAA,EAA9BJ,MACnB,CAAC,IAAI,IAAI,CAAA;EAEZ,MAAMK,iBAAiB,GACrBV,KAAK,EAAEG,GAAG,CAAC,CAACQ,IAAI,EAAEN,KAAK;AAAA;AACrB;AACAC,EAAAA,GAAA,CAACC,WAAW,EAAA;AAAaC,IAAAA,IAAI,EAAEG,IAAK;AAACF,IAAAA,IAAI,EAAC,MAAA;AAAM,GAAA,EAA9BJ,MACnB,CAAC,IAAI,IAAI,CAAA;EAEZ,MAAMO,mBAAmB,GACvBX,IAAI,KAAK,UAAU,gBACjBY,IAAA,CAAAC,QAAA,EAAA;IAAAC,QAAA,EAAA,CACGb,eAAe,EACfQ,iBAAiB,CAAA;AAAA,GACpB,CAAG,gBAEHG,IAAA,CAAAC,QAAA,EAAA;IAAAC,QAAA,EAAA,CACGL,iBAAiB,EACjBR,eAAe,CAAA;AAAA,GAClB,CACD,CAAA;AAEH,EAAA,oBAAOI,GAAA,CAAA,IAAA,EAAA;AAAIR,IAAAA,SAAS,EAAEkB,IAAI,CAAC,iBAAiB,EAAElB,SAAS,CAAE;AAAAiB,IAAAA,QAAA,EAAEH,mBAAAA;AAAmB,GAAK,CAAC,CAAA;AACtF,EAAC;AAED,SAASL,WAAWA,CAAC;EAAEC,IAAI;AAAEC,EAAAA,IAAAA;AAAkE,CAAA,EAAA;AAC7F,EAAA,MAAMQ,iBAAiB,GACrB,OAAOT,IAAI,KAAK,QAAQ,IAAIA,IAAI,KAAK,IAAI,IAAI,SAAS,IAAIA,IAAI,IAAI,YAAY,IAAIA,IAAI,CAAA;AACxF,EAAA,oBACEK,IAAA,CAAA,IAAA,EAAA;AACEf,IAAAA,SAAS,EAAC,aAAa;AACvB,IAAA,YAAA,EAAYmB,iBAAiB,GAAIT,IAAI,CAAC,YAAY,CAAC,GAAIU,SAAU;AAAAH,IAAAA,QAAA,GAEhEN,IAAI,KAAK,IAAI,gBACZH,GAAA,CAACa,eAAM,EAAA;AAACC,MAAAA,IAAI,EAAE,EAAG;AAACtB,MAAAA,SAAS,EAAEW,IAAAA;AAAK,MAAG,gBAErCH,GAAA,CAACe,eAAQ,EAAA;AAACD,MAAAA,IAAI,EAAE,EAAG;AAACtB,MAAAA,SAAS,EAAEW,IAAAA;AAAK,KAAA,CACrC,eACDH,GAAA,CAACgB,IAAI,EAAA;AAACxB,MAAAA,SAAS,EAAC,cAAc;MAACW,IAAI,EAAEc,UAAU,CAACC,UAAW;AAAAT,MAAAA,QAAA,EACxDE,iBAAiB,GAAGT,IAAI,CAACiB,OAAO,GAAGjB,IAAAA;AAAI,KACpC,CACR,CAAA;AAAA,GAAI,CAAC,CAAA;AAET;;;;"}

package/build/label/Label.js

@@ -1,12 +1,8 @@
 'use strict';
 
-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 Label = ({
   id,
   htmlFor,
@@ -16,7 +12,7 @@ const Label = ({
   return /*#__PURE__*/jsxRuntime.jsx("label", {
     id: id,
     htmlFor: htmlFor,
-    className: classNames__default.default('control-label d-flex flex-column gap-y-1 m-b-0', className),
+    className: clsx.clsx('control-label d-flex flex-column gap-y-1 m-b-0', className),
     children: children
   });
 };

package/build/label/Label.js.map

@@ -1 +1 @@
-{"version":3,"file":"Label.js","sources":["../../src/label/Label.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nexport type LabelProps = {\n  id?: string;\n  htmlFor?: string;\n  className?: string;\n  children?: React.ReactNode;\n};\n\nexport const Label = ({ id, htmlFor, className, children }: LabelProps) => {\n  return (\n    <label\n      id={id}\n      htmlFor={htmlFor}\n      className={classNames('control-label d-flex flex-column gap-y-1 m-b-0', className)}\n    >\n      {children}\n    </label>\n  );\n};\n"],"names":["Label","id","htmlFor","className","children","_jsx","classNames"],"mappings":";;;;;;;;;AASO,MAAMA,KAAK,GAAGA,CAAC;EAAEC,EAAE;EAAEC,OAAO;EAAEC,SAAS;AAAEC,EAAAA,QAAAA;AAAQ,CAAc,KAAI;AACxE,EAAA,oBACEC,cAAA,CAAA,OAAA,EAAA;AACEJ,IAAAA,EAAE,EAAEA,EAAG;AACPC,IAAAA,OAAO,EAAEA,OAAQ;AACjBC,IAAAA,SAAS,EAAEG,2BAAU,CAAC,gDAAgD,EAAEH,SAAS,CAAE;AAAAC,IAAAA,QAAA,EAElFA,QAAAA;AAAQ,GACJ,CAAC,CAAA;AAEZ;;;;"}
+{"version":3,"file":"Label.js","sources":["../../src/label/Label.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nexport type LabelProps = {\n  id?: string;\n  htmlFor?: string;\n  className?: string;\n  children?: React.ReactNode;\n};\n\nexport const Label = ({ id, htmlFor, className, children }: LabelProps) => {\n  return (\n    <label\n      id={id}\n      htmlFor={htmlFor}\n      className={clsx('control-label d-flex flex-column gap-y-1 m-b-0', className)}\n    >\n      {children}\n    </label>\n  );\n};\n"],"names":["Label","id","htmlFor","className","children","_jsx","clsx"],"mappings":";;;;;AASO,MAAMA,KAAK,GAAGA,CAAC;EAAEC,EAAE;EAAEC,OAAO;EAAEC,SAAS;AAAEC,EAAAA,QAAAA;AAAQ,CAAc,KAAI;AACxE,EAAA,oBACEC,cAAA,CAAA,OAAA,EAAA;AACEJ,IAAAA,EAAE,EAAEA,EAAG;AACPC,IAAAA,OAAO,EAAEA,OAAQ;AACjBC,IAAAA,SAAS,EAAEG,SAAI,CAAC,gDAAgD,EAAEH,SAAS,CAAE;AAAAC,IAAAA,QAAA,EAE5EA,QAAAA;AAAQ,GACJ,CAAC,CAAA;AAEZ;;;;"}

package/build/label/Label.mjs

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { jsx } from 'react/jsx-runtime';
 
 const Label = ({
@@ -10,7 +10,7 @@ const Label = ({
   return /*#__PURE__*/jsx("label", {
     id: id,
     htmlFor: htmlFor,
-    className: classNames('control-label d-flex flex-column gap-y-1 m-b-0', className),
+    className: clsx('control-label d-flex flex-column gap-y-1 m-b-0', className),
     children: children
   });
 };

package/build/label/Label.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Label.mjs","sources":["../../src/label/Label.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nexport type LabelProps = {\n  id?: string;\n  htmlFor?: string;\n  className?: string;\n  children?: React.ReactNode;\n};\n\nexport const Label = ({ id, htmlFor, className, children }: LabelProps) => {\n  return (\n    <label\n      id={id}\n      htmlFor={htmlFor}\n      className={classNames('control-label d-flex flex-column gap-y-1 m-b-0', className)}\n    >\n      {children}\n    </label>\n  );\n};\n"],"names":["Label","id","htmlFor","className","children","_jsx","classNames"],"mappings":";;;AASO,MAAMA,KAAK,GAAGA,CAAC;EAAEC,EAAE;EAAEC,OAAO;EAAEC,SAAS;AAAEC,EAAAA,QAAAA;AAAQ,CAAc,KAAI;AACxE,EAAA,oBACEC,GAAA,CAAA,OAAA,EAAA;AACEJ,IAAAA,EAAE,EAAEA,EAAG;AACPC,IAAAA,OAAO,EAAEA,OAAQ;AACjBC,IAAAA,SAAS,EAAEG,UAAU,CAAC,gDAAgD,EAAEH,SAAS,CAAE;AAAAC,IAAAA,QAAA,EAElFA,QAAAA;AAAQ,GACJ,CAAC,CAAA;AAEZ;;;;"}
+{"version":3,"file":"Label.mjs","sources":["../../src/label/Label.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nexport type LabelProps = {\n  id?: string;\n  htmlFor?: string;\n  className?: string;\n  children?: React.ReactNode;\n};\n\nexport const Label = ({ id, htmlFor, className, children }: LabelProps) => {\n  return (\n    <label\n      id={id}\n      htmlFor={htmlFor}\n      className={clsx('control-label d-flex flex-column gap-y-1 m-b-0', className)}\n    >\n      {children}\n    </label>\n  );\n};\n"],"names":["Label","id","htmlFor","className","children","_jsx","clsx"],"mappings":";;;AASO,MAAMA,KAAK,GAAGA,CAAC;EAAEC,EAAE;EAAEC,OAAO;EAAEC,SAAS;AAAEC,EAAAA,QAAAA;AAAQ,CAAc,KAAI;AACxE,EAAA,oBACEC,GAAA,CAAA,OAAA,EAAA;AACEJ,IAAAA,EAAE,EAAEA,EAAG;AACPC,IAAAA,OAAO,EAAEA,OAAQ;AACjBC,IAAAA,SAAS,EAAEG,IAAI,CAAC,gDAAgD,EAAEH,SAAS,CAAE;AAAAC,IAAAA,QAAA,EAE5EA,QAAAA;AAAQ,GACJ,CAAC,CAAA;AAEZ;;;;"}

package/build/link/Link.js

@@ -1,15 +1,11 @@
 'use strict';
 
 var icons = require('@transferwise/icons');
-var classNames = require('classnames');
+var clsx = require('clsx');
 var reactIntl = require('react-intl');
 var Link_messages = require('./Link.messages.js');
 var jsxRuntime = require('react/jsx-runtime');
 
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var classNames__default = /*#__PURE__*/_interopDefault(classNames);
-
 const Link = ({
   className,
   children,
@@ -27,7 +23,7 @@ const Link = ({
   return /*#__PURE__*/jsxRuntime.jsxs("a", {
     href: href,
     target: target,
-    className: classNames__default.default('np-link', type ? `np-text-${type}` : undefined, 'd-inline-flex', className),
+    className: clsx.clsx('np-link', type ? `np-text-${type}` : undefined, 'd-inline-flex', className),
     "aria-label": ariaLabel,
     rel: isBlank ? 'noreferrer' : undefined,
     onClick: onClick,

package/build/link/Link.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.js","sources":["../../src/link/Link.tsx"],"sourcesContent":["import { NavigateAway as NavigateAwayIcon } from '@transferwise/icons';\nimport classNames from 'classnames';\nimport { AnchorHTMLAttributes } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { LinkLarge, LinkDefault } from '../common';\n\nimport messages from './Link.messages';\n\nexport type Props = AnchorHTMLAttributes<HTMLAnchorElement> & { type?: LinkLarge | LinkDefault };\n\n/**\n * Standard Link component with navigate away icon\n *\n * Documentation: https://transferwise.github.io/neptune-web/components/content/Link\n */\nconst Link = ({\n  className,\n  children,\n  href,\n  target,\n  type,\n  'aria-label': ariaLabel,\n  onClick,\n  ...props\n}: Props) => {\n  const isBlank = target === '_blank';\n\n  const { formatMessage } = useIntl();\n\n  return (\n    <a\n      href={href}\n      target={target}\n      className={classNames(\n        'np-link',\n        type ? `np-text-${type}` : undefined,\n        'd-inline-flex',\n        className,\n      )}\n      aria-label={ariaLabel}\n      rel={isBlank ? 'noreferrer' : undefined}\n      onClick={onClick}\n      {...props}\n    >\n      {children} {isBlank && <NavigateAwayIcon title={formatMessage(messages.opensInNewTab)} />}\n    </a>\n  );\n};\n\nexport default Link;\n"],"names":["Link","className","children","href","target","type","ariaLabel","onClick","props","isBlank","formatMessage","useIntl","_jsxs","classNames","undefined","rel","_jsx","NavigateAwayIcon","title","messages","opensInNewTab"],"mappings":";;;;;;;;;;;;AAgBMA,MAAAA,IAAI,GAAGA,CAAC;EACZC,SAAS;EACTC,QAAQ;EACRC,IAAI;EACJC,MAAM;EACNC,IAAI;AACJ,EAAA,YAAY,EAAEC,SAAS;EACvBC,OAAO;EACP,GAAGC,KAAAA;AACG,CAAA,KAAI;AACV,EAAA,MAAMC,OAAO,GAAGL,MAAM,KAAK,QAAQ,CAAA;EAEnC,MAAM;AAAEM,IAAAA,aAAAA;GAAe,GAAGC,iBAAO,EAAE,CAAA;AAEnC,EAAA,oBACEC,eAAA,CAAA,GAAA,EAAA;AACET,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,MAAM,EAAEA,MAAO;AACfH,IAAAA,SAAS,EAAEY,2BAAU,CACnB,SAAS,EACTR,IAAI,GAAG,CAAA,QAAA,EAAWA,IAAI,CAAA,CAAE,GAAGS,SAAS,EACpC,eAAe,EACfb,SAAS,CACT;AACF,IAAA,YAAA,EAAYK,SAAU;AACtBS,IAAAA,GAAG,EAAEN,OAAO,GAAG,YAAY,GAAGK,SAAU;AACxCP,IAAAA,OAAO,EAAEA,OAAQ;AAAA,IAAA,GACbC,KAAK;IAAAN,QAAA,EAAA,CAERA,QAAQ,EAAE,GAAA,EAACO,OAAO,iBAAIO,cAAA,CAACC,kBAAgB,EAAA;AAACC,MAAAA,KAAK,EAAER,aAAa,CAACS,aAAQ,CAACC,aAAa,CAAA;AAAE,MAAG,CAAA;AAAA,GACxF,CAAC,CAAA;AAER;;;;"}
+{"version":3,"file":"Link.js","sources":["../../src/link/Link.tsx"],"sourcesContent":["import { NavigateAway as NavigateAwayIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { AnchorHTMLAttributes } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { LinkLarge, LinkDefault } from '../common';\n\nimport messages from './Link.messages';\n\nexport type Props = AnchorHTMLAttributes<HTMLAnchorElement> & { type?: LinkLarge | LinkDefault };\n\n/**\n * Standard Link component with navigate away icon\n *\n * Documentation: https://transferwise.github.io/neptune-web/components/content/Link\n */\nconst Link = ({\n  className,\n  children,\n  href,\n  target,\n  type,\n  'aria-label': ariaLabel,\n  onClick,\n  ...props\n}: Props) => {\n  const isBlank = target === '_blank';\n\n  const { formatMessage } = useIntl();\n\n  return (\n    <a\n      href={href}\n      target={target}\n      className={clsx('np-link', type ? `np-text-${type}` : undefined, 'd-inline-flex', className)}\n      aria-label={ariaLabel}\n      rel={isBlank ? 'noreferrer' : undefined}\n      onClick={onClick}\n      {...props}\n    >\n      {children} {isBlank && <NavigateAwayIcon title={formatMessage(messages.opensInNewTab)} />}\n    </a>\n  );\n};\n\nexport default Link;\n"],"names":["Link","className","children","href","target","type","ariaLabel","onClick","props","isBlank","formatMessage","useIntl","_jsxs","clsx","undefined","rel","_jsx","NavigateAwayIcon","title","messages","opensInNewTab"],"mappings":";;;;;;;;AAgBMA,MAAAA,IAAI,GAAGA,CAAC;EACZC,SAAS;EACTC,QAAQ;EACRC,IAAI;EACJC,MAAM;EACNC,IAAI;AACJ,EAAA,YAAY,EAAEC,SAAS;EACvBC,OAAO;EACP,GAAGC,KAAAA;AACG,CAAA,KAAI;AACV,EAAA,MAAMC,OAAO,GAAGL,MAAM,KAAK,QAAQ,CAAA;EAEnC,MAAM;AAAEM,IAAAA,aAAAA;GAAe,GAAGC,iBAAO,EAAE,CAAA;AAEnC,EAAA,oBACEC,eAAA,CAAA,GAAA,EAAA;AACET,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,MAAM,EAAEA,MAAO;AACfH,IAAAA,SAAS,EAAEY,SAAI,CAAC,SAAS,EAAER,IAAI,GAAG,CAAA,QAAA,EAAWA,IAAI,CAAA,CAAE,GAAGS,SAAS,EAAE,eAAe,EAAEb,SAAS,CAAE;AAC7F,IAAA,YAAA,EAAYK,SAAU;AACtBS,IAAAA,GAAG,EAAEN,OAAO,GAAG,YAAY,GAAGK,SAAU;AACxCP,IAAAA,OAAO,EAAEA,OAAQ;AAAA,IAAA,GACbC,KAAK;IAAAN,QAAA,EAAA,CAERA,QAAQ,EAAE,GAAA,EAACO,OAAO,iBAAIO,cAAA,CAACC,kBAAgB,EAAA;AAACC,MAAAA,KAAK,EAAER,aAAa,CAACS,aAAQ,CAACC,aAAa,CAAA;AAAE,MAAG,CAAA;AAAA,GACxF,CAAC,CAAA;AAER;;;;"}

package/build/link/Link.mjs

@@ -1,5 +1,5 @@
 import { NavigateAway } from '@transferwise/icons';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { useIntl } from 'react-intl';
 import messages from './Link.messages.mjs';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -21,7 +21,7 @@ const Link = ({
   return /*#__PURE__*/jsxs("a", {
     href: href,
     target: target,
-    className: classNames('np-link', type ? `np-text-${type}` : undefined, 'd-inline-flex', className),
+    className: clsx('np-link', type ? `np-text-${type}` : undefined, 'd-inline-flex', className),
     "aria-label": ariaLabel,
     rel: isBlank ? 'noreferrer' : undefined,
     onClick: onClick,

package/build/link/Link.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Link.mjs","sources":["../../src/link/Link.tsx"],"sourcesContent":["import { NavigateAway as NavigateAwayIcon } from '@transferwise/icons';\nimport classNames from 'classnames';\nimport { AnchorHTMLAttributes } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { LinkLarge, LinkDefault } from '../common';\n\nimport messages from './Link.messages';\n\nexport type Props = AnchorHTMLAttributes<HTMLAnchorElement> & { type?: LinkLarge | LinkDefault };\n\n/**\n * Standard Link component with navigate away icon\n *\n * Documentation: https://transferwise.github.io/neptune-web/components/content/Link\n */\nconst Link = ({\n  className,\n  children,\n  href,\n  target,\n  type,\n  'aria-label': ariaLabel,\n  onClick,\n  ...props\n}: Props) => {\n  const isBlank = target === '_blank';\n\n  const { formatMessage } = useIntl();\n\n  return (\n    <a\n      href={href}\n      target={target}\n      className={classNames(\n        'np-link',\n        type ? `np-text-${type}` : undefined,\n        'd-inline-flex',\n        className,\n      )}\n      aria-label={ariaLabel}\n      rel={isBlank ? 'noreferrer' : undefined}\n      onClick={onClick}\n      {...props}\n    >\n      {children} {isBlank && <NavigateAwayIcon title={formatMessage(messages.opensInNewTab)} />}\n    </a>\n  );\n};\n\nexport default Link;\n"],"names":["Link","className","children","href","target","type","ariaLabel","onClick","props","isBlank","formatMessage","useIntl","_jsxs","classNames","undefined","rel","_jsx","NavigateAwayIcon","title","messages","opensInNewTab"],"mappings":";;;;;;AAgBMA,MAAAA,IAAI,GAAGA,CAAC;EACZC,SAAS;EACTC,QAAQ;EACRC,IAAI;EACJC,MAAM;EACNC,IAAI;AACJ,EAAA,YAAY,EAAEC,SAAS;EACvBC,OAAO;EACP,GAAGC,KAAAA;AACG,CAAA,KAAI;AACV,EAAA,MAAMC,OAAO,GAAGL,MAAM,KAAK,QAAQ,CAAA;EAEnC,MAAM;AAAEM,IAAAA,aAAAA;GAAe,GAAGC,OAAO,EAAE,CAAA;AAEnC,EAAA,oBACEC,IAAA,CAAA,GAAA,EAAA;AACET,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,MAAM,EAAEA,MAAO;AACfH,IAAAA,SAAS,EAAEY,UAAU,CACnB,SAAS,EACTR,IAAI,GAAG,CAAA,QAAA,EAAWA,IAAI,CAAA,CAAE,GAAGS,SAAS,EACpC,eAAe,EACfb,SAAS,CACT;AACF,IAAA,YAAA,EAAYK,SAAU;AACtBS,IAAAA,GAAG,EAAEN,OAAO,GAAG,YAAY,GAAGK,SAAU;AACxCP,IAAAA,OAAO,EAAEA,OAAQ;AAAA,IAAA,GACbC,KAAK;IAAAN,QAAA,EAAA,CAERA,QAAQ,EAAE,GAAA,EAACO,OAAO,iBAAIO,GAAA,CAACC,YAAgB,EAAA;AAACC,MAAAA,KAAK,EAAER,aAAa,CAACS,QAAQ,CAACC,aAAa,CAAA;AAAE,MAAG,CAAA;AAAA,GACxF,CAAC,CAAA;AAER;;;;"}
+{"version":3,"file":"Link.mjs","sources":["../../src/link/Link.tsx"],"sourcesContent":["import { NavigateAway as NavigateAwayIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { AnchorHTMLAttributes } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { LinkLarge, LinkDefault } from '../common';\n\nimport messages from './Link.messages';\n\nexport type Props = AnchorHTMLAttributes<HTMLAnchorElement> & { type?: LinkLarge | LinkDefault };\n\n/**\n * Standard Link component with navigate away icon\n *\n * Documentation: https://transferwise.github.io/neptune-web/components/content/Link\n */\nconst Link = ({\n  className,\n  children,\n  href,\n  target,\n  type,\n  'aria-label': ariaLabel,\n  onClick,\n  ...props\n}: Props) => {\n  const isBlank = target === '_blank';\n\n  const { formatMessage } = useIntl();\n\n  return (\n    <a\n      href={href}\n      target={target}\n      className={clsx('np-link', type ? `np-text-${type}` : undefined, 'd-inline-flex', className)}\n      aria-label={ariaLabel}\n      rel={isBlank ? 'noreferrer' : undefined}\n      onClick={onClick}\n      {...props}\n    >\n      {children} {isBlank && <NavigateAwayIcon title={formatMessage(messages.opensInNewTab)} />}\n    </a>\n  );\n};\n\nexport default Link;\n"],"names":["Link","className","children","href","target","type","ariaLabel","onClick","props","isBlank","formatMessage","useIntl","_jsxs","clsx","undefined","rel","_jsx","NavigateAwayIcon","title","messages","opensInNewTab"],"mappings":";;;;;;AAgBMA,MAAAA,IAAI,GAAGA,CAAC;EACZC,SAAS;EACTC,QAAQ;EACRC,IAAI;EACJC,MAAM;EACNC,IAAI;AACJ,EAAA,YAAY,EAAEC,SAAS;EACvBC,OAAO;EACP,GAAGC,KAAAA;AACG,CAAA,KAAI;AACV,EAAA,MAAMC,OAAO,GAAGL,MAAM,KAAK,QAAQ,CAAA;EAEnC,MAAM;AAAEM,IAAAA,aAAAA;GAAe,GAAGC,OAAO,EAAE,CAAA;AAEnC,EAAA,oBACEC,IAAA,CAAA,GAAA,EAAA;AACET,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,MAAM,EAAEA,MAAO;AACfH,IAAAA,SAAS,EAAEY,IAAI,CAAC,SAAS,EAAER,IAAI,GAAG,CAAA,QAAA,EAAWA,IAAI,CAAA,CAAE,GAAGS,SAAS,EAAE,eAAe,EAAEb,SAAS,CAAE;AAC7F,IAAA,YAAA,EAAYK,SAAU;AACtBS,IAAAA,GAAG,EAAEN,OAAO,GAAG,YAAY,GAAGK,SAAU;AACxCP,IAAAA,OAAO,EAAEA,OAAQ;AAAA,IAAA,GACbC,KAAK;IAAAN,QAAA,EAAA,CAERA,QAAQ,EAAE,GAAA,EAACO,OAAO,iBAAIO,GAAA,CAACC,YAAgB,EAAA;AAACC,MAAAA,KAAK,EAAER,aAAa,CAACS,QAAQ,CAACC,aAAa,CAAA;AAAE,MAAG,CAAA;AAAA,GACxF,CAAC,CAAA;AAER;;;;"}

package/build/listItem/ListItem.js

@@ -1,13 +1,9 @@
 'use strict';
 
-var classNames = require('classnames');
+var clsx = require('clsx');
 var Body = require('../body/Body.js');
 var jsxRuntime = require('react/jsx-runtime');
 
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var classNames__default = /*#__PURE__*/_interopDefault(classNames);
-
 const ListItem = ({
   media,
   action,
@@ -20,12 +16,12 @@ const ListItem = ({
 }) => {
   const Element = as;
   return /*#__PURE__*/jsxRuntime.jsxs(Element, {
-    className: classNames__default.default('np-list-item d-flex align-items-center p-y-2', className, {
+    className: clsx.clsx('np-list-item d-flex align-items-center p-y-2', className, {
       'p-x-2': !isContainerAligned
     }),
     ...rest,
     children: [media, /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: classNames__default.default('d-flex flex-column', {
+      className: clsx.clsx('d-flex flex-column', {
         'p-l-2': !!media,
         'p-r-2': !!action
       }),

package/build/listItem/ListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.js","sources":["../../src/listItem/ListItem.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { ElementType, FC, ReactNode } from 'react';\n\nimport Body from '../body/Body';\n\ntype ListItemProps = {\n  title: ReactNode;\n  value: ReactNode;\n  media?: ReactNode;\n  action?: ReactNode;\n  className?: string;\n  isContainerAligned?: boolean;\n  as?: ElementType;\n};\n\nconst ListItem: FC<ListItemProps> = ({\n  media,\n  action,\n  className,\n  title,\n  value,\n  isContainerAligned,\n  as = 'li',\n  ...rest\n}) => {\n  const Element = as;\n\n  return (\n    <Element\n      className={classNames('np-list-item d-flex align-items-center p-y-2', className, {\n        'p-x-2': !isContainerAligned,\n      })}\n      {...rest}\n    >\n      {media}\n\n      <div className={classNames('d-flex flex-column', { 'p-l-2': !!media, 'p-r-2': !!action })}>\n        <Body type=\"body-default\" className=\"text-secondary m-b-0\">\n          {title}\n        </Body>\n        {value && (\n          <Body type=\"body-large\" className=\"text-primary m-b-0\">\n            {value}\n          </Body>\n        )}\n      </div>\n\n      {action ? <div className=\"np-list-item__action m-l-auto\">{action}</div> : null}\n    </Element>\n  );\n};\n\nexport default ListItem;\n"],"names":["ListItem","media","action","className","title","value","isContainerAligned","as","rest","Element","_jsxs","classNames","children","_jsx","Body","type"],"mappings":";;;;;;;;;;AAeA,MAAMA,QAAQ,GAAsBA,CAAC;EACnCC,KAAK;EACLC,MAAM;EACNC,SAAS;EACTC,KAAK;EACLC,KAAK;EACLC,kBAAkB;AAClBC,EAAAA,EAAE,GAAG,IAAI;EACT,GAAGC,IAAAA;AACJ,CAAA,KAAI;EACH,MAAMC,OAAO,GAAGF,EAAE,CAAA;EAElB,oBACEG,eAAA,CAACD,OAAO,EAAA;AACNN,IAAAA,SAAS,EAAEQ,2BAAU,CAAC,8CAA8C,EAAER,SAAS,EAAE;AAC/E,MAAA,OAAO,EAAE,CAACG,kBAAAA;AACX,KAAA,CAAE;AAAA,IAAA,GACCE,IAAI;IAAAI,QAAA,EAAA,CAEPX,KAAK,eAENS,eAAA,CAAA,KAAA,EAAA;AAAKP,MAAAA,SAAS,EAAEQ,2BAAU,CAAC,oBAAoB,EAAE;QAAE,OAAO,EAAE,CAAC,CAACV,KAAK;QAAE,OAAO,EAAE,CAAC,CAACC,MAAAA;AAAM,OAAE,CAAE;MAAAU,QAAA,EAAA,cACxFC,cAAA,CAACC,IAAI,EAAA;AAACC,QAAAA,IAAI,EAAC,cAAc;AAACZ,QAAAA,SAAS,EAAC,sBAAsB;AAAAS,QAAAA,QAAA,EACvDR,KAAAA;AAAK,OACF,CACN,EAACC,KAAK,iBACJQ,cAAA,CAACC,IAAI,EAAA;AAACC,QAAAA,IAAI,EAAC,YAAY;AAACZ,QAAAA,SAAS,EAAC,oBAAoB;AAAAS,QAAAA,QAAA,EACnDP,KAAAA;AAAK,OACF,CACP,CAAA;AAAA,KACE,CAEL,EAACH,MAAM,gBAAGW,cAAA,CAAA,KAAA,EAAA;AAAKV,MAAAA,SAAS,EAAC,+BAA+B;AAAAS,MAAAA,QAAA,EAAEV,MAAAA;KAAY,CAAC,GAAG,IAAI,CAAA;AAAA,GACvE,CAAC,CAAA;AAEd,CAAC,CAAA;AAED,iBAAeF,QAAQ;;;;"}
+{"version":3,"file":"ListItem.js","sources":["../../src/listItem/ListItem.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ElementType, FC, ReactNode } from 'react';\n\nimport Body from '../body/Body';\n\ntype ListItemProps = {\n  title: ReactNode;\n  value: ReactNode;\n  media?: ReactNode;\n  action?: ReactNode;\n  className?: string;\n  isContainerAligned?: boolean;\n  as?: ElementType;\n};\n\nconst ListItem: FC<ListItemProps> = ({\n  media,\n  action,\n  className,\n  title,\n  value,\n  isContainerAligned,\n  as = 'li',\n  ...rest\n}) => {\n  const Element = as;\n\n  return (\n    <Element\n      className={clsx('np-list-item d-flex align-items-center p-y-2', className, {\n        'p-x-2': !isContainerAligned,\n      })}\n      {...rest}\n    >\n      {media}\n\n      <div className={clsx('d-flex flex-column', { 'p-l-2': !!media, 'p-r-2': !!action })}>\n        <Body type=\"body-default\" className=\"text-secondary m-b-0\">\n          {title}\n        </Body>\n        {value && (\n          <Body type=\"body-large\" className=\"text-primary m-b-0\">\n            {value}\n          </Body>\n        )}\n      </div>\n\n      {action ? <div className=\"np-list-item__action m-l-auto\">{action}</div> : null}\n    </Element>\n  );\n};\n\nexport default ListItem;\n"],"names":["ListItem","media","action","className","title","value","isContainerAligned","as","rest","Element","_jsxs","clsx","children","_jsx","Body","type"],"mappings":";;;;;;AAeA,MAAMA,QAAQ,GAAsBA,CAAC;EACnCC,KAAK;EACLC,MAAM;EACNC,SAAS;EACTC,KAAK;EACLC,KAAK;EACLC,kBAAkB;AAClBC,EAAAA,EAAE,GAAG,IAAI;EACT,GAAGC,IAAAA;AACJ,CAAA,KAAI;EACH,MAAMC,OAAO,GAAGF,EAAE,CAAA;EAElB,oBACEG,eAAA,CAACD,OAAO,EAAA;AACNN,IAAAA,SAAS,EAAEQ,SAAI,CAAC,8CAA8C,EAAER,SAAS,EAAE;AACzE,MAAA,OAAO,EAAE,CAACG,kBAAAA;AACX,KAAA,CAAE;AAAA,IAAA,GACCE,IAAI;IAAAI,QAAA,EAAA,CAEPX,KAAK,eAENS,eAAA,CAAA,KAAA,EAAA;AAAKP,MAAAA,SAAS,EAAEQ,SAAI,CAAC,oBAAoB,EAAE;QAAE,OAAO,EAAE,CAAC,CAACV,KAAK;QAAE,OAAO,EAAE,CAAC,CAACC,MAAAA;AAAM,OAAE,CAAE;MAAAU,QAAA,EAAA,cAClFC,cAAA,CAACC,IAAI,EAAA;AAACC,QAAAA,IAAI,EAAC,cAAc;AAACZ,QAAAA,SAAS,EAAC,sBAAsB;AAAAS,QAAAA,QAAA,EACvDR,KAAAA;AAAK,OACF,CACN,EAACC,KAAK,iBACJQ,cAAA,CAACC,IAAI,EAAA;AAACC,QAAAA,IAAI,EAAC,YAAY;AAACZ,QAAAA,SAAS,EAAC,oBAAoB;AAAAS,QAAAA,QAAA,EACnDP,KAAAA;AAAK,OACF,CACP,CAAA;AAAA,KACE,CAEL,EAACH,MAAM,gBAAGW,cAAA,CAAA,KAAA,EAAA;AAAKV,MAAAA,SAAS,EAAC,+BAA+B;AAAAS,MAAAA,QAAA,EAAEV,MAAAA;KAAY,CAAC,GAAG,IAAI,CAAA;AAAA,GACvE,CAAC,CAAA;AAEd,CAAC,CAAA;AAED,iBAAeF,QAAQ;;;;"}

package/build/listItem/ListItem.mjs

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import Body from '../body/Body.mjs';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -14,12 +14,12 @@ const ListItem = ({
 }) => {
   const Element = as;
   return /*#__PURE__*/jsxs(Element, {
-    className: classNames('np-list-item d-flex align-items-center p-y-2', className, {
+    className: clsx('np-list-item d-flex align-items-center p-y-2', className, {
       'p-x-2': !isContainerAligned
     }),
     ...rest,
     children: [media, /*#__PURE__*/jsxs("div", {
-      className: classNames('d-flex flex-column', {
+      className: clsx('d-flex flex-column', {
         'p-l-2': !!media,
         'p-r-2': !!action
       }),

package/build/listItem/ListItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.mjs","sources":["../../src/listItem/ListItem.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { ElementType, FC, ReactNode } from 'react';\n\nimport Body from '../body/Body';\n\ntype ListItemProps = {\n  title: ReactNode;\n  value: ReactNode;\n  media?: ReactNode;\n  action?: ReactNode;\n  className?: string;\n  isContainerAligned?: boolean;\n  as?: ElementType;\n};\n\nconst ListItem: FC<ListItemProps> = ({\n  media,\n  action,\n  className,\n  title,\n  value,\n  isContainerAligned,\n  as = 'li',\n  ...rest\n}) => {\n  const Element = as;\n\n  return (\n    <Element\n      className={classNames('np-list-item d-flex align-items-center p-y-2', className, {\n        'p-x-2': !isContainerAligned,\n      })}\n      {...rest}\n    >\n      {media}\n\n      <div className={classNames('d-flex flex-column', { 'p-l-2': !!media, 'p-r-2': !!action })}>\n        <Body type=\"body-default\" className=\"text-secondary m-b-0\">\n          {title}\n        </Body>\n        {value && (\n          <Body type=\"body-large\" className=\"text-primary m-b-0\">\n            {value}\n          </Body>\n        )}\n      </div>\n\n      {action ? <div className=\"np-list-item__action m-l-auto\">{action}</div> : null}\n    </Element>\n  );\n};\n\nexport default ListItem;\n"],"names":["ListItem","media","action","className","title","value","isContainerAligned","as","rest","Element","_jsxs","classNames","children","_jsx","Body","type"],"mappings":";;;;AAeA,MAAMA,QAAQ,GAAsBA,CAAC;EACnCC,KAAK;EACLC,MAAM;EACNC,SAAS;EACTC,KAAK;EACLC,KAAK;EACLC,kBAAkB;AAClBC,EAAAA,EAAE,GAAG,IAAI;EACT,GAAGC,IAAAA;AACJ,CAAA,KAAI;EACH,MAAMC,OAAO,GAAGF,EAAE,CAAA;EAElB,oBACEG,IAAA,CAACD,OAAO,EAAA;AACNN,IAAAA,SAAS,EAAEQ,UAAU,CAAC,8CAA8C,EAAER,SAAS,EAAE;AAC/E,MAAA,OAAO,EAAE,CAACG,kBAAAA;AACX,KAAA,CAAE;AAAA,IAAA,GACCE,IAAI;IAAAI,QAAA,EAAA,CAEPX,KAAK,eAENS,IAAA,CAAA,KAAA,EAAA;AAAKP,MAAAA,SAAS,EAAEQ,UAAU,CAAC,oBAAoB,EAAE;QAAE,OAAO,EAAE,CAAC,CAACV,KAAK;QAAE,OAAO,EAAE,CAAC,CAACC,MAAAA;AAAM,OAAE,CAAE;MAAAU,QAAA,EAAA,cACxFC,GAAA,CAACC,IAAI,EAAA;AAACC,QAAAA,IAAI,EAAC,cAAc;AAACZ,QAAAA,SAAS,EAAC,sBAAsB;AAAAS,QAAAA,QAAA,EACvDR,KAAAA;AAAK,OACF,CACN,EAACC,KAAK,iBACJQ,GAAA,CAACC,IAAI,EAAA;AAACC,QAAAA,IAAI,EAAC,YAAY;AAACZ,QAAAA,SAAS,EAAC,oBAAoB;AAAAS,QAAAA,QAAA,EACnDP,KAAAA;AAAK,OACF,CACP,CAAA;AAAA,KACE,CAEL,EAACH,MAAM,gBAAGW,GAAA,CAAA,KAAA,EAAA;AAAKV,MAAAA,SAAS,EAAC,+BAA+B;AAAAS,MAAAA,QAAA,EAAEV,MAAAA;KAAY,CAAC,GAAG,IAAI,CAAA;AAAA,GACvE,CAAC,CAAA;AAEd,CAAC,CAAA;AAED,iBAAeF,QAAQ;;;;"}
+{"version":3,"file":"ListItem.mjs","sources":["../../src/listItem/ListItem.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ElementType, FC, ReactNode } from 'react';\n\nimport Body from '../body/Body';\n\ntype ListItemProps = {\n  title: ReactNode;\n  value: ReactNode;\n  media?: ReactNode;\n  action?: ReactNode;\n  className?: string;\n  isContainerAligned?: boolean;\n  as?: ElementType;\n};\n\nconst ListItem: FC<ListItemProps> = ({\n  media,\n  action,\n  className,\n  title,\n  value,\n  isContainerAligned,\n  as = 'li',\n  ...rest\n}) => {\n  const Element = as;\n\n  return (\n    <Element\n      className={clsx('np-list-item d-flex align-items-center p-y-2', className, {\n        'p-x-2': !isContainerAligned,\n      })}\n      {...rest}\n    >\n      {media}\n\n      <div className={clsx('d-flex flex-column', { 'p-l-2': !!media, 'p-r-2': !!action })}>\n        <Body type=\"body-default\" className=\"text-secondary m-b-0\">\n          {title}\n        </Body>\n        {value && (\n          <Body type=\"body-large\" className=\"text-primary m-b-0\">\n            {value}\n          </Body>\n        )}\n      </div>\n\n      {action ? <div className=\"np-list-item__action m-l-auto\">{action}</div> : null}\n    </Element>\n  );\n};\n\nexport default ListItem;\n"],"names":["ListItem","media","action","className","title","value","isContainerAligned","as","rest","Element","_jsxs","clsx","children","_jsx","Body","type"],"mappings":";;;;AAeA,MAAMA,QAAQ,GAAsBA,CAAC;EACnCC,KAAK;EACLC,MAAM;EACNC,SAAS;EACTC,KAAK;EACLC,KAAK;EACLC,kBAAkB;AAClBC,EAAAA,EAAE,GAAG,IAAI;EACT,GAAGC,IAAAA;AACJ,CAAA,KAAI;EACH,MAAMC,OAAO,GAAGF,EAAE,CAAA;EAElB,oBACEG,IAAA,CAACD,OAAO,EAAA;AACNN,IAAAA,SAAS,EAAEQ,IAAI,CAAC,8CAA8C,EAAER,SAAS,EAAE;AACzE,MAAA,OAAO,EAAE,CAACG,kBAAAA;AACX,KAAA,CAAE;AAAA,IAAA,GACCE,IAAI;IAAAI,QAAA,EAAA,CAEPX,KAAK,eAENS,IAAA,CAAA,KAAA,EAAA;AAAKP,MAAAA,SAAS,EAAEQ,IAAI,CAAC,oBAAoB,EAAE;QAAE,OAAO,EAAE,CAAC,CAACV,KAAK;QAAE,OAAO,EAAE,CAAC,CAACC,MAAAA;AAAM,OAAE,CAAE;MAAAU,QAAA,EAAA,cAClFC,GAAA,CAACC,IAAI,EAAA;AAACC,QAAAA,IAAI,EAAC,cAAc;AAACZ,QAAAA,SAAS,EAAC,sBAAsB;AAAAS,QAAAA,QAAA,EACvDR,KAAAA;AAAK,OACF,CACN,EAACC,KAAK,iBACJQ,GAAA,CAACC,IAAI,EAAA;AAACC,QAAAA,IAAI,EAAC,YAAY;AAACZ,QAAAA,SAAS,EAAC,oBAAoB;AAAAS,QAAAA,QAAA,EACnDP,KAAAA;AAAK,OACF,CACP,CAAA;AAAA,KACE,CAEL,EAACH,MAAM,gBAAGW,GAAA,CAAA,KAAA,EAAA;AAAKV,MAAAA,SAAS,EAAC,+BAA+B;AAAAS,MAAAA,QAAA,EAAEV,MAAAA;KAAY,CAAC,GAAG,IAAI,CAAA;AAAA,GACvE,CAAC,CAAA;AAEd,CAAC,CAAA;AAED,iBAAeF,QAAQ;;;;"}

package/build/loader/Loader.js

@@ -1,15 +1,11 @@
 'use strict';
 
 var componentsTheming = require('@wise/components-theming');
-var classNames = require('classnames');
+var clsx = require('clsx');
 var React = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var size = require('../common/propsValues/size.js');
 
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var classNames__default = /*#__PURE__*/_interopDefault(classNames);
-
 const Loader = ({
   small = false,
   size: size$1 = size.Size.MEDIUM,
@@ -45,7 +41,7 @@ const Loader = ({
     return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {});
   }
   return /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: classNames__default.default(style('tw-loader'), style(`tw-loader--${supportedSize}`), {
+    className: clsx.clsx(style('tw-loader'), style(`tw-loader--${supportedSize}`), {
       'tw-loader--visible': hasDebounced
     }),
     "data-testid": restProps['data-testid']

package/build/loader/Loader.js.map

@@ -1 +1 @@
-{"version":3,"file":"Loader.js","sources":["../../src/loader/Loader.tsx"],"sourcesContent":["import { useTheme } from '@wise/components-theming';\nimport classnames from 'classnames';\nimport { useEffect, useState } from 'react';\n\nimport { Size, SizeExtraSmall, SizeSmall, SizeMedium, SizeLarge, SizeExtraLarge } from '../common';\n\n// TODO: We gracefully depracated xs, lg and xl -- remove these as part of a future breaking change to this component\ntype DeprecatedSize = SizeExtraSmall | SizeLarge | SizeExtraLarge;\n\ntype SizeType = SizeSmall | SizeMedium;\n\nexport type LoaderProps = {\n  /**\n   * @deprecated use `size` instead\n   */\n  small?: boolean;\n  size?: SizeType | DeprecatedSize;\n  displayInstantly?: boolean;\n  // TODO: refactor in favor of prop from `CommonProps` type\n  classNames?: Record<string, string>;\n  'data-testid'?: string;\n};\n\n/**\n * Loader component\n *\n * Docs link: https://transferwise.github.io/neptune-web/components/progress/Loader\n *\n * @param root0\n * @param root0.small\n * @param root0.size\n * @param root0.classNames\n */\nconst Loader = ({\n  small = false,\n  size = Size.MEDIUM,\n  displayInstantly = false,\n  classNames = {},\n  ...restProps\n}: LoaderProps) => {\n  const { theme } = useTheme();\n  const [hasDebounced, setHasDebounced] = useState(displayInstantly);\n\n  useEffect(() => {\n    let cancelled: boolean;\n    let timeout: ReturnType<typeof setTimeout> | undefined;\n\n    if (!displayInstantly) {\n      timeout = setTimeout(() => {\n        if (!cancelled) {\n          setHasDebounced(true);\n        }\n      }, 1000);\n    }\n\n    return () => {\n      cancelled = true;\n\n      clearTimeout(timeout);\n    };\n  }, []);\n\n  const style = (className: string): string => classNames[className] || className;\n  const legacySize: SizeType | DeprecatedSize = small ? Size.SMALL : size;\n  const supportedSize = getSupportedSize(legacySize);\n\n  if (theme === 'forest-green') {\n    // eslint-disable-next-line no-console\n    console.warn(\n      'Loader is forbidden to use with Forest Green theme. Check the https://wise.design/components/screen-loader for more info.',\n    );\n    return <></>;\n  }\n\n  return (\n    <div\n      className={classnames(style('tw-loader'), style(`tw-loader--${supportedSize}`), {\n        'tw-loader--visible': hasDebounced,\n      })}\n      data-testid={restProps['data-testid']}\n    />\n  );\n};\n\nconst getSupportedSize = (size: SizeType | DeprecatedSize): SizeType => {\n  switch (size) {\n    case Size.SMALL:\n    case Size.EXTRA_SMALL:\n      return Size.SMALL;\n\n    case Size.EXTRA_LARGE:\n    case Size.LARGE:\n    case Size.MEDIUM:\n    default:\n      return Size.MEDIUM;\n  }\n};\n\nexport default Loader;\n"],"names":["Loader","small","size","Size","MEDIUM","displayInstantly","classNames","restProps","theme","useTheme","hasDebounced","setHasDebounced","useState","useEffect","cancelled","timeout","setTimeout","clearTimeout","style","className","legacySize","SMALL","supportedSize","getSupportedSize","console","warn","_jsx","_Fragment","classnames","EXTRA_SMALL","EXTRA_LARGE","LARGE"],"mappings":";;;;;;;;;;;;AAiCMA,MAAAA,MAAM,GAAGA,CAAC;AACdC,EAAAA,KAAK,GAAG,KAAK;QACbC,MAAI,GAAGC,SAAI,CAACC,MAAM;AAClBC,EAAAA,gBAAgB,GAAG,KAAK;EACxBC,UAAU,GAAG,EAAE;EACf,GAAGC,SAAAA;AACS,CAAA,KAAI;EAChB,MAAM;AAAEC,IAAAA,KAAAA;GAAO,GAAGC,0BAAQ,EAAE,CAAA;EAC5B,MAAM,CAACC,YAAY,EAAEC,eAAe,CAAC,GAAGC,cAAQ,CAACP,gBAAgB,CAAC,CAAA;AAElEQ,EAAAA,eAAS,CAAC,MAAK;AACb,IAAA,IAAIC,SAAkB,CAAA;AACtB,IAAA,IAAIC,OAAkD,CAAA;IAEtD,IAAI,CAACV,gBAAgB,EAAE;MACrBU,OAAO,GAAGC,UAAU,CAAC,MAAK;QACxB,IAAI,CAACF,SAAS,EAAE;UACdH,eAAe,CAAC,IAAI,CAAC,CAAA;AACvB,SAAA;OACD,EAAE,IAAI,CAAC,CAAA;AACV,KAAA;AAEA,IAAA,OAAO,MAAK;AACVG,MAAAA,SAAS,GAAG,IAAI,CAAA;MAEhBG,YAAY,CAACF,OAAO,CAAC,CAAA;KACtB,CAAA;GACF,EAAE,EAAE,CAAC,CAAA;EAEN,MAAMG,KAAK,GAAIC,SAAiB,IAAab,UAAU,CAACa,SAAS,CAAC,IAAIA,SAAS,CAAA;EAC/E,MAAMC,UAAU,GAA8BnB,KAAK,GAAGE,SAAI,CAACkB,KAAK,GAAGnB,MAAI,CAAA;AACvE,EAAA,MAAMoB,aAAa,GAAGC,gBAAgB,CAACH,UAAU,CAAC,CAAA;EAElD,IAAIZ,KAAK,KAAK,cAAc,EAAE;AAC5B;AACAgB,IAAAA,OAAO,CAACC,IAAI,CACV,2HAA2H,CAC5H,CAAA;AACD,IAAA,oBAAOC,cAAA,CAAAC,mBAAA,EAAA,GAAK,CAAA;AACd,GAAA;AAEA,EAAA,oBACED,cAAA,CAAA,KAAA,EAAA;AACEP,IAAAA,SAAS,EAAES,2BAAU,CAACV,KAAK,CAAC,WAAW,CAAC,EAAEA,KAAK,CAAC,CAAA,WAAA,EAAcI,aAAa,CAAA,CAAE,CAAC,EAAE;AAC9E,MAAA,oBAAoB,EAAEZ,YAAAA;AACvB,KAAA,CAAE;IACH,aAAaH,EAAAA,SAAS,CAAC,aAAa,CAAA;AAAE,GACtC,CAAA,CAAA;AAEN,EAAC;AAED,MAAMgB,gBAAgB,GAAIrB,MAA+B,IAAc;AACrE,EAAA,QAAQA,MAAI;IACV,KAAKC,SAAI,CAACkB,KAAK,CAAA;IACf,KAAKlB,SAAI,CAAC0B,WAAW;MACnB,OAAO1B,SAAI,CAACkB,KAAK,CAAA;IAEnB,KAAKlB,SAAI,CAAC2B,WAAW,CAAA;IACrB,KAAK3B,SAAI,CAAC4B,KAAK,CAAA;IACf,KAAK5B,SAAI,CAACC,MAAM,CAAA;AAChB,IAAA;MACE,OAAOD,SAAI,CAACC,MAAM,CAAA;AACtB,GAAA;AACF,CAAC;;;;"}
+{"version":3,"file":"Loader.js","sources":["../../src/loader/Loader.tsx"],"sourcesContent":["import { useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { useEffect, useState } from 'react';\n\nimport { Size, SizeExtraSmall, SizeSmall, SizeMedium, SizeLarge, SizeExtraLarge } from '../common';\n\n// TODO: We gracefully depracated xs, lg and xl -- remove these as part of a future breaking change to this component\ntype DeprecatedSize = SizeExtraSmall | SizeLarge | SizeExtraLarge;\n\ntype SizeType = SizeSmall | SizeMedium;\n\nexport type LoaderProps = {\n  /**\n   * @deprecated use `size` instead\n   */\n  small?: boolean;\n  size?: SizeType | DeprecatedSize;\n  displayInstantly?: boolean;\n  // TODO: refactor in favor of prop from `CommonProps` type\n  classNames?: Record<string, string>;\n  'data-testid'?: string;\n};\n\n/**\n * Loader component\n *\n * Docs link: https://transferwise.github.io/neptune-web/components/progress/Loader\n *\n * @param root0\n * @param root0.small\n * @param root0.size\n * @param root0.classNames\n */\nconst Loader = ({\n  small = false,\n  size = Size.MEDIUM,\n  displayInstantly = false,\n  classNames = {},\n  ...restProps\n}: LoaderProps) => {\n  const { theme } = useTheme();\n  const [hasDebounced, setHasDebounced] = useState(displayInstantly);\n\n  useEffect(() => {\n    let cancelled: boolean;\n    let timeout: ReturnType<typeof setTimeout> | undefined;\n\n    if (!displayInstantly) {\n      timeout = setTimeout(() => {\n        if (!cancelled) {\n          setHasDebounced(true);\n        }\n      }, 1000);\n    }\n\n    return () => {\n      cancelled = true;\n\n      clearTimeout(timeout);\n    };\n  }, []);\n\n  const style = (className: string): string => classNames[className] || className;\n  const legacySize: SizeType | DeprecatedSize = small ? Size.SMALL : size;\n  const supportedSize = getSupportedSize(legacySize);\n\n  if (theme === 'forest-green') {\n    // eslint-disable-next-line no-console\n    console.warn(\n      'Loader is forbidden to use with Forest Green theme. Check the https://wise.design/components/screen-loader for more info.',\n    );\n    return <></>;\n  }\n\n  return (\n    <div\n      className={clsx(style('tw-loader'), style(`tw-loader--${supportedSize}`), {\n        'tw-loader--visible': hasDebounced,\n      })}\n      data-testid={restProps['data-testid']}\n    />\n  );\n};\n\nconst getSupportedSize = (size: SizeType | DeprecatedSize): SizeType => {\n  switch (size) {\n    case Size.SMALL:\n    case Size.EXTRA_SMALL:\n      return Size.SMALL;\n\n    case Size.EXTRA_LARGE:\n    case Size.LARGE:\n    case Size.MEDIUM:\n    default:\n      return Size.MEDIUM;\n  }\n};\n\nexport default Loader;\n"],"names":["Loader","small","size","Size","MEDIUM","displayInstantly","classNames","restProps","theme","useTheme","hasDebounced","setHasDebounced","useState","useEffect","cancelled","timeout","setTimeout","clearTimeout","style","className","legacySize","SMALL","supportedSize","getSupportedSize","console","warn","_jsx","_Fragment","clsx","EXTRA_SMALL","EXTRA_LARGE","LARGE"],"mappings":";;;;;;;;AAiCMA,MAAAA,MAAM,GAAGA,CAAC;AACdC,EAAAA,KAAK,GAAG,KAAK;QACbC,MAAI,GAAGC,SAAI,CAACC,MAAM;AAClBC,EAAAA,gBAAgB,GAAG,KAAK;EACxBC,UAAU,GAAG,EAAE;EACf,GAAGC,SAAAA;AACS,CAAA,KAAI;EAChB,MAAM;AAAEC,IAAAA,KAAAA;GAAO,GAAGC,0BAAQ,EAAE,CAAA;EAC5B,MAAM,CAACC,YAAY,EAAEC,eAAe,CAAC,GAAGC,cAAQ,CAACP,gBAAgB,CAAC,CAAA;AAElEQ,EAAAA,eAAS,CAAC,MAAK;AACb,IAAA,IAAIC,SAAkB,CAAA;AACtB,IAAA,IAAIC,OAAkD,CAAA;IAEtD,IAAI,CAACV,gBAAgB,EAAE;MACrBU,OAAO,GAAGC,UAAU,CAAC,MAAK;QACxB,IAAI,CAACF,SAAS,EAAE;UACdH,eAAe,CAAC,IAAI,CAAC,CAAA;AACvB,SAAA;OACD,EAAE,IAAI,CAAC,CAAA;AACV,KAAA;AAEA,IAAA,OAAO,MAAK;AACVG,MAAAA,SAAS,GAAG,IAAI,CAAA;MAEhBG,YAAY,CAACF,OAAO,CAAC,CAAA;KACtB,CAAA;GACF,EAAE,EAAE,CAAC,CAAA;EAEN,MAAMG,KAAK,GAAIC,SAAiB,IAAab,UAAU,CAACa,SAAS,CAAC,IAAIA,SAAS,CAAA;EAC/E,MAAMC,UAAU,GAA8BnB,KAAK,GAAGE,SAAI,CAACkB,KAAK,GAAGnB,MAAI,CAAA;AACvE,EAAA,MAAMoB,aAAa,GAAGC,gBAAgB,CAACH,UAAU,CAAC,CAAA;EAElD,IAAIZ,KAAK,KAAK,cAAc,EAAE;AAC5B;AACAgB,IAAAA,OAAO,CAACC,IAAI,CACV,2HAA2H,CAC5H,CAAA;AACD,IAAA,oBAAOC,cAAA,CAAAC,mBAAA,EAAA,GAAK,CAAA;AACd,GAAA;AAEA,EAAA,oBACED,cAAA,CAAA,KAAA,EAAA;AACEP,IAAAA,SAAS,EAAES,SAAI,CAACV,KAAK,CAAC,WAAW,CAAC,EAAEA,KAAK,CAAC,CAAA,WAAA,EAAcI,aAAa,CAAA,CAAE,CAAC,EAAE;AACxE,MAAA,oBAAoB,EAAEZ,YAAAA;AACvB,KAAA,CAAE;IACH,aAAaH,EAAAA,SAAS,CAAC,aAAa,CAAA;AAAE,GACtC,CAAA,CAAA;AAEN,EAAC;AAED,MAAMgB,gBAAgB,GAAIrB,MAA+B,IAAc;AACrE,EAAA,QAAQA,MAAI;IACV,KAAKC,SAAI,CAACkB,KAAK,CAAA;IACf,KAAKlB,SAAI,CAAC0B,WAAW;MACnB,OAAO1B,SAAI,CAACkB,KAAK,CAAA;IAEnB,KAAKlB,SAAI,CAAC2B,WAAW,CAAA;IACrB,KAAK3B,SAAI,CAAC4B,KAAK,CAAA;IACf,KAAK5B,SAAI,CAACC,MAAM,CAAA;AAChB,IAAA;MACE,OAAOD,SAAI,CAACC,MAAM,CAAA;AACtB,GAAA;AACF,CAAC;;;;"}

package/build/loader/Loader.mjs

@@ -1,5 +1,5 @@
 import { useTheme } from '@wise/components-theming';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { useState, useEffect } from 'react';
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { Size } from '../common/propsValues/size.mjs';
@@ -8,7 +8,7 @@ const Loader = ({
   small = false,
   size = Size.MEDIUM,
   displayInstantly = false,
-  classNames: classNames$1 = {},
+  classNames = {},
   ...restProps
 }) => {
   const {
@@ -30,7 +30,7 @@ const Loader = ({
       clearTimeout(timeout);
     };
   }, []);
-  const style = className => classNames$1[className] || className;
+  const style = className => classNames[className] || className;
   const legacySize = small ? Size.SMALL : size;
   const supportedSize = getSupportedSize(legacySize);
   if (theme === 'forest-green') {
@@ -39,7 +39,7 @@ const Loader = ({
     return /*#__PURE__*/jsx(Fragment, {});
   }
   return /*#__PURE__*/jsx("div", {
-    className: classNames(style('tw-loader'), style(`tw-loader--${supportedSize}`), {
+    className: clsx(style('tw-loader'), style(`tw-loader--${supportedSize}`), {
       'tw-loader--visible': hasDebounced
     }),
     "data-testid": restProps['data-testid']