@transferwise/components 46.50.1 → 46.52.0

package/build/badge/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sources":["../../src/badge/Badge.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { ReactNode } from 'react';\n\nimport {\n  Size,\n  Theme,\n  SizeSmall,\n  SizeMedium,\n  SizeLarge,\n  ThemeDark,\n  ThemeLight,\n  CommonProps,\n} from '../common';\n\nexport type BadgeProps = {\n  badge: ReactNode;\n  children: ReactNode;\n  size?: SizeSmall | SizeMedium | SizeLarge;\n  border?: ThemeDark | ThemeLight;\n  'aria-label'?: string;\n} & CommonProps;\n\nconst Badge = ({\n  badge,\n  className = undefined,\n  size = Size.SMALL,\n  border = Theme.LIGHT,\n  'aria-label': ariaLabel,\n  children,\n}: BadgeProps) => {\n  const classes: string = classNames(\n    'tw-badge',\n    {\n      [`tw-badge-border-${border}`]: border,\n      [`tw-badge-${size}`]: size,\n    },\n    className,\n  );\n\n  return (\n    <div aria-label={ariaLabel} className={classes}>\n      <div className=\"tw-badge__children\">{children}</div>\n      <div className=\"tw-badge__content\">{badge}</div>\n    </div>\n  );\n};\n\nexport default Badge;\n"],"names":["Badge","badge","className","undefined","size","Size","SMALL","border","Theme","LIGHT","ariaLabel","children","classes","classNames","_jsxs","_jsx"],"mappings":";;;;;;;;;;;AAsBMA,MAAAA,KAAK,GAAGA,CAAC;EACbC,KAAK;AACLC,EAAAA,SAAS,GAAGC,SAAS;QACrBC,MAAI,GAAGC,SAAI,CAACC,KAAK;EACjBC,MAAM,GAAGC,WAAK,CAACC,KAAK;AACpB,EAAA,YAAY,EAAEC,SAAS;AACvBC,EAAAA,QAAAA;AAAQ,CACG,KAAI;AACf,EAAA,MAAMC,OAAO,GAAWC,2BAAU,CAChC,UAAU,EACV;AACE,IAAA,CAAC,CAAmBN,gBAAAA,EAAAA,MAAM,CAAE,CAAA,GAAGA,MAAM;IACrC,CAAC,CAAA,SAAA,EAAYH,MAAI,CAAA,CAAE,GAAGA,MAAAA;GACvB,EACDF,SAAS,CACV,CAAA;AAED,EAAA,oBACEY,eAAA,CAAA,KAAA,EAAA;AAAK,IAAA,YAAA,EAAYJ,SAAU;AAACR,IAAAA,SAAS,EAAEU,OAAQ;AAAAD,IAAAA,QAAA,gBAC7CI,cAAA,CAAA,KAAA,EAAA;AAAKb,MAAAA,SAAS,EAAC,oBAAoB;AAAAS,MAAAA,QAAA,EAAEA,QAAAA;KAAc,CACnD,eAAAI,cAAA,CAAA,KAAA,EAAA;AAAKb,MAAAA,SAAS,EAAC,mBAAmB;AAAAS,MAAAA,QAAA,EAAEV,KAAAA;AAAK,KAAM,CACjD,CAAA;AAAA,GAAK,CAAC,CAAA;AAEV;;;;"}
+{"version":3,"file":"Badge.js","sources":["../../src/badge/Badge.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode } from 'react';\n\nimport {\n  Size,\n  Theme,\n  SizeSmall,\n  SizeMedium,\n  SizeLarge,\n  ThemeDark,\n  ThemeLight,\n  CommonProps,\n} from '../common';\n\nexport type BadgeProps = {\n  badge: ReactNode;\n  children: ReactNode;\n  size?: SizeSmall | SizeMedium | SizeLarge;\n  border?: ThemeDark | ThemeLight;\n  'aria-label'?: string;\n} & CommonProps;\n\nconst Badge = ({\n  badge,\n  className = undefined,\n  size = Size.SMALL,\n  border = Theme.LIGHT,\n  'aria-label': ariaLabel,\n  children,\n}: BadgeProps) => {\n  const classes: string = clsx(\n    'tw-badge',\n    {\n      [`tw-badge-border-${border}`]: border,\n      [`tw-badge-${size}`]: size,\n    },\n    className,\n  );\n\n  return (\n    <div aria-label={ariaLabel} className={classes}>\n      <div className=\"tw-badge__children\">{children}</div>\n      <div className=\"tw-badge__content\">{badge}</div>\n    </div>\n  );\n};\n\nexport default Badge;\n"],"names":["Badge","badge","className","undefined","size","Size","SMALL","border","Theme","LIGHT","ariaLabel","children","classes","clsx","_jsxs","_jsx"],"mappings":";;;;;;;AAsBMA,MAAAA,KAAK,GAAGA,CAAC;EACbC,KAAK;AACLC,EAAAA,SAAS,GAAGC,SAAS;QACrBC,MAAI,GAAGC,SAAI,CAACC,KAAK;EACjBC,MAAM,GAAGC,WAAK,CAACC,KAAK;AACpB,EAAA,YAAY,EAAEC,SAAS;AACvBC,EAAAA,QAAAA;AAAQ,CACG,KAAI;AACf,EAAA,MAAMC,OAAO,GAAWC,SAAI,CAC1B,UAAU,EACV;AACE,IAAA,CAAC,CAAmBN,gBAAAA,EAAAA,MAAM,CAAE,CAAA,GAAGA,MAAM;IACrC,CAAC,CAAA,SAAA,EAAYH,MAAI,CAAA,CAAE,GAAGA,MAAAA;GACvB,EACDF,SAAS,CACV,CAAA;AAED,EAAA,oBACEY,eAAA,CAAA,KAAA,EAAA;AAAK,IAAA,YAAA,EAAYJ,SAAU;AAACR,IAAAA,SAAS,EAAEU,OAAQ;AAAAD,IAAAA,QAAA,gBAC7CI,cAAA,CAAA,KAAA,EAAA;AAAKb,MAAAA,SAAS,EAAC,oBAAoB;AAAAS,MAAAA,QAAA,EAAEA,QAAAA;KAAc,CACnD,eAAAI,cAAA,CAAA,KAAA,EAAA;AAAKb,MAAAA,SAAS,EAAC,mBAAmB;AAAAS,MAAAA,QAAA,EAAEV,KAAAA;AAAK,KAAM,CACjD,CAAA;AAAA,GAAK,CAAC,CAAA;AAEV;;;;"}

package/build/badge/Badge.mjs

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Size } from '../common/propsValues/size.mjs';
 import { Theme } from '../common/theme.mjs';
@@ -11,7 +11,7 @@ const Badge = ({
   'aria-label': ariaLabel,
   children
 }) => {
-  const classes = classNames('tw-badge', {
+  const classes = clsx('tw-badge', {
     [`tw-badge-border-${border}`]: border,
     [`tw-badge-${size}`]: size
   }, className);

package/build/badge/Badge.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.mjs","sources":["../../src/badge/Badge.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { ReactNode } from 'react';\n\nimport {\n  Size,\n  Theme,\n  SizeSmall,\n  SizeMedium,\n  SizeLarge,\n  ThemeDark,\n  ThemeLight,\n  CommonProps,\n} from '../common';\n\nexport type BadgeProps = {\n  badge: ReactNode;\n  children: ReactNode;\n  size?: SizeSmall | SizeMedium | SizeLarge;\n  border?: ThemeDark | ThemeLight;\n  'aria-label'?: string;\n} & CommonProps;\n\nconst Badge = ({\n  badge,\n  className = undefined,\n  size = Size.SMALL,\n  border = Theme.LIGHT,\n  'aria-label': ariaLabel,\n  children,\n}: BadgeProps) => {\n  const classes: string = classNames(\n    'tw-badge',\n    {\n      [`tw-badge-border-${border}`]: border,\n      [`tw-badge-${size}`]: size,\n    },\n    className,\n  );\n\n  return (\n    <div aria-label={ariaLabel} className={classes}>\n      <div className=\"tw-badge__children\">{children}</div>\n      <div className=\"tw-badge__content\">{badge}</div>\n    </div>\n  );\n};\n\nexport default Badge;\n"],"names":["Badge","badge","className","undefined","size","Size","SMALL","border","Theme","LIGHT","ariaLabel","children","classes","classNames","_jsxs","_jsx"],"mappings":";;;;;AAsBMA,MAAAA,KAAK,GAAGA,CAAC;EACbC,KAAK;AACLC,EAAAA,SAAS,GAAGC,SAAS;EACrBC,IAAI,GAAGC,IAAI,CAACC,KAAK;EACjBC,MAAM,GAAGC,KAAK,CAACC,KAAK;AACpB,EAAA,YAAY,EAAEC,SAAS;AACvBC,EAAAA,QAAAA;AAAQ,CACG,KAAI;AACf,EAAA,MAAMC,OAAO,GAAWC,UAAU,CAChC,UAAU,EACV;AACE,IAAA,CAAC,CAAmBN,gBAAAA,EAAAA,MAAM,CAAE,CAAA,GAAGA,MAAM;IACrC,CAAC,CAAA,SAAA,EAAYH,IAAI,CAAA,CAAE,GAAGA,IAAAA;GACvB,EACDF,SAAS,CACV,CAAA;AAED,EAAA,oBACEY,IAAA,CAAA,KAAA,EAAA;AAAK,IAAA,YAAA,EAAYJ,SAAU;AAACR,IAAAA,SAAS,EAAEU,OAAQ;AAAAD,IAAAA,QAAA,gBAC7CI,GAAA,CAAA,KAAA,EAAA;AAAKb,MAAAA,SAAS,EAAC,oBAAoB;AAAAS,MAAAA,QAAA,EAAEA,QAAAA;KAAc,CACnD,eAAAI,GAAA,CAAA,KAAA,EAAA;AAAKb,MAAAA,SAAS,EAAC,mBAAmB;AAAAS,MAAAA,QAAA,EAAEV,KAAAA;AAAK,KAAM,CACjD,CAAA;AAAA,GAAK,CAAC,CAAA;AAEV;;;;"}
+{"version":3,"file":"Badge.mjs","sources":["../../src/badge/Badge.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode } from 'react';\n\nimport {\n  Size,\n  Theme,\n  SizeSmall,\n  SizeMedium,\n  SizeLarge,\n  ThemeDark,\n  ThemeLight,\n  CommonProps,\n} from '../common';\n\nexport type BadgeProps = {\n  badge: ReactNode;\n  children: ReactNode;\n  size?: SizeSmall | SizeMedium | SizeLarge;\n  border?: ThemeDark | ThemeLight;\n  'aria-label'?: string;\n} & CommonProps;\n\nconst Badge = ({\n  badge,\n  className = undefined,\n  size = Size.SMALL,\n  border = Theme.LIGHT,\n  'aria-label': ariaLabel,\n  children,\n}: BadgeProps) => {\n  const classes: string = clsx(\n    'tw-badge',\n    {\n      [`tw-badge-border-${border}`]: border,\n      [`tw-badge-${size}`]: size,\n    },\n    className,\n  );\n\n  return (\n    <div aria-label={ariaLabel} className={classes}>\n      <div className=\"tw-badge__children\">{children}</div>\n      <div className=\"tw-badge__content\">{badge}</div>\n    </div>\n  );\n};\n\nexport default Badge;\n"],"names":["Badge","badge","className","undefined","size","Size","SMALL","border","Theme","LIGHT","ariaLabel","children","classes","clsx","_jsxs","_jsx"],"mappings":";;;;;AAsBMA,MAAAA,KAAK,GAAGA,CAAC;EACbC,KAAK;AACLC,EAAAA,SAAS,GAAGC,SAAS;EACrBC,IAAI,GAAGC,IAAI,CAACC,KAAK;EACjBC,MAAM,GAAGC,KAAK,CAACC,KAAK;AACpB,EAAA,YAAY,EAAEC,SAAS;AACvBC,EAAAA,QAAAA;AAAQ,CACG,KAAI;AACf,EAAA,MAAMC,OAAO,GAAWC,IAAI,CAC1B,UAAU,EACV;AACE,IAAA,CAAC,CAAmBN,gBAAAA,EAAAA,MAAM,CAAE,CAAA,GAAGA,MAAM;IACrC,CAAC,CAAA,SAAA,EAAYH,IAAI,CAAA,CAAE,GAAGA,IAAAA;GACvB,EACDF,SAAS,CACV,CAAA;AAED,EAAA,oBACEY,IAAA,CAAA,KAAA,EAAA;AAAK,IAAA,YAAA,EAAYJ,SAAU;AAACR,IAAAA,SAAS,EAAEU,OAAQ;AAAAD,IAAAA,QAAA,gBAC7CI,GAAA,CAAA,KAAA,EAAA;AAAKb,MAAAA,SAAS,EAAC,oBAAoB;AAAAS,MAAAA,QAAA,EAAEA,QAAAA;KAAc,CACnD,eAAAI,GAAA,CAAA,KAAA,EAAA;AAAKb,MAAAA,SAAS,EAAC,mBAAmB;AAAAS,MAAAA,QAAA,EAAEV,KAAAA;AAAK,KAAM,CACjD,CAAA;AAAA,GAAK,CAAC,CAAA;AAEV;;;;"}

package/build/body/Body.js

@@ -1,14 +1,10 @@
 'use strict';
 
-var classNames = require('classnames');
+var clsx = require('clsx');
 var React = require('react');
 var typography = require('../common/propsValues/typography.js');
 var jsxRuntime = require('react/jsx-runtime');
 
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var classNames__default = /*#__PURE__*/_interopDefault(classNames);
-
 const DEFAULT_TYPE = typography.Typography.BODY_DEFAULT;
 const bodyTypes = new Set([typography.Typography.BODY_DEFAULT, typography.Typography.BODY_DEFAULT_BOLD, typography.Typography.BODY_LARGE, typography.Typography.BODY_LARGE_BOLD]);
 const Body = /*#__PURE__*/React.forwardRef(function Body({
@@ -23,7 +19,7 @@ const Body = /*#__PURE__*/React.forwardRef(function Body({
     // @ts-expect-error TODO: Remove when component could be rewritten with generics
     // See: https://fettblog.eu/typescript-react-generic-forward-refs/
     ref: reference,
-    className: classNames__default.default(`np-text-${isTypeSupported ? type : DEFAULT_TYPE}`, className)
+    className: clsx.clsx(`np-text-${isTypeSupported ? type : DEFAULT_TYPE}`, className)
   });
 });
 

package/build/body/Body.js.map

@@ -1 +1 @@
-{"version":3,"file":"Body.js","sources":["../../src/body/Body.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { forwardRef, HTMLAttributes } from 'react';\n\nimport { Typography, BodyTypes } from '../common/propsValues/typography';\n\nconst DEFAULT_TYPE = Typography.BODY_DEFAULT;\n\nconst bodyTypes = new Set<BodyTypes>([\n  Typography.BODY_DEFAULT,\n  Typography.BODY_DEFAULT_BOLD,\n  Typography.BODY_LARGE,\n  Typography.BODY_LARGE_BOLD,\n]);\n\ntype Props = HTMLAttributes<HTMLSpanElement | HTMLParagraphElement> & {\n  /**\n   * Default value: {@link DEFAULT_TYPE}\n   */\n  type?: BodyTypes;\n  /**\n   * Default value: `div`\n   */\n  as?: 'span' | 'p' | 'div';\n};\n\nconst Body = forwardRef(function Body(\n  { as: Element = 'div', type = DEFAULT_TYPE, className, ...props }: Props,\n  reference: React.ForwardedRef<\n    | {\n        [key in typeof Element]: React.ElementRef<key>;\n      }[typeof Element]\n    | null\n  >,\n) {\n  const isTypeSupported = bodyTypes.has(type);\n  return (\n    <Element\n      {...props}\n      // @ts-expect-error TODO: Remove when component could be rewritten with generics\n      // See: https://fettblog.eu/typescript-react-generic-forward-refs/\n      ref={reference}\n      className={classNames(`np-text-${isTypeSupported ? type : DEFAULT_TYPE}`, className)}\n    />\n  );\n});\n\nexport default Body;\n"],"names":["DEFAULT_TYPE","Typography","BODY_DEFAULT","bodyTypes","Set","BODY_DEFAULT_BOLD","BODY_LARGE","BODY_LARGE_BOLD","Body","forwardRef","as","Element","type","className","props","reference","isTypeSupported","has","_jsx","ref","classNames"],"mappings":";;;;;;;;;;;AAKA,MAAMA,YAAY,GAAGC,qBAAU,CAACC,YAAY,CAAA;AAE5C,MAAMC,SAAS,GAAG,IAAIC,GAAG,CAAY,CACnCH,qBAAU,CAACC,YAAY,EACvBD,qBAAU,CAACI,iBAAiB,EAC5BJ,qBAAU,CAACK,UAAU,EACrBL,qBAAU,CAACM,eAAe,CAC3B,CAAC,CAAA;AAaF,MAAMC,IAAI,gBAAGC,gBAAU,CAAC,SAASD,IAAIA,CACnC;EAAEE,EAAE,EAAEC,OAAO,GAAG,KAAK;AAAEC,EAAAA,IAAI,GAAGZ,YAAY;EAAEa,SAAS;EAAE,GAAGC,KAAAA;AAAc,CAAA,EACxEC,SAKC,EAAA;AAED,EAAA,MAAMC,eAAe,GAAGb,SAAS,CAACc,GAAG,CAACL,IAAI,CAAC,CAAA;EAC3C,oBACEM,cAAA,CAACP,OAAO,EAAA;AAAA,IAAA,GACFG,KAAK;AACT;AACA;AACAK,IAAAA,GAAG,EAAEJ,SAAU;IACfF,SAAS,EAAEO,2BAAU,CAAC,CAAWJ,QAAAA,EAAAA,eAAe,GAAGJ,IAAI,GAAGZ,YAAY,CAAE,CAAA,EAAEa,SAAS,CAAA;AAAE,GACrF,CAAA,CAAA;AAEN,CAAC;;;;"}
+{"version":3,"file":"Body.js","sources":["../../src/body/Body.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef, HTMLAttributes } from 'react';\n\nimport { Typography, BodyTypes } from '../common/propsValues/typography';\n\nconst DEFAULT_TYPE = Typography.BODY_DEFAULT;\n\nconst bodyTypes = new Set<BodyTypes>([\n  Typography.BODY_DEFAULT,\n  Typography.BODY_DEFAULT_BOLD,\n  Typography.BODY_LARGE,\n  Typography.BODY_LARGE_BOLD,\n]);\n\ntype Props = HTMLAttributes<HTMLSpanElement | HTMLParagraphElement> & {\n  /**\n   * Default value: {@link DEFAULT_TYPE}\n   */\n  type?: BodyTypes;\n  /**\n   * Default value: `div`\n   */\n  as?: 'span' | 'p' | 'div';\n};\n\nconst Body = forwardRef(function Body(\n  { as: Element = 'div', type = DEFAULT_TYPE, className, ...props }: Props,\n  reference: React.ForwardedRef<\n    | {\n        [key in typeof Element]: React.ElementRef<key>;\n      }[typeof Element]\n    | null\n  >,\n) {\n  const isTypeSupported = bodyTypes.has(type);\n  return (\n    <Element\n      {...props}\n      // @ts-expect-error TODO: Remove when component could be rewritten with generics\n      // See: https://fettblog.eu/typescript-react-generic-forward-refs/\n      ref={reference}\n      className={clsx(`np-text-${isTypeSupported ? type : DEFAULT_TYPE}`, className)}\n    />\n  );\n});\n\nexport default Body;\n"],"names":["DEFAULT_TYPE","Typography","BODY_DEFAULT","bodyTypes","Set","BODY_DEFAULT_BOLD","BODY_LARGE","BODY_LARGE_BOLD","Body","forwardRef","as","Element","type","className","props","reference","isTypeSupported","has","_jsx","ref","clsx"],"mappings":";;;;;;;AAKA,MAAMA,YAAY,GAAGC,qBAAU,CAACC,YAAY,CAAA;AAE5C,MAAMC,SAAS,GAAG,IAAIC,GAAG,CAAY,CACnCH,qBAAU,CAACC,YAAY,EACvBD,qBAAU,CAACI,iBAAiB,EAC5BJ,qBAAU,CAACK,UAAU,EACrBL,qBAAU,CAACM,eAAe,CAC3B,CAAC,CAAA;AAaF,MAAMC,IAAI,gBAAGC,gBAAU,CAAC,SAASD,IAAIA,CACnC;EAAEE,EAAE,EAAEC,OAAO,GAAG,KAAK;AAAEC,EAAAA,IAAI,GAAGZ,YAAY;EAAEa,SAAS;EAAE,GAAGC,KAAAA;AAAc,CAAA,EACxEC,SAKC,EAAA;AAED,EAAA,MAAMC,eAAe,GAAGb,SAAS,CAACc,GAAG,CAACL,IAAI,CAAC,CAAA;EAC3C,oBACEM,cAAA,CAACP,OAAO,EAAA;AAAA,IAAA,GACFG,KAAK;AACT;AACA;AACAK,IAAAA,GAAG,EAAEJ,SAAU;IACfF,SAAS,EAAEO,SAAI,CAAC,CAAWJ,QAAAA,EAAAA,eAAe,GAAGJ,IAAI,GAAGZ,YAAY,CAAE,CAAA,EAAEa,SAAS,CAAA;AAAE,GAC/E,CAAA,CAAA;AAEN,CAAC;;;;"}

package/build/body/Body.mjs

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 import { Typography } from '../common/propsValues/typography.mjs';
 import { jsx } from 'react/jsx-runtime';
@@ -17,7 +17,7 @@ const Body = /*#__PURE__*/forwardRef(function Body({
     // @ts-expect-error TODO: Remove when component could be rewritten with generics
     // See: https://fettblog.eu/typescript-react-generic-forward-refs/
     ref: reference,
-    className: classNames(`np-text-${isTypeSupported ? type : DEFAULT_TYPE}`, className)
+    className: clsx(`np-text-${isTypeSupported ? type : DEFAULT_TYPE}`, className)
   });
 });
 

package/build/body/Body.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Body.mjs","sources":["../../src/body/Body.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { forwardRef, HTMLAttributes } from 'react';\n\nimport { Typography, BodyTypes } from '../common/propsValues/typography';\n\nconst DEFAULT_TYPE = Typography.BODY_DEFAULT;\n\nconst bodyTypes = new Set<BodyTypes>([\n  Typography.BODY_DEFAULT,\n  Typography.BODY_DEFAULT_BOLD,\n  Typography.BODY_LARGE,\n  Typography.BODY_LARGE_BOLD,\n]);\n\ntype Props = HTMLAttributes<HTMLSpanElement | HTMLParagraphElement> & {\n  /**\n   * Default value: {@link DEFAULT_TYPE}\n   */\n  type?: BodyTypes;\n  /**\n   * Default value: `div`\n   */\n  as?: 'span' | 'p' | 'div';\n};\n\nconst Body = forwardRef(function Body(\n  { as: Element = 'div', type = DEFAULT_TYPE, className, ...props }: Props,\n  reference: React.ForwardedRef<\n    | {\n        [key in typeof Element]: React.ElementRef<key>;\n      }[typeof Element]\n    | null\n  >,\n) {\n  const isTypeSupported = bodyTypes.has(type);\n  return (\n    <Element\n      {...props}\n      // @ts-expect-error TODO: Remove when component could be rewritten with generics\n      // See: https://fettblog.eu/typescript-react-generic-forward-refs/\n      ref={reference}\n      className={classNames(`np-text-${isTypeSupported ? type : DEFAULT_TYPE}`, className)}\n    />\n  );\n});\n\nexport default Body;\n"],"names":["DEFAULT_TYPE","Typography","BODY_DEFAULT","bodyTypes","Set","BODY_DEFAULT_BOLD","BODY_LARGE","BODY_LARGE_BOLD","Body","forwardRef","as","Element","type","className","props","reference","isTypeSupported","has","_jsx","ref","classNames"],"mappings":";;;;;AAKA,MAAMA,YAAY,GAAGC,UAAU,CAACC,YAAY,CAAA;AAE5C,MAAMC,SAAS,GAAG,IAAIC,GAAG,CAAY,CACnCH,UAAU,CAACC,YAAY,EACvBD,UAAU,CAACI,iBAAiB,EAC5BJ,UAAU,CAACK,UAAU,EACrBL,UAAU,CAACM,eAAe,CAC3B,CAAC,CAAA;AAaF,MAAMC,IAAI,gBAAGC,UAAU,CAAC,SAASD,IAAIA,CACnC;EAAEE,EAAE,EAAEC,OAAO,GAAG,KAAK;AAAEC,EAAAA,IAAI,GAAGZ,YAAY;EAAEa,SAAS;EAAE,GAAGC,KAAAA;AAAc,CAAA,EACxEC,SAKC,EAAA;AAED,EAAA,MAAMC,eAAe,GAAGb,SAAS,CAACc,GAAG,CAACL,IAAI,CAAC,CAAA;EAC3C,oBACEM,GAAA,CAACP,OAAO,EAAA;AAAA,IAAA,GACFG,KAAK;AACT;AACA;AACAK,IAAAA,GAAG,EAAEJ,SAAU;IACfF,SAAS,EAAEO,UAAU,CAAC,CAAWJ,QAAAA,EAAAA,eAAe,GAAGJ,IAAI,GAAGZ,YAAY,CAAE,CAAA,EAAEa,SAAS,CAAA;AAAE,GACrF,CAAA,CAAA;AAEN,CAAC;;;;"}
+{"version":3,"file":"Body.mjs","sources":["../../src/body/Body.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef, HTMLAttributes } from 'react';\n\nimport { Typography, BodyTypes } from '../common/propsValues/typography';\n\nconst DEFAULT_TYPE = Typography.BODY_DEFAULT;\n\nconst bodyTypes = new Set<BodyTypes>([\n  Typography.BODY_DEFAULT,\n  Typography.BODY_DEFAULT_BOLD,\n  Typography.BODY_LARGE,\n  Typography.BODY_LARGE_BOLD,\n]);\n\ntype Props = HTMLAttributes<HTMLSpanElement | HTMLParagraphElement> & {\n  /**\n   * Default value: {@link DEFAULT_TYPE}\n   */\n  type?: BodyTypes;\n  /**\n   * Default value: `div`\n   */\n  as?: 'span' | 'p' | 'div';\n};\n\nconst Body = forwardRef(function Body(\n  { as: Element = 'div', type = DEFAULT_TYPE, className, ...props }: Props,\n  reference: React.ForwardedRef<\n    | {\n        [key in typeof Element]: React.ElementRef<key>;\n      }[typeof Element]\n    | null\n  >,\n) {\n  const isTypeSupported = bodyTypes.has(type);\n  return (\n    <Element\n      {...props}\n      // @ts-expect-error TODO: Remove when component could be rewritten with generics\n      // See: https://fettblog.eu/typescript-react-generic-forward-refs/\n      ref={reference}\n      className={clsx(`np-text-${isTypeSupported ? type : DEFAULT_TYPE}`, className)}\n    />\n  );\n});\n\nexport default Body;\n"],"names":["DEFAULT_TYPE","Typography","BODY_DEFAULT","bodyTypes","Set","BODY_DEFAULT_BOLD","BODY_LARGE","BODY_LARGE_BOLD","Body","forwardRef","as","Element","type","className","props","reference","isTypeSupported","has","_jsx","ref","clsx"],"mappings":";;;;;AAKA,MAAMA,YAAY,GAAGC,UAAU,CAACC,YAAY,CAAA;AAE5C,MAAMC,SAAS,GAAG,IAAIC,GAAG,CAAY,CACnCH,UAAU,CAACC,YAAY,EACvBD,UAAU,CAACI,iBAAiB,EAC5BJ,UAAU,CAACK,UAAU,EACrBL,UAAU,CAACM,eAAe,CAC3B,CAAC,CAAA;AAaF,MAAMC,IAAI,gBAAGC,UAAU,CAAC,SAASD,IAAIA,CACnC;EAAEE,EAAE,EAAEC,OAAO,GAAG,KAAK;AAAEC,EAAAA,IAAI,GAAGZ,YAAY;EAAEa,SAAS;EAAE,GAAGC,KAAAA;AAAc,CAAA,EACxEC,SAKC,EAAA;AAED,EAAA,MAAMC,eAAe,GAAGb,SAAS,CAACc,GAAG,CAACL,IAAI,CAAC,CAAA;EAC3C,oBACEM,GAAA,CAACP,OAAO,EAAA;AAAA,IAAA,GACFG,KAAK;AACT;AACA;AACAK,IAAAA,GAAG,EAAEJ,SAAU;IACfF,SAAS,EAAEO,IAAI,CAAC,CAAWJ,QAAAA,EAAAA,eAAe,GAAGJ,IAAI,GAAGZ,YAAY,CAAE,CAAA,EAAEa,SAAS,CAAA;AAAE,GAC/E,CAAA,CAAA;AAEN,CAAC;;;;"}

package/build/button/Button.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var classNames = require('classnames');
+var clsx = require('clsx');
 var React = require('react');
 var reactIntl = require('react-intl');
 var ProcessIndicator = require('../processIndicator/ProcessIndicator.js');
@@ -11,10 +11,6 @@ var legacyUtils = require('./legacyUtils/legacyUtils.js');
 var control = require('../common/propsValues/control.js');
 var size = require('../common/propsValues/size.js');
 
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var classNames__default = /*#__PURE__*/_interopDefault(classNames);
-
 const Button = /*#__PURE__*/React.forwardRef(({
   as: component,
   block = false,
@@ -37,7 +33,7 @@ const Button = /*#__PURE__*/React.forwardRef(({
   const newType = legacyUtils.establishNewType(type);
   // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
   const newPriority = legacyUtils.establishNewPriority(priority, type);
-  const classes = classNames__default.default(`btn btn-${size$1}`, `np-btn np-btn-${size$1}`, {
+  const classes = clsx.clsx(`btn btn-${size$1}`, `np-btn np-btn-${size$1}`, {
     'btn-loading': loading,
     'btn-block np-btn-block': block
   }, {

package/build/button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../src/button/Button.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { AnchorHTMLAttributes, ButtonHTMLAttributes, ElementType, forwardRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport {\n  Size,\n  ControlType,\n  Priority,\n  ControlTypeAccent,\n  ControlTypeNegative,\n  ControlTypePositive,\n  PriorityPrimary,\n  PrioritySecondary,\n  PriorityTertiary,\n  SizeExtraSmall,\n  SizeSmall,\n  SizeMedium,\n  SizeLarge,\n} from '../common';\nimport ProcessIndicator from '../processIndicator';\n\nimport messages from './Button.messages';\nimport { typeClassMap, priorityClassMap } from './classMap';\nimport { establishNewPriority, establishNewType, logDeprecationNotices } from './legacyUtils';\n\n/** @deprecated */\ntype DeprecatedTypes = 'primary' | 'pay' | 'secondary' | 'danger' | 'link';\n\n/** @deprecated */\ntype DeprecatedSizes = SizeExtraSmall;\n\ntype CommonProps = {\n  block?: boolean;\n  disabled?: boolean;\n  loading?: boolean;\n  type?: ControlTypeAccent | ControlTypeNegative | ControlTypePositive | DeprecatedTypes;\n  priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary;\n  size?: SizeSmall | SizeMedium | SizeLarge | DeprecatedSizes;\n};\n\ntype ButtonProps = CommonProps &\n  Omit<React.ComponentPropsWithRef<'button'>, 'type'> & {\n    as?: 'button';\n    htmlType?: 'submit' | 'reset' | 'button';\n  };\n\ntype AnchorProps = CommonProps &\n  React.ComponentPropsWithRef<'a'> & {\n    as?: 'a';\n  };\n\nexport type Props = ButtonProps | AnchorProps;\n\ntype ButtonReferenceType = HTMLButtonElement | HTMLAnchorElement;\n\nconst Button = forwardRef<ButtonReferenceType, Props>(\n  (\n    {\n      as: component,\n      block = false,\n      children,\n      className,\n      disabled,\n      loading = false,\n      priority = Priority.PRIMARY,\n      size = Size.MEDIUM,\n      type = ControlType.ACCENT,\n      ...rest\n    }: Props,\n    reference,\n  ) => {\n    const intl = useIntl();\n\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n    logDeprecationNotices({ size, type });\n\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n    const newType = establishNewType(type);\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n    const newPriority = establishNewPriority(priority, type);\n\n    const classes = classNames(\n      `btn btn-${size}`,\n      `np-btn np-btn-${size}`,\n      {\n        'btn-loading': loading,\n        'btn-block np-btn-block': block,\n      },\n      {\n        disabled: disabled || loading,\n      },\n      // @ts-expect-error fix when refactor `typeClassMap` to TypeScript\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n      typeClassMap[newType],\n      // @ts-expect-error fix when refactor `typeClassMap` to TypeScript\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n      priorityClassMap[newPriority],\n      className,\n    );\n\n    function processIndicatorSize() {\n      return ['sm', 'xs'].includes(size) ? 'xxs' : 'xs';\n    }\n\n    const Element = (component as ElementType) ?? 'button';\n    let props;\n\n    if (Element === 'button') {\n      const { htmlType = 'button', ...restProps } = rest as ButtonProps;\n      props = {\n        ...restProps,\n        disabled: disabled || loading,\n        type: htmlType,\n      };\n    } else {\n      props = { ...rest } as AnchorProps;\n    }\n\n    return (\n      <Element\n        ref={reference}\n        className={classes}\n        {...props}\n        aria-live={loading ? 'polite' : 'off'}\n        aria-label={loading ? intl.formatMessage(messages.loadingAriaLabel) : rest['aria-label']}\n      >\n        {children}\n        {loading && <ProcessIndicator size={processIndicatorSize()} className=\"btn-loader\" />}\n      </Element>\n    );\n  },\n);\n\nexport default Button;\n"],"names":["Button","forwardRef","as","component","block","children","className","disabled","loading","priority","Priority","PRIMARY","size","Size","MEDIUM","type","ControlType","ACCENT","rest","reference","intl","useIntl","logDeprecationNotices","newType","establishNewType","newPriority","establishNewPriority","classes","classNames","typeClassMap","priorityClassMap","processIndicatorSize","includes","Element","props","htmlType","restProps","_jsxs","ref","formatMessage","messages","loadingAriaLabel","_jsx","ProcessIndicator"],"mappings":";;;;;;;;;;;;;;;;;AAuDA,MAAMA,MAAM,gBAAGC,gBAAU,CACvB,CACE;AACEC,EAAAA,EAAE,EAAEC,SAAS;AACbC,EAAAA,KAAK,GAAG,KAAK;EACbC,QAAQ;EACRC,SAAS;EACTC,QAAQ;AACRC,EAAAA,OAAO,GAAG,KAAK;EACfC,QAAQ,GAAGC,gBAAQ,CAACC,OAAO;QAC3BC,MAAI,GAAGC,SAAI,CAACC,MAAM;EAClBC,IAAI,GAAGC,mBAAW,CAACC,MAAM;EACzB,GAAGC,IAAAA;AACG,CAAA,EACRC,SAAS,KACP;AACF,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE,CAAA;AAEtB;AACAC,EAAAA,iCAAqB,CAAC;UAAEV,MAAI;AAAEG,IAAAA,IAAAA;AAAI,GAAE,CAAC,CAAA;AAErC;AACA,EAAA,MAAMQ,OAAO,GAAGC,4BAAgB,CAACT,IAAI,CAAC,CAAA;AACtC;AACA,EAAA,MAAMU,WAAW,GAAGC,gCAAoB,CAACjB,QAAQ,EAAEM,IAAI,CAAC,CAAA;EAExD,MAAMY,OAAO,GAAGC,2BAAU,CACxB,CAAA,QAAA,EAAWhB,MAAI,CAAA,CAAE,EACjB,CAAA,cAAA,EAAiBA,MAAI,CAAA,CAAE,EACvB;AACE,IAAA,aAAa,EAAEJ,OAAO;AACtB,IAAA,wBAAwB,EAAEJ,KAAAA;GAC3B,EACD;IACEG,QAAQ,EAAEA,QAAQ,IAAIC,OAAAA;GACvB;AACD;AACA;EACAqB,qBAAY,CAACN,OAAO,CAAC;AACrB;AACA;AACAO,EAAAA,yBAAgB,CAACL,WAAW,CAAC,EAC7BnB,SAAS,CACV,CAAA;EAED,SAASyB,oBAAoBA,GAAA;AAC3B,IAAA,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,CAACC,QAAQ,CAACpB,MAAI,CAAC,GAAG,KAAK,GAAG,IAAI,CAAA;AACnD,GAAA;AAEA,EAAA,MAAMqB,OAAO,GAAI9B,SAAyB,IAAI,QAAQ,CAAA;AACtD,EAAA,IAAI+B,KAAK,CAAA;EAET,IAAID,OAAO,KAAK,QAAQ,EAAE;IACxB,MAAM;AAAEE,MAAAA,QAAQ,GAAG,QAAQ;MAAE,GAAGC,SAAAA;AAAS,KAAE,GAAGlB,IAAmB,CAAA;AACjEgB,IAAAA,KAAK,GAAG;AACN,MAAA,GAAGE,SAAS;MACZ7B,QAAQ,EAAEA,QAAQ,IAAIC,OAAO;AAC7BO,MAAAA,IAAI,EAAEoB,QAAAA;KACP,CAAA;AACH,GAAC,MAAM;AACLD,IAAAA,KAAK,GAAG;MAAE,GAAGhB,IAAAA;KAAqB,CAAA;AACpC,GAAA;EAEA,oBACEmB,eAAA,CAACJ,OAAO,EAAA;AACNK,IAAAA,GAAG,EAAEnB,SAAU;AACfb,IAAAA,SAAS,EAAEqB,OAAQ;AAAA,IAAA,GACfO,KAAK;AACT,IAAA,WAAA,EAAW1B,OAAO,GAAG,QAAQ,GAAG,KAAM;AACtC,IAAA,YAAA,EAAYA,OAAO,GAAGY,IAAI,CAACmB,aAAa,CAACC,eAAQ,CAACC,gBAAgB,CAAC,GAAGvB,IAAI,CAAC,YAAY,CAAE;AAAAb,IAAAA,QAAA,GAExFA,QAAQ,EACRG,OAAO,iBAAIkC,cAAA,CAACC,gBAAgB,EAAA;MAAC/B,IAAI,EAAEmB,oBAAoB,EAAG;AAACzB,MAAAA,SAAS,EAAC,YAAA;AAAY,MAAG,CAAA;AAAA,GAC9E,CAAC,CAAA;AAEd,CAAC;;;;"}
+{"version":3,"file":"Button.js","sources":["../../src/button/Button.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { AnchorHTMLAttributes, ButtonHTMLAttributes, ElementType, forwardRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport {\n  Size,\n  ControlType,\n  Priority,\n  ControlTypeAccent,\n  ControlTypeNegative,\n  ControlTypePositive,\n  PriorityPrimary,\n  PrioritySecondary,\n  PriorityTertiary,\n  SizeExtraSmall,\n  SizeSmall,\n  SizeMedium,\n  SizeLarge,\n} from '../common';\nimport ProcessIndicator from '../processIndicator';\n\nimport messages from './Button.messages';\nimport { typeClassMap, priorityClassMap } from './classMap';\nimport { establishNewPriority, establishNewType, logDeprecationNotices } from './legacyUtils';\n\n/** @deprecated */\ntype DeprecatedTypes = 'primary' | 'pay' | 'secondary' | 'danger' | 'link';\n\n/** @deprecated */\ntype DeprecatedSizes = SizeExtraSmall;\n\ntype CommonProps = {\n  block?: boolean;\n  disabled?: boolean;\n  loading?: boolean;\n  type?: ControlTypeAccent | ControlTypeNegative | ControlTypePositive | DeprecatedTypes;\n  priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary;\n  size?: SizeSmall | SizeMedium | SizeLarge | DeprecatedSizes;\n};\n\ntype ButtonProps = CommonProps &\n  Omit<React.ComponentPropsWithRef<'button'>, 'type'> & {\n    as?: 'button';\n    htmlType?: 'submit' | 'reset' | 'button';\n  };\n\ntype AnchorProps = CommonProps &\n  React.ComponentPropsWithRef<'a'> & {\n    as?: 'a';\n  };\n\nexport type Props = ButtonProps | AnchorProps;\n\ntype ButtonReferenceType = HTMLButtonElement | HTMLAnchorElement;\n\nconst Button = forwardRef<ButtonReferenceType, Props>(\n  (\n    {\n      as: component,\n      block = false,\n      children,\n      className,\n      disabled,\n      loading = false,\n      priority = Priority.PRIMARY,\n      size = Size.MEDIUM,\n      type = ControlType.ACCENT,\n      ...rest\n    }: Props,\n    reference,\n  ) => {\n    const intl = useIntl();\n\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n    logDeprecationNotices({ size, type });\n\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n    const newType = establishNewType(type);\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n    const newPriority = establishNewPriority(priority, type);\n\n    const classes = clsx(\n      `btn btn-${size}`,\n      `np-btn np-btn-${size}`,\n      {\n        'btn-loading': loading,\n        'btn-block np-btn-block': block,\n      },\n      {\n        disabled: disabled || loading,\n      },\n      // @ts-expect-error fix when refactor `typeClassMap` to TypeScript\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n      typeClassMap[newType],\n      // @ts-expect-error fix when refactor `typeClassMap` to TypeScript\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n      priorityClassMap[newPriority],\n      className,\n    );\n\n    function processIndicatorSize() {\n      return ['sm', 'xs'].includes(size) ? 'xxs' : 'xs';\n    }\n\n    const Element = (component as ElementType) ?? 'button';\n    let props;\n\n    if (Element === 'button') {\n      const { htmlType = 'button', ...restProps } = rest as ButtonProps;\n      props = {\n        ...restProps,\n        disabled: disabled || loading,\n        type: htmlType,\n      };\n    } else {\n      props = { ...rest } as AnchorProps;\n    }\n\n    return (\n      <Element\n        ref={reference}\n        className={classes}\n        {...props}\n        aria-live={loading ? 'polite' : 'off'}\n        aria-label={loading ? intl.formatMessage(messages.loadingAriaLabel) : rest['aria-label']}\n      >\n        {children}\n        {loading && <ProcessIndicator size={processIndicatorSize()} className=\"btn-loader\" />}\n      </Element>\n    );\n  },\n);\n\nexport default Button;\n"],"names":["Button","forwardRef","as","component","block","children","className","disabled","loading","priority","Priority","PRIMARY","size","Size","MEDIUM","type","ControlType","ACCENT","rest","reference","intl","useIntl","logDeprecationNotices","newType","establishNewType","newPriority","establishNewPriority","classes","clsx","typeClassMap","priorityClassMap","processIndicatorSize","includes","Element","props","htmlType","restProps","_jsxs","ref","formatMessage","messages","loadingAriaLabel","_jsx","ProcessIndicator"],"mappings":";;;;;;;;;;;;;AAuDA,MAAMA,MAAM,gBAAGC,gBAAU,CACvB,CACE;AACEC,EAAAA,EAAE,EAAEC,SAAS;AACbC,EAAAA,KAAK,GAAG,KAAK;EACbC,QAAQ;EACRC,SAAS;EACTC,QAAQ;AACRC,EAAAA,OAAO,GAAG,KAAK;EACfC,QAAQ,GAAGC,gBAAQ,CAACC,OAAO;QAC3BC,MAAI,GAAGC,SAAI,CAACC,MAAM;EAClBC,IAAI,GAAGC,mBAAW,CAACC,MAAM;EACzB,GAAGC,IAAAA;AACG,CAAA,EACRC,SAAS,KACP;AACF,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE,CAAA;AAEtB;AACAC,EAAAA,iCAAqB,CAAC;UAAEV,MAAI;AAAEG,IAAAA,IAAAA;AAAI,GAAE,CAAC,CAAA;AAErC;AACA,EAAA,MAAMQ,OAAO,GAAGC,4BAAgB,CAACT,IAAI,CAAC,CAAA;AACtC;AACA,EAAA,MAAMU,WAAW,GAAGC,gCAAoB,CAACjB,QAAQ,EAAEM,IAAI,CAAC,CAAA;EAExD,MAAMY,OAAO,GAAGC,SAAI,CAClB,CAAA,QAAA,EAAWhB,MAAI,CAAA,CAAE,EACjB,CAAA,cAAA,EAAiBA,MAAI,CAAA,CAAE,EACvB;AACE,IAAA,aAAa,EAAEJ,OAAO;AACtB,IAAA,wBAAwB,EAAEJ,KAAAA;GAC3B,EACD;IACEG,QAAQ,EAAEA,QAAQ,IAAIC,OAAAA;GACvB;AACD;AACA;EACAqB,qBAAY,CAACN,OAAO,CAAC;AACrB;AACA;AACAO,EAAAA,yBAAgB,CAACL,WAAW,CAAC,EAC7BnB,SAAS,CACV,CAAA;EAED,SAASyB,oBAAoBA,GAAA;AAC3B,IAAA,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,CAACC,QAAQ,CAACpB,MAAI,CAAC,GAAG,KAAK,GAAG,IAAI,CAAA;AACnD,GAAA;AAEA,EAAA,MAAMqB,OAAO,GAAI9B,SAAyB,IAAI,QAAQ,CAAA;AACtD,EAAA,IAAI+B,KAAK,CAAA;EAET,IAAID,OAAO,KAAK,QAAQ,EAAE;IACxB,MAAM;AAAEE,MAAAA,QAAQ,GAAG,QAAQ;MAAE,GAAGC,SAAAA;AAAS,KAAE,GAAGlB,IAAmB,CAAA;AACjEgB,IAAAA,KAAK,GAAG;AACN,MAAA,GAAGE,SAAS;MACZ7B,QAAQ,EAAEA,QAAQ,IAAIC,OAAO;AAC7BO,MAAAA,IAAI,EAAEoB,QAAAA;KACP,CAAA;AACH,GAAC,MAAM;AACLD,IAAAA,KAAK,GAAG;MAAE,GAAGhB,IAAAA;KAAqB,CAAA;AACpC,GAAA;EAEA,oBACEmB,eAAA,CAACJ,OAAO,EAAA;AACNK,IAAAA,GAAG,EAAEnB,SAAU;AACfb,IAAAA,SAAS,EAAEqB,OAAQ;AAAA,IAAA,GACfO,KAAK;AACT,IAAA,WAAA,EAAW1B,OAAO,GAAG,QAAQ,GAAG,KAAM;AACtC,IAAA,YAAA,EAAYA,OAAO,GAAGY,IAAI,CAACmB,aAAa,CAACC,eAAQ,CAACC,gBAAgB,CAAC,GAAGvB,IAAI,CAAC,YAAY,CAAE;AAAAb,IAAAA,QAAA,GAExFA,QAAQ,EACRG,OAAO,iBAAIkC,cAAA,CAACC,gBAAgB,EAAA;MAAC/B,IAAI,EAAEmB,oBAAoB,EAAG;AAACzB,MAAAA,SAAS,EAAC,YAAA;AAAY,MAAG,CAAA;AAAA,GAC9E,CAAC,CAAA;AAEd,CAAC;;;;"}

package/build/button/Button.mjs

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 import { useIntl } from 'react-intl';
 import ProcessIndicator from '../processIndicator/ProcessIndicator.mjs';
@@ -31,7 +31,7 @@ const Button = /*#__PURE__*/forwardRef(({
   const newType = establishNewType(type);
   // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
   const newPriority = establishNewPriority(priority, type);
-  const classes = classNames(`btn btn-${size}`, `np-btn np-btn-${size}`, {
+  const classes = clsx(`btn btn-${size}`, `np-btn np-btn-${size}`, {
     'btn-loading': loading,
     'btn-block np-btn-block': block
   }, {

package/build/button/Button.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.mjs","sources":["../../src/button/Button.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { AnchorHTMLAttributes, ButtonHTMLAttributes, ElementType, forwardRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport {\n  Size,\n  ControlType,\n  Priority,\n  ControlTypeAccent,\n  ControlTypeNegative,\n  ControlTypePositive,\n  PriorityPrimary,\n  PrioritySecondary,\n  PriorityTertiary,\n  SizeExtraSmall,\n  SizeSmall,\n  SizeMedium,\n  SizeLarge,\n} from '../common';\nimport ProcessIndicator from '../processIndicator';\n\nimport messages from './Button.messages';\nimport { typeClassMap, priorityClassMap } from './classMap';\nimport { establishNewPriority, establishNewType, logDeprecationNotices } from './legacyUtils';\n\n/** @deprecated */\ntype DeprecatedTypes = 'primary' | 'pay' | 'secondary' | 'danger' | 'link';\n\n/** @deprecated */\ntype DeprecatedSizes = SizeExtraSmall;\n\ntype CommonProps = {\n  block?: boolean;\n  disabled?: boolean;\n  loading?: boolean;\n  type?: ControlTypeAccent | ControlTypeNegative | ControlTypePositive | DeprecatedTypes;\n  priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary;\n  size?: SizeSmall | SizeMedium | SizeLarge | DeprecatedSizes;\n};\n\ntype ButtonProps = CommonProps &\n  Omit<React.ComponentPropsWithRef<'button'>, 'type'> & {\n    as?: 'button';\n    htmlType?: 'submit' | 'reset' | 'button';\n  };\n\ntype AnchorProps = CommonProps &\n  React.ComponentPropsWithRef<'a'> & {\n    as?: 'a';\n  };\n\nexport type Props = ButtonProps | AnchorProps;\n\ntype ButtonReferenceType = HTMLButtonElement | HTMLAnchorElement;\n\nconst Button = forwardRef<ButtonReferenceType, Props>(\n  (\n    {\n      as: component,\n      block = false,\n      children,\n      className,\n      disabled,\n      loading = false,\n      priority = Priority.PRIMARY,\n      size = Size.MEDIUM,\n      type = ControlType.ACCENT,\n      ...rest\n    }: Props,\n    reference,\n  ) => {\n    const intl = useIntl();\n\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n    logDeprecationNotices({ size, type });\n\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n    const newType = establishNewType(type);\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n    const newPriority = establishNewPriority(priority, type);\n\n    const classes = classNames(\n      `btn btn-${size}`,\n      `np-btn np-btn-${size}`,\n      {\n        'btn-loading': loading,\n        'btn-block np-btn-block': block,\n      },\n      {\n        disabled: disabled || loading,\n      },\n      // @ts-expect-error fix when refactor `typeClassMap` to TypeScript\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n      typeClassMap[newType],\n      // @ts-expect-error fix when refactor `typeClassMap` to TypeScript\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n      priorityClassMap[newPriority],\n      className,\n    );\n\n    function processIndicatorSize() {\n      return ['sm', 'xs'].includes(size) ? 'xxs' : 'xs';\n    }\n\n    const Element = (component as ElementType) ?? 'button';\n    let props;\n\n    if (Element === 'button') {\n      const { htmlType = 'button', ...restProps } = rest as ButtonProps;\n      props = {\n        ...restProps,\n        disabled: disabled || loading,\n        type: htmlType,\n      };\n    } else {\n      props = { ...rest } as AnchorProps;\n    }\n\n    return (\n      <Element\n        ref={reference}\n        className={classes}\n        {...props}\n        aria-live={loading ? 'polite' : 'off'}\n        aria-label={loading ? intl.formatMessage(messages.loadingAriaLabel) : rest['aria-label']}\n      >\n        {children}\n        {loading && <ProcessIndicator size={processIndicatorSize()} className=\"btn-loader\" />}\n      </Element>\n    );\n  },\n);\n\nexport default Button;\n"],"names":["Button","forwardRef","as","component","block","children","className","disabled","loading","priority","Priority","PRIMARY","size","Size","MEDIUM","type","ControlType","ACCENT","rest","reference","intl","useIntl","logDeprecationNotices","newType","establishNewType","newPriority","establishNewPriority","classes","classNames","typeClassMap","priorityClassMap","processIndicatorSize","includes","Element","props","htmlType","restProps","_jsxs","ref","formatMessage","messages","loadingAriaLabel","_jsx","ProcessIndicator"],"mappings":";;;;;;;;;;;AAuDA,MAAMA,MAAM,gBAAGC,UAAU,CACvB,CACE;AACEC,EAAAA,EAAE,EAAEC,SAAS;AACbC,EAAAA,KAAK,GAAG,KAAK;EACbC,QAAQ;EACRC,SAAS;EACTC,QAAQ;AACRC,EAAAA,OAAO,GAAG,KAAK;EACfC,QAAQ,GAAGC,QAAQ,CAACC,OAAO;EAC3BC,IAAI,GAAGC,IAAI,CAACC,MAAM;EAClBC,IAAI,GAAGC,WAAW,CAACC,MAAM;EACzB,GAAGC,IAAAA;AACG,CAAA,EACRC,SAAS,KACP;AACF,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE,CAAA;AAEtB;AACAC,EAAAA,qBAAqB,CAAC;IAAEV,IAAI;AAAEG,IAAAA,IAAAA;AAAI,GAAE,CAAC,CAAA;AAErC;AACA,EAAA,MAAMQ,OAAO,GAAGC,gBAAgB,CAACT,IAAI,CAAC,CAAA;AACtC;AACA,EAAA,MAAMU,WAAW,GAAGC,oBAAoB,CAACjB,QAAQ,EAAEM,IAAI,CAAC,CAAA;EAExD,MAAMY,OAAO,GAAGC,UAAU,CACxB,CAAA,QAAA,EAAWhB,IAAI,CAAA,CAAE,EACjB,CAAA,cAAA,EAAiBA,IAAI,CAAA,CAAE,EACvB;AACE,IAAA,aAAa,EAAEJ,OAAO;AACtB,IAAA,wBAAwB,EAAEJ,KAAAA;GAC3B,EACD;IACEG,QAAQ,EAAEA,QAAQ,IAAIC,OAAAA;GACvB;AACD;AACA;EACAqB,YAAY,CAACN,OAAO,CAAC;AACrB;AACA;AACAO,EAAAA,gBAAgB,CAACL,WAAW,CAAC,EAC7BnB,SAAS,CACV,CAAA;EAED,SAASyB,oBAAoBA,GAAA;AAC3B,IAAA,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,CAACC,QAAQ,CAACpB,IAAI,CAAC,GAAG,KAAK,GAAG,IAAI,CAAA;AACnD,GAAA;AAEA,EAAA,MAAMqB,OAAO,GAAI9B,SAAyB,IAAI,QAAQ,CAAA;AACtD,EAAA,IAAI+B,KAAK,CAAA;EAET,IAAID,OAAO,KAAK,QAAQ,EAAE;IACxB,MAAM;AAAEE,MAAAA,QAAQ,GAAG,QAAQ;MAAE,GAAGC,SAAAA;AAAS,KAAE,GAAGlB,IAAmB,CAAA;AACjEgB,IAAAA,KAAK,GAAG;AACN,MAAA,GAAGE,SAAS;MACZ7B,QAAQ,EAAEA,QAAQ,IAAIC,OAAO;AAC7BO,MAAAA,IAAI,EAAEoB,QAAAA;KACP,CAAA;AACH,GAAC,MAAM;AACLD,IAAAA,KAAK,GAAG;MAAE,GAAGhB,IAAAA;KAAqB,CAAA;AACpC,GAAA;EAEA,oBACEmB,IAAA,CAACJ,OAAO,EAAA;AACNK,IAAAA,GAAG,EAAEnB,SAAU;AACfb,IAAAA,SAAS,EAAEqB,OAAQ;AAAA,IAAA,GACfO,KAAK;AACT,IAAA,WAAA,EAAW1B,OAAO,GAAG,QAAQ,GAAG,KAAM;AACtC,IAAA,YAAA,EAAYA,OAAO,GAAGY,IAAI,CAACmB,aAAa,CAACC,QAAQ,CAACC,gBAAgB,CAAC,GAAGvB,IAAI,CAAC,YAAY,CAAE;AAAAb,IAAAA,QAAA,GAExFA,QAAQ,EACRG,OAAO,iBAAIkC,GAAA,CAACC,gBAAgB,EAAA;MAAC/B,IAAI,EAAEmB,oBAAoB,EAAG;AAACzB,MAAAA,SAAS,EAAC,YAAA;AAAY,MAAG,CAAA;AAAA,GAC9E,CAAC,CAAA;AAEd,CAAC;;;;"}
+{"version":3,"file":"Button.mjs","sources":["../../src/button/Button.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { AnchorHTMLAttributes, ButtonHTMLAttributes, ElementType, forwardRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport {\n  Size,\n  ControlType,\n  Priority,\n  ControlTypeAccent,\n  ControlTypeNegative,\n  ControlTypePositive,\n  PriorityPrimary,\n  PrioritySecondary,\n  PriorityTertiary,\n  SizeExtraSmall,\n  SizeSmall,\n  SizeMedium,\n  SizeLarge,\n} from '../common';\nimport ProcessIndicator from '../processIndicator';\n\nimport messages from './Button.messages';\nimport { typeClassMap, priorityClassMap } from './classMap';\nimport { establishNewPriority, establishNewType, logDeprecationNotices } from './legacyUtils';\n\n/** @deprecated */\ntype DeprecatedTypes = 'primary' | 'pay' | 'secondary' | 'danger' | 'link';\n\n/** @deprecated */\ntype DeprecatedSizes = SizeExtraSmall;\n\ntype CommonProps = {\n  block?: boolean;\n  disabled?: boolean;\n  loading?: boolean;\n  type?: ControlTypeAccent | ControlTypeNegative | ControlTypePositive | DeprecatedTypes;\n  priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary;\n  size?: SizeSmall | SizeMedium | SizeLarge | DeprecatedSizes;\n};\n\ntype ButtonProps = CommonProps &\n  Omit<React.ComponentPropsWithRef<'button'>, 'type'> & {\n    as?: 'button';\n    htmlType?: 'submit' | 'reset' | 'button';\n  };\n\ntype AnchorProps = CommonProps &\n  React.ComponentPropsWithRef<'a'> & {\n    as?: 'a';\n  };\n\nexport type Props = ButtonProps | AnchorProps;\n\ntype ButtonReferenceType = HTMLButtonElement | HTMLAnchorElement;\n\nconst Button = forwardRef<ButtonReferenceType, Props>(\n  (\n    {\n      as: component,\n      block = false,\n      children,\n      className,\n      disabled,\n      loading = false,\n      priority = Priority.PRIMARY,\n      size = Size.MEDIUM,\n      type = ControlType.ACCENT,\n      ...rest\n    }: Props,\n    reference,\n  ) => {\n    const intl = useIntl();\n\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n    logDeprecationNotices({ size, type });\n\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n    const newType = establishNewType(type);\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n    const newPriority = establishNewPriority(priority, type);\n\n    const classes = clsx(\n      `btn btn-${size}`,\n      `np-btn np-btn-${size}`,\n      {\n        'btn-loading': loading,\n        'btn-block np-btn-block': block,\n      },\n      {\n        disabled: disabled || loading,\n      },\n      // @ts-expect-error fix when refactor `typeClassMap` to TypeScript\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n      typeClassMap[newType],\n      // @ts-expect-error fix when refactor `typeClassMap` to TypeScript\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n      priorityClassMap[newPriority],\n      className,\n    );\n\n    function processIndicatorSize() {\n      return ['sm', 'xs'].includes(size) ? 'xxs' : 'xs';\n    }\n\n    const Element = (component as ElementType) ?? 'button';\n    let props;\n\n    if (Element === 'button') {\n      const { htmlType = 'button', ...restProps } = rest as ButtonProps;\n      props = {\n        ...restProps,\n        disabled: disabled || loading,\n        type: htmlType,\n      };\n    } else {\n      props = { ...rest } as AnchorProps;\n    }\n\n    return (\n      <Element\n        ref={reference}\n        className={classes}\n        {...props}\n        aria-live={loading ? 'polite' : 'off'}\n        aria-label={loading ? intl.formatMessage(messages.loadingAriaLabel) : rest['aria-label']}\n      >\n        {children}\n        {loading && <ProcessIndicator size={processIndicatorSize()} className=\"btn-loader\" />}\n      </Element>\n    );\n  },\n);\n\nexport default Button;\n"],"names":["Button","forwardRef","as","component","block","children","className","disabled","loading","priority","Priority","PRIMARY","size","Size","MEDIUM","type","ControlType","ACCENT","rest","reference","intl","useIntl","logDeprecationNotices","newType","establishNewType","newPriority","establishNewPriority","classes","clsx","typeClassMap","priorityClassMap","processIndicatorSize","includes","Element","props","htmlType","restProps","_jsxs","ref","formatMessage","messages","loadingAriaLabel","_jsx","ProcessIndicator"],"mappings":";;;;;;;;;;;AAuDA,MAAMA,MAAM,gBAAGC,UAAU,CACvB,CACE;AACEC,EAAAA,EAAE,EAAEC,SAAS;AACbC,EAAAA,KAAK,GAAG,KAAK;EACbC,QAAQ;EACRC,SAAS;EACTC,QAAQ;AACRC,EAAAA,OAAO,GAAG,KAAK;EACfC,QAAQ,GAAGC,QAAQ,CAACC,OAAO;EAC3BC,IAAI,GAAGC,IAAI,CAACC,MAAM;EAClBC,IAAI,GAAGC,WAAW,CAACC,MAAM;EACzB,GAAGC,IAAAA;AACG,CAAA,EACRC,SAAS,KACP;AACF,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE,CAAA;AAEtB;AACAC,EAAAA,qBAAqB,CAAC;IAAEV,IAAI;AAAEG,IAAAA,IAAAA;AAAI,GAAE,CAAC,CAAA;AAErC;AACA,EAAA,MAAMQ,OAAO,GAAGC,gBAAgB,CAACT,IAAI,CAAC,CAAA;AACtC;AACA,EAAA,MAAMU,WAAW,GAAGC,oBAAoB,CAACjB,QAAQ,EAAEM,IAAI,CAAC,CAAA;EAExD,MAAMY,OAAO,GAAGC,IAAI,CAClB,CAAA,QAAA,EAAWhB,IAAI,CAAA,CAAE,EACjB,CAAA,cAAA,EAAiBA,IAAI,CAAA,CAAE,EACvB;AACE,IAAA,aAAa,EAAEJ,OAAO;AACtB,IAAA,wBAAwB,EAAEJ,KAAAA;GAC3B,EACD;IACEG,QAAQ,EAAEA,QAAQ,IAAIC,OAAAA;GACvB;AACD;AACA;EACAqB,YAAY,CAACN,OAAO,CAAC;AACrB;AACA;AACAO,EAAAA,gBAAgB,CAACL,WAAW,CAAC,EAC7BnB,SAAS,CACV,CAAA;EAED,SAASyB,oBAAoBA,GAAA;AAC3B,IAAA,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,CAACC,QAAQ,CAACpB,IAAI,CAAC,GAAG,KAAK,GAAG,IAAI,CAAA;AACnD,GAAA;AAEA,EAAA,MAAMqB,OAAO,GAAI9B,SAAyB,IAAI,QAAQ,CAAA;AACtD,EAAA,IAAI+B,KAAK,CAAA;EAET,IAAID,OAAO,KAAK,QAAQ,EAAE;IACxB,MAAM;AAAEE,MAAAA,QAAQ,GAAG,QAAQ;MAAE,GAAGC,SAAAA;AAAS,KAAE,GAAGlB,IAAmB,CAAA;AACjEgB,IAAAA,KAAK,GAAG;AACN,MAAA,GAAGE,SAAS;MACZ7B,QAAQ,EAAEA,QAAQ,IAAIC,OAAO;AAC7BO,MAAAA,IAAI,EAAEoB,QAAAA;KACP,CAAA;AACH,GAAC,MAAM;AACLD,IAAAA,KAAK,GAAG;MAAE,GAAGhB,IAAAA;KAAqB,CAAA;AACpC,GAAA;EAEA,oBACEmB,IAAA,CAACJ,OAAO,EAAA;AACNK,IAAAA,GAAG,EAAEnB,SAAU;AACfb,IAAAA,SAAS,EAAEqB,OAAQ;AAAA,IAAA,GACfO,KAAK;AACT,IAAA,WAAA,EAAW1B,OAAO,GAAG,QAAQ,GAAG,KAAM;AACtC,IAAA,YAAA,EAAYA,OAAO,GAAGY,IAAI,CAACmB,aAAa,CAACC,QAAQ,CAACC,gBAAgB,CAAC,GAAGvB,IAAI,CAAC,YAAY,CAAE;AAAAb,IAAAA,QAAA,GAExFA,QAAQ,EACRG,OAAO,iBAAIkC,GAAA,CAACC,gBAAgB,EAAA;MAAC/B,IAAI,EAAEmB,oBAAoB,EAAG;AAACzB,MAAAA,SAAS,EAAC,YAAA;AAAY,MAAG,CAAA;AAAA,GAC9E,CAAC,CAAA;AAEd,CAAC;;;;"}

package/build/card/Card.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var classNames = require('classnames');
+var clsx = require('clsx');
 var React = require('react');
 var Body = require('../body/Body.js');
 var Chevron = require('../chevron/Chevron.js');
@@ -9,10 +9,6 @@ var jsxRuntime = require('react/jsx-runtime');
 var position = require('../common/propsValues/position.js');
 var typography = require('../common/propsValues/typography.js');
 
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var classNames__default = /*#__PURE__*/_interopDefault(classNames);
-
 const Card = /*#__PURE__*/React.forwardRef(function Card({
   'aria-label': ariaLabel,
   as: Element = 'div',
@@ -29,7 +25,7 @@ const Card = /*#__PURE__*/React.forwardRef(function Card({
   const isOpen = !!(isExpanded && children);
   return /*#__PURE__*/jsxRuntime.jsxs(Element, {
     ref: reference,
-    className: classNames__default.default('np-card', className, {
+    className: clsx.clsx('np-card', className, {
       'np-card--expanded': isOpen,
       'np-card--inactive': !children,
       'np-card--has-icon': !!icon
@@ -39,7 +35,7 @@ const Card = /*#__PURE__*/React.forwardRef(function Card({
     children: [/*#__PURE__*/jsxRuntime.jsx(Option, {
       "aria-label": ariaLabel,
       as: children ? 'button' : 'div',
-      className: classNames__default.default('np-card__button'),
+      className: clsx.clsx('np-card__button'),
       media: icon,
       title: title,
       content: details,
@@ -49,7 +45,7 @@ const Card = /*#__PURE__*/React.forwardRef(function Card({
       }),
       onClick: children ? () => onClick?.(!isExpanded) : undefined
     }), /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: classNames__default.default('np-card__divider', {
+      className: clsx.clsx('np-card__divider', {
         'np-card__divider--expanded': isOpen
       })
     }), isOpen && /*#__PURE__*/jsxRuntime.jsx(Body, {

package/build/card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sources":["../../src/card/Card.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { forwardRef } from 'react';\n\nimport Body from '../body';\nimport Chevron from '../chevron';\nimport { Position, Typography } from '../common';\nimport Option from '../common/Option';\n\nexport interface CardProps {\n  'aria-label'?: string;\n  as?: React.ElementType;\n  isExpanded?: boolean;\n  title: React.ReactNode;\n  details: React.ReactNode;\n  icon?: React.ReactNode;\n  children?: React.ReactNode;\n  id?: string;\n  className?: string;\n  'data-testid'?: string;\n  onClick?: (nextIsExpanded: boolean) => void;\n}\n\n/**\n * @deprecated use Navigation pattern (via `NavigationOption` component)\n * @see https://transferwise.atlassian.net/wiki/spaces/DS/pages/2387314550/Instructions+for+killing+expanding+cards+on+web+design+pattern\n */\nconst Card = forwardRef(function Card(\n  {\n    'aria-label': ariaLabel,\n    as: Element = 'div',\n    isExpanded,\n    title,\n    details,\n    children,\n    onClick,\n    icon,\n    id,\n    className,\n    'data-testid': dataTestId,\n  }: CardProps,\n  reference,\n) {\n  const isOpen = !!(isExpanded && children);\n\n  return (\n    <Element\n      ref={reference}\n      className={classNames('np-card', className, {\n        'np-card--expanded': isOpen,\n        'np-card--inactive': !children,\n        'np-card--has-icon': !!icon,\n      })}\n      id={id}\n      data-testid={dataTestId}\n    >\n      <Option\n        aria-label={ariaLabel}\n        as={children ? 'button' : 'div'}\n        className={classNames('np-card__button')}\n        media={icon}\n        title={title}\n        content={details}\n        showMediaAtAllSizes\n        button={children && <Chevron orientation={isOpen ? Position.TOP : Position.BOTTOM} />}\n        onClick={children ? () => onClick?.(!isExpanded) : undefined}\n      />\n      <div\n        className={classNames('np-card__divider', {\n          'np-card__divider--expanded': isOpen,\n        })}\n      />\n      {isOpen && (\n        <Body as=\"span\" type={Typography.BODY_LARGE} className=\"np-card__content d-block\">\n          {children}\n        </Body>\n      )}\n    </Element>\n  );\n});\n\nexport default Card;\n"],"names":["Card","forwardRef","ariaLabel","as","Element","isExpanded","title","details","children","onClick","icon","id","className","dataTestId","reference","isOpen","_jsxs","ref","classNames","_jsx","Option","media","content","showMediaAtAllSizes","button","Chevron","orientation","Position","TOP","BOTTOM","undefined","Body","type","Typography","BODY_LARGE"],"mappings":";;;;;;;;;;;;;;;AA0BA,MAAMA,IAAI,gBAAGC,gBAAU,CAAC,SAASD,IAAIA,CACnC;AACE,EAAA,YAAY,EAAEE,SAAS;EACvBC,EAAE,EAAEC,OAAO,GAAG,KAAK;EACnBC,UAAU;EACVC,KAAK;EACLC,OAAO;EACPC,QAAQ;EACRC,OAAO;EACPC,IAAI;EACJC,EAAE;EACFC,SAAS;AACT,EAAA,aAAa,EAAEC,UAAAA;AAAU,CACf,EACZC,SAAS,EAAA;AAET,EAAA,MAAMC,MAAM,GAAG,CAAC,EAAEV,UAAU,IAAIG,QAAQ,CAAC,CAAA;EAEzC,oBACEQ,eAAA,CAACZ,OAAO,EAAA;AACNa,IAAAA,GAAG,EAAEH,SAAU;AACfF,IAAAA,SAAS,EAAEM,2BAAU,CAAC,SAAS,EAAEN,SAAS,EAAE;AAC1C,MAAA,mBAAmB,EAAEG,MAAM;MAC3B,mBAAmB,EAAE,CAACP,QAAQ;MAC9B,mBAAmB,EAAE,CAAC,CAACE,IAAAA;AACxB,KAAA,CAAE;AACHC,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,aAAA,EAAaE,UAAW;IAAAL,QAAA,EAAA,cAExBW,cAAA,CAACC,MAAM,EAAA;AACL,MAAA,YAAA,EAAYlB,SAAU;AACtBC,MAAAA,EAAE,EAAEK,QAAQ,GAAG,QAAQ,GAAG,KAAM;AAChCI,MAAAA,SAAS,EAAEM,2BAAU,CAAC,iBAAiB,CAAE;AACzCG,MAAAA,KAAK,EAAEX,IAAK;AACZJ,MAAAA,KAAK,EAAEA,KAAM;AACbgB,MAAAA,OAAO,EAAEf,OAAQ;MACjBgB,mBAAmB,EAAA,IAAA;AACnBC,MAAAA,MAAM,EAAEhB,QAAQ,iBAAIW,cAAA,CAACM,OAAO,EAAA;QAACC,WAAW,EAAEX,MAAM,GAAGY,iBAAQ,CAACC,GAAG,GAAGD,iBAAQ,CAACE,MAAAA;AAAO,QAAI;MACtFpB,OAAO,EAAED,QAAQ,GAAG,MAAMC,OAAO,GAAG,CAACJ,UAAU,CAAC,GAAGyB,SAAAA;KAErD,CAAA,eAAAX,cAAA,CAAA,KAAA,EAAA;AACEP,MAAAA,SAAS,EAAEM,2BAAU,CAAC,kBAAkB,EAAE;AACxC,QAAA,4BAA4B,EAAEH,MAAAA;OAC/B,CAAA;AAAE,KAEL,CAAA,EAACA,MAAM,iBACLI,cAAA,CAACY,IAAI,EAAA;AAAC5B,MAAAA,EAAE,EAAC,MAAM;MAAC6B,IAAI,EAAEC,qBAAU,CAACC,UAAW;AAACtB,MAAAA,SAAS,EAAC,0BAA0B;AAAAJ,MAAAA,QAAA,EAC9EA,QAAAA;AAAQ,KACL,CACP,CAAA;AAAA,GACM,CAAC,CAAA;AAEd,CAAC;;;;"}
+{"version":3,"file":"Card.js","sources":["../../src/card/Card.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport Body from '../body';\nimport Chevron from '../chevron';\nimport { Position, Typography } from '../common';\nimport Option from '../common/Option';\n\nexport interface CardProps {\n  'aria-label'?: string;\n  as?: React.ElementType;\n  isExpanded?: boolean;\n  title: React.ReactNode;\n  details: React.ReactNode;\n  icon?: React.ReactNode;\n  children?: React.ReactNode;\n  id?: string;\n  className?: string;\n  'data-testid'?: string;\n  onClick?: (nextIsExpanded: boolean) => void;\n}\n\n/**\n * @deprecated use Navigation pattern (via `NavigationOption` component)\n * @see https://transferwise.atlassian.net/wiki/spaces/DS/pages/2387314550/Instructions+for+killing+expanding+cards+on+web+design+pattern\n */\nconst Card = forwardRef(function Card(\n  {\n    'aria-label': ariaLabel,\n    as: Element = 'div',\n    isExpanded,\n    title,\n    details,\n    children,\n    onClick,\n    icon,\n    id,\n    className,\n    'data-testid': dataTestId,\n  }: CardProps,\n  reference,\n) {\n  const isOpen = !!(isExpanded && children);\n\n  return (\n    <Element\n      ref={reference}\n      className={clsx('np-card', className, {\n        'np-card--expanded': isOpen,\n        'np-card--inactive': !children,\n        'np-card--has-icon': !!icon,\n      })}\n      id={id}\n      data-testid={dataTestId}\n    >\n      <Option\n        aria-label={ariaLabel}\n        as={children ? 'button' : 'div'}\n        className={clsx('np-card__button')}\n        media={icon}\n        title={title}\n        content={details}\n        showMediaAtAllSizes\n        button={children && <Chevron orientation={isOpen ? Position.TOP : Position.BOTTOM} />}\n        onClick={children ? () => onClick?.(!isExpanded) : undefined}\n      />\n      <div\n        className={clsx('np-card__divider', {\n          'np-card__divider--expanded': isOpen,\n        })}\n      />\n      {isOpen && (\n        <Body as=\"span\" type={Typography.BODY_LARGE} className=\"np-card__content d-block\">\n          {children}\n        </Body>\n      )}\n    </Element>\n  );\n});\n\nexport default Card;\n"],"names":["Card","forwardRef","ariaLabel","as","Element","isExpanded","title","details","children","onClick","icon","id","className","dataTestId","reference","isOpen","_jsxs","ref","clsx","_jsx","Option","media","content","showMediaAtAllSizes","button","Chevron","orientation","Position","TOP","BOTTOM","undefined","Body","type","Typography","BODY_LARGE"],"mappings":";;;;;;;;;;;AA0BA,MAAMA,IAAI,gBAAGC,gBAAU,CAAC,SAASD,IAAIA,CACnC;AACE,EAAA,YAAY,EAAEE,SAAS;EACvBC,EAAE,EAAEC,OAAO,GAAG,KAAK;EACnBC,UAAU;EACVC,KAAK;EACLC,OAAO;EACPC,QAAQ;EACRC,OAAO;EACPC,IAAI;EACJC,EAAE;EACFC,SAAS;AACT,EAAA,aAAa,EAAEC,UAAAA;AAAU,CACf,EACZC,SAAS,EAAA;AAET,EAAA,MAAMC,MAAM,GAAG,CAAC,EAAEV,UAAU,IAAIG,QAAQ,CAAC,CAAA;EAEzC,oBACEQ,eAAA,CAACZ,OAAO,EAAA;AACNa,IAAAA,GAAG,EAAEH,SAAU;AACfF,IAAAA,SAAS,EAAEM,SAAI,CAAC,SAAS,EAAEN,SAAS,EAAE;AACpC,MAAA,mBAAmB,EAAEG,MAAM;MAC3B,mBAAmB,EAAE,CAACP,QAAQ;MAC9B,mBAAmB,EAAE,CAAC,CAACE,IAAAA;AACxB,KAAA,CAAE;AACHC,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,aAAA,EAAaE,UAAW;IAAAL,QAAA,EAAA,cAExBW,cAAA,CAACC,MAAM,EAAA;AACL,MAAA,YAAA,EAAYlB,SAAU;AACtBC,MAAAA,EAAE,EAAEK,QAAQ,GAAG,QAAQ,GAAG,KAAM;AAChCI,MAAAA,SAAS,EAAEM,SAAI,CAAC,iBAAiB,CAAE;AACnCG,MAAAA,KAAK,EAAEX,IAAK;AACZJ,MAAAA,KAAK,EAAEA,KAAM;AACbgB,MAAAA,OAAO,EAAEf,OAAQ;MACjBgB,mBAAmB,EAAA,IAAA;AACnBC,MAAAA,MAAM,EAAEhB,QAAQ,iBAAIW,cAAA,CAACM,OAAO,EAAA;QAACC,WAAW,EAAEX,MAAM,GAAGY,iBAAQ,CAACC,GAAG,GAAGD,iBAAQ,CAACE,MAAAA;AAAO,QAAI;MACtFpB,OAAO,EAAED,QAAQ,GAAG,MAAMC,OAAO,GAAG,CAACJ,UAAU,CAAC,GAAGyB,SAAAA;KAErD,CAAA,eAAAX,cAAA,CAAA,KAAA,EAAA;AACEP,MAAAA,SAAS,EAAEM,SAAI,CAAC,kBAAkB,EAAE;AAClC,QAAA,4BAA4B,EAAEH,MAAAA;OAC/B,CAAA;AAAE,KAEL,CAAA,EAACA,MAAM,iBACLI,cAAA,CAACY,IAAI,EAAA;AAAC5B,MAAAA,EAAE,EAAC,MAAM;MAAC6B,IAAI,EAAEC,qBAAU,CAACC,UAAW;AAACtB,MAAAA,SAAS,EAAC,0BAA0B;AAAAJ,MAAAA,QAAA,EAC9EA,QAAAA;AAAQ,KACL,CACP,CAAA;AAAA,GACM,CAAC,CAAA;AAEd,CAAC;;;;"}

package/build/card/Card.mjs

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 import Body from '../body/Body.mjs';
 import Chevron from '../chevron/Chevron.mjs';
@@ -23,7 +23,7 @@ const Card = /*#__PURE__*/forwardRef(function Card({
   const isOpen = !!(isExpanded && children);
   return /*#__PURE__*/jsxs(Element, {
     ref: reference,
-    className: classNames('np-card', className, {
+    className: clsx('np-card', className, {
       'np-card--expanded': isOpen,
       'np-card--inactive': !children,
       'np-card--has-icon': !!icon
@@ -33,7 +33,7 @@ const Card = /*#__PURE__*/forwardRef(function Card({
     children: [/*#__PURE__*/jsx(Option, {
       "aria-label": ariaLabel,
       as: children ? 'button' : 'div',
-      className: classNames('np-card__button'),
+      className: clsx('np-card__button'),
       media: icon,
       title: title,
       content: details,
@@ -43,7 +43,7 @@ const Card = /*#__PURE__*/forwardRef(function Card({
       }),
       onClick: children ? () => onClick?.(!isExpanded) : undefined
     }), /*#__PURE__*/jsx("div", {
-      className: classNames('np-card__divider', {
+      className: clsx('np-card__divider', {
         'np-card__divider--expanded': isOpen
       })
     }), isOpen && /*#__PURE__*/jsx(Body, {

package/build/card/Card.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Card.mjs","sources":["../../src/card/Card.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { forwardRef } from 'react';\n\nimport Body from '../body';\nimport Chevron from '../chevron';\nimport { Position, Typography } from '../common';\nimport Option from '../common/Option';\n\nexport interface CardProps {\n  'aria-label'?: string;\n  as?: React.ElementType;\n  isExpanded?: boolean;\n  title: React.ReactNode;\n  details: React.ReactNode;\n  icon?: React.ReactNode;\n  children?: React.ReactNode;\n  id?: string;\n  className?: string;\n  'data-testid'?: string;\n  onClick?: (nextIsExpanded: boolean) => void;\n}\n\n/**\n * @deprecated use Navigation pattern (via `NavigationOption` component)\n * @see https://transferwise.atlassian.net/wiki/spaces/DS/pages/2387314550/Instructions+for+killing+expanding+cards+on+web+design+pattern\n */\nconst Card = forwardRef(function Card(\n  {\n    'aria-label': ariaLabel,\n    as: Element = 'div',\n    isExpanded,\n    title,\n    details,\n    children,\n    onClick,\n    icon,\n    id,\n    className,\n    'data-testid': dataTestId,\n  }: CardProps,\n  reference,\n) {\n  const isOpen = !!(isExpanded && children);\n\n  return (\n    <Element\n      ref={reference}\n      className={classNames('np-card', className, {\n        'np-card--expanded': isOpen,\n        'np-card--inactive': !children,\n        'np-card--has-icon': !!icon,\n      })}\n      id={id}\n      data-testid={dataTestId}\n    >\n      <Option\n        aria-label={ariaLabel}\n        as={children ? 'button' : 'div'}\n        className={classNames('np-card__button')}\n        media={icon}\n        title={title}\n        content={details}\n        showMediaAtAllSizes\n        button={children && <Chevron orientation={isOpen ? Position.TOP : Position.BOTTOM} />}\n        onClick={children ? () => onClick?.(!isExpanded) : undefined}\n      />\n      <div\n        className={classNames('np-card__divider', {\n          'np-card__divider--expanded': isOpen,\n        })}\n      />\n      {isOpen && (\n        <Body as=\"span\" type={Typography.BODY_LARGE} className=\"np-card__content d-block\">\n          {children}\n        </Body>\n      )}\n    </Element>\n  );\n});\n\nexport default Card;\n"],"names":["Card","forwardRef","ariaLabel","as","Element","isExpanded","title","details","children","onClick","icon","id","className","dataTestId","reference","isOpen","_jsxs","ref","classNames","_jsx","Option","media","content","showMediaAtAllSizes","button","Chevron","orientation","Position","TOP","BOTTOM","undefined","Body","type","Typography","BODY_LARGE"],"mappings":";;;;;;;;;AA0BA,MAAMA,IAAI,gBAAGC,UAAU,CAAC,SAASD,IAAIA,CACnC;AACE,EAAA,YAAY,EAAEE,SAAS;EACvBC,EAAE,EAAEC,OAAO,GAAG,KAAK;EACnBC,UAAU;EACVC,KAAK;EACLC,OAAO;EACPC,QAAQ;EACRC,OAAO;EACPC,IAAI;EACJC,EAAE;EACFC,SAAS;AACT,EAAA,aAAa,EAAEC,UAAAA;AAAU,CACf,EACZC,SAAS,EAAA;AAET,EAAA,MAAMC,MAAM,GAAG,CAAC,EAAEV,UAAU,IAAIG,QAAQ,CAAC,CAAA;EAEzC,oBACEQ,IAAA,CAACZ,OAAO,EAAA;AACNa,IAAAA,GAAG,EAAEH,SAAU;AACfF,IAAAA,SAAS,EAAEM,UAAU,CAAC,SAAS,EAAEN,SAAS,EAAE;AAC1C,MAAA,mBAAmB,EAAEG,MAAM;MAC3B,mBAAmB,EAAE,CAACP,QAAQ;MAC9B,mBAAmB,EAAE,CAAC,CAACE,IAAAA;AACxB,KAAA,CAAE;AACHC,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,aAAA,EAAaE,UAAW;IAAAL,QAAA,EAAA,cAExBW,GAAA,CAACC,MAAM,EAAA;AACL,MAAA,YAAA,EAAYlB,SAAU;AACtBC,MAAAA,EAAE,EAAEK,QAAQ,GAAG,QAAQ,GAAG,KAAM;AAChCI,MAAAA,SAAS,EAAEM,UAAU,CAAC,iBAAiB,CAAE;AACzCG,MAAAA,KAAK,EAAEX,IAAK;AACZJ,MAAAA,KAAK,EAAEA,KAAM;AACbgB,MAAAA,OAAO,EAAEf,OAAQ;MACjBgB,mBAAmB,EAAA,IAAA;AACnBC,MAAAA,MAAM,EAAEhB,QAAQ,iBAAIW,GAAA,CAACM,OAAO,EAAA;QAACC,WAAW,EAAEX,MAAM,GAAGY,QAAQ,CAACC,GAAG,GAAGD,QAAQ,CAACE,MAAAA;AAAO,QAAI;MACtFpB,OAAO,EAAED,QAAQ,GAAG,MAAMC,OAAO,GAAG,CAACJ,UAAU,CAAC,GAAGyB,SAAAA;KAErD,CAAA,eAAAX,GAAA,CAAA,KAAA,EAAA;AACEP,MAAAA,SAAS,EAAEM,UAAU,CAAC,kBAAkB,EAAE;AACxC,QAAA,4BAA4B,EAAEH,MAAAA;OAC/B,CAAA;AAAE,KAEL,CAAA,EAACA,MAAM,iBACLI,GAAA,CAACY,IAAI,EAAA;AAAC5B,MAAAA,EAAE,EAAC,MAAM;MAAC6B,IAAI,EAAEC,UAAU,CAACC,UAAW;AAACtB,MAAAA,SAAS,EAAC,0BAA0B;AAAAJ,MAAAA,QAAA,EAC9EA,QAAAA;AAAQ,KACL,CACP,CAAA;AAAA,GACM,CAAC,CAAA;AAEd,CAAC;;;;"}
+{"version":3,"file":"Card.mjs","sources":["../../src/card/Card.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport Body from '../body';\nimport Chevron from '../chevron';\nimport { Position, Typography } from '../common';\nimport Option from '../common/Option';\n\nexport interface CardProps {\n  'aria-label'?: string;\n  as?: React.ElementType;\n  isExpanded?: boolean;\n  title: React.ReactNode;\n  details: React.ReactNode;\n  icon?: React.ReactNode;\n  children?: React.ReactNode;\n  id?: string;\n  className?: string;\n  'data-testid'?: string;\n  onClick?: (nextIsExpanded: boolean) => void;\n}\n\n/**\n * @deprecated use Navigation pattern (via `NavigationOption` component)\n * @see https://transferwise.atlassian.net/wiki/spaces/DS/pages/2387314550/Instructions+for+killing+expanding+cards+on+web+design+pattern\n */\nconst Card = forwardRef(function Card(\n  {\n    'aria-label': ariaLabel,\n    as: Element = 'div',\n    isExpanded,\n    title,\n    details,\n    children,\n    onClick,\n    icon,\n    id,\n    className,\n    'data-testid': dataTestId,\n  }: CardProps,\n  reference,\n) {\n  const isOpen = !!(isExpanded && children);\n\n  return (\n    <Element\n      ref={reference}\n      className={clsx('np-card', className, {\n        'np-card--expanded': isOpen,\n        'np-card--inactive': !children,\n        'np-card--has-icon': !!icon,\n      })}\n      id={id}\n      data-testid={dataTestId}\n    >\n      <Option\n        aria-label={ariaLabel}\n        as={children ? 'button' : 'div'}\n        className={clsx('np-card__button')}\n        media={icon}\n        title={title}\n        content={details}\n        showMediaAtAllSizes\n        button={children && <Chevron orientation={isOpen ? Position.TOP : Position.BOTTOM} />}\n        onClick={children ? () => onClick?.(!isExpanded) : undefined}\n      />\n      <div\n        className={clsx('np-card__divider', {\n          'np-card__divider--expanded': isOpen,\n        })}\n      />\n      {isOpen && (\n        <Body as=\"span\" type={Typography.BODY_LARGE} className=\"np-card__content d-block\">\n          {children}\n        </Body>\n      )}\n    </Element>\n  );\n});\n\nexport default Card;\n"],"names":["Card","forwardRef","ariaLabel","as","Element","isExpanded","title","details","children","onClick","icon","id","className","dataTestId","reference","isOpen","_jsxs","ref","clsx","_jsx","Option","media","content","showMediaAtAllSizes","button","Chevron","orientation","Position","TOP","BOTTOM","undefined","Body","type","Typography","BODY_LARGE"],"mappings":";;;;;;;;;AA0BA,MAAMA,IAAI,gBAAGC,UAAU,CAAC,SAASD,IAAIA,CACnC;AACE,EAAA,YAAY,EAAEE,SAAS;EACvBC,EAAE,EAAEC,OAAO,GAAG,KAAK;EACnBC,UAAU;EACVC,KAAK;EACLC,OAAO;EACPC,QAAQ;EACRC,OAAO;EACPC,IAAI;EACJC,EAAE;EACFC,SAAS;AACT,EAAA,aAAa,EAAEC,UAAAA;AAAU,CACf,EACZC,SAAS,EAAA;AAET,EAAA,MAAMC,MAAM,GAAG,CAAC,EAAEV,UAAU,IAAIG,QAAQ,CAAC,CAAA;EAEzC,oBACEQ,IAAA,CAACZ,OAAO,EAAA;AACNa,IAAAA,GAAG,EAAEH,SAAU;AACfF,IAAAA,SAAS,EAAEM,IAAI,CAAC,SAAS,EAAEN,SAAS,EAAE;AACpC,MAAA,mBAAmB,EAAEG,MAAM;MAC3B,mBAAmB,EAAE,CAACP,QAAQ;MAC9B,mBAAmB,EAAE,CAAC,CAACE,IAAAA;AACxB,KAAA,CAAE;AACHC,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,aAAA,EAAaE,UAAW;IAAAL,QAAA,EAAA,cAExBW,GAAA,CAACC,MAAM,EAAA;AACL,MAAA,YAAA,EAAYlB,SAAU;AACtBC,MAAAA,EAAE,EAAEK,QAAQ,GAAG,QAAQ,GAAG,KAAM;AAChCI,MAAAA,SAAS,EAAEM,IAAI,CAAC,iBAAiB,CAAE;AACnCG,MAAAA,KAAK,EAAEX,IAAK;AACZJ,MAAAA,KAAK,EAAEA,KAAM;AACbgB,MAAAA,OAAO,EAAEf,OAAQ;MACjBgB,mBAAmB,EAAA,IAAA;AACnBC,MAAAA,MAAM,EAAEhB,QAAQ,iBAAIW,GAAA,CAACM,OAAO,EAAA;QAACC,WAAW,EAAEX,MAAM,GAAGY,QAAQ,CAACC,GAAG,GAAGD,QAAQ,CAACE,MAAAA;AAAO,QAAI;MACtFpB,OAAO,EAAED,QAAQ,GAAG,MAAMC,OAAO,GAAG,CAACJ,UAAU,CAAC,GAAGyB,SAAAA;KAErD,CAAA,eAAAX,GAAA,CAAA,KAAA,EAAA;AACEP,MAAAA,SAAS,EAAEM,IAAI,CAAC,kBAAkB,EAAE;AAClC,QAAA,4BAA4B,EAAEH,MAAAA;OAC/B,CAAA;AAAE,KAEL,CAAA,EAACA,MAAM,iBACLI,GAAA,CAACY,IAAI,EAAA;AAAC5B,MAAAA,EAAE,EAAC,MAAM;MAAC6B,IAAI,EAAEC,UAAU,CAACC,UAAW;AAACtB,MAAAA,SAAS,EAAC,0BAA0B;AAAAJ,MAAAA,QAAA,EAC9EA,QAAAA;AAAQ,KACL,CACP,CAAA;AAAA,GACM,CAAC,CAAA;AAEd,CAAC;;;;"}

package/build/carousel/Carousel.js

@@ -1,17 +1,13 @@
 'use strict';
 
 var icons = require('@transferwise/icons');
-var classNames = require('classnames');
+var clsx = require('clsx');
 var React = require('react');
 var ActionButton = require('../actionButton/ActionButton.js');
 var Title = require('../title/Title.js');
 var PromoCard = require('../promoCard/PromoCard.js');
 var jsxRuntime = require('react/jsx-runtime');
 
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var classNames__default = /*#__PURE__*/_interopDefault(classNames);
-
 const LEFT_SCROLL_OFFSET = 8;
 const Carousel = ({
   header,
@@ -115,7 +111,7 @@ const Carousel = ({
     }
   };
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: classNames__default.default('carousel-wrapper', className),
+    className: clsx.clsx('carousel-wrapper', className),
     children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "d-flex justify-content-between carousel__header",
       children: [typeof header === 'string' ? /*#__PURE__*/jsxRuntime.jsx(Title, {
@@ -156,7 +152,7 @@ const Carousel = ({
       children: cards?.map((card, index) => {
         const sharedProps = {
           id: card.id,
-          className: classNames__default.default('carousel__card', {
+          className: clsx.clsx('carousel__card', {
             'carousel__card--focused': card.id === focusedCard
           }),
           onClick: () => {
@@ -169,7 +165,7 @@ const Carousel = ({
         };
         const cardContent = card.type !== 'promo' ? /*#__PURE__*/jsxRuntime.jsx("div", {
           id: `${card.id}-content`,
-          className: classNames__default.default('carousel__card-content', {
+          className: clsx.clsx('carousel__card-content', {
             [card.className ?? '']: !!card.className
           })
           // eslint-disable-next-line react/forbid-dom-props
@@ -260,7 +256,7 @@ const Carousel = ({
           tabIndex: -1,
           "aria-hidden": true,
           type: "button",
-          className: classNames__default.default('carousel__indicator', {
+          className: clsx.clsx('carousel__indicator', {
             'carousel__indicator--selected': card.id === visibleCardOnMobileView
           }),
           onClick: () => {

package/build/carousel/Carousel.js.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.js","sources":["../../src/carousel/Carousel.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from '@transferwise/icons';\nimport classNames from 'classnames';\nimport { type CSSProperties, type ReactNode, useEffect, useRef, useState } from 'react';\n\nimport ActionButton from '../actionButton';\nimport Title from '../title';\nimport type { PromoCardLinkProps } from '../promoCard/PromoCard';\nimport PromoCard from '../promoCard/PromoCard';\n\nexport type CarouselCardCommon = {\n  id: string;\n  href?: string;\n  hrefTarget?: HTMLAnchorElement['target'];\n  onClick?: () => void;\n  className?: string;\n  styles?: CSSProperties;\n};\n\nexport type CarouselDefaultCard = CarouselCardCommon & {\n  type: 'anchor' | 'button';\n  content: ReactNode;\n};\n\nexport type CarouselPromoCard = CarouselCardCommon & {\n  type: 'promo';\n} & Omit<PromoCardLinkProps, 'type'>;\n\nexport type CarouselCard = CarouselDefaultCard | CarouselPromoCard;\nexport interface CarouselProps {\n  header: string | ReactNode;\n  className?: string;\n  cards: CarouselCard[];\n  onClick?: (cardId: string) => void;\n}\n\ntype CardsReference = {\n  type: 'promo' | 'default';\n  cardElement: HTMLDivElement | HTMLAnchorElement;\n  anchorElement?: HTMLAnchorElement;\n};\n\nconst LEFT_SCROLL_OFFSET = 8;\n\nconst Carousel: React.FC<CarouselProps> = ({ header, className, cards, onClick }) => {\n  const [scrollPosition, setScrollPosition] = useState(0);\n  const [previousScrollPosition, setPreviousScrollPosition] = useState(0);\n  const [scrollIsAtEnd, setScrollIsAtEnd] = useState(false);\n  const [visibleCardOnMobileView, setVisibleCardOnMobileView] = useState<string>('');\n  const carouselElementRef = useRef<HTMLDivElement>(null);\n  const carouselCardsRef = useRef<CardsReference[]>([]);\n\n  const isLeftActionButtonEnabled = scrollPosition > LEFT_SCROLL_OFFSET;\n\n  const areActionButtonsEnabled = isLeftActionButtonEnabled || !scrollIsAtEnd;\n\n  const [focusedCard, setFocusedCard] = useState(cards?.[0]?.id);\n\n  const updateScrollButtonsState = () => {\n    if (carouselElementRef.current) {\n      const { scrollWidth, offsetWidth } = carouselElementRef.current;\n\n      const scrollAtEnd = scrollWidth - offsetWidth <= scrollPosition + LEFT_SCROLL_OFFSET;\n      setScrollIsAtEnd(scrollAtEnd);\n    }\n\n    const scrollDirecton = scrollPosition > previousScrollPosition ? 'right' : 'left';\n\n    const cardsInFullViewIds: string[] = [];\n    carouselCardsRef.current.forEach((card) => {\n      if (isVisible(carouselElementRef.current as HTMLElement, card.cardElement as HTMLElement)) {\n        // eslint-disable-next-line functional/immutable-data\n        cardsInFullViewIds.push(card.cardElement.getAttribute('id') ?? '');\n      }\n    });\n\n    if (cardsInFullViewIds.length >= 1) {\n      const visibleCardIndex = scrollDirecton === 'right' ? cardsInFullViewIds.length - 1 : 0;\n      const visibleCardId = cardsInFullViewIds[visibleCardIndex];\n      setVisibleCardOnMobileView(visibleCardId);\n      setFocusedCard(visibleCardId);\n    }\n\n    setPreviousScrollPosition(scrollPosition);\n  };\n\n  const scrollCarousel = (direction: 'left' | 'right' = 'right') => {\n    if (carouselElementRef.current) {\n      const { scrollWidth } = carouselElementRef.current;\n\n      const cardWidth = scrollWidth / carouselCardsRef.current.length;\n\n      const res = Math.floor(cardWidth - cardWidth * 0.05);\n\n      carouselElementRef.current.scrollBy({\n        left: direction === 'right' ? res : -res,\n        behavior: 'smooth',\n      });\n    }\n  };\n\n  const handleOnKeyDown = (\n    event: React.KeyboardEvent<HTMLAnchorElement | HTMLDivElement>,\n    index: number,\n  ) => {\n    if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {\n      const nextIndex = event.key === 'ArrowRight' ? index + 1 : index - 1;\n      const nextCard = cards[nextIndex];\n      if (nextCard) {\n        const ref = carouselCardsRef.current[nextIndex];\n        if (ref.type === 'promo') {\n          ref.anchorElement?.focus();\n        } else {\n          ref.cardElement?.focus();\n        }\n\n        scrollCardIntoView(carouselCardsRef.current[nextIndex].cardElement, nextCard);\n        event.preventDefault();\n      }\n    }\n\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.currentTarget.click();\n    }\n  };\n\n  const scrollCardIntoView = (element: HTMLElement, card: CarouselCard) => {\n    element.scrollIntoView({\n      behavior: 'smooth',\n      block: 'nearest',\n      inline: 'center',\n    });\n\n    setFocusedCard(card.id);\n  };\n\n  useEffect(() => {\n    updateScrollButtonsState();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [scrollPosition]);\n\n  useEffect(() => {\n    window.addEventListener('resize', updateScrollButtonsState);\n\n    return () => {\n      window.removeEventListener('resize', updateScrollButtonsState);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const addElementToCardsRefArray = (index: number, ref: Partial<CardsReference>) => {\n    if (ref) {\n      // eslint-disable-next-line functional/immutable-data\n      carouselCardsRef.current[index] = {\n        type: ref.type ?? carouselCardsRef.current?.[index]?.type,\n        cardElement: ref.cardElement ?? carouselCardsRef.current?.[index]?.cardElement,\n        anchorElement: ref.anchorElement ?? carouselCardsRef.current?.[index]?.anchorElement,\n      };\n    }\n  };\n\n  return (\n    <div className={classNames('carousel-wrapper', className)}>\n      <div className=\"d-flex justify-content-between carousel__header\">\n        {typeof header === 'string' ? (\n          <Title as=\"span\" type=\"title-body\">\n            {header}\n          </Title>\n        ) : (\n          header\n        )}\n        {areActionButtonsEnabled ? (\n          <div className=\"hidden-xs\">\n            <ActionButton\n              className=\"carousel__scroll-button\"\n              tabIndex={-1}\n              priority=\"secondary\"\n              disabled={!isLeftActionButtonEnabled}\n              aria-hidden=\"true\"\n              data-testid=\"scroll-carousel-left\"\n              onClick={() => scrollCarousel('left')}\n            >\n              <ChevronLeft />\n            </ActionButton>\n            <ActionButton\n              tabIndex={-1}\n              className=\"carousel__scroll-button m-l-1\"\n              priority=\"secondary\"\n              aria-hidden=\"true\"\n              data-testid=\"scroll-carousel-right\"\n              disabled={scrollIsAtEnd}\n              onClick={() => scrollCarousel()}\n            >\n              <ChevronRight />\n            </ActionButton>\n          </div>\n        ) : null}\n      </div>\n      <div\n        ref={carouselElementRef}\n        tabIndex={-1}\n        role=\"list\"\n        className=\"carousel\"\n        onScroll={(event) => {\n          const target = event.target as HTMLElement;\n          setScrollPosition(target.scrollLeft);\n        }}\n      >\n        {cards?.map((card, index) => {\n          const sharedProps = {\n            id: card.id,\n            className: classNames('carousel__card', {\n              'carousel__card--focused': card.id === focusedCard,\n            }),\n            onClick: () => {\n              card.onClick?.();\n              onClick?.(card.id);\n            },\n            onFocus: (event: React.FocusEvent<HTMLAnchorElement | HTMLDivElement>) => {\n              scrollCardIntoView(event.currentTarget, card);\n            },\n          };\n\n          const cardContent =\n            card.type !== 'promo' ? (\n              <div\n                id={`${card.id}-content`}\n                className={classNames('carousel__card-content', {\n                  [card.className ?? '']: !!card.className,\n                })}\n                // eslint-disable-next-line react/forbid-dom-props\n                style={card.styles}\n              >\n                {card.content}\n              </div>\n            ) : null;\n\n          if (card.type === 'button') {\n            return (\n              <div key={card.id} aria-labelledby={`${card.id}-content`} role=\"listitem\">\n                <div\n                  {...sharedProps}\n                  ref={(el) => {\n                    if (el) {\n                      // eslint-disable-next-line functional/immutable-data\n                      carouselCardsRef.current[index] = {\n                        type: 'default',\n                        cardElement: el,\n                      };\n                    }\n                  }}\n                  role=\"button\"\n                  tabIndex={0}\n                  onKeyDown={(event) => handleOnKeyDown(event, index)}\n                >\n                  {cardContent}\n                </div>\n              </div>\n            );\n          }\n\n          if (card.type === 'promo') {\n            return (\n              <div key={card.id} id={card.id} role=\"listitem\" aria-labelledby={`${card.id}-anchor`}>\n                <PromoCard\n                  {...{ ...card, type: undefined }}\n                  {...{ ...sharedProps }}\n                  ref={(el: HTMLDivElement | null) => {\n                    if (el) {\n                      addElementToCardsRefArray(index, {\n                        type: 'promo',\n                        cardElement: el,\n                      });\n                    }\n                  }}\n                  anchorRef={(el: HTMLAnchorElement) => {\n                    if (el) {\n                      addElementToCardsRefArray(index, {\n                        type: 'promo',\n                        anchorElement: el,\n                      });\n                    }\n                  }}\n                  anchorId={`${card.id}-anchor`}\n                  onKeyDown={(event) => handleOnKeyDown(event, index)}\n                />\n              </div>\n            );\n          }\n\n          return (\n            <div key={card.id} aria-labelledby={`${card.id}-content`} role=\"listitem\">\n              <a\n                {...sharedProps}\n                ref={(el) => {\n                  if (el) {\n                    // eslint-disable-next-line functional/immutable-data\n                    carouselCardsRef.current[index] = {\n                      type: 'default',\n                      cardElement: el,\n                    };\n                  }\n                }}\n                href={card.href}\n                target={card.hrefTarget}\n                rel=\"noreferrer\"\n                onKeyDown={(event) => handleOnKeyDown(event, index)}\n              >\n                {cardContent}\n              </a>\n            </div>\n          );\n        })}\n      </div>\n      <div className=\"visible-xs\">\n        <div className=\"carousel__indicators\">\n          {cards?.map((card, index) => (\n            <button\n              key={`${card.id}-indicator`}\n              data-testid={`${card.id}-indicator`}\n              tabIndex={-1}\n              aria-hidden\n              type=\"button\"\n              className={classNames('carousel__indicator', {\n                'carousel__indicator--selected': card.id === visibleCardOnMobileView,\n              })}\n              onClick={() => {\n                scrollCardIntoView(carouselCardsRef.current[index].cardElement, card);\n              }}\n            />\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n};\n\nconst isVisible = (container: HTMLElement, el: HTMLElement) => {\n  const cWidth = container.offsetWidth;\n  const cScrollOffset = container.scrollLeft;\n\n  const elemLeft = el.offsetLeft - container.offsetLeft;\n  const elemRight = elemLeft + el.offsetWidth;\n\n  return elemLeft >= cScrollOffset && elemRight <= cScrollOffset + cWidth;\n};\n\nexport default Carousel;\n"],"names":["LEFT_SCROLL_OFFSET","Carousel","header","className","cards","onClick","scrollPosition","setScrollPosition","useState","previousScrollPosition","setPreviousScrollPosition","scrollIsAtEnd","setScrollIsAtEnd","visibleCardOnMobileView","setVisibleCardOnMobileView","carouselElementRef","useRef","carouselCardsRef","isLeftActionButtonEnabled","areActionButtonsEnabled","focusedCard","setFocusedCard","id","updateScrollButtonsState","current","scrollWidth","offsetWidth","scrollAtEnd","scrollDirecton","cardsInFullViewIds","forEach","card","isVisible","cardElement","push","getAttribute","length","visibleCardIndex","visibleCardId","scrollCarousel","direction","cardWidth","res","Math","floor","scrollBy","left","behavior","handleOnKeyDown","event","index","key","nextIndex","nextCard","ref","type","anchorElement","focus","scrollCardIntoView","preventDefault","currentTarget","click","element","scrollIntoView","block","inline","useEffect","window","addEventListener","removeEventListener","addElementToCardsRefArray","_jsxs","classNames","children","_jsx","Title","as","ActionButton","tabIndex","priority","disabled","ChevronLeft","ChevronRight","role","onScroll","target","scrollLeft","map","sharedProps","onFocus","cardContent","style","styles","content","el","onKeyDown","PromoCard","undefined","anchorRef","anchorId","href","hrefTarget","rel","container","cWidth","cScrollOffset","elemLeft","offsetLeft","elemRight"],"mappings":"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"}
+{"version":3,"file":"Carousel.js","sources":["../../src/carousel/Carousel.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { type CSSProperties, type ReactNode, useEffect, useRef, useState } from 'react';\n\nimport ActionButton from '../actionButton';\nimport Title from '../title';\nimport type { PromoCardLinkProps } from '../promoCard/PromoCard';\nimport PromoCard from '../promoCard/PromoCard';\n\nexport type CarouselCardCommon = {\n  id: string;\n  href?: string;\n  hrefTarget?: HTMLAnchorElement['target'];\n  onClick?: () => void;\n  className?: string;\n  styles?: CSSProperties;\n};\n\nexport type CarouselDefaultCard = CarouselCardCommon & {\n  type: 'anchor' | 'button';\n  content: ReactNode;\n};\n\nexport type CarouselPromoCard = CarouselCardCommon & {\n  type: 'promo';\n} & Omit<PromoCardLinkProps, 'type'>;\n\nexport type CarouselCard = CarouselDefaultCard | CarouselPromoCard;\nexport interface CarouselProps {\n  header: string | ReactNode;\n  className?: string;\n  cards: CarouselCard[];\n  onClick?: (cardId: string) => void;\n}\n\ntype CardsReference = {\n  type: 'promo' | 'default';\n  cardElement: HTMLDivElement | HTMLAnchorElement;\n  anchorElement?: HTMLAnchorElement;\n};\n\nconst LEFT_SCROLL_OFFSET = 8;\n\nconst Carousel: React.FC<CarouselProps> = ({ header, className, cards, onClick }) => {\n  const [scrollPosition, setScrollPosition] = useState(0);\n  const [previousScrollPosition, setPreviousScrollPosition] = useState(0);\n  const [scrollIsAtEnd, setScrollIsAtEnd] = useState(false);\n  const [visibleCardOnMobileView, setVisibleCardOnMobileView] = useState<string>('');\n  const carouselElementRef = useRef<HTMLDivElement>(null);\n  const carouselCardsRef = useRef<CardsReference[]>([]);\n\n  const isLeftActionButtonEnabled = scrollPosition > LEFT_SCROLL_OFFSET;\n\n  const areActionButtonsEnabled = isLeftActionButtonEnabled || !scrollIsAtEnd;\n\n  const [focusedCard, setFocusedCard] = useState(cards?.[0]?.id);\n\n  const updateScrollButtonsState = () => {\n    if (carouselElementRef.current) {\n      const { scrollWidth, offsetWidth } = carouselElementRef.current;\n\n      const scrollAtEnd = scrollWidth - offsetWidth <= scrollPosition + LEFT_SCROLL_OFFSET;\n      setScrollIsAtEnd(scrollAtEnd);\n    }\n\n    const scrollDirecton = scrollPosition > previousScrollPosition ? 'right' : 'left';\n\n    const cardsInFullViewIds: string[] = [];\n    carouselCardsRef.current.forEach((card) => {\n      if (isVisible(carouselElementRef.current as HTMLElement, card.cardElement as HTMLElement)) {\n        // eslint-disable-next-line functional/immutable-data\n        cardsInFullViewIds.push(card.cardElement.getAttribute('id') ?? '');\n      }\n    });\n\n    if (cardsInFullViewIds.length >= 1) {\n      const visibleCardIndex = scrollDirecton === 'right' ? cardsInFullViewIds.length - 1 : 0;\n      const visibleCardId = cardsInFullViewIds[visibleCardIndex];\n      setVisibleCardOnMobileView(visibleCardId);\n      setFocusedCard(visibleCardId);\n    }\n\n    setPreviousScrollPosition(scrollPosition);\n  };\n\n  const scrollCarousel = (direction: 'left' | 'right' = 'right') => {\n    if (carouselElementRef.current) {\n      const { scrollWidth } = carouselElementRef.current;\n\n      const cardWidth = scrollWidth / carouselCardsRef.current.length;\n\n      const res = Math.floor(cardWidth - cardWidth * 0.05);\n\n      carouselElementRef.current.scrollBy({\n        left: direction === 'right' ? res : -res,\n        behavior: 'smooth',\n      });\n    }\n  };\n\n  const handleOnKeyDown = (\n    event: React.KeyboardEvent<HTMLAnchorElement | HTMLDivElement>,\n    index: number,\n  ) => {\n    if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {\n      const nextIndex = event.key === 'ArrowRight' ? index + 1 : index - 1;\n      const nextCard = cards[nextIndex];\n      if (nextCard) {\n        const ref = carouselCardsRef.current[nextIndex];\n        if (ref.type === 'promo') {\n          ref.anchorElement?.focus();\n        } else {\n          ref.cardElement?.focus();\n        }\n\n        scrollCardIntoView(carouselCardsRef.current[nextIndex].cardElement, nextCard);\n        event.preventDefault();\n      }\n    }\n\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.currentTarget.click();\n    }\n  };\n\n  const scrollCardIntoView = (element: HTMLElement, card: CarouselCard) => {\n    element.scrollIntoView({\n      behavior: 'smooth',\n      block: 'nearest',\n      inline: 'center',\n    });\n\n    setFocusedCard(card.id);\n  };\n\n  useEffect(() => {\n    updateScrollButtonsState();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [scrollPosition]);\n\n  useEffect(() => {\n    window.addEventListener('resize', updateScrollButtonsState);\n\n    return () => {\n      window.removeEventListener('resize', updateScrollButtonsState);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const addElementToCardsRefArray = (index: number, ref: Partial<CardsReference>) => {\n    if (ref) {\n      // eslint-disable-next-line functional/immutable-data\n      carouselCardsRef.current[index] = {\n        type: ref.type ?? carouselCardsRef.current?.[index]?.type,\n        cardElement: ref.cardElement ?? carouselCardsRef.current?.[index]?.cardElement,\n        anchorElement: ref.anchorElement ?? carouselCardsRef.current?.[index]?.anchorElement,\n      };\n    }\n  };\n\n  return (\n    <div className={clsx('carousel-wrapper', className)}>\n      <div className=\"d-flex justify-content-between carousel__header\">\n        {typeof header === 'string' ? (\n          <Title as=\"span\" type=\"title-body\">\n            {header}\n          </Title>\n        ) : (\n          header\n        )}\n        {areActionButtonsEnabled ? (\n          <div className=\"hidden-xs\">\n            <ActionButton\n              className=\"carousel__scroll-button\"\n              tabIndex={-1}\n              priority=\"secondary\"\n              disabled={!isLeftActionButtonEnabled}\n              aria-hidden=\"true\"\n              data-testid=\"scroll-carousel-left\"\n              onClick={() => scrollCarousel('left')}\n            >\n              <ChevronLeft />\n            </ActionButton>\n            <ActionButton\n              tabIndex={-1}\n              className=\"carousel__scroll-button m-l-1\"\n              priority=\"secondary\"\n              aria-hidden=\"true\"\n              data-testid=\"scroll-carousel-right\"\n              disabled={scrollIsAtEnd}\n              onClick={() => scrollCarousel()}\n            >\n              <ChevronRight />\n            </ActionButton>\n          </div>\n        ) : null}\n      </div>\n      <div\n        ref={carouselElementRef}\n        tabIndex={-1}\n        role=\"list\"\n        className=\"carousel\"\n        onScroll={(event) => {\n          const target = event.target as HTMLElement;\n          setScrollPosition(target.scrollLeft);\n        }}\n      >\n        {cards?.map((card, index) => {\n          const sharedProps = {\n            id: card.id,\n            className: clsx('carousel__card', {\n              'carousel__card--focused': card.id === focusedCard,\n            }),\n            onClick: () => {\n              card.onClick?.();\n              onClick?.(card.id);\n            },\n            onFocus: (event: React.FocusEvent<HTMLAnchorElement | HTMLDivElement>) => {\n              scrollCardIntoView(event.currentTarget, card);\n            },\n          };\n\n          const cardContent =\n            card.type !== 'promo' ? (\n              <div\n                id={`${card.id}-content`}\n                className={clsx('carousel__card-content', {\n                  [card.className ?? '']: !!card.className,\n                })}\n                // eslint-disable-next-line react/forbid-dom-props\n                style={card.styles}\n              >\n                {card.content}\n              </div>\n            ) : null;\n\n          if (card.type === 'button') {\n            return (\n              <div key={card.id} aria-labelledby={`${card.id}-content`} role=\"listitem\">\n                <div\n                  {...sharedProps}\n                  ref={(el) => {\n                    if (el) {\n                      // eslint-disable-next-line functional/immutable-data\n                      carouselCardsRef.current[index] = {\n                        type: 'default',\n                        cardElement: el,\n                      };\n                    }\n                  }}\n                  role=\"button\"\n                  tabIndex={0}\n                  onKeyDown={(event) => handleOnKeyDown(event, index)}\n                >\n                  {cardContent}\n                </div>\n              </div>\n            );\n          }\n\n          if (card.type === 'promo') {\n            return (\n              <div key={card.id} id={card.id} role=\"listitem\" aria-labelledby={`${card.id}-anchor`}>\n                <PromoCard\n                  {...{ ...card, type: undefined }}\n                  {...{ ...sharedProps }}\n                  ref={(el: HTMLDivElement | null) => {\n                    if (el) {\n                      addElementToCardsRefArray(index, {\n                        type: 'promo',\n                        cardElement: el,\n                      });\n                    }\n                  }}\n                  anchorRef={(el: HTMLAnchorElement) => {\n                    if (el) {\n                      addElementToCardsRefArray(index, {\n                        type: 'promo',\n                        anchorElement: el,\n                      });\n                    }\n                  }}\n                  anchorId={`${card.id}-anchor`}\n                  onKeyDown={(event) => handleOnKeyDown(event, index)}\n                />\n              </div>\n            );\n          }\n\n          return (\n            <div key={card.id} aria-labelledby={`${card.id}-content`} role=\"listitem\">\n              <a\n                {...sharedProps}\n                ref={(el) => {\n                  if (el) {\n                    // eslint-disable-next-line functional/immutable-data\n                    carouselCardsRef.current[index] = {\n                      type: 'default',\n                      cardElement: el,\n                    };\n                  }\n                }}\n                href={card.href}\n                target={card.hrefTarget}\n                rel=\"noreferrer\"\n                onKeyDown={(event) => handleOnKeyDown(event, index)}\n              >\n                {cardContent}\n              </a>\n            </div>\n          );\n        })}\n      </div>\n      <div className=\"visible-xs\">\n        <div className=\"carousel__indicators\">\n          {cards?.map((card, index) => (\n            <button\n              key={`${card.id}-indicator`}\n              data-testid={`${card.id}-indicator`}\n              tabIndex={-1}\n              aria-hidden\n              type=\"button\"\n              className={clsx('carousel__indicator', {\n                'carousel__indicator--selected': card.id === visibleCardOnMobileView,\n              })}\n              onClick={() => {\n                scrollCardIntoView(carouselCardsRef.current[index].cardElement, card);\n              }}\n            />\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n};\n\nconst isVisible = (container: HTMLElement, el: HTMLElement) => {\n  const cWidth = container.offsetWidth;\n  const cScrollOffset = container.scrollLeft;\n\n  const elemLeft = el.offsetLeft - container.offsetLeft;\n  const elemRight = elemLeft + el.offsetWidth;\n\n  return elemLeft >= cScrollOffset && elemRight <= cScrollOffset + cWidth;\n};\n\nexport default Carousel;\n"],"names":["LEFT_SCROLL_OFFSET","Carousel","header","className","cards","onClick","scrollPosition","setScrollPosition","useState","previousScrollPosition","setPreviousScrollPosition","scrollIsAtEnd","setScrollIsAtEnd","visibleCardOnMobileView","setVisibleCardOnMobileView","carouselElementRef","useRef","carouselCardsRef","isLeftActionButtonEnabled","areActionButtonsEnabled","focusedCard","setFocusedCard","id","updateScrollButtonsState","current","scrollWidth","offsetWidth","scrollAtEnd","scrollDirecton","cardsInFullViewIds","forEach","card","isVisible","cardElement","push","getAttribute","length","visibleCardIndex","visibleCardId","scrollCarousel","direction","cardWidth","res","Math","floor","scrollBy","left","behavior","handleOnKeyDown","event","index","key","nextIndex","nextCard","ref","type","anchorElement","focus","scrollCardIntoView","preventDefault","currentTarget","click","element","scrollIntoView","block","inline","useEffect","window","addEventListener","removeEventListener","addElementToCardsRefArray","_jsxs","clsx","children","_jsx","Title","as","ActionButton","tabIndex","priority","disabled","ChevronLeft","ChevronRight","role","onScroll","target","scrollLeft","map","sharedProps","onFocus","cardContent","style","styles","content","el","onKeyDown","PromoCard","undefined","anchorRef","anchorId","href","hrefTarget","rel","container","cWidth","cScrollOffset","elemLeft","offsetLeft","elemRight"],"mappings":"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"}

package/build/carousel/Carousel.mjs

@@ -1,5 +1,5 @@
 import { ChevronLeft, ChevronRight } from '@transferwise/icons';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { useState, useRef, useEffect } from 'react';
 import ActionButton from '../actionButton/ActionButton.mjs';
 import Title from '../title/Title.mjs';
@@ -109,7 +109,7 @@ const Carousel = ({
     }
   };
   return /*#__PURE__*/jsxs("div", {
-    className: classNames('carousel-wrapper', className),
+    className: clsx('carousel-wrapper', className),
     children: [/*#__PURE__*/jsxs("div", {
       className: "d-flex justify-content-between carousel__header",
       children: [typeof header === 'string' ? /*#__PURE__*/jsx(Title, {
@@ -150,7 +150,7 @@ const Carousel = ({
       children: cards?.map((card, index) => {
         const sharedProps = {
           id: card.id,
-          className: classNames('carousel__card', {
+          className: clsx('carousel__card', {
             'carousel__card--focused': card.id === focusedCard
           }),
           onClick: () => {
@@ -163,7 +163,7 @@ const Carousel = ({
         };
         const cardContent = card.type !== 'promo' ? /*#__PURE__*/jsx("div", {
           id: `${card.id}-content`,
-          className: classNames('carousel__card-content', {
+          className: clsx('carousel__card-content', {
             [card.className ?? '']: !!card.className
           })
           // eslint-disable-next-line react/forbid-dom-props
@@ -254,7 +254,7 @@ const Carousel = ({
           tabIndex: -1,
           "aria-hidden": true,
           type: "button",
-          className: classNames('carousel__indicator', {
+          className: clsx('carousel__indicator', {
             'carousel__indicator--selected': card.id === visibleCardOnMobileView
           }),
           onClick: () => {