@transferwise/components 0.0.0-experimental-426355d → 0.0.0-experimental-91e01ed

package/build/avatar/Avatar.js

@@ -19,6 +19,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    <Circle\n      size={size}\n      fixedSize\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      <Circle\n        size={size}\n        fixedSize\n        className=\"tw-avatar__content\"\n        style={{\n          backgroundColor: backgroundColor || backgroundColorFromSeed,\n        }}\n      >\n        {children}\n      </Circle>\n    </Circle>\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","Circle","fixedSize","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;EAEnD,oBACEU,cAAA,CAACC,MAAM,EAAA;AACLlB,IAAAA,IAAI,EAAEA,IAAK;IACXmB,SAAS,EAAA,IAAA;AACTd,IAAAA,SAAS,EAAEe,SAAI,CAAC,WAAW,EAAEf,SAAS,EAAE,CAAcL,WAAAA,EAAAA,IAAI,CAAE,CAAA,EAAE,CAAcW,WAAAA,EAAAA,IAAI,EAAE,EAAE;AAClF,MAAA,qBAAqB,EAAEL,QAAQ;AAC/B,MAAA,oBAAoB,EAAEe,OAAO,CAACR,uBAAuB,CAAC;MACtD,oBAAoB,EAAEF,IAAI,KAAK,UAAA;AAChC,KAAA,CAAE;AACH,IAAA,YAAA,EAAYC,SAAU;IAAAR,QAAA,eAEtBa,cAAA,CAACC,MAAM,EAAA;AACLlB,MAAAA,IAAI,EAAEA,IAAK;MACXmB,SAAS,EAAA,IAAA;AACTd,MAAAA,SAAS,EAAC,oBAAoB;AAC9BiB,MAAAA,KAAK,EAAE;QACLpB,eAAe,EAAEA,eAAe,IAAIW,uBAAAA;OACpC;AAAAT,MAAAA,QAAA,EAEDA,QAAAA;KACK,CAAA;AACV,GAAQ,CAAC,CAAA;AAEb;;;;"}
+{"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    <Circle\n      size={size}\n      fixedSize\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      <Circle\n        size={size}\n        fixedSize\n        className=\"tw-avatar__content\"\n        style={{\n          backgroundColor: backgroundColor || backgroundColorFromSeed,\n        }}\n      >\n        {children}\n      </Circle>\n    </Circle>\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","Circle","fixedSize","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;EAEnD,oBACEU,cAAA,CAACC,MAAM,EAAA;AACLlB,IAAAA,IAAI,EAAEA,IAAK;IACXmB,SAAS,EAAA,IAAA;AACTd,IAAAA,SAAS,EAAEe,SAAI,CAAC,WAAW,EAAEf,SAAS,EAAE,CAAcL,WAAAA,EAAAA,IAAI,CAAE,CAAA,EAAE,CAAcW,WAAAA,EAAAA,IAAI,EAAE,EAAE;AAClF,MAAA,qBAAqB,EAAEL,QAAQ;AAC/B,MAAA,oBAAoB,EAAEe,OAAO,CAACR,uBAAuB,CAAC;MACtD,oBAAoB,EAAEF,IAAI,KAAK,UAAA;AAChC,KAAA,CAAE;AACH,IAAA,YAAA,EAAYC,SAAU;IAAAR,QAAA,eAEtBa,cAAA,CAACC,MAAM,EAAA;AACLlB,MAAAA,IAAI,EAAEA,IAAK;MACXmB,SAAS,EAAA,IAAA;AACTd,MAAAA,SAAS,EAAC,oBAAoB;AAC9BiB,MAAAA,KAAK,EAAE;QACLpB,eAAe,EAAEA,eAAe,IAAIW,uBAAAA;OACpC;AAAAT,MAAAA,QAAA,EAEDA,QAAAA;KACK,CAAA;AACV,GAAQ,CAAC,CAAA;AAEb;;;;"}

package/build/avatar/Avatar.mjs

@@ -17,6 +17,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    <Circle\n      size={size}\n      fixedSize\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      <Circle\n        size={size}\n        fixedSize\n        className=\"tw-avatar__content\"\n        style={{\n          backgroundColor: backgroundColor || backgroundColorFromSeed,\n        }}\n      >\n        {children}\n      </Circle>\n    </Circle>\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","Circle","fixedSize","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;EAEnD,oBACEU,GAAA,CAACC,MAAM,EAAA;AACLlB,IAAAA,IAAI,EAAEA,IAAK;IACXmB,SAAS,EAAA,IAAA;AACTd,IAAAA,SAAS,EAAEe,IAAI,CAAC,WAAW,EAAEf,SAAS,EAAE,CAAcL,WAAAA,EAAAA,IAAI,CAAE,CAAA,EAAE,CAAcW,WAAAA,EAAAA,IAAI,EAAE,EAAE;AAClF,MAAA,qBAAqB,EAAEL,QAAQ;AAC/B,MAAA,oBAAoB,EAAEe,OAAO,CAACR,uBAAuB,CAAC;MACtD,oBAAoB,EAAEF,IAAI,KAAK,UAAA;AAChC,KAAA,CAAE;AACH,IAAA,YAAA,EAAYC,SAAU;IAAAR,QAAA,eAEtBa,GAAA,CAACC,MAAM,EAAA;AACLlB,MAAAA,IAAI,EAAEA,IAAK;MACXmB,SAAS,EAAA,IAAA;AACTd,MAAAA,SAAS,EAAC,oBAAoB;AAC9BiB,MAAAA,KAAK,EAAE;QACLpB,eAAe,EAAEA,eAAe,IAAIW,uBAAAA;OACpC;AAAAT,MAAAA,QAAA,EAEDA,QAAAA;KACK,CAAA;AACV,GAAQ,CAAC,CAAA;AAEb;;;;"}
+{"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    <Circle\n      size={size}\n      fixedSize\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      <Circle\n        size={size}\n        fixedSize\n        className=\"tw-avatar__content\"\n        style={{\n          backgroundColor: backgroundColor || backgroundColorFromSeed,\n        }}\n      >\n        {children}\n      </Circle>\n    </Circle>\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","Circle","fixedSize","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;EAEnD,oBACEU,GAAA,CAACC,MAAM,EAAA;AACLlB,IAAAA,IAAI,EAAEA,IAAK;IACXmB,SAAS,EAAA,IAAA;AACTd,IAAAA,SAAS,EAAEe,IAAI,CAAC,WAAW,EAAEf,SAAS,EAAE,CAAcL,WAAAA,EAAAA,IAAI,CAAE,CAAA,EAAE,CAAcW,WAAAA,EAAAA,IAAI,EAAE,EAAE;AAClF,MAAA,qBAAqB,EAAEL,QAAQ;AAC/B,MAAA,oBAAoB,EAAEe,OAAO,CAACR,uBAAuB,CAAC;MACtD,oBAAoB,EAAEF,IAAI,KAAK,UAAA;AAChC,KAAA,CAAE;AACH,IAAA,YAAA,EAAYC,SAAU;IAAAR,QAAA,eAEtBa,GAAA,CAACC,MAAM,EAAA;AACLlB,MAAAA,IAAI,EAAEA,IAAK;MACXmB,SAAS,EAAA,IAAA;AACTd,MAAAA,SAAS,EAAC,oBAAoB;AAC9BiB,MAAAA,KAAK,EAAE;QACLpB,eAAe,EAAEA,eAAe,IAAIW,uBAAAA;OACpC;AAAAT,MAAAA,QAAA,EAEDA,QAAAA;KACK,CAAA;AACV,GAAQ,CAAC,CAAA;AAEb;;;;"}

package/build/avatarView/AvatarView.js

@@ -0,0 +1,187 @@
+'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');
+var icons = require('@transferwise/icons');
+var jsxRuntime = require('react/jsx-runtime');
+var initials = require('../common/initials.js');
+var size = require('../common/propsValues/size.js');
+
+function AvatarView({
+  children = undefined,
+  size = 48,
+  selected,
+  notification,
+  badge,
+  action,
+  className,
+  style,
+  imgSrc,
+  type,
+  name
+}) {
+  const isInteractive = Boolean(action?.onClick ?? action?.href);
+  return /*#__PURE__*/jsxRuntime.jsx(Interactive, {
+    ...action,
+    className: clsx.clsx('np-avatar-view', {
+      'np-avatar-view-selected': selected
+    }, className),
+    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: !isInteractive || selected,
+        style: {
+          ...(selected && {
+            '--circle-border-color': 'var(--color-interactive-primary)'
+          }),
+          backgroundColor: isInteractive ? 'var(--color-background-neutral)' : 'transparent',
+          ...style
+        },
+        children: children === undefined ? /*#__PURE__*/jsxRuntime.jsx(Profile, {
+          imgSrc,
+          type,
+          name
+        }) : children
+      })
+    })
+  });
+}
+function Interactive({
+  children,
+  onClick,
+  href,
+  target,
+  className,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby
+}) {
+  const elementName = onClick ? 'button' : href ? 'a' : null;
+  if (elementName === null) {
+    // non interactive
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: clsx.clsx(className, 'np-avatar-view-non-interactive'),
+      children: children
+    });
+  }
+  const a11yProps = {
+    ariaLabel,
+    ariaLabelledby
+  };
+  if (elementName === 'button') {
+    return /*#__PURE__*/jsxRuntime.jsx("button", {
+      type: "button",
+      className: clsx.clsx(className, 'btn-unstyled'),
+      onClick: onClick,
+      ...a11yProps,
+      children: children
+    });
+  }
+  if (elementName === 'a') {
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line react/jsx-no-target-blank
+      jsxRuntime.jsx("a", {
+        href: href,
+        target: target,
+        rel: target === '_blank' ? 'noreferrer' : undefined,
+        className: clsx.clsx(className, 'text-no-decoration'),
+        ...a11yProps,
+        children: children
+      })
+    );
+  }
+}
+/** Size of badge depends on size of avatar */
+const MAP_BADGE_ASSET_SIZE = {
+  16: 'sm',
+  24: 'sm',
+  32: 'sm',
+  40: 'sm',
+  48: 'sm',
+  56: 'lg',
+  72: 'lg'
+};
+/** Certain sizes of AvatarView has a custom offset of Badge */
+const MAP_BADGE_POSITION = {
+  24: -6,
+  32: -4
+};
+/**
+ * Adds build-in badges to AvatarView
+ */
+function Badges({
+  children,
+  avatar,
+  ...badge
+}) {
+  const {
+    size: size$1 = 48,
+    selected,
+    notification
+  } = avatar;
+  const anyCustomBadge = Object.keys(badge).length > 0;
+  if ((anyCustomBadge || selected) && size$1 > 16) {
+    const badgeSize = MAP_BADGE_ASSET_SIZE[size$1] ?? size.Size.SMALL;
+    return /*#__PURE__*/jsxRuntime.jsx(Badge, {
+      size: badgeSize,
+      badge: /*#__PURE__*/jsxRuntime.jsx(BadgeAssets, {
+        ...(selected ? {
+          status: 'positive'
+        } : badge),
+        size: badgeSize
+      }),
+      style: {
+        // @ts-expect-error CSS custom props allowed
+        '--badge-content-position': `${MAP_BADGE_POSITION[size$1] ?? 0}px`
+      },
+      children: children
+    });
+  }
+  if (notification) {
+    return /*#__PURE__*/jsxRuntime.jsx(NotificationDot, {
+      avatarSize: size$1,
+      children: children
+    });
+  }
+  return children;
+}
+/**
+ * Common logic for entities (personal & business profiles or recipients)
+ */
+function Profile({
+  imgSrc,
+  name,
+  type
+}) {
+  const [tryLoadImage, setTryLoadImage] = React.useState(true);
+  if (imgSrc && tryLoadImage) {
+    return /*#__PURE__*/jsxRuntime.jsx(Image.default, {
+      src: imgSrc,
+      alt: "",
+      onError: () => setTryLoadImage(false)
+    });
+  }
+  if (type) {
+    return type.toLowerCase() === 'business' ? /*#__PURE__*/jsxRuntime.jsx(icons.Briefcase, {}) : /*#__PURE__*/jsxRuntime.jsx(icons.Profile, {});
+  }
+  if (name) {
+    return initials.getInitials(name);
+  }
+  return /*#__PURE__*/jsxRuntime.jsx(icons.Profile, {});
+}
+
+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, { CircleProps } from '../common/circle';\nimport Image from '../image';\nimport { HTMLAttributes, PropsWithChildren, useState } from 'react';\nimport { ActionOptions as ActionProps } from '../common/action/Action';\nimport { clsx } from 'clsx';\nimport { getInitials, Size } from '../common';\nimport {\n  Briefcase as BusinessProfileIcon,\n  Profile as PersonalProfileIcon,\n} from '@transferwise/icons';\n\ntype InteractiveProps = Omit<ActionProps, 'text'> &\n  Pick<HTMLAttributes<HTMLDivElement>, 'className' | 'aria-labelledby'>;\n\nexport type Props = {\n  imgSrc?: string | null;\n  /**\n   * Entity name (personal initials or business name), it will be boilded down to 1 or 2 chars (initials)\n   */\n  name?: string | null;\n  type?: 'personal' | 'business';\n  size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;\n  /** adds prebuilt notification dot via Badge component */\n  notification?: boolean;\n  // badge?: React.ReactNode;\n  badge?: BadgeAssetsProps;\n  /** changes background color to neutral and wraps component with button */\n  action?: InteractiveProps;\n  /** changes background color to neutral and adds predefined Badge */\n  selected?: boolean;\n  /** often use case to override `background-color` or `border` */\n  style?: Pick<React.CSSProperties, 'border' | 'backgroundColor' | 'color'>;\n} & Pick<HTMLAttributes<HTMLDivElement>, 'className' | 'children'>;\n\nfunction AvatarView({\n  children = undefined,\n  size = 48,\n  selected,\n  notification,\n  badge,\n  action,\n  className,\n  style,\n  imgSrc,\n  type,\n  name,\n}: Props) {\n  const isInteractive = Boolean(action?.onClick ?? action?.href);\n  return (\n    <Interactive\n      {...action}\n      className={clsx('np-avatar-view', { 'np-avatar-view-selected': selected }, className)}\n    >\n      <Badges avatar={{ size, notification, selected }} {...badge}>\n        <Circle\n          size={size}\n          fixedSize\n          className={clsx('np-avatar-view-content')}\n          enableBorder={!isInteractive || selected}\n          style={{\n            ...(selected && { '--circle-border-color': 'var(--color-interactive-primary)' }),\n            backgroundColor: isInteractive ? 'var(--color-background-neutral)' : 'transparent',\n            ...style,\n          }}\n        >\n          {children === undefined ? <Profile {...{ imgSrc, type, name }} /> : children}\n        </Circle>\n      </Badges>\n    </Interactive>\n  );\n}\n\nfunction Interactive({\n  children,\n  onClick,\n  href,\n  target,\n  className,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledby,\n}: PropsWithChildren<InteractiveProps>) {\n  const elementName: React.ElementType | null = onClick ? 'button' : href ? 'a' : null;\n  if (elementName === null) {\n    // non interactive\n    return <div className={clsx(className, 'np-avatar-view-non-interactive')}>{children}</div>;\n  }\n  const a11yProps = { ariaLabel, ariaLabelledby };\n  if (elementName === 'button') {\n    return (\n      <button\n        type=\"button\"\n        className={clsx(className, 'btn-unstyled')}\n        onClick={onClick}\n        {...a11yProps}\n      >\n        {children}\n      </button>\n    );\n  }\n  if (elementName === 'a') {\n    return (\n      // eslint-disable-next-line react/jsx-no-target-blank\n      <a\n        href={href}\n        target={target}\n        rel={target === '_blank' ? 'noreferrer' : undefined}\n        className={clsx(className, 'text-no-decoration')}\n        {...a11yProps}\n      >\n        {children}\n      </a>\n    );\n  }\n}\n\n/** Size of badge depends on size of avatar */\nconst MAP_BADGE_ASSET_SIZE = {\n  16: 'sm',\n  24: 'sm',\n  32: 'sm',\n  40: 'sm',\n  48: 'sm',\n  56: 'lg',\n  72: 'lg',\n};\n\n/** Certain sizes of AvatarView has a custom offset of Badge */\nconst MAP_BADGE_POSITION = {\n  24: -6,\n  32: -4,\n};\n\ntype BadgesProps = BadgeAssetsProps &\n  PropsWithChildren<{\n    avatar: Pick<Props, 'selected' | 'size' | 'notification'>;\n  }>;\n\n/**\n * Adds build-in badges to AvatarView\n */\nfunction Badges({ children, avatar, ...badge }: BadgesProps) {\n  const { size = 48, selected, notification } = avatar;\n  const anyCustomBadge = Object.keys(badge).length > 0;\n  if ((anyCustomBadge || selected) && size > 16) {\n    const badgeSize: BadgeProps['size'] = MAP_BADGE_ASSET_SIZE[size] ?? Size.SMALL;\n    return (\n      <Badge\n        size={badgeSize}\n        badge={<BadgeAssets {...(selected ? { status: 'positive' } : badge)} size={badgeSize} />}\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\n/**\n * Common logic for entities (personal & business profiles or recipients)\n */\nfunction Profile({ imgSrc, name, type }: Pick<Props, 'imgSrc' | 'name' | 'type'>) {\n  const [tryLoadImage, setTryLoadImage] = useState(true);\n  if (imgSrc && tryLoadImage) {\n    return <Image src={imgSrc} alt=\"\" onError={() => setTryLoadImage(false)} />;\n  }\n  if (type) {\n    return type.toLowerCase() === 'business' ? <BusinessProfileIcon /> : <PersonalProfileIcon />;\n  }\n  if (name) {\n    return getInitials(name);\n  }\n  return <PersonalProfileIcon />;\n}\n\nexport default AvatarView;\n"],"names":["AvatarView","children","undefined","size","selected","notification","badge","action","className","style","imgSrc","type","name","isInteractive","Boolean","onClick","href","_jsx","Interactive","clsx","Badges","avatar","Circle","fixedSize","enableBorder","backgroundColor","Profile","target","ariaLabel","ariaLabelledby","elementName","a11yProps","rel","MAP_BADGE_ASSET_SIZE","MAP_BADGE_POSITION","anyCustomBadge","Object","keys","length","badgeSize","Size","SMALL","Badge","BadgeAssets","status","NotificationDot","avatarSize","tryLoadImage","setTryLoadImage","useState","Image","src","alt","onError","toLowerCase","BusinessProfileIcon","PersonalProfileIcon","getInitials"],"mappings":"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"}

package/build/avatarView/AvatarView.mjs

@@ -0,0 +1,185 @@
+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 { Briefcase, Profile as Profile$1 } from '@transferwise/icons';
+import { jsx } from 'react/jsx-runtime';
+import { getInitials } from '../common/initials.mjs';
+import { Size } from '../common/propsValues/size.mjs';
+
+function AvatarView({
+  children = undefined,
+  size = 48,
+  selected,
+  notification,
+  badge,
+  action,
+  className,
+  style,
+  imgSrc,
+  type,
+  name
+}) {
+  const isInteractive = Boolean(action?.onClick ?? action?.href);
+  return /*#__PURE__*/jsx(Interactive, {
+    ...action,
+    className: clsx('np-avatar-view', {
+      'np-avatar-view-selected': selected
+    }, className),
+    children: /*#__PURE__*/jsx(Badges, {
+      avatar: {
+        size,
+        notification,
+        selected
+      },
+      ...badge,
+      children: /*#__PURE__*/jsx(Circle, {
+        size: size,
+        fixedSize: true,
+        className: clsx('np-avatar-view-content'),
+        enableBorder: !isInteractive || selected,
+        style: {
+          ...(selected && {
+            '--circle-border-color': 'var(--color-interactive-primary)'
+          }),
+          backgroundColor: isInteractive ? 'var(--color-background-neutral)' : 'transparent',
+          ...style
+        },
+        children: children === undefined ? /*#__PURE__*/jsx(Profile, {
+          imgSrc,
+          type,
+          name
+        }) : children
+      })
+    })
+  });
+}
+function Interactive({
+  children,
+  onClick,
+  href,
+  target,
+  className,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby
+}) {
+  const elementName = onClick ? 'button' : href ? 'a' : null;
+  if (elementName === null) {
+    // non interactive
+    return /*#__PURE__*/jsx("div", {
+      className: clsx(className, 'np-avatar-view-non-interactive'),
+      children: children
+    });
+  }
+  const a11yProps = {
+    ariaLabel,
+    ariaLabelledby
+  };
+  if (elementName === 'button') {
+    return /*#__PURE__*/jsx("button", {
+      type: "button",
+      className: clsx(className, 'btn-unstyled'),
+      onClick: onClick,
+      ...a11yProps,
+      children: children
+    });
+  }
+  if (elementName === 'a') {
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line react/jsx-no-target-blank
+      jsx("a", {
+        href: href,
+        target: target,
+        rel: target === '_blank' ? 'noreferrer' : undefined,
+        className: clsx(className, 'text-no-decoration'),
+        ...a11yProps,
+        children: children
+      })
+    );
+  }
+}
+/** Size of badge depends on size of avatar */
+const MAP_BADGE_ASSET_SIZE = {
+  16: 'sm',
+  24: 'sm',
+  32: 'sm',
+  40: 'sm',
+  48: 'sm',
+  56: 'lg',
+  72: 'lg'
+};
+/** Certain sizes of AvatarView has a custom offset of Badge */
+const MAP_BADGE_POSITION = {
+  24: -6,
+  32: -4
+};
+/**
+ * Adds build-in badges to AvatarView
+ */
+function Badges({
+  children,
+  avatar,
+  ...badge
+}) {
+  const {
+    size = 48,
+    selected,
+    notification
+  } = avatar;
+  const anyCustomBadge = Object.keys(badge).length > 0;
+  if ((anyCustomBadge || selected) && size > 16) {
+    const badgeSize = MAP_BADGE_ASSET_SIZE[size] ?? Size.SMALL;
+    return /*#__PURE__*/jsx(Badge, {
+      size: badgeSize,
+      badge: /*#__PURE__*/jsx(BadgeAssets, {
+        ...(selected ? {
+          status: 'positive'
+        } : badge),
+        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;
+}
+/**
+ * Common logic for entities (personal & business profiles or recipients)
+ */
+function Profile({
+  imgSrc,
+  name,
+  type
+}) {
+  const [tryLoadImage, setTryLoadImage] = useState(true);
+  if (imgSrc && tryLoadImage) {
+    return /*#__PURE__*/jsx(Image, {
+      src: imgSrc,
+      alt: "",
+      onError: () => setTryLoadImage(false)
+    });
+  }
+  if (type) {
+    return type.toLowerCase() === 'business' ? /*#__PURE__*/jsx(Briefcase, {}) : /*#__PURE__*/jsx(Profile$1, {});
+  }
+  if (name) {
+    return getInitials(name);
+  }
+  return /*#__PURE__*/jsx(Profile$1, {});
+}
+
+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, { CircleProps } from '../common/circle';\nimport Image from '../image';\nimport { HTMLAttributes, PropsWithChildren, useState } from 'react';\nimport { ActionOptions as ActionProps } from '../common/action/Action';\nimport { clsx } from 'clsx';\nimport { getInitials, Size } from '../common';\nimport {\n  Briefcase as BusinessProfileIcon,\n  Profile as PersonalProfileIcon,\n} from '@transferwise/icons';\n\ntype InteractiveProps = Omit<ActionProps, 'text'> &\n  Pick<HTMLAttributes<HTMLDivElement>, 'className' | 'aria-labelledby'>;\n\nexport type Props = {\n  imgSrc?: string | null;\n  /**\n   * Entity name (personal initials or business name), it will be boilded down to 1 or 2 chars (initials)\n   */\n  name?: string | null;\n  type?: 'personal' | 'business';\n  size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;\n  /** adds prebuilt notification dot via Badge component */\n  notification?: boolean;\n  // badge?: React.ReactNode;\n  badge?: BadgeAssetsProps;\n  /** changes background color to neutral and wraps component with button */\n  action?: InteractiveProps;\n  /** changes background color to neutral and adds predefined Badge */\n  selected?: boolean;\n  /** often use case to override `background-color` or `border` */\n  style?: Pick<React.CSSProperties, 'border' | 'backgroundColor' | 'color'>;\n} & Pick<HTMLAttributes<HTMLDivElement>, 'className' | 'children'>;\n\nfunction AvatarView({\n  children = undefined,\n  size = 48,\n  selected,\n  notification,\n  badge,\n  action,\n  className,\n  style,\n  imgSrc,\n  type,\n  name,\n}: Props) {\n  const isInteractive = Boolean(action?.onClick ?? action?.href);\n  return (\n    <Interactive\n      {...action}\n      className={clsx('np-avatar-view', { 'np-avatar-view-selected': selected }, className)}\n    >\n      <Badges avatar={{ size, notification, selected }} {...badge}>\n        <Circle\n          size={size}\n          fixedSize\n          className={clsx('np-avatar-view-content')}\n          enableBorder={!isInteractive || selected}\n          style={{\n            ...(selected && { '--circle-border-color': 'var(--color-interactive-primary)' }),\n            backgroundColor: isInteractive ? 'var(--color-background-neutral)' : 'transparent',\n            ...style,\n          }}\n        >\n          {children === undefined ? <Profile {...{ imgSrc, type, name }} /> : children}\n        </Circle>\n      </Badges>\n    </Interactive>\n  );\n}\n\nfunction Interactive({\n  children,\n  onClick,\n  href,\n  target,\n  className,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledby,\n}: PropsWithChildren<InteractiveProps>) {\n  const elementName: React.ElementType | null = onClick ? 'button' : href ? 'a' : null;\n  if (elementName === null) {\n    // non interactive\n    return <div className={clsx(className, 'np-avatar-view-non-interactive')}>{children}</div>;\n  }\n  const a11yProps = { ariaLabel, ariaLabelledby };\n  if (elementName === 'button') {\n    return (\n      <button\n        type=\"button\"\n        className={clsx(className, 'btn-unstyled')}\n        onClick={onClick}\n        {...a11yProps}\n      >\n        {children}\n      </button>\n    );\n  }\n  if (elementName === 'a') {\n    return (\n      // eslint-disable-next-line react/jsx-no-target-blank\n      <a\n        href={href}\n        target={target}\n        rel={target === '_blank' ? 'noreferrer' : undefined}\n        className={clsx(className, 'text-no-decoration')}\n        {...a11yProps}\n      >\n        {children}\n      </a>\n    );\n  }\n}\n\n/** Size of badge depends on size of avatar */\nconst MAP_BADGE_ASSET_SIZE = {\n  16: 'sm',\n  24: 'sm',\n  32: 'sm',\n  40: 'sm',\n  48: 'sm',\n  56: 'lg',\n  72: 'lg',\n};\n\n/** Certain sizes of AvatarView has a custom offset of Badge */\nconst MAP_BADGE_POSITION = {\n  24: -6,\n  32: -4,\n};\n\ntype BadgesProps = BadgeAssetsProps &\n  PropsWithChildren<{\n    avatar: Pick<Props, 'selected' | 'size' | 'notification'>;\n  }>;\n\n/**\n * Adds build-in badges to AvatarView\n */\nfunction Badges({ children, avatar, ...badge }: BadgesProps) {\n  const { size = 48, selected, notification } = avatar;\n  const anyCustomBadge = Object.keys(badge).length > 0;\n  if ((anyCustomBadge || selected) && size > 16) {\n    const badgeSize: BadgeProps['size'] = MAP_BADGE_ASSET_SIZE[size] ?? Size.SMALL;\n    return (\n      <Badge\n        size={badgeSize}\n        badge={<BadgeAssets {...(selected ? { status: 'positive' } : badge)} size={badgeSize} />}\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\n/**\n * Common logic for entities (personal & business profiles or recipients)\n */\nfunction Profile({ imgSrc, name, type }: Pick<Props, 'imgSrc' | 'name' | 'type'>) {\n  const [tryLoadImage, setTryLoadImage] = useState(true);\n  if (imgSrc && tryLoadImage) {\n    return <Image src={imgSrc} alt=\"\" onError={() => setTryLoadImage(false)} />;\n  }\n  if (type) {\n    return type.toLowerCase() === 'business' ? <BusinessProfileIcon /> : <PersonalProfileIcon />;\n  }\n  if (name) {\n    return getInitials(name);\n  }\n  return <PersonalProfileIcon />;\n}\n\nexport default AvatarView;\n"],"names":["AvatarView","children","undefined","size","selected","notification","badge","action","className","style","imgSrc","type","name","isInteractive","Boolean","onClick","href","_jsx","Interactive","clsx","Badges","avatar","Circle","fixedSize","enableBorder","backgroundColor","Profile","target","ariaLabel","ariaLabelledby","elementName","a11yProps","rel","MAP_BADGE_ASSET_SIZE","MAP_BADGE_POSITION","anyCustomBadge","Object","keys","length","badgeSize","Size","SMALL","Badge","BadgeAssets","status","NotificationDot","avatarSize","tryLoadImage","setTryLoadImage","useState","Image","src","alt","onError","toLowerCase","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

@@ -6,10 +6,12 @@ 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');
 var jsxRuntime = require('react/jsx-runtime');
 var profileType = require('../common/propsValues/profileType.js');
-var initials = require('../common/initials.js');
 var size = require('../common/propsValues/size.js');
+var initials = require('../common/initials.js');
 
 const OptionalBadge = ({
   url,
@@ -45,6 +47,9 @@ const OptionalBadge = ({
     children: children
   });
 };
+/**
+ * @deprecated Use `AvatarView` component instead
+ */
 const AvatarWrapper = ({
   url,
   'aria-label': ariaLabel,