@veeqo/ui 11.4.2 → 12.0.0

package/dist/components/Avatar/Avatar.cjs

@@ -1,17 +1,40 @@
 'use strict';
 
 var React = require('react');
+var buildClassnames = require('../../utils/buildClassnames.cjs');
+require('uid/secure');
+var assignCssVars = require('../../utils/assignCssVars.cjs');
+var CriticalIcon = require('../../icons/custom/components/CriticalIcon.cjs');
 var index = require('../../theme/index.cjs');
-var styled = require('./styled.cjs');
+var Avatar_module = require('./Avatar.module.scss.cjs');
+var Text = require('../Text/Text.cjs');
+var FlexRow = require('../Flex/FlexRow/FlexRow.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-/* eslint-disable react/no-array-index-key */
-const Avatar = ({ width = '40px', name = 'Veeqo', bgColor = index.theme.colors.secondary.blue.base, textColor = '#ffffff', }) => {
-    const userInitials = name.toUpperCase().match(/\b(\w)/g);
-    return (React__default.default.createElement(styled.AvatarSC, { width: width, bgColor: bgColor, textColor: textColor, className: "avatar" }, userInitials === null || userInitials === undefined ? undefined : userInitials.slice(0, 2).map((initial, i) => React__default.default.createElement("span", { key: `${initial}-${i}` }, initial))));
+const textVariantMapping = {
+    md: 'bodySmallBold',
+    lg: 'bodySmallBold',
+    xl: 'headingSmall',
+    xxl: 'headingMedium',
+};
+const Avatar = ({ size = 'lg', name, bgColor, textColor, iconSlot, imageUrl, hasIndicator = false, ariaLabel = `Avatar of ${name}`, }) => {
+    var _a;
+    const textVariant = textVariantMapping[size];
+    return (React__default.default.createElement(FlexRow.FlexRow, { justifyContent: "center", className: buildClassnames.buildClassnames([Avatar_module.avatar, Avatar_module[`${size}-size`]]), style: {
+            ...assignCssVars.assignCssVars({
+                avatarBgColor: iconSlot ? index.theme.colors.neutral.grey.lightest : bgColor,
+                avatarTextColor: textColor,
+            }),
+        }, "aria-label": ariaLabel },
+        hasIndicator && (React__default.default.createElement(CriticalIcon.CriticalIcon, { className: Avatar_module.indicatorIcon, color: index.theme.colors.secondary.red.base, fill: index.theme.colors.neutral.grey.lightest, role: "status", "aria-live": "polite", "aria-label": "Avatar has an error" })),
+        imageUrl && React__default.default.createElement("img", { src: imageUrl, alt: name, className: Avatar_module.avatarImage }),
+        !!iconSlot && iconSlot,
+        !imageUrl && !iconSlot && (React__default.default.createElement(Text.Text, { variant: textVariant, className: Avatar_module.avatarText }, (_a = name
+            .toUpperCase()
+            .match(/(\b\w|\+)/g)) === null || _a === undefined ? undefined : _a.slice(0, 2)))));
 };
 
 exports.Avatar = Avatar;

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

@@ -1 +1 @@
-{"version":3,"file":"Avatar.cjs","sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["/* eslint-disable react/no-array-index-key */\n\nimport React from 'react';\nimport { theme } from '../../theme';\nimport { AvatarSC } from './styled';\nimport { AvatarProps } from './types';\n\nexport const Avatar = ({\n  width = '40px',\n  name = 'Veeqo',\n  bgColor = theme.colors.secondary.blue.base,\n  textColor = '#ffffff',\n}: AvatarProps) => {\n  const userInitials = name.toUpperCase().match(/\\b(\\w)/g);\n\n  return (\n    <AvatarSC width={width} bgColor={bgColor} textColor={textColor} className=\"avatar\">\n      {userInitials\n        ?.slice(0, 2)\n        .map((initial, i) => <span key={`${initial}-${i}`}>{initial}</span>)}\n    </AvatarSC>\n  );\n};\n"],"names":["theme","React","AvatarSC"],"mappings":";;;;;;;;;;AAAA;AAOO,MAAM,MAAM,GAAG,CAAC,EACrB,KAAK,GAAG,MAAM,EACd,IAAI,GAAG,OAAO,EACd,OAAO,GAAGA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,EAC1C,SAAS,GAAG,SAAS,GACT,KAAI;IAChB,MAAM,YAAY,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC;IAExD,QACEC,sBAAC,CAAA,aAAA,CAAAC,eAAQ,EAAC,EAAA,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAC,QAAQ,EAC/E,EAAA,YAAY,KAAZ,IAAA,IAAA,YAAY,KAAZ,SAAA,GAAA,SAAA,GAAA,YAAY,CACT,KAAK,CAAC,CAAC,EAAE,CAAC,CAAA,CACX,GAAG,CAAC,CAAC,OAAO,EAAE,CAAC,KAAKD,sBAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,GAAG,EAAE,CAAA,EAAG,OAAO,CAAA,CAAA,EAAI,CAAC,CAAA,CAAE,EAAG,EAAA,OAAO,CAAQ,CAAC,CAC7D;AAEf;;;;"}
+{"version":3,"file":"Avatar.cjs","sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import React from 'react';\nimport { assignCssVars, buildClassnames } from '../../utils';\nimport { CriticalIcon } from '../../icons/custom/components/CriticalIcon';\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}: AvatarProps) => {\n  const textVariant = textVariantMapping[size];\n\n  return (\n    <FlexRow\n      justifyContent=\"center\"\n      className={buildClassnames([styles.avatar, styles[`${size}-size`]])}\n      style={\n        {\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        <CriticalIcon\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          {name\n            .toUpperCase()\n            .match(/(\\b\\w|\\+)/g)\n            ?.slice(0, 2)}\n        </Text>\n      )}\n    </FlexRow>\n  );\n};\n"],"names":["React","FlexRow","buildClassnames","styles","assignCssVars","theme","CriticalIcon","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,CAAE,CAAA,GACnB,KAAI;;AAChB,IAAA,MAAM,WAAW,GAAG,kBAAkB,CAAC,IAAI,CAAC;IAE5C,QACEA,sBAAC,CAAA,aAAA,CAAAC,eAAO,EACN,EAAA,cAAc,EAAC,QAAQ,EACvB,SAAS,EAAEC,+BAAe,CAAC,CAACC,aAAM,CAAC,MAAM,EAAEA,aAAM,CAAC,CAAG,EAAA,IAAI,CAAO,KAAA,CAAA,CAAC,CAAC,CAAC,EACnE,KAAK,EACH;AACE,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,yBAAY,EACX,EAAA,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,EACP,YAAA,EAAA,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,EAAI,CAAA;QAC5E,CAAC,CAAC,QAAQ,IAAI,QAAQ;QACtB,CAAC,QAAQ,IAAI,CAAC,QAAQ,KACrBH,sBAAA,CAAA,aAAA,CAACO,SAAI,EAAC,EAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAEJ,aAAM,CAAC,UAAU,EAAA,EACrD,MAAA;AACE,aAAA,WAAW;AACX,aAAA,KAAK,CAAC,YAAY,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAClB,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CACV,CACR,CACO;AAEd;;;;"}

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

@@ -1,3 +1,3 @@
 import React from 'react';
 import { AvatarProps } from './types';
-export declare const Avatar: ({ width, name, bgColor, textColor, }: AvatarProps) => React.JSX.Element;
+export declare const Avatar: ({ size, name, bgColor, textColor, iconSlot, imageUrl, hasIndicator, ariaLabel, }: AvatarProps) => React.JSX.Element;

package/dist/components/Avatar/Avatar.js

@@ -1,11 +1,34 @@
 import React__default from 'react';
+import { buildClassnames } from '../../utils/buildClassnames.js';
+import 'uid/secure';
+import { assignCssVars } from '../../utils/assignCssVars.js';
+import { CriticalIcon } from '../../icons/custom/components/CriticalIcon.js';
 import { theme } from '../../theme/index.js';
-import { AvatarSC } from './styled.js';
+import styles from './Avatar.module.scss.js';
+import { Text } from '../Text/Text.js';
+import { FlexRow } from '../Flex/FlexRow/FlexRow.js';
 
-/* eslint-disable react/no-array-index-key */
-const Avatar = ({ width = '40px', name = 'Veeqo', bgColor = theme.colors.secondary.blue.base, textColor = '#ffffff', }) => {
-    const userInitials = name.toUpperCase().match(/\b(\w)/g);
-    return (React__default.createElement(AvatarSC, { width: width, bgColor: bgColor, textColor: textColor, className: "avatar" }, userInitials === null || userInitials === undefined ? undefined : userInitials.slice(0, 2).map((initial, i) => React__default.createElement("span", { key: `${initial}-${i}` }, initial))));
+const textVariantMapping = {
+    md: 'bodySmallBold',
+    lg: 'bodySmallBold',
+    xl: 'headingSmall',
+    xxl: 'headingMedium',
+};
+const Avatar = ({ size = 'lg', name, bgColor, textColor, iconSlot, imageUrl, hasIndicator = false, ariaLabel = `Avatar of ${name}`, }) => {
+    var _a;
+    const textVariant = textVariantMapping[size];
+    return (React__default.createElement(FlexRow, { justifyContent: "center", className: buildClassnames([styles.avatar, styles[`${size}-size`]]), style: {
+            ...assignCssVars({
+                avatarBgColor: iconSlot ? theme.colors.neutral.grey.lightest : bgColor,
+                avatarTextColor: textColor,
+            }),
+        }, "aria-label": ariaLabel },
+        hasIndicator && (React__default.createElement(CriticalIcon, { className: styles.indicatorIcon, color: theme.colors.secondary.red.base, fill: theme.colors.neutral.grey.lightest, role: "status", "aria-live": "polite", "aria-label": "Avatar has an error" })),
+        imageUrl && React__default.createElement("img", { src: imageUrl, alt: name, className: styles.avatarImage }),
+        !!iconSlot && iconSlot,
+        !imageUrl && !iconSlot && (React__default.createElement(Text, { variant: textVariant, className: styles.avatarText }, (_a = name
+            .toUpperCase()
+            .match(/(\b\w|\+)/g)) === null || _a === undefined ? undefined : _a.slice(0, 2)))));
 };
 
 export { Avatar };

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

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["/* eslint-disable react/no-array-index-key */\n\nimport React from 'react';\nimport { theme } from '../../theme';\nimport { AvatarSC } from './styled';\nimport { AvatarProps } from './types';\n\nexport const Avatar = ({\n  width = '40px',\n  name = 'Veeqo',\n  bgColor = theme.colors.secondary.blue.base,\n  textColor = '#ffffff',\n}: AvatarProps) => {\n  const userInitials = name.toUpperCase().match(/\\b(\\w)/g);\n\n  return (\n    <AvatarSC width={width} bgColor={bgColor} textColor={textColor} className=\"avatar\">\n      {userInitials\n        ?.slice(0, 2)\n        .map((initial, i) => <span key={`${initial}-${i}`}>{initial}</span>)}\n    </AvatarSC>\n  );\n};\n"],"names":["React"],"mappings":";;;;AAAA;AAOO,MAAM,MAAM,GAAG,CAAC,EACrB,KAAK,GAAG,MAAM,EACd,IAAI,GAAG,OAAO,EACd,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,EAC1C,SAAS,GAAG,SAAS,GACT,KAAI;IAChB,MAAM,YAAY,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC;IAExD,QACEA,cAAC,CAAA,aAAA,CAAA,QAAQ,EAAC,EAAA,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAC,QAAQ,EAC/E,EAAA,YAAY,KAAZ,IAAA,IAAA,YAAY,KAAZ,SAAA,GAAA,SAAA,GAAA,YAAY,CACT,KAAK,CAAC,CAAC,EAAE,CAAC,CAAA,CACX,GAAG,CAAC,CAAC,OAAO,EAAE,CAAC,KAAKA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,GAAG,EAAE,CAAA,EAAG,OAAO,CAAA,CAAA,EAAI,CAAC,CAAA,CAAE,EAAG,EAAA,OAAO,CAAQ,CAAC,CAC7D;AAEf;;;;"}
+{"version":3,"file":"Avatar.js","sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import React from 'react';\nimport { assignCssVars, buildClassnames } from '../../utils';\nimport { CriticalIcon } from '../../icons/custom/components/CriticalIcon';\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}: AvatarProps) => {\n  const textVariant = textVariantMapping[size];\n\n  return (\n    <FlexRow\n      justifyContent=\"center\"\n      className={buildClassnames([styles.avatar, styles[`${size}-size`]])}\n      style={\n        {\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        <CriticalIcon\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          {name\n            .toUpperCase()\n            .match(/(\\b\\w|\\+)/g)\n            ?.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,CAAE,CAAA,GACnB,KAAI;;AAChB,IAAA,MAAM,WAAW,GAAG,kBAAkB,CAAC,IAAI,CAAC;IAE5C,QACEA,cAAC,CAAA,aAAA,CAAA,OAAO,EACN,EAAA,cAAc,EAAC,QAAQ,EACvB,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAG,EAAA,IAAI,CAAO,KAAA,CAAA,CAAC,CAAC,CAAC,EACnE,KAAK,EACH;AACE,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,YAAY,EACX,EAAA,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,EACP,YAAA,EAAA,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,EAAI,CAAA;QAC5E,CAAC,CAAC,QAAQ,IAAI,QAAQ;QACtB,CAAC,QAAQ,IAAI,CAAC,QAAQ,KACrBA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAC,EAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,CAAC,UAAU,EAAA,EACrD,MAAA;AACE,aAAA,WAAW;AACX,aAAA,KAAK,CAAC,YAAY,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAClB,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CACV,CACR,CACO;AAEd;;;;"}

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

@@ -0,0 +1,9 @@
+'use strict';
+
+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"};
+
+module.exports = styles;
+//# sourceMappingURL=Avatar.module.scss.cjs.map

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

@@ -0,0 +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;;;;"}

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

@@ -0,0 +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"};
+
+export { styles as default };
+//# sourceMappingURL=Avatar.module.scss.js.map

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

@@ -0,0 +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;;;;"}

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

@@ -1,11 +1,17 @@
-export interface AvatarProps {
+/// <reference types="react" />
+export declare enum AvatarSize {
+    md = "md",
+    lg = "lg",
+    xl = "xl",
+    xxl = "xxl"
+}
+export type AvatarProps = {
     name: string;
-    width?: string;
+    size?: keyof typeof AvatarSize;
     bgColor?: string;
     textColor?: string;
-}
-export interface AvatarSCProps {
-    width: string;
-    bgColor: string;
-    textColor: string;
-}
+    iconSlot?: React.ReactNode;
+    imageUrl?: string;
+    ariaLabel?: string;
+    hasIndicator?: boolean;
+};

package/dist/components/AvatarGroup/AvatarGroup.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { AvatarProps } from '../Avatar/types';
+type AvatarGroupProps = {
+    avatars: Omit<AvatarProps, 'hasIndicator'>[];
+    maxVisible?: number;
+    compact?: boolean;
+    ariaLabel?: string;
+    hasIndicator?: boolean;
+};
+export declare const AvatarGroup: ({ avatars, maxVisible, compact, ariaLabel, hasIndicator, }: AvatarGroupProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1 @@
+export { AvatarGroup } from './AvatarGroup';

package/dist/icons/custom/components/CriticalIcon.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+var React = require('react');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const CriticalIcon = ({ fill, ...props }) => (React__default.default.createElement("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props },
+    React__default.default.createElement("circle", { cx: 8, cy: 8, r: 6, fill: fill }),
+    React__default.default.createElement("path", { d: "M8 1.33334C4.32 1.33334 1.33334 4.32001 1.33334 8.00001C1.33334 11.68 4.32 14.6667 8 14.6667C11.68 14.6667 14.6667 11.68 14.6667 8.00001C14.6667 4.32001 11.68 1.33334 8 1.33334ZM8.66667 11.3333H7.33334V10H8.66667V11.3333ZM8.66667 8.66668H7.33334V4.66668H8.66667V8.66668Z", fill: "currentColor" })));
+
+exports.CriticalIcon = CriticalIcon;
+//# sourceMappingURL=CriticalIcon.cjs.map

package/dist/icons/custom/components/CriticalIcon.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CriticalIcon.cjs","sources":["../../../../src/icons/custom/components/CriticalIcon.tsx"],"sourcesContent":["import React from 'react';\nimport { IconComponentProps } from 'src/icons/types';\n\nexport const CriticalIcon = ({ fill, ...props }: IconComponentProps) => (\n  <svg viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n    <circle cx={8} cy={8} r={6} fill={fill} />\n    <path\n      d=\"M8 1.33334C4.32 1.33334 1.33334 4.32001 1.33334 8.00001C1.33334 11.68 4.32 14.6667 8 14.6667C11.68 14.6667 14.6667 11.68 14.6667 8.00001C14.6667 4.32001 11.68 1.33334 8 1.33334ZM8.66667 11.3333H7.33334V10H8.66667V11.3333ZM8.66667 8.66668H7.33334V4.66668H8.66667V8.66668Z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n);\n"],"names":["React"],"mappings":";;;;;;;;AAGO,MAAM,YAAY,GAAG,CAAC,EAAE,IAAI,EAAE,GAAG,KAAK,EAAsB,MACjEA,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAA,GAAK,KAAK,EAAA;AAC/E,IAAAA,sBAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAI,CAAA;IAC1CA,sBACE,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,CAAC,EAAC,gRAAgR,EAClR,IAAI,EAAC,cAAc,EAAA,CACnB,CACE;;;;"}

package/dist/icons/custom/components/CriticalIcon.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { IconComponentProps } from 'src/icons/types';
-export declare const CriticalIcon: (props: IconComponentProps) => React.JSX.Element;
+export declare const CriticalIcon: ({ fill, ...props }: IconComponentProps) => React.JSX.Element;

package/dist/icons/custom/components/CriticalIcon.js

@@ -0,0 +1,8 @@
+import React__default from 'react';
+
+const CriticalIcon = ({ fill, ...props }) => (React__default.createElement("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props },
+    React__default.createElement("circle", { cx: 8, cy: 8, r: 6, fill: fill }),
+    React__default.createElement("path", { d: "M8 1.33334C4.32 1.33334 1.33334 4.32001 1.33334 8.00001C1.33334 11.68 4.32 14.6667 8 14.6667C11.68 14.6667 14.6667 11.68 14.6667 8.00001C14.6667 4.32001 11.68 1.33334 8 1.33334ZM8.66667 11.3333H7.33334V10H8.66667V11.3333ZM8.66667 8.66668H7.33334V4.66668H8.66667V8.66668Z", fill: "currentColor" })));
+
+export { CriticalIcon };
+//# sourceMappingURL=CriticalIcon.js.map

package/dist/icons/custom/components/CriticalIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CriticalIcon.js","sources":["../../../../src/icons/custom/components/CriticalIcon.tsx"],"sourcesContent":["import React from 'react';\nimport { IconComponentProps } from 'src/icons/types';\n\nexport const CriticalIcon = ({ fill, ...props }: IconComponentProps) => (\n  <svg viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n    <circle cx={8} cy={8} r={6} fill={fill} />\n    <path\n      d=\"M8 1.33334C4.32 1.33334 1.33334 4.32001 1.33334 8.00001C1.33334 11.68 4.32 14.6667 8 14.6667C11.68 14.6667 14.6667 11.68 14.6667 8.00001C14.6667 4.32001 11.68 1.33334 8 1.33334ZM8.66667 11.3333H7.33334V10H8.66667V11.3333ZM8.66667 8.66668H7.33334V4.66668H8.66667V8.66668Z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n);\n"],"names":["React"],"mappings":";;AAGO,MAAM,YAAY,GAAG,CAAC,EAAE,IAAI,EAAE,GAAG,KAAK,EAAsB,MACjEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAA,GAAK,KAAK,EAAA;AAC/E,IAAAA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAI,CAAA;IAC1CA,cACE,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,CAAC,EAAC,gRAAgR,EAClR,IAAI,EAAC,cAAc,EAAA,CACnB,CACE;;;;"}

package/package.json

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

package/dist/components/Avatar/styled.cjs

@@ -1,13 +0,0 @@
-'use strict';
-
-var styled = require('styled-components');
-var index = require('../../theme/index.cjs');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
-
-const AvatarSC = styled__default.default.div.withConfig({ displayName: "vui--AvatarSC", componentId: "vui--1gxc5tv" }) `width:${(props) => props.width};height:${(props) => props.width};border:3px solid ${index.theme.colors.neutral.grey.base};color:${(props) => props.textColor};background-color:${(props) => props.bgColor};cursor:pointer;border-radius:50%;display:flex;justify-content:center;align-items:center;background-size:cover;span{font-family:${index.theme.text.bodySmallBold.fontFamily};font-weight:${index.theme.text.bodySmallBold.fontWeight};font-size:${index.theme.text.bodySmallBold.fontSize};line-height:${index.theme.text.bodySmallBold.lineHeight};}`;
-
-exports.AvatarSC = AvatarSC;
-//# sourceMappingURL=styled.cjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"styled.cjs","sources":["../../../src/components/Avatar/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../theme';\nimport { AvatarSCProps } from './types';\n\nexport const AvatarSC = styled.div<AvatarSCProps>`\n  width: ${(props) => props.width};\n  height: ${(props) => props.width};\n  border: 3px solid ${theme.colors.neutral.grey.base};\n  color: ${(props) => props.textColor};\n  background-color: ${(props) => props.bgColor};\n  cursor: pointer;\n  border-radius: 50%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-size: cover;\n\n  span {\n    font-family: ${theme.text.bodySmallBold.fontFamily};\n    font-weight: ${theme.text.bodySmallBold.fontWeight};\n    font-size: ${theme.text.bodySmallBold.fontSize};\n    line-height: ${theme.text.bodySmallBold.lineHeight};\n  }\n`;\n"],"names":["styled","theme"],"mappings":";;;;;;;;;AAIa,MAAA,QAAQ,GAAGA,uBAAM,CAAC,GAAG,CACvB,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EAAA,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,CAAA,QAAA,EACrB,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,qBACZC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CACzC,OAAA,EAAA,CAAC,KAAK,KAAK,KAAK,CAAC,SAAS,CAAA,kBAAA,EACf,CAAC,KAAK,KAAK,KAAK,CAAC,OAAO,CAAA,gIAAA,EAS3BA,WAAK,CAAC,IAAI,CAAC,aAAa,CAAC,UAAU,CAAA,aAAA,EACnCA,WAAK,CAAC,IAAI,CAAC,aAAa,CAAC,UAAU,CAAA,WAAA,EACrCA,WAAK,CAAC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAC/B,aAAA,EAAAA,WAAK,CAAC,IAAI,CAAC,aAAa,CAAC,UAAU;;;;"}

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

@@ -1,2 +0,0 @@
-import { AvatarSCProps } from './types';
-export declare const AvatarSC: import("styled-components").StyledComponent<"div", any, AvatarSCProps, never>;

package/dist/components/Avatar/styled.js

@@ -1,7 +0,0 @@
-import styled from 'styled-components';
-import { theme } from '../../theme/index.js';
-
-const AvatarSC = styled.div.withConfig({ displayName: "vui--AvatarSC", componentId: "vui--1gxc5tv" }) `width:${(props) => props.width};height:${(props) => props.width};border:3px solid ${theme.colors.neutral.grey.base};color:${(props) => props.textColor};background-color:${(props) => props.bgColor};cursor:pointer;border-radius:50%;display:flex;justify-content:center;align-items:center;background-size:cover;span{font-family:${theme.text.bodySmallBold.fontFamily};font-weight:${theme.text.bodySmallBold.fontWeight};font-size:${theme.text.bodySmallBold.fontSize};line-height:${theme.text.bodySmallBold.lineHeight};}`;
-
-export { AvatarSC };
-//# sourceMappingURL=styled.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"styled.js","sources":["../../../src/components/Avatar/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../theme';\nimport { AvatarSCProps } from './types';\n\nexport const AvatarSC = styled.div<AvatarSCProps>`\n  width: ${(props) => props.width};\n  height: ${(props) => props.width};\n  border: 3px solid ${theme.colors.neutral.grey.base};\n  color: ${(props) => props.textColor};\n  background-color: ${(props) => props.bgColor};\n  cursor: pointer;\n  border-radius: 50%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-size: cover;\n\n  span {\n    font-family: ${theme.text.bodySmallBold.fontFamily};\n    font-weight: ${theme.text.bodySmallBold.fontWeight};\n    font-size: ${theme.text.bodySmallBold.fontSize};\n    line-height: ${theme.text.bodySmallBold.lineHeight};\n  }\n`;\n"],"names":[],"mappings":";;;AAIa,MAAA,QAAQ,GAAG,MAAM,CAAC,GAAG,CACvB,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EAAA,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,CAAA,QAAA,EACrB,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,qBACZ,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CACzC,OAAA,EAAA,CAAC,KAAK,KAAK,KAAK,CAAC,SAAS,CAAA,kBAAA,EACf,CAAC,KAAK,KAAK,KAAK,CAAC,OAAO,CAAA,gIAAA,EAS3B,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,UAAU,CAAA,aAAA,EACnC,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,UAAU,CAAA,WAAA,EACrC,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAC/B,aAAA,EAAA,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,UAAU;;;;"}