@transferwise/components 0.0.0-experimental-4c97d70 → 0.0.0-experimental-a322f91

package/build/avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sources":["../../src/avatar/Avatar.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useMemo } from 'react';\n\nimport { getBrandColorFromSeed, Theme } from '../common';\n\nimport Circle from '../common/circle';\n\ntype NumericAvatarSize = 24 | 40 | 48 | 56 | 72;\n\ntype LegacyAvatarSize = 'sm' | 'md' | 'lg';\n\nexport type AvatarSize = NumericAvatarSize | LegacyAvatarSize;\n\nexport type AvatarTheme = 'light' | 'dark';\n\nexport type AvatarType = 'thumbnail' | 'icon' | 'emoji' | 'initials';\n\n/**\n * @deprecated `Avatar` is deprecated please use `AvatarView` instead\n */\nexport interface AvatarProps {\n  backgroundColor?: string;\n  backgroundColorSeed?: string;\n  children?: React.ReactNode;\n  className?: string;\n  /** @default false */\n  outlined?: boolean;\n  /** @default 48 */\n  size?: AvatarSize;\n  /** @default 'light' */\n  theme?: AvatarTheme;\n  /** @default 'thumbnail' */\n  type?: AvatarType;\n  'aria-label'?: string;\n}\n\nconst backwardsCompatibleSize = (size: AvatarSize): NumericAvatarSize => {\n  switch (size) {\n    case 'sm':\n      return 24;\n\n    case 'md':\n      return 48;\n\n    case 'lg':\n      return 72;\n\n    default:\n      return size;\n  }\n};\n\n/**\n * @deprecated Use `AvatarView` component instead\n */\nconst Avatar: React.FC<AvatarProps> = ({\n  backgroundColor = null,\n  backgroundColorSeed = null,\n  children = null,\n  className,\n  outlined = false,\n  size: sizeFromProps = 48,\n  theme = Theme.LIGHT,\n  type = 'thumbnail',\n  'aria-label': ariaLabel,\n}) => {\n  const backgroundColorFromSeed = useMemo<string | undefined>(\n    () =>\n      !backgroundColor && backgroundColorSeed\n        ? getBrandColorFromSeed(backgroundColorSeed)\n        : undefined,\n    [backgroundColor, backgroundColorSeed],\n  );\n\n  const size = backwardsCompatibleSize(sizeFromProps);\n\n  return (\n    <div\n      className={clsx('tw-avatar', className, `tw-avatar--${size}`, `tw-avatar--${type}`, {\n        'tw-avatar--outlined': outlined,\n        'tw-avatar--branded': Boolean(backgroundColorFromSeed),\n        'np-text-title-body': type === 'initials',\n      })}\n      aria-label={ariaLabel}\n    >\n      <div\n        className=\"tw-avatar__content\"\n        style={{\n          backgroundColor: backgroundColor || backgroundColorFromSeed,\n        }}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n\nexport default Avatar;\n"],"names":["backwardsCompatibleSize","size","Avatar","backgroundColor","backgroundColorSeed","children","className","outlined","sizeFromProps","theme","Theme","LIGHT","type","ariaLabel","backgroundColorFromSeed","useMemo","getBrandColorFromSeed","undefined","_jsx","clsx","Boolean","style"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCA,MAAMA,uBAAuB,GAAIC,IAAgB,IAAuB;AACtE,EAAA,QAAQA,IAAI;AACV,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE;AAEX,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE;AAEX,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE;AAEX,IAAA;AACE,MAAA,OAAOA,IAAI;AACf;AACF,CAAC;AAED;;AAEG;AACH,MAAMC,MAAM,GAA0BA,CAAC;AACrCC,EAAAA,eAAe,GAAG,IAAI;AACtBC,EAAAA,mBAAmB,GAAG,IAAI;AAC1BC,EAAAA,QAAQ,GAAG,IAAI;EACfC,SAAS;AACTC,EAAAA,QAAQ,GAAG,KAAK;EAChBN,IAAI,EAAEO,aAAa,GAAG,EAAE;SACxBC,OAAK,GAAGC,WAAK,CAACC,KAAK;AACnBC,EAAAA,IAAI,GAAG,WAAW;AAClB,EAAA,YAAY,EAAEC;AAAS,CACxB,KAAI;EACH,MAAMC,uBAAuB,GAAGC,aAAO,CACrC,MACE,CAACZ,eAAe,IAAIC,mBAAmB,GACnCY,4BAAqB,CAACZ,mBAAmB,CAAC,GAC1Ca,SAAS,EACf,CAACd,eAAe,EAAEC,mBAAmB,CAAC,CACvC;AAED,EAAA,MAAMH,IAAI,GAAGD,uBAAuB,CAACQ,aAAa,CAAC;AAEnD,EAAA,oBACEU,cAAA,CAAA,KAAA,EAAA;AACEZ,IAAAA,SAAS,EAAEa,SAAI,CAAC,WAAW,EAAEb,SAAS,EAAE,CAAA,WAAA,EAAcL,IAAI,CAAA,CAAE,EAAE,CAAA,WAAA,EAAcW,IAAI,EAAE,EAAE;AAClF,MAAA,qBAAqB,EAAEL,QAAQ;AAC/B,MAAA,oBAAoB,EAAEa,OAAO,CAACN,uBAAuB,CAAC;MACtD,oBAAoB,EAAEF,IAAI,KAAK;AAChC,KAAA,CAAE;AACH,IAAA,YAAA,EAAYC,SAAU;AAAAR,IAAAA,QAAA,eAEtBa,cAAA,CAAA,KAAA,EAAA;AACEZ,MAAAA,SAAS,EAAC,oBAAoB;AAC9Be,MAAAA,KAAK,EAAE;QACLlB,eAAe,EAAEA,eAAe,IAAIW;OACpC;AAAAT,MAAAA,QAAA,EAEDA;KACE;AACP,GAAK,CAAC;AAEV;;;;"}
+{"version":3,"file":"Avatar.js","sources":["../../src/avatar/Avatar.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useMemo } from 'react';\n\nimport { getBrandColorFromSeed, Theme } from '../common';\n\nimport Circle from '../common/circle';\n\ntype NumericAvatarSize = 24 | 40 | 48 | 56 | 72;\n\ntype LegacyAvatarSize = 'sm' | 'md' | 'lg';\n\nexport type AvatarSize = NumericAvatarSize | LegacyAvatarSize;\n\nexport type AvatarTheme = 'light' | 'dark';\n\nexport type AvatarType = 'thumbnail' | 'icon' | 'emoji' | 'initials';\n\n/**\n * @deprecated `Avatar` is deprecated please use `AvatarView` instead\n */\nexport interface AvatarProps {\n  backgroundColor?: string;\n  backgroundColorSeed?: string;\n  children?: React.ReactNode;\n  className?: string;\n  /** @default false */\n  outlined?: boolean;\n  /** @default 48 */\n  size?: AvatarSize;\n  /** @default 'light' */\n  theme?: AvatarTheme;\n  /** @default 'thumbnail' */\n  type?: AvatarType;\n  'aria-label'?: string;\n}\n\nconst backwardsCompatibleSize = (size: AvatarSize): NumericAvatarSize => {\n  switch (size) {\n    case 'sm':\n      return 24;\n\n    case 'md':\n      return 48;\n\n    case 'lg':\n      return 72;\n\n    default:\n      return size;\n  }\n};\n\n/**\n * @deprecated Use `AvatarView` component instead\n */\nconst Avatar: React.FC<AvatarProps> = ({\n  backgroundColor = null,\n  backgroundColorSeed = null,\n  children = null,\n  className,\n  outlined = false,\n  size: sizeFromProps = 48,\n  theme = Theme.LIGHT,\n  type = 'thumbnail',\n  'aria-label': ariaLabel,\n}) => {\n  const backgroundColorFromSeed = useMemo<string | undefined>(\n    () =>\n      !backgroundColor && backgroundColorSeed\n        ? getBrandColorFromSeed(backgroundColorSeed)\n        : undefined,\n    [backgroundColor, backgroundColorSeed],\n  );\n\n  const size = backwardsCompatibleSize(sizeFromProps);\n\n  return (\n    <div\n      className={clsx('tw-avatar', className, `tw-avatar--${size}`, `tw-avatar--${type}`, {\n        'tw-avatar--outlined': outlined,\n        'tw-avatar--branded': Boolean(backgroundColorFromSeed),\n        'np-text-title-body': type === 'initials',\n      })}\n      aria-label={ariaLabel}\n    >\n      <div\n        className=\"tw-avatar__content\"\n        style={{\n          backgroundColor: backgroundColor || backgroundColorFromSeed,\n        }}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n\nexport default Avatar;\n"],"names":["backwardsCompatibleSize","size","Avatar","backgroundColor","backgroundColorSeed","children","className","outlined","sizeFromProps","theme","Theme","LIGHT","type","ariaLabel","backgroundColorFromSeed","useMemo","getBrandColorFromSeed","undefined","_jsx","clsx","Boolean","style"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCA,MAAMA,uBAAuB,GAAIC,IAAgB,IAAuB;AACtE,EAAA,QAAQA,IAAI;AACV,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE;AAEX,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE;AAEX,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE;AAEX,IAAA;AACE,MAAA,OAAOA,IAAI;AACf;AACF,CAAC;AAED;;AAEG;AACH,MAAMC,MAAM,GAA0BA,CAAC;AACrCC,EAAAA,eAAe,GAAG,IAAI;AACtBC,EAAAA,mBAAmB,GAAG,IAAI;AAC1BC,EAAAA,QAAQ,GAAG,IAAI;EACfC,SAAS;AACTC,EAAAA,QAAQ,GAAG,KAAK;EAChBN,IAAI,EAAEO,aAAa,GAAG,EAAE;SACxBC,OAAK,GAAGC,WAAK,CAACC,KAAK;AACnBC,EAAAA,IAAI,GAAG,WAAW;AAClB,EAAA,YAAY,EAAEC;AAAS,CACxB,KAAI;EACH,MAAMC,uBAAuB,GAAGC,aAAO,CACrC,MACE,CAACZ,eAAe,IAAIC,mBAAmB,GACnCY,4BAAqB,CAACZ,mBAAmB,CAAC,GAC1Ca,SAAS,EACf,CAACd,eAAe,EAAEC,mBAAmB,CAAC,CACvC;AAED,EAAA,MAAMH,IAAI,GAAGD,uBAAuB,CAACQ,aAAa,CAAC;AAEnD,EAAA,oBACEU,cAAA,CAAA,KAAA,EAAA;AACEZ,IAAAA,SAAS,EAAEa,SAAI,CAAC,WAAW,EAAEb,SAAS,EAAE,CAAA,WAAA,EAAcL,IAAI,CAAA,CAAE,EAAE,CAAA,WAAA,EAAcW,IAAI,EAAE,EAAE;AAClF,MAAA,qBAAqB,EAAEL,QAAQ;AAC/B,MAAA,oBAAoB,EAAEa,OAAO,CAACN,uBAAuB,CAAC;MACtD,oBAAoB,EAAEF,IAAI,KAAK;AAChC,KAAA,CAAE;AACH,IAAA,YAAA,EAAYC,SAAU;AAAAR,IAAAA,QAAA,eAEtBa,cAAA,CAAA,KAAA,EAAA;AACEZ,MAAAA,SAAS,EAAC,oBAAoB;AAC9Be,MAAAA,KAAK,EAAE;QACLlB,eAAe,EAAEA,eAAe,IAAIW;OACpC;AAAAT,MAAAA,QAAA,EAEDA;KACE;AACP,GAAK,CAAC;AAEV;;;;"}

package/build/avatar/Avatar.mjs

@@ -2,8 +2,8 @@ import { clsx } from 'clsx';
 import { useMemo } from 'react';
 import { Theme } from '../common/theme.mjs';
 import '../common/direction.mjs';
+import '@transferwise/neptune-tokens';
 import '../common/propsValues/control.mjs';
-import '../common/propsValues/breakpoint.mjs';
 import '../common/propsValues/size.mjs';
 import '../common/propsValues/typography.mjs';
 import '../common/propsValues/width.mjs';
@@ -19,6 +19,7 @@ import '../common/propsValues/variant.mjs';
 import '../common/propsValues/scroll.mjs';
 import '../common/propsValues/markdownNodeType.mjs';
 import '../common/fileType.mjs';
+import '@transferwise/formatting';
 import { getBrandColorFromSeed } from '../common/colors.mjs';
 import '@transferwise/icons';
 import 'react-intl';

package/build/avatar/Avatar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.mjs","sources":["../../src/avatar/Avatar.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useMemo } from 'react';\n\nimport { getBrandColorFromSeed, Theme } from '../common';\n\nimport Circle from '../common/circle';\n\ntype NumericAvatarSize = 24 | 40 | 48 | 56 | 72;\n\ntype LegacyAvatarSize = 'sm' | 'md' | 'lg';\n\nexport type AvatarSize = NumericAvatarSize | LegacyAvatarSize;\n\nexport type AvatarTheme = 'light' | 'dark';\n\nexport type AvatarType = 'thumbnail' | 'icon' | 'emoji' | 'initials';\n\n/**\n * @deprecated `Avatar` is deprecated please use `AvatarView` instead\n */\nexport interface AvatarProps {\n  backgroundColor?: string;\n  backgroundColorSeed?: string;\n  children?: React.ReactNode;\n  className?: string;\n  /** @default false */\n  outlined?: boolean;\n  /** @default 48 */\n  size?: AvatarSize;\n  /** @default 'light' */\n  theme?: AvatarTheme;\n  /** @default 'thumbnail' */\n  type?: AvatarType;\n  'aria-label'?: string;\n}\n\nconst backwardsCompatibleSize = (size: AvatarSize): NumericAvatarSize => {\n  switch (size) {\n    case 'sm':\n      return 24;\n\n    case 'md':\n      return 48;\n\n    case 'lg':\n      return 72;\n\n    default:\n      return size;\n  }\n};\n\n/**\n * @deprecated Use `AvatarView` component instead\n */\nconst Avatar: React.FC<AvatarProps> = ({\n  backgroundColor = null,\n  backgroundColorSeed = null,\n  children = null,\n  className,\n  outlined = false,\n  size: sizeFromProps = 48,\n  theme = Theme.LIGHT,\n  type = 'thumbnail',\n  'aria-label': ariaLabel,\n}) => {\n  const backgroundColorFromSeed = useMemo<string | undefined>(\n    () =>\n      !backgroundColor && backgroundColorSeed\n        ? getBrandColorFromSeed(backgroundColorSeed)\n        : undefined,\n    [backgroundColor, backgroundColorSeed],\n  );\n\n  const size = backwardsCompatibleSize(sizeFromProps);\n\n  return (\n    <div\n      className={clsx('tw-avatar', className, `tw-avatar--${size}`, `tw-avatar--${type}`, {\n        'tw-avatar--outlined': outlined,\n        'tw-avatar--branded': Boolean(backgroundColorFromSeed),\n        'np-text-title-body': type === 'initials',\n      })}\n      aria-label={ariaLabel}\n    >\n      <div\n        className=\"tw-avatar__content\"\n        style={{\n          backgroundColor: backgroundColor || backgroundColorFromSeed,\n        }}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n\nexport default Avatar;\n"],"names":["backwardsCompatibleSize","size","Avatar","backgroundColor","backgroundColorSeed","children","className","outlined","sizeFromProps","theme","Theme","LIGHT","type","ariaLabel","backgroundColorFromSeed","useMemo","getBrandColorFromSeed","undefined","_jsx","clsx","Boolean","style"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCA,MAAMA,uBAAuB,GAAIC,IAAgB,IAAuB;AACtE,EAAA,QAAQA,IAAI;AACV,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE;AAEX,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE;AAEX,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE;AAEX,IAAA;AACE,MAAA,OAAOA,IAAI;AACf;AACF,CAAC;AAED;;AAEG;AACH,MAAMC,MAAM,GAA0BA,CAAC;AACrCC,EAAAA,eAAe,GAAG,IAAI;AACtBC,EAAAA,mBAAmB,GAAG,IAAI;AAC1BC,EAAAA,QAAQ,GAAG,IAAI;EACfC,SAAS;AACTC,EAAAA,QAAQ,GAAG,KAAK;EAChBN,IAAI,EAAEO,aAAa,GAAG,EAAE;EACxBC,KAAK,GAAGC,KAAK,CAACC,KAAK;AACnBC,EAAAA,IAAI,GAAG,WAAW;AAClB,EAAA,YAAY,EAAEC;AAAS,CACxB,KAAI;EACH,MAAMC,uBAAuB,GAAGC,OAAO,CACrC,MACE,CAACZ,eAAe,IAAIC,mBAAmB,GACnCY,qBAAqB,CAACZ,mBAAmB,CAAC,GAC1Ca,SAAS,EACf,CAACd,eAAe,EAAEC,mBAAmB,CAAC,CACvC;AAED,EAAA,MAAMH,IAAI,GAAGD,uBAAuB,CAACQ,aAAa,CAAC;AAEnD,EAAA,oBACEU,GAAA,CAAA,KAAA,EAAA;AACEZ,IAAAA,SAAS,EAAEa,IAAI,CAAC,WAAW,EAAEb,SAAS,EAAE,CAAA,WAAA,EAAcL,IAAI,CAAA,CAAE,EAAE,CAAA,WAAA,EAAcW,IAAI,EAAE,EAAE;AAClF,MAAA,qBAAqB,EAAEL,QAAQ;AAC/B,MAAA,oBAAoB,EAAEa,OAAO,CAACN,uBAAuB,CAAC;MACtD,oBAAoB,EAAEF,IAAI,KAAK;AAChC,KAAA,CAAE;AACH,IAAA,YAAA,EAAYC,SAAU;AAAAR,IAAAA,QAAA,eAEtBa,GAAA,CAAA,KAAA,EAAA;AACEZ,MAAAA,SAAS,EAAC,oBAAoB;AAC9Be,MAAAA,KAAK,EAAE;QACLlB,eAAe,EAAEA,eAAe,IAAIW;OACpC;AAAAT,MAAAA,QAAA,EAEDA;KACE;AACP,GAAK,CAAC;AAEV;;;;"}
+{"version":3,"file":"Avatar.mjs","sources":["../../src/avatar/Avatar.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useMemo } from 'react';\n\nimport { getBrandColorFromSeed, Theme } from '../common';\n\nimport Circle from '../common/circle';\n\ntype NumericAvatarSize = 24 | 40 | 48 | 56 | 72;\n\ntype LegacyAvatarSize = 'sm' | 'md' | 'lg';\n\nexport type AvatarSize = NumericAvatarSize | LegacyAvatarSize;\n\nexport type AvatarTheme = 'light' | 'dark';\n\nexport type AvatarType = 'thumbnail' | 'icon' | 'emoji' | 'initials';\n\n/**\n * @deprecated `Avatar` is deprecated please use `AvatarView` instead\n */\nexport interface AvatarProps {\n  backgroundColor?: string;\n  backgroundColorSeed?: string;\n  children?: React.ReactNode;\n  className?: string;\n  /** @default false */\n  outlined?: boolean;\n  /** @default 48 */\n  size?: AvatarSize;\n  /** @default 'light' */\n  theme?: AvatarTheme;\n  /** @default 'thumbnail' */\n  type?: AvatarType;\n  'aria-label'?: string;\n}\n\nconst backwardsCompatibleSize = (size: AvatarSize): NumericAvatarSize => {\n  switch (size) {\n    case 'sm':\n      return 24;\n\n    case 'md':\n      return 48;\n\n    case 'lg':\n      return 72;\n\n    default:\n      return size;\n  }\n};\n\n/**\n * @deprecated Use `AvatarView` component instead\n */\nconst Avatar: React.FC<AvatarProps> = ({\n  backgroundColor = null,\n  backgroundColorSeed = null,\n  children = null,\n  className,\n  outlined = false,\n  size: sizeFromProps = 48,\n  theme = Theme.LIGHT,\n  type = 'thumbnail',\n  'aria-label': ariaLabel,\n}) => {\n  const backgroundColorFromSeed = useMemo<string | undefined>(\n    () =>\n      !backgroundColor && backgroundColorSeed\n        ? getBrandColorFromSeed(backgroundColorSeed)\n        : undefined,\n    [backgroundColor, backgroundColorSeed],\n  );\n\n  const size = backwardsCompatibleSize(sizeFromProps);\n\n  return (\n    <div\n      className={clsx('tw-avatar', className, `tw-avatar--${size}`, `tw-avatar--${type}`, {\n        'tw-avatar--outlined': outlined,\n        'tw-avatar--branded': Boolean(backgroundColorFromSeed),\n        'np-text-title-body': type === 'initials',\n      })}\n      aria-label={ariaLabel}\n    >\n      <div\n        className=\"tw-avatar__content\"\n        style={{\n          backgroundColor: backgroundColor || backgroundColorFromSeed,\n        }}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n\nexport default Avatar;\n"],"names":["backwardsCompatibleSize","size","Avatar","backgroundColor","backgroundColorSeed","children","className","outlined","sizeFromProps","theme","Theme","LIGHT","type","ariaLabel","backgroundColorFromSeed","useMemo","getBrandColorFromSeed","undefined","_jsx","clsx","Boolean","style"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCA,MAAMA,uBAAuB,GAAIC,IAAgB,IAAuB;AACtE,EAAA,QAAQA,IAAI;AACV,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE;AAEX,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE;AAEX,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE;AAEX,IAAA;AACE,MAAA,OAAOA,IAAI;AACf;AACF,CAAC;AAED;;AAEG;AACH,MAAMC,MAAM,GAA0BA,CAAC;AACrCC,EAAAA,eAAe,GAAG,IAAI;AACtBC,EAAAA,mBAAmB,GAAG,IAAI;AAC1BC,EAAAA,QAAQ,GAAG,IAAI;EACfC,SAAS;AACTC,EAAAA,QAAQ,GAAG,KAAK;EAChBN,IAAI,EAAEO,aAAa,GAAG,EAAE;EACxBC,KAAK,GAAGC,KAAK,CAACC,KAAK;AACnBC,EAAAA,IAAI,GAAG,WAAW;AAClB,EAAA,YAAY,EAAEC;AAAS,CACxB,KAAI;EACH,MAAMC,uBAAuB,GAAGC,OAAO,CACrC,MACE,CAACZ,eAAe,IAAIC,mBAAmB,GACnCY,qBAAqB,CAACZ,mBAAmB,CAAC,GAC1Ca,SAAS,EACf,CAACd,eAAe,EAAEC,mBAAmB,CAAC,CACvC;AAED,EAAA,MAAMH,IAAI,GAAGD,uBAAuB,CAACQ,aAAa,CAAC;AAEnD,EAAA,oBACEU,GAAA,CAAA,KAAA,EAAA;AACEZ,IAAAA,SAAS,EAAEa,IAAI,CAAC,WAAW,EAAEb,SAAS,EAAE,CAAA,WAAA,EAAcL,IAAI,CAAA,CAAE,EAAE,CAAA,WAAA,EAAcW,IAAI,EAAE,EAAE;AAClF,MAAA,qBAAqB,EAAEL,QAAQ;AAC/B,MAAA,oBAAoB,EAAEa,OAAO,CAACN,uBAAuB,CAAC;MACtD,oBAAoB,EAAEF,IAAI,KAAK;AAChC,KAAA,CAAE;AACH,IAAA,YAAA,EAAYC,SAAU;AAAAR,IAAAA,QAAA,eAEtBa,GAAA,CAAA,KAAA,EAAA;AACEZ,MAAAA,SAAS,EAAC,oBAAoB;AAC9Be,MAAAA,KAAK,EAAE;QACLlB,eAAe,EAAEA,eAAe,IAAIW;OACpC;AAAAT,MAAAA,QAAA,EAEDA;KACE;AACP,GAAK,CAAC;AAEV;;;;"}

package/build/avatarLayout/AvatarLayout.js

@@ -7,7 +7,7 @@ var AvatarView = require('../avatarView/AvatarView.js');
 require('@transferwise/neptune-validation');
 require('react');
 var useDirection = require('../common/hooks/useDirection/useDirection.js');
-require('../common/propsValues/breakpoint.js');
+require('@transferwise/neptune-tokens');
 var jsxRuntime = require('react/jsx-runtime');
 
 function AvatarLayout({

package/build/avatarLayout/AvatarLayout.mjs

@@ -3,7 +3,7 @@ import AvatarView from '../avatarView/AvatarView.mjs';
 import '@transferwise/neptune-validation';
 import 'react';
 import { useDirection } from '../common/hooks/useDirection/useDirection.mjs';
-import '../common/propsValues/breakpoint.mjs';
+import '@transferwise/neptune-tokens';
 import { jsx } from 'react/jsx-runtime';
 
 function AvatarLayout({

package/build/avatarView/AvatarView.js

@@ -11,8 +11,8 @@ var React = require('react');
 var clsx = require('clsx');
 require('../common/theme.js');
 require('../common/direction.js');
+require('@transferwise/neptune-tokens');
 require('../common/propsValues/control.js');
-require('../common/propsValues/breakpoint.js');
 require('../common/propsValues/size.js');
 require('../common/propsValues/typography.js');
 require('../common/propsValues/width.js');
@@ -28,6 +28,7 @@ require('../common/propsValues/variant.js');
 require('../common/propsValues/scroll.js');
 require('../common/propsValues/markdownNodeType.js');
 require('../common/fileType.js');
+require('@transferwise/formatting');
 var initials = require('../common/initials.js');
 var icons = require('@transferwise/icons');
 require('react-intl');

package/build/avatarView/AvatarView.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarView.js","sources":["../../src/avatarView/AvatarView.tsx"],"sourcesContent":["import Badge, { BadgeAssets, BadgeProps, BadgeAssetsProps } from '../badge';\nimport Dot, { DotProps } from './Dot';\nimport Circle from '../common/circle';\nimport Image from '../image';\nimport { HTMLAttributes, PropsWithChildren, useState } from 'react';\nimport { clsx } from 'clsx';\nimport { getInitials, ProfileType, ProfileTypeBusiness, ProfileTypePersonal } from '../common';\nimport {\n  Briefcase as BusinessProfileIcon,\n  Profile as PersonalProfileIcon,\n} from '@transferwise/icons';\n\nexport type AvatarViewBadgeProps = Omit<BadgeAssetsProps, 'size'> &\n  Pick<BadgeProps, 'aria-label'> & {\n    /**\n     * Custom badge content\n     */\n    asset?: React.ReactNode;\n  };\n\nexport type Props = {\n  imgSrc?: string | null;\n  /**\n   * Entity name (person (profile or recipient) or business name), it will be boilded down to 1 or 2 chars (initials)\n   */\n  profileName?: string | null;\n  profileType?: ProfileTypeBusiness | ProfileTypePersonal;\n  size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;\n  badge?: AvatarViewBadgeProps;\n  interactive?: boolean;\n  selected?: boolean;\n  style?: Pick<React.CSSProperties, 'border' | 'backgroundColor' | 'color'>;\n} & Pick<\n  HTMLAttributes<HTMLDivElement>,\n  'id' | 'className' | 'children' | 'role' | 'aria-label' | 'aria-labelledby' | 'aria-hidden'\n>;\n\nfunction AvatarView({\n  children = undefined,\n  size = 48,\n  selected,\n  badge,\n  interactive = false,\n  className,\n  style,\n  imgSrc,\n  profileType,\n  profileName,\n  ...restProps\n}: Props) {\n  return (\n    <Circle\n      size={size}\n      fixedSize\n      className={clsx(\n        'np-avatar-view',\n        interactive ? 'np-avatar-view-interactive' : 'np-avatar-view-non-interactive',\n        { 'np-avatar-view-selected': selected },\n        className,\n      )}\n      {...restProps}\n    >\n      <Badges avatar={{ size, selected }} {...badge}>\n        <Circle\n          size={size}\n          fixedSize\n          className={clsx('np-avatar-view-content')}\n          enableBorder={!interactive || selected}\n          style={{\n            ...(selected && {\n              '--circle-border-color': 'var(--color-interactive-primary)',\n              '--circle-border-width': `${MAP_SELECTED_BORDER_WIDTH[size]}px`,\n            }),\n            ...style,\n          }}\n        >\n          <AvatarViewContent {...{ imgSrc, profileType, profileName }}>\n            {children}\n          </AvatarViewContent>\n        </Circle>\n      </Badges>\n    </Circle>\n  );\n}\n\n/** Size of badge depends on size of avatar */\nconst MAP_BADGE_ASSET_SIZE = {\n  16: 16,\n  24: 16,\n  32: 16,\n  40: 16,\n  48: 16,\n  56: 24,\n  72: 24,\n} satisfies Record<number, BadgeAssetsProps['size']>;\n\n/** Border width for `selected` state determined by avatar size */\nconst MAP_SELECTED_BORDER_WIDTH = {\n  16: 1,\n  24: 1,\n  32: 1,\n  40: 2,\n  48: 2,\n  56: 2,\n  72: 2,\n};\n\n/** Certain sizes of AvatarView has a custom offset for badge */\nconst MAP_BADGE_POSITION = {\n  24: -6,\n  32: -4,\n};\n\ntype BadgesProps = AvatarViewBadgeProps &\n  PropsWithChildren<{\n    avatar: Pick<Props, 'selected' | 'size'>;\n  }>;\n\n/**\n * Adds build-in badges to AvatarView\n */\nfunction Badges({\n  children,\n  avatar,\n  'aria-label': ariaLabel,\n  asset: customBadge,\n  ...badgeAssets\n}: BadgesProps) {\n  const { size = 48, selected } = avatar;\n  const anyBadge = Object.values({ customBadge, ...badgeAssets }).filter(Boolean).length > 0;\n\n  if ((!anyBadge && !selected) || size <= 16) {\n    return children;\n  }\n\n  if (badgeAssets.type === 'notification' || badgeAssets.type === 'online') {\n    return (\n      <Dot avatarSize={size} variant={badgeAssets.type === 'online' ? 'online' : 'notification'}>\n        {children}\n      </Dot>\n    );\n  }\n\n  const badgeSize: BadgeAssetsProps['size'] = MAP_BADGE_ASSET_SIZE[size];\n  return (\n    <Badge\n      aria-label={ariaLabel}\n      size={badgeSize}\n      badge={\n        customBadge ? (\n          <Circle fixedSize size={badgeSize}>\n            {customBadge}\n          </Circle>\n        ) : (\n          <BadgeAssets {...(selected ? { status: 'positive' } : badgeAssets)} size={badgeSize} />\n        )\n      }\n      style={{\n        // @ts-expect-error CSS custom props allowed\n        '--badge-content-position': `${MAP_BADGE_POSITION[size] ?? 0}px`,\n      }}\n    >\n      {children}\n    </Badge>\n  );\n}\n\nfunction AvatarViewContent({\n  children,\n  imgSrc,\n  profileName: name,\n  profileType: type,\n}: PropsWithChildren<Pick<Props, 'imgSrc' | 'profileName' | 'profileType'>>) {\n  const [tryLoadImage, setTryLoadImage] = useState(true);\n  if (children === undefined) {\n    if (imgSrc && tryLoadImage) {\n      return <Image src={imgSrc} alt=\"\" onError={() => setTryLoadImage(false)} />;\n    }\n    if (type) {\n      return type === ProfileType.BUSINESS ? <BusinessProfileIcon /> : <PersonalProfileIcon />;\n    }\n    if (name) {\n      return getInitials(name);\n    }\n    return <PersonalProfileIcon />;\n  }\n  return children;\n}\n\nexport default AvatarView;\n"],"names":["AvatarView","children","undefined","size","selected","badge","interactive","className","style","imgSrc","profileType","profileName","restProps","_jsx","Circle","fixedSize","clsx","Badges","avatar","enableBorder","MAP_SELECTED_BORDER_WIDTH","AvatarViewContent","MAP_BADGE_ASSET_SIZE","MAP_BADGE_POSITION","ariaLabel","asset","customBadge","badgeAssets","anyBadge","Object","values","filter","Boolean","length","type","Dot","avatarSize","variant","badgeSize","Badge","BadgeAssets","status","name","tryLoadImage","setTryLoadImage","useState","Image","src","alt","onError","ProfileType","BUSINESS","BusinessProfileIcon","PersonalProfileIcon","getInitials"],"mappings":"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"}
+{"version":3,"file":"AvatarView.js","sources":["../../src/avatarView/AvatarView.tsx"],"sourcesContent":["import Badge, { BadgeAssets, BadgeProps, BadgeAssetsProps } from '../badge';\nimport Dot, { DotProps } from './Dot';\nimport Circle from '../common/circle';\nimport Image from '../image';\nimport { HTMLAttributes, PropsWithChildren, useState } from 'react';\nimport { clsx } from 'clsx';\nimport { getInitials, ProfileType, ProfileTypeBusiness, ProfileTypePersonal } from '../common';\nimport {\n  Briefcase as BusinessProfileIcon,\n  Profile as PersonalProfileIcon,\n} from '@transferwise/icons';\n\nexport type AvatarViewBadgeProps = Omit<BadgeAssetsProps, 'size'> &\n  Pick<BadgeProps, 'aria-label'> & {\n    /**\n     * Custom badge content\n     */\n    asset?: React.ReactNode;\n  };\n\nexport type Props = {\n  imgSrc?: string | null;\n  /**\n   * Entity name (person (profile or recipient) or business name), it will be boilded down to 1 or 2 chars (initials)\n   */\n  profileName?: string | null;\n  profileType?: ProfileTypeBusiness | ProfileTypePersonal;\n  size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;\n  badge?: AvatarViewBadgeProps;\n  interactive?: boolean;\n  selected?: boolean;\n  style?: Pick<React.CSSProperties, 'border' | 'backgroundColor' | 'color'>;\n} & Pick<\n  HTMLAttributes<HTMLDivElement>,\n  'id' | 'className' | 'children' | 'role' | 'aria-label' | 'aria-labelledby' | 'aria-hidden'\n>;\n\nfunction AvatarView({\n  children = undefined,\n  size = 48,\n  selected,\n  badge,\n  interactive = false,\n  className,\n  style,\n  imgSrc,\n  profileType,\n  profileName,\n  ...restProps\n}: Props) {\n  return (\n    <Circle\n      size={size}\n      fixedSize\n      className={clsx(\n        'np-avatar-view',\n        interactive ? 'np-avatar-view-interactive' : 'np-avatar-view-non-interactive',\n        { 'np-avatar-view-selected': selected },\n        className,\n      )}\n      {...restProps}\n    >\n      <Badges avatar={{ size, selected }} {...badge}>\n        <Circle\n          size={size}\n          fixedSize\n          className={clsx('np-avatar-view-content')}\n          enableBorder={!interactive || selected}\n          style={{\n            ...(selected && {\n              '--circle-border-color': 'var(--color-interactive-primary)',\n              '--circle-border-width': `${MAP_SELECTED_BORDER_WIDTH[size]}px`,\n            }),\n            ...style,\n          }}\n        >\n          <AvatarViewContent {...{ imgSrc, profileType, profileName }}>\n            {children}\n          </AvatarViewContent>\n        </Circle>\n      </Badges>\n    </Circle>\n  );\n}\n\n/** Size of badge depends on size of avatar */\nconst MAP_BADGE_ASSET_SIZE = {\n  16: 16,\n  24: 16,\n  32: 16,\n  40: 16,\n  48: 16,\n  56: 24,\n  72: 24,\n} satisfies Record<number, BadgeAssetsProps['size']>;\n\n/** Border width for `selected` state determined by avatar size */\nconst MAP_SELECTED_BORDER_WIDTH = {\n  16: 1,\n  24: 1,\n  32: 1,\n  40: 2,\n  48: 2,\n  56: 2,\n  72: 2,\n};\n\n/** Certain sizes of AvatarView has a custom offset for badge */\nconst MAP_BADGE_POSITION = {\n  24: -6,\n  32: -4,\n};\n\ntype BadgesProps = AvatarViewBadgeProps &\n  PropsWithChildren<{\n    avatar: Pick<Props, 'selected' | 'size'>;\n  }>;\n\n/**\n * Adds build-in badges to AvatarView\n */\nfunction Badges({\n  children,\n  avatar,\n  'aria-label': ariaLabel,\n  asset: customBadge,\n  ...badgeAssets\n}: BadgesProps) {\n  const { size = 48, selected } = avatar;\n  const anyBadge = Object.values({ customBadge, ...badgeAssets }).filter(Boolean).length > 0;\n\n  if ((!anyBadge && !selected) || size <= 16) {\n    return children;\n  }\n\n  if (badgeAssets.type === 'notification' || badgeAssets.type === 'online') {\n    return (\n      <Dot avatarSize={size} variant={badgeAssets.type === 'online' ? 'online' : 'notification'}>\n        {children}\n      </Dot>\n    );\n  }\n\n  const badgeSize: BadgeAssetsProps['size'] = MAP_BADGE_ASSET_SIZE[size];\n  return (\n    <Badge\n      aria-label={ariaLabel}\n      size={badgeSize}\n      badge={\n        customBadge ? (\n          <Circle fixedSize size={badgeSize}>\n            {customBadge}\n          </Circle>\n        ) : (\n          <BadgeAssets {...(selected ? { status: 'positive' } : badgeAssets)} size={badgeSize} />\n        )\n      }\n      style={{\n        // @ts-expect-error CSS custom props allowed\n        '--badge-content-position': `${MAP_BADGE_POSITION[size] ?? 0}px`,\n      }}\n    >\n      {children}\n    </Badge>\n  );\n}\n\nfunction AvatarViewContent({\n  children,\n  imgSrc,\n  profileName: name,\n  profileType: type,\n}: PropsWithChildren<Pick<Props, 'imgSrc' | 'profileName' | 'profileType'>>) {\n  const [tryLoadImage, setTryLoadImage] = useState(true);\n  if (children === undefined) {\n    if (imgSrc && tryLoadImage) {\n      return <Image src={imgSrc} alt=\"\" onError={() => setTryLoadImage(false)} />;\n    }\n    if (type) {\n      return type === ProfileType.BUSINESS ? <BusinessProfileIcon /> : <PersonalProfileIcon />;\n    }\n    if (name) {\n      return getInitials(name);\n    }\n    return <PersonalProfileIcon />;\n  }\n  return children;\n}\n\nexport default AvatarView;\n"],"names":["AvatarView","children","undefined","size","selected","badge","interactive","className","style","imgSrc","profileType","profileName","restProps","_jsx","Circle","fixedSize","clsx","Badges","avatar","enableBorder","MAP_SELECTED_BORDER_WIDTH","AvatarViewContent","MAP_BADGE_ASSET_SIZE","MAP_BADGE_POSITION","ariaLabel","asset","customBadge","badgeAssets","anyBadge","Object","values","filter","Boolean","length","type","Dot","avatarSize","variant","badgeSize","Badge","BadgeAssets","status","name","tryLoadImage","setTryLoadImage","useState","Image","src","alt","onError","ProfileType","BUSINESS","BusinessProfileIcon","PersonalProfileIcon","getInitials"],"mappings":"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"}

package/build/avatarView/AvatarView.mjs

@@ -7,8 +7,8 @@ import { useState } from 'react';
 import { clsx } from 'clsx';
 import '../common/theme.mjs';
 import '../common/direction.mjs';
+import '@transferwise/neptune-tokens';
 import '../common/propsValues/control.mjs';
-import '../common/propsValues/breakpoint.mjs';
 import '../common/propsValues/size.mjs';
 import '../common/propsValues/typography.mjs';
 import '../common/propsValues/width.mjs';
@@ -24,6 +24,7 @@ import '../common/propsValues/variant.mjs';
 import '../common/propsValues/scroll.mjs';
 import '../common/propsValues/markdownNodeType.mjs';
 import '../common/fileType.mjs';
+import '@transferwise/formatting';
 import { getInitials } from '../common/initials.mjs';
 import { Briefcase, Profile } from '@transferwise/icons';
 import 'react-intl';

package/build/avatarView/AvatarView.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarView.mjs","sources":["../../src/avatarView/AvatarView.tsx"],"sourcesContent":["import Badge, { BadgeAssets, BadgeProps, BadgeAssetsProps } from '../badge';\nimport Dot, { DotProps } from './Dot';\nimport Circle from '../common/circle';\nimport Image from '../image';\nimport { HTMLAttributes, PropsWithChildren, useState } from 'react';\nimport { clsx } from 'clsx';\nimport { getInitials, ProfileType, ProfileTypeBusiness, ProfileTypePersonal } from '../common';\nimport {\n  Briefcase as BusinessProfileIcon,\n  Profile as PersonalProfileIcon,\n} from '@transferwise/icons';\n\nexport type AvatarViewBadgeProps = Omit<BadgeAssetsProps, 'size'> &\n  Pick<BadgeProps, 'aria-label'> & {\n    /**\n     * Custom badge content\n     */\n    asset?: React.ReactNode;\n  };\n\nexport type Props = {\n  imgSrc?: string | null;\n  /**\n   * Entity name (person (profile or recipient) or business name), it will be boilded down to 1 or 2 chars (initials)\n   */\n  profileName?: string | null;\n  profileType?: ProfileTypeBusiness | ProfileTypePersonal;\n  size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;\n  badge?: AvatarViewBadgeProps;\n  interactive?: boolean;\n  selected?: boolean;\n  style?: Pick<React.CSSProperties, 'border' | 'backgroundColor' | 'color'>;\n} & Pick<\n  HTMLAttributes<HTMLDivElement>,\n  'id' | 'className' | 'children' | 'role' | 'aria-label' | 'aria-labelledby' | 'aria-hidden'\n>;\n\nfunction AvatarView({\n  children = undefined,\n  size = 48,\n  selected,\n  badge,\n  interactive = false,\n  className,\n  style,\n  imgSrc,\n  profileType,\n  profileName,\n  ...restProps\n}: Props) {\n  return (\n    <Circle\n      size={size}\n      fixedSize\n      className={clsx(\n        'np-avatar-view',\n        interactive ? 'np-avatar-view-interactive' : 'np-avatar-view-non-interactive',\n        { 'np-avatar-view-selected': selected },\n        className,\n      )}\n      {...restProps}\n    >\n      <Badges avatar={{ size, selected }} {...badge}>\n        <Circle\n          size={size}\n          fixedSize\n          className={clsx('np-avatar-view-content')}\n          enableBorder={!interactive || selected}\n          style={{\n            ...(selected && {\n              '--circle-border-color': 'var(--color-interactive-primary)',\n              '--circle-border-width': `${MAP_SELECTED_BORDER_WIDTH[size]}px`,\n            }),\n            ...style,\n          }}\n        >\n          <AvatarViewContent {...{ imgSrc, profileType, profileName }}>\n            {children}\n          </AvatarViewContent>\n        </Circle>\n      </Badges>\n    </Circle>\n  );\n}\n\n/** Size of badge depends on size of avatar */\nconst MAP_BADGE_ASSET_SIZE = {\n  16: 16,\n  24: 16,\n  32: 16,\n  40: 16,\n  48: 16,\n  56: 24,\n  72: 24,\n} satisfies Record<number, BadgeAssetsProps['size']>;\n\n/** Border width for `selected` state determined by avatar size */\nconst MAP_SELECTED_BORDER_WIDTH = {\n  16: 1,\n  24: 1,\n  32: 1,\n  40: 2,\n  48: 2,\n  56: 2,\n  72: 2,\n};\n\n/** Certain sizes of AvatarView has a custom offset for badge */\nconst MAP_BADGE_POSITION = {\n  24: -6,\n  32: -4,\n};\n\ntype BadgesProps = AvatarViewBadgeProps &\n  PropsWithChildren<{\n    avatar: Pick<Props, 'selected' | 'size'>;\n  }>;\n\n/**\n * Adds build-in badges to AvatarView\n */\nfunction Badges({\n  children,\n  avatar,\n  'aria-label': ariaLabel,\n  asset: customBadge,\n  ...badgeAssets\n}: BadgesProps) {\n  const { size = 48, selected } = avatar;\n  const anyBadge = Object.values({ customBadge, ...badgeAssets }).filter(Boolean).length > 0;\n\n  if ((!anyBadge && !selected) || size <= 16) {\n    return children;\n  }\n\n  if (badgeAssets.type === 'notification' || badgeAssets.type === 'online') {\n    return (\n      <Dot avatarSize={size} variant={badgeAssets.type === 'online' ? 'online' : 'notification'}>\n        {children}\n      </Dot>\n    );\n  }\n\n  const badgeSize: BadgeAssetsProps['size'] = MAP_BADGE_ASSET_SIZE[size];\n  return (\n    <Badge\n      aria-label={ariaLabel}\n      size={badgeSize}\n      badge={\n        customBadge ? (\n          <Circle fixedSize size={badgeSize}>\n            {customBadge}\n          </Circle>\n        ) : (\n          <BadgeAssets {...(selected ? { status: 'positive' } : badgeAssets)} size={badgeSize} />\n        )\n      }\n      style={{\n        // @ts-expect-error CSS custom props allowed\n        '--badge-content-position': `${MAP_BADGE_POSITION[size] ?? 0}px`,\n      }}\n    >\n      {children}\n    </Badge>\n  );\n}\n\nfunction AvatarViewContent({\n  children,\n  imgSrc,\n  profileName: name,\n  profileType: type,\n}: PropsWithChildren<Pick<Props, 'imgSrc' | 'profileName' | 'profileType'>>) {\n  const [tryLoadImage, setTryLoadImage] = useState(true);\n  if (children === undefined) {\n    if (imgSrc && tryLoadImage) {\n      return <Image src={imgSrc} alt=\"\" onError={() => setTryLoadImage(false)} />;\n    }\n    if (type) {\n      return type === ProfileType.BUSINESS ? <BusinessProfileIcon /> : <PersonalProfileIcon />;\n    }\n    if (name) {\n      return getInitials(name);\n    }\n    return <PersonalProfileIcon />;\n  }\n  return children;\n}\n\nexport default AvatarView;\n"],"names":["AvatarView","children","undefined","size","selected","badge","interactive","className","style","imgSrc","profileType","profileName","restProps","_jsx","Circle","fixedSize","clsx","Badges","avatar","enableBorder","MAP_SELECTED_BORDER_WIDTH","AvatarViewContent","MAP_BADGE_ASSET_SIZE","MAP_BADGE_POSITION","ariaLabel","asset","customBadge","badgeAssets","anyBadge","Object","values","filter","Boolean","length","type","Dot","avatarSize","variant","badgeSize","Badge","BadgeAssets","status","name","tryLoadImage","setTryLoadImage","useState","Image","src","alt","onError","ProfileType","BUSINESS","BusinessProfileIcon","PersonalProfileIcon","getInitials"],"mappings":"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"}
+{"version":3,"file":"AvatarView.mjs","sources":["../../src/avatarView/AvatarView.tsx"],"sourcesContent":["import Badge, { BadgeAssets, BadgeProps, BadgeAssetsProps } from '../badge';\nimport Dot, { DotProps } from './Dot';\nimport Circle from '../common/circle';\nimport Image from '../image';\nimport { HTMLAttributes, PropsWithChildren, useState } from 'react';\nimport { clsx } from 'clsx';\nimport { getInitials, ProfileType, ProfileTypeBusiness, ProfileTypePersonal } from '../common';\nimport {\n  Briefcase as BusinessProfileIcon,\n  Profile as PersonalProfileIcon,\n} from '@transferwise/icons';\n\nexport type AvatarViewBadgeProps = Omit<BadgeAssetsProps, 'size'> &\n  Pick<BadgeProps, 'aria-label'> & {\n    /**\n     * Custom badge content\n     */\n    asset?: React.ReactNode;\n  };\n\nexport type Props = {\n  imgSrc?: string | null;\n  /**\n   * Entity name (person (profile or recipient) or business name), it will be boilded down to 1 or 2 chars (initials)\n   */\n  profileName?: string | null;\n  profileType?: ProfileTypeBusiness | ProfileTypePersonal;\n  size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;\n  badge?: AvatarViewBadgeProps;\n  interactive?: boolean;\n  selected?: boolean;\n  style?: Pick<React.CSSProperties, 'border' | 'backgroundColor' | 'color'>;\n} & Pick<\n  HTMLAttributes<HTMLDivElement>,\n  'id' | 'className' | 'children' | 'role' | 'aria-label' | 'aria-labelledby' | 'aria-hidden'\n>;\n\nfunction AvatarView({\n  children = undefined,\n  size = 48,\n  selected,\n  badge,\n  interactive = false,\n  className,\n  style,\n  imgSrc,\n  profileType,\n  profileName,\n  ...restProps\n}: Props) {\n  return (\n    <Circle\n      size={size}\n      fixedSize\n      className={clsx(\n        'np-avatar-view',\n        interactive ? 'np-avatar-view-interactive' : 'np-avatar-view-non-interactive',\n        { 'np-avatar-view-selected': selected },\n        className,\n      )}\n      {...restProps}\n    >\n      <Badges avatar={{ size, selected }} {...badge}>\n        <Circle\n          size={size}\n          fixedSize\n          className={clsx('np-avatar-view-content')}\n          enableBorder={!interactive || selected}\n          style={{\n            ...(selected && {\n              '--circle-border-color': 'var(--color-interactive-primary)',\n              '--circle-border-width': `${MAP_SELECTED_BORDER_WIDTH[size]}px`,\n            }),\n            ...style,\n          }}\n        >\n          <AvatarViewContent {...{ imgSrc, profileType, profileName }}>\n            {children}\n          </AvatarViewContent>\n        </Circle>\n      </Badges>\n    </Circle>\n  );\n}\n\n/** Size of badge depends on size of avatar */\nconst MAP_BADGE_ASSET_SIZE = {\n  16: 16,\n  24: 16,\n  32: 16,\n  40: 16,\n  48: 16,\n  56: 24,\n  72: 24,\n} satisfies Record<number, BadgeAssetsProps['size']>;\n\n/** Border width for `selected` state determined by avatar size */\nconst MAP_SELECTED_BORDER_WIDTH = {\n  16: 1,\n  24: 1,\n  32: 1,\n  40: 2,\n  48: 2,\n  56: 2,\n  72: 2,\n};\n\n/** Certain sizes of AvatarView has a custom offset for badge */\nconst MAP_BADGE_POSITION = {\n  24: -6,\n  32: -4,\n};\n\ntype BadgesProps = AvatarViewBadgeProps &\n  PropsWithChildren<{\n    avatar: Pick<Props, 'selected' | 'size'>;\n  }>;\n\n/**\n * Adds build-in badges to AvatarView\n */\nfunction Badges({\n  children,\n  avatar,\n  'aria-label': ariaLabel,\n  asset: customBadge,\n  ...badgeAssets\n}: BadgesProps) {\n  const { size = 48, selected } = avatar;\n  const anyBadge = Object.values({ customBadge, ...badgeAssets }).filter(Boolean).length > 0;\n\n  if ((!anyBadge && !selected) || size <= 16) {\n    return children;\n  }\n\n  if (badgeAssets.type === 'notification' || badgeAssets.type === 'online') {\n    return (\n      <Dot avatarSize={size} variant={badgeAssets.type === 'online' ? 'online' : 'notification'}>\n        {children}\n      </Dot>\n    );\n  }\n\n  const badgeSize: BadgeAssetsProps['size'] = MAP_BADGE_ASSET_SIZE[size];\n  return (\n    <Badge\n      aria-label={ariaLabel}\n      size={badgeSize}\n      badge={\n        customBadge ? (\n          <Circle fixedSize size={badgeSize}>\n            {customBadge}\n          </Circle>\n        ) : (\n          <BadgeAssets {...(selected ? { status: 'positive' } : badgeAssets)} size={badgeSize} />\n        )\n      }\n      style={{\n        // @ts-expect-error CSS custom props allowed\n        '--badge-content-position': `${MAP_BADGE_POSITION[size] ?? 0}px`,\n      }}\n    >\n      {children}\n    </Badge>\n  );\n}\n\nfunction AvatarViewContent({\n  children,\n  imgSrc,\n  profileName: name,\n  profileType: type,\n}: PropsWithChildren<Pick<Props, 'imgSrc' | 'profileName' | 'profileType'>>) {\n  const [tryLoadImage, setTryLoadImage] = useState(true);\n  if (children === undefined) {\n    if (imgSrc && tryLoadImage) {\n      return <Image src={imgSrc} alt=\"\" onError={() => setTryLoadImage(false)} />;\n    }\n    if (type) {\n      return type === ProfileType.BUSINESS ? <BusinessProfileIcon /> : <PersonalProfileIcon />;\n    }\n    if (name) {\n      return getInitials(name);\n    }\n    return <PersonalProfileIcon />;\n  }\n  return children;\n}\n\nexport default AvatarView;\n"],"names":["AvatarView","children","undefined","size","selected","badge","interactive","className","style","imgSrc","profileType","profileName","restProps","_jsx","Circle","fixedSize","clsx","Badges","avatar","enableBorder","MAP_SELECTED_BORDER_WIDTH","AvatarViewContent","MAP_BADGE_ASSET_SIZE","MAP_BADGE_POSITION","ariaLabel","asset","customBadge","badgeAssets","anyBadge","Object","values","filter","Boolean","length","type","Dot","avatarSize","variant","badgeSize","Badge","BadgeAssets","status","name","tryLoadImage","setTryLoadImage","useState","Image","src","alt","onError","ProfileType","BUSINESS","BusinessProfileIcon","PersonalProfileIcon","getInitials"],"mappings":"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"}

package/build/avatarWrapper/AvatarWrapper.js

@@ -10,7 +10,7 @@ var Badge = require('../badge/Badge.js');
 require('@wise/art');
 var StatusIcon = require('../statusIcon/StatusIcon.js');
 require('clsx');
-require('../common/propsValues/breakpoint.js');
+require('@transferwise/neptune-tokens');
 var jsxRuntime = require('react/jsx-runtime');
 require('@transferwise/neptune-validation');
 require('../provider/direction/DirectionProvider.js');
@@ -32,6 +32,7 @@ require('../common/propsValues/variant.js');
 require('../common/propsValues/scroll.js');
 require('../common/propsValues/markdownNodeType.js');
 require('../common/fileType.js');
+require('@transferwise/formatting');
 var initials = require('../common/initials.js');
 require('react-intl');
 require('../common/closeButton/CloseButton.messages.js');

package/build/avatarWrapper/AvatarWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarWrapper.js","sources":["../../src/avatarWrapper/AvatarWrapper.tsx"],"sourcesContent":["import { Person as ProfileIcon, Briefcase as BriefcaseIcon } from '@transferwise/icons';\nimport { useState, useEffect } from 'react';\n\nimport Avatar, { AvatarProps, AvatarType } from '../avatar';\nimport Badge, { BadgeProps } from '../badge';\nimport {\n  ProfileType,\n  ProfileTypePersonal,\n  ProfileTypeBusiness,\n  Size,\n  Sentiment,\n  getInitials,\n  Status,\n} from '../common';\nimport StatusIcon from '../statusIcon/StatusIcon';\n\ninterface OptionalBadgeProps extends Omit<BadgeProps, 'badge'> {\n  url?: string;\n  ariaLabel?: string;\n  altText?: string;\n  statusIcon?: Sentiment | Status.PENDING;\n}\n\nconst OptionalBadge = ({\n  url,\n  altText,\n  statusIcon,\n  children,\n  ariaLabel,\n  ...rest\n}: OptionalBadgeProps) => {\n  if (url) {\n    return (\n      <Badge aria-label={ariaLabel} badge={<img src={url} alt={altText} />} {...rest}>\n        {children}\n      </Badge>\n    );\n  }\n  if (statusIcon) {\n    return (\n      <Badge\n        aria-label={ariaLabel}\n        badge={<StatusIcon sentiment={statusIcon} size={Size.SMALL} />}\n        {...rest}\n      >\n        {children}\n      </Badge>\n    );\n  }\n  return <>{children}</>;\n};\n\nexport type AvatarWrapperProps = {\n  url?: string;\n  'aria-label'?: string;\n  profileType?: ProfileTypeBusiness | ProfileTypePersonal;\n  profileId?: string;\n  name?: string;\n  avatarProps?: AvatarProps;\n  badgeProps?: BadgeProps;\n} & (\n  | {\n      badgeUrl: string;\n      badgeAltText: string;\n      badgeStatusIcon?: never;\n    }\n  | {\n      badgeUrl?: never;\n      badgeAltText?: never;\n      badgeStatusIcon: Sentiment | Status.PENDING;\n    }\n  | {\n      badgeUrl?: never;\n      badgeAltText?: never;\n      badgeStatusIcon?: never;\n    }\n);\n\n/**\n * @deprecated Use `AvatarView` component instead\n */\nconst AvatarWrapper = ({\n  url,\n  'aria-label': ariaLabel,\n  profileType,\n  profileId,\n  badgeUrl,\n  badgeAltText,\n  badgeStatusIcon,\n  name,\n  avatarProps,\n  badgeProps,\n}: AvatarWrapperProps) => {\n  const [hasImageLoadError, setImageLoadError] = useState(false);\n  const isBusinessProfile = profileType === ProfileType.BUSINESS;\n\n  // Reset the errored state when url changes\n  useEffect(() => setImageLoadError(false), [url]);\n\n  const getAvatarProps = () => {\n    let updatedAvatarProps = avatarProps;\n    if (!badgeUrl && !badgeStatusIcon && ariaLabel) {\n      updatedAvatarProps = { ...updatedAvatarProps, 'aria-label': ariaLabel };\n    }\n    if (url && !hasImageLoadError) {\n      return {\n        type: AvatarType.THUMBNAIL,\n        children: <img src={url} alt=\"\" onError={() => setImageLoadError(true)} />,\n        ...updatedAvatarProps,\n      };\n    }\n    if (profileType) {\n      return {\n        type: AvatarType.ICON,\n        children: isBusinessProfile ? <BriefcaseIcon size=\"24\" /> : <ProfileIcon size=\"24\" />,\n        ...updatedAvatarProps,\n      };\n    }\n    if (name) {\n      return {\n        type: AvatarType.INITIALS,\n        children: <>{getInitials(name)}</>,\n        backgroundColorSeed: profileId?.toString(),\n        ...updatedAvatarProps,\n      };\n    }\n    return {\n      type: AvatarType.ICON,\n      children: <ProfileIcon size=\"24\" />,\n      ...updatedAvatarProps,\n    };\n  };\n\n  return (\n    <OptionalBadge\n      url={badgeUrl}\n      ariaLabel={ariaLabel}\n      altText={badgeAltText}\n      statusIcon={badgeStatusIcon}\n      {...badgeProps}\n    >\n      <Avatar size={Size.MEDIUM} {...getAvatarProps()} />\n    </OptionalBadge>\n  );\n};\n\nexport default AvatarWrapper;\n"],"names":["OptionalBadge","url","altText","statusIcon","children","ariaLabel","rest","_jsx","Badge","badge","src","alt","StatusIcon","sentiment","size","Size","SMALL","_Fragment","AvatarWrapper","profileType","profileId","badgeUrl","badgeAltText","badgeStatusIcon","name","avatarProps","badgeProps","hasImageLoadError","setImageLoadError","useState","isBusinessProfile","ProfileType","BUSINESS","useEffect","getAvatarProps","updatedAvatarProps","type","AvatarType","THUMBNAIL","onError","ICON","BriefcaseIcon","ProfileIcon","INITIALS","getInitials","backgroundColorSeed","toString","Avatar","MEDIUM"],"mappings":"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"}
+{"version":3,"file":"AvatarWrapper.js","sources":["../../src/avatarWrapper/AvatarWrapper.tsx"],"sourcesContent":["import { Person as ProfileIcon, Briefcase as BriefcaseIcon } from '@transferwise/icons';\nimport { useState, useEffect } from 'react';\n\nimport Avatar, { AvatarProps, AvatarType } from '../avatar';\nimport Badge, { BadgeProps } from '../badge';\nimport {\n  ProfileType,\n  ProfileTypePersonal,\n  ProfileTypeBusiness,\n  Size,\n  Sentiment,\n  getInitials,\n  Status,\n} from '../common';\nimport StatusIcon from '../statusIcon/StatusIcon';\n\ninterface OptionalBadgeProps extends Omit<BadgeProps, 'badge'> {\n  url?: string;\n  ariaLabel?: string;\n  altText?: string;\n  statusIcon?: Sentiment | Status.PENDING;\n}\n\nconst OptionalBadge = ({\n  url,\n  altText,\n  statusIcon,\n  children,\n  ariaLabel,\n  ...rest\n}: OptionalBadgeProps) => {\n  if (url) {\n    return (\n      <Badge aria-label={ariaLabel} badge={<img src={url} alt={altText} />} {...rest}>\n        {children}\n      </Badge>\n    );\n  }\n  if (statusIcon) {\n    return (\n      <Badge\n        aria-label={ariaLabel}\n        badge={<StatusIcon sentiment={statusIcon} size={Size.SMALL} />}\n        {...rest}\n      >\n        {children}\n      </Badge>\n    );\n  }\n  return <>{children}</>;\n};\n\nexport type AvatarWrapperProps = {\n  url?: string;\n  'aria-label'?: string;\n  profileType?: ProfileTypeBusiness | ProfileTypePersonal;\n  profileId?: string;\n  name?: string;\n  avatarProps?: AvatarProps;\n  badgeProps?: BadgeProps;\n} & (\n  | {\n      badgeUrl: string;\n      badgeAltText: string;\n      badgeStatusIcon?: never;\n    }\n  | {\n      badgeUrl?: never;\n      badgeAltText?: never;\n      badgeStatusIcon: Sentiment | Status.PENDING;\n    }\n  | {\n      badgeUrl?: never;\n      badgeAltText?: never;\n      badgeStatusIcon?: never;\n    }\n);\n\n/**\n * @deprecated Use `AvatarView` component instead\n */\nconst AvatarWrapper = ({\n  url,\n  'aria-label': ariaLabel,\n  profileType,\n  profileId,\n  badgeUrl,\n  badgeAltText,\n  badgeStatusIcon,\n  name,\n  avatarProps,\n  badgeProps,\n}: AvatarWrapperProps) => {\n  const [hasImageLoadError, setImageLoadError] = useState(false);\n  const isBusinessProfile = profileType === ProfileType.BUSINESS;\n\n  // Reset the errored state when url changes\n  useEffect(() => setImageLoadError(false), [url]);\n\n  const getAvatarProps = () => {\n    let updatedAvatarProps = avatarProps;\n    if (!badgeUrl && !badgeStatusIcon && ariaLabel) {\n      updatedAvatarProps = { ...updatedAvatarProps, 'aria-label': ariaLabel };\n    }\n    if (url && !hasImageLoadError) {\n      return {\n        type: AvatarType.THUMBNAIL,\n        children: <img src={url} alt=\"\" onError={() => setImageLoadError(true)} />,\n        ...updatedAvatarProps,\n      };\n    }\n    if (profileType) {\n      return {\n        type: AvatarType.ICON,\n        children: isBusinessProfile ? <BriefcaseIcon size=\"24\" /> : <ProfileIcon size=\"24\" />,\n        ...updatedAvatarProps,\n      };\n    }\n    if (name) {\n      return {\n        type: AvatarType.INITIALS,\n        children: <>{getInitials(name)}</>,\n        backgroundColorSeed: profileId?.toString(),\n        ...updatedAvatarProps,\n      };\n    }\n    return {\n      type: AvatarType.ICON,\n      children: <ProfileIcon size=\"24\" />,\n      ...updatedAvatarProps,\n    };\n  };\n\n  return (\n    <OptionalBadge\n      url={badgeUrl}\n      ariaLabel={ariaLabel}\n      altText={badgeAltText}\n      statusIcon={badgeStatusIcon}\n      {...badgeProps}\n    >\n      <Avatar size={Size.MEDIUM} {...getAvatarProps()} />\n    </OptionalBadge>\n  );\n};\n\nexport default AvatarWrapper;\n"],"names":["OptionalBadge","url","altText","statusIcon","children","ariaLabel","rest","_jsx","Badge","badge","src","alt","StatusIcon","sentiment","size","Size","SMALL","_Fragment","AvatarWrapper","profileType","profileId","badgeUrl","badgeAltText","badgeStatusIcon","name","avatarProps","badgeProps","hasImageLoadError","setImageLoadError","useState","isBusinessProfile","ProfileType","BUSINESS","useEffect","getAvatarProps","updatedAvatarProps","type","AvatarType","THUMBNAIL","onError","ICON","BriefcaseIcon","ProfileIcon","INITIALS","getInitials","backgroundColorSeed","toString","Avatar","MEDIUM"],"mappings":"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"}

package/build/avatarWrapper/AvatarWrapper.mjs

@@ -6,7 +6,7 @@ import Badge from '../badge/Badge.mjs';
 import '@wise/art';
 import StatusIcon from '../statusIcon/StatusIcon.mjs';
 import 'clsx';
-import '../common/propsValues/breakpoint.mjs';
+import '@transferwise/neptune-tokens';
 import { jsx, Fragment } from 'react/jsx-runtime';
 import '@transferwise/neptune-validation';
 import '../provider/direction/DirectionProvider.mjs';
@@ -28,6 +28,7 @@ import '../common/propsValues/variant.mjs';
 import '../common/propsValues/scroll.mjs';
 import '../common/propsValues/markdownNodeType.mjs';
 import '../common/fileType.mjs';
+import '@transferwise/formatting';
 import { getInitials } from '../common/initials.mjs';
 import 'react-intl';
 import '../common/closeButton/CloseButton.messages.mjs';

package/build/avatarWrapper/AvatarWrapper.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarWrapper.mjs","sources":["../../src/avatarWrapper/AvatarWrapper.tsx"],"sourcesContent":["import { Person as ProfileIcon, Briefcase as BriefcaseIcon } from '@transferwise/icons';\nimport { useState, useEffect } from 'react';\n\nimport Avatar, { AvatarProps, AvatarType } from '../avatar';\nimport Badge, { BadgeProps } from '../badge';\nimport {\n  ProfileType,\n  ProfileTypePersonal,\n  ProfileTypeBusiness,\n  Size,\n  Sentiment,\n  getInitials,\n  Status,\n} from '../common';\nimport StatusIcon from '../statusIcon/StatusIcon';\n\ninterface OptionalBadgeProps extends Omit<BadgeProps, 'badge'> {\n  url?: string;\n  ariaLabel?: string;\n  altText?: string;\n  statusIcon?: Sentiment | Status.PENDING;\n}\n\nconst OptionalBadge = ({\n  url,\n  altText,\n  statusIcon,\n  children,\n  ariaLabel,\n  ...rest\n}: OptionalBadgeProps) => {\n  if (url) {\n    return (\n      <Badge aria-label={ariaLabel} badge={<img src={url} alt={altText} />} {...rest}>\n        {children}\n      </Badge>\n    );\n  }\n  if (statusIcon) {\n    return (\n      <Badge\n        aria-label={ariaLabel}\n        badge={<StatusIcon sentiment={statusIcon} size={Size.SMALL} />}\n        {...rest}\n      >\n        {children}\n      </Badge>\n    );\n  }\n  return <>{children}</>;\n};\n\nexport type AvatarWrapperProps = {\n  url?: string;\n  'aria-label'?: string;\n  profileType?: ProfileTypeBusiness | ProfileTypePersonal;\n  profileId?: string;\n  name?: string;\n  avatarProps?: AvatarProps;\n  badgeProps?: BadgeProps;\n} & (\n  | {\n      badgeUrl: string;\n      badgeAltText: string;\n      badgeStatusIcon?: never;\n    }\n  | {\n      badgeUrl?: never;\n      badgeAltText?: never;\n      badgeStatusIcon: Sentiment | Status.PENDING;\n    }\n  | {\n      badgeUrl?: never;\n      badgeAltText?: never;\n      badgeStatusIcon?: never;\n    }\n);\n\n/**\n * @deprecated Use `AvatarView` component instead\n */\nconst AvatarWrapper = ({\n  url,\n  'aria-label': ariaLabel,\n  profileType,\n  profileId,\n  badgeUrl,\n  badgeAltText,\n  badgeStatusIcon,\n  name,\n  avatarProps,\n  badgeProps,\n}: AvatarWrapperProps) => {\n  const [hasImageLoadError, setImageLoadError] = useState(false);\n  const isBusinessProfile = profileType === ProfileType.BUSINESS;\n\n  // Reset the errored state when url changes\n  useEffect(() => setImageLoadError(false), [url]);\n\n  const getAvatarProps = () => {\n    let updatedAvatarProps = avatarProps;\n    if (!badgeUrl && !badgeStatusIcon && ariaLabel) {\n      updatedAvatarProps = { ...updatedAvatarProps, 'aria-label': ariaLabel };\n    }\n    if (url && !hasImageLoadError) {\n      return {\n        type: AvatarType.THUMBNAIL,\n        children: <img src={url} alt=\"\" onError={() => setImageLoadError(true)} />,\n        ...updatedAvatarProps,\n      };\n    }\n    if (profileType) {\n      return {\n        type: AvatarType.ICON,\n        children: isBusinessProfile ? <BriefcaseIcon size=\"24\" /> : <ProfileIcon size=\"24\" />,\n        ...updatedAvatarProps,\n      };\n    }\n    if (name) {\n      return {\n        type: AvatarType.INITIALS,\n        children: <>{getInitials(name)}</>,\n        backgroundColorSeed: profileId?.toString(),\n        ...updatedAvatarProps,\n      };\n    }\n    return {\n      type: AvatarType.ICON,\n      children: <ProfileIcon size=\"24\" />,\n      ...updatedAvatarProps,\n    };\n  };\n\n  return (\n    <OptionalBadge\n      url={badgeUrl}\n      ariaLabel={ariaLabel}\n      altText={badgeAltText}\n      statusIcon={badgeStatusIcon}\n      {...badgeProps}\n    >\n      <Avatar size={Size.MEDIUM} {...getAvatarProps()} />\n    </OptionalBadge>\n  );\n};\n\nexport default AvatarWrapper;\n"],"names":["OptionalBadge","url","altText","statusIcon","children","ariaLabel","rest","_jsx","Badge","badge","src","alt","StatusIcon","sentiment","size","Size","SMALL","_Fragment","AvatarWrapper","profileType","profileId","badgeUrl","badgeAltText","badgeStatusIcon","name","avatarProps","badgeProps","hasImageLoadError","setImageLoadError","useState","isBusinessProfile","ProfileType","BUSINESS","useEffect","getAvatarProps","updatedAvatarProps","type","AvatarType","THUMBNAIL","onError","ICON","BriefcaseIcon","ProfileIcon","INITIALS","getInitials","backgroundColorSeed","toString","Avatar","MEDIUM"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBA,MAAMA,aAAa,GAAGA,CAAC;EACrBC,GAAG;EACHC,OAAO;EACPC,UAAU;EACVC,QAAQ;EACRC,SAAS;EACT,GAAGC;AAAI,CACY,KAAI;AACvB,EAAA,IAAIL,GAAG,EAAE;IACP,oBACEM,GAAA,CAACC,KAAK,EAAA;AAAC,MAAA,YAAA,EAAYH,SAAU;AAACI,MAAAA,KAAK,eAAEF,GAAA,CAAA,KAAA,EAAA;AAAKG,QAAAA,GAAG,EAAET,GAAI;AAACU,QAAAA,GAAG,EAAET;AAAQ,QAAI;AAAA,MAAA,GAAKI,IAAI;AAAAF,MAAAA,QAAA,EAC3EA;AAAQ,KACJ,CAAC;AAEZ,EAAA;AACA,EAAA,IAAID,UAAU,EAAE;IACd,oBACEI,GAAA,CAACC,KAAK,EAAA;AACJ,MAAA,YAAA,EAAYH,SAAU;MACtBI,KAAK,eAAEF,GAAA,CAACK,UAAU,EAAA;AAACC,QAAAA,SAAS,EAAEV,UAAW;QAACW,IAAI,EAAEC,IAAI,CAACC;AAAM,QAAI;AAAA,MAAA,GAC3DV,IAAI;AAAAF,MAAAA,QAAA,EAEPA;AAAQ,KACJ,CAAC;AAEZ,EAAA;EACA,oBAAOG,GAAA,CAAAU,QAAA,EAAA;AAAAb,IAAAA,QAAA,EAAGA;AAAQ,IAAI;AACxB,CAAC;AA4BD;;AAEG;AACH,MAAMc,aAAa,GAAGA,CAAC;EACrBjB,GAAG;AACH,EAAA,YAAY,EAAEI,SAAS;EACvBc,WAAW;EACXC,SAAS;EACTC,QAAQ;EACRC,YAAY;EACZC,eAAe;EACfC,IAAI;EACJC,WAAW;AACXC,EAAAA;AAAU,CACS,KAAI;EACvB,MAAM,CAACC,iBAAiB,EAAEC,iBAAiB,CAAC,GAAGC,QAAQ,CAAC,KAAK,CAAC;AAC9D,EAAA,MAAMC,iBAAiB,GAAGX,WAAW,KAAKY,WAAW,CAACC,QAAQ;AAE9D;EACAC,SAAS,CAAC,MAAML,iBAAiB,CAAC,KAAK,CAAC,EAAE,CAAC3B,GAAG,CAAC,CAAC;EAEhD,MAAMiC,cAAc,GAAGA,MAAK;IAC1B,IAAIC,kBAAkB,GAAGV,WAAW;AACpC,IAAA,IAAI,CAACJ,QAAQ,IAAI,CAACE,eAAe,IAAIlB,SAAS,EAAE;AAC9C8B,MAAAA,kBAAkB,GAAG;AAAE,QAAA,GAAGA,kBAAkB;AAAE,QAAA,YAAY,EAAE9B;OAAW;AACzE,IAAA;AACA,IAAA,IAAIJ,GAAG,IAAI,CAAC0B,iBAAiB,EAAE;MAC7B,OAAO;QACLS,IAAI,EAAEC,UAAU,CAACC,SAAS;AAC1BlC,QAAAA,QAAQ,eAAEG,GAAA,CAAA,KAAA,EAAA;AAAKG,UAAAA,GAAG,EAAET,GAAI;AAACU,UAAAA,GAAG,EAAC,EAAE;AAAC4B,UAAAA,OAAO,EAAEA,MAAMX,iBAAiB,CAAC,IAAI;AAAE,SAAA,CAAG;QAC1E,GAAGO;OACJ;AACH,IAAA;AACA,IAAA,IAAIhB,WAAW,EAAE;MACf,OAAO;QACLiB,IAAI,EAAEC,UAAU,CAACG,IAAI;AACrBpC,QAAAA,QAAQ,EAAE0B,iBAAiB,gBAAGvB,GAAA,CAACkC,SAAa,EAAA;AAAC3B,UAAAA,IAAI,EAAC;AAAI,SAAA,CAAG,gBAAGP,GAAA,CAACmC,MAAW,EAAA;AAAC5B,UAAAA,IAAI,EAAC;AAAI,SAAA,CAAG;QACrF,GAAGqB;OACJ;AACH,IAAA;AACA,IAAA,IAAIX,IAAI,EAAE;MACR,OAAO;QACLY,IAAI,EAAEC,UAAU,CAACM,QAAQ;QACzBvC,QAAQ,eAAEG,GAAA,CAAAU,QAAA,EAAA;UAAAb,QAAA,EAAGwC,WAAW,CAACpB,IAAI;AAAC,SAAC,CAAG;AAClCqB,QAAAA,mBAAmB,EAAEzB,SAAS,EAAE0B,QAAQ,EAAE;QAC1C,GAAGX;OACJ;AACH,IAAA;IACA,OAAO;MACLC,IAAI,EAAEC,UAAU,CAACG,IAAI;MACrBpC,QAAQ,eAAEG,GAAA,CAACmC,MAAW,EAAA;AAAC5B,QAAAA,IAAI,EAAC;AAAI,OAAA,CAAG;MACnC,GAAGqB;KACJ;EACH,CAAC;EAED,oBACE5B,GAAA,CAACP,aAAa,EAAA;AACZC,IAAAA,GAAG,EAAEoB,QAAS;AACdhB,IAAAA,SAAS,EAAEA,SAAU;AACrBH,IAAAA,OAAO,EAAEoB,YAAa;AACtBnB,IAAAA,UAAU,EAAEoB,eAAgB;AAAA,IAAA,GACxBG,UAAU;IAAAtB,QAAA,eAEdG,GAAA,CAACwC,MAAM,EAAA;MAACjC,IAAI,EAAEC,IAAI,CAACiC,MAAO;AAAA,MAAA,GAAKd,cAAc;KAAG;AAClD,GAAe,CAAC;AAEpB;;;;"}
+{"version":3,"file":"AvatarWrapper.mjs","sources":["../../src/avatarWrapper/AvatarWrapper.tsx"],"sourcesContent":["import { Person as ProfileIcon, Briefcase as BriefcaseIcon } from '@transferwise/icons';\nimport { useState, useEffect } from 'react';\n\nimport Avatar, { AvatarProps, AvatarType } from '../avatar';\nimport Badge, { BadgeProps } from '../badge';\nimport {\n  ProfileType,\n  ProfileTypePersonal,\n  ProfileTypeBusiness,\n  Size,\n  Sentiment,\n  getInitials,\n  Status,\n} from '../common';\nimport StatusIcon from '../statusIcon/StatusIcon';\n\ninterface OptionalBadgeProps extends Omit<BadgeProps, 'badge'> {\n  url?: string;\n  ariaLabel?: string;\n  altText?: string;\n  statusIcon?: Sentiment | Status.PENDING;\n}\n\nconst OptionalBadge = ({\n  url,\n  altText,\n  statusIcon,\n  children,\n  ariaLabel,\n  ...rest\n}: OptionalBadgeProps) => {\n  if (url) {\n    return (\n      <Badge aria-label={ariaLabel} badge={<img src={url} alt={altText} />} {...rest}>\n        {children}\n      </Badge>\n    );\n  }\n  if (statusIcon) {\n    return (\n      <Badge\n        aria-label={ariaLabel}\n        badge={<StatusIcon sentiment={statusIcon} size={Size.SMALL} />}\n        {...rest}\n      >\n        {children}\n      </Badge>\n    );\n  }\n  return <>{children}</>;\n};\n\nexport type AvatarWrapperProps = {\n  url?: string;\n  'aria-label'?: string;\n  profileType?: ProfileTypeBusiness | ProfileTypePersonal;\n  profileId?: string;\n  name?: string;\n  avatarProps?: AvatarProps;\n  badgeProps?: BadgeProps;\n} & (\n  | {\n      badgeUrl: string;\n      badgeAltText: string;\n      badgeStatusIcon?: never;\n    }\n  | {\n      badgeUrl?: never;\n      badgeAltText?: never;\n      badgeStatusIcon: Sentiment | Status.PENDING;\n    }\n  | {\n      badgeUrl?: never;\n      badgeAltText?: never;\n      badgeStatusIcon?: never;\n    }\n);\n\n/**\n * @deprecated Use `AvatarView` component instead\n */\nconst AvatarWrapper = ({\n  url,\n  'aria-label': ariaLabel,\n  profileType,\n  profileId,\n  badgeUrl,\n  badgeAltText,\n  badgeStatusIcon,\n  name,\n  avatarProps,\n  badgeProps,\n}: AvatarWrapperProps) => {\n  const [hasImageLoadError, setImageLoadError] = useState(false);\n  const isBusinessProfile = profileType === ProfileType.BUSINESS;\n\n  // Reset the errored state when url changes\n  useEffect(() => setImageLoadError(false), [url]);\n\n  const getAvatarProps = () => {\n    let updatedAvatarProps = avatarProps;\n    if (!badgeUrl && !badgeStatusIcon && ariaLabel) {\n      updatedAvatarProps = { ...updatedAvatarProps, 'aria-label': ariaLabel };\n    }\n    if (url && !hasImageLoadError) {\n      return {\n        type: AvatarType.THUMBNAIL,\n        children: <img src={url} alt=\"\" onError={() => setImageLoadError(true)} />,\n        ...updatedAvatarProps,\n      };\n    }\n    if (profileType) {\n      return {\n        type: AvatarType.ICON,\n        children: isBusinessProfile ? <BriefcaseIcon size=\"24\" /> : <ProfileIcon size=\"24\" />,\n        ...updatedAvatarProps,\n      };\n    }\n    if (name) {\n      return {\n        type: AvatarType.INITIALS,\n        children: <>{getInitials(name)}</>,\n        backgroundColorSeed: profileId?.toString(),\n        ...updatedAvatarProps,\n      };\n    }\n    return {\n      type: AvatarType.ICON,\n      children: <ProfileIcon size=\"24\" />,\n      ...updatedAvatarProps,\n    };\n  };\n\n  return (\n    <OptionalBadge\n      url={badgeUrl}\n      ariaLabel={ariaLabel}\n      altText={badgeAltText}\n      statusIcon={badgeStatusIcon}\n      {...badgeProps}\n    >\n      <Avatar size={Size.MEDIUM} {...getAvatarProps()} />\n    </OptionalBadge>\n  );\n};\n\nexport default AvatarWrapper;\n"],"names":["OptionalBadge","url","altText","statusIcon","children","ariaLabel","rest","_jsx","Badge","badge","src","alt","StatusIcon","sentiment","size","Size","SMALL","_Fragment","AvatarWrapper","profileType","profileId","badgeUrl","badgeAltText","badgeStatusIcon","name","avatarProps","badgeProps","hasImageLoadError","setImageLoadError","useState","isBusinessProfile","ProfileType","BUSINESS","useEffect","getAvatarProps","updatedAvatarProps","type","AvatarType","THUMBNAIL","onError","ICON","BriefcaseIcon","ProfileIcon","INITIALS","getInitials","backgroundColorSeed","toString","Avatar","MEDIUM"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBA,MAAMA,aAAa,GAAGA,CAAC;EACrBC,GAAG;EACHC,OAAO;EACPC,UAAU;EACVC,QAAQ;EACRC,SAAS;EACT,GAAGC;AAAI,CACY,KAAI;AACvB,EAAA,IAAIL,GAAG,EAAE;IACP,oBACEM,GAAA,CAACC,KAAK,EAAA;AAAC,MAAA,YAAA,EAAYH,SAAU;AAACI,MAAAA,KAAK,eAAEF,GAAA,CAAA,KAAA,EAAA;AAAKG,QAAAA,GAAG,EAAET,GAAI;AAACU,QAAAA,GAAG,EAAET;AAAQ,QAAI;AAAA,MAAA,GAAKI,IAAI;AAAAF,MAAAA,QAAA,EAC3EA;AAAQ,KACJ,CAAC;AAEZ,EAAA;AACA,EAAA,IAAID,UAAU,EAAE;IACd,oBACEI,GAAA,CAACC,KAAK,EAAA;AACJ,MAAA,YAAA,EAAYH,SAAU;MACtBI,KAAK,eAAEF,GAAA,CAACK,UAAU,EAAA;AAACC,QAAAA,SAAS,EAAEV,UAAW;QAACW,IAAI,EAAEC,IAAI,CAACC;AAAM,QAAI;AAAA,MAAA,GAC3DV,IAAI;AAAAF,MAAAA,QAAA,EAEPA;AAAQ,KACJ,CAAC;AAEZ,EAAA;EACA,oBAAOG,GAAA,CAAAU,QAAA,EAAA;AAAAb,IAAAA,QAAA,EAAGA;AAAQ,IAAI;AACxB,CAAC;AA4BD;;AAEG;AACH,MAAMc,aAAa,GAAGA,CAAC;EACrBjB,GAAG;AACH,EAAA,YAAY,EAAEI,SAAS;EACvBc,WAAW;EACXC,SAAS;EACTC,QAAQ;EACRC,YAAY;EACZC,eAAe;EACfC,IAAI;EACJC,WAAW;AACXC,EAAAA;AAAU,CACS,KAAI;EACvB,MAAM,CAACC,iBAAiB,EAAEC,iBAAiB,CAAC,GAAGC,QAAQ,CAAC,KAAK,CAAC;AAC9D,EAAA,MAAMC,iBAAiB,GAAGX,WAAW,KAAKY,WAAW,CAACC,QAAQ;AAE9D;EACAC,SAAS,CAAC,MAAML,iBAAiB,CAAC,KAAK,CAAC,EAAE,CAAC3B,GAAG,CAAC,CAAC;EAEhD,MAAMiC,cAAc,GAAGA,MAAK;IAC1B,IAAIC,kBAAkB,GAAGV,WAAW;AACpC,IAAA,IAAI,CAACJ,QAAQ,IAAI,CAACE,eAAe,IAAIlB,SAAS,EAAE;AAC9C8B,MAAAA,kBAAkB,GAAG;AAAE,QAAA,GAAGA,kBAAkB;AAAE,QAAA,YAAY,EAAE9B;OAAW;AACzE,IAAA;AACA,IAAA,IAAIJ,GAAG,IAAI,CAAC0B,iBAAiB,EAAE;MAC7B,OAAO;QACLS,IAAI,EAAEC,UAAU,CAACC,SAAS;AAC1BlC,QAAAA,QAAQ,eAAEG,GAAA,CAAA,KAAA,EAAA;AAAKG,UAAAA,GAAG,EAAET,GAAI;AAACU,UAAAA,GAAG,EAAC,EAAE;AAAC4B,UAAAA,OAAO,EAAEA,MAAMX,iBAAiB,CAAC,IAAI;AAAE,SAAA,CAAG;QAC1E,GAAGO;OACJ;AACH,IAAA;AACA,IAAA,IAAIhB,WAAW,EAAE;MACf,OAAO;QACLiB,IAAI,EAAEC,UAAU,CAACG,IAAI;AACrBpC,QAAAA,QAAQ,EAAE0B,iBAAiB,gBAAGvB,GAAA,CAACkC,SAAa,EAAA;AAAC3B,UAAAA,IAAI,EAAC;AAAI,SAAA,CAAG,gBAAGP,GAAA,CAACmC,MAAW,EAAA;AAAC5B,UAAAA,IAAI,EAAC;AAAI,SAAA,CAAG;QACrF,GAAGqB;OACJ;AACH,IAAA;AACA,IAAA,IAAIX,IAAI,EAAE;MACR,OAAO;QACLY,IAAI,EAAEC,UAAU,CAACM,QAAQ;QACzBvC,QAAQ,eAAEG,GAAA,CAAAU,QAAA,EAAA;UAAAb,QAAA,EAAGwC,WAAW,CAACpB,IAAI;AAAC,SAAC,CAAG;AAClCqB,QAAAA,mBAAmB,EAAEzB,SAAS,EAAE0B,QAAQ,EAAE;QAC1C,GAAGX;OACJ;AACH,IAAA;IACA,OAAO;MACLC,IAAI,EAAEC,UAAU,CAACG,IAAI;MACrBpC,QAAQ,eAAEG,GAAA,CAACmC,MAAW,EAAA;AAAC5B,QAAAA,IAAI,EAAC;AAAI,OAAA,CAAG;MACnC,GAAGqB;KACJ;EACH,CAAC;EAED,oBACE5B,GAAA,CAACP,aAAa,EAAA;AACZC,IAAAA,GAAG,EAAEoB,QAAS;AACdhB,IAAAA,SAAS,EAAEA,SAAU;AACrBH,IAAAA,OAAO,EAAEoB,YAAa;AACtBnB,IAAAA,UAAU,EAAEoB,eAAgB;AAAA,IAAA,GACxBG,UAAU;IAAAtB,QAAA,eAEdG,GAAA,CAACwC,MAAM,EAAA;MAACjC,IAAI,EAAEC,IAAI,CAACiC,MAAO;AAAA,MAAA,GAAKd,cAAc;KAAG;AAClD,GAAe,CAAC;AAEpB;;;;"}

package/build/badge/Badge.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var clsx = require('clsx');
 var theme = require('../common/theme.js');
 require('../common/direction.js');
+require('@transferwise/neptune-tokens');
 require('../common/propsValues/control.js');
-require('../common/propsValues/breakpoint.js');
 var size = require('../common/propsValues/size.js');
 require('../common/propsValues/typography.js');
 require('../common/propsValues/width.js');
@@ -22,6 +22,7 @@ require('../common/propsValues/variant.js');
 require('../common/propsValues/scroll.js');
 require('../common/propsValues/markdownNodeType.js');
 require('../common/fileType.js');
+require('@transferwise/formatting');
 require('@transferwise/icons');
 require('react');
 require('react-intl');

package/build/badge/Badge.js.map

@@ -1 +1 @@
-{"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';\nimport type { BadgeAssetsProps } from '.';\n\n/**\n * @deprecated Use `16` or `24` instead.\n */\ntype DeprecatedSizes = SizeSmall | SizeMedium | SizeLarge;\n\n/**\n * @deprecated `Badge` is deprecated please use `<AvatarView badge={..} />` instead\n */\nexport type BadgeProps = {\n  badge: ReactNode;\n  children: ReactNode;\n  /**\n   * `md` is deprecated, it will fallback to `sm` instead.\n   * @default 'sm'\n   */\n  size?: DeprecatedSizes | BadgeAssetsProps['size'];\n  /** @default 'light' */\n  border?: ThemeDark | ThemeLight;\n  'aria-label'?: string;\n  style?: React.CSSProperties;\n} & CommonProps;\n\nconst mapLegacySize = {\n  16: Size.SMALL,\n  24: Size.LARGE,\n  // medium is no longer exists, so we map it to small\n  [String(Size.MEDIUM)]: Size.SMALL,\n};\n\n// Note: Badge component is not deprecated, we want stop it's direct usage on consumer side.\n// Deprecation notice will hint consumers to migrate. Eventually the component will become internal.\n/**\n * @deprecated Use `<AvatarView badge={..} />` instead.\n */\nconst Badge = ({\n  badge,\n  className = undefined,\n  size: sizeProp = Size.SMALL,\n  border = Theme.LIGHT,\n  'aria-label': ariaLabel,\n  children,\n  style,\n}: BadgeProps) => {\n  const size = mapLegacySize[sizeProp] ?? sizeProp;\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} style={style}>\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":["mapLegacySize","Size","SMALL","LARGE","String","MEDIUM","Badge","badge","className","undefined","size","sizeProp","border","Theme","LIGHT","ariaLabel","children","style","classes","clsx","_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCA,MAAMA,aAAa,GAAG;EACpB,EAAE,EAAEC,SAAI,CAACC,KAAK;EACd,EAAE,EAAED,SAAI,CAACE,KAAK;AACd;EACA,CAACC,MAAM,CAACH,SAAI,CAACI,MAAM,CAAC,GAAGJ,SAAI,CAACC;CAC7B;AAED;AACA;AACA;;AAEG;AACH,MAAMI,KAAK,GAAGA,CAAC;EACbC,KAAK;AACLC,EAAAA,SAAS,GAAGC,SAAS;AACrBC,EAAAA,IAAI,EAAEC,QAAQ,GAAGV,SAAI,CAACC,KAAK;EAC3BU,MAAM,GAAGC,WAAK,CAACC,KAAK;AACpB,EAAA,YAAY,EAAEC,SAAS;EACvBC,QAAQ;AACRC,EAAAA;AAAK,CACM,KAAI;AACf,EAAA,MAAMP,IAAI,GAAGV,aAAa,CAACW,QAAQ,CAAC,IAAIA,QAAQ;AAChD,EAAA,MAAMO,OAAO,GAAWC,SAAI,CAC1B,UAAU,EACV;AACE,IAAA,CAAC,CAAA,gBAAA,EAAmBP,MAAM,CAAA,CAAE,GAAGA,MAAM;IACrC,CAAC,CAAA,SAAA,EAAYF,IAAI,CAAA,CAAE,GAAGA;GACvB,EACDF,SAAS,CACV;AAED,EAAA,oBACEY,eAAA,CAAA,KAAA,EAAA;AAAK,IAAA,YAAA,EAAYL,SAAU;AAACP,IAAAA,SAAS,EAAEU,OAAQ;AAACD,IAAAA,KAAK,EAAEA,KAAM;AAAAD,IAAAA,QAAA,gBAC3DK,cAAA,CAAA,KAAA,EAAA;AAAKb,MAAAA,SAAS,EAAC,oBAAoB;AAAAQ,MAAAA,QAAA,EAAEA;KAAc,CACnD,eAAAK,cAAA,CAAA,KAAA,EAAA;AAAKb,MAAAA,SAAS,EAAC,mBAAmB;AAAAQ,MAAAA,QAAA,EAAET;AAAK,KAAM,CACjD;AAAA,GAAK,CAAC;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';\nimport type { BadgeAssetsProps } from '.';\n\n/**\n * @deprecated Use `16` or `24` instead.\n */\ntype DeprecatedSizes = SizeSmall | SizeMedium | SizeLarge;\n\n/**\n * @deprecated `Badge` is deprecated please use `<AvatarView badge={..} />` instead\n */\nexport type BadgeProps = {\n  badge: ReactNode;\n  children: ReactNode;\n  /**\n   * `md` is deprecated, it will fallback to `sm` instead.\n   * @default 'sm'\n   */\n  size?: DeprecatedSizes | BadgeAssetsProps['size'];\n  /** @default 'light' */\n  border?: ThemeDark | ThemeLight;\n  'aria-label'?: string;\n  style?: React.CSSProperties;\n} & CommonProps;\n\nconst mapLegacySize = {\n  16: Size.SMALL,\n  24: Size.LARGE,\n  // medium is no longer exists, so we map it to small\n  [String(Size.MEDIUM)]: Size.SMALL,\n};\n\n// Note: Badge component is not deprecated, we want stop it's direct usage on consumer side.\n// Deprecation notice will hint consumers to migrate. Eventually the component will become internal.\n/**\n * @deprecated Use `<AvatarView badge={..} />` instead.\n */\nconst Badge = ({\n  badge,\n  className = undefined,\n  size: sizeProp = Size.SMALL,\n  border = Theme.LIGHT,\n  'aria-label': ariaLabel,\n  children,\n  style,\n}: BadgeProps) => {\n  const size = mapLegacySize[sizeProp] ?? sizeProp;\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} style={style}>\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":["mapLegacySize","Size","SMALL","LARGE","String","MEDIUM","Badge","badge","className","undefined","size","sizeProp","border","Theme","LIGHT","ariaLabel","children","style","classes","clsx","_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCA,MAAMA,aAAa,GAAG;EACpB,EAAE,EAAEC,SAAI,CAACC,KAAK;EACd,EAAE,EAAED,SAAI,CAACE,KAAK;AACd;EACA,CAACC,MAAM,CAACH,SAAI,CAACI,MAAM,CAAC,GAAGJ,SAAI,CAACC;CAC7B;AAED;AACA;AACA;;AAEG;AACH,MAAMI,KAAK,GAAGA,CAAC;EACbC,KAAK;AACLC,EAAAA,SAAS,GAAGC,SAAS;AACrBC,EAAAA,IAAI,EAAEC,QAAQ,GAAGV,SAAI,CAACC,KAAK;EAC3BU,MAAM,GAAGC,WAAK,CAACC,KAAK;AACpB,EAAA,YAAY,EAAEC,SAAS;EACvBC,QAAQ;AACRC,EAAAA;AAAK,CACM,KAAI;AACf,EAAA,MAAMP,IAAI,GAAGV,aAAa,CAACW,QAAQ,CAAC,IAAIA,QAAQ;AAChD,EAAA,MAAMO,OAAO,GAAWC,SAAI,CAC1B,UAAU,EACV;AACE,IAAA,CAAC,CAAA,gBAAA,EAAmBP,MAAM,CAAA,CAAE,GAAGA,MAAM;IACrC,CAAC,CAAA,SAAA,EAAYF,IAAI,CAAA,CAAE,GAAGA;GACvB,EACDF,SAAS,CACV;AAED,EAAA,oBACEY,eAAA,CAAA,KAAA,EAAA;AAAK,IAAA,YAAA,EAAYL,SAAU;AAACP,IAAAA,SAAS,EAAEU,OAAQ;AAACD,IAAAA,KAAK,EAAEA,KAAM;AAAAD,IAAAA,QAAA,gBAC3DK,cAAA,CAAA,KAAA,EAAA;AAAKb,MAAAA,SAAS,EAAC,oBAAoB;AAAAQ,MAAAA,QAAA,EAAEA;KAAc,CACnD,eAAAK,cAAA,CAAA,KAAA,EAAA;AAAKb,MAAAA,SAAS,EAAC,mBAAmB;AAAAQ,MAAAA,QAAA,EAAET;AAAK,KAAM,CACjD;AAAA,GAAK,CAAC;AAEV;;;;"}

package/build/badge/Badge.mjs

@@ -1,8 +1,8 @@
 import { clsx } from 'clsx';
 import { Theme } from '../common/theme.mjs';
 import '../common/direction.mjs';
+import '@transferwise/neptune-tokens';
 import '../common/propsValues/control.mjs';
-import '../common/propsValues/breakpoint.mjs';
 import { Size } from '../common/propsValues/size.mjs';
 import '../common/propsValues/typography.mjs';
 import '../common/propsValues/width.mjs';
@@ -18,6 +18,7 @@ import '../common/propsValues/variant.mjs';
 import '../common/propsValues/scroll.mjs';
 import '../common/propsValues/markdownNodeType.mjs';
 import '../common/fileType.mjs';
+import '@transferwise/formatting';
 import '@transferwise/icons';
 import 'react';
 import 'react-intl';

package/build/badge/Badge.mjs.map

@@ -1 +1 @@
-{"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';\nimport type { BadgeAssetsProps } from '.';\n\n/**\n * @deprecated Use `16` or `24` instead.\n */\ntype DeprecatedSizes = SizeSmall | SizeMedium | SizeLarge;\n\n/**\n * @deprecated `Badge` is deprecated please use `<AvatarView badge={..} />` instead\n */\nexport type BadgeProps = {\n  badge: ReactNode;\n  children: ReactNode;\n  /**\n   * `md` is deprecated, it will fallback to `sm` instead.\n   * @default 'sm'\n   */\n  size?: DeprecatedSizes | BadgeAssetsProps['size'];\n  /** @default 'light' */\n  border?: ThemeDark | ThemeLight;\n  'aria-label'?: string;\n  style?: React.CSSProperties;\n} & CommonProps;\n\nconst mapLegacySize = {\n  16: Size.SMALL,\n  24: Size.LARGE,\n  // medium is no longer exists, so we map it to small\n  [String(Size.MEDIUM)]: Size.SMALL,\n};\n\n// Note: Badge component is not deprecated, we want stop it's direct usage on consumer side.\n// Deprecation notice will hint consumers to migrate. Eventually the component will become internal.\n/**\n * @deprecated Use `<AvatarView badge={..} />` instead.\n */\nconst Badge = ({\n  badge,\n  className = undefined,\n  size: sizeProp = Size.SMALL,\n  border = Theme.LIGHT,\n  'aria-label': ariaLabel,\n  children,\n  style,\n}: BadgeProps) => {\n  const size = mapLegacySize[sizeProp] ?? sizeProp;\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} style={style}>\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":["mapLegacySize","Size","SMALL","LARGE","String","MEDIUM","Badge","badge","className","undefined","size","sizeProp","border","Theme","LIGHT","ariaLabel","children","style","classes","clsx","_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAqCA,MAAMA,aAAa,GAAG;EACpB,EAAE,EAAEC,IAAI,CAACC,KAAK;EACd,EAAE,EAAED,IAAI,CAACE,KAAK;AACd;EACA,CAACC,MAAM,CAACH,IAAI,CAACI,MAAM,CAAC,GAAGJ,IAAI,CAACC;CAC7B;AAED;AACA;AACA;;AAEG;AACH,MAAMI,KAAK,GAAGA,CAAC;EACbC,KAAK;AACLC,EAAAA,SAAS,GAAGC,SAAS;AACrBC,EAAAA,IAAI,EAAEC,QAAQ,GAAGV,IAAI,CAACC,KAAK;EAC3BU,MAAM,GAAGC,KAAK,CAACC,KAAK;AACpB,EAAA,YAAY,EAAEC,SAAS;EACvBC,QAAQ;AACRC,EAAAA;AAAK,CACM,KAAI;AACf,EAAA,MAAMP,IAAI,GAAGV,aAAa,CAACW,QAAQ,CAAC,IAAIA,QAAQ;AAChD,EAAA,MAAMO,OAAO,GAAWC,IAAI,CAC1B,UAAU,EACV;AACE,IAAA,CAAC,CAAA,gBAAA,EAAmBP,MAAM,CAAA,CAAE,GAAGA,MAAM;IACrC,CAAC,CAAA,SAAA,EAAYF,IAAI,CAAA,CAAE,GAAGA;GACvB,EACDF,SAAS,CACV;AAED,EAAA,oBACEY,IAAA,CAAA,KAAA,EAAA;AAAK,IAAA,YAAA,EAAYL,SAAU;AAACP,IAAAA,SAAS,EAAEU,OAAQ;AAACD,IAAAA,KAAK,EAAEA,KAAM;AAAAD,IAAAA,QAAA,gBAC3DK,GAAA,CAAA,KAAA,EAAA;AAAKb,MAAAA,SAAS,EAAC,oBAAoB;AAAAQ,MAAAA,QAAA,EAAEA;KAAc,CACnD,eAAAK,GAAA,CAAA,KAAA,EAAA;AAAKb,MAAAA,SAAS,EAAC,mBAAmB;AAAAQ,MAAAA,QAAA,EAAET;AAAK,KAAM,CACjD;AAAA,GAAK,CAAC;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';\nimport type { BadgeAssetsProps } from '.';\n\n/**\n * @deprecated Use `16` or `24` instead.\n */\ntype DeprecatedSizes = SizeSmall | SizeMedium | SizeLarge;\n\n/**\n * @deprecated `Badge` is deprecated please use `<AvatarView badge={..} />` instead\n */\nexport type BadgeProps = {\n  badge: ReactNode;\n  children: ReactNode;\n  /**\n   * `md` is deprecated, it will fallback to `sm` instead.\n   * @default 'sm'\n   */\n  size?: DeprecatedSizes | BadgeAssetsProps['size'];\n  /** @default 'light' */\n  border?: ThemeDark | ThemeLight;\n  'aria-label'?: string;\n  style?: React.CSSProperties;\n} & CommonProps;\n\nconst mapLegacySize = {\n  16: Size.SMALL,\n  24: Size.LARGE,\n  // medium is no longer exists, so we map it to small\n  [String(Size.MEDIUM)]: Size.SMALL,\n};\n\n// Note: Badge component is not deprecated, we want stop it's direct usage on consumer side.\n// Deprecation notice will hint consumers to migrate. Eventually the component will become internal.\n/**\n * @deprecated Use `<AvatarView badge={..} />` instead.\n */\nconst Badge = ({\n  badge,\n  className = undefined,\n  size: sizeProp = Size.SMALL,\n  border = Theme.LIGHT,\n  'aria-label': ariaLabel,\n  children,\n  style,\n}: BadgeProps) => {\n  const size = mapLegacySize[sizeProp] ?? sizeProp;\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} style={style}>\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":["mapLegacySize","Size","SMALL","LARGE","String","MEDIUM","Badge","badge","className","undefined","size","sizeProp","border","Theme","LIGHT","ariaLabel","children","style","classes","clsx","_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCA,MAAMA,aAAa,GAAG;EACpB,EAAE,EAAEC,IAAI,CAACC,KAAK;EACd,EAAE,EAAED,IAAI,CAACE,KAAK;AACd;EACA,CAACC,MAAM,CAACH,IAAI,CAACI,MAAM,CAAC,GAAGJ,IAAI,CAACC;CAC7B;AAED;AACA;AACA;;AAEG;AACH,MAAMI,KAAK,GAAGA,CAAC;EACbC,KAAK;AACLC,EAAAA,SAAS,GAAGC,SAAS;AACrBC,EAAAA,IAAI,EAAEC,QAAQ,GAAGV,IAAI,CAACC,KAAK;EAC3BU,MAAM,GAAGC,KAAK,CAACC,KAAK;AACpB,EAAA,YAAY,EAAEC,SAAS;EACvBC,QAAQ;AACRC,EAAAA;AAAK,CACM,KAAI;AACf,EAAA,MAAMP,IAAI,GAAGV,aAAa,CAACW,QAAQ,CAAC,IAAIA,QAAQ;AAChD,EAAA,MAAMO,OAAO,GAAWC,IAAI,CAC1B,UAAU,EACV;AACE,IAAA,CAAC,CAAA,gBAAA,EAAmBP,MAAM,CAAA,CAAE,GAAGA,MAAM;IACrC,CAAC,CAAA,SAAA,EAAYF,IAAI,CAAA,CAAE,GAAGA;GACvB,EACDF,SAAS,CACV;AAED,EAAA,oBACEY,IAAA,CAAA,KAAA,EAAA;AAAK,IAAA,YAAA,EAAYL,SAAU;AAACP,IAAAA,SAAS,EAAEU,OAAQ;AAACD,IAAAA,KAAK,EAAEA,KAAM;AAAAD,IAAAA,QAAA,gBAC3DK,GAAA,CAAA,KAAA,EAAA;AAAKb,MAAAA,SAAS,EAAC,oBAAoB;AAAAQ,MAAAA,QAAA,EAAEA;KAAc,CACnD,eAAAK,GAAA,CAAA,KAAA,EAAA;AAAKb,MAAAA,SAAS,EAAC,mBAAmB;AAAAQ,MAAAA,QAAA,EAAET;AAAK,KAAM,CACjD;AAAA,GAAK,CAAC;AAEV;;;;"}

package/build/badge/BadgeAssets.js

@@ -50,7 +50,8 @@ function BadgeAssets({
       size: size,
       fixedSize: true,
       style: {
-        backgroundColor: type === 'action' ? 'var(--color-interactive-accent)' : 'var(--color-background-neutral)'
+        backgroundColor: type === 'action' ? 'var(--color-interactive-accent)' : 'var(--color-background-neutral)',
+        color: type === 'action' ? 'var(--color-interactive-control)' : 'var(--color-content-primary)'
       },
       children: icon ?? /*#__PURE__*/jsxRuntime.jsx(icons.Plus, {})
     });

package/build/badge/BadgeAssets.js.map

@@ -1 +1 @@
-{"version":3,"file":"BadgeAssets.js","sources":["../../src/badge/BadgeAssets.tsx"],"sourcesContent":["import { Plus } from '@transferwise/icons';\nimport { Flag } from '@wise/art';\nimport StatusIcon, { StatusIconProps } from '../statusIcon';\nimport Circle from '../common/circle';\nimport Image from '../image';\n\nexport type Props = {\n  status?: StatusIconProps['sentiment'];\n  flagCode?: string;\n  imgSrc?: string;\n  icon?: React.ReactNode;\n  type?: 'action' | 'reference' | 'notification' | 'online';\n  size?: 16 | 24;\n};\n\n/**\n * Common pre-built badge variants.\n */\nexport default function BadgeAssets({\n  status,\n  flagCode,\n  imgSrc,\n  icon = null,\n  type = 'action',\n  size,\n}: Props) {\n  if (status) {\n    return <StatusIcon sentiment={status} size={size} />;\n  }\n  if (flagCode) {\n    return (\n      <Circle size={size} fixedSize enableBorder>\n        <Flag code={flagCode} intrinsicSize={size} />\n      </Circle>\n    );\n  }\n  if (imgSrc) {\n    return (\n      <Circle size={size} fixedSize enableBorder>\n        <Image src={imgSrc} alt=\"\" />\n      </Circle>\n    );\n  }\n  if (['action', 'reference'].includes(type)) {\n    return (\n      <Circle\n        size={size}\n        fixedSize\n        style={{\n          backgroundColor:\n            type === 'action'\n              ? 'var(--color-interactive-accent)'\n              : 'var(--color-background-neutral)',\n        }}\n      >\n        {icon ?? <Plus />}\n      </Circle>\n    );\n  }\n  return null;\n}\n"],"names":["BadgeAssets","status","flagCode","imgSrc","icon","type","size","_jsx","StatusIcon","sentiment","Circle","fixedSize","enableBorder","children","Flag","code","intrinsicSize","Image","src","alt","includes","style","backgroundColor","Plus"],"mappings":";;;;;;;;;;;AAkBc,SAAUA,WAAWA,CAAC;EAClCC,MAAM;EACNC,QAAQ;EACRC,MAAM;AACNC,EAAAA,IAAI,GAAG,IAAI;AACXC,EAAAA,IAAI,GAAG,QAAQ;AACfC,EAAAA;AAAI,CACE,EAAA;AACN,EAAA,IAAIL,MAAM,EAAE;IACV,oBAAOM,cAAA,CAACC,kBAAU,EAAA;AAACC,MAAAA,SAAS,EAAER,MAAO;AAACK,MAAAA,IAAI,EAAEA;AAAK,MAAG;AACtD,EAAA;AACA,EAAA,IAAIJ,QAAQ,EAAE;IACZ,oBACEK,cAAA,CAACG,cAAM,EAAA;AAACJ,MAAAA,IAAI,EAAEA,IAAK;MAACK,SAAS,EAAA,IAAA;MAACC,YAAY,EAAA,IAAA;MAAAC,QAAA,eACxCN,cAAA,CAACO,QAAI,EAAA;AAACC,QAAAA,IAAI,EAAEb,QAAS;AAACc,QAAAA,aAAa,EAAEV;OAAK;AAC5C,KAAQ,CAAC;AAEb,EAAA;AACA,EAAA,IAAIH,MAAM,EAAE;IACV,oBACEI,cAAA,CAACG,cAAM,EAAA;AAACJ,MAAAA,IAAI,EAAEA,IAAK;MAACK,SAAS,EAAA,IAAA;MAACC,YAAY,EAAA,IAAA;MAAAC,QAAA,eACxCN,cAAA,CAACU,aAAK,EAAA;AAACC,QAAAA,GAAG,EAAEf,MAAO;AAACgB,QAAAA,GAAG,EAAC;OAAE;AAC5B,KAAQ,CAAC;AAEb,EAAA;EACA,IAAI,CAAC,QAAQ,EAAE,WAAW,CAAC,CAACC,QAAQ,CAACf,IAAI,CAAC,EAAE;IAC1C,oBACEE,cAAA,CAACG,cAAM,EAAA;AACLJ,MAAAA,IAAI,EAAEA,IAAK;MACXK,SAAS,EAAA,IAAA;AACTU,MAAAA,KAAK,EAAE;AACLC,QAAAA,eAAe,EACbjB,IAAI,KAAK,QAAQ,GACb,iCAAiC,GACjC;OACN;AAAAQ,MAAAA,QAAA,EAEDT,IAAI,iBAAIG,cAAA,CAACgB,UAAI,EAAA;AAAG,KACX,CAAC;AAEb,EAAA;AACA,EAAA,OAAO,IAAI;AACb;;;;"}
+{"version":3,"file":"BadgeAssets.js","sources":["../../src/badge/BadgeAssets.tsx"],"sourcesContent":["import { Plus } from '@transferwise/icons';\nimport { Flag } from '@wise/art';\nimport StatusIcon, { StatusIconProps } from '../statusIcon';\nimport Circle from '../common/circle';\nimport Image from '../image';\n\nexport type Props = {\n  status?: StatusIconProps['sentiment'];\n  flagCode?: string;\n  imgSrc?: string;\n  icon?: React.ReactNode;\n  type?: 'action' | 'reference' | 'notification' | 'online';\n  size?: 16 | 24;\n};\n\n/**\n * Common pre-built badge variants.\n */\nexport default function BadgeAssets({\n  status,\n  flagCode,\n  imgSrc,\n  icon = null,\n  type = 'action',\n  size,\n}: Props) {\n  if (status) {\n    return <StatusIcon sentiment={status} size={size} />;\n  }\n  if (flagCode) {\n    return (\n      <Circle size={size} fixedSize enableBorder>\n        <Flag code={flagCode} intrinsicSize={size} />\n      </Circle>\n    );\n  }\n  if (imgSrc) {\n    return (\n      <Circle size={size} fixedSize enableBorder>\n        <Image src={imgSrc} alt=\"\" />\n      </Circle>\n    );\n  }\n  if (['action', 'reference'].includes(type)) {\n    return (\n      <Circle\n        size={size}\n        fixedSize\n        style={{\n          backgroundColor:\n            type === 'action'\n              ? 'var(--color-interactive-accent)'\n              : 'var(--color-background-neutral)',\n          color:\n            type === 'action' ? 'var(--color-interactive-control)' : 'var(--color-content-primary)',\n        }}\n      >\n        {icon ?? <Plus />}\n      </Circle>\n    );\n  }\n  return null;\n}\n"],"names":["BadgeAssets","status","flagCode","imgSrc","icon","type","size","_jsx","StatusIcon","sentiment","Circle","fixedSize","enableBorder","children","Flag","code","intrinsicSize","Image","src","alt","includes","style","backgroundColor","color","Plus"],"mappings":";;;;;;;;;;;AAkBc,SAAUA,WAAWA,CAAC;EAClCC,MAAM;EACNC,QAAQ;EACRC,MAAM;AACNC,EAAAA,IAAI,GAAG,IAAI;AACXC,EAAAA,IAAI,GAAG,QAAQ;AACfC,EAAAA;AAAI,CACE,EAAA;AACN,EAAA,IAAIL,MAAM,EAAE;IACV,oBAAOM,cAAA,CAACC,kBAAU,EAAA;AAACC,MAAAA,SAAS,EAAER,MAAO;AAACK,MAAAA,IAAI,EAAEA;AAAK,MAAG;AACtD,EAAA;AACA,EAAA,IAAIJ,QAAQ,EAAE;IACZ,oBACEK,cAAA,CAACG,cAAM,EAAA;AAACJ,MAAAA,IAAI,EAAEA,IAAK;MAACK,SAAS,EAAA,IAAA;MAACC,YAAY,EAAA,IAAA;MAAAC,QAAA,eACxCN,cAAA,CAACO,QAAI,EAAA;AAACC,QAAAA,IAAI,EAAEb,QAAS;AAACc,QAAAA,aAAa,EAAEV;OAAK;AAC5C,KAAQ,CAAC;AAEb,EAAA;AACA,EAAA,IAAIH,MAAM,EAAE;IACV,oBACEI,cAAA,CAACG,cAAM,EAAA;AAACJ,MAAAA,IAAI,EAAEA,IAAK;MAACK,SAAS,EAAA,IAAA;MAACC,YAAY,EAAA,IAAA;MAAAC,QAAA,eACxCN,cAAA,CAACU,aAAK,EAAA;AAACC,QAAAA,GAAG,EAAEf,MAAO;AAACgB,QAAAA,GAAG,EAAC;OAAE;AAC5B,KAAQ,CAAC;AAEb,EAAA;EACA,IAAI,CAAC,QAAQ,EAAE,WAAW,CAAC,CAACC,QAAQ,CAACf,IAAI,CAAC,EAAE;IAC1C,oBACEE,cAAA,CAACG,cAAM,EAAA;AACLJ,MAAAA,IAAI,EAAEA,IAAK;MACXK,SAAS,EAAA,IAAA;AACTU,MAAAA,KAAK,EAAE;AACLC,QAAAA,eAAe,EACbjB,IAAI,KAAK,QAAQ,GACb,iCAAiC,GACjC,iCAAiC;AACvCkB,QAAAA,KAAK,EACHlB,IAAI,KAAK,QAAQ,GAAG,kCAAkC,GAAG;OAC3D;AAAAQ,MAAAA,QAAA,EAEDT,IAAI,iBAAIG,cAAA,CAACiB,UAAI,EAAA;AAAG,KACX,CAAC;AAEb,EAAA;AACA,EAAA,OAAO,IAAI;AACb;;;;"}

package/build/badge/BadgeAssets.mjs

@@ -46,7 +46,8 @@ function BadgeAssets({
       size: size,
       fixedSize: true,
       style: {
-        backgroundColor: type === 'action' ? 'var(--color-interactive-accent)' : 'var(--color-background-neutral)'
+        backgroundColor: type === 'action' ? 'var(--color-interactive-accent)' : 'var(--color-background-neutral)',
+        color: type === 'action' ? 'var(--color-interactive-control)' : 'var(--color-content-primary)'
       },
       children: icon ?? /*#__PURE__*/jsx(Plus, {})
     });

package/build/badge/BadgeAssets.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"BadgeAssets.mjs","sources":["../../src/badge/BadgeAssets.tsx"],"sourcesContent":["import { Plus } from '@transferwise/icons';\nimport { Flag } from '@wise/art';\nimport StatusIcon, { StatusIconProps } from '../statusIcon';\nimport Circle from '../common/circle';\nimport Image from '../image';\n\nexport type Props = {\n  status?: StatusIconProps['sentiment'];\n  flagCode?: string;\n  imgSrc?: string;\n  icon?: React.ReactNode;\n  type?: 'action' | 'reference' | 'notification' | 'online';\n  size?: 16 | 24;\n};\n\n/**\n * Common pre-built badge variants.\n */\nexport default function BadgeAssets({\n  status,\n  flagCode,\n  imgSrc,\n  icon = null,\n  type = 'action',\n  size,\n}: Props) {\n  if (status) {\n    return <StatusIcon sentiment={status} size={size} />;\n  }\n  if (flagCode) {\n    return (\n      <Circle size={size} fixedSize enableBorder>\n        <Flag code={flagCode} intrinsicSize={size} />\n      </Circle>\n    );\n  }\n  if (imgSrc) {\n    return (\n      <Circle size={size} fixedSize enableBorder>\n        <Image src={imgSrc} alt=\"\" />\n      </Circle>\n    );\n  }\n  if (['action', 'reference'].includes(type)) {\n    return (\n      <Circle\n        size={size}\n        fixedSize\n        style={{\n          backgroundColor:\n            type === 'action'\n              ? 'var(--color-interactive-accent)'\n              : 'var(--color-background-neutral)',\n        }}\n      >\n        {icon ?? <Plus />}\n      </Circle>\n    );\n  }\n  return null;\n}\n"],"names":["BadgeAssets","status","flagCode","imgSrc","icon","type","size","_jsx","StatusIcon","sentiment","Circle","fixedSize","enableBorder","children","Flag","code","intrinsicSize","Image","src","alt","includes","style","backgroundColor","Plus"],"mappings":";;;;;;;AAkBc,SAAUA,WAAWA,CAAC;EAClCC,MAAM;EACNC,QAAQ;EACRC,MAAM;AACNC,EAAAA,IAAI,GAAG,IAAI;AACXC,EAAAA,IAAI,GAAG,QAAQ;AACfC,EAAAA;AAAI,CACE,EAAA;AACN,EAAA,IAAIL,MAAM,EAAE;IACV,oBAAOM,GAAA,CAACC,UAAU,EAAA;AAACC,MAAAA,SAAS,EAAER,MAAO;AAACK,MAAAA,IAAI,EAAEA;AAAK,MAAG;AACtD,EAAA;AACA,EAAA,IAAIJ,QAAQ,EAAE;IACZ,oBACEK,GAAA,CAACG,MAAM,EAAA;AAACJ,MAAAA,IAAI,EAAEA,IAAK;MAACK,SAAS,EAAA,IAAA;MAACC,YAAY,EAAA,IAAA;MAAAC,QAAA,eACxCN,GAAA,CAACO,IAAI,EAAA;AAACC,QAAAA,IAAI,EAAEb,QAAS;AAACc,QAAAA,aAAa,EAAEV;OAAK;AAC5C,KAAQ,CAAC;AAEb,EAAA;AACA,EAAA,IAAIH,MAAM,EAAE;IACV,oBACEI,GAAA,CAACG,MAAM,EAAA;AAACJ,MAAAA,IAAI,EAAEA,IAAK;MAACK,SAAS,EAAA,IAAA;MAACC,YAAY,EAAA,IAAA;MAAAC,QAAA,eACxCN,GAAA,CAACU,KAAK,EAAA;AAACC,QAAAA,GAAG,EAAEf,MAAO;AAACgB,QAAAA,GAAG,EAAC;OAAE;AAC5B,KAAQ,CAAC;AAEb,EAAA;EACA,IAAI,CAAC,QAAQ,EAAE,WAAW,CAAC,CAACC,QAAQ,CAACf,IAAI,CAAC,EAAE;IAC1C,oBACEE,GAAA,CAACG,MAAM,EAAA;AACLJ,MAAAA,IAAI,EAAEA,IAAK;MACXK,SAAS,EAAA,IAAA;AACTU,MAAAA,KAAK,EAAE;AACLC,QAAAA,eAAe,EACbjB,IAAI,KAAK,QAAQ,GACb,iCAAiC,GACjC;OACN;AAAAQ,MAAAA,QAAA,EAEDT,IAAI,iBAAIG,GAAA,CAACgB,IAAI,EAAA;AAAG,KACX,CAAC;AAEb,EAAA;AACA,EAAA,OAAO,IAAI;AACb;;;;"}
+{"version":3,"file":"BadgeAssets.mjs","sources":["../../src/badge/BadgeAssets.tsx"],"sourcesContent":["import { Plus } from '@transferwise/icons';\nimport { Flag } from '@wise/art';\nimport StatusIcon, { StatusIconProps } from '../statusIcon';\nimport Circle from '../common/circle';\nimport Image from '../image';\n\nexport type Props = {\n  status?: StatusIconProps['sentiment'];\n  flagCode?: string;\n  imgSrc?: string;\n  icon?: React.ReactNode;\n  type?: 'action' | 'reference' | 'notification' | 'online';\n  size?: 16 | 24;\n};\n\n/**\n * Common pre-built badge variants.\n */\nexport default function BadgeAssets({\n  status,\n  flagCode,\n  imgSrc,\n  icon = null,\n  type = 'action',\n  size,\n}: Props) {\n  if (status) {\n    return <StatusIcon sentiment={status} size={size} />;\n  }\n  if (flagCode) {\n    return (\n      <Circle size={size} fixedSize enableBorder>\n        <Flag code={flagCode} intrinsicSize={size} />\n      </Circle>\n    );\n  }\n  if (imgSrc) {\n    return (\n      <Circle size={size} fixedSize enableBorder>\n        <Image src={imgSrc} alt=\"\" />\n      </Circle>\n    );\n  }\n  if (['action', 'reference'].includes(type)) {\n    return (\n      <Circle\n        size={size}\n        fixedSize\n        style={{\n          backgroundColor:\n            type === 'action'\n              ? 'var(--color-interactive-accent)'\n              : 'var(--color-background-neutral)',\n          color:\n            type === 'action' ? 'var(--color-interactive-control)' : 'var(--color-content-primary)',\n        }}\n      >\n        {icon ?? <Plus />}\n      </Circle>\n    );\n  }\n  return null;\n}\n"],"names":["BadgeAssets","status","flagCode","imgSrc","icon","type","size","_jsx","StatusIcon","sentiment","Circle","fixedSize","enableBorder","children","Flag","code","intrinsicSize","Image","src","alt","includes","style","backgroundColor","color","Plus"],"mappings":";;;;;;;AAkBc,SAAUA,WAAWA,CAAC;EAClCC,MAAM;EACNC,QAAQ;EACRC,MAAM;AACNC,EAAAA,IAAI,GAAG,IAAI;AACXC,EAAAA,IAAI,GAAG,QAAQ;AACfC,EAAAA;AAAI,CACE,EAAA;AACN,EAAA,IAAIL,MAAM,EAAE;IACV,oBAAOM,GAAA,CAACC,UAAU,EAAA;AAACC,MAAAA,SAAS,EAAER,MAAO;AAACK,MAAAA,IAAI,EAAEA;AAAK,MAAG;AACtD,EAAA;AACA,EAAA,IAAIJ,QAAQ,EAAE;IACZ,oBACEK,GAAA,CAACG,MAAM,EAAA;AAACJ,MAAAA,IAAI,EAAEA,IAAK;MAACK,SAAS,EAAA,IAAA;MAACC,YAAY,EAAA,IAAA;MAAAC,QAAA,eACxCN,GAAA,CAACO,IAAI,EAAA;AAACC,QAAAA,IAAI,EAAEb,QAAS;AAACc,QAAAA,aAAa,EAAEV;OAAK;AAC5C,KAAQ,CAAC;AAEb,EAAA;AACA,EAAA,IAAIH,MAAM,EAAE;IACV,oBACEI,GAAA,CAACG,MAAM,EAAA;AAACJ,MAAAA,IAAI,EAAEA,IAAK;MAACK,SAAS,EAAA,IAAA;MAACC,YAAY,EAAA,IAAA;MAAAC,QAAA,eACxCN,GAAA,CAACU,KAAK,EAAA;AAACC,QAAAA,GAAG,EAAEf,MAAO;AAACgB,QAAAA,GAAG,EAAC;OAAE;AAC5B,KAAQ,CAAC;AAEb,EAAA;EACA,IAAI,CAAC,QAAQ,EAAE,WAAW,CAAC,CAACC,QAAQ,CAACf,IAAI,CAAC,EAAE;IAC1C,oBACEE,GAAA,CAACG,MAAM,EAAA;AACLJ,MAAAA,IAAI,EAAEA,IAAK;MACXK,SAAS,EAAA,IAAA;AACTU,MAAAA,KAAK,EAAE;AACLC,QAAAA,eAAe,EACbjB,IAAI,KAAK,QAAQ,GACb,iCAAiC,GACjC,iCAAiC;AACvCkB,QAAAA,KAAK,EACHlB,IAAI,KAAK,QAAQ,GAAG,kCAAkC,GAAG;OAC3D;AAAAQ,MAAAA,QAAA,EAEDT,IAAI,iBAAIG,GAAA,CAACiB,IAAI,EAAA;AAAG,KACX,CAAC;AAEb,EAAA;AACA,EAAA,OAAO,IAAI;AACb;;;;"}

package/build/button/Button.js

@@ -10,8 +10,8 @@ var ProcessIndicator = require('../processIndicator/ProcessIndicator.js');
 var clsx = require('clsx');
 require('../common/theme.js');
 require('../common/direction.js');
+require('@transferwise/neptune-tokens');
 require('../common/propsValues/control.js');
-require('../common/propsValues/breakpoint.js');
 require('../common/propsValues/size.js');
 var typography = require('../common/propsValues/typography.js');
 require('../common/propsValues/width.js');
@@ -27,6 +27,7 @@ require('../common/propsValues/variant.js');
 require('../common/propsValues/scroll.js');
 require('../common/propsValues/markdownNodeType.js');
 require('../common/fileType.js');
+require('@transferwise/formatting');
 require('@transferwise/icons');
 require('react-intl');
 require('../common/closeButton/CloseButton.messages.js');

package/build/button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../src/button/Button.tsx"],"sourcesContent":["/* eslint-disable react/display-name */\n/* eslint-disable @typescript-eslint/no-unsafe-assignment */\nimport { forwardRef } from 'react';\nimport { ButtonReferenceType, ButtonProps as NewButtonProps } from './Button.types';\nimport { PrimitiveAnchor, PrimitiveButton } from '../primitives';\nimport AvatarLayout from '../avatarLayout';\nimport ProcessIndicator from '../processIndicator';\nimport { clsx } from 'clsx';\nimport { Typography } from '../common';\nimport Body from '../body';\nimport type { CommonProps, LegacyButtonProps, ButtonProps } from './LegacyButton';\n\nconst Button = forwardRef<ButtonReferenceType, NewButtonProps>(\n  (\n    {\n      as,\n      children,\n      className,\n      size = 'lg',\n      href,\n      disabled = false,\n      priority = 'primary',\n      sentiment = 'default',\n      addonStart,\n      addonEnd,\n      // @ts-expect-error NewButtonProps has `type` prop\n      type = 'button',\n      loading = false,\n      block = false,\n      v2,\n      ...props\n    },\n    ref,\n  ) => {\n    const classNames = clsx(\n      'wds-Button',\n      {\n        [`wds-Button--block`]: block,\n        [`wds-Button--disabled`]: disabled,\n        [`wds-Button--loading`]: loading,\n      },\n      `wds-Button--${{ sm: 'small', md: 'medium', lg: 'large' }[size]}`,\n      `wds-Button--${priority}`,\n      `wds-Button--${sentiment}`,\n      className,\n    );\n\n    const contentClassNames = clsx('wds-Button-content', {\n      [`wds-Button-content--loading`]: loading,\n    });\n\n    const content = (\n      <Body\n        as=\"span\"\n        type={size === 'sm' ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_LARGE_BOLD}\n        className={contentClassNames}\n      >\n        {loading && (\n          <ProcessIndicator\n            size={size === 'sm' ? 'xxs' : 'xs'}\n            className=\"wds-Button-loader\"\n            data-testid=\"button-loader-indicator\"\n          />\n        )}\n        <span\n          className=\"wds-Button-label\"\n          id={props.id ? `${props.id}_content` : undefined}\n          aria-hidden={loading}\n        >\n          {size === 'lg' ? (\n            <span className=\"wds-Button-labelText\">{children}</span>\n          ) : (\n            <>\n              {size === 'md' && addonStart?.type === 'avatar' && addonStart.value && (\n                <span className=\"wds-Button-avatars\">\n                  <AvatarLayout orientation=\"horizontal\" avatars={addonStart?.value} size={24} />\n                </span>\n              )}\n\n              {addonStart?.type === 'icon' && addonStart.value && (\n                <span className={`wds-Button-icon wds-Button-icon--${size} wds-Button-icon--start`}>\n                  {addonStart.value}\n                </span>\n              )}\n\n              <span className=\"wds-Button-labelText\">{children}</span>\n\n              {addonEnd?.type === 'icon' && addonEnd?.value && (\n                <span className={`wds-Button-icon wds-Button-icon--${size} wds-Button-icon--end`}>\n                  {addonEnd.value}\n                </span>\n              )}\n            </>\n          )}\n        </span>\n      </Body>\n    );\n\n    if ((href && as !== 'button') || as === 'a') {\n      return (\n        <PrimitiveAnchor\n          ref={ref as React.Ref<HTMLAnchorElement>}\n          {...(props as any)}\n          href={href}\n          className={classNames}\n          disabled={disabled || loading}\n          aria-busy={loading || undefined}\n          type={undefined}\n        >\n          {content}\n        </PrimitiveAnchor>\n      );\n    }\n\n    return (\n      <PrimitiveButton\n        ref={ref as React.Ref<HTMLButtonElement>}\n        {...(props as any)}\n        className={classNames}\n        disabled={disabled}\n        loading={loading}\n        type={type}\n        href={undefined}\n        target={undefined}\n      >\n        {content}\n      </PrimitiveButton>\n    );\n  },\n);\n\nexport default Button;\n\n// re-export APIs for backwards compatibility with legacy Button interface\n// delete this when migration to new Button is done (or aleast no more deep imports, use following query)\n// https://github.com/search?q=org%3Atransferwise+%2Fbuild%5C%2Ftypes%5C%2Fbutton%2F+-is%3Aarchived&type=code\nexport { CommonProps, LegacyButtonProps as Props, ButtonProps };\n"],"names":["Button","forwardRef","as","children","className","size","href","disabled","priority","sentiment","addonStart","addonEnd","type","loading","block","v2","props","ref","classNames","clsx","sm","md","lg","contentClassNames","content","_jsxs","Body","Typography","BODY_DEFAULT_BOLD","BODY_LARGE_BOLD","_jsx","ProcessIndicator","id","undefined","_Fragment","value","AvatarLayout","orientation","avatars","PrimitiveAnchor","PrimitiveButton","target"],"mappings":"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"}
+{"version":3,"file":"Button.js","sources":["../../src/button/Button.tsx"],"sourcesContent":["/* eslint-disable react/display-name */\n/* eslint-disable @typescript-eslint/no-unsafe-assignment */\nimport { forwardRef } from 'react';\nimport { ButtonReferenceType, ButtonProps as NewButtonProps } from './Button.types';\nimport { PrimitiveAnchor, PrimitiveButton } from '../primitives';\nimport AvatarLayout from '../avatarLayout';\nimport ProcessIndicator from '../processIndicator';\nimport { clsx } from 'clsx';\nimport { Typography } from '../common';\nimport Body from '../body';\nimport type { CommonProps, LegacyButtonProps, ButtonProps } from './LegacyButton';\n\nconst Button = forwardRef<ButtonReferenceType, NewButtonProps>(\n  (\n    {\n      as,\n      children,\n      className,\n      size = 'lg',\n      href,\n      disabled = false,\n      priority = 'primary',\n      sentiment = 'default',\n      addonStart,\n      addonEnd,\n      // @ts-expect-error NewButtonProps has `type` prop\n      type = 'button',\n      loading = false,\n      block = false,\n      v2,\n      ...props\n    },\n    ref,\n  ) => {\n    const classNames = clsx(\n      'wds-Button',\n      {\n        [`wds-Button--block`]: block,\n        [`wds-Button--disabled`]: disabled,\n        [`wds-Button--loading`]: loading,\n      },\n      `wds-Button--${{ sm: 'small', md: 'medium', lg: 'large' }[size]}`,\n      `wds-Button--${priority}`,\n      `wds-Button--${sentiment}`,\n      className,\n    );\n\n    const contentClassNames = clsx('wds-Button-content', {\n      [`wds-Button-content--loading`]: loading,\n    });\n\n    const content = (\n      <Body\n        as=\"span\"\n        type={size === 'sm' ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_LARGE_BOLD}\n        className={contentClassNames}\n      >\n        {loading && (\n          <ProcessIndicator\n            size={size === 'sm' ? 'xxs' : 'xs'}\n            className=\"wds-Button-loader\"\n            data-testid=\"button-loader-indicator\"\n          />\n        )}\n        <span\n          className=\"wds-Button-label\"\n          id={props.id ? `${props.id}_content` : undefined}\n          aria-hidden={loading}\n        >\n          {size === 'lg' ? (\n            <span className=\"wds-Button-labelText\">{children}</span>\n          ) : (\n            <>\n              {size === 'md' && addonStart?.type === 'avatar' && addonStart.value && (\n                <span className=\"wds-Button-avatars\">\n                  <AvatarLayout orientation=\"horizontal\" avatars={addonStart?.value} size={24} />\n                </span>\n              )}\n\n              {addonStart?.type === 'icon' && addonStart.value && (\n                <span className={`wds-Button-icon wds-Button-icon--${size} wds-Button-icon--start`}>\n                  {addonStart.value}\n                </span>\n              )}\n\n              <span className=\"wds-Button-labelText\">{children}</span>\n\n              {addonEnd?.type === 'icon' && addonEnd?.value && (\n                <span className={`wds-Button-icon wds-Button-icon--${size} wds-Button-icon--end`}>\n                  {addonEnd.value}\n                </span>\n              )}\n            </>\n          )}\n        </span>\n      </Body>\n    );\n\n    if ((href && as !== 'button') || as === 'a') {\n      return (\n        <PrimitiveAnchor\n          ref={ref as React.Ref<HTMLAnchorElement>}\n          {...(props as any)}\n          href={href}\n          className={classNames}\n          disabled={disabled || loading}\n          aria-busy={loading || undefined}\n          type={undefined}\n        >\n          {content}\n        </PrimitiveAnchor>\n      );\n    }\n\n    return (\n      <PrimitiveButton\n        ref={ref as React.Ref<HTMLButtonElement>}\n        {...(props as any)}\n        className={classNames}\n        disabled={disabled}\n        loading={loading}\n        type={type}\n        href={undefined}\n        target={undefined}\n      >\n        {content}\n      </PrimitiveButton>\n    );\n  },\n);\n\nexport default Button;\n\n// re-export APIs for backwards compatibility with legacy Button interface\n// delete this when migration to new Button is done (or aleast no more deep imports, use following query)\n// https://github.com/search?q=org%3Atransferwise+%2Fbuild%5C%2Ftypes%5C%2Fbutton%2F+-is%3Aarchived&type=code\nexport { CommonProps, LegacyButtonProps as Props, ButtonProps };\n"],"names":["Button","forwardRef","as","children","className","size","href","disabled","priority","sentiment","addonStart","addonEnd","type","loading","block","v2","props","ref","classNames","clsx","sm","md","lg","contentClassNames","content","_jsxs","Body","Typography","BODY_DEFAULT_BOLD","BODY_LARGE_BOLD","_jsx","ProcessIndicator","id","undefined","_Fragment","value","AvatarLayout","orientation","avatars","PrimitiveAnchor","PrimitiveButton","target"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AAWA,MAAMA,MAAM,gBAAGC,gBAAU,CACvB,CACE;EACEC,EAAE;EACFC,QAAQ;EACRC,SAAS;AACTC,EAAAA,IAAI,GAAG,IAAI;EACXC,IAAI;AACJC,EAAAA,QAAQ,GAAG,KAAK;AAChBC,EAAAA,QAAQ,GAAG,SAAS;AACpBC,EAAAA,SAAS,GAAG,SAAS;EACrBC,UAAU;EACVC,QAAQ;AACR;AACAC,EAAAA,IAAI,GAAG,QAAQ;AACfC,EAAAA,OAAO,GAAG,KAAK;AACfC,EAAAA,KAAK,GAAG,KAAK;EACbC,EAAE;EACF,GAAGC;CACJ,EACDC,GAAG,KACD;AACF,EAAA,MAAMC,UAAU,GAAGC,SAAI,CACrB,YAAY,EACZ;IACE,CAAC,CAAA,iBAAA,CAAmB,GAAGL,KAAK;IAC5B,CAAC,CAAA,oBAAA,CAAsB,GAAGP,QAAQ;AAClC,IAAA,CAAC,qBAAqB,GAAGM;AAC1B,GAAA,EACD,CAAA,YAAA,EAAe;AAAEO,IAAAA,EAAE,EAAE,OAAO;AAAEC,IAAAA,EAAE,EAAE,QAAQ;AAAEC,IAAAA,EAAE,EAAE;AAAO,GAAE,CAACjB,IAAI,CAAC,CAAA,CAAE,EACjE,CAAA,YAAA,EAAeG,QAAQ,CAAA,CAAE,EACzB,CAAA,YAAA,EAAeC,SAAS,CAAA,CAAE,EAC1BL,SAAS,CACV;AAED,EAAA,MAAMmB,iBAAiB,GAAGJ,SAAI,CAAC,oBAAoB,EAAE;AACnD,IAAA,CAAC,6BAA6B,GAAGN;AAClC,GAAA,CAAC;AAEF,EAAA,MAAMW,OAAO,gBACXC,eAAA,CAACC,YAAI,EAAA;AACHxB,IAAAA,EAAE,EAAC,MAAM;IACTU,IAAI,EAAEP,IAAI,KAAK,IAAI,GAAGsB,qBAAU,CAACC,iBAAiB,GAAGD,qBAAU,CAACE,eAAgB;AAChFzB,IAAAA,SAAS,EAAEmB,iBAAkB;AAAApB,IAAAA,QAAA,EAAA,CAE5BU,OAAO,iBACNiB,cAAA,CAACC,wBAAgB,EAAA;AACf1B,MAAAA,IAAI,EAAEA,IAAI,KAAK,IAAI,GAAG,KAAK,GAAG,IAAK;AACnCD,MAAAA,SAAS,EAAC,mBAAmB;MAC7B,aAAA,EAAY;KAAyB,CAExC,eACD0B,cAAA,CAAA,MAAA,EAAA;AACE1B,MAAAA,SAAS,EAAC,kBAAkB;MAC5B4B,EAAE,EAAEhB,KAAK,CAACgB,EAAE,GAAG,CAAA,EAAGhB,KAAK,CAACgB,EAAE,CAAA,QAAA,CAAU,GAAGC,SAAU;AACjD,MAAA,aAAA,EAAapB,OAAQ;AAAAV,MAAAA,QAAA,EAEpBE,IAAI,KAAK,IAAI,gBACZyB,cAAA,CAAA,MAAA,EAAA;AAAM1B,QAAAA,SAAS,EAAC,sBAAsB;AAAAD,QAAAA,QAAA,EAAEA;AAAQ,OAAO,CAAC,gBAExDsB,eAAA,CAAAS,mBAAA,EAAA;AAAA/B,QAAAA,QAAA,EAAA,CACGE,IAAI,KAAK,IAAI,IAAIK,UAAU,EAAEE,IAAI,KAAK,QAAQ,IAAIF,UAAU,CAACyB,KAAK,iBACjEL,cAAA,CAAA,MAAA,EAAA;AAAM1B,UAAAA,SAAS,EAAC,oBAAoB;UAAAD,QAAA,eAClC2B,cAAA,CAACM,oBAAY,EAAA;AAACC,YAAAA,WAAW,EAAC,YAAY;YAACC,OAAO,EAAE5B,UAAU,EAAEyB,KAAM;AAAC9B,YAAAA,IAAI,EAAE;WAAG;AAC9E,SAAM,CACP,EAEAK,UAAU,EAAEE,IAAI,KAAK,MAAM,IAAIF,UAAU,CAACyB,KAAK,iBAC9CL,cAAA,CAAA,MAAA,EAAA;UAAM1B,SAAS,EAAE,CAAA,iCAAA,EAAoCC,IAAI,CAAA,uBAAA,CAA0B;UAAAF,QAAA,EAChFO,UAAU,CAACyB;SACR,CACP,eAEDL,cAAA,CAAA,MAAA,EAAA;AAAM1B,UAAAA,SAAS,EAAC,sBAAsB;AAAAD,UAAAA,QAAA,EAAEA;AAAQ,SAAO,CAEvD,EAACQ,QAAQ,EAAEC,IAAI,KAAK,MAAM,IAAID,QAAQ,EAAEwB,KAAK,iBAC3CL,cAAA,CAAA,MAAA,EAAA;UAAM1B,SAAS,EAAE,CAAA,iCAAA,EAAoCC,IAAI,CAAA,qBAAA,CAAwB;UAAAF,QAAA,EAC9EQ,QAAQ,CAACwB;AAAK,SACX,CACP;OACH;AACD,KACG,CACR;AAAA,GAAM,CACP;EAED,IAAK7B,IAAI,IAAIJ,EAAE,KAAK,QAAQ,IAAKA,EAAE,KAAK,GAAG,EAAE;IAC3C,oBACE4B,cAAA,CAACS,uBAAe,EAAA;AACdtB,MAAAA,GAAG,EAAEA,GAAoC;AAAA,MAAA,GACpCD,KAAa;AAClBV,MAAAA,IAAI,EAAEA,IAAK;AACXF,MAAAA,SAAS,EAAEc,UAAW;MACtBX,QAAQ,EAAEA,QAAQ,IAAIM,OAAQ;MAC9B,WAAA,EAAWA,OAAO,IAAIoB,SAAU;AAChCrB,MAAAA,IAAI,EAAEqB,SAAU;AAAA9B,MAAAA,QAAA,EAEfqB;AAAO,KACO,CAAC;AAEtB,EAAA;EAEA,oBACEM,cAAA,CAACU,uBAAe,EAAA;AACdvB,IAAAA,GAAG,EAAEA,GAAoC;AAAA,IAAA,GACpCD,KAAa;AAClBZ,IAAAA,SAAS,EAAEc,UAAW;AACtBX,IAAAA,QAAQ,EAAEA,QAAS;AACnBM,IAAAA,OAAO,EAAEA,OAAQ;AACjBD,IAAAA,IAAI,EAAEA,IAAK;AACXN,IAAAA,IAAI,EAAE2B,SAAU;AAChBQ,IAAAA,MAAM,EAAER,SAAU;AAAA9B,IAAAA,QAAA,EAEjBqB;AAAO,GACO,CAAC;AAEtB,CAAC;;;;"}

package/build/button/Button.mjs

@@ -6,8 +6,8 @@ import ProcessIndicator from '../processIndicator/ProcessIndicator.mjs';
 import { clsx } from 'clsx';
 import '../common/theme.mjs';
 import '../common/direction.mjs';
+import '@transferwise/neptune-tokens';
 import '../common/propsValues/control.mjs';
-import '../common/propsValues/breakpoint.mjs';
 import '../common/propsValues/size.mjs';
 import { Typography } from '../common/propsValues/typography.mjs';
 import '../common/propsValues/width.mjs';
@@ -23,6 +23,7 @@ import '../common/propsValues/variant.mjs';
 import '../common/propsValues/scroll.mjs';
 import '../common/propsValues/markdownNodeType.mjs';
 import '../common/fileType.mjs';
+import '@transferwise/formatting';
 import '@transferwise/icons';
 import 'react-intl';
 import '../common/closeButton/CloseButton.messages.mjs';