@transferwise/components 46.79.1 → 46.81.0

package/build/avatar/Avatar.js

@@ -39,6 +39,9 @@ const backwardsCompatibleSize = size => {
       return size;
   }
 };
+/**
+ * @deprecated Use `AvatarView` component instead
+ */
 const Avatar = ({
   backgroundColor = null,
   backgroundColorSeed = null,

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\nexport interface AvatarProps {\n  backgroundColor?: string;\n  backgroundColorSeed?: string;\n  children?: React.ReactNode;\n  className?: string;\n  outlined?: boolean;\n  size?: AvatarSize;\n  theme?: AvatarTheme;\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\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,MAAMA,uBAAuB,GAAIC,IAAgB,IAAuB;AACtE,EAAA,QAAQA,IAAI;AACV,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE,CAAA;AAEX,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE,CAAA;AAEX,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE,CAAA;AAEX,IAAA;AACE,MAAA,OAAOA,IAAI,CAAA;AACf,GAAA;AACF,CAAC,CAAA;AAEKC,MAAAA,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,SAAAA;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,CAAA;AAED,EAAA,MAAMH,IAAI,GAAGD,uBAAuB,CAACQ,aAAa,CAAC,CAAA;AAEnD,EAAA,oBACEU,cAAA,CAAA,KAAA,EAAA;AACEZ,IAAAA,SAAS,EAAEa,SAAI,CAAC,WAAW,EAAEb,SAAS,EAAE,CAAcL,WAAAA,EAAAA,IAAI,CAAE,CAAA,EAAE,CAAcW,WAAAA,EAAAA,IAAI,EAAE,EAAE;AAClF,MAAA,qBAAqB,EAAEL,QAAQ;AAC/B,MAAA,oBAAoB,EAAEa,OAAO,CAACN,uBAAuB,CAAC;MACtD,oBAAoB,EAAEF,IAAI,KAAK,UAAA;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,uBAAAA;OACpC;AAAAT,MAAAA,QAAA,EAEDA,QAAAA;KACE,CAAA;AACP,GAAK,CAAC,CAAA;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\nexport interface AvatarProps {\n  backgroundColor?: string;\n  backgroundColorSeed?: string;\n  children?: React.ReactNode;\n  className?: string;\n  outlined?: boolean;\n  size?: AvatarSize;\n  theme?: AvatarTheme;\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,MAAMA,uBAAuB,GAAIC,IAAgB,IAAuB;AACtE,EAAA,QAAQA,IAAI;AACV,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE,CAAA;AAEX,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE,CAAA;AAEX,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE,CAAA;AAEX,IAAA;AACE,MAAA,OAAOA,IAAI,CAAA;AACf,GAAA;AACF,CAAC,CAAA;AAED;;AAEG;AACGC,MAAAA,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,SAAAA;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,CAAA;AAED,EAAA,MAAMH,IAAI,GAAGD,uBAAuB,CAACQ,aAAa,CAAC,CAAA;AAEnD,EAAA,oBACEU,cAAA,CAAA,KAAA,EAAA;AACEZ,IAAAA,SAAS,EAAEa,SAAI,CAAC,WAAW,EAAEb,SAAS,EAAE,CAAcL,WAAAA,EAAAA,IAAI,CAAE,CAAA,EAAE,CAAcW,WAAAA,EAAAA,IAAI,EAAE,EAAE;AAClF,MAAA,qBAAqB,EAAEL,QAAQ;AAC/B,MAAA,oBAAoB,EAAEa,OAAO,CAACN,uBAAuB,CAAC;MACtD,oBAAoB,EAAEF,IAAI,KAAK,UAAA;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,uBAAAA;OACpC;AAAAT,MAAAA,QAAA,EAEDA,QAAAA;KACE,CAAA;AACP,GAAK,CAAC,CAAA;AAEV;;;;"}

package/build/avatar/Avatar.mjs

@@ -37,6 +37,9 @@ const backwardsCompatibleSize = size => {
       return size;
   }
 };
+/**
+ * @deprecated Use `AvatarView` component instead
+ */
 const Avatar = ({
   backgroundColor = null,
   backgroundColorSeed = null,

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\nexport interface AvatarProps {\n  backgroundColor?: string;\n  backgroundColorSeed?: string;\n  children?: React.ReactNode;\n  className?: string;\n  outlined?: boolean;\n  size?: AvatarSize;\n  theme?: AvatarTheme;\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\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,MAAMA,uBAAuB,GAAIC,IAAgB,IAAuB;AACtE,EAAA,QAAQA,IAAI;AACV,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE,CAAA;AAEX,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE,CAAA;AAEX,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE,CAAA;AAEX,IAAA;AACE,MAAA,OAAOA,IAAI,CAAA;AACf,GAAA;AACF,CAAC,CAAA;AAEKC,MAAAA,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,SAAAA;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,CAAA;AAED,EAAA,MAAMH,IAAI,GAAGD,uBAAuB,CAACQ,aAAa,CAAC,CAAA;AAEnD,EAAA,oBACEU,GAAA,CAAA,KAAA,EAAA;AACEZ,IAAAA,SAAS,EAAEa,IAAI,CAAC,WAAW,EAAEb,SAAS,EAAE,CAAcL,WAAAA,EAAAA,IAAI,CAAE,CAAA,EAAE,CAAcW,WAAAA,EAAAA,IAAI,EAAE,EAAE;AAClF,MAAA,qBAAqB,EAAEL,QAAQ;AAC/B,MAAA,oBAAoB,EAAEa,OAAO,CAACN,uBAAuB,CAAC;MACtD,oBAAoB,EAAEF,IAAI,KAAK,UAAA;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,uBAAAA;OACpC;AAAAT,MAAAA,QAAA,EAEDA,QAAAA;KACE,CAAA;AACP,GAAK,CAAC,CAAA;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\nexport interface AvatarProps {\n  backgroundColor?: string;\n  backgroundColorSeed?: string;\n  children?: React.ReactNode;\n  className?: string;\n  outlined?: boolean;\n  size?: AvatarSize;\n  theme?: AvatarTheme;\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,MAAMA,uBAAuB,GAAIC,IAAgB,IAAuB;AACtE,EAAA,QAAQA,IAAI;AACV,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE,CAAA;AAEX,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE,CAAA;AAEX,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE,CAAA;AAEX,IAAA;AACE,MAAA,OAAOA,IAAI,CAAA;AACf,GAAA;AACF,CAAC,CAAA;AAED;;AAEG;AACGC,MAAAA,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,SAAAA;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,CAAA;AAED,EAAA,MAAMH,IAAI,GAAGD,uBAAuB,CAACQ,aAAa,CAAC,CAAA;AAEnD,EAAA,oBACEU,GAAA,CAAA,KAAA,EAAA;AACEZ,IAAAA,SAAS,EAAEa,IAAI,CAAC,WAAW,EAAEb,SAAS,EAAE,CAAcL,WAAAA,EAAAA,IAAI,CAAE,CAAA,EAAE,CAAcW,WAAAA,EAAAA,IAAI,EAAE,EAAE;AAClF,MAAA,qBAAqB,EAAEL,QAAQ;AAC/B,MAAA,oBAAoB,EAAEa,OAAO,CAACN,uBAAuB,CAAC;MACtD,oBAAoB,EAAEF,IAAI,KAAK,UAAA;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,uBAAAA;OACpC;AAAAT,MAAAA,QAAA,EAEDA,QAAAA;KACE,CAAA;AACP,GAAK,CAAC,CAAA;AAEV;;;;"}

package/build/avatarView/AvatarView.js

@@ -0,0 +1,175 @@
+'use strict';
+
+var Badge = require('../badge/Badge.js');
+var BadgeAssets = require('../badge/BadgeAssets.js');
+var NotificationDot = require('./NotificationDot.js');
+var Circle = require('../common/circle/Circle.js');
+var Image = require('../image/Image.js');
+var React = require('react');
+var clsx = require('clsx');
+require('../common/theme.js');
+require('../common/direction.js');
+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');
+require('../common/propsValues/type.js');
+require('../common/propsValues/dateMode.js');
+require('../common/propsValues/monthFormat.js');
+require('../common/propsValues/position.js');
+require('../common/propsValues/layouts.js');
+require('../common/propsValues/status.js');
+require('../common/propsValues/sentiment.js');
+var profileType = require('../common/propsValues/profileType.js');
+require('../common/propsValues/variant.js');
+require('../common/propsValues/scroll.js');
+require('../common/propsValues/markdownNodeType.js');
+require('../common/fileType.js');
+var initials = require('../common/initials.js');
+var icons = require('@transferwise/icons');
+require('react-intl');
+require('../common/closeButton/CloseButton.messages.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function AvatarView({
+  children = undefined,
+  size = 48,
+  selected,
+  notification,
+  badge,
+  interactive = false,
+  className,
+  style,
+  imgSrc,
+  profileType,
+  profileName,
+  ...restProps
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(Circle, {
+    size: size,
+    fixedSize: true,
+    className: clsx.clsx('np-avatar-view', interactive ? 'np-avatar-view-interactive' : 'np-avatar-view-non-interactive', {
+      'np-avatar-view-selected': selected
+    }, className),
+    ...restProps,
+    children: /*#__PURE__*/jsxRuntime.jsx(Badges, {
+      avatar: {
+        size,
+        notification,
+        selected
+      },
+      ...badge,
+      children: /*#__PURE__*/jsxRuntime.jsx(Circle, {
+        size: size,
+        fixedSize: true,
+        className: clsx.clsx('np-avatar-view-content'),
+        enableBorder: !interactive || selected,
+        style: {
+          ...(selected && {
+            '--circle-border-color': 'var(--color-interactive-primary)'
+          }),
+          ...style
+        },
+        children: /*#__PURE__*/jsxRuntime.jsx(AvatarViewContent, {
+          imgSrc,
+          profileType,
+          profileName,
+          children: children
+        })
+      })
+    })
+  });
+}
+/** Size of badge depends on size of avatar */
+const MAP_BADGE_ASSET_SIZE = {
+  16: 16,
+  24: 16,
+  32: 16,
+  40: 16,
+  48: 16,
+  56: 24,
+  72: 24
+};
+/** Certain sizes of AvatarView has a custom offset for badge */
+const MAP_BADGE_POSITION = {
+  24: -6,
+  32: -4
+};
+/**
+ * Adds build-in badges to AvatarView
+ */
+function Badges({
+  children,
+  avatar,
+  'aria-label': ariaLabel,
+  asset: customBadge,
+  ...badgeAssets
+}) {
+  const {
+    size = 48,
+    selected,
+    notification
+  } = avatar;
+  const anyBadge = Object.values({
+    customBadge,
+    ...badgeAssets
+  }).filter(Boolean).length > 0;
+  if ((anyBadge || selected) && size > 16) {
+    const badgeSize = MAP_BADGE_ASSET_SIZE[size];
+    return /*#__PURE__*/jsxRuntime.jsx(Badge, {
+      "aria-label": ariaLabel,
+      size: badgeSize,
+      badge: customBadge ? /*#__PURE__*/jsxRuntime.jsx(Circle, {
+        fixedSize: true,
+        size: badgeSize,
+        children: customBadge
+      }) : /*#__PURE__*/jsxRuntime.jsx(BadgeAssets, {
+        ...(selected ? {
+          status: 'positive'
+        } : badgeAssets),
+        size: badgeSize
+      }),
+      style: {
+        // @ts-expect-error CSS custom props allowed
+        '--badge-content-position': `${MAP_BADGE_POSITION[size] ?? 0}px`
+      },
+      children: children
+    });
+  }
+  if (notification) {
+    return /*#__PURE__*/jsxRuntime.jsx(NotificationDot, {
+      avatarSize: size,
+      children: children
+    });
+  }
+  return children;
+}
+function AvatarViewContent({
+  children,
+  imgSrc,
+  profileName: name,
+  profileType: type
+}) {
+  const [tryLoadImage, setTryLoadImage] = React.useState(true);
+  if (children === undefined) {
+    if (imgSrc && tryLoadImage) {
+      return /*#__PURE__*/jsxRuntime.jsx(Image.default, {
+        src: imgSrc,
+        alt: "",
+        onError: () => setTryLoadImage(false)
+      });
+    }
+    if (type) {
+      return type === profileType.ProfileType.BUSINESS ? /*#__PURE__*/jsxRuntime.jsx(icons.Briefcase, {}) : /*#__PURE__*/jsxRuntime.jsx(icons.Profile, {});
+    }
+    if (name) {
+      return initials.getInitials(name);
+    }
+    return /*#__PURE__*/jsxRuntime.jsx(icons.Profile, {});
+  }
+  return children;
+}
+
+module.exports = AvatarView;
+//# sourceMappingURL=AvatarView.js.map

package/build/avatarView/AvatarView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarView.js","sources":["../../src/avatarView/AvatarView.tsx"],"sourcesContent":["import Badge, { BadgeAssets, BadgeProps, BadgeAssetsProps } from '../badge';\nimport NotificationDot from './NotificationDot';\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 = BadgeAssetsProps &\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  notification?: boolean;\n  badge?: AvatarViewBadgeProps;\n  interactive?: boolean;\n  selected?: boolean;\n  style?: Pick<React.CSSProperties, 'border' | 'backgroundColor' | 'color'>;\n} & Pick<\n  HTMLAttributes<HTMLDivElement>,\n  'className' | 'children' | 'role' | 'aria-label' | 'aria-labelledby' | 'aria-hidden'\n>;\n\nfunction AvatarView({\n  children = undefined,\n  size = 48,\n  selected,\n  notification,\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, notification, selected }} {...badge}>\n        <Circle\n          size={size}\n          fixedSize\n          className={clsx('np-avatar-view-content')}\n          enableBorder={!interactive || selected}\n          style={{\n            ...(selected && { '--circle-border-color': 'var(--color-interactive-primary)' }),\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/** 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' | 'notification'>;\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, notification } = avatar;\n  const anyBadge = Object.values({ customBadge, ...badgeAssets }).filter(Boolean).length > 0;\n  if ((anyBadge || selected) && size > 16) {\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  if (notification) {\n    return <NotificationDot avatarSize={size}>{children}</NotificationDot>;\n  }\n  return children;\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","notification","badge","interactive","className","style","imgSrc","profileType","profileName","restProps","_jsx","Circle","fixedSize","clsx","Badges","avatar","enableBorder","AvatarViewContent","MAP_BADGE_ASSET_SIZE","MAP_BADGE_POSITION","ariaLabel","asset","customBadge","badgeAssets","anyBadge","Object","values","filter","Boolean","length","badgeSize","Badge","BadgeAssets","status","NotificationDot","avatarSize","name","type","tryLoadImage","setTryLoadImage","useState","Image","src","alt","onError","ProfileType","BUSINESS","BusinessProfileIcon","PersonalProfileIcon","getInitials"],"mappings":"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"}

package/build/avatarView/AvatarView.mjs

@@ -0,0 +1,173 @@
+import Badge from '../badge/Badge.mjs';
+import BadgeAssets from '../badge/BadgeAssets.mjs';
+import NotificationDot from './NotificationDot.mjs';
+import Circle from '../common/circle/Circle.mjs';
+import Image from '../image/Image.mjs';
+import { useState } from 'react';
+import { clsx } from 'clsx';
+import '../common/theme.mjs';
+import '../common/direction.mjs';
+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';
+import '../common/propsValues/type.mjs';
+import '../common/propsValues/dateMode.mjs';
+import '../common/propsValues/monthFormat.mjs';
+import '../common/propsValues/position.mjs';
+import '../common/propsValues/layouts.mjs';
+import '../common/propsValues/status.mjs';
+import '../common/propsValues/sentiment.mjs';
+import { ProfileType } from '../common/propsValues/profileType.mjs';
+import '../common/propsValues/variant.mjs';
+import '../common/propsValues/scroll.mjs';
+import '../common/propsValues/markdownNodeType.mjs';
+import '../common/fileType.mjs';
+import { getInitials } from '../common/initials.mjs';
+import { Briefcase, Profile } from '@transferwise/icons';
+import 'react-intl';
+import '../common/closeButton/CloseButton.messages.mjs';
+import { jsx } from 'react/jsx-runtime';
+
+function AvatarView({
+  children = undefined,
+  size = 48,
+  selected,
+  notification,
+  badge,
+  interactive = false,
+  className,
+  style,
+  imgSrc,
+  profileType,
+  profileName,
+  ...restProps
+}) {
+  return /*#__PURE__*/jsx(Circle, {
+    size: size,
+    fixedSize: true,
+    className: clsx('np-avatar-view', interactive ? 'np-avatar-view-interactive' : 'np-avatar-view-non-interactive', {
+      'np-avatar-view-selected': selected
+    }, className),
+    ...restProps,
+    children: /*#__PURE__*/jsx(Badges, {
+      avatar: {
+        size,
+        notification,
+        selected
+      },
+      ...badge,
+      children: /*#__PURE__*/jsx(Circle, {
+        size: size,
+        fixedSize: true,
+        className: clsx('np-avatar-view-content'),
+        enableBorder: !interactive || selected,
+        style: {
+          ...(selected && {
+            '--circle-border-color': 'var(--color-interactive-primary)'
+          }),
+          ...style
+        },
+        children: /*#__PURE__*/jsx(AvatarViewContent, {
+          imgSrc,
+          profileType,
+          profileName,
+          children: children
+        })
+      })
+    })
+  });
+}
+/** Size of badge depends on size of avatar */
+const MAP_BADGE_ASSET_SIZE = {
+  16: 16,
+  24: 16,
+  32: 16,
+  40: 16,
+  48: 16,
+  56: 24,
+  72: 24
+};
+/** Certain sizes of AvatarView has a custom offset for badge */
+const MAP_BADGE_POSITION = {
+  24: -6,
+  32: -4
+};
+/**
+ * Adds build-in badges to AvatarView
+ */
+function Badges({
+  children,
+  avatar,
+  'aria-label': ariaLabel,
+  asset: customBadge,
+  ...badgeAssets
+}) {
+  const {
+    size = 48,
+    selected,
+    notification
+  } = avatar;
+  const anyBadge = Object.values({
+    customBadge,
+    ...badgeAssets
+  }).filter(Boolean).length > 0;
+  if ((anyBadge || selected) && size > 16) {
+    const badgeSize = MAP_BADGE_ASSET_SIZE[size];
+    return /*#__PURE__*/jsx(Badge, {
+      "aria-label": ariaLabel,
+      size: badgeSize,
+      badge: customBadge ? /*#__PURE__*/jsx(Circle, {
+        fixedSize: true,
+        size: badgeSize,
+        children: customBadge
+      }) : /*#__PURE__*/jsx(BadgeAssets, {
+        ...(selected ? {
+          status: 'positive'
+        } : badgeAssets),
+        size: badgeSize
+      }),
+      style: {
+        // @ts-expect-error CSS custom props allowed
+        '--badge-content-position': `${MAP_BADGE_POSITION[size] ?? 0}px`
+      },
+      children: children
+    });
+  }
+  if (notification) {
+    return /*#__PURE__*/jsx(NotificationDot, {
+      avatarSize: size,
+      children: children
+    });
+  }
+  return children;
+}
+function AvatarViewContent({
+  children,
+  imgSrc,
+  profileName: name,
+  profileType: type
+}) {
+  const [tryLoadImage, setTryLoadImage] = useState(true);
+  if (children === undefined) {
+    if (imgSrc && tryLoadImage) {
+      return /*#__PURE__*/jsx(Image, {
+        src: imgSrc,
+        alt: "",
+        onError: () => setTryLoadImage(false)
+      });
+    }
+    if (type) {
+      return type === ProfileType.BUSINESS ? /*#__PURE__*/jsx(Briefcase, {}) : /*#__PURE__*/jsx(Profile, {});
+    }
+    if (name) {
+      return getInitials(name);
+    }
+    return /*#__PURE__*/jsx(Profile, {});
+  }
+  return children;
+}
+
+export { AvatarView as default };
+//# sourceMappingURL=AvatarView.mjs.map

package/build/avatarView/AvatarView.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarView.mjs","sources":["../../src/avatarView/AvatarView.tsx"],"sourcesContent":["import Badge, { BadgeAssets, BadgeProps, BadgeAssetsProps } from '../badge';\nimport NotificationDot from './NotificationDot';\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 = BadgeAssetsProps &\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  notification?: boolean;\n  badge?: AvatarViewBadgeProps;\n  interactive?: boolean;\n  selected?: boolean;\n  style?: Pick<React.CSSProperties, 'border' | 'backgroundColor' | 'color'>;\n} & Pick<\n  HTMLAttributes<HTMLDivElement>,\n  'className' | 'children' | 'role' | 'aria-label' | 'aria-labelledby' | 'aria-hidden'\n>;\n\nfunction AvatarView({\n  children = undefined,\n  size = 48,\n  selected,\n  notification,\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, notification, selected }} {...badge}>\n        <Circle\n          size={size}\n          fixedSize\n          className={clsx('np-avatar-view-content')}\n          enableBorder={!interactive || selected}\n          style={{\n            ...(selected && { '--circle-border-color': 'var(--color-interactive-primary)' }),\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/** 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' | 'notification'>;\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, notification } = avatar;\n  const anyBadge = Object.values({ customBadge, ...badgeAssets }).filter(Boolean).length > 0;\n  if ((anyBadge || selected) && size > 16) {\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  if (notification) {\n    return <NotificationDot avatarSize={size}>{children}</NotificationDot>;\n  }\n  return children;\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","notification","badge","interactive","className","style","imgSrc","profileType","profileName","restProps","_jsx","Circle","fixedSize","clsx","Badges","avatar","enableBorder","AvatarViewContent","MAP_BADGE_ASSET_SIZE","MAP_BADGE_POSITION","ariaLabel","asset","customBadge","badgeAssets","anyBadge","Object","values","filter","Boolean","length","badgeSize","Badge","BadgeAssets","status","NotificationDot","avatarSize","name","type","tryLoadImage","setTryLoadImage","useState","Image","src","alt","onError","ProfileType","BUSINESS","BusinessProfileIcon","PersonalProfileIcon","getInitials"],"mappings":"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"}

package/build/avatarView/NotificationDot.js

@@ -0,0 +1,59 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+
+/**
+ * Depending on avatar size, notifcation dot size and offset are different
+ */
+const MAP_STYLE_CONFIG = {
+  16: {
+    size: 6,
+    offset: 1
+  },
+  24: {
+    size: 8,
+    offset: 2
+  },
+  32: {
+    size: 10,
+    offset: 2
+  },
+  40: {
+    size: 10,
+    offset: 2
+  },
+  48: {
+    size: 14,
+    offset: 2
+  },
+  56: {
+    size: 16,
+    offset: 3
+  },
+  72: {
+    size: 20,
+    offset: 3
+  }
+};
+function NotificationDot({
+  children,
+  avatarSize = 48
+}) {
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "np-notification-dot",
+    style: {
+      // @ts-expect-error CSS custom props allowed
+      '--np-notification-dot-size': `${MAP_STYLE_CONFIG[avatarSize].size}px`,
+      '--np-notification-dot-offset': `${MAP_STYLE_CONFIG[avatarSize].offset}px`
+    },
+    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "np-notification-dot-badge"
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "np-notification-dot-mask",
+      children: children
+    })]
+  });
+}
+
+module.exports = NotificationDot;
+//# sourceMappingURL=NotificationDot.js.map

package/build/avatarView/NotificationDot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationDot.js","sources":["../../src/avatarView/NotificationDot.tsx"],"sourcesContent":["import { HTMLAttributes } from 'react';\nimport { Props as AvatarViewProps } from './AvatarView';\n\ntype Props = Pick<HTMLAttributes<HTMLDivElement>, 'children'> & {\n  avatarSize?: AvatarViewProps['size'];\n};\n\n/**\n * Depending on avatar size, notifcation dot size and offset are different\n */\nconst MAP_STYLE_CONFIG = {\n  16: { size: 6, offset: 1 },\n  24: { size: 8, offset: 2 },\n  32: { size: 10, offset: 2 },\n  40: { size: 10, offset: 2 },\n  48: { size: 14, offset: 2 },\n  56: { size: 16, offset: 3 },\n  72: { size: 20, offset: 3 },\n};\n\nexport default function NotificationDot({ children, avatarSize = 48 }: Props) {\n  return (\n    <div\n      className=\"np-notification-dot\"\n      style={{\n        // @ts-expect-error CSS custom props allowed\n        '--np-notification-dot-size': `${MAP_STYLE_CONFIG[avatarSize].size}px`,\n        '--np-notification-dot-offset': `${MAP_STYLE_CONFIG[avatarSize].offset}px`,\n      }}\n    >\n      <div className=\"np-notification-dot-badge\" />\n      <div className=\"np-notification-dot-mask\">{children}</div>\n    </div>\n  );\n}\n"],"names":["MAP_STYLE_CONFIG","size","offset","NotificationDot","children","avatarSize","_jsxs","className","style","_jsx"],"mappings":";;;;AAOA;;AAEG;AACH,MAAMA,gBAAgB,GAAG;AACvB,EAAA,EAAE,EAAE;AAAEC,IAAAA,IAAI,EAAE,CAAC;AAAEC,IAAAA,MAAM,EAAE,CAAA;GAAG;AAC1B,EAAA,EAAE,EAAE;AAAED,IAAAA,IAAI,EAAE,CAAC;AAAEC,IAAAA,MAAM,EAAE,CAAA;GAAG;AAC1B,EAAA,EAAE,EAAE;AAAED,IAAAA,IAAI,EAAE,EAAE;AAAEC,IAAAA,MAAM,EAAE,CAAA;GAAG;AAC3B,EAAA,EAAE,EAAE;AAAED,IAAAA,IAAI,EAAE,EAAE;AAAEC,IAAAA,MAAM,EAAE,CAAA;GAAG;AAC3B,EAAA,EAAE,EAAE;AAAED,IAAAA,IAAI,EAAE,EAAE;AAAEC,IAAAA,MAAM,EAAE,CAAA;GAAG;AAC3B,EAAA,EAAE,EAAE;AAAED,IAAAA,IAAI,EAAE,EAAE;AAAEC,IAAAA,MAAM,EAAE,CAAA;GAAG;AAC3B,EAAA,EAAE,EAAE;AAAED,IAAAA,IAAI,EAAE,EAAE;AAAEC,IAAAA,MAAM,EAAE,CAAA;AAAG,GAAA;CAC5B,CAAA;AAEa,SAAUC,eAAeA,CAAC;EAAEC,QAAQ;AAAEC,EAAAA,UAAU,GAAG,EAAA;AAAW,CAAA,EAAA;AAC1E,EAAA,oBACEC,eAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,SAAS,EAAC,qBAAqB;AAC/BC,IAAAA,KAAK,EAAE;AACL;MACA,4BAA4B,EAAE,GAAGR,gBAAgB,CAACK,UAAU,CAAC,CAACJ,IAAI,CAAI,EAAA,CAAA;AACtE,MAAA,8BAA8B,EAAE,CAAGD,EAAAA,gBAAgB,CAACK,UAAU,CAAC,CAACH,MAAM,CAAA,EAAA,CAAA;KACtE;AAAAE,IAAAA,QAAA,gBAEFK,cAAA,CAAA,KAAA,EAAA;AAAKF,MAAAA,SAAS,EAAC,2BAAA;KACf,CAAA,eAAAE,cAAA,CAAA,KAAA,EAAA;AAAKF,MAAAA,SAAS,EAAC,0BAA0B;AAAAH,MAAAA,QAAA,EAAEA,QAAAA;AAAQ,KAAM,CAC3D,CAAA;AAAA,GAAK,CAAC,CAAA;AAEV;;;;"}

package/build/avatarView/NotificationDot.mjs

@@ -0,0 +1,57 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+/**
+ * Depending on avatar size, notifcation dot size and offset are different
+ */
+const MAP_STYLE_CONFIG = {
+  16: {
+    size: 6,
+    offset: 1
+  },
+  24: {
+    size: 8,
+    offset: 2
+  },
+  32: {
+    size: 10,
+    offset: 2
+  },
+  40: {
+    size: 10,
+    offset: 2
+  },
+  48: {
+    size: 14,
+    offset: 2
+  },
+  56: {
+    size: 16,
+    offset: 3
+  },
+  72: {
+    size: 20,
+    offset: 3
+  }
+};
+function NotificationDot({
+  children,
+  avatarSize = 48
+}) {
+  return /*#__PURE__*/jsxs("div", {
+    className: "np-notification-dot",
+    style: {
+      // @ts-expect-error CSS custom props allowed
+      '--np-notification-dot-size': `${MAP_STYLE_CONFIG[avatarSize].size}px`,
+      '--np-notification-dot-offset': `${MAP_STYLE_CONFIG[avatarSize].offset}px`
+    },
+    children: [/*#__PURE__*/jsx("div", {
+      className: "np-notification-dot-badge"
+    }), /*#__PURE__*/jsx("div", {
+      className: "np-notification-dot-mask",
+      children: children
+    })]
+  });
+}
+
+export { NotificationDot as default };
+//# sourceMappingURL=NotificationDot.mjs.map

package/build/avatarView/NotificationDot.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationDot.mjs","sources":["../../src/avatarView/NotificationDot.tsx"],"sourcesContent":["import { HTMLAttributes } from 'react';\nimport { Props as AvatarViewProps } from './AvatarView';\n\ntype Props = Pick<HTMLAttributes<HTMLDivElement>, 'children'> & {\n  avatarSize?: AvatarViewProps['size'];\n};\n\n/**\n * Depending on avatar size, notifcation dot size and offset are different\n */\nconst MAP_STYLE_CONFIG = {\n  16: { size: 6, offset: 1 },\n  24: { size: 8, offset: 2 },\n  32: { size: 10, offset: 2 },\n  40: { size: 10, offset: 2 },\n  48: { size: 14, offset: 2 },\n  56: { size: 16, offset: 3 },\n  72: { size: 20, offset: 3 },\n};\n\nexport default function NotificationDot({ children, avatarSize = 48 }: Props) {\n  return (\n    <div\n      className=\"np-notification-dot\"\n      style={{\n        // @ts-expect-error CSS custom props allowed\n        '--np-notification-dot-size': `${MAP_STYLE_CONFIG[avatarSize].size}px`,\n        '--np-notification-dot-offset': `${MAP_STYLE_CONFIG[avatarSize].offset}px`,\n      }}\n    >\n      <div className=\"np-notification-dot-badge\" />\n      <div className=\"np-notification-dot-mask\">{children}</div>\n    </div>\n  );\n}\n"],"names":["MAP_STYLE_CONFIG","size","offset","NotificationDot","children","avatarSize","_jsxs","className","style","_jsx"],"mappings":";;AAOA;;AAEG;AACH,MAAMA,gBAAgB,GAAG;AACvB,EAAA,EAAE,EAAE;AAAEC,IAAAA,IAAI,EAAE,CAAC;AAAEC,IAAAA,MAAM,EAAE,CAAA;GAAG;AAC1B,EAAA,EAAE,EAAE;AAAED,IAAAA,IAAI,EAAE,CAAC;AAAEC,IAAAA,MAAM,EAAE,CAAA;GAAG;AAC1B,EAAA,EAAE,EAAE;AAAED,IAAAA,IAAI,EAAE,EAAE;AAAEC,IAAAA,MAAM,EAAE,CAAA;GAAG;AAC3B,EAAA,EAAE,EAAE;AAAED,IAAAA,IAAI,EAAE,EAAE;AAAEC,IAAAA,MAAM,EAAE,CAAA;GAAG;AAC3B,EAAA,EAAE,EAAE;AAAED,IAAAA,IAAI,EAAE,EAAE;AAAEC,IAAAA,MAAM,EAAE,CAAA;GAAG;AAC3B,EAAA,EAAE,EAAE;AAAED,IAAAA,IAAI,EAAE,EAAE;AAAEC,IAAAA,MAAM,EAAE,CAAA;GAAG;AAC3B,EAAA,EAAE,EAAE;AAAED,IAAAA,IAAI,EAAE,EAAE;AAAEC,IAAAA,MAAM,EAAE,CAAA;AAAG,GAAA;CAC5B,CAAA;AAEa,SAAUC,eAAeA,CAAC;EAAEC,QAAQ;AAAEC,EAAAA,UAAU,GAAG,EAAA;AAAW,CAAA,EAAA;AAC1E,EAAA,oBACEC,IAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,SAAS,EAAC,qBAAqB;AAC/BC,IAAAA,KAAK,EAAE;AACL;MACA,4BAA4B,EAAE,GAAGR,gBAAgB,CAACK,UAAU,CAAC,CAACJ,IAAI,CAAI,EAAA,CAAA;AACtE,MAAA,8BAA8B,EAAE,CAAGD,EAAAA,gBAAgB,CAACK,UAAU,CAAC,CAACH,MAAM,CAAA,EAAA,CAAA;KACtE;AAAAE,IAAAA,QAAA,gBAEFK,GAAA,CAAA,KAAA,EAAA;AAAKF,MAAAA,SAAS,EAAC,2BAAA;KACf,CAAA,eAAAE,GAAA,CAAA,KAAA,EAAA;AAAKF,MAAAA,SAAS,EAAC,0BAA0B;AAAAH,MAAAA,QAAA,EAAEA,QAAAA;AAAQ,KAAM,CAC3D,CAAA;AAAA,GAAK,CAAC,CAAA;AAEV;;;;"}

package/build/avatarWrapper/AvatarWrapper.js

@@ -5,10 +5,16 @@ var React = require('react');
 var avatarTypes = require('../avatar/avatarTypes.js');
 var Avatar = require('../avatar/Avatar.js');
 var Badge = require('../badge/Badge.js');
+var StatusIcon = require('../statusIcon/StatusIcon.js');
+require('@wise/art');
+require('clsx');
+require('../common/propsValues/breakpoint.js');
+var jsxRuntime = require('react/jsx-runtime');
+require('@transferwise/neptune-validation');
+require('../provider/direction/DirectionProvider.js');
 require('../common/theme.js');
 require('../common/direction.js');
 require('../common/propsValues/control.js');
-require('../common/propsValues/breakpoint.js');
 var size = require('../common/propsValues/size.js');
 require('../common/propsValues/typography.js');
 require('../common/propsValues/width.js');
@@ -25,11 +31,8 @@ require('../common/propsValues/scroll.js');
 require('../common/propsValues/markdownNodeType.js');
 require('../common/fileType.js');
 var initials = require('../common/initials.js');
-require('clsx');
 require('react-intl');
 require('../common/closeButton/CloseButton.messages.js');
-var jsxRuntime = require('react/jsx-runtime');
-var StatusIcon = require('../statusIcon/StatusIcon.js');
 
 const OptionalBadge = ({
   url,
@@ -65,6 +68,9 @@ const OptionalBadge = ({
     children: children
   });
 };
+/**
+ * @deprecated Use `AvatarView` component instead
+ */
 const AvatarWrapper = ({
   url,
   'aria-label': ariaLabel,