@transferwise/components 46.48.0 → 46.50.0

package/build/actionOption/ActionOption.js

@@ -22,7 +22,8 @@ const ActionOption = ({
   className,
   showMediaAtAllSizes,
   showMediaCircle,
-  isContainerAligned
+  isContainerAligned,
+  as
 }) => {
   const sharedProps = {
     media,
@@ -33,7 +34,8 @@ const ActionOption = ({
     showMediaAtAllSizes,
     showMediaCircle,
     className: classNames__default.default('tw-action-option', className),
-    isContainerAligned
+    isContainerAligned,
+    as
   };
   const getAriaLabel = () => {
     const labels = [];

package/build/actionOption/ActionOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionOption.js","sources":["../../src/actionOption/ActionOption.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport ActionButton from '../actionButton';\nimport { CommonProps, Priority, PriorityPrimary, PrioritySecondary } from '../common';\nimport Option from '../common/Option';\n\nexport type ActionOptionProps = {\n  complex?: boolean;\n  content?: React.ReactNode;\n  disabled?: boolean;\n  media?: React.ReactNode;\n  showMediaAtAllSizes?: boolean;\n  onClick: () => void;\n  title: React.ReactNode;\n  action: React.ReactNode;\n  priority?: PriorityPrimary | PrioritySecondary;\n  showMediaCircle?: boolean;\n  isContainerAligned?: boolean;\n} & CommonProps;\n\nconst ActionOption = ({\n  action,\n  priority = Priority.PRIMARY,\n  disabled,\n  onClick,\n  media,\n  title,\n  content,\n  complex,\n  className,\n  showMediaAtAllSizes,\n  showMediaCircle,\n  isContainerAligned,\n}: ActionOptionProps) => {\n  const sharedProps = {\n    media,\n    title,\n    content,\n    complex,\n    disabled,\n    showMediaAtAllSizes,\n    showMediaCircle,\n    className: classNames('tw-action-option', className),\n    isContainerAligned,\n  };\n\n  const getAriaLabel = (): string | undefined => {\n    const labels: string[] = [];\n\n    if (typeof title === 'string') {\n      labels.push(title);\n    }\n\n    if (typeof action === 'string') {\n      labels.push(action);\n    }\n\n    return labels.join(', ') || undefined;\n  };\n\n  return (\n    <Option\n      {...sharedProps}\n      button={\n        <ActionButton\n          priority={priority}\n          disabled={disabled}\n          aria-label={getAriaLabel()}\n          onClick={onClick}\n        >\n          {action}\n        </ActionButton>\n      }\n    />\n  );\n};\n\nexport default ActionOption;\n"],"names":["ActionOption","action","priority","Priority","PRIMARY","disabled","onClick","media","title","content","complex","className","showMediaAtAllSizes","showMediaCircle","isContainerAligned","sharedProps","classNames","getAriaLabel","labels","push","join","undefined","_jsx","Option","button","ActionButton","children"],"mappings":";;;;;;;;;;;;AAoBMA,MAAAA,YAAY,GAAGA,CAAC;EACpBC,MAAM;EACNC,QAAQ,GAAGC,gBAAQ,CAACC,OAAO;EAC3BC,QAAQ;EACRC,OAAO;EACPC,KAAK;EACLC,KAAK;EACLC,OAAO;EACPC,OAAO;EACPC,SAAS;EACTC,mBAAmB;EACnBC,eAAe;AACfC,EAAAA,kBAAAA;AAAkB,CACA,KAAI;AACtB,EAAA,MAAMC,WAAW,GAAG;IAClBR,KAAK;IACLC,KAAK;IACLC,OAAO;IACPC,OAAO;IACPL,QAAQ;IACRO,mBAAmB;IACnBC,eAAe;AACfF,IAAAA,SAAS,EAAEK,2BAAU,CAAC,kBAAkB,EAAEL,SAAS,CAAC;AACpDG,IAAAA,kBAAAA;GACD,CAAA;EAED,MAAMG,YAAY,GAAGA,MAAyB;IAC5C,MAAMC,MAAM,GAAa,EAAE,CAAA;AAE3B,IAAA,IAAI,OAAOV,KAAK,KAAK,QAAQ,EAAE;AAC7BU,MAAAA,MAAM,CAACC,IAAI,CAACX,KAAK,CAAC,CAAA;AACpB,KAAA;AAEA,IAAA,IAAI,OAAOP,MAAM,KAAK,QAAQ,EAAE;AAC9BiB,MAAAA,MAAM,CAACC,IAAI,CAAClB,MAAM,CAAC,CAAA;AACrB,KAAA;AAEA,IAAA,OAAOiB,MAAM,CAACE,IAAI,CAAC,IAAI,CAAC,IAAIC,SAAS,CAAA;GACtC,CAAA;EAED,oBACEC,cAAA,CAACC,MAAM,EAAA;AAAA,IAAA,GACDR,WAAW;IACfS,MAAM,eACJF,cAAA,CAACG,YAAY,EAAA;AACXvB,MAAAA,QAAQ,EAAEA,QAAS;AACnBG,MAAAA,QAAQ,EAAEA,QAAS;MACnB,YAAYY,EAAAA,YAAY,EAAG;AAC3BX,MAAAA,OAAO,EAAEA,OAAQ;AAAAoB,MAAAA,QAAA,EAEhBzB,MAAAA;KACW,CAAA;AACf,GAAA,CACD,CAAA;AAEN;;;;"}
+{"version":3,"file":"ActionOption.js","sources":["../../src/actionOption/ActionOption.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport ActionButton from '../actionButton';\nimport { CommonProps, Priority, PriorityPrimary, PrioritySecondary } from '../common';\nimport Option from '../common/Option';\n\nexport type ActionOptionProps = {\n  complex?: boolean;\n  content?: React.ReactNode;\n  disabled?: boolean;\n  media?: React.ReactNode;\n  showMediaAtAllSizes?: boolean;\n  onClick: () => void;\n  title: React.ReactNode;\n  action: React.ReactNode;\n  priority?: PriorityPrimary | PrioritySecondary;\n  showMediaCircle?: boolean;\n  isContainerAligned?: boolean;\n  as?: React.ElementType;\n} & CommonProps;\n\nconst ActionOption = ({\n  action,\n  priority = Priority.PRIMARY,\n  disabled,\n  onClick,\n  media,\n  title,\n  content,\n  complex,\n  className,\n  showMediaAtAllSizes,\n  showMediaCircle,\n  isContainerAligned,\n  as,\n}: ActionOptionProps) => {\n  const sharedProps = {\n    media,\n    title,\n    content,\n    complex,\n    disabled,\n    showMediaAtAllSizes,\n    showMediaCircle,\n    className: classNames('tw-action-option', className),\n    isContainerAligned,\n    as,\n  };\n\n  const getAriaLabel = (): string | undefined => {\n    const labels: string[] = [];\n\n    if (typeof title === 'string') {\n      labels.push(title);\n    }\n\n    if (typeof action === 'string') {\n      labels.push(action);\n    }\n\n    return labels.join(', ') || undefined;\n  };\n\n  return (\n    <Option\n      {...sharedProps}\n      button={\n        <ActionButton\n          priority={priority}\n          disabled={disabled}\n          aria-label={getAriaLabel()}\n          onClick={onClick}\n        >\n          {action}\n        </ActionButton>\n      }\n    />\n  );\n};\n\nexport default ActionOption;\n"],"names":["ActionOption","action","priority","Priority","PRIMARY","disabled","onClick","media","title","content","complex","className","showMediaAtAllSizes","showMediaCircle","isContainerAligned","as","sharedProps","classNames","getAriaLabel","labels","push","join","undefined","_jsx","Option","button","ActionButton","children"],"mappings":";;;;;;;;;;;;AAqBMA,MAAAA,YAAY,GAAGA,CAAC;EACpBC,MAAM;EACNC,QAAQ,GAAGC,gBAAQ,CAACC,OAAO;EAC3BC,QAAQ;EACRC,OAAO;EACPC,KAAK;EACLC,KAAK;EACLC,OAAO;EACPC,OAAO;EACPC,SAAS;EACTC,mBAAmB;EACnBC,eAAe;EACfC,kBAAkB;AAClBC,EAAAA,EAAAA;AAAE,CACgB,KAAI;AACtB,EAAA,MAAMC,WAAW,GAAG;IAClBT,KAAK;IACLC,KAAK;IACLC,OAAO;IACPC,OAAO;IACPL,QAAQ;IACRO,mBAAmB;IACnBC,eAAe;AACfF,IAAAA,SAAS,EAAEM,2BAAU,CAAC,kBAAkB,EAAEN,SAAS,CAAC;IACpDG,kBAAkB;AAClBC,IAAAA,EAAAA;GACD,CAAA;EAED,MAAMG,YAAY,GAAGA,MAAyB;IAC5C,MAAMC,MAAM,GAAa,EAAE,CAAA;AAE3B,IAAA,IAAI,OAAOX,KAAK,KAAK,QAAQ,EAAE;AAC7BW,MAAAA,MAAM,CAACC,IAAI,CAACZ,KAAK,CAAC,CAAA;AACpB,KAAA;AAEA,IAAA,IAAI,OAAOP,MAAM,KAAK,QAAQ,EAAE;AAC9BkB,MAAAA,MAAM,CAACC,IAAI,CAACnB,MAAM,CAAC,CAAA;AACrB,KAAA;AAEA,IAAA,OAAOkB,MAAM,CAACE,IAAI,CAAC,IAAI,CAAC,IAAIC,SAAS,CAAA;GACtC,CAAA;EAED,oBACEC,cAAA,CAACC,MAAM,EAAA;AAAA,IAAA,GACDR,WAAW;IACfS,MAAM,eACJF,cAAA,CAACG,YAAY,EAAA;AACXxB,MAAAA,QAAQ,EAAEA,QAAS;AACnBG,MAAAA,QAAQ,EAAEA,QAAS;MACnB,YAAYa,EAAAA,YAAY,EAAG;AAC3BZ,MAAAA,OAAO,EAAEA,OAAQ;AAAAqB,MAAAA,QAAA,EAEhB1B,MAAAA;KACW,CAAA;AACf,GAAA,CACD,CAAA;AAEN;;;;"}

package/build/actionOption/ActionOption.mjs

@@ -16,7 +16,8 @@ const ActionOption = ({
   className,
   showMediaAtAllSizes,
   showMediaCircle,
-  isContainerAligned
+  isContainerAligned,
+  as
 }) => {
   const sharedProps = {
     media,
@@ -27,7 +28,8 @@ const ActionOption = ({
     showMediaAtAllSizes,
     showMediaCircle,
     className: classNames('tw-action-option', className),
-    isContainerAligned
+    isContainerAligned,
+    as
   };
   const getAriaLabel = () => {
     const labels = [];

package/build/actionOption/ActionOption.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ActionOption.mjs","sources":["../../src/actionOption/ActionOption.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport ActionButton from '../actionButton';\nimport { CommonProps, Priority, PriorityPrimary, PrioritySecondary } from '../common';\nimport Option from '../common/Option';\n\nexport type ActionOptionProps = {\n  complex?: boolean;\n  content?: React.ReactNode;\n  disabled?: boolean;\n  media?: React.ReactNode;\n  showMediaAtAllSizes?: boolean;\n  onClick: () => void;\n  title: React.ReactNode;\n  action: React.ReactNode;\n  priority?: PriorityPrimary | PrioritySecondary;\n  showMediaCircle?: boolean;\n  isContainerAligned?: boolean;\n} & CommonProps;\n\nconst ActionOption = ({\n  action,\n  priority = Priority.PRIMARY,\n  disabled,\n  onClick,\n  media,\n  title,\n  content,\n  complex,\n  className,\n  showMediaAtAllSizes,\n  showMediaCircle,\n  isContainerAligned,\n}: ActionOptionProps) => {\n  const sharedProps = {\n    media,\n    title,\n    content,\n    complex,\n    disabled,\n    showMediaAtAllSizes,\n    showMediaCircle,\n    className: classNames('tw-action-option', className),\n    isContainerAligned,\n  };\n\n  const getAriaLabel = (): string | undefined => {\n    const labels: string[] = [];\n\n    if (typeof title === 'string') {\n      labels.push(title);\n    }\n\n    if (typeof action === 'string') {\n      labels.push(action);\n    }\n\n    return labels.join(', ') || undefined;\n  };\n\n  return (\n    <Option\n      {...sharedProps}\n      button={\n        <ActionButton\n          priority={priority}\n          disabled={disabled}\n          aria-label={getAriaLabel()}\n          onClick={onClick}\n        >\n          {action}\n        </ActionButton>\n      }\n    />\n  );\n};\n\nexport default ActionOption;\n"],"names":["ActionOption","action","priority","Priority","PRIMARY","disabled","onClick","media","title","content","complex","className","showMediaAtAllSizes","showMediaCircle","isContainerAligned","sharedProps","classNames","getAriaLabel","labels","push","join","undefined","_jsx","Option","button","ActionButton","children"],"mappings":";;;;;;AAoBMA,MAAAA,YAAY,GAAGA,CAAC;EACpBC,MAAM;EACNC,QAAQ,GAAGC,QAAQ,CAACC,OAAO;EAC3BC,QAAQ;EACRC,OAAO;EACPC,KAAK;EACLC,KAAK;EACLC,OAAO;EACPC,OAAO;EACPC,SAAS;EACTC,mBAAmB;EACnBC,eAAe;AACfC,EAAAA,kBAAAA;AAAkB,CACA,KAAI;AACtB,EAAA,MAAMC,WAAW,GAAG;IAClBR,KAAK;IACLC,KAAK;IACLC,OAAO;IACPC,OAAO;IACPL,QAAQ;IACRO,mBAAmB;IACnBC,eAAe;AACfF,IAAAA,SAAS,EAAEK,UAAU,CAAC,kBAAkB,EAAEL,SAAS,CAAC;AACpDG,IAAAA,kBAAAA;GACD,CAAA;EAED,MAAMG,YAAY,GAAGA,MAAyB;IAC5C,MAAMC,MAAM,GAAa,EAAE,CAAA;AAE3B,IAAA,IAAI,OAAOV,KAAK,KAAK,QAAQ,EAAE;AAC7BU,MAAAA,MAAM,CAACC,IAAI,CAACX,KAAK,CAAC,CAAA;AACpB,KAAA;AAEA,IAAA,IAAI,OAAOP,MAAM,KAAK,QAAQ,EAAE;AAC9BiB,MAAAA,MAAM,CAACC,IAAI,CAAClB,MAAM,CAAC,CAAA;AACrB,KAAA;AAEA,IAAA,OAAOiB,MAAM,CAACE,IAAI,CAAC,IAAI,CAAC,IAAIC,SAAS,CAAA;GACtC,CAAA;EAED,oBACEC,GAAA,CAACC,MAAM,EAAA;AAAA,IAAA,GACDR,WAAW;IACfS,MAAM,eACJF,GAAA,CAACG,YAAY,EAAA;AACXvB,MAAAA,QAAQ,EAAEA,QAAS;AACnBG,MAAAA,QAAQ,EAAEA,QAAS;MACnB,YAAYY,EAAAA,YAAY,EAAG;AAC3BX,MAAAA,OAAO,EAAEA,OAAQ;AAAAoB,MAAAA,QAAA,EAEhBzB,MAAAA;KACW,CAAA;AACf,GAAA,CACD,CAAA;AAEN;;;;"}
+{"version":3,"file":"ActionOption.mjs","sources":["../../src/actionOption/ActionOption.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport ActionButton from '../actionButton';\nimport { CommonProps, Priority, PriorityPrimary, PrioritySecondary } from '../common';\nimport Option from '../common/Option';\n\nexport type ActionOptionProps = {\n  complex?: boolean;\n  content?: React.ReactNode;\n  disabled?: boolean;\n  media?: React.ReactNode;\n  showMediaAtAllSizes?: boolean;\n  onClick: () => void;\n  title: React.ReactNode;\n  action: React.ReactNode;\n  priority?: PriorityPrimary | PrioritySecondary;\n  showMediaCircle?: boolean;\n  isContainerAligned?: boolean;\n  as?: React.ElementType;\n} & CommonProps;\n\nconst ActionOption = ({\n  action,\n  priority = Priority.PRIMARY,\n  disabled,\n  onClick,\n  media,\n  title,\n  content,\n  complex,\n  className,\n  showMediaAtAllSizes,\n  showMediaCircle,\n  isContainerAligned,\n  as,\n}: ActionOptionProps) => {\n  const sharedProps = {\n    media,\n    title,\n    content,\n    complex,\n    disabled,\n    showMediaAtAllSizes,\n    showMediaCircle,\n    className: classNames('tw-action-option', className),\n    isContainerAligned,\n    as,\n  };\n\n  const getAriaLabel = (): string | undefined => {\n    const labels: string[] = [];\n\n    if (typeof title === 'string') {\n      labels.push(title);\n    }\n\n    if (typeof action === 'string') {\n      labels.push(action);\n    }\n\n    return labels.join(', ') || undefined;\n  };\n\n  return (\n    <Option\n      {...sharedProps}\n      button={\n        <ActionButton\n          priority={priority}\n          disabled={disabled}\n          aria-label={getAriaLabel()}\n          onClick={onClick}\n        >\n          {action}\n        </ActionButton>\n      }\n    />\n  );\n};\n\nexport default ActionOption;\n"],"names":["ActionOption","action","priority","Priority","PRIMARY","disabled","onClick","media","title","content","complex","className","showMediaAtAllSizes","showMediaCircle","isContainerAligned","as","sharedProps","classNames","getAriaLabel","labels","push","join","undefined","_jsx","Option","button","ActionButton","children"],"mappings":";;;;;;AAqBMA,MAAAA,YAAY,GAAGA,CAAC;EACpBC,MAAM;EACNC,QAAQ,GAAGC,QAAQ,CAACC,OAAO;EAC3BC,QAAQ;EACRC,OAAO;EACPC,KAAK;EACLC,KAAK;EACLC,OAAO;EACPC,OAAO;EACPC,SAAS;EACTC,mBAAmB;EACnBC,eAAe;EACfC,kBAAkB;AAClBC,EAAAA,EAAAA;AAAE,CACgB,KAAI;AACtB,EAAA,MAAMC,WAAW,GAAG;IAClBT,KAAK;IACLC,KAAK;IACLC,OAAO;IACPC,OAAO;IACPL,QAAQ;IACRO,mBAAmB;IACnBC,eAAe;AACfF,IAAAA,SAAS,EAAEM,UAAU,CAAC,kBAAkB,EAAEN,SAAS,CAAC;IACpDG,kBAAkB;AAClBC,IAAAA,EAAAA;GACD,CAAA;EAED,MAAMG,YAAY,GAAGA,MAAyB;IAC5C,MAAMC,MAAM,GAAa,EAAE,CAAA;AAE3B,IAAA,IAAI,OAAOX,KAAK,KAAK,QAAQ,EAAE;AAC7BW,MAAAA,MAAM,CAACC,IAAI,CAACZ,KAAK,CAAC,CAAA;AACpB,KAAA;AAEA,IAAA,IAAI,OAAOP,MAAM,KAAK,QAAQ,EAAE;AAC9BkB,MAAAA,MAAM,CAACC,IAAI,CAACnB,MAAM,CAAC,CAAA;AACrB,KAAA;AAEA,IAAA,OAAOkB,MAAM,CAACE,IAAI,CAAC,IAAI,CAAC,IAAIC,SAAS,CAAA;GACtC,CAAA;EAED,oBACEC,GAAA,CAACC,MAAM,EAAA;AAAA,IAAA,GACDR,WAAW;IACfS,MAAM,eACJF,GAAA,CAACG,YAAY,EAAA;AACXxB,MAAAA,QAAQ,EAAEA,QAAS;AACnBG,MAAAA,QAAQ,EAAEA,QAAS;MACnB,YAAYa,EAAAA,YAAY,EAAG;AAC3BZ,MAAAA,OAAO,EAAEA,OAAQ;AAAAqB,MAAAA,QAAA,EAEhB1B,MAAAA;KACW,CAAA;AACf,GAAA,CACD,CAAA;AAEN;;;;"}

package/build/avatar/Avatar.js

@@ -30,7 +30,8 @@ const Avatar = ({
   outlined = false,
   size: sizeFromProps = 48,
   theme: theme$1 = theme.Theme.LIGHT,
-  type = 'thumbnail'
+  type = 'thumbnail',
+  'aria-label': ariaLabel
 }) => {
   const backgroundColorFromSeed = React.useMemo(() => !backgroundColor && backgroundColorSeed ? `var(${colors.getAvatarColorFromSeed(backgroundColorSeed)})` : undefined, [backgroundColor, backgroundColorSeed]);
   const size = backwardsCompatibleSize(sizeFromProps);
@@ -40,6 +41,7 @@ const Avatar = ({
       'tw-avatar--branded': Boolean(backgroundColorFromSeed),
       'np-text-title-body': type === 'initials'
     }),
+    "aria-label": ariaLabel,
     children: /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "tw-avatar__content",
       style: {

package/build/avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sources":["../../src/avatar/Avatar.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport { useMemo } from 'react';\n\nimport { Theme } from '../common';\n\nimport { getAvatarColorFromSeed } from './colors';\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}\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}) => {\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    <div\n      className={classnames('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    >\n      <div\n        className=\"tw-avatar__content\"\n        style={{\n          backgroundColor: backgroundColor || backgroundColorFromSeed,\n        }}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n\nexport default Avatar;\n"],"names":["backwardsCompatibleSize","size","Avatar","backgroundColor","backgroundColorSeed","children","className","outlined","sizeFromProps","theme","Theme","LIGHT","type","backgroundColorFromSeed","useMemo","getAvatarColorFromSeed","undefined","_jsx","classnames","Boolean","style"],"mappings":";;;;;;;;;;;;AA4BA,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,WAAA;AAAW,CACnB,KAAI;EACH,MAAMC,uBAAuB,GAAGC,aAAO,CACrC,MACE,CAACX,eAAe,IAAIC,mBAAmB,GACnC,CAAOW,IAAAA,EAAAA,6BAAsB,CAACX,mBAAmB,CAAC,CAAG,CAAA,CAAA,GACrDY,SAAS,EACf,CAACb,eAAe,EAAEC,mBAAmB,CAAC,CACvC,CAAA;AAED,EAAA,MAAMH,IAAI,GAAGD,uBAAuB,CAACQ,aAAa,CAAC,CAAA;AAEnD,EAAA,oBACES,cAAA,CAAA,KAAA,EAAA;AACEX,IAAAA,SAAS,EAAEY,2BAAU,CAAC,WAAW,EAAEZ,SAAS,EAAE,CAAcL,WAAAA,EAAAA,IAAI,CAAE,CAAA,EAAE,CAAcW,WAAAA,EAAAA,IAAI,EAAE,EAAE;AACxF,MAAA,qBAAqB,EAAEL,QAAQ;AAC/B,MAAA,oBAAoB,EAAEY,OAAO,CAACN,uBAAuB,CAAC;MACtD,oBAAoB,EAAED,IAAI,KAAK,UAAA;AAChC,KAAA,CAAE;AAAAP,IAAAA,QAAA,eAEHY,cAAA,CAAA,KAAA,EAAA;AACEX,MAAAA,SAAS,EAAC,oBAAoB;AAC9Bc,MAAAA,KAAK,EAAE;QACLjB,eAAe,EAAEA,eAAe,IAAIU,uBAAAA;OACpC;AAAAR,MAAAA,QAAA,EAEDA,QAAAA;KACE,CAAA;AACP,GAAK,CAAC,CAAA;AAEV;;;;"}
+{"version":3,"file":"Avatar.js","sources":["../../src/avatar/Avatar.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport { useMemo } from 'react';\n\nimport { Theme } from '../common';\n\nimport { getAvatarColorFromSeed } from './colors';\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    <div\n      className={classnames('tw-avatar', className, `tw-avatar--${size}`, `tw-avatar--${type}`, {\n        'tw-avatar--outlined': outlined,\n        'tw-avatar--branded': Boolean(backgroundColorFromSeed),\n        'np-text-title-body': type === 'initials',\n      })}\n      aria-label={ariaLabel}\n    >\n      <div\n        className=\"tw-avatar__content\"\n        style={{\n          backgroundColor: backgroundColor || backgroundColorFromSeed,\n        }}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n\nexport default Avatar;\n"],"names":["backwardsCompatibleSize","size","Avatar","backgroundColor","backgroundColorSeed","children","className","outlined","sizeFromProps","theme","Theme","LIGHT","type","ariaLabel","backgroundColorFromSeed","useMemo","getAvatarColorFromSeed","undefined","_jsx","classnames","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,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;AAEnD,EAAA,oBACEU,cAAA,CAAA,KAAA,EAAA;AACEZ,IAAAA,SAAS,EAAEa,2BAAU,CAAC,WAAW,EAAEb,SAAS,EAAE,CAAcL,WAAAA,EAAAA,IAAI,CAAE,CAAA,EAAE,CAAcW,WAAAA,EAAAA,IAAI,EAAE,EAAE;AACxF,MAAA,qBAAqB,EAAEL,QAAQ;AAC/B,MAAA,oBAAoB,EAAEa,OAAO,CAACN,uBAAuB,CAAC;MACtD,oBAAoB,EAAEF,IAAI,KAAK,UAAA;AAChC,KAAA,CAAE;AACH,IAAA,YAAA,EAAYC,SAAU;AAAAR,IAAAA,QAAA,eAEtBa,cAAA,CAAA,KAAA,EAAA;AACEZ,MAAAA,SAAS,EAAC,oBAAoB;AAC9Be,MAAAA,KAAK,EAAE;QACLlB,eAAe,EAAEA,eAAe,IAAIW,uBAAAA;OACpC;AAAAT,MAAAA,QAAA,EAEDA,QAAAA;KACE,CAAA;AACP,GAAK,CAAC,CAAA;AAEV;;;;"}

package/build/avatar/Avatar.mjs

@@ -24,7 +24,8 @@ const Avatar = ({
   outlined = false,
   size: sizeFromProps = 48,
   theme = Theme.LIGHT,
-  type = 'thumbnail'
+  type = 'thumbnail',
+  'aria-label': ariaLabel
 }) => {
   const backgroundColorFromSeed = useMemo(() => !backgroundColor && backgroundColorSeed ? `var(${getAvatarColorFromSeed(backgroundColorSeed)})` : undefined, [backgroundColor, backgroundColorSeed]);
   const size = backwardsCompatibleSize(sizeFromProps);
@@ -34,6 +35,7 @@ const Avatar = ({
       'tw-avatar--branded': Boolean(backgroundColorFromSeed),
       'np-text-title-body': type === 'initials'
     }),
+    "aria-label": ariaLabel,
     children: /*#__PURE__*/jsx("div", {
       className: "tw-avatar__content",
       style: {

package/build/avatar/Avatar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.mjs","sources":["../../src/avatar/Avatar.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport { useMemo } from 'react';\n\nimport { Theme } from '../common';\n\nimport { getAvatarColorFromSeed } from './colors';\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}\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}) => {\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    <div\n      className={classnames('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    >\n      <div\n        className=\"tw-avatar__content\"\n        style={{\n          backgroundColor: backgroundColor || backgroundColorFromSeed,\n        }}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n\nexport default Avatar;\n"],"names":["backwardsCompatibleSize","size","Avatar","backgroundColor","backgroundColorSeed","children","className","outlined","sizeFromProps","theme","Theme","LIGHT","type","backgroundColorFromSeed","useMemo","getAvatarColorFromSeed","undefined","_jsx","classnames","Boolean","style"],"mappings":";;;;;;AA4BA,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,WAAA;AAAW,CACnB,KAAI;EACH,MAAMC,uBAAuB,GAAGC,OAAO,CACrC,MACE,CAACX,eAAe,IAAIC,mBAAmB,GACnC,CAAOW,IAAAA,EAAAA,sBAAsB,CAACX,mBAAmB,CAAC,CAAG,CAAA,CAAA,GACrDY,SAAS,EACf,CAACb,eAAe,EAAEC,mBAAmB,CAAC,CACvC,CAAA;AAED,EAAA,MAAMH,IAAI,GAAGD,uBAAuB,CAACQ,aAAa,CAAC,CAAA;AAEnD,EAAA,oBACES,GAAA,CAAA,KAAA,EAAA;AACEX,IAAAA,SAAS,EAAEY,UAAU,CAAC,WAAW,EAAEZ,SAAS,EAAE,CAAcL,WAAAA,EAAAA,IAAI,CAAE,CAAA,EAAE,CAAcW,WAAAA,EAAAA,IAAI,EAAE,EAAE;AACxF,MAAA,qBAAqB,EAAEL,QAAQ;AAC/B,MAAA,oBAAoB,EAAEY,OAAO,CAACN,uBAAuB,CAAC;MACtD,oBAAoB,EAAED,IAAI,KAAK,UAAA;AAChC,KAAA,CAAE;AAAAP,IAAAA,QAAA,eAEHY,GAAA,CAAA,KAAA,EAAA;AACEX,MAAAA,SAAS,EAAC,oBAAoB;AAC9Bc,MAAAA,KAAK,EAAE;QACLjB,eAAe,EAAEA,eAAe,IAAIU,uBAAAA;OACpC;AAAAR,MAAAA,QAAA,EAEDA,QAAAA;KACE,CAAA;AACP,GAAK,CAAC,CAAA;AAEV;;;;"}
+{"version":3,"file":"Avatar.mjs","sources":["../../src/avatar/Avatar.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport { useMemo } from 'react';\n\nimport { Theme } from '../common';\n\nimport { getAvatarColorFromSeed } from './colors';\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    <div\n      className={classnames('tw-avatar', className, `tw-avatar--${size}`, `tw-avatar--${type}`, {\n        'tw-avatar--outlined': outlined,\n        'tw-avatar--branded': Boolean(backgroundColorFromSeed),\n        'np-text-title-body': type === 'initials',\n      })}\n      aria-label={ariaLabel}\n    >\n      <div\n        className=\"tw-avatar__content\"\n        style={{\n          backgroundColor: backgroundColor || backgroundColorFromSeed,\n        }}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n\nexport default Avatar;\n"],"names":["backwardsCompatibleSize","size","Avatar","backgroundColor","backgroundColorSeed","children","className","outlined","sizeFromProps","theme","Theme","LIGHT","type","ariaLabel","backgroundColorFromSeed","useMemo","getAvatarColorFromSeed","undefined","_jsx","classnames","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,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;AAEnD,EAAA,oBACEU,GAAA,CAAA,KAAA,EAAA;AACEZ,IAAAA,SAAS,EAAEa,UAAU,CAAC,WAAW,EAAEb,SAAS,EAAE,CAAcL,WAAAA,EAAAA,IAAI,CAAE,CAAA,EAAE,CAAcW,WAAAA,EAAAA,IAAI,EAAE,EAAE;AACxF,MAAA,qBAAqB,EAAEL,QAAQ;AAC/B,MAAA,oBAAoB,EAAEa,OAAO,CAACN,uBAAuB,CAAC;MACtD,oBAAoB,EAAEF,IAAI,KAAK,UAAA;AAChC,KAAA,CAAE;AACH,IAAA,YAAA,EAAYC,SAAU;AAAAR,IAAAA,QAAA,eAEtBa,GAAA,CAAA,KAAA,EAAA;AACEZ,MAAAA,SAAS,EAAC,oBAAoB;AAC9Be,MAAAA,KAAK,EAAE;QACLlB,eAAe,EAAEA,eAAe,IAAIW,uBAAAA;OACpC;AAAAT,MAAAA,QAAA,EAEDA,QAAAA;KACE,CAAA;AACP,GAAK,CAAC,CAAA;AAEV;;;;"}

package/build/avatarWrapper/AvatarWrapper.js

@@ -15,10 +15,12 @@ const OptionalBadge = ({
   altText,
   statusIcon,
   children,
+  ariaLabel,
   ...rest
 }) => {
   if (url) {
     return /*#__PURE__*/jsxRuntime.jsx(Badge, {
+      "aria-label": ariaLabel,
       badge: /*#__PURE__*/jsxRuntime.jsx("img", {
         src: url,
         alt: altText
@@ -29,6 +31,7 @@ const OptionalBadge = ({
   }
   if (statusIcon) {
     return /*#__PURE__*/jsxRuntime.jsx(Badge, {
+      "aria-label": ariaLabel,
       badge: /*#__PURE__*/jsxRuntime.jsx(StatusIcon, {
         sentiment: statusIcon,
         size: size.Size.SMALL
@@ -43,6 +46,7 @@ const OptionalBadge = ({
 };
 const AvatarWrapper = ({
   url,
+  'aria-label': ariaLabel,
   profileType: profileType$1,
   profileId,
   badgeUrl,
@@ -57,6 +61,13 @@ const AvatarWrapper = ({
   // Reset the errored state when url changes
   React.useEffect(() => setImageLoadError(false), [url]);
   const getAvatarProps = () => {
+    let updatedAvatarProps = avatarProps;
+    if (!badgeUrl && !badgeStatusIcon && ariaLabel) {
+      updatedAvatarProps = {
+        ...updatedAvatarProps,
+        'aria-label': ariaLabel
+      };
+    }
     if (url && !hasImageLoadError) {
       return {
         type: avatarTypes.AvatarType.THUMBNAIL,
@@ -65,7 +76,7 @@ const AvatarWrapper = ({
           alt: "",
           onError: () => setImageLoadError(true)
         }),
-        ...avatarProps
+        ...updatedAvatarProps
       };
     }
     if (profileType$1) {
@@ -76,7 +87,7 @@ const AvatarWrapper = ({
         }) : /*#__PURE__*/jsxRuntime.jsx(icons.Person, {
           size: "24"
         }),
-        ...avatarProps
+        ...updatedAvatarProps
       };
     }
     if (name) {
@@ -86,7 +97,7 @@ const AvatarWrapper = ({
           children: getInitials(name)
         }),
         backgroundColorSeed: profileId?.toString(),
-        ...avatarProps
+        ...updatedAvatarProps
       };
     }
     return {
@@ -94,11 +105,12 @@ const AvatarWrapper = ({
       children: /*#__PURE__*/jsxRuntime.jsx(icons.Person, {
         size: "24"
       }),
-      ...avatarProps
+      ...updatedAvatarProps
     };
   };
   return /*#__PURE__*/jsxRuntime.jsx(OptionalBadge, {
     url: badgeUrl,
+    ariaLabel: ariaLabel,
     altText: badgeAltText,
     statusIcon: badgeStatusIcon,
     ...badgeProps,

package/build/avatarWrapper/AvatarWrapper.js.map

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

package/build/avatarWrapper/AvatarWrapper.mjs

@@ -13,10 +13,12 @@ const OptionalBadge = ({
   altText,
   statusIcon,
   children,
+  ariaLabel,
   ...rest
 }) => {
   if (url) {
     return /*#__PURE__*/jsx(Badge, {
+      "aria-label": ariaLabel,
       badge: /*#__PURE__*/jsx("img", {
         src: url,
         alt: altText
@@ -27,6 +29,7 @@ const OptionalBadge = ({
   }
   if (statusIcon) {
     return /*#__PURE__*/jsx(Badge, {
+      "aria-label": ariaLabel,
       badge: /*#__PURE__*/jsx(StatusIcon, {
         sentiment: statusIcon,
         size: Size.SMALL
@@ -41,6 +44,7 @@ const OptionalBadge = ({
 };
 const AvatarWrapper = ({
   url,
+  'aria-label': ariaLabel,
   profileType,
   profileId,
   badgeUrl,
@@ -55,6 +59,13 @@ const AvatarWrapper = ({
   // Reset the errored state when url changes
   useEffect(() => setImageLoadError(false), [url]);
   const getAvatarProps = () => {
+    let updatedAvatarProps = avatarProps;
+    if (!badgeUrl && !badgeStatusIcon && ariaLabel) {
+      updatedAvatarProps = {
+        ...updatedAvatarProps,
+        'aria-label': ariaLabel
+      };
+    }
     if (url && !hasImageLoadError) {
       return {
         type: AvatarType.THUMBNAIL,
@@ -63,7 +74,7 @@ const AvatarWrapper = ({
           alt: "",
           onError: () => setImageLoadError(true)
         }),
-        ...avatarProps
+        ...updatedAvatarProps
       };
     }
     if (profileType) {
@@ -74,7 +85,7 @@ const AvatarWrapper = ({
         }) : /*#__PURE__*/jsx(Person, {
           size: "24"
         }),
-        ...avatarProps
+        ...updatedAvatarProps
       };
     }
     if (name) {
@@ -84,7 +95,7 @@ const AvatarWrapper = ({
           children: getInitials(name)
         }),
         backgroundColorSeed: profileId?.toString(),
-        ...avatarProps
+        ...updatedAvatarProps
       };
     }
     return {
@@ -92,11 +103,12 @@ const AvatarWrapper = ({
       children: /*#__PURE__*/jsx(Person, {
         size: "24"
       }),
-      ...avatarProps
+      ...updatedAvatarProps
     };
   };
   return /*#__PURE__*/jsx(OptionalBadge, {
     url: badgeUrl,
+    ariaLabel: ariaLabel,
     altText: badgeAltText,
     statusIcon: badgeStatusIcon,
     ...badgeProps,

package/build/avatarWrapper/AvatarWrapper.mjs.map

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

package/build/badge/Badge.js

@@ -14,6 +14,7 @@ const Badge = ({
   className = undefined,
   size: size$1 = size.Size.SMALL,
   border = theme.Theme.LIGHT,
+  'aria-label': ariaLabel,
   children
 }) => {
   const classes = classNames__default.default('tw-badge', {
@@ -21,6 +22,7 @@ const Badge = ({
     [`tw-badge-${size$1}`]: size$1
   }, className);
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    "aria-label": ariaLabel,
     className: classes,
     children: [/*#__PURE__*/jsxRuntime.jsx("div", {
       className: "tw-badge__children",

package/build/badge/Badge.js.map

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

package/build/badge/Badge.mjs

@@ -8,6 +8,7 @@ const Badge = ({
   className = undefined,
   size = Size.SMALL,
   border = Theme.LIGHT,
+  'aria-label': ariaLabel,
   children
 }) => {
   const classes = classNames('tw-badge', {
@@ -15,6 +16,7 @@ const Badge = ({
     [`tw-badge-${size}`]: size
   }, className);
   return /*#__PURE__*/jsxs("div", {
+    "aria-label": ariaLabel,
     className: classes,
     children: [/*#__PURE__*/jsx("div", {
       className: "tw-badge__children",

package/build/badge/Badge.mjs.map

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

package/build/card/Card.js.map

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

package/build/card/Card.mjs.map

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

package/build/common/bottomSheet/BottomSheet.js

@@ -4,6 +4,7 @@ var classNames = require('classnames');
 var React = require('react');
 var Dimmer = require('../../dimmer/Dimmer.js');
 var Drawer = require('../../drawer/Drawer.js');
+var OverlayIdProvider = require('../../provider/overlay/OverlayIdProvider.js');
 var SlidingPanel = require('../../slidingPanel/SlidingPanel.js');
 var CloseButton = require('../closeButton/CloseButton.js');
 var documentIosClick = require('../domHelpers/documentIosClick.js');
@@ -145,6 +146,7 @@ const BottomSheet = props => {
     };
   }
   const is400Zoom = useMedia.useMedia(`(max-width: ${breakpoint.Breakpoint.ZOOM_400}px)`);
+  const overlayId = React.useContext(OverlayIdProvider.OverlayIdContext);
   return is400Zoom ? /*#__PURE__*/jsxRuntime.jsx(Drawer, {
     open: props.open,
     className: props.className,
@@ -161,6 +163,7 @@ const BottomSheet = props => {
       position: position.Position.BOTTOM,
       className: classNames__default.default('np-bottom-sheet', props.className),
       children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+        id: overlayId,
         role: "dialog",
         "aria-modal": true,
         onTouchStart: onSwipeStart,