@transferwise/components 0.0.0-experimental-f7495f3 → 0.0.0-experimental-37d8e2c

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,
@@ -30,7 +33,7 @@ const Avatar = ({
   type = 'thumbnail',
   'aria-label': ariaLabel
 }) => {
-  const backgroundColorFromSeed = React.useMemo(() => !backgroundColor && backgroundColorSeed ? `var(${colors.getAvatarColorFromSeed(backgroundColorSeed)})` : undefined, [backgroundColor, backgroundColorSeed]);
+  const backgroundColorFromSeed = React.useMemo(() => !backgroundColor && backgroundColorSeed ? colors.getAvatarColorFromSeed(backgroundColorSeed) : undefined, [backgroundColor, backgroundColorSeed]);
   const size = backwardsCompatibleSize(sizeFromProps);
   return /*#__PURE__*/jsxRuntime.jsx(Circle, {
     size: size,

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 { Theme } from '../common';\n\nimport { getAvatarColorFromSeed } from './colors';\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        ? `var(${getAvatarColorFromSeed(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","getAvatarColorFromSeed","undefined","_jsx","Circle","fixedSize","clsx","Boolean","style"],"mappings":";;;;;;;;;AA8BA,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,GACnC,CAAOY,IAAAA,EAAAA,6BAAsB,CAACZ,mBAAmB,CAAC,CAAG,CAAA,CAAA,GACrDa,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 { Theme } from '../common';\n\nimport { getAvatarColorFromSeed } from './colors';\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        ? getAvatarColorFromSeed(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","getAvatarColorFromSeed","undefined","_jsx","Circle","fixedSize","clsx","Boolean","style"],"mappings":";;;;;;;;;AA8BA,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,6BAAsB,CAACZ,mBAAmB,CAAC,GAC3Ca,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,
@@ -28,7 +31,7 @@ const Avatar = ({
   type = 'thumbnail',
   'aria-label': ariaLabel
 }) => {
-  const backgroundColorFromSeed = useMemo(() => !backgroundColor && backgroundColorSeed ? `var(${getAvatarColorFromSeed(backgroundColorSeed)})` : undefined, [backgroundColor, backgroundColorSeed]);
+  const backgroundColorFromSeed = useMemo(() => !backgroundColor && backgroundColorSeed ? getAvatarColorFromSeed(backgroundColorSeed) : undefined, [backgroundColor, backgroundColorSeed]);
   const size = backwardsCompatibleSize(sizeFromProps);
   return /*#__PURE__*/jsx(Circle, {
     size: size,

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 { Theme } from '../common';\n\nimport { getAvatarColorFromSeed } from './colors';\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        ? `var(${getAvatarColorFromSeed(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","getAvatarColorFromSeed","undefined","_jsx","Circle","fixedSize","clsx","Boolean","style"],"mappings":";;;;;;;AA8BA,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,GACnC,CAAOY,IAAAA,EAAAA,sBAAsB,CAACZ,mBAAmB,CAAC,CAAG,CAAA,CAAA,GACrDa,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 { Theme } from '../common';\n\nimport { getAvatarColorFromSeed } from './colors';\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        ? getAvatarColorFromSeed(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","getAvatarColorFromSeed","undefined","_jsx","Circle","fixedSize","clsx","Boolean","style"],"mappings":";;;;;;;AA8BA,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,sBAAsB,CAACZ,mBAAmB,CAAC,GAC3Ca,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/avatar/colors/colors.js

@@ -5,7 +5,7 @@
  * Changing this array will change the assignment between seeds.
  * Do not change this array.
  */
-const avatarColors = ['--color-bright-blue', '--color-bright-yellow', '--color-bright-pink', '--color-bright-orange'];
+const avatarColors = ['var(--color-bright-blue)', 'var(--color-bright-yellow)', 'var(--color-bright-pink)', 'var(--color-bright-orange)'];
 /*
  * Takes in a "seed" string and spits out an index for the color we should use.
  * This implementation has been synced across all three clients so that we consistently

package/build/avatar/colors/colors.js.map

@@ -1 +1 @@
-{"version":3,"file":"colors.js","sources":["../../../src/avatar/colors/colors.ts"],"sourcesContent":["/*\n * The colors we support generating an Avatar background color from a \"seed\" for.\n * Changing this array will change the assignment between seeds.\n * Do not change this array.\n */\nconst avatarColors = [\n  '--color-bright-blue',\n  '--color-bright-yellow',\n  '--color-bright-pink',\n  '--color-bright-orange',\n] as const;\n\n/*\n * Takes in a \"seed\" string and spits out an index for the color we should use.\n * This implementation has been synced across all three clients so that we consistently\n * generate branded avatar colors when rendering a list of Avatars.\n * Do not change this implementation.\n */\nconst hashSeed = (seed: string): number => {\n  const base = 31;\n  const modulo = avatarColors.length;\n\n  let hashValue = 0;\n  let basePow = 1;\n\n  for (let i = 0; i < seed.length; i += 1) {\n    hashValue = (hashValue + seed.charCodeAt(i) * basePow) % modulo;\n    basePow = (basePow * base) % modulo;\n  }\n\n  return hashValue;\n};\n\nexport const getAvatarColorFromSeed = (seed: string): (typeof avatarColors)[number] => {\n  return avatarColors[hashSeed(seed)];\n};\n"],"names":["avatarColors","hashSeed","seed","base","modulo","length","hashValue","basePow","i","charCodeAt","getAvatarColorFromSeed"],"mappings":";;AAAA;;;;AAIG;AACH,MAAMA,YAAY,GAAG,CACnB,qBAAqB,EACrB,uBAAuB,EACvB,qBAAqB,EACrB,uBAAuB,CACf,CAAA;AAEV;;;;;AAKG;AACH,MAAMC,QAAQ,GAAIC,IAAY,IAAY;EACxC,MAAMC,IAAI,GAAG,EAAE,CAAA;AACf,EAAA,MAAMC,MAAM,GAAGJ,YAAY,CAACK,MAAM,CAAA;EAElC,IAAIC,SAAS,GAAG,CAAC,CAAA;EACjB,IAAIC,OAAO,GAAG,CAAC,CAAA;AAEf,EAAA,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGN,IAAI,CAACG,MAAM,EAAEG,CAAC,IAAI,CAAC,EAAE;AACvCF,IAAAA,SAAS,GAAG,CAACA,SAAS,GAAGJ,IAAI,CAACO,UAAU,CAACD,CAAC,CAAC,GAAGD,OAAO,IAAIH,MAAM,CAAA;AAC/DG,IAAAA,OAAO,GAAIA,OAAO,GAAGJ,IAAI,GAAIC,MAAM,CAAA;AACrC,GAAA;AAEA,EAAA,OAAOE,SAAS,CAAA;AAClB,CAAC,CAAA;AAEYI,MAAAA,sBAAsB,GAAIR,IAAY,IAAmC;AACpF,EAAA,OAAOF,YAAY,CAACC,QAAQ,CAACC,IAAI,CAAC,CAAC,CAAA;AACrC;;;;"}
+{"version":3,"file":"colors.js","sources":["../../../src/avatar/colors/colors.ts"],"sourcesContent":["/*\n * The colors we support generating an Avatar background color from a \"seed\" for.\n * Changing this array will change the assignment between seeds.\n * Do not change this array.\n */\nconst avatarColors = [\n  'var(--color-bright-blue)',\n  'var(--color-bright-yellow)',\n  'var(--color-bright-pink)',\n  'var(--color-bright-orange)',\n] as const;\n\n/*\n * Takes in a \"seed\" string and spits out an index for the color we should use.\n * This implementation has been synced across all three clients so that we consistently\n * generate branded avatar colors when rendering a list of Avatars.\n * Do not change this implementation.\n */\nconst hashSeed = (seed: string): number => {\n  const base = 31;\n  const modulo = avatarColors.length;\n\n  let hashValue = 0;\n  let basePow = 1;\n\n  for (let i = 0; i < seed.length; i += 1) {\n    hashValue = (hashValue + seed.charCodeAt(i) * basePow) % modulo;\n    basePow = (basePow * base) % modulo;\n  }\n\n  return hashValue;\n};\n\nexport const getAvatarColorFromSeed = (seed: string): (typeof avatarColors)[number] => {\n  return avatarColors[hashSeed(seed)];\n};\n"],"names":["avatarColors","hashSeed","seed","base","modulo","length","hashValue","basePow","i","charCodeAt","getAvatarColorFromSeed"],"mappings":";;AAAA;;;;AAIG;AACH,MAAMA,YAAY,GAAG,CACnB,0BAA0B,EAC1B,4BAA4B,EAC5B,0BAA0B,EAC1B,4BAA4B,CACpB,CAAA;AAEV;;;;;AAKG;AACH,MAAMC,QAAQ,GAAIC,IAAY,IAAY;EACxC,MAAMC,IAAI,GAAG,EAAE,CAAA;AACf,EAAA,MAAMC,MAAM,GAAGJ,YAAY,CAACK,MAAM,CAAA;EAElC,IAAIC,SAAS,GAAG,CAAC,CAAA;EACjB,IAAIC,OAAO,GAAG,CAAC,CAAA;AAEf,EAAA,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGN,IAAI,CAACG,MAAM,EAAEG,CAAC,IAAI,CAAC,EAAE;AACvCF,IAAAA,SAAS,GAAG,CAACA,SAAS,GAAGJ,IAAI,CAACO,UAAU,CAACD,CAAC,CAAC,GAAGD,OAAO,IAAIH,MAAM,CAAA;AAC/DG,IAAAA,OAAO,GAAIA,OAAO,GAAGJ,IAAI,GAAIC,MAAM,CAAA;AACrC,GAAA;AAEA,EAAA,OAAOE,SAAS,CAAA;AAClB,CAAC,CAAA;AAEYI,MAAAA,sBAAsB,GAAIR,IAAY,IAAmC;AACpF,EAAA,OAAOF,YAAY,CAACC,QAAQ,CAACC,IAAI,CAAC,CAAC,CAAA;AACrC;;;;"}

package/build/avatar/colors/colors.mjs

@@ -3,7 +3,7 @@
  * Changing this array will change the assignment between seeds.
  * Do not change this array.
  */
-const avatarColors = ['--color-bright-blue', '--color-bright-yellow', '--color-bright-pink', '--color-bright-orange'];
+const avatarColors = ['var(--color-bright-blue)', 'var(--color-bright-yellow)', 'var(--color-bright-pink)', 'var(--color-bright-orange)'];
 /*
  * Takes in a "seed" string and spits out an index for the color we should use.
  * This implementation has been synced across all three clients so that we consistently

package/build/avatar/colors/colors.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"colors.mjs","sources":["../../../src/avatar/colors/colors.ts"],"sourcesContent":["/*\n * The colors we support generating an Avatar background color from a \"seed\" for.\n * Changing this array will change the assignment between seeds.\n * Do not change this array.\n */\nconst avatarColors = [\n  '--color-bright-blue',\n  '--color-bright-yellow',\n  '--color-bright-pink',\n  '--color-bright-orange',\n] as const;\n\n/*\n * Takes in a \"seed\" string and spits out an index for the color we should use.\n * This implementation has been synced across all three clients so that we consistently\n * generate branded avatar colors when rendering a list of Avatars.\n * Do not change this implementation.\n */\nconst hashSeed = (seed: string): number => {\n  const base = 31;\n  const modulo = avatarColors.length;\n\n  let hashValue = 0;\n  let basePow = 1;\n\n  for (let i = 0; i < seed.length; i += 1) {\n    hashValue = (hashValue + seed.charCodeAt(i) * basePow) % modulo;\n    basePow = (basePow * base) % modulo;\n  }\n\n  return hashValue;\n};\n\nexport const getAvatarColorFromSeed = (seed: string): (typeof avatarColors)[number] => {\n  return avatarColors[hashSeed(seed)];\n};\n"],"names":["avatarColors","hashSeed","seed","base","modulo","length","hashValue","basePow","i","charCodeAt","getAvatarColorFromSeed"],"mappings":"AAAA;;;;AAIG;AACH,MAAMA,YAAY,GAAG,CACnB,qBAAqB,EACrB,uBAAuB,EACvB,qBAAqB,EACrB,uBAAuB,CACf,CAAA;AAEV;;;;;AAKG;AACH,MAAMC,QAAQ,GAAIC,IAAY,IAAY;EACxC,MAAMC,IAAI,GAAG,EAAE,CAAA;AACf,EAAA,MAAMC,MAAM,GAAGJ,YAAY,CAACK,MAAM,CAAA;EAElC,IAAIC,SAAS,GAAG,CAAC,CAAA;EACjB,IAAIC,OAAO,GAAG,CAAC,CAAA;AAEf,EAAA,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGN,IAAI,CAACG,MAAM,EAAEG,CAAC,IAAI,CAAC,EAAE;AACvCF,IAAAA,SAAS,GAAG,CAACA,SAAS,GAAGJ,IAAI,CAACO,UAAU,CAACD,CAAC,CAAC,GAAGD,OAAO,IAAIH,MAAM,CAAA;AAC/DG,IAAAA,OAAO,GAAIA,OAAO,GAAGJ,IAAI,GAAIC,MAAM,CAAA;AACrC,GAAA;AAEA,EAAA,OAAOE,SAAS,CAAA;AAClB,CAAC,CAAA;AAEYI,MAAAA,sBAAsB,GAAIR,IAAY,IAAmC;AACpF,EAAA,OAAOF,YAAY,CAACC,QAAQ,CAACC,IAAI,CAAC,CAAC,CAAA;AACrC;;;;"}
+{"version":3,"file":"colors.mjs","sources":["../../../src/avatar/colors/colors.ts"],"sourcesContent":["/*\n * The colors we support generating an Avatar background color from a \"seed\" for.\n * Changing this array will change the assignment between seeds.\n * Do not change this array.\n */\nconst avatarColors = [\n  'var(--color-bright-blue)',\n  'var(--color-bright-yellow)',\n  'var(--color-bright-pink)',\n  'var(--color-bright-orange)',\n] as const;\n\n/*\n * Takes in a \"seed\" string and spits out an index for the color we should use.\n * This implementation has been synced across all three clients so that we consistently\n * generate branded avatar colors when rendering a list of Avatars.\n * Do not change this implementation.\n */\nconst hashSeed = (seed: string): number => {\n  const base = 31;\n  const modulo = avatarColors.length;\n\n  let hashValue = 0;\n  let basePow = 1;\n\n  for (let i = 0; i < seed.length; i += 1) {\n    hashValue = (hashValue + seed.charCodeAt(i) * basePow) % modulo;\n    basePow = (basePow * base) % modulo;\n  }\n\n  return hashValue;\n};\n\nexport const getAvatarColorFromSeed = (seed: string): (typeof avatarColors)[number] => {\n  return avatarColors[hashSeed(seed)];\n};\n"],"names":["avatarColors","hashSeed","seed","base","modulo","length","hashValue","basePow","i","charCodeAt","getAvatarColorFromSeed"],"mappings":"AAAA;;;;AAIG;AACH,MAAMA,YAAY,GAAG,CACnB,0BAA0B,EAC1B,4BAA4B,EAC5B,0BAA0B,EAC1B,4BAA4B,CACpB,CAAA;AAEV;;;;;AAKG;AACH,MAAMC,QAAQ,GAAIC,IAAY,IAAY;EACxC,MAAMC,IAAI,GAAG,EAAE,CAAA;AACf,EAAA,MAAMC,MAAM,GAAGJ,YAAY,CAACK,MAAM,CAAA;EAElC,IAAIC,SAAS,GAAG,CAAC,CAAA;EACjB,IAAIC,OAAO,GAAG,CAAC,CAAA;AAEf,EAAA,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGN,IAAI,CAACG,MAAM,EAAEG,CAAC,IAAI,CAAC,EAAE;AACvCF,IAAAA,SAAS,GAAG,CAACA,SAAS,GAAGJ,IAAI,CAACO,UAAU,CAACD,CAAC,CAAC,GAAGD,OAAO,IAAIH,MAAM,CAAA;AAC/DG,IAAAA,OAAO,GAAIA,OAAO,GAAGJ,IAAI,GAAIC,MAAM,CAAA;AACrC,GAAA;AAEA,EAAA,OAAOE,SAAS,CAAA;AAClB,CAAC,CAAA;AAEYI,MAAAA,sBAAsB,GAAIR,IAAY,IAAmC;AACpF,EAAA,OAAOF,YAAY,CAACC,QAAQ,CAACC,IAAI,CAAC,CAAC,CAAA;AACrC;;;;"}

package/build/avatarView/AvatarView.js

@@ -0,0 +1,207 @@
+'use strict';
+
+var Badge = require('../badge/Badge.js');
+var NotificationDot = require('../common/notificationDot/NotificationDot.js');
+var StatusIcon = require('../statusIcon/StatusIcon.js');
+var Circle = require('../common/circle/Circle.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');
+
+const AvatarViewDefaultSize = 48;
+/** Non interactive avatar view has custom border width */
+const mapNonInteractiveBorderWidth = {
+  16: 0.667,
+  24: 1,
+  32: 1,
+  40: 1.25,
+  48: 1.5,
+  56: 1.75,
+  72: 2.25
+};
+/** Selected state has custom border width */
+const mapSelectedBorderWidth = {
+  16: 1,
+  24: 1,
+  32: 1,
+  40: 2,
+  48: 2,
+  56: 2,
+  72: 2
+};
+function AvatarView({
+  children = undefined,
+  size = AvatarViewDefaultSize,
+  selected,
+  notification,
+  badge,
+  entity,
+  action,
+  className,
+  style
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(Interactive, {
+    ...action,
+    className: clsx.clsx('np-avatar-view', {
+      'np-avatar-view-selected': selected
+    }, className),
+    children: /*#__PURE__*/jsxRuntime.jsx(Badges, {
+      asset: badge,
+      avatarProps: {
+        size,
+        notification,
+        selected
+      },
+      children: /*#__PURE__*/jsxRuntime.jsx(Circle, {
+        size: size,
+        fixedSize: true,
+        style: {
+          // @ts-expect-error CSS custom props allowed
+          '--avatar-view-selected-border-width': `${mapSelectedBorderWidth[size]}px`,
+          '--avatar-view-non-interactive-border-width': `${mapNonInteractiveBorderWidth[size]}px`,
+          ...style
+        },
+        children: children === undefined ? /*#__PURE__*/jsxRuntime.jsx(Entity, {
+          ...entity
+        }) : 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: className,
+      children: children
+    });
+  }
+  const a11yProps = {
+    ariaLabel,
+    ariaLabelledby
+  };
+  if (elementName === 'button') {
+    return /*#__PURE__*/jsxRuntime.jsx("button", {
+      type: "button",
+      className: clsx.clsx(className, 'np-avatar-view-interactive', '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, 'np-avatar-view-interactive', 'text-no-decoration'),
+        ...a11yProps,
+        children: children
+      })
+    );
+  }
+}
+const mapBadgeSize = {
+  16: 'sm',
+  24: 'sm',
+  32: 'sm',
+  40: 'sm',
+  48: 'sm',
+  56: 'lg',
+  72: 'lg'
+};
+/** AvatarView has a custom sizes for badge */
+const mapNotificationSize = {
+  16: 6,
+  24: 8,
+  32: 10,
+  40: 10,
+  48: 14,
+  56: 16,
+  72: 20
+};
+function Badges({
+  children,
+  asset,
+  avatarProps
+}) {
+  const {
+    size = AvatarViewDefaultSize,
+    selected,
+    notification
+  } = avatarProps;
+  if (asset || selected || notification) {
+    if (asset && size > 16) {
+      return /*#__PURE__*/jsxRuntime.jsx(Badge, {
+        badge: asset,
+        size: mapBadgeSize[size],
+        children: children
+      });
+    }
+    if (selected && size > 16) {
+      return /*#__PURE__*/jsxRuntime.jsx(Badge, {
+        badge: /*#__PURE__*/jsxRuntime.jsx(StatusIcon, {
+          sentiment: "positive",
+          size: mapBadgeSize[size]
+        }),
+        size: mapBadgeSize[size],
+        children: children
+      });
+    }
+    if (notification) {
+      return /*#__PURE__*/jsxRuntime.jsx(Badge, {
+        badge: /*#__PURE__*/jsxRuntime.jsx(NotificationDot
+        // @ts-expect-error CSS custom props allowed
+        , {
+          style: {
+            '--badge-notification-dot-size': `${mapNotificationSize[size]}px`
+          }
+        }),
+        position: "top-right",
+        size: mapBadgeSize[size],
+        children: children
+      });
+    }
+  }
+  return children;
+}
+function Entity({
+  imageSrc = null,
+  name = null,
+  profileType = null
+}) {
+  const [tryLoadImage, setTryLoadImage] = React.useState(true);
+  if (imageSrc && tryLoadImage) {
+    return /*#__PURE__*/jsxRuntime.jsx("img", {
+      src: imageSrc,
+      alt: "",
+      onError: () => setTryLoadImage(false)
+    });
+  }
+  if (profileType) {
+    return profileType === 'business' ? /*#__PURE__*/jsxRuntime.jsx(icons.Briefcase, {}) : /*#__PURE__*/jsxRuntime.jsx(icons.Profile, {});
+  }
+  if (name) {
+    return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+      children: 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 from '../badge';\nimport { getInitials } from '../common';\nimport NotificationDot from '../common/notificationDot/NotificationDot';\nimport StatusIcon from '../statusIcon';\nimport Circle from '../common/circle';\nimport { HTMLAttributes, PropsWithChildren, useState } from 'react';\nimport { ActionOptions as ActionProps } from '../common/action/Action';\nimport { clsx } from 'clsx';\nimport { Briefcase, Profile } from '@transferwise/icons';\n\ntype InteractiveProps = Omit<ActionProps, 'text'> &\n  Pick<HTMLAttributes<HTMLDivElement>, 'className' | 'aria-labelledby'>;\n\nconst AvatarViewDefaultSize = 48;\n\nexport type Props = PropsWithChildren<{\n  size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;\n  /** adds prebuilt notification dot via Badge component */\n  notification?: boolean;\n  /** adds custom badge to avatar */\n  badge?: React.ReactNode;\n  entity?: EntityProps;\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?: React.CSSProperties;\n}> &\n  Pick<HTMLAttributes<HTMLDivElement>, 'className' | 'style'>;\n\n/** Non interactive avatar view has custom border width */\nconst mapNonInteractiveBorderWidth = {\n  16: 0.667,\n  24: 1,\n  32: 1,\n  40: 1.25,\n  48: 1.5,\n  56: 1.75,\n  72: 2.25,\n};\n\n/** Selected state has custom border width */\nconst mapSelectedBorderWidth = {\n  16: 1,\n  24: 1,\n  32: 1,\n  40: 2,\n  48: 2,\n  56: 2,\n  72: 2,\n};\n\nfunction AvatarView({\n  children = undefined,\n  size = AvatarViewDefaultSize,\n  selected,\n  notification,\n  badge,\n  entity,\n  action,\n  className,\n  style,\n}: Props) {\n  return (\n    <Interactive\n      {...action}\n      className={clsx('np-avatar-view', { 'np-avatar-view-selected': selected }, className)}\n    >\n      <Badges asset={badge} avatarProps={{ size, notification, selected }}>\n        <Circle\n          size={size}\n          fixedSize\n          style={{\n            // @ts-expect-error CSS custom props allowed\n            '--avatar-view-selected-border-width': `${mapSelectedBorderWidth[size]}px`,\n            '--avatar-view-non-interactive-border-width': `${mapNonInteractiveBorderWidth[size]}px`,\n            ...style,\n          }}\n        >\n          {children === undefined ? <Entity {...entity} /> : 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={className}>{children}</div>;\n  }\n  const a11yProps = { ariaLabel, ariaLabelledby };\n  if (elementName === 'button') {\n    return (\n      <button\n        type=\"button\"\n        className={clsx(className, 'np-avatar-view-interactive', '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, 'np-avatar-view-interactive', 'text-no-decoration')}\n        {...a11yProps}\n      >\n        {children}\n      </a>\n    );\n  }\n}\n\nconst mapBadgeSize = {\n  16: 'sm',\n  24: 'sm',\n  32: 'sm',\n  40: 'sm',\n  48: 'sm',\n  56: 'lg',\n  72: 'lg',\n};\n\n/** AvatarView has a custom sizes for badge */\nconst mapNotificationSize = {\n  16: 6,\n  24: 8,\n  32: 10,\n  40: 10,\n  48: 14,\n  56: 16,\n  72: 20,\n};\n\ntype BadgesProps = PropsWithChildren<{\n  asset: React.ReactNode;\n  avatarProps: Pick<Props, 'selected' | 'size' | 'notification'>;\n}>;\n\nfunction Badges({ children, asset, avatarProps }: BadgesProps) {\n  const { size = AvatarViewDefaultSize, selected, notification } = avatarProps;\n  if (asset || selected || notification) {\n    if (asset && size > 16) {\n      return (\n        <Badge badge={asset} size={mapBadgeSize[size]}>\n          {children}\n        </Badge>\n      );\n    }\n    if (selected && size > 16) {\n      return (\n        <Badge\n          badge={<StatusIcon sentiment=\"positive\" size={mapBadgeSize[size]} />}\n          size={mapBadgeSize[size]}\n        >\n          {children}\n        </Badge>\n      );\n    }\n    if (notification) {\n      return (\n        <Badge\n          badge={\n            <NotificationDot\n              // @ts-expect-error CSS custom props allowed\n              style={{ '--badge-notification-dot-size': `${mapNotificationSize[size]}px` }}\n            />\n          }\n          position=\"top-right\"\n          size={mapBadgeSize[size]}\n        >\n          {children}\n        </Badge>\n      );\n    }\n  }\n  return children;\n}\n\nexport type EntityProps = {\n  imageSrc?: string | null;\n  name?: string | null;\n  profileType?: 'personal' | 'business' | null;\n};\n\nfunction Entity({ imageSrc = null, name = null, profileType = null }: EntityProps) {\n  const [tryLoadImage, setTryLoadImage] = useState(true);\n  if (imageSrc && tryLoadImage) {\n    return <img src={imageSrc} alt=\"\" onError={() => setTryLoadImage(false)} />;\n  }\n  if (profileType) {\n    return profileType === 'business' ? <Briefcase /> : <Profile />;\n  }\n  if (name) {\n    return <>{getInitials(name)}</>;\n  }\n  return <Profile />;\n}\n\nexport default AvatarView;\n"],"names":["AvatarViewDefaultSize","mapNonInteractiveBorderWidth","mapSelectedBorderWidth","AvatarView","children","undefined","size","selected","notification","badge","entity","action","className","style","_jsx","Interactive","clsx","Badges","asset","avatarProps","Circle","fixedSize","Entity","onClick","href","target","ariaLabel","ariaLabelledby","elementName","a11yProps","type","rel","mapBadgeSize","mapNotificationSize","Badge","StatusIcon","sentiment","NotificationDot","position","imageSrc","name","profileType","tryLoadImage","setTryLoadImage","useState","src","alt","onError","Briefcase","Profile","_Fragment","getInitials"],"mappings":"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"}

package/build/avatarView/AvatarView.mjs

@@ -0,0 +1,205 @@
+import Badge from '../badge/Badge.mjs';
+import NotificationDot from '../common/notificationDot/NotificationDot.mjs';
+import StatusIcon from '../statusIcon/StatusIcon.mjs';
+import Circle from '../common/circle/Circle.mjs';
+import { useState } from 'react';
+import { clsx } from 'clsx';
+import { Briefcase, Profile } from '@transferwise/icons';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { getInitials } from '../common/initials.mjs';
+
+const AvatarViewDefaultSize = 48;
+/** Non interactive avatar view has custom border width */
+const mapNonInteractiveBorderWidth = {
+  16: 0.667,
+  24: 1,
+  32: 1,
+  40: 1.25,
+  48: 1.5,
+  56: 1.75,
+  72: 2.25
+};
+/** Selected state has custom border width */
+const mapSelectedBorderWidth = {
+  16: 1,
+  24: 1,
+  32: 1,
+  40: 2,
+  48: 2,
+  56: 2,
+  72: 2
+};
+function AvatarView({
+  children = undefined,
+  size = AvatarViewDefaultSize,
+  selected,
+  notification,
+  badge,
+  entity,
+  action,
+  className,
+  style
+}) {
+  return /*#__PURE__*/jsx(Interactive, {
+    ...action,
+    className: clsx('np-avatar-view', {
+      'np-avatar-view-selected': selected
+    }, className),
+    children: /*#__PURE__*/jsx(Badges, {
+      asset: badge,
+      avatarProps: {
+        size,
+        notification,
+        selected
+      },
+      children: /*#__PURE__*/jsx(Circle, {
+        size: size,
+        fixedSize: true,
+        style: {
+          // @ts-expect-error CSS custom props allowed
+          '--avatar-view-selected-border-width': `${mapSelectedBorderWidth[size]}px`,
+          '--avatar-view-non-interactive-border-width': `${mapNonInteractiveBorderWidth[size]}px`,
+          ...style
+        },
+        children: children === undefined ? /*#__PURE__*/jsx(Entity, {
+          ...entity
+        }) : 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: className,
+      children: children
+    });
+  }
+  const a11yProps = {
+    ariaLabel,
+    ariaLabelledby
+  };
+  if (elementName === 'button') {
+    return /*#__PURE__*/jsx("button", {
+      type: "button",
+      className: clsx(className, 'np-avatar-view-interactive', '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, 'np-avatar-view-interactive', 'text-no-decoration'),
+        ...a11yProps,
+        children: children
+      })
+    );
+  }
+}
+const mapBadgeSize = {
+  16: 'sm',
+  24: 'sm',
+  32: 'sm',
+  40: 'sm',
+  48: 'sm',
+  56: 'lg',
+  72: 'lg'
+};
+/** AvatarView has a custom sizes for badge */
+const mapNotificationSize = {
+  16: 6,
+  24: 8,
+  32: 10,
+  40: 10,
+  48: 14,
+  56: 16,
+  72: 20
+};
+function Badges({
+  children,
+  asset,
+  avatarProps
+}) {
+  const {
+    size = AvatarViewDefaultSize,
+    selected,
+    notification
+  } = avatarProps;
+  if (asset || selected || notification) {
+    if (asset && size > 16) {
+      return /*#__PURE__*/jsx(Badge, {
+        badge: asset,
+        size: mapBadgeSize[size],
+        children: children
+      });
+    }
+    if (selected && size > 16) {
+      return /*#__PURE__*/jsx(Badge, {
+        badge: /*#__PURE__*/jsx(StatusIcon, {
+          sentiment: "positive",
+          size: mapBadgeSize[size]
+        }),
+        size: mapBadgeSize[size],
+        children: children
+      });
+    }
+    if (notification) {
+      return /*#__PURE__*/jsx(Badge, {
+        badge: /*#__PURE__*/jsx(NotificationDot
+        // @ts-expect-error CSS custom props allowed
+        , {
+          style: {
+            '--badge-notification-dot-size': `${mapNotificationSize[size]}px`
+          }
+        }),
+        position: "top-right",
+        size: mapBadgeSize[size],
+        children: children
+      });
+    }
+  }
+  return children;
+}
+function Entity({
+  imageSrc = null,
+  name = null,
+  profileType = null
+}) {
+  const [tryLoadImage, setTryLoadImage] = useState(true);
+  if (imageSrc && tryLoadImage) {
+    return /*#__PURE__*/jsx("img", {
+      src: imageSrc,
+      alt: "",
+      onError: () => setTryLoadImage(false)
+    });
+  }
+  if (profileType) {
+    return profileType === 'business' ? /*#__PURE__*/jsx(Briefcase, {}) : /*#__PURE__*/jsx(Profile, {});
+  }
+  if (name) {
+    return /*#__PURE__*/jsx(Fragment, {
+      children: getInitials(name)
+    });
+  }
+  return /*#__PURE__*/jsx(Profile, {});
+}
+
+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 from '../badge';\nimport { getInitials } from '../common';\nimport NotificationDot from '../common/notificationDot/NotificationDot';\nimport StatusIcon from '../statusIcon';\nimport Circle from '../common/circle';\nimport { HTMLAttributes, PropsWithChildren, useState } from 'react';\nimport { ActionOptions as ActionProps } from '../common/action/Action';\nimport { clsx } from 'clsx';\nimport { Briefcase, Profile } from '@transferwise/icons';\n\ntype InteractiveProps = Omit<ActionProps, 'text'> &\n  Pick<HTMLAttributes<HTMLDivElement>, 'className' | 'aria-labelledby'>;\n\nconst AvatarViewDefaultSize = 48;\n\nexport type Props = PropsWithChildren<{\n  size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;\n  /** adds prebuilt notification dot via Badge component */\n  notification?: boolean;\n  /** adds custom badge to avatar */\n  badge?: React.ReactNode;\n  entity?: EntityProps;\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?: React.CSSProperties;\n}> &\n  Pick<HTMLAttributes<HTMLDivElement>, 'className' | 'style'>;\n\n/** Non interactive avatar view has custom border width */\nconst mapNonInteractiveBorderWidth = {\n  16: 0.667,\n  24: 1,\n  32: 1,\n  40: 1.25,\n  48: 1.5,\n  56: 1.75,\n  72: 2.25,\n};\n\n/** Selected state has custom border width */\nconst mapSelectedBorderWidth = {\n  16: 1,\n  24: 1,\n  32: 1,\n  40: 2,\n  48: 2,\n  56: 2,\n  72: 2,\n};\n\nfunction AvatarView({\n  children = undefined,\n  size = AvatarViewDefaultSize,\n  selected,\n  notification,\n  badge,\n  entity,\n  action,\n  className,\n  style,\n}: Props) {\n  return (\n    <Interactive\n      {...action}\n      className={clsx('np-avatar-view', { 'np-avatar-view-selected': selected }, className)}\n    >\n      <Badges asset={badge} avatarProps={{ size, notification, selected }}>\n        <Circle\n          size={size}\n          fixedSize\n          style={{\n            // @ts-expect-error CSS custom props allowed\n            '--avatar-view-selected-border-width': `${mapSelectedBorderWidth[size]}px`,\n            '--avatar-view-non-interactive-border-width': `${mapNonInteractiveBorderWidth[size]}px`,\n            ...style,\n          }}\n        >\n          {children === undefined ? <Entity {...entity} /> : 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={className}>{children}</div>;\n  }\n  const a11yProps = { ariaLabel, ariaLabelledby };\n  if (elementName === 'button') {\n    return (\n      <button\n        type=\"button\"\n        className={clsx(className, 'np-avatar-view-interactive', '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, 'np-avatar-view-interactive', 'text-no-decoration')}\n        {...a11yProps}\n      >\n        {children}\n      </a>\n    );\n  }\n}\n\nconst mapBadgeSize = {\n  16: 'sm',\n  24: 'sm',\n  32: 'sm',\n  40: 'sm',\n  48: 'sm',\n  56: 'lg',\n  72: 'lg',\n};\n\n/** AvatarView has a custom sizes for badge */\nconst mapNotificationSize = {\n  16: 6,\n  24: 8,\n  32: 10,\n  40: 10,\n  48: 14,\n  56: 16,\n  72: 20,\n};\n\ntype BadgesProps = PropsWithChildren<{\n  asset: React.ReactNode;\n  avatarProps: Pick<Props, 'selected' | 'size' | 'notification'>;\n}>;\n\nfunction Badges({ children, asset, avatarProps }: BadgesProps) {\n  const { size = AvatarViewDefaultSize, selected, notification } = avatarProps;\n  if (asset || selected || notification) {\n    if (asset && size > 16) {\n      return (\n        <Badge badge={asset} size={mapBadgeSize[size]}>\n          {children}\n        </Badge>\n      );\n    }\n    if (selected && size > 16) {\n      return (\n        <Badge\n          badge={<StatusIcon sentiment=\"positive\" size={mapBadgeSize[size]} />}\n          size={mapBadgeSize[size]}\n        >\n          {children}\n        </Badge>\n      );\n    }\n    if (notification) {\n      return (\n        <Badge\n          badge={\n            <NotificationDot\n              // @ts-expect-error CSS custom props allowed\n              style={{ '--badge-notification-dot-size': `${mapNotificationSize[size]}px` }}\n            />\n          }\n          position=\"top-right\"\n          size={mapBadgeSize[size]}\n        >\n          {children}\n        </Badge>\n      );\n    }\n  }\n  return children;\n}\n\nexport type EntityProps = {\n  imageSrc?: string | null;\n  name?: string | null;\n  profileType?: 'personal' | 'business' | null;\n};\n\nfunction Entity({ imageSrc = null, name = null, profileType = null }: EntityProps) {\n  const [tryLoadImage, setTryLoadImage] = useState(true);\n  if (imageSrc && tryLoadImage) {\n    return <img src={imageSrc} alt=\"\" onError={() => setTryLoadImage(false)} />;\n  }\n  if (profileType) {\n    return profileType === 'business' ? <Briefcase /> : <Profile />;\n  }\n  if (name) {\n    return <>{getInitials(name)}</>;\n  }\n  return <Profile />;\n}\n\nexport default AvatarView;\n"],"names":["AvatarViewDefaultSize","mapNonInteractiveBorderWidth","mapSelectedBorderWidth","AvatarView","children","undefined","size","selected","notification","badge","entity","action","className","style","_jsx","Interactive","clsx","Badges","asset","avatarProps","Circle","fixedSize","Entity","onClick","href","target","ariaLabel","ariaLabelledby","elementName","a11yProps","type","rel","mapBadgeSize","mapNotificationSize","Badge","StatusIcon","sentiment","NotificationDot","position","imageSrc","name","profileType","tryLoadImage","setTryLoadImage","useState","src","alt","onError","Briefcase","Profile","_Fragment","getInitials"],"mappings":"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"}

package/build/avatarWrapper/AvatarWrapper.js

@@ -9,6 +9,7 @@ var StatusIcon = require('../statusIcon/StatusIcon.js');
 var jsxRuntime = require('react/jsx-runtime');
 var profileType = require('../common/propsValues/profileType.js');
 var size = require('../common/propsValues/size.js');
+var initials = require('../common/initials.js');
 
 const OptionalBadge = ({
   url,
@@ -44,6 +45,9 @@ const OptionalBadge = ({
     children: children
   });
 };
+/**
+ * @deprecated Use `AvatarView` component instead
+ */
 const AvatarWrapper = ({
   url,
   'aria-label': ariaLabel,
@@ -94,9 +98,9 @@ const AvatarWrapper = ({
       return {
         type: avatarTypes.AvatarType.INITIALS,
         children: /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
-          children: getInitials(name)
+          children: initials.getInitials(name)
         }),
-        backgroundColorSeed: profileId?.toString(),
+        backgroundColorSeed: name?.toString(),
         ...updatedAvatarProps
       };
     }
@@ -120,13 +124,6 @@ const AvatarWrapper = ({
     })
   });
 };
-function getInitials(name) {
-  const allInitials = name.split(' ').map(part => part[0]).join('').toUpperCase();
-  if (allInitials.length === 1) {
-    return allInitials[0];
-  }
-  return allInitials[0] + allInitials.slice(-1);
-}
 
 module.exports = AvatarWrapper;
 //# sourceMappingURL=AvatarWrapper.js.map