@veeqo/ui 16.2.0 → 16.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (35) hide show
  1. package/dist/components/Avatar/Avatar.cjs +9 -2
  2. package/dist/components/Avatar/Avatar.cjs.map +1 -1
  3. package/dist/components/Avatar/Avatar.d.ts +8 -1
  4. package/dist/components/Avatar/Avatar.js +9 -2
  5. package/dist/components/Avatar/Avatar.js.map +1 -1
  6. package/dist/components/Avatar/Avatar.module.scss.cjs +2 -2
  7. package/dist/components/Avatar/Avatar.module.scss.cjs.map +1 -1
  8. package/dist/components/Avatar/Avatar.module.scss.js +2 -2
  9. package/dist/components/Avatar/Avatar.module.scss.js.map +1 -1
  10. package/dist/components/Avatar/index.d.ts +2 -0
  11. package/dist/components/Avatar/types.cjs +10 -0
  12. package/dist/components/Avatar/types.cjs.map +1 -0
  13. package/dist/components/Avatar/types.d.ts +8 -0
  14. package/dist/components/Avatar/types.js +10 -0
  15. package/dist/components/Avatar/types.js.map +1 -0
  16. package/dist/components/FilterTag/FilterTag.module.scss.cjs +2 -2
  17. package/dist/components/FilterTag/FilterTag.module.scss.cjs.map +1 -1
  18. package/dist/components/FilterTag/FilterTag.module.scss.js +2 -2
  19. package/dist/components/FilterTag/FilterTag.module.scss.js.map +1 -1
  20. package/dist/components/FilterTag/index.d.ts +1 -0
  21. package/dist/components/FilterTag/types.d.ts +4 -0
  22. package/dist/components/IconGroup/IconGroup.cjs +1 -0
  23. package/dist/components/IconGroup/IconGroup.cjs.map +1 -1
  24. package/dist/components/IconGroup/IconGroup.js +1 -0
  25. package/dist/components/IconGroup/IconGroup.js.map +1 -1
  26. package/dist/components/Tag/Tag.cjs.map +1 -1
  27. package/dist/components/Tag/Tag.d.ts +1 -2
  28. package/dist/components/Tag/Tag.js.map +1 -1
  29. package/dist/components/Tag/index.d.ts +1 -0
  30. package/dist/components/index.d.ts +4 -0
  31. package/dist/index.cjs +5 -0
  32. package/dist/index.cjs.map +1 -1
  33. package/dist/index.js +1 -0
  34. package/dist/index.js.map +1 -1
  35. package/package.json +1 -1
@@ -20,12 +20,19 @@ const textVariantMapping = {
20
20
  xl: 'headingSmall',
21
21
  xxl: 'headingMedium',
22
22
  };
23
- const Avatar = ({ size = 'lg', name, bgColor, textColor, iconSlot, imageUrl, hasIndicator = false, ariaLabel = `Avatar of ${name}`, className, style, }) => {
23
+ /**
24
+ * Avatar displays a user's initials, photo, or an icon inside a circular frame,
25
+ * with an optional error indicator.
26
+ *
27
+ * Initials are derived from `name`. Provide `imageUrl` to render a photo or
28
+ * `iconSlot` to render an icon instead — otherwise the initials are shown.
29
+ */
30
+ const Avatar = ({ size = 'lg', name, bgColor, textColor, iconSlot, imageUrl, hasIndicator = false, ariaLabel = `Avatar of ${name}`, className, style, ...rest }) => {
24
31
  var _a, _b;
25
32
  const textVariant = textVariantMapping[size];
26
33
  // Check if name contains any letters if so we show initials from text.
27
34
  const hasLetters = /[a-zA-Z]/.test(name || '');
28
- return (React__default.default.createElement(FlexRow.FlexRow, { justifyContent: "center", className: buildClassnames.buildClassnames([Avatar_module.avatar, Avatar_module[`${size}-size`], className]), style: {
35
+ return (React__default.default.createElement(FlexRow.FlexRow, { justifyContent: "center", ...rest, className: buildClassnames.buildClassnames([Avatar_module.avatar, Avatar_module[`${size}-size`], className]), style: {
29
36
  ...style,
30
37
  ...assignCssVars.assignCssVars({
31
38
  avatarBgColor: iconSlot ? index.theme.colors.neutral.grey.lightest : bgColor,
@@ -1 +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;;;;"}
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, 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;;;;"}
@@ -1,3 +1,10 @@
1
1
  import React from 'react';
2
2
  import { AvatarProps } from './types';
3
- export declare const Avatar: ({ size, name, bgColor, textColor, iconSlot, imageUrl, hasIndicator, ariaLabel, className, style, }: AvatarProps) => React.JSX.Element;
3
+ /**
4
+ * Avatar displays a user's initials, photo, or an icon inside a circular frame,
5
+ * with an optional error indicator.
6
+ *
7
+ * Initials are derived from `name`. Provide `imageUrl` to render a photo or
8
+ * `iconSlot` to render an icon instead — otherwise the initials are shown.
9
+ */
10
+ export declare const Avatar: ({ size, name, bgColor, textColor, iconSlot, imageUrl, hasIndicator, ariaLabel, className, style, ...rest }: AvatarProps) => React.JSX.Element;
@@ -14,12 +14,19 @@ const textVariantMapping = {
14
14
  xl: 'headingSmall',
15
15
  xxl: 'headingMedium',
16
16
  };
17
- const Avatar = ({ size = 'lg', name, bgColor, textColor, iconSlot, imageUrl, hasIndicator = false, ariaLabel = `Avatar of ${name}`, className, style, }) => {
17
+ /**
18
+ * Avatar displays a user's initials, photo, or an icon inside a circular frame,
19
+ * with an optional error indicator.
20
+ *
21
+ * Initials are derived from `name`. Provide `imageUrl` to render a photo or
22
+ * `iconSlot` to render an icon instead — otherwise the initials are shown.
23
+ */
24
+ const Avatar = ({ size = 'lg', name, bgColor, textColor, iconSlot, imageUrl, hasIndicator = false, ariaLabel = `Avatar of ${name}`, className, style, ...rest }) => {
18
25
  var _a, _b;
19
26
  const textVariant = textVariantMapping[size];
20
27
  // Check if name contains any letters if so we show initials from text.
21
28
  const hasLetters = /[a-zA-Z]/.test(name || '');
22
- return (React__default.createElement(FlexRow, { justifyContent: "center", className: buildClassnames([styles.avatar, styles[`${size}-size`], className]), style: {
29
+ return (React__default.createElement(FlexRow, { justifyContent: "center", ...rest, className: buildClassnames([styles.avatar, styles[`${size}-size`], className]), style: {
23
30
  ...style,
24
31
  ...assignCssVars({
25
32
  avatarBgColor: iconSlot ? theme.colors.neutral.grey.lightest : bgColor,
@@ -1 +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;;;;"}
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, 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;;;;"}
@@ -2,8 +2,8 @@
2
2
 
3
3
  var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
4
4
 
5
- ___$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}");
6
- 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"};
5
+ ___$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}");
6
+ 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"};
7
7
 
8
8
  module.exports = styles;
9
9
  //# sourceMappingURL=Avatar.module.scss.cjs.map
@@ -1 +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;;;;"}
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, 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;;;;"}
@@ -1,7 +1,7 @@
1
1
  import insertStyle from '../../_virtual/____insertStyle.js';
2
2
 
3
- 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}");
4
- 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"};
3
+ 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}");
4
+ 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"};
5
5
 
6
6
  export { styles as default };
7
7
  //# sourceMappingURL=Avatar.module.scss.js.map
@@ -1 +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;;;;"}
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, 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;;;;"}
@@ -1 +1,3 @@
1
1
  export { Avatar } from './Avatar';
2
+ export type { AvatarProps } from './types';
3
+ export { AvatarSize } from './types';
@@ -0,0 +1,10 @@
1
+ 'use strict';
2
+
3
+ exports.AvatarSize = void 0;
4
+ (function (AvatarSize) {
5
+ AvatarSize["md"] = "md";
6
+ AvatarSize["lg"] = "lg";
7
+ AvatarSize["xl"] = "xl";
8
+ AvatarSize["xxl"] = "xxl";
9
+ })(exports.AvatarSize || (exports.AvatarSize = {}));
10
+ //# sourceMappingURL=types.cjs.map
@@ -0,0 +1 @@
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;;"}
@@ -6,12 +6,20 @@ export declare enum AvatarSize {
6
6
  xxl = "xxl"
7
7
  }
8
8
  export type AvatarProps = React.HTMLAttributes<HTMLDivElement> & {
9
+ /** Full name used to derive initials and the default accessible label. */
9
10
  name: string;
11
+ /** Overall dimension of the avatar. @default 'lg' */
10
12
  size?: keyof typeof AvatarSize;
13
+ /** Background colour of the circle. Ignored when `iconSlot` is set. */
11
14
  bgColor?: string;
15
+ /** Colour of the initials text. */
12
16
  textColor?: string;
17
+ /** Icon rendered in place of initials (e.g. a channel or brand mark). */
13
18
  iconSlot?: React.ReactNode;
19
+ /** Image URL rendered in place of initials. */
14
20
  imageUrl?: string;
21
+ /** Accessible label for the avatar. @default `Avatar of ${name}` */
15
22
  ariaLabel?: string;
23
+ /** Shows a red error indicator on the avatar. @default false */
16
24
  hasIndicator?: boolean;
17
25
  };
@@ -0,0 +1,10 @@
1
+ var AvatarSize;
2
+ (function (AvatarSize) {
3
+ AvatarSize["md"] = "md";
4
+ AvatarSize["lg"] = "lg";
5
+ AvatarSize["xl"] = "xl";
6
+ AvatarSize["xxl"] = "xxl";
7
+ })(AvatarSize || (AvatarSize = {}));
8
+
9
+ export { AvatarSize };
10
+ //# sourceMappingURL=types.js.map
@@ -0,0 +1 @@
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;;;;"}
@@ -2,8 +2,8 @@
2
2
 
3
3
  var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
4
4
 
5
- ___$insertStyle("._container_1g0hs_1 {\n display: inline-flex;\n flex-direction: row;\n align-items: center;\n background-color: var(--colors-neutral-grey-base);\n padding: var(--sizes-xs) var(--sizes-sm);\n cursor: pointer;\n border: 1px solid var(--colors-neutral-grey-dark);\n border-radius: var(--radius-base);\n}\n._container_1g0hs_1 svg {\n width: var(--sizes-base);\n height: var(--sizes-base);\n}\n._container_1g0hs_1:focus {\n outline: none;\n box-shadow: 0 0 0 2px var(--colors-secondary-blue-light);\n}\n\n._groupLabel_1g0hs_20 {\n margin-right: var(--sizes-xs);\n}\n\n._mainIcon_1g0hs_24 {\n margin-left: var(--sizes-xs);\n transform: rotate(0);\n width: 10px;\n height: 10px;\n}\n\n._rotated_1g0hs_31 {\n transform: rotate(180deg);\n}\n\n._crossIcon_1g0hs_35 {\n margin-left: var(--sizes-xs);\n height: 10px;\n width: 10px;\n}\n\n._content_1g0hs_41 {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: stretch;\n}\n\n._header_1g0hs_48 {\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n padding: var(--sizes-3) 18px;\n border-bottom: 1px solid var(--colors-neutral-grey-base);\n}\n._header_1g0hs_48 svg {\n color: var(--header-color);\n width: var(--sizes-5);\n height: var(--sizes-5);\n margin-right: 10px;\n}");
6
- var styles = {"container":"_container_1g0hs_1","groupLabel":"_groupLabel_1g0hs_20","mainIcon":"_mainIcon_1g0hs_24","rotated":"_rotated_1g0hs_31","crossIcon":"_crossIcon_1g0hs_35","content":"_content_1g0hs_41","header":"_header_1g0hs_48"};
5
+ ___$insertStyle("._container_1q3sh_1 {\n display: inline-flex;\n flex-direction: row;\n align-items: center;\n background-color: var(--colors-neutral-grey-base);\n padding: var(--sizes-xs) var(--sizes-sm);\n cursor: pointer;\n border: var(--sizes-line) solid var(--colors-neutral-grey-dark);\n border-radius: var(--radius-base);\n}\n._container_1q3sh_1 svg {\n width: var(--sizes-base);\n height: var(--sizes-base);\n}\n._container_1q3sh_1:hover {\n background-color: var(--colors-neutral-grey-light);\n}\n._container_1q3sh_1:focus-visible {\n outline: var(--sizes-xs) solid var(--colors-secondary-blue-light);\n}\n._container_1q3sh_1:active {\n background-color: var(--colors-neutral-grey-light);\n border-color: var(--colors-secondary-blue-base);\n outline: var(--sizes-xs) solid var(--colors-secondary-blue-light);\n}\n\n._groupLabel_1q3sh_27 {\n margin-right: var(--sizes-xs);\n}\n\n._mainIcon_1q3sh_31 {\n margin-left: var(--sizes-xs);\n transform: rotate(0);\n width: 10px;\n height: 10px;\n}\n\n._rotated_1q3sh_38 {\n transform: rotate(180deg);\n}\n\n._crossIcon_1q3sh_42 {\n margin-left: var(--sizes-xs);\n height: 10px;\n width: 10px;\n}\n\n._content_1q3sh_48 {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: stretch;\n}\n\n._header_1q3sh_55 {\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n padding: var(--sizes-3) 18px;\n border-bottom: var(--sizes-line) solid var(--colors-neutral-grey-base);\n}\n._header_1q3sh_55 svg {\n color: var(--header-color);\n width: var(--sizes-5);\n height: var(--sizes-5);\n margin-right: 10px;\n}");
6
+ var styles = {"container":"_container_1q3sh_1","groupLabel":"_groupLabel_1q3sh_27","mainIcon":"_mainIcon_1q3sh_31","rotated":"_rotated_1q3sh_38","crossIcon":"_crossIcon_1q3sh_42","content":"_content_1q3sh_48","header":"_header_1q3sh_55"};
7
7
 
8
8
  module.exports = styles;
9
9
  //# sourceMappingURL=FilterTag.module.scss.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"FilterTag.module.scss.cjs","sources":["../../../src/components/FilterTag/FilterTag.module.scss"],"sourcesContent":[".container {\n display: inline-flex;\n flex-direction: row;\n align-items: center;\n background-color: var(--colors-neutral-grey-base);\n padding: var(--sizes-xs) var(--sizes-sm);\n cursor: pointer;\n\n border: 1px solid var(--colors-neutral-grey-dark);\n border-radius: var(--radius-base);\n\n svg {\n width: var(--sizes-base);\n height: var(--sizes-base);\n }\n\n &:focus {\n outline: none;\n box-shadow: 0 0 0 2px var(--colors-secondary-blue-light);\n }\n}\n\n.groupLabel {\n margin-right: var(--sizes-xs);\n}\n\n.mainIcon {\n margin-left: var(--sizes-xs);\n transform: rotate(0);\n\n width: 10px;\n height: 10px;\n}\n\n.rotated {\n transform: rotate(180deg);\n}\n\n.crossIcon {\n margin-left: var(--sizes-xs);\n height: 10px;\n width: 10px;\n}\n\n.content {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: stretch;\n}\n\n.header {\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n padding: var(--sizes-3) 18px;\n border-bottom: 1px solid var(--colors-neutral-grey-base);\n\n svg {\n color: var(--header-color);\n width: var(--sizes-5);\n height: var(--sizes-5);\n margin-right: 10px;\n }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,+yCAAA;AACA,aAAA,CAAA,WAAA,CAAA,oBAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,WAAA,CAAA,qBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,QAAA,CAAA,kBAAA;;;;"}
1
+ {"version":3,"file":"FilterTag.module.scss.cjs","sources":["../../../src/components/FilterTag/FilterTag.module.scss"],"sourcesContent":[".container {\n display: inline-flex;\n flex-direction: row;\n align-items: center;\n background-color: var(--colors-neutral-grey-base);\n padding: var(--sizes-xs) var(--sizes-sm);\n cursor: pointer;\n\n border: var(--sizes-line) solid var(--colors-neutral-grey-dark);\n border-radius: var(--radius-base);\n\n svg {\n width: var(--sizes-base);\n height: var(--sizes-base);\n }\n\n // Pseudo-states mirror the Action component: lighten on hover, blue outline on\n // focus-visible, and a darker border + outline while active.\n &:hover {\n background-color: var(--colors-neutral-grey-light);\n }\n\n &:focus-visible {\n outline: var(--sizes-xs) solid var(--colors-secondary-blue-light);\n }\n\n &:active {\n background-color: var(--colors-neutral-grey-light);\n border-color: var(--colors-secondary-blue-base);\n outline: var(--sizes-xs) solid var(--colors-secondary-blue-light);\n }\n}\n\n.groupLabel {\n margin-right: var(--sizes-xs);\n}\n\n// Chip glyphs use a fixed 10px size — a bespoke dimension with no matching token.\n.mainIcon {\n margin-left: var(--sizes-xs);\n transform: rotate(0);\n\n width: 10px;\n height: 10px;\n}\n\n.rotated {\n transform: rotate(180deg);\n}\n\n.crossIcon {\n margin-left: var(--sizes-xs);\n height: 10px;\n width: 10px;\n}\n\n.content {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: stretch;\n}\n\n.header {\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n padding: var(--sizes-3) 18px;\n border-bottom: var(--sizes-line) solid var(--colors-neutral-grey-base);\n\n svg {\n color: var(--header-color);\n width: var(--sizes-5);\n height: var(--sizes-5);\n margin-right: 10px;\n }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,mnDAAA;AACA,aAAA,CAAA,WAAA,CAAA,oBAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,WAAA,CAAA,qBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,QAAA,CAAA,kBAAA;;;;"}
@@ -1,7 +1,7 @@
1
1
  import insertStyle from '../../_virtual/____insertStyle.js';
2
2
 
3
- insertStyle("._container_1g0hs_1 {\n display: inline-flex;\n flex-direction: row;\n align-items: center;\n background-color: var(--colors-neutral-grey-base);\n padding: var(--sizes-xs) var(--sizes-sm);\n cursor: pointer;\n border: 1px solid var(--colors-neutral-grey-dark);\n border-radius: var(--radius-base);\n}\n._container_1g0hs_1 svg {\n width: var(--sizes-base);\n height: var(--sizes-base);\n}\n._container_1g0hs_1:focus {\n outline: none;\n box-shadow: 0 0 0 2px var(--colors-secondary-blue-light);\n}\n\n._groupLabel_1g0hs_20 {\n margin-right: var(--sizes-xs);\n}\n\n._mainIcon_1g0hs_24 {\n margin-left: var(--sizes-xs);\n transform: rotate(0);\n width: 10px;\n height: 10px;\n}\n\n._rotated_1g0hs_31 {\n transform: rotate(180deg);\n}\n\n._crossIcon_1g0hs_35 {\n margin-left: var(--sizes-xs);\n height: 10px;\n width: 10px;\n}\n\n._content_1g0hs_41 {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: stretch;\n}\n\n._header_1g0hs_48 {\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n padding: var(--sizes-3) 18px;\n border-bottom: 1px solid var(--colors-neutral-grey-base);\n}\n._header_1g0hs_48 svg {\n color: var(--header-color);\n width: var(--sizes-5);\n height: var(--sizes-5);\n margin-right: 10px;\n}");
4
- var styles = {"container":"_container_1g0hs_1","groupLabel":"_groupLabel_1g0hs_20","mainIcon":"_mainIcon_1g0hs_24","rotated":"_rotated_1g0hs_31","crossIcon":"_crossIcon_1g0hs_35","content":"_content_1g0hs_41","header":"_header_1g0hs_48"};
3
+ insertStyle("._container_1q3sh_1 {\n display: inline-flex;\n flex-direction: row;\n align-items: center;\n background-color: var(--colors-neutral-grey-base);\n padding: var(--sizes-xs) var(--sizes-sm);\n cursor: pointer;\n border: var(--sizes-line) solid var(--colors-neutral-grey-dark);\n border-radius: var(--radius-base);\n}\n._container_1q3sh_1 svg {\n width: var(--sizes-base);\n height: var(--sizes-base);\n}\n._container_1q3sh_1:hover {\n background-color: var(--colors-neutral-grey-light);\n}\n._container_1q3sh_1:focus-visible {\n outline: var(--sizes-xs) solid var(--colors-secondary-blue-light);\n}\n._container_1q3sh_1:active {\n background-color: var(--colors-neutral-grey-light);\n border-color: var(--colors-secondary-blue-base);\n outline: var(--sizes-xs) solid var(--colors-secondary-blue-light);\n}\n\n._groupLabel_1q3sh_27 {\n margin-right: var(--sizes-xs);\n}\n\n._mainIcon_1q3sh_31 {\n margin-left: var(--sizes-xs);\n transform: rotate(0);\n width: 10px;\n height: 10px;\n}\n\n._rotated_1q3sh_38 {\n transform: rotate(180deg);\n}\n\n._crossIcon_1q3sh_42 {\n margin-left: var(--sizes-xs);\n height: 10px;\n width: 10px;\n}\n\n._content_1q3sh_48 {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: stretch;\n}\n\n._header_1q3sh_55 {\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n padding: var(--sizes-3) 18px;\n border-bottom: var(--sizes-line) solid var(--colors-neutral-grey-base);\n}\n._header_1q3sh_55 svg {\n color: var(--header-color);\n width: var(--sizes-5);\n height: var(--sizes-5);\n margin-right: 10px;\n}");
4
+ var styles = {"container":"_container_1q3sh_1","groupLabel":"_groupLabel_1q3sh_27","mainIcon":"_mainIcon_1q3sh_31","rotated":"_rotated_1q3sh_38","crossIcon":"_crossIcon_1q3sh_42","content":"_content_1q3sh_48","header":"_header_1q3sh_55"};
5
5
 
6
6
  export { styles as default };
7
7
  //# sourceMappingURL=FilterTag.module.scss.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"FilterTag.module.scss.js","sources":["../../../src/components/FilterTag/FilterTag.module.scss"],"sourcesContent":[".container {\n display: inline-flex;\n flex-direction: row;\n align-items: center;\n background-color: var(--colors-neutral-grey-base);\n padding: var(--sizes-xs) var(--sizes-sm);\n cursor: pointer;\n\n border: 1px solid var(--colors-neutral-grey-dark);\n border-radius: var(--radius-base);\n\n svg {\n width: var(--sizes-base);\n height: var(--sizes-base);\n }\n\n &:focus {\n outline: none;\n box-shadow: 0 0 0 2px var(--colors-secondary-blue-light);\n }\n}\n\n.groupLabel {\n margin-right: var(--sizes-xs);\n}\n\n.mainIcon {\n margin-left: var(--sizes-xs);\n transform: rotate(0);\n\n width: 10px;\n height: 10px;\n}\n\n.rotated {\n transform: rotate(180deg);\n}\n\n.crossIcon {\n margin-left: var(--sizes-xs);\n height: 10px;\n width: 10px;\n}\n\n.content {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: stretch;\n}\n\n.header {\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n padding: var(--sizes-3) 18px;\n border-bottom: 1px solid var(--colors-neutral-grey-base);\n\n svg {\n color: var(--header-color);\n width: var(--sizes-5);\n height: var(--sizes-5);\n margin-right: 10px;\n }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,+yCAAA;AACA,aAAA,CAAA,WAAA,CAAA,oBAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,WAAA,CAAA,qBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,QAAA,CAAA,kBAAA;;;;"}
1
+ {"version":3,"file":"FilterTag.module.scss.js","sources":["../../../src/components/FilterTag/FilterTag.module.scss"],"sourcesContent":[".container {\n display: inline-flex;\n flex-direction: row;\n align-items: center;\n background-color: var(--colors-neutral-grey-base);\n padding: var(--sizes-xs) var(--sizes-sm);\n cursor: pointer;\n\n border: var(--sizes-line) solid var(--colors-neutral-grey-dark);\n border-radius: var(--radius-base);\n\n svg {\n width: var(--sizes-base);\n height: var(--sizes-base);\n }\n\n // Pseudo-states mirror the Action component: lighten on hover, blue outline on\n // focus-visible, and a darker border + outline while active.\n &:hover {\n background-color: var(--colors-neutral-grey-light);\n }\n\n &:focus-visible {\n outline: var(--sizes-xs) solid var(--colors-secondary-blue-light);\n }\n\n &:active {\n background-color: var(--colors-neutral-grey-light);\n border-color: var(--colors-secondary-blue-base);\n outline: var(--sizes-xs) solid var(--colors-secondary-blue-light);\n }\n}\n\n.groupLabel {\n margin-right: var(--sizes-xs);\n}\n\n// Chip glyphs use a fixed 10px size — a bespoke dimension with no matching token.\n.mainIcon {\n margin-left: var(--sizes-xs);\n transform: rotate(0);\n\n width: 10px;\n height: 10px;\n}\n\n.rotated {\n transform: rotate(180deg);\n}\n\n.crossIcon {\n margin-left: var(--sizes-xs);\n height: 10px;\n width: 10px;\n}\n\n.content {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: stretch;\n}\n\n.header {\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n padding: var(--sizes-3) 18px;\n border-bottom: var(--sizes-line) solid var(--colors-neutral-grey-base);\n\n svg {\n color: var(--header-color);\n width: var(--sizes-5);\n height: var(--sizes-5);\n margin-right: 10px;\n }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,mnDAAA;AACA,aAAA,CAAA,WAAA,CAAA,oBAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,WAAA,CAAA,qBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,QAAA,CAAA,kBAAA;;;;"}
@@ -1 +1,2 @@
1
1
  export { FilterTag } from './FilterTag';
2
+ export type { FilterTagProps } from './types';
@@ -1,6 +1,8 @@
1
1
  import { ReactNode, ReactElement } from 'react';
2
2
  export interface FilterTagProps {
3
+ /** Prefix for hook class names emitted on the chip and dropdown DOM. */
3
4
  className?: string;
5
+ /** Prefix for hook class names (test selectors) emitted on the chip and dropdown DOM. */
4
6
  e2eClassName?: string;
5
7
  iconSlot?: ReactElement;
6
8
  label?: string;
@@ -9,7 +11,9 @@ export interface FilterTagProps {
9
11
  content?: ReactNode;
10
12
  footer?: ReactNode;
11
13
  header?: ReactNode;
14
+ /** Called when an open dropdown is dismissed: `(event, closeDropdown)` on an outside press, or `(event)` only when the trigger closes it. Not called on Escape. */
12
15
  onClickAway?: (event: Event, closeDropdown?: () => void) => void;
16
+ /** Handler for the simple chip only (no `content`). */
13
17
  onClick?: () => void;
14
18
  shouldCloseOnClickAway?: boolean;
15
19
  }
@@ -2,6 +2,7 @@
2
2
 
3
3
  var React = require('react');
4
4
  var Avatar = require('../Avatar/Avatar.cjs');
5
+ require('../Avatar/types.cjs');
5
6
  var index = require('../../theme/index.cjs');
6
7
  var buildClassnames = require('../../utils/buildClassnames.cjs');
7
8
  require('uid/secure');
@@ -1 +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;;;;"}
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;;;;"}
@@ -1,5 +1,6 @@
1
1
  import React__default from 'react';
2
2
  import { Avatar } from '../Avatar/Avatar.js';
3
+ import '../Avatar/types.js';
3
4
  import { theme } from '../../theme/index.js';
4
5
  import { buildClassnames } from '../../utils/buildClassnames.js';
5
6
  import 'uid/secure';
@@ -1 +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;;;;"}
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;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"Tag.cjs","sources":["../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import React from 'react';\n\nimport { theme } from 'Theme';\nimport { assignCssVars, buildClassnames } from '../../utils';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { FlexProps } from '../Flex/types';\nimport { Text } from '../Text';\n\nimport styles from './Tag.module.scss';\n\ntype TagProps = Omit<FlexProps, 'color'> & {\n backgroundColor?: string;\n textColor?: string;\n label?: string;\n compact?: boolean;\n leftIconSlot?: React.ReactNode;\n rightIconSlot?: React.ReactNode;\n};\n\nexport const Tag = ({\n className,\n backgroundColor = theme.colors.neutral.grey.base,\n textColor,\n children,\n label,\n compact = false,\n leftIconSlot,\n rightIconSlot,\n ...otherProps\n}: TagProps) => (\n <FlexRow\n flexWrap=\"nowrap\"\n justifyContent=\"center\"\n gap=\"xs\"\n className={buildClassnames([styles.tag, compact && styles.compact, className])}\n style={{ ...assignCssVars({ customTextColor: textColor }), backgroundColor }}\n {...otherProps}\n >\n {leftIconSlot}\n {children || <Text variant=\"body\">{label}</Text>}\n {rightIconSlot}\n </FlexRow>\n);\n"],"names":["theme","React","FlexRow","buildClassnames","styles","assignCssVars","Text"],"mappings":";;;;;;;;;;;;;;;AAmBO,MAAM,GAAG,GAAG,CAAC,EAClB,SAAS,EACT,eAAe,GAAGA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAChD,SAAS,EACT,QAAQ,EACR,KAAK,EACL,OAAO,GAAG,KAAK,EACf,YAAY,EACZ,aAAa,EACb,GAAG,UAAU,EACJ,MACTC,sBAAA,CAAA,aAAA,CAACC,eAAO,EAAA,EACN,QAAQ,EAAC,QAAQ,EACjB,cAAc,EAAC,QAAQ,EACvB,GAAG,EAAC,IAAI,EACR,SAAS,EAAEC,+BAAe,CAAC,CAACC,UAAM,CAAC,GAAG,EAAE,OAAO,IAAIA,UAAM,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,EAC9E,KAAK,EAAE,EAAE,GAAGC,2BAAa,CAAC,EAAE,eAAe,EAAE,SAAS,EAAE,CAAC,EAAE,eAAe,EAAE,KACxE,UAAU,EAAA;IAEb,YAAY;IACZ,QAAQ,IAAIJ,qCAACK,SAAI,EAAA,EAAC,OAAO,EAAC,MAAM,EAAA,EAAE,KAAK,CAAQ;IAC/C,aAAa,CACN;;;;"}
1
+ {"version":3,"file":"Tag.cjs","sources":["../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import React from 'react';\n\nimport { theme } from 'Theme';\nimport { assignCssVars, buildClassnames } from '../../utils';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { FlexProps } from '../Flex/types';\nimport { Text } from '../Text';\n\nimport styles from './Tag.module.scss';\n\nexport type TagProps = Omit<FlexProps, 'color'> & {\n backgroundColor?: string;\n textColor?: string;\n label?: string;\n compact?: boolean;\n leftIconSlot?: React.ReactNode;\n rightIconSlot?: React.ReactNode;\n};\n\nexport const Tag = ({\n className,\n backgroundColor = theme.colors.neutral.grey.base,\n textColor,\n children,\n label,\n compact = false,\n leftIconSlot,\n rightIconSlot,\n ...otherProps\n}: TagProps) => (\n <FlexRow\n flexWrap=\"nowrap\"\n justifyContent=\"center\"\n gap=\"xs\"\n className={buildClassnames([styles.tag, compact && styles.compact, className])}\n style={{ ...assignCssVars({ customTextColor: textColor }), backgroundColor }}\n {...otherProps}\n >\n {leftIconSlot}\n {children || <Text variant=\"body\">{label}</Text>}\n {rightIconSlot}\n </FlexRow>\n);\n"],"names":["theme","React","FlexRow","buildClassnames","styles","assignCssVars","Text"],"mappings":";;;;;;;;;;;;;;;AAmBO,MAAM,GAAG,GAAG,CAAC,EAClB,SAAS,EACT,eAAe,GAAGA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAChD,SAAS,EACT,QAAQ,EACR,KAAK,EACL,OAAO,GAAG,KAAK,EACf,YAAY,EACZ,aAAa,EACb,GAAG,UAAU,EACJ,MACTC,sBAAA,CAAA,aAAA,CAACC,eAAO,EAAA,EACN,QAAQ,EAAC,QAAQ,EACjB,cAAc,EAAC,QAAQ,EACvB,GAAG,EAAC,IAAI,EACR,SAAS,EAAEC,+BAAe,CAAC,CAACC,UAAM,CAAC,GAAG,EAAE,OAAO,IAAIA,UAAM,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,EAC9E,KAAK,EAAE,EAAE,GAAGC,2BAAa,CAAC,EAAE,eAAe,EAAE,SAAS,EAAE,CAAC,EAAE,eAAe,EAAE,KACxE,UAAU,EAAA;IAEb,YAAY;IACZ,QAAQ,IAAIJ,qCAACK,SAAI,EAAA,EAAC,OAAO,EAAC,MAAM,EAAA,EAAE,KAAK,CAAQ;IAC/C,aAAa,CACN;;;;"}
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
  import { FlexProps } from '../Flex/types';
3
- type TagProps = Omit<FlexProps, 'color'> & {
3
+ export type TagProps = Omit<FlexProps, 'color'> & {
4
4
  backgroundColor?: string;
5
5
  textColor?: string;
6
6
  label?: string;
@@ -9,4 +9,3 @@ type TagProps = Omit<FlexProps, 'color'> & {
9
9
  rightIconSlot?: React.ReactNode;
10
10
  };
11
11
  export declare const Tag: ({ className, backgroundColor, textColor, children, label, compact, leftIconSlot, rightIconSlot, ...otherProps }: TagProps) => React.JSX.Element;
12
- export {};
@@ -1 +1 @@
1
- {"version":3,"file":"Tag.js","sources":["../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import React from 'react';\n\nimport { theme } from 'Theme';\nimport { assignCssVars, buildClassnames } from '../../utils';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { FlexProps } from '../Flex/types';\nimport { Text } from '../Text';\n\nimport styles from './Tag.module.scss';\n\ntype TagProps = Omit<FlexProps, 'color'> & {\n backgroundColor?: string;\n textColor?: string;\n label?: string;\n compact?: boolean;\n leftIconSlot?: React.ReactNode;\n rightIconSlot?: React.ReactNode;\n};\n\nexport const Tag = ({\n className,\n backgroundColor = theme.colors.neutral.grey.base,\n textColor,\n children,\n label,\n compact = false,\n leftIconSlot,\n rightIconSlot,\n ...otherProps\n}: TagProps) => (\n <FlexRow\n flexWrap=\"nowrap\"\n justifyContent=\"center\"\n gap=\"xs\"\n className={buildClassnames([styles.tag, compact && styles.compact, className])}\n style={{ ...assignCssVars({ customTextColor: textColor }), backgroundColor }}\n {...otherProps}\n >\n {leftIconSlot}\n {children || <Text variant=\"body\">{label}</Text>}\n {rightIconSlot}\n </FlexRow>\n);\n"],"names":["React"],"mappings":";;;;;;;;;AAmBO,MAAM,GAAG,GAAG,CAAC,EAClB,SAAS,EACT,eAAe,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAChD,SAAS,EACT,QAAQ,EACR,KAAK,EACL,OAAO,GAAG,KAAK,EACf,YAAY,EACZ,aAAa,EACb,GAAG,UAAU,EACJ,MACTA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EACN,QAAQ,EAAC,QAAQ,EACjB,cAAc,EAAC,QAAQ,EACvB,GAAG,EAAC,IAAI,EACR,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,GAAG,EAAE,OAAO,IAAI,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,EAC9E,KAAK,EAAE,EAAE,GAAG,aAAa,CAAC,EAAE,eAAe,EAAE,SAAS,EAAE,CAAC,EAAE,eAAe,EAAE,KACxE,UAAU,EAAA;IAEb,YAAY;IACZ,QAAQ,IAAIA,6BAAC,IAAI,EAAA,EAAC,OAAO,EAAC,MAAM,EAAA,EAAE,KAAK,CAAQ;IAC/C,aAAa,CACN;;;;"}
1
+ {"version":3,"file":"Tag.js","sources":["../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import React from 'react';\n\nimport { theme } from 'Theme';\nimport { assignCssVars, buildClassnames } from '../../utils';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { FlexProps } from '../Flex/types';\nimport { Text } from '../Text';\n\nimport styles from './Tag.module.scss';\n\nexport type TagProps = Omit<FlexProps, 'color'> & {\n backgroundColor?: string;\n textColor?: string;\n label?: string;\n compact?: boolean;\n leftIconSlot?: React.ReactNode;\n rightIconSlot?: React.ReactNode;\n};\n\nexport const Tag = ({\n className,\n backgroundColor = theme.colors.neutral.grey.base,\n textColor,\n children,\n label,\n compact = false,\n leftIconSlot,\n rightIconSlot,\n ...otherProps\n}: TagProps) => (\n <FlexRow\n flexWrap=\"nowrap\"\n justifyContent=\"center\"\n gap=\"xs\"\n className={buildClassnames([styles.tag, compact && styles.compact, className])}\n style={{ ...assignCssVars({ customTextColor: textColor }), backgroundColor }}\n {...otherProps}\n >\n {leftIconSlot}\n {children || <Text variant=\"body\">{label}</Text>}\n {rightIconSlot}\n </FlexRow>\n);\n"],"names":["React"],"mappings":";;;;;;;;;AAmBO,MAAM,GAAG,GAAG,CAAC,EAClB,SAAS,EACT,eAAe,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAChD,SAAS,EACT,QAAQ,EACR,KAAK,EACL,OAAO,GAAG,KAAK,EACf,YAAY,EACZ,aAAa,EACb,GAAG,UAAU,EACJ,MACTA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EACN,QAAQ,EAAC,QAAQ,EACjB,cAAc,EAAC,QAAQ,EACvB,GAAG,EAAC,IAAI,EACR,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,GAAG,EAAE,OAAO,IAAI,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,EAC9E,KAAK,EAAE,EAAE,GAAG,aAAa,CAAC,EAAE,eAAe,EAAE,SAAS,EAAE,CAAC,EAAE,eAAe,EAAE,KACxE,UAAU,EAAA;IAEb,YAAY;IACZ,QAAQ,IAAIA,6BAAC,IAAI,EAAA,EAAC,OAAO,EAAC,MAAM,EAAA,EAAE,KAAK,CAAQ;IAC/C,aAAa,CACN;;;;"}
@@ -1 +1,2 @@
1
1
  export { Tag } from './Tag';
2
+ export type { TagProps } from './Tag';
@@ -7,6 +7,8 @@ export type { AlertVariants, MiniAlertVariants } from './Alerts/types';
7
7
  export { Anchor, isAnchorUrl, isRelativeUrl, createContextAwareUrl, addPrefixToUrl, shouldAddPrefix, } from './Anchor';
8
8
  export { AnimatedDropdown } from './AnimatedDropdown';
9
9
  export { Avatar } from './Avatar';
10
+ export type { AvatarProps } from './Avatar';
11
+ export { AvatarSize } from './Avatar';
10
12
  export { IconGroup } from './IconGroup';
11
13
  export { Badge } from './Badge';
12
14
  export { Banner } from './Banner';
@@ -32,6 +34,7 @@ export { Divider, type DividerProps } from './Divider';
32
34
  export { Dropdown } from './Dropdown';
33
35
  export { FeatureBanner, type FeatureBannerProps } from './FeatureBanner';
34
36
  export { FilterTag } from './FilterTag';
37
+ export type { FilterTagProps } from './FilterTag';
35
38
  export { Grid } from './Grid';
36
39
  export { Image } from './Image';
37
40
  export type { ImageProps } from './Image';
@@ -61,6 +64,7 @@ export { Stack, type StackProps } from './Stack';
61
64
  export { Stepper } from './Stepper';
62
65
  export { SystemBanner, type SystemBannerProps, type SystemBannerVariant } from './SystemBanner';
63
66
  export { Tag } from './Tag';
67
+ export type { TagProps } from './Tag';
64
68
  export { Text } from './Text';
65
69
  export type { TextProps, TextVariant, ValidTextTag } from './Text';
66
70
  export { TextField, type TextFieldType } from './TextField';
package/dist/index.cjs CHANGED
@@ -9,6 +9,7 @@ var Anchor = require('./components/Anchor/Anchor.cjs');
9
9
  var urlUtils = require('./components/Anchor/utils/urlUtils.cjs');
10
10
  var AnimatedDropdown = require('./components/AnimatedDropdown/AnimatedDropdown.cjs');
11
11
  var Avatar = require('./components/Avatar/Avatar.cjs');
12
+ var types = require('./components/Avatar/types.cjs');
12
13
  var IconGroup = require('./components/IconGroup/IconGroup.cjs');
13
14
  var Badge = require('./components/Badge/Badge.cjs');
14
15
  var Banner = require('./components/Banner/Banner.cjs');
@@ -419,6 +420,10 @@ exports.isRelativeUrl = urlUtils.isRelativeUrl;
419
420
  exports.shouldAddPrefix = urlUtils.shouldAddPrefix;
420
421
  exports.AnimatedDropdown = AnimatedDropdown.AnimatedDropdown;
421
422
  exports.Avatar = Avatar.Avatar;
423
+ Object.defineProperty(exports, "AvatarSize", {
424
+ enumerable: true,
425
+ get: function () { return types.AvatarSize; }
426
+ });
422
427
  exports.IconGroup = IconGroup.IconGroup;
423
428
  exports.Badge = Badge.Badge;
424
429
  exports.Banner = Banner.Banner;
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/dist/index.js CHANGED
@@ -7,6 +7,7 @@ export { Anchor } from './components/Anchor/Anchor.js';
7
7
  export { addPrefixToUrl, createContextAwareUrl, isAnchorUrl, isRelativeUrl, shouldAddPrefix } from './components/Anchor/utils/urlUtils.js';
8
8
  export { AnimatedDropdown } from './components/AnimatedDropdown/AnimatedDropdown.js';
9
9
  export { Avatar } from './components/Avatar/Avatar.js';
10
+ export { AvatarSize } from './components/Avatar/types.js';
10
11
  export { IconGroup } from './components/IconGroup/IconGroup.js';
11
12
  export { Badge } from './components/Badge/Badge.js';
12
13
  export { Banner } from './components/Banner/Banner.js';
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@veeqo/ui",
3
- "version": "16.2.0",
3
+ "version": "16.4.0",
4
4
  "description": "New optimised component library for Veeqo.",
5
5
  "author": "Robert Wealthall",
6
6
  "license": "ISC",