@veeqo/ui 16.1.0 → 16.3.0

package/dist/components/Avatar/Avatar.cjs

@@ -20,12 +20,19 @@ const textVariantMapping = {
     xl: 'headingSmall',
     xxl: 'headingMedium',
 };
-const Avatar = ({ size = 'lg', name, bgColor, textColor, iconSlot, imageUrl, hasIndicator = false, ariaLabel = `Avatar of ${name}`, className, style, }) => {
+/**
+ * Avatar displays a user's initials, photo, or an icon inside a circular frame,
+ * with an optional error indicator.
+ *
+ * Initials are derived from `name`. Provide `imageUrl` to render a photo or
+ * `iconSlot` to render an icon instead — otherwise the initials are shown.
+ */
+const Avatar = ({ size = 'lg', name, bgColor, textColor, iconSlot, imageUrl, hasIndicator = false, ariaLabel = `Avatar of ${name}`, className, style, ...rest }) => {
     var _a, _b;
     const textVariant = textVariantMapping[size];
     // Check if name contains any letters if so we show initials from text.
     const hasLetters = /[a-zA-Z]/.test(name || '');
-    return (React__default.default.createElement(FlexRow.FlexRow, { justifyContent: "center", className: buildClassnames.buildClassnames([Avatar_module.avatar, Avatar_module[`${size}-size`], className]), style: {
+    return (React__default.default.createElement(FlexRow.FlexRow, { justifyContent: "center", ...rest, className: buildClassnames.buildClassnames([Avatar_module.avatar, Avatar_module[`${size}-size`], className]), style: {
             ...style,
             ...assignCssVars.assignCssVars({
                 avatarBgColor: iconSlot ? index.theme.colors.neutral.grey.lightest : bgColor,

package/dist/components/Avatar/Avatar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.cjs","sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import React from 'react';\nimport { CriticalFillIcon } from '../../icons';\nimport { assignCssVars, buildClassnames } from '../../utils';\nimport { theme } from '../../theme';\nimport styles from './Avatar.module.scss';\nimport { AvatarProps } from './types';\nimport { Text } from '../Text';\nimport { FlexRow } from '../Flex/FlexRow';\n\nconst textVariantMapping: Record<string, any> = {\n  md: 'bodySmallBold',\n  lg: 'bodySmallBold',\n  xl: 'headingSmall',\n  xxl: 'headingMedium',\n};\n\nexport const Avatar = ({\n  size = 'lg',\n  name,\n  bgColor,\n  textColor,\n  iconSlot,\n  imageUrl,\n  hasIndicator = false,\n  ariaLabel = `Avatar of ${name}`,\n  className,\n  style,\n}: AvatarProps) => {\n  const textVariant = textVariantMapping[size];\n\n  // Check if name contains any letters if so we show initials from text.\n  const hasLetters = /[a-zA-Z]/.test(name || '');\n\n  return (\n    <FlexRow\n      justifyContent=\"center\"\n      className={buildClassnames([styles.avatar, styles[`${size}-size`], className])}\n      style={\n        {\n          ...style,\n          ...assignCssVars({\n            avatarBgColor: iconSlot ? theme.colors.neutral.grey.lightest : bgColor,\n            avatarTextColor: textColor,\n          }),\n        } as React.CSSProperties\n      }\n      aria-label={ariaLabel}\n    >\n      {hasIndicator && (\n        <CriticalFillIcon\n          className={styles.indicatorIcon}\n          color={theme.colors.secondary.red.base}\n          fill={theme.colors.neutral.grey.lightest}\n          role=\"status\"\n          aria-live=\"polite\"\n          aria-label=\"Avatar has an error\"\n        />\n      )}\n      {imageUrl && <img src={imageUrl} alt={name} className={styles.avatarImage} />}\n      {!!iconSlot && iconSlot}\n      {!imageUrl && !iconSlot && (\n        <Text variant={textVariant} className={styles.avatarText}>\n          {!hasLetters ? name?.toUpperCase() : name?.toUpperCase()?.match(/\\b\\w/g)?.slice(0, 2)}\n        </Text>\n      )}\n    </FlexRow>\n  );\n};\n"],"names":["React","FlexRow","buildClassnames","styles","assignCssVars","theme","CriticalFillIcon","Text"],"mappings":";;;;;;;;;;;;;;;;AASA,MAAM,kBAAkB,GAAwB;AAC9C,IAAA,EAAE,EAAE,eAAe;AACnB,IAAA,EAAE,EAAE,eAAe;AACnB,IAAA,EAAE,EAAE,cAAc;AAClB,IAAA,GAAG,EAAE,eAAe;CACrB;AAEM,MAAM,MAAM,GAAG,CAAC,EACrB,IAAI,GAAG,IAAI,EACX,IAAI,EACJ,OAAO,EACP,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,YAAY,GAAG,KAAK,EACpB,SAAS,GAAG,CAAA,UAAA,EAAa,IAAI,CAAA,CAAE,EAC/B,SAAS,EACT,KAAK,GACO,KAAI;;AAChB,IAAA,MAAM,WAAW,GAAG,kBAAkB,CAAC,IAAI,CAAC;;IAG5C,MAAM,UAAU,GAAG,UAAU,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC;AAE9C,IAAA,QACEA,sBAAA,CAAA,aAAA,CAACC,eAAO,EAAA,EACN,cAAc,EAAC,QAAQ,EACvB,SAAS,EAAEC,+BAAe,CAAC,CAACC,aAAM,CAAC,MAAM,EAAEA,aAAM,CAAC,CAAA,EAAG,IAAI,CAAA,KAAA,CAAO,CAAC,EAAE,SAAS,CAAC,CAAC,EAC9E,KAAK,EACH;AACE,YAAA,GAAG,KAAK;AACR,YAAA,GAAGC,2BAAa,CAAC;AACf,gBAAA,aAAa,EAAE,QAAQ,GAAGC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,GAAG,OAAO;AACtE,gBAAA,eAAe,EAAE,SAAS;aAC3B,CAAC;AACoB,SAAA,EAAA,YAAA,EAEd,SAAS,EAAA;AAEpB,QAAA,YAAY,KACXL,sBAAA,CAAA,aAAA,CAACM,iCAAgB,EAAA,EACf,SAAS,EAAEH,aAAM,CAAC,aAAa,EAC/B,KAAK,EAAEE,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,EACtC,IAAI,EAAEA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,EACxC,IAAI,EAAC,QAAQ,EAAA,WAAA,EACH,QAAQ,EAAA,YAAA,EACP,qBAAqB,GAChC,CACH;AACA,QAAA,QAAQ,IAAIL,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,SAAS,EAAEG,aAAM,CAAC,WAAW,EAAA,CAAI;QAC5E,CAAC,CAAC,QAAQ,IAAI,QAAQ;AACtB,QAAA,CAAC,QAAQ,IAAI,CAAC,QAAQ,KACrBH,sBAAA,CAAA,aAAA,CAACO,SAAI,EAAA,EAAC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAEJ,aAAM,CAAC,UAAU,EAAA,EACrD,CAAC,UAAU,GAAG,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,MAAA,GAAA,MAAA,GAAJ,IAAI,CAAE,WAAW,EAAE,GAAG,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,MAAA,GAAA,MAAA,GAAJ,IAAI,CAAE,WAAW,EAAE,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,KAAK,CAAC,OAAO,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAChF,CACR,CACO;AAEd;;;;"}
+{"version":3,"file":"Avatar.cjs","sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import React from 'react';\nimport { CriticalFillIcon } from '../../icons';\nimport { assignCssVars, buildClassnames } from '../../utils';\nimport { theme } from '../../theme';\nimport styles from './Avatar.module.scss';\nimport { AvatarProps, AvatarSize } from './types';\nimport { Text, type TextVariant } from '../Text';\nimport { FlexRow } from '../Flex/FlexRow';\n\nconst textVariantMapping: Record<keyof typeof AvatarSize, TextVariant> = {\n  md: 'bodySmallBold',\n  lg: 'bodySmallBold',\n  xl: 'headingSmall',\n  xxl: 'headingMedium',\n};\n\n/**\n * Avatar displays a user's initials, photo, or an icon inside a circular frame,\n * with an optional error indicator.\n *\n * Initials are derived from `name`. Provide `imageUrl` to render a photo or\n * `iconSlot` to render an icon instead — otherwise the initials are shown.\n */\nexport const Avatar = ({\n  size = 'lg',\n  name,\n  bgColor,\n  textColor,\n  iconSlot,\n  imageUrl,\n  hasIndicator = false,\n  ariaLabel = `Avatar of ${name}`,\n  className,\n  style,\n  ...rest\n}: AvatarProps) => {\n  const textVariant = textVariantMapping[size];\n\n  // Check if name contains any letters if so we show initials from text.\n  const hasLetters = /[a-zA-Z]/.test(name || '');\n\n  return (\n    <FlexRow\n      justifyContent=\"center\"\n      {...rest}\n      className={buildClassnames([styles.avatar, styles[`${size}-size`], className])}\n      style={\n        {\n          ...style,\n          ...assignCssVars({\n            avatarBgColor: iconSlot ? theme.colors.neutral.grey.lightest : bgColor,\n            avatarTextColor: textColor,\n          }),\n        } as React.CSSProperties\n      }\n      aria-label={ariaLabel}\n    >\n      {hasIndicator && (\n        <CriticalFillIcon\n          className={styles.indicatorIcon}\n          color={theme.colors.secondary.red.base}\n          fill={theme.colors.neutral.grey.lightest}\n          role=\"status\"\n          aria-live=\"polite\"\n          aria-label=\"Avatar has an error\"\n        />\n      )}\n      {imageUrl && <img src={imageUrl} alt={name} className={styles.avatarImage} />}\n      {!!iconSlot && iconSlot}\n      {!imageUrl && !iconSlot && (\n        <Text variant={textVariant} className={styles.avatarText}>\n          {!hasLetters ? name?.toUpperCase() : name?.toUpperCase()?.match(/\\b\\w/g)?.slice(0, 2)}\n        </Text>\n      )}\n    </FlexRow>\n  );\n};\n"],"names":["React","FlexRow","buildClassnames","styles","assignCssVars","theme","CriticalFillIcon","Text"],"mappings":";;;;;;;;;;;;;;;;AASA,MAAM,kBAAkB,GAAiD;AACvE,IAAA,EAAE,EAAE,eAAe;AACnB,IAAA,EAAE,EAAE,eAAe;AACnB,IAAA,EAAE,EAAE,cAAc;AAClB,IAAA,GAAG,EAAE,eAAe;CACrB;AAED;;;;;;AAMG;AACI,MAAM,MAAM,GAAG,CAAC,EACrB,IAAI,GAAG,IAAI,EACX,IAAI,EACJ,OAAO,EACP,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,YAAY,GAAG,KAAK,EACpB,SAAS,GAAG,aAAa,IAAI,CAAA,CAAE,EAC/B,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACK,KAAI;;AAChB,IAAA,MAAM,WAAW,GAAG,kBAAkB,CAAC,IAAI,CAAC;;IAG5C,MAAM,UAAU,GAAG,UAAU,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC;AAE9C,IAAA,QACEA,sBAAA,CAAA,aAAA,CAACC,eAAO,EAAA,EACN,cAAc,EAAC,QAAQ,EAAA,GACnB,IAAI,EACR,SAAS,EAAEC,+BAAe,CAAC,CAACC,aAAM,CAAC,MAAM,EAAEA,aAAM,CAAC,GAAG,IAAI,CAAA,KAAA,CAAO,CAAC,EAAE,SAAS,CAAC,CAAC,EAC9E,KAAK,EACH;AACE,YAAA,GAAG,KAAK;AACR,YAAA,GAAGC,2BAAa,CAAC;AACf,gBAAA,aAAa,EAAE,QAAQ,GAAGC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,GAAG,OAAO;AACtE,gBAAA,eAAe,EAAE,SAAS;aAC3B,CAAC;AACoB,SAAA,EAAA,YAAA,EAEd,SAAS,EAAA;AAEpB,QAAA,YAAY,KACXL,sBAAA,CAAA,aAAA,CAACM,iCAAgB,EAAA,EACf,SAAS,EAAEH,aAAM,CAAC,aAAa,EAC/B,KAAK,EAAEE,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,EACtC,IAAI,EAAEA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,EACxC,IAAI,EAAC,QAAQ,EAAA,WAAA,EACH,QAAQ,EAAA,YAAA,EACP,qBAAqB,GAChC,CACH;AACA,QAAA,QAAQ,IAAIL,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,SAAS,EAAEG,aAAM,CAAC,WAAW,EAAA,CAAI;QAC5E,CAAC,CAAC,QAAQ,IAAI,QAAQ;AACtB,QAAA,CAAC,QAAQ,IAAI,CAAC,QAAQ,KACrBH,sBAAA,CAAA,aAAA,CAACO,SAAI,EAAA,EAAC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAEJ,aAAM,CAAC,UAAU,EAAA,EACrD,CAAC,UAAU,GAAG,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,MAAA,GAAA,MAAA,GAAJ,IAAI,CAAE,WAAW,EAAE,GAAG,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,MAAA,GAAA,MAAA,GAAJ,IAAI,CAAE,WAAW,EAAE,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,KAAK,CAAC,OAAO,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAChF,CACR,CACO;AAEd;;;;"}

package/dist/components/Avatar/Avatar.d.ts

@@ -1,3 +1,10 @@
 import React from 'react';
 import { AvatarProps } from './types';
-export declare const Avatar: ({ size, name, bgColor, textColor, iconSlot, imageUrl, hasIndicator, ariaLabel, className, style, }: AvatarProps) => React.JSX.Element;
+/**
+ * Avatar displays a user's initials, photo, or an icon inside a circular frame,
+ * with an optional error indicator.
+ *
+ * Initials are derived from `name`. Provide `imageUrl` to render a photo or
+ * `iconSlot` to render an icon instead — otherwise the initials are shown.
+ */
+export declare const Avatar: ({ size, name, bgColor, textColor, iconSlot, imageUrl, hasIndicator, ariaLabel, className, style, ...rest }: AvatarProps) => React.JSX.Element;

package/dist/components/Avatar/Avatar.js

@@ -14,12 +14,19 @@ const textVariantMapping = {
     xl: 'headingSmall',
     xxl: 'headingMedium',
 };
-const Avatar = ({ size = 'lg', name, bgColor, textColor, iconSlot, imageUrl, hasIndicator = false, ariaLabel = `Avatar of ${name}`, className, style, }) => {
+/**
+ * Avatar displays a user's initials, photo, or an icon inside a circular frame,
+ * with an optional error indicator.
+ *
+ * Initials are derived from `name`. Provide `imageUrl` to render a photo or
+ * `iconSlot` to render an icon instead — otherwise the initials are shown.
+ */
+const Avatar = ({ size = 'lg', name, bgColor, textColor, iconSlot, imageUrl, hasIndicator = false, ariaLabel = `Avatar of ${name}`, className, style, ...rest }) => {
     var _a, _b;
     const textVariant = textVariantMapping[size];
     // Check if name contains any letters if so we show initials from text.
     const hasLetters = /[a-zA-Z]/.test(name || '');
-    return (React__default.createElement(FlexRow, { justifyContent: "center", className: buildClassnames([styles.avatar, styles[`${size}-size`], className]), style: {
+    return (React__default.createElement(FlexRow, { justifyContent: "center", ...rest, className: buildClassnames([styles.avatar, styles[`${size}-size`], className]), style: {
             ...style,
             ...assignCssVars({
                 avatarBgColor: iconSlot ? theme.colors.neutral.grey.lightest : bgColor,

package/dist/components/Avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import React from 'react';\nimport { CriticalFillIcon } from '../../icons';\nimport { assignCssVars, buildClassnames } from '../../utils';\nimport { theme } from '../../theme';\nimport styles from './Avatar.module.scss';\nimport { AvatarProps } from './types';\nimport { Text } from '../Text';\nimport { FlexRow } from '../Flex/FlexRow';\n\nconst textVariantMapping: Record<string, any> = {\n  md: 'bodySmallBold',\n  lg: 'bodySmallBold',\n  xl: 'headingSmall',\n  xxl: 'headingMedium',\n};\n\nexport const Avatar = ({\n  size = 'lg',\n  name,\n  bgColor,\n  textColor,\n  iconSlot,\n  imageUrl,\n  hasIndicator = false,\n  ariaLabel = `Avatar of ${name}`,\n  className,\n  style,\n}: AvatarProps) => {\n  const textVariant = textVariantMapping[size];\n\n  // Check if name contains any letters if so we show initials from text.\n  const hasLetters = /[a-zA-Z]/.test(name || '');\n\n  return (\n    <FlexRow\n      justifyContent=\"center\"\n      className={buildClassnames([styles.avatar, styles[`${size}-size`], className])}\n      style={\n        {\n          ...style,\n          ...assignCssVars({\n            avatarBgColor: iconSlot ? theme.colors.neutral.grey.lightest : bgColor,\n            avatarTextColor: textColor,\n          }),\n        } as React.CSSProperties\n      }\n      aria-label={ariaLabel}\n    >\n      {hasIndicator && (\n        <CriticalFillIcon\n          className={styles.indicatorIcon}\n          color={theme.colors.secondary.red.base}\n          fill={theme.colors.neutral.grey.lightest}\n          role=\"status\"\n          aria-live=\"polite\"\n          aria-label=\"Avatar has an error\"\n        />\n      )}\n      {imageUrl && <img src={imageUrl} alt={name} className={styles.avatarImage} />}\n      {!!iconSlot && iconSlot}\n      {!imageUrl && !iconSlot && (\n        <Text variant={textVariant} className={styles.avatarText}>\n          {!hasLetters ? name?.toUpperCase() : name?.toUpperCase()?.match(/\\b\\w/g)?.slice(0, 2)}\n        </Text>\n      )}\n    </FlexRow>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;AASA,MAAM,kBAAkB,GAAwB;AAC9C,IAAA,EAAE,EAAE,eAAe;AACnB,IAAA,EAAE,EAAE,eAAe;AACnB,IAAA,EAAE,EAAE,cAAc;AAClB,IAAA,GAAG,EAAE,eAAe;CACrB;AAEM,MAAM,MAAM,GAAG,CAAC,EACrB,IAAI,GAAG,IAAI,EACX,IAAI,EACJ,OAAO,EACP,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,YAAY,GAAG,KAAK,EACpB,SAAS,GAAG,CAAA,UAAA,EAAa,IAAI,CAAA,CAAE,EAC/B,SAAS,EACT,KAAK,GACO,KAAI;;AAChB,IAAA,MAAM,WAAW,GAAG,kBAAkB,CAAC,IAAI,CAAC;;IAG5C,MAAM,UAAU,GAAG,UAAU,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC;AAE9C,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EACN,cAAc,EAAC,QAAQ,EACvB,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA,EAAG,IAAI,CAAA,KAAA,CAAO,CAAC,EAAE,SAAS,CAAC,CAAC,EAC9E,KAAK,EACH;AACE,YAAA,GAAG,KAAK;AACR,YAAA,GAAG,aAAa,CAAC;AACf,gBAAA,aAAa,EAAE,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,GAAG,OAAO;AACtE,gBAAA,eAAe,EAAE,SAAS;aAC3B,CAAC;AACoB,SAAA,EAAA,YAAA,EAEd,SAAS,EAAA;AAEpB,QAAA,YAAY,KACXA,cAAA,CAAA,aAAA,CAAC,gBAAgB,EAAA,EACf,SAAS,EAAE,MAAM,CAAC,aAAa,EAC/B,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,EACtC,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,EACxC,IAAI,EAAC,QAAQ,EAAA,WAAA,EACH,QAAQ,EAAA,YAAA,EACP,qBAAqB,GAChC,CACH;AACA,QAAA,QAAQ,IAAIA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,CAAC,WAAW,EAAA,CAAI;QAC5E,CAAC,CAAC,QAAQ,IAAI,QAAQ;AACtB,QAAA,CAAC,QAAQ,IAAI,CAAC,QAAQ,KACrBA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,CAAC,UAAU,EAAA,EACrD,CAAC,UAAU,GAAG,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,MAAA,GAAA,MAAA,GAAJ,IAAI,CAAE,WAAW,EAAE,GAAG,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,MAAA,GAAA,MAAA,GAAJ,IAAI,CAAE,WAAW,EAAE,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,KAAK,CAAC,OAAO,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAChF,CACR,CACO;AAEd;;;;"}
+{"version":3,"file":"Avatar.js","sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import React from 'react';\nimport { CriticalFillIcon } from '../../icons';\nimport { assignCssVars, buildClassnames } from '../../utils';\nimport { theme } from '../../theme';\nimport styles from './Avatar.module.scss';\nimport { AvatarProps, AvatarSize } from './types';\nimport { Text, type TextVariant } from '../Text';\nimport { FlexRow } from '../Flex/FlexRow';\n\nconst textVariantMapping: Record<keyof typeof AvatarSize, TextVariant> = {\n  md: 'bodySmallBold',\n  lg: 'bodySmallBold',\n  xl: 'headingSmall',\n  xxl: 'headingMedium',\n};\n\n/**\n * Avatar displays a user's initials, photo, or an icon inside a circular frame,\n * with an optional error indicator.\n *\n * Initials are derived from `name`. Provide `imageUrl` to render a photo or\n * `iconSlot` to render an icon instead — otherwise the initials are shown.\n */\nexport const Avatar = ({\n  size = 'lg',\n  name,\n  bgColor,\n  textColor,\n  iconSlot,\n  imageUrl,\n  hasIndicator = false,\n  ariaLabel = `Avatar of ${name}`,\n  className,\n  style,\n  ...rest\n}: AvatarProps) => {\n  const textVariant = textVariantMapping[size];\n\n  // Check if name contains any letters if so we show initials from text.\n  const hasLetters = /[a-zA-Z]/.test(name || '');\n\n  return (\n    <FlexRow\n      justifyContent=\"center\"\n      {...rest}\n      className={buildClassnames([styles.avatar, styles[`${size}-size`], className])}\n      style={\n        {\n          ...style,\n          ...assignCssVars({\n            avatarBgColor: iconSlot ? theme.colors.neutral.grey.lightest : bgColor,\n            avatarTextColor: textColor,\n          }),\n        } as React.CSSProperties\n      }\n      aria-label={ariaLabel}\n    >\n      {hasIndicator && (\n        <CriticalFillIcon\n          className={styles.indicatorIcon}\n          color={theme.colors.secondary.red.base}\n          fill={theme.colors.neutral.grey.lightest}\n          role=\"status\"\n          aria-live=\"polite\"\n          aria-label=\"Avatar has an error\"\n        />\n      )}\n      {imageUrl && <img src={imageUrl} alt={name} className={styles.avatarImage} />}\n      {!!iconSlot && iconSlot}\n      {!imageUrl && !iconSlot && (\n        <Text variant={textVariant} className={styles.avatarText}>\n          {!hasLetters ? name?.toUpperCase() : name?.toUpperCase()?.match(/\\b\\w/g)?.slice(0, 2)}\n        </Text>\n      )}\n    </FlexRow>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;AASA,MAAM,kBAAkB,GAAiD;AACvE,IAAA,EAAE,EAAE,eAAe;AACnB,IAAA,EAAE,EAAE,eAAe;AACnB,IAAA,EAAE,EAAE,cAAc;AAClB,IAAA,GAAG,EAAE,eAAe;CACrB;AAED;;;;;;AAMG;AACI,MAAM,MAAM,GAAG,CAAC,EACrB,IAAI,GAAG,IAAI,EACX,IAAI,EACJ,OAAO,EACP,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,YAAY,GAAG,KAAK,EACpB,SAAS,GAAG,aAAa,IAAI,CAAA,CAAE,EAC/B,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACK,KAAI;;AAChB,IAAA,MAAM,WAAW,GAAG,kBAAkB,CAAC,IAAI,CAAC;;IAG5C,MAAM,UAAU,GAAG,UAAU,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC;AAE9C,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EACN,cAAc,EAAC,QAAQ,EAAA,GACnB,IAAI,EACR,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,CAAA,KAAA,CAAO,CAAC,EAAE,SAAS,CAAC,CAAC,EAC9E,KAAK,EACH;AACE,YAAA,GAAG,KAAK;AACR,YAAA,GAAG,aAAa,CAAC;AACf,gBAAA,aAAa,EAAE,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,GAAG,OAAO;AACtE,gBAAA,eAAe,EAAE,SAAS;aAC3B,CAAC;AACoB,SAAA,EAAA,YAAA,EAEd,SAAS,EAAA;AAEpB,QAAA,YAAY,KACXA,cAAA,CAAA,aAAA,CAAC,gBAAgB,EAAA,EACf,SAAS,EAAE,MAAM,CAAC,aAAa,EAC/B,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,EACtC,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,EACxC,IAAI,EAAC,QAAQ,EAAA,WAAA,EACH,QAAQ,EAAA,YAAA,EACP,qBAAqB,GAChC,CACH;AACA,QAAA,QAAQ,IAAIA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,CAAC,WAAW,EAAA,CAAI;QAC5E,CAAC,CAAC,QAAQ,IAAI,QAAQ;AACtB,QAAA,CAAC,QAAQ,IAAI,CAAC,QAAQ,KACrBA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,CAAC,UAAU,EAAA,EACrD,CAAC,UAAU,GAAG,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,MAAA,GAAA,MAAA,GAAJ,IAAI,CAAE,WAAW,EAAE,GAAG,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,MAAA,GAAA,MAAA,GAAJ,IAAI,CAAE,WAAW,EAAE,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,KAAK,CAAC,OAAO,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAChF,CACR,CACO;AAEd;;;;"}

package/dist/components/Avatar/Avatar.module.scss.cjs

@@ -2,8 +2,8 @@
 
 var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
 
-___$insertStyle("._avatar_1oval_1 {\n  border: var(--sizes-line) solid var(--colors-neutral-grey-base);\n  border-radius: var(--radius-full);\n  background-size: cover;\n  background-color: var(--avatar-bg-color, var(--colors-secondary-blue-base));\n  position: relative;\n  width: var(--avatar-size, var(--sizes-lg));\n  height: var(--avatar-size, var(--sizes-lg));\n}\n\n._avatarImage_1oval_11 {\n  width: 100%;\n  height: 100%;\n  border-radius: var(--radius-full);\n  object-fit: cover;\n}\n\n._avatarText_1oval_18 {\n  color: var(--avatar-text-color, #fff) !important;\n}\n\n._indicatorIcon_1oval_22 {\n  position: absolute;\n  /* Calculate offset as roughly 30% of icon size, with fallback */\n  top: calc(-0.3 * var(--indicator-icon-size, 16px));\n  right: calc(-0.3 * var(--indicator-icon-size, 16px));\n  width: var(--indicator-icon-size, var(--sizes-lg));\n  height: var(--indicator-icon-size, var(--sizes-lg));\n}\n\n._md-size_1oval_31 {\n  --avatar-size: var(--sizes-md);\n  --indicator-icon-size: var(--sizes-3);\n}\n\n._lg-size_1oval_36 {\n  --avatar-size: var(--sizes-lg);\n  --indicator-icon-size: var(--sizes-base);\n}\n\n._xl-size_1oval_41 {\n  --avatar-size: var(--sizes-xl);\n  --indicator-icon-size: var(--sizes-7);\n}\n\n._xxl-size_1oval_46 {\n  --avatar-size: var(--sizes-xxl);\n  --indicator-icon-size: var(--sizes-lg);\n}");
-var styles = {"avatar":"_avatar_1oval_1","avatarImage":"_avatarImage_1oval_11","avatarText":"_avatarText_1oval_18","indicatorIcon":"_indicatorIcon_1oval_22","md-size":"_md-size_1oval_31","lg-size":"_lg-size_1oval_36","xl-size":"_xl-size_1oval_41","xxl-size":"_xxl-size_1oval_46"};
+___$insertStyle("._avatar_1yl95_1 {\n  border: var(--sizes-line) solid var(--colors-neutral-grey-base);\n  border-radius: var(--radius-full);\n  background-size: cover;\n  background-color: var(--avatar-bg-color, var(--colors-secondary-blue-base));\n  position: relative;\n  width: var(--avatar-size, var(--sizes-lg));\n  height: var(--avatar-size, var(--sizes-lg));\n}\n\n._avatarImage_1yl95_11 {\n  width: 100%;\n  height: 100%;\n  border-radius: var(--radius-full);\n  object-fit: cover;\n}\n\n._avatarText_1yl95_18 {\n  color: var(--avatar-text-color, var(--colors-neutral-white)) !important;\n}\n\n._indicatorIcon_1yl95_22 {\n  position: absolute;\n  /* Calculate offset as roughly 30% of icon size, with fallback */\n  top: calc(-0.3 * var(--indicator-icon-size, 16px));\n  right: calc(-0.3 * var(--indicator-icon-size, 16px));\n  width: var(--indicator-icon-size, var(--sizes-lg));\n  height: var(--indicator-icon-size, var(--sizes-lg));\n}\n\n._md-size_1yl95_31 {\n  --avatar-size: var(--sizes-md);\n  --indicator-icon-size: var(--sizes-3);\n}\n\n._lg-size_1yl95_36 {\n  --avatar-size: var(--sizes-lg);\n  --indicator-icon-size: var(--sizes-base);\n}\n\n._xl-size_1yl95_41 {\n  --avatar-size: var(--sizes-xl);\n  --indicator-icon-size: var(--sizes-7);\n}\n\n._xxl-size_1yl95_46 {\n  --avatar-size: var(--sizes-xxl);\n  --indicator-icon-size: var(--sizes-lg);\n}");
+var styles = {"avatar":"_avatar_1yl95_1","avatarImage":"_avatarImage_1yl95_11","avatarText":"_avatarText_1yl95_18","indicatorIcon":"_indicatorIcon_1yl95_22","md-size":"_md-size_1yl95_31","lg-size":"_lg-size_1yl95_36","xl-size":"_xl-size_1yl95_41","xxl-size":"_xxl-size_1yl95_46"};
 
 module.exports = styles;
 //# sourceMappingURL=Avatar.module.scss.cjs.map

package/dist/components/Avatar/Avatar.module.scss.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.module.scss.cjs","sources":["../../../src/components/Avatar/Avatar.module.scss"],"sourcesContent":[".avatar {\n  border: var(--sizes-line) solid var(--colors-neutral-grey-base);\n  border-radius: var(--radius-full);\n  background-size: cover;\n  background-color: var(--avatar-bg-color, var(--colors-secondary-blue-base));\n  position: relative;\n  width: var(--avatar-size, var(--sizes-lg));\n  height: var(--avatar-size, var(--sizes-lg));\n}\n\n.avatarImage {\n  width: 100%;\n  height: 100%;\n  border-radius: var(--radius-full);\n  object-fit: cover;\n}\n\n.avatarText {\n  color: var(--avatar-text-color, #fff) !important;\n}\n\n.indicatorIcon {\n  position: absolute;\n  /* Calculate offset as roughly 30% of icon size, with fallback */\n  top: calc(-0.3 * var(--indicator-icon-size, 16px));\n  right: calc(-0.3 * var(--indicator-icon-size, 16px));\n  width: var(--indicator-icon-size, var(--sizes-lg));\n  height: var(--indicator-icon-size, var(--sizes-lg));\n}\n\n.md-size {\n  --avatar-size: var(--sizes-md);\n  --indicator-icon-size: var(--sizes-3);\n}\n\n.lg-size {\n  --avatar-size: var(--sizes-lg);\n  --indicator-icon-size: var(--sizes-base);\n}\n\n.xl-size {\n  --avatar-size: var(--sizes-xl);\n  --indicator-icon-size: var(--sizes-7);\n}\n\n.xxl-size {\n  --avatar-size: var(--sizes-xxl);\n  --indicator-icon-size: var(--sizes-lg);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,mzCAAA;AACA,aAAA,CAAA,QAAA,CAAA,iBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,UAAA,CAAA,oBAAA;;;;"}
+{"version":3,"file":"Avatar.module.scss.cjs","sources":["../../../src/components/Avatar/Avatar.module.scss"],"sourcesContent":[".avatar {\n  border: var(--sizes-line) solid var(--colors-neutral-grey-base);\n  border-radius: var(--radius-full);\n  background-size: cover;\n  background-color: var(--avatar-bg-color, var(--colors-secondary-blue-base));\n  position: relative;\n  width: var(--avatar-size, var(--sizes-lg));\n  height: var(--avatar-size, var(--sizes-lg));\n}\n\n.avatarImage {\n  width: 100%;\n  height: 100%;\n  border-radius: var(--radius-full);\n  object-fit: cover;\n}\n\n.avatarText {\n  color: var(--avatar-text-color, var(--colors-neutral-white)) !important;\n}\n\n.indicatorIcon {\n  position: absolute;\n  /* Calculate offset as roughly 30% of icon size, with fallback */\n  top: calc(-0.3 * var(--indicator-icon-size, 16px));\n  right: calc(-0.3 * var(--indicator-icon-size, 16px));\n  width: var(--indicator-icon-size, var(--sizes-lg));\n  height: var(--indicator-icon-size, var(--sizes-lg));\n}\n\n.md-size {\n  --avatar-size: var(--sizes-md);\n  --indicator-icon-size: var(--sizes-3);\n}\n\n.lg-size {\n  --avatar-size: var(--sizes-lg);\n  --indicator-icon-size: var(--sizes-base);\n}\n\n.xl-size {\n  --avatar-size: var(--sizes-xl);\n  --indicator-icon-size: var(--sizes-7);\n}\n\n.xxl-size {\n  --avatar-size: var(--sizes-xxl);\n  --indicator-icon-size: var(--sizes-lg);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,00CAAA;AACA,aAAA,CAAA,QAAA,CAAA,iBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,UAAA,CAAA,oBAAA;;;;"}

package/dist/components/Avatar/Avatar.module.scss.js

@@ -1,7 +1,7 @@
 import insertStyle from '../../_virtual/____insertStyle.js';
 
-insertStyle("._avatar_1oval_1 {\n  border: var(--sizes-line) solid var(--colors-neutral-grey-base);\n  border-radius: var(--radius-full);\n  background-size: cover;\n  background-color: var(--avatar-bg-color, var(--colors-secondary-blue-base));\n  position: relative;\n  width: var(--avatar-size, var(--sizes-lg));\n  height: var(--avatar-size, var(--sizes-lg));\n}\n\n._avatarImage_1oval_11 {\n  width: 100%;\n  height: 100%;\n  border-radius: var(--radius-full);\n  object-fit: cover;\n}\n\n._avatarText_1oval_18 {\n  color: var(--avatar-text-color, #fff) !important;\n}\n\n._indicatorIcon_1oval_22 {\n  position: absolute;\n  /* Calculate offset as roughly 30% of icon size, with fallback */\n  top: calc(-0.3 * var(--indicator-icon-size, 16px));\n  right: calc(-0.3 * var(--indicator-icon-size, 16px));\n  width: var(--indicator-icon-size, var(--sizes-lg));\n  height: var(--indicator-icon-size, var(--sizes-lg));\n}\n\n._md-size_1oval_31 {\n  --avatar-size: var(--sizes-md);\n  --indicator-icon-size: var(--sizes-3);\n}\n\n._lg-size_1oval_36 {\n  --avatar-size: var(--sizes-lg);\n  --indicator-icon-size: var(--sizes-base);\n}\n\n._xl-size_1oval_41 {\n  --avatar-size: var(--sizes-xl);\n  --indicator-icon-size: var(--sizes-7);\n}\n\n._xxl-size_1oval_46 {\n  --avatar-size: var(--sizes-xxl);\n  --indicator-icon-size: var(--sizes-lg);\n}");
-var styles = {"avatar":"_avatar_1oval_1","avatarImage":"_avatarImage_1oval_11","avatarText":"_avatarText_1oval_18","indicatorIcon":"_indicatorIcon_1oval_22","md-size":"_md-size_1oval_31","lg-size":"_lg-size_1oval_36","xl-size":"_xl-size_1oval_41","xxl-size":"_xxl-size_1oval_46"};
+insertStyle("._avatar_1yl95_1 {\n  border: var(--sizes-line) solid var(--colors-neutral-grey-base);\n  border-radius: var(--radius-full);\n  background-size: cover;\n  background-color: var(--avatar-bg-color, var(--colors-secondary-blue-base));\n  position: relative;\n  width: var(--avatar-size, var(--sizes-lg));\n  height: var(--avatar-size, var(--sizes-lg));\n}\n\n._avatarImage_1yl95_11 {\n  width: 100%;\n  height: 100%;\n  border-radius: var(--radius-full);\n  object-fit: cover;\n}\n\n._avatarText_1yl95_18 {\n  color: var(--avatar-text-color, var(--colors-neutral-white)) !important;\n}\n\n._indicatorIcon_1yl95_22 {\n  position: absolute;\n  /* Calculate offset as roughly 30% of icon size, with fallback */\n  top: calc(-0.3 * var(--indicator-icon-size, 16px));\n  right: calc(-0.3 * var(--indicator-icon-size, 16px));\n  width: var(--indicator-icon-size, var(--sizes-lg));\n  height: var(--indicator-icon-size, var(--sizes-lg));\n}\n\n._md-size_1yl95_31 {\n  --avatar-size: var(--sizes-md);\n  --indicator-icon-size: var(--sizes-3);\n}\n\n._lg-size_1yl95_36 {\n  --avatar-size: var(--sizes-lg);\n  --indicator-icon-size: var(--sizes-base);\n}\n\n._xl-size_1yl95_41 {\n  --avatar-size: var(--sizes-xl);\n  --indicator-icon-size: var(--sizes-7);\n}\n\n._xxl-size_1yl95_46 {\n  --avatar-size: var(--sizes-xxl);\n  --indicator-icon-size: var(--sizes-lg);\n}");
+var styles = {"avatar":"_avatar_1yl95_1","avatarImage":"_avatarImage_1yl95_11","avatarText":"_avatarText_1yl95_18","indicatorIcon":"_indicatorIcon_1yl95_22","md-size":"_md-size_1yl95_31","lg-size":"_lg-size_1yl95_36","xl-size":"_xl-size_1yl95_41","xxl-size":"_xxl-size_1yl95_46"};
 
 export { styles as default };
 //# sourceMappingURL=Avatar.module.scss.js.map

package/dist/components/Avatar/Avatar.module.scss.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.module.scss.js","sources":["../../../src/components/Avatar/Avatar.module.scss"],"sourcesContent":[".avatar {\n  border: var(--sizes-line) solid var(--colors-neutral-grey-base);\n  border-radius: var(--radius-full);\n  background-size: cover;\n  background-color: var(--avatar-bg-color, var(--colors-secondary-blue-base));\n  position: relative;\n  width: var(--avatar-size, var(--sizes-lg));\n  height: var(--avatar-size, var(--sizes-lg));\n}\n\n.avatarImage {\n  width: 100%;\n  height: 100%;\n  border-radius: var(--radius-full);\n  object-fit: cover;\n}\n\n.avatarText {\n  color: var(--avatar-text-color, #fff) !important;\n}\n\n.indicatorIcon {\n  position: absolute;\n  /* Calculate offset as roughly 30% of icon size, with fallback */\n  top: calc(-0.3 * var(--indicator-icon-size, 16px));\n  right: calc(-0.3 * var(--indicator-icon-size, 16px));\n  width: var(--indicator-icon-size, var(--sizes-lg));\n  height: var(--indicator-icon-size, var(--sizes-lg));\n}\n\n.md-size {\n  --avatar-size: var(--sizes-md);\n  --indicator-icon-size: var(--sizes-3);\n}\n\n.lg-size {\n  --avatar-size: var(--sizes-lg);\n  --indicator-icon-size: var(--sizes-base);\n}\n\n.xl-size {\n  --avatar-size: var(--sizes-xl);\n  --indicator-icon-size: var(--sizes-7);\n}\n\n.xxl-size {\n  --avatar-size: var(--sizes-xxl);\n  --indicator-icon-size: var(--sizes-lg);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,mzCAAA;AACA,aAAA,CAAA,QAAA,CAAA,iBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,UAAA,CAAA,oBAAA;;;;"}
+{"version":3,"file":"Avatar.module.scss.js","sources":["../../../src/components/Avatar/Avatar.module.scss"],"sourcesContent":[".avatar {\n  border: var(--sizes-line) solid var(--colors-neutral-grey-base);\n  border-radius: var(--radius-full);\n  background-size: cover;\n  background-color: var(--avatar-bg-color, var(--colors-secondary-blue-base));\n  position: relative;\n  width: var(--avatar-size, var(--sizes-lg));\n  height: var(--avatar-size, var(--sizes-lg));\n}\n\n.avatarImage {\n  width: 100%;\n  height: 100%;\n  border-radius: var(--radius-full);\n  object-fit: cover;\n}\n\n.avatarText {\n  color: var(--avatar-text-color, var(--colors-neutral-white)) !important;\n}\n\n.indicatorIcon {\n  position: absolute;\n  /* Calculate offset as roughly 30% of icon size, with fallback */\n  top: calc(-0.3 * var(--indicator-icon-size, 16px));\n  right: calc(-0.3 * var(--indicator-icon-size, 16px));\n  width: var(--indicator-icon-size, var(--sizes-lg));\n  height: var(--indicator-icon-size, var(--sizes-lg));\n}\n\n.md-size {\n  --avatar-size: var(--sizes-md);\n  --indicator-icon-size: var(--sizes-3);\n}\n\n.lg-size {\n  --avatar-size: var(--sizes-lg);\n  --indicator-icon-size: var(--sizes-base);\n}\n\n.xl-size {\n  --avatar-size: var(--sizes-xl);\n  --indicator-icon-size: var(--sizes-7);\n}\n\n.xxl-size {\n  --avatar-size: var(--sizes-xxl);\n  --indicator-icon-size: var(--sizes-lg);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,00CAAA;AACA,aAAA,CAAA,QAAA,CAAA,iBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,UAAA,CAAA,oBAAA;;;;"}

package/dist/components/Avatar/index.d.ts

@@ -1 +1,3 @@
 export { Avatar } from './Avatar';
+export type { AvatarProps } from './types';
+export { AvatarSize } from './types';

package/dist/components/Avatar/types.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+exports.AvatarSize = void 0;
+(function (AvatarSize) {
+    AvatarSize["md"] = "md";
+    AvatarSize["lg"] = "lg";
+    AvatarSize["xl"] = "xl";
+    AvatarSize["xxl"] = "xxl";
+})(exports.AvatarSize || (exports.AvatarSize = {}));
+//# sourceMappingURL=types.cjs.map

package/dist/components/Avatar/types.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.cjs","sources":["../../../src/components/Avatar/types.ts"],"sourcesContent":["export enum AvatarSize {\n  md = 'md',\n  lg = 'lg',\n  xl = 'xl',\n  xxl = 'xxl',\n}\n\nexport type AvatarProps = React.HTMLAttributes<HTMLDivElement> & {\n  /** Full name used to derive initials and the default accessible label. */\n  name: string;\n  /** Overall dimension of the avatar. @default 'lg' */\n  size?: keyof typeof AvatarSize;\n  /** Background colour of the circle. Ignored when `iconSlot` is set. */\n  bgColor?: string;\n  /** Colour of the initials text. */\n  textColor?: string;\n  /** Icon rendered in place of initials (e.g. a channel or brand mark). */\n  iconSlot?: React.ReactNode;\n  /** Image URL rendered in place of initials. */\n  imageUrl?: string;\n  /** Accessible label for the avatar. @default `Avatar of ${name}` */\n  ariaLabel?: string;\n  /** Shows a red error indicator on the avatar. @default false */\n  hasIndicator?: boolean;\n};\n"],"names":["AvatarSize"],"mappings":";;AAAYA;AAAZ,CAAA,UAAY,UAAU,EAAA;AACpB,IAAA,UAAA,CAAA,IAAA,CAAA,GAAA,IAAS;AACT,IAAA,UAAA,CAAA,IAAA,CAAA,GAAA,IAAS;AACT,IAAA,UAAA,CAAA,IAAA,CAAA,GAAA,IAAS;AACT,IAAA,UAAA,CAAA,KAAA,CAAA,GAAA,KAAW;AACb,CAAC,EALWA,kBAAU,KAAVA,kBAAU,GAAA,EAAA,CAAA,CAAA;;"}

package/dist/components/Avatar/types.d.ts

@@ -6,12 +6,20 @@ export declare enum AvatarSize {
     xxl = "xxl"
 }
 export type AvatarProps = React.HTMLAttributes<HTMLDivElement> & {
+    /** Full name used to derive initials and the default accessible label. */
     name: string;
+    /** Overall dimension of the avatar. @default 'lg' */
     size?: keyof typeof AvatarSize;
+    /** Background colour of the circle. Ignored when `iconSlot` is set. */
     bgColor?: string;
+    /** Colour of the initials text. */
     textColor?: string;
+    /** Icon rendered in place of initials (e.g. a channel or brand mark). */
     iconSlot?: React.ReactNode;
+    /** Image URL rendered in place of initials. */
     imageUrl?: string;
+    /** Accessible label for the avatar. @default `Avatar of ${name}` */
     ariaLabel?: string;
+    /** Shows a red error indicator on the avatar. @default false */
     hasIndicator?: boolean;
 };

package/dist/components/Avatar/types.js

@@ -0,0 +1,10 @@
+var AvatarSize;
+(function (AvatarSize) {
+    AvatarSize["md"] = "md";
+    AvatarSize["lg"] = "lg";
+    AvatarSize["xl"] = "xl";
+    AvatarSize["xxl"] = "xxl";
+})(AvatarSize || (AvatarSize = {}));
+
+export { AvatarSize };
+//# sourceMappingURL=types.js.map

package/dist/components/Avatar/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":["../../../src/components/Avatar/types.ts"],"sourcesContent":["export enum AvatarSize {\n  md = 'md',\n  lg = 'lg',\n  xl = 'xl',\n  xxl = 'xxl',\n}\n\nexport type AvatarProps = React.HTMLAttributes<HTMLDivElement> & {\n  /** Full name used to derive initials and the default accessible label. */\n  name: string;\n  /** Overall dimension of the avatar. @default 'lg' */\n  size?: keyof typeof AvatarSize;\n  /** Background colour of the circle. Ignored when `iconSlot` is set. */\n  bgColor?: string;\n  /** Colour of the initials text. */\n  textColor?: string;\n  /** Icon rendered in place of initials (e.g. a channel or brand mark). */\n  iconSlot?: React.ReactNode;\n  /** Image URL rendered in place of initials. */\n  imageUrl?: string;\n  /** Accessible label for the avatar. @default `Avatar of ${name}` */\n  ariaLabel?: string;\n  /** Shows a red error indicator on the avatar. @default false */\n  hasIndicator?: boolean;\n};\n"],"names":[],"mappings":"IAAY;AAAZ,CAAA,UAAY,UAAU,EAAA;AACpB,IAAA,UAAA,CAAA,IAAA,CAAA,GAAA,IAAS;AACT,IAAA,UAAA,CAAA,IAAA,CAAA,GAAA,IAAS;AACT,IAAA,UAAA,CAAA,IAAA,CAAA,GAAA,IAAS;AACT,IAAA,UAAA,CAAA,KAAA,CAAA,GAAA,KAAW;AACb,CAAC,EALW,UAAU,KAAV,UAAU,GAAA,EAAA,CAAA,CAAA;;;;"}

package/dist/components/IconGroup/IconGroup.cjs

@@ -2,6 +2,7 @@
 
 var React = require('react');
 var Avatar = require('../Avatar/Avatar.cjs');
+require('../Avatar/types.cjs');
 var index = require('../../theme/index.cjs');
 var buildClassnames = require('../../utils/buildClassnames.cjs');
 require('uid/secure');

package/dist/components/IconGroup/IconGroup.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"IconGroup.cjs","sources":["../../../src/components/IconGroup/IconGroup.tsx"],"sourcesContent":["import React from 'react';\n\n// Renamed existing Avatar component to Icon for code readability\nimport { Avatar as Icon } from '../Avatar';\nimport { theme } from '../../theme';\nimport { buildClassnames } from '../../utils';\nimport { IconGroupProps } from './types';\n\nimport styles from './IconGroup.module.scss';\n\nexport const IconGroup = ({\n  icons,\n  maxVisible = 3,\n  compact = false,\n  ariaLabel = 'Group of icons',\n  hasIndicator = false,\n  className,\n  ...listProps\n}: IconGroupProps) => {\n  const visibleIcons = icons.slice(\n    0,\n    icons.length > maxVisible ? Math.max(0, maxVisible - 1) : maxVisible,\n  );\n  const hiddenIcons = icons.slice(visibleIcons.length);\n\n  return (\n    <ul {...listProps} aria-label={ariaLabel} className={buildClassnames([styles.list, className])}>\n      {hiddenIcons.length > 0 && (\n        <li\n          key=\"icon-group-item-remaining-count\"\n          className={styles.item}\n          aria-label={`${hiddenIcons.length} additional ${hiddenIcons.length === 1 ? 'item' : 'items'}`}\n          style={\n            {\n              '--icon-z-index': maxVisible,\n            } as React.CSSProperties\n          }\n        >\n          <Icon\n            name={`${hiddenIcons.length}+`}\n            size={compact ? 'md' : 'lg'}\n            bgColor={theme.colors.secondary.blue.darkest}\n            textColor={theme.colors.neutral.grey.lightest}\n            ariaLabel=\"Number of additional icons not shown\"\n            hasIndicator={hasIndicator}\n          />\n        </li>\n      )}\n      {visibleIcons.map((icon, index) => (\n        <li\n          key={`icon-group-item-${icon.name}`}\n          className={styles.item}\n          aria-label={`Icon item of ${icon.name}`}\n          style={\n            {\n              '--icon-z-index': visibleIcons.length - index,\n            } as React.CSSProperties\n          }\n        >\n          <Icon\n            {...icon}\n            hasIndicator={false}\n            size={compact ? 'md' : 'lg'}\n            bgColor={icon?.bgColor ?? theme.colors.neutral.grey.light}\n            textColor={icon?.textColor ?? theme.colors.neutral.ink.base}\n          />\n        </li>\n      ))}\n    </ul>\n  );\n};\n"],"names":["React","buildClassnames","styles","Icon","theme","index"],"mappings":";;;;;;;;;;;;;AAUO,MAAM,SAAS,GAAG,CAAC,EACxB,KAAK,EACL,UAAU,GAAG,CAAC,EACd,OAAO,GAAG,KAAK,EACf,SAAS,GAAG,gBAAgB,EAC5B,YAAY,GAAG,KAAK,EACpB,SAAS,EACT,GAAG,SAAS,EACG,KAAI;AACnB,IAAA,MAAM,YAAY,GAAG,KAAK,CAAC,KAAK,CAC9B,CAAC,EACD,KAAK,CAAC,MAAM,GAAG,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,UAAU,GAAG,CAAC,CAAC,GAAG,UAAU,CACrE;IACD,MAAM,WAAW,GAAG,KAAK,CAAC,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC;AAEpD,IAAA,QACEA,sBAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,GAAQ,SAAS,EAAA,YAAA,EAAc,SAAS,EAAE,SAAS,EAAEC,+BAAe,CAAC,CAACC,gBAAM,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,EAAA;AAC3F,QAAA,WAAW,CAAC,MAAM,GAAG,CAAC,KACrBF,sBAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EACE,GAAG,EAAC,iCAAiC,EACrC,SAAS,EAAEE,gBAAM,CAAC,IAAI,gBACV,CAAA,EAAG,WAAW,CAAC,MAAM,eAAe,WAAW,CAAC,MAAM,KAAK,CAAC,GAAG,MAAM,GAAG,OAAO,CAAA,CAAE,EAC7F,KAAK,EACH;AACE,gBAAA,gBAAgB,EAAE,UAAU;AACN,aAAA,EAAA;YAG1BF,sBAAA,CAAA,aAAA,CAACG,aAAI,EAAA,EACH,IAAI,EAAE,CAAA,EAAG,WAAW,CAAC,MAAM,CAAA,CAAA,CAAG,EAC9B,IAAI,EAAE,OAAO,GAAG,IAAI,GAAG,IAAI,EAC3B,OAAO,EAAEC,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,EAC5C,SAAS,EAAEA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,EAC7C,SAAS,EAAC,sCAAsC,EAChD,YAAY,EAAE,YAAY,EAAA,CAC1B,CACC,CACN;QACA,YAAY,CAAC,GAAG,CAAC,CAAC,IAAI,EAAEC,OAAK,KAAI;;YAAC,QACjCL,6CACE,GAAG,EAAE,mBAAmB,IAAI,CAAC,IAAI,CAAA,CAAE,EACnC,SAAS,EAAEE,gBAAM,CAAC,IAAI,EAAA,YAAA,EACV,CAAA,aAAA,EAAgB,IAAI,CAAC,IAAI,CAAA,CAAE,EACvC,KAAK,EACH;AACE,oBAAA,gBAAgB,EAAE,YAAY,CAAC,MAAM,GAAGG,OAAK;AACvB,iBAAA,EAAA;AAG1B,gBAAAL,sBAAA,CAAA,aAAA,CAACG,aAAI,EAAA,EAAA,GACC,IAAI,EACR,YAAY,EAAE,KAAK,EACnB,IAAI,EAAE,OAAO,GAAG,IAAI,GAAG,IAAI,EAC3B,OAAO,EAAE,CAAA,EAAA,GAAA,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,MAAA,GAAA,MAAA,GAAJ,IAAI,CAAE,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAIC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,EACzD,SAAS,EAAE,CAAA,EAAA,GAAA,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,MAAA,GAAA,MAAA,GAAJ,IAAI,CAAE,SAAS,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAIA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAAA,CAC3D,CACC;SACN,CAAC,CACC;AAET;;;;"}
+{"version":3,"file":"IconGroup.cjs","sources":["../../../src/components/IconGroup/IconGroup.tsx"],"sourcesContent":["import React from 'react';\n\n// Renamed existing Avatar component to Icon for code readability\nimport { Avatar as Icon } from '../Avatar';\nimport { theme } from '../../theme';\nimport { buildClassnames } from '../../utils';\nimport { IconGroupProps } from './types';\n\nimport styles from './IconGroup.module.scss';\n\nexport const IconGroup = ({\n  icons,\n  maxVisible = 3,\n  compact = false,\n  ariaLabel = 'Group of icons',\n  hasIndicator = false,\n  className,\n  ...listProps\n}: IconGroupProps) => {\n  const visibleIcons = icons.slice(\n    0,\n    icons.length > maxVisible ? Math.max(0, maxVisible - 1) : maxVisible,\n  );\n  const hiddenIcons = icons.slice(visibleIcons.length);\n\n  return (\n    <ul {...listProps} aria-label={ariaLabel} className={buildClassnames([styles.list, className])}>\n      {hiddenIcons.length > 0 && (\n        <li\n          key=\"icon-group-item-remaining-count\"\n          className={styles.item}\n          aria-label={`${hiddenIcons.length} additional ${hiddenIcons.length === 1 ? 'item' : 'items'}`}\n          style={\n            {\n              '--icon-z-index': maxVisible,\n            } as React.CSSProperties\n          }\n        >\n          <Icon\n            name={`${hiddenIcons.length}+`}\n            size={compact ? 'md' : 'lg'}\n            bgColor={theme.colors.secondary.blue.darkest}\n            textColor={theme.colors.neutral.grey.lightest}\n            ariaLabel=\"Number of additional icons not shown\"\n            hasIndicator={hasIndicator}\n          />\n        </li>\n      )}\n      {visibleIcons.map((icon, index) => (\n        <li\n          key={`icon-group-item-${icon.name}`}\n          className={styles.item}\n          aria-label={`Icon item of ${icon.name}`}\n          style={\n            {\n              '--icon-z-index': visibleIcons.length - index,\n            } as React.CSSProperties\n          }\n        >\n          <Icon\n            {...icon}\n            hasIndicator={false}\n            size={compact ? 'md' : 'lg'}\n            bgColor={icon?.bgColor ?? theme.colors.neutral.grey.light}\n            textColor={icon?.textColor ?? theme.colors.neutral.ink.base}\n          />\n        </li>\n      ))}\n    </ul>\n  );\n};\n"],"names":["React","buildClassnames","styles","Icon","theme","index"],"mappings":";;;;;;;;;;;;;;AAUO,MAAM,SAAS,GAAG,CAAC,EACxB,KAAK,EACL,UAAU,GAAG,CAAC,EACd,OAAO,GAAG,KAAK,EACf,SAAS,GAAG,gBAAgB,EAC5B,YAAY,GAAG,KAAK,EACpB,SAAS,EACT,GAAG,SAAS,EACG,KAAI;AACnB,IAAA,MAAM,YAAY,GAAG,KAAK,CAAC,KAAK,CAC9B,CAAC,EACD,KAAK,CAAC,MAAM,GAAG,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,UAAU,GAAG,CAAC,CAAC,GAAG,UAAU,CACrE;IACD,MAAM,WAAW,GAAG,KAAK,CAAC,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC;AAEpD,IAAA,QACEA,sBAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,GAAQ,SAAS,EAAA,YAAA,EAAc,SAAS,EAAE,SAAS,EAAEC,+BAAe,CAAC,CAACC,gBAAM,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,EAAA;AAC3F,QAAA,WAAW,CAAC,MAAM,GAAG,CAAC,KACrBF,sBAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EACE,GAAG,EAAC,iCAAiC,EACrC,SAAS,EAAEE,gBAAM,CAAC,IAAI,gBACV,CAAA,EAAG,WAAW,CAAC,MAAM,eAAe,WAAW,CAAC,MAAM,KAAK,CAAC,GAAG,MAAM,GAAG,OAAO,CAAA,CAAE,EAC7F,KAAK,EACH;AACE,gBAAA,gBAAgB,EAAE,UAAU;AACN,aAAA,EAAA;YAG1BF,sBAAA,CAAA,aAAA,CAACG,aAAI,EAAA,EACH,IAAI,EAAE,CAAA,EAAG,WAAW,CAAC,MAAM,CAAA,CAAA,CAAG,EAC9B,IAAI,EAAE,OAAO,GAAG,IAAI,GAAG,IAAI,EAC3B,OAAO,EAAEC,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,EAC5C,SAAS,EAAEA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,EAC7C,SAAS,EAAC,sCAAsC,EAChD,YAAY,EAAE,YAAY,EAAA,CAC1B,CACC,CACN;QACA,YAAY,CAAC,GAAG,CAAC,CAAC,IAAI,EAAEC,OAAK,KAAI;;YAAC,QACjCL,6CACE,GAAG,EAAE,mBAAmB,IAAI,CAAC,IAAI,CAAA,CAAE,EACnC,SAAS,EAAEE,gBAAM,CAAC,IAAI,EAAA,YAAA,EACV,CAAA,aAAA,EAAgB,IAAI,CAAC,IAAI,CAAA,CAAE,EACvC,KAAK,EACH;AACE,oBAAA,gBAAgB,EAAE,YAAY,CAAC,MAAM,GAAGG,OAAK;AACvB,iBAAA,EAAA;AAG1B,gBAAAL,sBAAA,CAAA,aAAA,CAACG,aAAI,EAAA,EAAA,GACC,IAAI,EACR,YAAY,EAAE,KAAK,EACnB,IAAI,EAAE,OAAO,GAAG,IAAI,GAAG,IAAI,EAC3B,OAAO,EAAE,CAAA,EAAA,GAAA,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,MAAA,GAAA,MAAA,GAAJ,IAAI,CAAE,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAIC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,EACzD,SAAS,EAAE,CAAA,EAAA,GAAA,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,MAAA,GAAA,MAAA,GAAJ,IAAI,CAAE,SAAS,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAIA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAAA,CAC3D,CACC;SACN,CAAC,CACC;AAET;;;;"}

package/dist/components/IconGroup/IconGroup.js

@@ -1,5 +1,6 @@
 import React__default from 'react';
 import { Avatar } from '../Avatar/Avatar.js';
+import '../Avatar/types.js';
 import { theme } from '../../theme/index.js';
 import { buildClassnames } from '../../utils/buildClassnames.js';
 import 'uid/secure';

package/dist/components/IconGroup/IconGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconGroup.js","sources":["../../../src/components/IconGroup/IconGroup.tsx"],"sourcesContent":["import React from 'react';\n\n// Renamed existing Avatar component to Icon for code readability\nimport { Avatar as Icon } from '../Avatar';\nimport { theme } from '../../theme';\nimport { buildClassnames } from '../../utils';\nimport { IconGroupProps } from './types';\n\nimport styles from './IconGroup.module.scss';\n\nexport const IconGroup = ({\n  icons,\n  maxVisible = 3,\n  compact = false,\n  ariaLabel = 'Group of icons',\n  hasIndicator = false,\n  className,\n  ...listProps\n}: IconGroupProps) => {\n  const visibleIcons = icons.slice(\n    0,\n    icons.length > maxVisible ? Math.max(0, maxVisible - 1) : maxVisible,\n  );\n  const hiddenIcons = icons.slice(visibleIcons.length);\n\n  return (\n    <ul {...listProps} aria-label={ariaLabel} className={buildClassnames([styles.list, className])}>\n      {hiddenIcons.length > 0 && (\n        <li\n          key=\"icon-group-item-remaining-count\"\n          className={styles.item}\n          aria-label={`${hiddenIcons.length} additional ${hiddenIcons.length === 1 ? 'item' : 'items'}`}\n          style={\n            {\n              '--icon-z-index': maxVisible,\n            } as React.CSSProperties\n          }\n        >\n          <Icon\n            name={`${hiddenIcons.length}+`}\n            size={compact ? 'md' : 'lg'}\n            bgColor={theme.colors.secondary.blue.darkest}\n            textColor={theme.colors.neutral.grey.lightest}\n            ariaLabel=\"Number of additional icons not shown\"\n            hasIndicator={hasIndicator}\n          />\n        </li>\n      )}\n      {visibleIcons.map((icon, index) => (\n        <li\n          key={`icon-group-item-${icon.name}`}\n          className={styles.item}\n          aria-label={`Icon item of ${icon.name}`}\n          style={\n            {\n              '--icon-z-index': visibleIcons.length - index,\n            } as React.CSSProperties\n          }\n        >\n          <Icon\n            {...icon}\n            hasIndicator={false}\n            size={compact ? 'md' : 'lg'}\n            bgColor={icon?.bgColor ?? theme.colors.neutral.grey.light}\n            textColor={icon?.textColor ?? theme.colors.neutral.ink.base}\n          />\n        </li>\n      ))}\n    </ul>\n  );\n};\n"],"names":["React","Icon"],"mappings":";;;;;;;AAUO,MAAM,SAAS,GAAG,CAAC,EACxB,KAAK,EACL,UAAU,GAAG,CAAC,EACd,OAAO,GAAG,KAAK,EACf,SAAS,GAAG,gBAAgB,EAC5B,YAAY,GAAG,KAAK,EACpB,SAAS,EACT,GAAG,SAAS,EACG,KAAI;AACnB,IAAA,MAAM,YAAY,GAAG,KAAK,CAAC,KAAK,CAC9B,CAAC,EACD,KAAK,CAAC,MAAM,GAAG,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,UAAU,GAAG,CAAC,CAAC,GAAG,UAAU,CACrE;IACD,MAAM,WAAW,GAAG,KAAK,CAAC,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC;AAEpD,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,GAAQ,SAAS,EAAA,YAAA,EAAc,SAAS,EAAE,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,EAAA;AAC3F,QAAA,WAAW,CAAC,MAAM,GAAG,CAAC,KACrBA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EACE,GAAG,EAAC,iCAAiC,EACrC,SAAS,EAAE,MAAM,CAAC,IAAI,gBACV,CAAA,EAAG,WAAW,CAAC,MAAM,eAAe,WAAW,CAAC,MAAM,KAAK,CAAC,GAAG,MAAM,GAAG,OAAO,CAAA,CAAE,EAC7F,KAAK,EACH;AACE,gBAAA,gBAAgB,EAAE,UAAU;AACN,aAAA,EAAA;YAG1BA,cAAA,CAAA,aAAA,CAACC,MAAI,EAAA,EACH,IAAI,EAAE,CAAA,EAAG,WAAW,CAAC,MAAM,CAAA,CAAA,CAAG,EAC9B,IAAI,EAAE,OAAO,GAAG,IAAI,GAAG,IAAI,EAC3B,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,EAC5C,SAAS,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,EAC7C,SAAS,EAAC,sCAAsC,EAChD,YAAY,EAAE,YAAY,EAAA,CAC1B,CACC,CACN;QACA,YAAY,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,KAAI;;YAAC,QACjCD,qCACE,GAAG,EAAE,mBAAmB,IAAI,CAAC,IAAI,CAAA,CAAE,EACnC,SAAS,EAAE,MAAM,CAAC,IAAI,EAAA,YAAA,EACV,CAAA,aAAA,EAAgB,IAAI,CAAC,IAAI,CAAA,CAAE,EACvC,KAAK,EACH;AACE,oBAAA,gBAAgB,EAAE,YAAY,CAAC,MAAM,GAAG,KAAK;AACvB,iBAAA,EAAA;AAG1B,gBAAAA,cAAA,CAAA,aAAA,CAACC,MAAI,EAAA,EAAA,GACC,IAAI,EACR,YAAY,EAAE,KAAK,EACnB,IAAI,EAAE,OAAO,GAAG,IAAI,GAAG,IAAI,EAC3B,OAAO,EAAE,CAAA,EAAA,GAAA,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,MAAA,GAAA,MAAA,GAAJ,IAAI,CAAE,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,EACzD,SAAS,EAAE,CAAA,EAAA,GAAA,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,MAAA,GAAA,MAAA,GAAJ,IAAI,CAAE,SAAS,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAAA,CAC3D,CACC;SACN,CAAC,CACC;AAET;;;;"}
+{"version":3,"file":"IconGroup.js","sources":["../../../src/components/IconGroup/IconGroup.tsx"],"sourcesContent":["import React from 'react';\n\n// Renamed existing Avatar component to Icon for code readability\nimport { Avatar as Icon } from '../Avatar';\nimport { theme } from '../../theme';\nimport { buildClassnames } from '../../utils';\nimport { IconGroupProps } from './types';\n\nimport styles from './IconGroup.module.scss';\n\nexport const IconGroup = ({\n  icons,\n  maxVisible = 3,\n  compact = false,\n  ariaLabel = 'Group of icons',\n  hasIndicator = false,\n  className,\n  ...listProps\n}: IconGroupProps) => {\n  const visibleIcons = icons.slice(\n    0,\n    icons.length > maxVisible ? Math.max(0, maxVisible - 1) : maxVisible,\n  );\n  const hiddenIcons = icons.slice(visibleIcons.length);\n\n  return (\n    <ul {...listProps} aria-label={ariaLabel} className={buildClassnames([styles.list, className])}>\n      {hiddenIcons.length > 0 && (\n        <li\n          key=\"icon-group-item-remaining-count\"\n          className={styles.item}\n          aria-label={`${hiddenIcons.length} additional ${hiddenIcons.length === 1 ? 'item' : 'items'}`}\n          style={\n            {\n              '--icon-z-index': maxVisible,\n            } as React.CSSProperties\n          }\n        >\n          <Icon\n            name={`${hiddenIcons.length}+`}\n            size={compact ? 'md' : 'lg'}\n            bgColor={theme.colors.secondary.blue.darkest}\n            textColor={theme.colors.neutral.grey.lightest}\n            ariaLabel=\"Number of additional icons not shown\"\n            hasIndicator={hasIndicator}\n          />\n        </li>\n      )}\n      {visibleIcons.map((icon, index) => (\n        <li\n          key={`icon-group-item-${icon.name}`}\n          className={styles.item}\n          aria-label={`Icon item of ${icon.name}`}\n          style={\n            {\n              '--icon-z-index': visibleIcons.length - index,\n            } as React.CSSProperties\n          }\n        >\n          <Icon\n            {...icon}\n            hasIndicator={false}\n            size={compact ? 'md' : 'lg'}\n            bgColor={icon?.bgColor ?? theme.colors.neutral.grey.light}\n            textColor={icon?.textColor ?? theme.colors.neutral.ink.base}\n          />\n        </li>\n      ))}\n    </ul>\n  );\n};\n"],"names":["React","Icon"],"mappings":";;;;;;;;AAUO,MAAM,SAAS,GAAG,CAAC,EACxB,KAAK,EACL,UAAU,GAAG,CAAC,EACd,OAAO,GAAG,KAAK,EACf,SAAS,GAAG,gBAAgB,EAC5B,YAAY,GAAG,KAAK,EACpB,SAAS,EACT,GAAG,SAAS,EACG,KAAI;AACnB,IAAA,MAAM,YAAY,GAAG,KAAK,CAAC,KAAK,CAC9B,CAAC,EACD,KAAK,CAAC,MAAM,GAAG,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,UAAU,GAAG,CAAC,CAAC,GAAG,UAAU,CACrE;IACD,MAAM,WAAW,GAAG,KAAK,CAAC,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC;AAEpD,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,GAAQ,SAAS,EAAA,YAAA,EAAc,SAAS,EAAE,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,EAAA;AAC3F,QAAA,WAAW,CAAC,MAAM,GAAG,CAAC,KACrBA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EACE,GAAG,EAAC,iCAAiC,EACrC,SAAS,EAAE,MAAM,CAAC,IAAI,gBACV,CAAA,EAAG,WAAW,CAAC,MAAM,eAAe,WAAW,CAAC,MAAM,KAAK,CAAC,GAAG,MAAM,GAAG,OAAO,CAAA,CAAE,EAC7F,KAAK,EACH;AACE,gBAAA,gBAAgB,EAAE,UAAU;AACN,aAAA,EAAA;YAG1BA,cAAA,CAAA,aAAA,CAACC,MAAI,EAAA,EACH,IAAI,EAAE,CAAA,EAAG,WAAW,CAAC,MAAM,CAAA,CAAA,CAAG,EAC9B,IAAI,EAAE,OAAO,GAAG,IAAI,GAAG,IAAI,EAC3B,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,EAC5C,SAAS,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,EAC7C,SAAS,EAAC,sCAAsC,EAChD,YAAY,EAAE,YAAY,EAAA,CAC1B,CACC,CACN;QACA,YAAY,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,KAAI;;YAAC,QACjCD,qCACE,GAAG,EAAE,mBAAmB,IAAI,CAAC,IAAI,CAAA,CAAE,EACnC,SAAS,EAAE,MAAM,CAAC,IAAI,EAAA,YAAA,EACV,CAAA,aAAA,EAAgB,IAAI,CAAC,IAAI,CAAA,CAAE,EACvC,KAAK,EACH;AACE,oBAAA,gBAAgB,EAAE,YAAY,CAAC,MAAM,GAAG,KAAK;AACvB,iBAAA,EAAA;AAG1B,gBAAAA,cAAA,CAAA,aAAA,CAACC,MAAI,EAAA,EAAA,GACC,IAAI,EACR,YAAY,EAAE,KAAK,EACnB,IAAI,EAAE,OAAO,GAAG,IAAI,GAAG,IAAI,EAC3B,OAAO,EAAE,CAAA,EAAA,GAAA,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,MAAA,GAAA,MAAA,GAAJ,IAAI,CAAE,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,EACzD,SAAS,EAAE,CAAA,EAAA,GAAA,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,MAAA,GAAA,MAAA,GAAJ,IAAI,CAAE,SAAS,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAAA,CAC3D,CACC;SACN,CAAC,CACC;AAET;;;;"}

package/dist/components/LoginWithAmazonButton/LoginWithAmazonButton.cjs

@@ -2,29 +2,51 @@
 
 var React = require('react');
 var LoginWithAmazonButton_module = require('./LoginWithAmazonButton.module.scss.cjs');
+var buildClassnames = require('../../utils/buildClassnames.cjs');
+require('uid/secure');
+var Action = require('../Action/Action.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const buttonImg = 'https://images-na.ssl-images-amazon.com/images/G/01/lwa/btnLWA_gold_312x64.png';
-const buttonPressedImg = 'https://images-na.ssl-images-amazon.com/images/G/01/lwa/btnLWA_gold_312x64_pressed.png';
 const buttonDescription = 'Log in with Amazon';
+const LWA_IMAGE_BASE = 'https://images-na.ssl-images-amazon.com/images/G/01/lwa';
+/** Amazon's abbreviated colour code used in the button asset filenames. */
+const VARIANT_COLOR = {
+    gold: 'gold',
+    darkgray: 'drkgry',
+    lightgray: 'gry',
+};
+/** Intrinsic pixel dimensions of the button asset for each size. */
+const SIZE_DIMENSIONS = {
+    base: '312x64',
+    sm: '152x64',
+    xs: '64x64',
+};
+/** Rendered size (half the 2x asset). Set on the <img> so the browser reserves space before load (CLS). */
+const RENDERED_SIZE = {
+    base: { width: 156, height: 32 },
+    sm: { width: 76, height: 32 },
+    xs: { width: 32, height: 32 },
+};
+const lwaImageSrc = (variant, size, pressed) => `${LWA_IMAGE_BASE}/btnLWA_${VARIANT_COLOR[variant]}_${SIZE_DIMENSIONS[size]}${pressed ? '_pressed' : ''}.png`;
 /**
- * Image used in this button is to comply with official
- * Amazon button guidelines (https://developer.amazon.com/docs/login-with-amazon/button.html#android-images).
+ * A "Log in with Amazon" button rendered from Amazon's official button artwork,
+ * in line with the [Login with Amazon button guidelines](https://developer.amazon.com/docs/login-with-amazon/button.html).
+ *
+ * Built on `Action` (`appearance="unstyled"`), so it inherits Action's reset, native
+ * `disabled` handling and data-attribute support. The button swaps to its pressed artwork
+ * via `:active`, so mouse, touch and keyboard activation all show it. Colour is chosen with
+ * `variant` (gold / darkgray / lightgray) and dimensions with `size` (base / sm / xs); the
+ * two together select the exact asset. The accessible name defaults to "Log in with Amazon"
+ * and can be overridden via `aria-label` for localisation.
+ *
+ * @summary official Amazon sign-in button
  */
-const LoginWithAmazonButton = (props) => {
-    const [image, setImage] = React.useState(buttonImg);
-    const handleMouseDown = () => {
-        setImage(buttonPressedImg);
-    };
-    const handleMouseUp = () => {
-        setImage(buttonImg);
-    };
-    return (React__default.default.createElement("button", { type: "button", className: LoginWithAmazonButton_module.loginButton, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, "aria-label": buttonDescription, ...props },
-        React__default.default.createElement("img", { src: image, alt: buttonDescription })));
-};
+const LoginWithAmazonButton = ({ variant = 'gold', size = 'base', className, ...props }) => (React__default.default.createElement(Action.Action, { "aria-label": buttonDescription, ...props, appearance: "unstyled", className: buildClassnames.buildClassnames([LoginWithAmazonButton_module.loginButton, className]) },
+    React__default.default.createElement("img", { className: LoginWithAmazonButton_module['default-state'], src: lwaImageSrc(variant, size, false), alt: "", ...RENDERED_SIZE[size] }),
+    React__default.default.createElement("img", { className: LoginWithAmazonButton_module['pressed-state'], src: lwaImageSrc(variant, size, true), alt: "", ...RENDERED_SIZE[size] })));
 
 exports.LoginWithAmazonButton = LoginWithAmazonButton;
 exports.buttonDescription = buttonDescription;

package/dist/components/LoginWithAmazonButton/LoginWithAmazonButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"LoginWithAmazonButton.cjs","sources":["../../../src/components/LoginWithAmazonButton/LoginWithAmazonButton.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport styles from './LoginWithAmazonButton.module.scss';\n\nconst buttonImg = 'https://images-na.ssl-images-amazon.com/images/G/01/lwa/btnLWA_gold_312x64.png';\nconst buttonPressedImg =\n  'https://images-na.ssl-images-amazon.com/images/G/01/lwa/btnLWA_gold_312x64_pressed.png';\n\nexport const buttonDescription = 'Log in with Amazon';\n\n/**\n * Image used in this button is to comply with official\n * Amazon button guidelines (https://developer.amazon.com/docs/login-with-amazon/button.html#android-images).\n */\nexport const LoginWithAmazonButton: React.FC<React.ButtonHTMLAttributes<HTMLButtonElement>> = (\n  props,\n) => {\n  const [image, setImage] = useState(buttonImg);\n\n  const handleMouseDown = () => {\n    setImage(buttonPressedImg);\n  };\n\n  const handleMouseUp = () => {\n    setImage(buttonImg);\n  };\n\n  return (\n    <button\n      type=\"button\"\n      className={styles.loginButton}\n      onMouseDown={handleMouseDown}\n      onMouseUp={handleMouseUp}\n      aria-label={buttonDescription}\n      {...props}\n    >\n      {/* alt attr for better accessibility if image is failed to load */}\n      <img src={image} alt={buttonDescription} />\n    </button>\n  );\n};\n"],"names":["useState","React","styles"],"mappings":";;;;;;;;;AAGA,MAAM,SAAS,GAAG,gFAAgF;AAClG,MAAM,gBAAgB,GACpB,wFAAwF;AAEnF,MAAM,iBAAiB,GAAG;AAEjC;;;AAGG;AACI,MAAM,qBAAqB,GAA4D,CAC5F,KAAK,KACH;IACF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAGA,cAAQ,CAAC,SAAS,CAAC;IAE7C,MAAM,eAAe,GAAG,MAAK;QAC3B,QAAQ,CAAC,gBAAgB,CAAC;AAC5B,IAAA,CAAC;IAED,MAAM,aAAa,GAAG,MAAK;QACzB,QAAQ,CAAC,SAAS,CAAC;AACrB,IAAA,CAAC;IAED,QACEC,iDACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAEC,4BAAM,CAAC,WAAW,EAC7B,WAAW,EAAE,eAAe,EAC5B,SAAS,EAAE,aAAa,EAAA,YAAA,EACZ,iBAAiB,EAAA,GACzB,KAAK,EAAA;QAGTD,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,iBAAiB,EAAA,CAAI,CACpC;AAEb;;;;;"}
+{"version":3,"file":"LoginWithAmazonButton.cjs","sources":["../../../src/components/LoginWithAmazonButton/LoginWithAmazonButton.tsx"],"sourcesContent":["import React from 'react';\nimport styles from './LoginWithAmazonButton.module.scss';\nimport { buildClassnames } from '../../utils';\nimport { Action } from '../Action';\nimport type {\n  LoginWithAmazonButtonProps,\n  LoginWithAmazonButtonSize,\n  LoginWithAmazonButtonVariant,\n} from './types';\n\nexport const buttonDescription = 'Log in with Amazon';\n\nconst LWA_IMAGE_BASE = 'https://images-na.ssl-images-amazon.com/images/G/01/lwa';\n\n/** Amazon's abbreviated colour code used in the button asset filenames. */\nconst VARIANT_COLOR: Record<LoginWithAmazonButtonVariant, string> = {\n  gold: 'gold',\n  darkgray: 'drkgry',\n  lightgray: 'gry',\n};\n\n/** Intrinsic pixel dimensions of the button asset for each size. */\nconst SIZE_DIMENSIONS: Record<LoginWithAmazonButtonSize, string> = {\n  base: '312x64',\n  sm: '152x64',\n  xs: '64x64',\n};\n\n/** Rendered size (half the 2x asset). Set on the <img> so the browser reserves space before load (CLS). */\nconst RENDERED_SIZE: Record<LoginWithAmazonButtonSize, { width: number; height: number }> = {\n  base: { width: 156, height: 32 },\n  sm: { width: 76, height: 32 },\n  xs: { width: 32, height: 32 },\n};\n\nconst lwaImageSrc = (\n  variant: LoginWithAmazonButtonVariant,\n  size: LoginWithAmazonButtonSize,\n  pressed: boolean,\n) =>\n  `${LWA_IMAGE_BASE}/btnLWA_${VARIANT_COLOR[variant]}_${SIZE_DIMENSIONS[size]}${pressed ? '_pressed' : ''}.png`;\n\n/**\n * A \"Log in with Amazon\" button rendered from Amazon's official button artwork,\n * in line with the [Login with Amazon button guidelines](https://developer.amazon.com/docs/login-with-amazon/button.html).\n *\n * Built on `Action` (`appearance=\"unstyled\"`), so it inherits Action's reset, native\n * `disabled` handling and data-attribute support. The button swaps to its pressed artwork\n * via `:active`, so mouse, touch and keyboard activation all show it. Colour is chosen with\n * `variant` (gold / darkgray / lightgray) and dimensions with `size` (base / sm / xs); the\n * two together select the exact asset. The accessible name defaults to \"Log in with Amazon\"\n * and can be overridden via `aria-label` for localisation.\n *\n * @summary official Amazon sign-in button\n */\nexport const LoginWithAmazonButton = ({\n  variant = 'gold',\n  size = 'base',\n  className,\n  ...props\n}: LoginWithAmazonButtonProps) => (\n  <Action\n    aria-label={buttonDescription}\n    {...props}\n    appearance=\"unstyled\"\n    className={buildClassnames([styles.loginButton, className])}\n  >\n    {/* Both images are rendered so the pressed artwork is preloaded; CSS shows one at a time.\n        They are decorative (alt=\"\") because the button's aria-label carries the accessible name. */}\n    <img\n      className={styles['default-state']}\n      src={lwaImageSrc(variant, size, false)}\n      alt=\"\"\n      {...RENDERED_SIZE[size]}\n    />\n    <img\n      className={styles['pressed-state']}\n      src={lwaImageSrc(variant, size, true)}\n      alt=\"\"\n      {...RENDERED_SIZE[size]}\n    />\n  </Action>\n);\n"],"names":["React","Action","buildClassnames","styles"],"mappings":";;;;;;;;;;;;AAUO,MAAM,iBAAiB,GAAG;AAEjC,MAAM,cAAc,GAAG,yDAAyD;AAEhF;AACA,MAAM,aAAa,GAAiD;AAClE,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,QAAQ,EAAE,QAAQ;AAClB,IAAA,SAAS,EAAE,KAAK;CACjB;AAED;AACA,MAAM,eAAe,GAA8C;AACjE,IAAA,IAAI,EAAE,QAAQ;AACd,IAAA,EAAE,EAAE,QAAQ;AACZ,IAAA,EAAE,EAAE,OAAO;CACZ;AAED;AACA,MAAM,aAAa,GAAyE;IAC1F,IAAI,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,EAAE;IAChC,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE;IAC7B,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE;CAC9B;AAED,MAAM,WAAW,GAAG,CAClB,OAAqC,EACrC,IAA+B,EAC/B,OAAgB,KAEhB,CAAA,EAAG,cAAc,CAAA,QAAA,EAAW,aAAa,CAAC,OAAO,CAAC,CAAA,CAAA,EAAI,eAAe,CAAC,IAAI,CAAC,GAAG,OAAO,GAAG,UAAU,GAAG,EAAE,MAAM;AAE/G;;;;;;;;;;;;AAYG;MACU,qBAAqB,GAAG,CAAC,EACpC,OAAO,GAAG,MAAM,EAChB,IAAI,GAAG,MAAM,EACb,SAAS,EACT,GAAG,KAAK,EACmB,MAC3BA,sBAAA,CAAA,aAAA,CAACC,aAAM,kBACO,iBAAiB,EAAA,GACzB,KAAK,EACT,UAAU,EAAC,UAAU,EACrB,SAAS,EAAEC,+BAAe,CAAC,CAACC,4BAAM,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC,EAAA;IAI3DH,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAEG,4BAAM,CAAC,eAAe,CAAC,EAClC,GAAG,EAAE,WAAW,CAAC,OAAO,EAAE,IAAI,EAAE,KAAK,CAAC,EACtC,GAAG,EAAC,EAAE,EAAA,GACF,aAAa,CAAC,IAAI,CAAC,EAAA,CACvB;AACF,IAAAH,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAEG,4BAAM,CAAC,eAAe,CAAC,EAClC,GAAG,EAAE,WAAW,CAAC,OAAO,EAAE,IAAI,EAAE,IAAI,CAAC,EACrC,GAAG,EAAC,EAAE,EAAA,GACF,aAAa,CAAC,IAAI,CAAC,EAAA,CACvB,CACK;;;;;"}

package/dist/components/LoginWithAmazonButton/LoginWithAmazonButton.d.ts

@@ -1,7 +1,17 @@
 import React from 'react';
+import type { LoginWithAmazonButtonProps } from './types';
 export declare const buttonDescription = "Log in with Amazon";
 /**
- * Image used in this button is to comply with official
- * Amazon button guidelines (https://developer.amazon.com/docs/login-with-amazon/button.html#android-images).
+ * A "Log in with Amazon" button rendered from Amazon's official button artwork,
+ * in line with the [Login with Amazon button guidelines](https://developer.amazon.com/docs/login-with-amazon/button.html).
+ *
+ * Built on `Action` (`appearance="unstyled"`), so it inherits Action's reset, native
+ * `disabled` handling and data-attribute support. The button swaps to its pressed artwork
+ * via `:active`, so mouse, touch and keyboard activation all show it. Colour is chosen with
+ * `variant` (gold / darkgray / lightgray) and dimensions with `size` (base / sm / xs); the
+ * two together select the exact asset. The accessible name defaults to "Log in with Amazon"
+ * and can be overridden via `aria-label` for localisation.
+ *
+ * @summary official Amazon sign-in button
  */
-export declare const LoginWithAmazonButton: React.FC<React.ButtonHTMLAttributes<HTMLButtonElement>>;
+export declare const LoginWithAmazonButton: ({ variant, size, className, ...props }: LoginWithAmazonButtonProps) => React.JSX.Element;

package/dist/components/LoginWithAmazonButton/LoginWithAmazonButton.js

@@ -1,24 +1,46 @@
-import React__default, { useState } from 'react';
+import React__default from 'react';
 import styles from './LoginWithAmazonButton.module.scss.js';
+import { buildClassnames } from '../../utils/buildClassnames.js';
+import 'uid/secure';
+import { Action } from '../Action/Action.js';
 
-const buttonImg = 'https://images-na.ssl-images-amazon.com/images/G/01/lwa/btnLWA_gold_312x64.png';
-const buttonPressedImg = 'https://images-na.ssl-images-amazon.com/images/G/01/lwa/btnLWA_gold_312x64_pressed.png';
 const buttonDescription = 'Log in with Amazon';
+const LWA_IMAGE_BASE = 'https://images-na.ssl-images-amazon.com/images/G/01/lwa';
+/** Amazon's abbreviated colour code used in the button asset filenames. */
+const VARIANT_COLOR = {
+    gold: 'gold',
+    darkgray: 'drkgry',
+    lightgray: 'gry',
+};
+/** Intrinsic pixel dimensions of the button asset for each size. */
+const SIZE_DIMENSIONS = {
+    base: '312x64',
+    sm: '152x64',
+    xs: '64x64',
+};
+/** Rendered size (half the 2x asset). Set on the <img> so the browser reserves space before load (CLS). */
+const RENDERED_SIZE = {
+    base: { width: 156, height: 32 },
+    sm: { width: 76, height: 32 },
+    xs: { width: 32, height: 32 },
+};
+const lwaImageSrc = (variant, size, pressed) => `${LWA_IMAGE_BASE}/btnLWA_${VARIANT_COLOR[variant]}_${SIZE_DIMENSIONS[size]}${pressed ? '_pressed' : ''}.png`;
 /**
- * Image used in this button is to comply with official
- * Amazon button guidelines (https://developer.amazon.com/docs/login-with-amazon/button.html#android-images).
+ * A "Log in with Amazon" button rendered from Amazon's official button artwork,
+ * in line with the [Login with Amazon button guidelines](https://developer.amazon.com/docs/login-with-amazon/button.html).
+ *
+ * Built on `Action` (`appearance="unstyled"`), so it inherits Action's reset, native
+ * `disabled` handling and data-attribute support. The button swaps to its pressed artwork
+ * via `:active`, so mouse, touch and keyboard activation all show it. Colour is chosen with
+ * `variant` (gold / darkgray / lightgray) and dimensions with `size` (base / sm / xs); the
+ * two together select the exact asset. The accessible name defaults to "Log in with Amazon"
+ * and can be overridden via `aria-label` for localisation.
+ *
+ * @summary official Amazon sign-in button
  */
-const LoginWithAmazonButton = (props) => {
-    const [image, setImage] = useState(buttonImg);
-    const handleMouseDown = () => {
-        setImage(buttonPressedImg);
-    };
-    const handleMouseUp = () => {
-        setImage(buttonImg);
-    };
-    return (React__default.createElement("button", { type: "button", className: styles.loginButton, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, "aria-label": buttonDescription, ...props },
-        React__default.createElement("img", { src: image, alt: buttonDescription })));
-};
+const LoginWithAmazonButton = ({ variant = 'gold', size = 'base', className, ...props }) => (React__default.createElement(Action, { "aria-label": buttonDescription, ...props, appearance: "unstyled", className: buildClassnames([styles.loginButton, className]) },
+    React__default.createElement("img", { className: styles['default-state'], src: lwaImageSrc(variant, size, false), alt: "", ...RENDERED_SIZE[size] }),
+    React__default.createElement("img", { className: styles['pressed-state'], src: lwaImageSrc(variant, size, true), alt: "", ...RENDERED_SIZE[size] })));
 
 export { LoginWithAmazonButton, buttonDescription };
 //# sourceMappingURL=LoginWithAmazonButton.js.map

package/dist/components/LoginWithAmazonButton/LoginWithAmazonButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"LoginWithAmazonButton.js","sources":["../../../src/components/LoginWithAmazonButton/LoginWithAmazonButton.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport styles from './LoginWithAmazonButton.module.scss';\n\nconst buttonImg = 'https://images-na.ssl-images-amazon.com/images/G/01/lwa/btnLWA_gold_312x64.png';\nconst buttonPressedImg =\n  'https://images-na.ssl-images-amazon.com/images/G/01/lwa/btnLWA_gold_312x64_pressed.png';\n\nexport const buttonDescription = 'Log in with Amazon';\n\n/**\n * Image used in this button is to comply with official\n * Amazon button guidelines (https://developer.amazon.com/docs/login-with-amazon/button.html#android-images).\n */\nexport const LoginWithAmazonButton: React.FC<React.ButtonHTMLAttributes<HTMLButtonElement>> = (\n  props,\n) => {\n  const [image, setImage] = useState(buttonImg);\n\n  const handleMouseDown = () => {\n    setImage(buttonPressedImg);\n  };\n\n  const handleMouseUp = () => {\n    setImage(buttonImg);\n  };\n\n  return (\n    <button\n      type=\"button\"\n      className={styles.loginButton}\n      onMouseDown={handleMouseDown}\n      onMouseUp={handleMouseUp}\n      aria-label={buttonDescription}\n      {...props}\n    >\n      {/* alt attr for better accessibility if image is failed to load */}\n      <img src={image} alt={buttonDescription} />\n    </button>\n  );\n};\n"],"names":["React"],"mappings":";;;AAGA,MAAM,SAAS,GAAG,gFAAgF;AAClG,MAAM,gBAAgB,GACpB,wFAAwF;AAEnF,MAAM,iBAAiB,GAAG;AAEjC;;;AAGG;AACI,MAAM,qBAAqB,GAA4D,CAC5F,KAAK,KACH;IACF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,SAAS,CAAC;IAE7C,MAAM,eAAe,GAAG,MAAK;QAC3B,QAAQ,CAAC,gBAAgB,CAAC;AAC5B,IAAA,CAAC;IAED,MAAM,aAAa,GAAG,MAAK;QACzB,QAAQ,CAAC,SAAS,CAAC;AACrB,IAAA,CAAC;IAED,QACEA,yCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,MAAM,CAAC,WAAW,EAC7B,WAAW,EAAE,eAAe,EAC5B,SAAS,EAAE,aAAa,EAAA,YAAA,EACZ,iBAAiB,EAAA,GACzB,KAAK,EAAA;QAGTA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,iBAAiB,EAAA,CAAI,CACpC;AAEb;;;;"}
+{"version":3,"file":"LoginWithAmazonButton.js","sources":["../../../src/components/LoginWithAmazonButton/LoginWithAmazonButton.tsx"],"sourcesContent":["import React from 'react';\nimport styles from './LoginWithAmazonButton.module.scss';\nimport { buildClassnames } from '../../utils';\nimport { Action } from '../Action';\nimport type {\n  LoginWithAmazonButtonProps,\n  LoginWithAmazonButtonSize,\n  LoginWithAmazonButtonVariant,\n} from './types';\n\nexport const buttonDescription = 'Log in with Amazon';\n\nconst LWA_IMAGE_BASE = 'https://images-na.ssl-images-amazon.com/images/G/01/lwa';\n\n/** Amazon's abbreviated colour code used in the button asset filenames. */\nconst VARIANT_COLOR: Record<LoginWithAmazonButtonVariant, string> = {\n  gold: 'gold',\n  darkgray: 'drkgry',\n  lightgray: 'gry',\n};\n\n/** Intrinsic pixel dimensions of the button asset for each size. */\nconst SIZE_DIMENSIONS: Record<LoginWithAmazonButtonSize, string> = {\n  base: '312x64',\n  sm: '152x64',\n  xs: '64x64',\n};\n\n/** Rendered size (half the 2x asset). Set on the <img> so the browser reserves space before load (CLS). */\nconst RENDERED_SIZE: Record<LoginWithAmazonButtonSize, { width: number; height: number }> = {\n  base: { width: 156, height: 32 },\n  sm: { width: 76, height: 32 },\n  xs: { width: 32, height: 32 },\n};\n\nconst lwaImageSrc = (\n  variant: LoginWithAmazonButtonVariant,\n  size: LoginWithAmazonButtonSize,\n  pressed: boolean,\n) =>\n  `${LWA_IMAGE_BASE}/btnLWA_${VARIANT_COLOR[variant]}_${SIZE_DIMENSIONS[size]}${pressed ? '_pressed' : ''}.png`;\n\n/**\n * A \"Log in with Amazon\" button rendered from Amazon's official button artwork,\n * in line with the [Login with Amazon button guidelines](https://developer.amazon.com/docs/login-with-amazon/button.html).\n *\n * Built on `Action` (`appearance=\"unstyled\"`), so it inherits Action's reset, native\n * `disabled` handling and data-attribute support. The button swaps to its pressed artwork\n * via `:active`, so mouse, touch and keyboard activation all show it. Colour is chosen with\n * `variant` (gold / darkgray / lightgray) and dimensions with `size` (base / sm / xs); the\n * two together select the exact asset. The accessible name defaults to \"Log in with Amazon\"\n * and can be overridden via `aria-label` for localisation.\n *\n * @summary official Amazon sign-in button\n */\nexport const LoginWithAmazonButton = ({\n  variant = 'gold',\n  size = 'base',\n  className,\n  ...props\n}: LoginWithAmazonButtonProps) => (\n  <Action\n    aria-label={buttonDescription}\n    {...props}\n    appearance=\"unstyled\"\n    className={buildClassnames([styles.loginButton, className])}\n  >\n    {/* Both images are rendered so the pressed artwork is preloaded; CSS shows one at a time.\n        They are decorative (alt=\"\") because the button's aria-label carries the accessible name. */}\n    <img\n      className={styles['default-state']}\n      src={lwaImageSrc(variant, size, false)}\n      alt=\"\"\n      {...RENDERED_SIZE[size]}\n    />\n    <img\n      className={styles['pressed-state']}\n      src={lwaImageSrc(variant, size, true)}\n      alt=\"\"\n      {...RENDERED_SIZE[size]}\n    />\n  </Action>\n);\n"],"names":["React"],"mappings":";;;;;;AAUO,MAAM,iBAAiB,GAAG;AAEjC,MAAM,cAAc,GAAG,yDAAyD;AAEhF;AACA,MAAM,aAAa,GAAiD;AAClE,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,QAAQ,EAAE,QAAQ;AAClB,IAAA,SAAS,EAAE,KAAK;CACjB;AAED;AACA,MAAM,eAAe,GAA8C;AACjE,IAAA,IAAI,EAAE,QAAQ;AACd,IAAA,EAAE,EAAE,QAAQ;AACZ,IAAA,EAAE,EAAE,OAAO;CACZ;AAED;AACA,MAAM,aAAa,GAAyE;IAC1F,IAAI,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,EAAE;IAChC,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE;IAC7B,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE;CAC9B;AAED,MAAM,WAAW,GAAG,CAClB,OAAqC,EACrC,IAA+B,EAC/B,OAAgB,KAEhB,CAAA,EAAG,cAAc,CAAA,QAAA,EAAW,aAAa,CAAC,OAAO,CAAC,CAAA,CAAA,EAAI,eAAe,CAAC,IAAI,CAAC,GAAG,OAAO,GAAG,UAAU,GAAG,EAAE,MAAM;AAE/G;;;;;;;;;;;;AAYG;MACU,qBAAqB,GAAG,CAAC,EACpC,OAAO,GAAG,MAAM,EAChB,IAAI,GAAG,MAAM,EACb,SAAS,EACT,GAAG,KAAK,EACmB,MAC3BA,cAAA,CAAA,aAAA,CAAC,MAAM,kBACO,iBAAiB,EAAA,GACzB,KAAK,EACT,UAAU,EAAC,UAAU,EACrB,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC,EAAA;IAI3DA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC,EAClC,GAAG,EAAE,WAAW,CAAC,OAAO,EAAE,IAAI,EAAE,KAAK,CAAC,EACtC,GAAG,EAAC,EAAE,EAAA,GACF,aAAa,CAAC,IAAI,CAAC,EAAA,CACvB;AACF,IAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC,EAClC,GAAG,EAAE,WAAW,CAAC,OAAO,EAAE,IAAI,EAAE,IAAI,CAAC,EACrC,GAAG,EAAC,EAAE,EAAA,GACF,aAAa,CAAC,IAAI,CAAC,EAAA,CACvB,CACK;;;;"}

package/dist/components/LoginWithAmazonButton/LoginWithAmazonButton.module.scss.cjs

@@ -2,8 +2,8 @@
 
 var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
 
-___$insertStyle("._loginButton_y5bj1_1 {\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n}\n._loginButton_y5bj1_1 img {\n  width: 156px;\n  height: 32px;\n}");
-var styles = {"loginButton":"_loginButton_y5bj1_1"};
+___$insertStyle("._loginButton_1aojq_1 {\n  --lwa-outline-width: var(--sizes-xs);\n  --lwa-highlight-color: var(--colors-secondary-blue-light);\n}\n._loginButton_1aojq_1 img {\n  display: block;\n}\n._loginButton_1aojq_1:hover:not(:disabled) {\n  opacity: 0.9;\n}\n._loginButton_1aojq_1:focus-visible {\n  outline: var(--lwa-outline-width) solid var(--lwa-highlight-color);\n}\n._loginButton_1aojq_1:disabled, ._loginButton_1aojq_1:disabled:hover {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n._loginButton_1aojq_1 ._pressed-state_1aojq_18, ._loginButton_1aojq_1:active:not(:disabled) ._default-state_1aojq_18 {\n  display: none;\n}\n._loginButton_1aojq_1:active:not(:disabled) ._pressed-state_1aojq_18 {\n  display: block;\n}");
+var styles = {"loginButton":"_loginButton_1aojq_1","pressed-state":"_pressed-state_1aojq_18","default-state":"_default-state_1aojq_18"};
 
 module.exports = styles;
 //# sourceMappingURL=LoginWithAmazonButton.module.scss.cjs.map

package/dist/components/LoginWithAmazonButton/LoginWithAmazonButton.module.scss.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"LoginWithAmazonButton.module.scss.cjs","sources":["../../../src/components/LoginWithAmazonButton/LoginWithAmazonButton.module.scss"],"sourcesContent":[".loginButton {\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n\n  img {\n    width: 156px;\n    height: 32px;\n  }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,uKAAA;AACA,aAAA,CAAA,aAAA,CAAA,sBAAA;;;;"}
+{"version":3,"file":"LoginWithAmazonButton.module.scss.cjs","sources":["../../../src/components/LoginWithAmazonButton/LoginWithAmazonButton.module.scss"],"sourcesContent":["// Reset (appearance/border/background/padding/cursor) comes from Action's `unstyled` appearance.\n// Image dimensions are set via width/height attributes on the <img> (see RENDERED_SIZE in the\n// component) so the browser reserves space before load.\n.loginButton {\n  --lwa-outline-width: var(--sizes-xs);\n  --lwa-highlight-color: var(--colors-secondary-blue-light);\n\n  img {\n    display: block;\n  }\n\n  // The fill is fixed raster artwork, so a background hover would be invisible;\n  // a slight dim is the treatment Amazon's own LWA guidelines use.\n  &:hover:not(:disabled) {\n    opacity: 0.9;\n  }\n\n  &:focus-visible {\n    outline: var(--lwa-outline-width) solid var(--lwa-highlight-color);\n  }\n\n  // `&:disabled:hover` out-specifies Action's reset `:hover { cursor: pointer }`,\n  // which would otherwise win depending on stylesheet load order.\n  &:disabled,\n  &:disabled:hover {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  .pressed-state,\n  &:active:not(:disabled) .default-state {\n    display: none;\n  }\n\n  &:active:not(:disabled) .pressed-state {\n    display: block;\n  }\n}\n"],"names":[],"mappings":";;;;AAIE,eAAA,CAAA,wsBAAA;AACA,aAAA,CAAA,aAAA,CAAA,sBAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,eAAA,CAAA,yBAAA;;;;"}

package/dist/components/LoginWithAmazonButton/LoginWithAmazonButton.module.scss.js

@@ -1,7 +1,7 @@
 import insertStyle from '../../_virtual/____insertStyle.js';
 
-insertStyle("._loginButton_y5bj1_1 {\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n}\n._loginButton_y5bj1_1 img {\n  width: 156px;\n  height: 32px;\n}");
-var styles = {"loginButton":"_loginButton_y5bj1_1"};
+insertStyle("._loginButton_1aojq_1 {\n  --lwa-outline-width: var(--sizes-xs);\n  --lwa-highlight-color: var(--colors-secondary-blue-light);\n}\n._loginButton_1aojq_1 img {\n  display: block;\n}\n._loginButton_1aojq_1:hover:not(:disabled) {\n  opacity: 0.9;\n}\n._loginButton_1aojq_1:focus-visible {\n  outline: var(--lwa-outline-width) solid var(--lwa-highlight-color);\n}\n._loginButton_1aojq_1:disabled, ._loginButton_1aojq_1:disabled:hover {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n._loginButton_1aojq_1 ._pressed-state_1aojq_18, ._loginButton_1aojq_1:active:not(:disabled) ._default-state_1aojq_18 {\n  display: none;\n}\n._loginButton_1aojq_1:active:not(:disabled) ._pressed-state_1aojq_18 {\n  display: block;\n}");
+var styles = {"loginButton":"_loginButton_1aojq_1","pressed-state":"_pressed-state_1aojq_18","default-state":"_default-state_1aojq_18"};
 
 export { styles as default };
 //# sourceMappingURL=LoginWithAmazonButton.module.scss.js.map

package/dist/components/LoginWithAmazonButton/LoginWithAmazonButton.module.scss.js.map

@@ -1 +1 @@
-{"version":3,"file":"LoginWithAmazonButton.module.scss.js","sources":["../../../src/components/LoginWithAmazonButton/LoginWithAmazonButton.module.scss"],"sourcesContent":[".loginButton {\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n\n  img {\n    width: 156px;\n    height: 32px;\n  }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,uKAAA;AACA,aAAA,CAAA,aAAA,CAAA,sBAAA;;;;"}
+{"version":3,"file":"LoginWithAmazonButton.module.scss.js","sources":["../../../src/components/LoginWithAmazonButton/LoginWithAmazonButton.module.scss"],"sourcesContent":["// Reset (appearance/border/background/padding/cursor) comes from Action's `unstyled` appearance.\n// Image dimensions are set via width/height attributes on the <img> (see RENDERED_SIZE in the\n// component) so the browser reserves space before load.\n.loginButton {\n  --lwa-outline-width: var(--sizes-xs);\n  --lwa-highlight-color: var(--colors-secondary-blue-light);\n\n  img {\n    display: block;\n  }\n\n  // The fill is fixed raster artwork, so a background hover would be invisible;\n  // a slight dim is the treatment Amazon's own LWA guidelines use.\n  &:hover:not(:disabled) {\n    opacity: 0.9;\n  }\n\n  &:focus-visible {\n    outline: var(--lwa-outline-width) solid var(--lwa-highlight-color);\n  }\n\n  // `&:disabled:hover` out-specifies Action's reset `:hover { cursor: pointer }`,\n  // which would otherwise win depending on stylesheet load order.\n  &:disabled,\n  &:disabled:hover {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  .pressed-state,\n  &:active:not(:disabled) .default-state {\n    display: none;\n  }\n\n  &:active:not(:disabled) .pressed-state {\n    display: block;\n  }\n}\n"],"names":["___$insertStyle"],"mappings":";;AAIEA,WAAA,CAAA,wsBAAA;AACA,aAAA,CAAA,aAAA,CAAA,sBAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,eAAA,CAAA,yBAAA;;;;"}

package/dist/components/LoginWithAmazonButton/index.d.ts

@@ -1 +1,2 @@
 export { LoginWithAmazonButton } from './LoginWithAmazonButton';
+export type { LoginWithAmazonButtonProps, LoginWithAmazonButtonSize, LoginWithAmazonButtonVariant, } from './types';

package/dist/components/LoginWithAmazonButton/types.d.ts

@@ -0,0 +1,25 @@
+import type { ActionProps } from '../Action';
+export type LoginWithAmazonButtonVariant = 'gold' | 'darkgray' | 'lightgray';
+export type LoginWithAmazonButtonSize = 'base' | 'sm' | 'xs';
+/**
+ * Built on `Action` with the `unstyled` appearance. The Action props that would fight
+ * the fixed Amazon artwork are removed: `children`/`iconSlot`/`dropdown` (the artwork IS
+ * the content), `href`/`as` (always a `<button>`), Action's own `variant`/`size`/
+ * `appearance` (replaced by the artwork-specific ones below), and `loading` (Action's
+ * spinner is absolutely positioned against `.base`, which `unstyled` does not apply, so
+ * it would render outside the button).
+ */
+export type LoginWithAmazonButtonProps = Omit<ActionProps<'button'>, 'appearance' | 'as' | 'children' | 'dropdown' | 'href' | 'iconSlot' | 'loading' | 'size' | 'variant'> & {
+    /**
+     * Official Amazon button colour. `gold` is Amazon's recommended default;
+     * use `darkgray` on light surfaces and `lightgray` on dark surfaces where
+     * gold lacks contrast. Selects the hardcoded Amazon artwork — not themeable.
+     */
+    variant?: LoginWithAmazonButtonVariant;
+    /**
+     * Button size, selecting both the rendered dimensions and the matching artwork.
+     * `base` (156×32) and `sm` (76×32) are wide badges; `xs` (32×32) is Amazon's
+     * square icon-only mark, so it is a different aspect ratio rather than a smaller badge.
+     */
+    size?: LoginWithAmazonButtonSize;
+};

package/dist/components/Skeleton/Skeleton.cjs

@@ -10,6 +10,17 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
+/**
+ * Skeleton is a shimmering placeholder shown while content is loading, giving a
+ * consistent sense of where content will appear before it arrives. Size it with
+ * `width` and `height` to match the content it stands in for.
+ *
+ * It is intentionally barebones and is hidden from screen readers
+ * (`aria-hidden`). Loading must be communicated to assistive technology at the
+ * container or page level using `aria-busy` and a `ScreenReaderOnly` label.
+ *
+ * @summary loading placeholder for content
+ */
 const Skeleton = ({ width, height, style, className, ...rest }) => {
     return (React__default.default.createElement("div", { "aria-hidden": "true", style: { ...assignCssVars.assignCssVars({ width, height }), ...style }, className: buildClassnames.buildClassnames([Skeleton_module.skeleton, className]), ...rest }));
 };

package/dist/components/Skeleton/Skeleton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.cjs","sources":["../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import React, { HTMLAttributes } from 'react';\n\nimport { buildClassnames } from '../../utils';\nimport { assignCssVars } from '../../utils/assignCssVars';\n\nimport styles from './Skeleton.module.scss';\n\ntype SkeletonProps = HTMLAttributes<HTMLDivElement> & {\n  width?: string;\n  height?: string;\n};\n\nexport const Skeleton = ({ width, height, style, className, ...rest }: SkeletonProps) => {\n  return (\n    <div\n      aria-hidden=\"true\"\n      style={{ ...assignCssVars({ width, height }), ...style }}\n      className={buildClassnames([styles.skeleton, className])}\n      {...rest}\n    />\n  );\n};\n"],"names":["React","assignCssVars","buildClassnames","styles"],"mappings":";;;;;;;;;;;;AAYO,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI,EAAiB,KAAI;AACtF,IAAA,QACEA,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EACc,MAAM,EAClB,KAAK,EAAE,EAAE,GAAGC,2BAAa,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,GAAG,KAAK,EAAE,EACxD,SAAS,EAAEC,+BAAe,CAAC,CAACC,eAAM,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC,KACpD,IAAI,EAAA,CACR;AAEN;;;;"}
+{"version":3,"file":"Skeleton.cjs","sources":["../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import React, { HTMLAttributes } from 'react';\n\nimport { buildClassnames } from '../../utils';\nimport { assignCssVars } from '../../utils/assignCssVars';\n\nimport styles from './Skeleton.module.scss';\n\ntype SkeletonProps = HTMLAttributes<HTMLDivElement> & {\n  /** Width of the placeholder as any CSS length. Defaults to `100%`. */\n  width?: string;\n  /** Height of the placeholder as any CSS length. Defaults to `20px`. */\n  height?: string;\n};\n\n/**\n * Skeleton is a shimmering placeholder shown while content is loading, giving a\n * consistent sense of where content will appear before it arrives. Size it with\n * `width` and `height` to match the content it stands in for.\n *\n * It is intentionally barebones and is hidden from screen readers\n * (`aria-hidden`). Loading must be communicated to assistive technology at the\n * container or page level using `aria-busy` and a `ScreenReaderOnly` label.\n *\n * @summary loading placeholder for content\n */\nexport const Skeleton = ({ width, height, style, className, ...rest }: SkeletonProps) => {\n  return (\n    <div\n      aria-hidden=\"true\"\n      style={{ ...assignCssVars({ width, height }), ...style }}\n      className={buildClassnames([styles.skeleton, className])}\n      {...rest}\n    />\n  );\n};\n"],"names":["React","assignCssVars","buildClassnames","styles"],"mappings":";;;;;;;;;;;;AAcA;;;;;;;;;;AAUG;AACI,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI,EAAiB,KAAI;AACtF,IAAA,QACEA,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EACc,MAAM,EAClB,KAAK,EAAE,EAAE,GAAGC,2BAAa,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,GAAG,KAAK,EAAE,EACxD,SAAS,EAAEC,+BAAe,CAAC,CAACC,eAAM,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC,KACpD,IAAI,EAAA,CACR;AAEN;;;;"}

package/dist/components/Skeleton/Skeleton.d.ts

@@ -1,7 +1,20 @@
 import React, { HTMLAttributes } from 'react';
 type SkeletonProps = HTMLAttributes<HTMLDivElement> & {
+    /** Width of the placeholder as any CSS length. Defaults to `100%`. */
     width?: string;
+    /** Height of the placeholder as any CSS length. Defaults to `20px`. */
     height?: string;
 };
+/**
+ * Skeleton is a shimmering placeholder shown while content is loading, giving a
+ * consistent sense of where content will appear before it arrives. Size it with
+ * `width` and `height` to match the content it stands in for.
+ *
+ * It is intentionally barebones and is hidden from screen readers
+ * (`aria-hidden`). Loading must be communicated to assistive technology at the
+ * container or page level using `aria-busy` and a `ScreenReaderOnly` label.
+ *
+ * @summary loading placeholder for content
+ */
 export declare const Skeleton: ({ width, height, style, className, ...rest }: SkeletonProps) => React.JSX.Element;
 export {};

package/dist/components/Skeleton/Skeleton.js

@@ -4,6 +4,17 @@ import 'uid/secure';
 import { assignCssVars } from '../../utils/assignCssVars.js';
 import styles from './Skeleton.module.scss.js';
 
+/**
+ * Skeleton is a shimmering placeholder shown while content is loading, giving a
+ * consistent sense of where content will appear before it arrives. Size it with
+ * `width` and `height` to match the content it stands in for.
+ *
+ * It is intentionally barebones and is hidden from screen readers
+ * (`aria-hidden`). Loading must be communicated to assistive technology at the
+ * container or page level using `aria-busy` and a `ScreenReaderOnly` label.
+ *
+ * @summary loading placeholder for content
+ */
 const Skeleton = ({ width, height, style, className, ...rest }) => {
     return (React__default.createElement("div", { "aria-hidden": "true", style: { ...assignCssVars({ width, height }), ...style }, className: buildClassnames([styles.skeleton, className]), ...rest }));
 };

package/dist/components/Skeleton/Skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.js","sources":["../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import React, { HTMLAttributes } from 'react';\n\nimport { buildClassnames } from '../../utils';\nimport { assignCssVars } from '../../utils/assignCssVars';\n\nimport styles from './Skeleton.module.scss';\n\ntype SkeletonProps = HTMLAttributes<HTMLDivElement> & {\n  width?: string;\n  height?: string;\n};\n\nexport const Skeleton = ({ width, height, style, className, ...rest }: SkeletonProps) => {\n  return (\n    <div\n      aria-hidden=\"true\"\n      style={{ ...assignCssVars({ width, height }), ...style }}\n      className={buildClassnames([styles.skeleton, className])}\n      {...rest}\n    />\n  );\n};\n"],"names":["React"],"mappings":";;;;;;AAYO,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI,EAAiB,KAAI;AACtF,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EACc,MAAM,EAClB,KAAK,EAAE,EAAE,GAAG,aAAa,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,GAAG,KAAK,EAAE,EACxD,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC,KACpD,IAAI,EAAA,CACR;AAEN;;;;"}
+{"version":3,"file":"Skeleton.js","sources":["../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import React, { HTMLAttributes } from 'react';\n\nimport { buildClassnames } from '../../utils';\nimport { assignCssVars } from '../../utils/assignCssVars';\n\nimport styles from './Skeleton.module.scss';\n\ntype SkeletonProps = HTMLAttributes<HTMLDivElement> & {\n  /** Width of the placeholder as any CSS length. Defaults to `100%`. */\n  width?: string;\n  /** Height of the placeholder as any CSS length. Defaults to `20px`. */\n  height?: string;\n};\n\n/**\n * Skeleton is a shimmering placeholder shown while content is loading, giving a\n * consistent sense of where content will appear before it arrives. Size it with\n * `width` and `height` to match the content it stands in for.\n *\n * It is intentionally barebones and is hidden from screen readers\n * (`aria-hidden`). Loading must be communicated to assistive technology at the\n * container or page level using `aria-busy` and a `ScreenReaderOnly` label.\n *\n * @summary loading placeholder for content\n */\nexport const Skeleton = ({ width, height, style, className, ...rest }: SkeletonProps) => {\n  return (\n    <div\n      aria-hidden=\"true\"\n      style={{ ...assignCssVars({ width, height }), ...style }}\n      className={buildClassnames([styles.skeleton, className])}\n      {...rest}\n    />\n  );\n};\n"],"names":["React"],"mappings":";;;;;;AAcA;;;;;;;;;;AAUG;AACI,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI,EAAiB,KAAI;AACtF,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EACc,MAAM,EAClB,KAAK,EAAE,EAAE,GAAG,aAAa,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,GAAG,KAAK,EAAE,EACxD,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC,KACpD,IAAI,EAAA,CACR;AAEN;;;;"}

package/dist/components/index.d.ts

@@ -7,6 +7,8 @@ export type { AlertVariants, MiniAlertVariants } from './Alerts/types';
 export { Anchor, isAnchorUrl, isRelativeUrl, createContextAwareUrl, addPrefixToUrl, shouldAddPrefix, } from './Anchor';
 export { AnimatedDropdown } from './AnimatedDropdown';
 export { Avatar } from './Avatar';
+export type { AvatarProps } from './Avatar';
+export { AvatarSize } from './Avatar';
 export { IconGroup } from './IconGroup';
 export { Badge } from './Badge';
 export { Banner } from './Banner';
@@ -39,7 +41,7 @@ export { InputAffix } from './InputAffix';
 export { InputGroup, type InputGroupProps } from './InputGroup';
 export { LegacyDataTable } from './LegacyDataTable';
 export { Loader } from './Loader';
-export { LoginWithAmazonButton } from './LoginWithAmazonButton';
+export { LoginWithAmazonButton, type LoginWithAmazonButtonProps, type LoginWithAmazonButtonSize, type LoginWithAmazonButtonVariant, } from './LoginWithAmazonButton';
 export { Modal, type Action as ModalAction, type ModalProps } from './Modal';
 export { Pagination } from './Pagination';
 export { Popover } from './Popover';

package/dist/index.cjs

@@ -9,6 +9,7 @@ var Anchor = require('./components/Anchor/Anchor.cjs');
 var urlUtils = require('./components/Anchor/utils/urlUtils.cjs');
 var AnimatedDropdown = require('./components/AnimatedDropdown/AnimatedDropdown.cjs');
 var Avatar = require('./components/Avatar/Avatar.cjs');
+var types = require('./components/Avatar/types.cjs');
 var IconGroup = require('./components/IconGroup/IconGroup.cjs');
 var Badge = require('./components/Badge/Badge.cjs');
 var Banner = require('./components/Banner/Banner.cjs');
@@ -419,6 +420,10 @@ exports.isRelativeUrl = urlUtils.isRelativeUrl;
 exports.shouldAddPrefix = urlUtils.shouldAddPrefix;
 exports.AnimatedDropdown = AnimatedDropdown.AnimatedDropdown;
 exports.Avatar = Avatar.Avatar;
+Object.defineProperty(exports, "AvatarSize", {
+	enumerable: true,
+	get: function () { return types.AvatarSize; }
+});
 exports.IconGroup = IconGroup.IconGroup;
 exports.Badge = Badge.Badge;
 exports.Banner = Banner.Banner;

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.js

@@ -7,6 +7,7 @@ export { Anchor } from './components/Anchor/Anchor.js';
 export { addPrefixToUrl, createContextAwareUrl, isAnchorUrl, isRelativeUrl, shouldAddPrefix } from './components/Anchor/utils/urlUtils.js';
 export { AnimatedDropdown } from './components/AnimatedDropdown/AnimatedDropdown.js';
 export { Avatar } from './components/Avatar/Avatar.js';
+export { AvatarSize } from './components/Avatar/types.js';
 export { IconGroup } from './components/IconGroup/IconGroup.js';
 export { Badge } from './components/Badge/Badge.js';
 export { Banner } from './components/Banner/Banner.js';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veeqo/ui",
-  "version": "16.1.0",
+  "version": "16.3.0",
   "description": "New optimised component library for Veeqo.",
   "author": "Robert Wealthall",
   "license": "ISC",