@veeqo/ui 13.22.4 → 14.0.0-beta-1

package/dist/components/IconGroup/IconGroup.cjs

@@ -0,0 +1,32 @@
+'use strict';
+
+var React = require('react');
+var Avatar = require('../Avatar/Avatar.cjs');
+var index = require('../../theme/index.cjs');
+var buildClassnames = require('../../utils/buildClassnames.cjs');
+require('uid/secure');
+var IconGroup_module = require('./IconGroup.module.scss.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const IconGroup = ({ icons, maxVisible = 3, compact = false, ariaLabel = 'Group of icons', hasIndicator = false, className, ...listProps }) => {
+    const visibleIcons = icons.slice(0, icons.length > maxVisible ? Math.max(0, maxVisible - 1) : maxVisible);
+    const hiddenIcons = icons.slice(visibleIcons.length);
+    return (React__default.default.createElement("ul", { className: buildClassnames.buildClassnames([IconGroup_module.list, className]), "aria-label": ariaLabel, ...listProps },
+        hiddenIcons.length > 0 && (React__default.default.createElement("li", { key: "icon-group-item-remaining-count", className: IconGroup_module.item, "aria-label": `${hiddenIcons.length} additional ${hiddenIcons.length === 1 ? 'item' : 'items'}`, style: {
+                '--icon-z-index': maxVisible,
+            } },
+            React__default.default.createElement(Avatar.Avatar, { name: `${hiddenIcons.length}+`, size: compact ? 'md' : 'lg', bgColor: index.theme.colors.secondary.blue.darkest, textColor: index.theme.colors.neutral.grey.lightest, ariaLabel: "Number of additional icons not shown", hasIndicator: hasIndicator }))),
+        visibleIcons.map((icon, index$1) => {
+            var _a, _b;
+            return (React__default.default.createElement("li", { key: `icon-group-item-${icon.name}`, className: IconGroup_module.item, "aria-label": `Icon item of ${icon.name}`, style: {
+                    '--icon-z-index': visibleIcons.length - index$1,
+                } },
+                React__default.default.createElement(Avatar.Avatar, { ...icon, hasIndicator: false, size: compact ? 'md' : 'lg', bgColor: (_a = icon === null || icon === undefined ? undefined : icon.bgColor) !== null && _a !== undefined ? _a : index.theme.colors.neutral.grey.light, textColor: (_b = icon === null || icon === undefined ? undefined : icon.textColor) !== null && _b !== undefined ? _b : index.theme.colors.neutral.ink.base })));
+        })));
+};
+
+exports.IconGroup = IconGroup;
+//# sourceMappingURL=IconGroup.cjs.map

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

@@ -0,0 +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 className={buildClassnames([styles.list, className])} aria-label={ariaLabel} {...listProps}>\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,sBAAI,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,SAAS,EAAEC,+BAAe,CAAC,CAACC,gBAAM,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,EAAc,YAAA,EAAA,SAAS,KAAM,SAAS,EAAA;AAC3F,QAAA,WAAW,CAAC,MAAM,GAAG,CAAC,KACrBF,sBACE,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,GAAG,EAAC,iCAAiC,EACrC,SAAS,EAAEE,gBAAM,CAAC,IAAI,gBACV,CAAG,EAAA,WAAW,CAAC,MAAM,eAAe,WAAW,CAAC,MAAM,KAAK,CAAC,GAAG,MAAM,GAAG,OAAO,CAAE,CAAA,EAC7F,KAAK,EACH;AACE,gBAAA,gBAAgB,EAAE,UAAU;AACN,aAAA,EAAA;YAG1BF,sBAAC,CAAA,aAAA,CAAAG,aAAI,EACH,EAAA,IAAI,EAAE,CAAA,EAAG,WAAW,CAAC,MAAM,CAAG,CAAA,CAAA,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,EAC1B,CAAA,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,CAAgB,aAAA,EAAA,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,SAAA,GAAA,SAAA,GAAJ,IAAI,CAAE,OAAO,MAAI,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAAC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,EACzD,SAAS,EAAE,CAAA,EAAA,GAAA,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAJ,SAAA,GAAA,SAAA,GAAA,IAAI,CAAE,SAAS,MAAI,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAAA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAC3D,CAAA,CACC;SACN,CAAC,CACC;AAET;;;;"}

package/dist/components/IconGroup/IconGroup.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { IconGroupProps } from './types';
+export declare const IconGroup: ({ icons, maxVisible, compact, ariaLabel, hasIndicator, className, ...listProps }: IconGroupProps) => React.JSX.Element;

package/dist/components/IconGroup/IconGroup.js

@@ -0,0 +1,26 @@
+import React__default from 'react';
+import { Avatar } from '../Avatar/Avatar.js';
+import { theme } from '../../theme/index.js';
+import { buildClassnames } from '../../utils/buildClassnames.js';
+import 'uid/secure';
+import styles from './IconGroup.module.scss.js';
+
+const IconGroup = ({ icons, maxVisible = 3, compact = false, ariaLabel = 'Group of icons', hasIndicator = false, className, ...listProps }) => {
+    const visibleIcons = icons.slice(0, icons.length > maxVisible ? Math.max(0, maxVisible - 1) : maxVisible);
+    const hiddenIcons = icons.slice(visibleIcons.length);
+    return (React__default.createElement("ul", { className: buildClassnames([styles.list, className]), "aria-label": ariaLabel, ...listProps },
+        hiddenIcons.length > 0 && (React__default.createElement("li", { key: "icon-group-item-remaining-count", className: styles.item, "aria-label": `${hiddenIcons.length} additional ${hiddenIcons.length === 1 ? 'item' : 'items'}`, style: {
+                '--icon-z-index': maxVisible,
+            } },
+            React__default.createElement(Avatar, { name: `${hiddenIcons.length}+`, size: compact ? 'md' : 'lg', bgColor: theme.colors.secondary.blue.darkest, textColor: theme.colors.neutral.grey.lightest, ariaLabel: "Number of additional icons not shown", hasIndicator: hasIndicator }))),
+        visibleIcons.map((icon, index) => {
+            var _a, _b;
+            return (React__default.createElement("li", { key: `icon-group-item-${icon.name}`, className: styles.item, "aria-label": `Icon item of ${icon.name}`, style: {
+                    '--icon-z-index': visibleIcons.length - index,
+                } },
+                React__default.createElement(Avatar, { ...icon, hasIndicator: false, size: compact ? 'md' : 'lg', bgColor: (_a = icon === null || icon === undefined ? undefined : icon.bgColor) !== null && _a !== undefined ? _a : theme.colors.neutral.grey.light, textColor: (_b = icon === null || icon === undefined ? undefined : icon.textColor) !== null && _b !== undefined ? _b : theme.colors.neutral.ink.base })));
+        })));
+};
+
+export { IconGroup };
+//# sourceMappingURL=IconGroup.js.map

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

@@ -0,0 +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 className={buildClassnames([styles.list, className])} aria-label={ariaLabel} {...listProps}>\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,cAAI,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,EAAc,YAAA,EAAA,SAAS,KAAM,SAAS,EAAA;AAC3F,QAAA,WAAW,CAAC,MAAM,GAAG,CAAC,KACrBA,cACE,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,GAAG,EAAC,iCAAiC,EACrC,SAAS,EAAE,MAAM,CAAC,IAAI,gBACV,CAAG,EAAA,WAAW,CAAC,MAAM,eAAe,WAAW,CAAC,MAAM,KAAK,CAAC,GAAG,MAAM,GAAG,OAAO,CAAE,CAAA,EAC7F,KAAK,EACH;AACE,gBAAA,gBAAgB,EAAE,UAAU;AACN,aAAA,EAAA;YAG1BA,cAAC,CAAA,aAAA,CAAAC,MAAI,EACH,EAAA,IAAI,EAAE,CAAA,EAAG,WAAW,CAAC,MAAM,CAAG,CAAA,CAAA,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,EAC1B,CAAA,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,CAAgB,aAAA,EAAA,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,SAAA,GAAA,SAAA,GAAJ,IAAI,CAAE,OAAO,MAAI,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,EACzD,SAAS,EAAE,CAAA,EAAA,GAAA,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAJ,SAAA,GAAA,SAAA,GAAA,IAAI,CAAE,SAAS,MAAI,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAC3D,CAAA,CACC;SACN,CAAC,CACC;AAET;;;;"}

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

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._list_1ygvx_1 {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n._item_1ygvx_10 {\n  position: relative;\n  border-radius: var(--radius-full);\n  z-index: var(--icon-z-index, 1);\n}\n._item_1ygvx_10:not(:first-child) {\n  margin-left: calc(var(--sizes-3) * -1);\n}");
+var styles = {"list":"_list_1ygvx_1","item":"_item_1ygvx_10"};
+
+module.exports = styles;
+//# sourceMappingURL=IconGroup.module.scss.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IconGroup.module.scss.cjs","sources":["../../../src/components/IconGroup/IconGroup.module.scss"],"sourcesContent":[".list {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.item {\n  position: relative;\n  border-radius: var(--radius-full);\n  z-index: var(--icon-z-index, 1);\n\n  &:not(:first-child) {\n    margin-left: calc(var(--sizes-3) * -1);\n  }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,qVAAA;AACA,aAAA,CAAA,MAAA,CAAA,eAAA,CAAA,MAAA,CAAA,gBAAA;;;;"}

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

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+
+insertStyle("._list_1ygvx_1 {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n._item_1ygvx_10 {\n  position: relative;\n  border-radius: var(--radius-full);\n  z-index: var(--icon-z-index, 1);\n}\n._item_1ygvx_10:not(:first-child) {\n  margin-left: calc(var(--sizes-3) * -1);\n}");
+var styles = {"list":"_list_1ygvx_1","item":"_item_1ygvx_10"};
+
+export { styles as default };
+//# sourceMappingURL=IconGroup.module.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IconGroup.module.scss.js","sources":["../../../src/components/IconGroup/IconGroup.module.scss"],"sourcesContent":[".list {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.item {\n  position: relative;\n  border-radius: var(--radius-full);\n  z-index: var(--icon-z-index, 1);\n\n  &:not(:first-child) {\n    margin-left: calc(var(--sizes-3) * -1);\n  }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,qVAAA;AACA,aAAA,CAAA,MAAA,CAAA,eAAA,CAAA,MAAA,CAAA,gBAAA;;;;"}

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

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

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

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { AvatarProps } from '../Avatar/types';
+/** Icon props - based on Avatar component props */
+export type IconProps = Omit<AvatarProps, 'hasIndicator'>;
+/** IconGroup properties. */
+export type IconGroupProps = React.HTMLAttributes<HTMLUListElement> & {
+    /** List of icons to display */
+    icons: IconProps[];
+    /** Number of icons to show before collapsing. 3 is the default and maximum */
+    maxVisible?: number;
+    /** Switches all icon sizes from lg to md */
+    compact?: boolean;
+    /** Accessible label for the icon group list */
+    ariaLabel?: string;
+    /** Controls the indicator on the overflow icon */
+    hasIndicator?: boolean;
+};

package/dist/components/index.d.ts

@@ -5,7 +5,7 @@ export { MiniAlert } from './Alerts/MiniAlert';
 export { Anchor, isAnchorUrl, isRelativeUrl, createContextAwareUrl, addPrefixToUrl, shouldAddPrefix, } from './Anchor';
 export { AnimatedDropdown } from './AnimatedDropdown';
 export { Avatar } from './Avatar';
-export { AvatarGroup } from './AvatarGroup';
+export { IconGroup } from './IconGroup';
 export { Badge } from './Badge';
 export { Banner } from './Banner';
 export { BaseContainer } from './BaseContainer';

package/dist/index.cjs

@@ -8,7 +8,7 @@ var Anchor = require('./components/Anchor/Anchor.cjs');
 var urlUtils = require('./components/Anchor/utils/urlUtils.cjs');
 var AnimatedDropdown = require('./components/AnimatedDropdown/AnimatedDropdown.cjs');
 var Avatar = require('./components/Avatar/Avatar.cjs');
-var AvatarGroup = require('./components/AvatarGroup/AvatarGroup.cjs');
+var IconGroup = require('./components/IconGroup/IconGroup.cjs');
 var Badge = require('./components/Badge/Badge.cjs');
 var Banner = require('./components/Banner/Banner.cjs');
 var BaseContainer = require('./components/BaseContainer/BaseContainer.cjs');
@@ -359,7 +359,7 @@ exports.isRelativeUrl = urlUtils.isRelativeUrl;
 exports.shouldAddPrefix = urlUtils.shouldAddPrefix;
 exports.AnimatedDropdown = AnimatedDropdown.AnimatedDropdown;
 exports.Avatar = Avatar.Avatar;
-exports.AvatarGroup = AvatarGroup.AvatarGroup;
+exports.IconGroup = IconGroup.IconGroup;
 exports.Badge = Badge.Badge;
 exports.Banner = Banner.Banner;
 exports.BaseContainer = BaseContainer.BaseContainer;

package/dist/index.js

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

package/package.json

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

package/dist/components/AvatarGroup/AvatarGroup.cjs

@@ -1,32 +0,0 @@
-'use strict';
-
-var React = require('react');
-var Avatar = require('../Avatar/Avatar.cjs');
-var index = require('../../theme/index.cjs');
-var buildClassnames = require('../../utils/buildClassnames.cjs');
-require('uid/secure');
-var AvatarGroup_module = require('./AvatarGroup.module.scss.cjs');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-
-const AvatarGroup = ({ avatars, maxVisible = 3, compact = false, ariaLabel = 'Group of avatars', hasIndicator = false, className, ...listProps }) => {
-    const visibleAvatars = avatars.slice(0, avatars.length > maxVisible ? Math.max(0, maxVisible - 1) : maxVisible);
-    const hiddenAvatars = avatars.filter((avatar) => !visibleAvatars.includes(avatar));
-    return (React__default.default.createElement("ul", { className: buildClassnames.buildClassnames([AvatarGroup_module.list, className]), "aria-label": ariaLabel, ...listProps },
-        hiddenAvatars.length > 0 && (React__default.default.createElement("li", { key: "avatar-group-item-remaining-count", className: AvatarGroup_module.item, "aria-label": `${hiddenAvatars.length} additional items`, style: {
-                '--avatar-z-index': maxVisible,
-            } },
-            React__default.default.createElement(Avatar.Avatar, { name: `${hiddenAvatars.length}+`, size: compact ? 'md' : 'lg', bgColor: index.theme.colors.secondary.blue.darkest, textColor: index.theme.colors.neutral.grey.lightest, ariaLabel: "Avatar for remaining count", hasIndicator: hasIndicator }))),
-        visibleAvatars.map((avatar, index$1) => {
-            var _a, _b;
-            return (React__default.default.createElement("li", { key: `avatar-group-item-${avatar.name}`, className: AvatarGroup_module.item, "aria-label": `Avatar item of ${avatar.name}`, style: {
-                    '--avatar-z-index': visibleAvatars.length - index$1,
-                } },
-                React__default.default.createElement(Avatar.Avatar, { ...avatar, size: compact ? 'md' : 'lg', bgColor: (_a = avatar === null || avatar === undefined ? undefined : avatar.bgColor) !== null && _a !== undefined ? _a : index.theme.colors.neutral.grey.light, textColor: (_b = avatar === null || avatar === undefined ? undefined : avatar.textColor) !== null && _b !== undefined ? _b : index.theme.colors.neutral.ink.base })));
-        })));
-};
-
-exports.AvatarGroup = AvatarGroup;
-//# sourceMappingURL=AvatarGroup.cjs.map

package/dist/components/AvatarGroup/AvatarGroup.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"AvatarGroup.cjs","sources":["../../../src/components/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Avatar } from '../Avatar';\nimport { theme } from '../../theme';\nimport { buildClassnames } from '../../utils';\nimport { AvatarGroupProps } from './types';\n\nimport styles from './AvatarGroup.module.scss';\n\nexport const AvatarGroup = ({\n  avatars,\n  maxVisible = 3,\n  compact = false,\n  ariaLabel = 'Group of avatars',\n  hasIndicator = false,\n  className,\n  ...listProps\n}: AvatarGroupProps) => {\n  const visibleAvatars = avatars.slice(\n    0,\n    avatars.length > maxVisible ? Math.max(0, maxVisible - 1) : maxVisible,\n  );\n  const hiddenAvatars = avatars.filter((avatar) => !visibleAvatars.includes(avatar));\n\n  return (\n    <ul className={buildClassnames([styles.list, className])} aria-label={ariaLabel} {...listProps}>\n      {hiddenAvatars.length > 0 && (\n        <li\n          key=\"avatar-group-item-remaining-count\"\n          className={styles.item}\n          aria-label={`${hiddenAvatars.length} additional items`}\n          style={\n            {\n              '--avatar-z-index': maxVisible,\n            } as React.CSSProperties\n          }\n        >\n          <Avatar\n            name={`${hiddenAvatars.length}+`}\n            size={compact ? 'md' : 'lg'}\n            bgColor={theme.colors.secondary.blue.darkest}\n            textColor={theme.colors.neutral.grey.lightest}\n            ariaLabel=\"Avatar for remaining count\"\n            hasIndicator={hasIndicator}\n          />\n        </li>\n      )}\n      {visibleAvatars.map((avatar, index) => (\n        <li\n          key={`avatar-group-item-${avatar.name}`}\n          className={styles.item}\n          aria-label={`Avatar item of ${avatar.name}`}\n          style={\n            {\n              '--avatar-z-index': visibleAvatars.length - index,\n            } as React.CSSProperties\n          }\n        >\n          <Avatar\n            {...avatar}\n            size={compact ? 'md' : 'lg'}\n            bgColor={avatar?.bgColor ?? theme.colors.neutral.grey.light}\n            textColor={avatar?.textColor ?? theme.colors.neutral.ink.base}\n          />\n        </li>\n      ))}\n    </ul>\n  );\n};\n"],"names":["React","buildClassnames","styles","Avatar","theme","index"],"mappings":";;;;;;;;;;;;;AASO,MAAM,WAAW,GAAG,CAAC,EAC1B,OAAO,EACP,UAAU,GAAG,CAAC,EACd,OAAO,GAAG,KAAK,EACf,SAAS,GAAG,kBAAkB,EAC9B,YAAY,GAAG,KAAK,EACpB,SAAS,EACT,GAAG,SAAS,EACK,KAAI;AACrB,IAAA,MAAM,cAAc,GAAG,OAAO,CAAC,KAAK,CAClC,CAAC,EACD,OAAO,CAAC,MAAM,GAAG,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,UAAU,GAAG,CAAC,CAAC,GAAG,UAAU,CACvE;AACD,IAAA,MAAM,aAAa,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,MAAM,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;AAElF,IAAA,QACEA,sBAAI,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,SAAS,EAAEC,+BAAe,CAAC,CAACC,kBAAM,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,EAAc,YAAA,EAAA,SAAS,KAAM,SAAS,EAAA;QAC3F,aAAa,CAAC,MAAM,GAAG,CAAC,KACvBF,sBACE,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,GAAG,EAAC,mCAAmC,EACvC,SAAS,EAAEE,kBAAM,CAAC,IAAI,EAAA,YAAA,EACV,CAAG,EAAA,aAAa,CAAC,MAAM,CAAA,iBAAA,CAAmB,EACtD,KAAK,EACH;AACE,gBAAA,kBAAkB,EAAE,UAAU;AACR,aAAA,EAAA;YAG1BF,sBAAC,CAAA,aAAA,CAAAG,aAAM,EACL,EAAA,IAAI,EAAE,CAAA,EAAG,aAAa,CAAC,MAAM,CAAG,CAAA,CAAA,EAChC,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,4BAA4B,EACtC,YAAY,EAAE,YAAY,EAC1B,CAAA,CACC,CACN;QACA,cAAc,CAAC,GAAG,CAAC,CAAC,MAAM,EAAEC,OAAK,KAAI;;YAAC,QACrCL,6CACE,GAAG,EAAE,qBAAqB,MAAM,CAAC,IAAI,CAAA,CAAE,EACvC,SAAS,EAAEE,kBAAM,CAAC,IAAI,EAAA,YAAA,EACV,CAAkB,eAAA,EAAA,MAAM,CAAC,IAAI,CAAA,CAAE,EAC3C,KAAK,EACH;AACE,oBAAA,kBAAkB,EAAE,cAAc,CAAC,MAAM,GAAGG,OAAK;AAC3B,iBAAA,EAAA;AAG1B,gBAAAL,sBAAA,CAAA,aAAA,CAACG,aAAM,EAAA,EAAA,GACD,MAAM,EACV,IAAI,EAAE,OAAO,GAAG,IAAI,GAAG,IAAI,EAC3B,OAAO,EAAE,CAAA,EAAA,GAAA,MAAM,KAAN,IAAA,IAAA,MAAM,KAAN,SAAA,GAAA,SAAA,GAAA,MAAM,CAAE,OAAO,MAAI,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAAC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,EAC3D,SAAS,EAAE,CAAA,EAAA,GAAA,MAAM,KAAA,IAAA,IAAN,MAAM,KAAA,SAAA,GAAA,SAAA,GAAN,MAAM,CAAE,SAAS,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAIA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAAA,CAC7D,CACC;SACN,CAAC,CACC;AAET;;;;"}

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

@@ -1,3 +0,0 @@
-import React from 'react';
-import { AvatarGroupProps } from './types';
-export declare const AvatarGroup: ({ avatars, maxVisible, compact, ariaLabel, hasIndicator, className, ...listProps }: AvatarGroupProps) => React.JSX.Element;

package/dist/components/AvatarGroup/AvatarGroup.js

@@ -1,26 +0,0 @@
-import React__default from 'react';
-import { Avatar } from '../Avatar/Avatar.js';
-import { theme } from '../../theme/index.js';
-import { buildClassnames } from '../../utils/buildClassnames.js';
-import 'uid/secure';
-import styles from './AvatarGroup.module.scss.js';
-
-const AvatarGroup = ({ avatars, maxVisible = 3, compact = false, ariaLabel = 'Group of avatars', hasIndicator = false, className, ...listProps }) => {
-    const visibleAvatars = avatars.slice(0, avatars.length > maxVisible ? Math.max(0, maxVisible - 1) : maxVisible);
-    const hiddenAvatars = avatars.filter((avatar) => !visibleAvatars.includes(avatar));
-    return (React__default.createElement("ul", { className: buildClassnames([styles.list, className]), "aria-label": ariaLabel, ...listProps },
-        hiddenAvatars.length > 0 && (React__default.createElement("li", { key: "avatar-group-item-remaining-count", className: styles.item, "aria-label": `${hiddenAvatars.length} additional items`, style: {
-                '--avatar-z-index': maxVisible,
-            } },
-            React__default.createElement(Avatar, { name: `${hiddenAvatars.length}+`, size: compact ? 'md' : 'lg', bgColor: theme.colors.secondary.blue.darkest, textColor: theme.colors.neutral.grey.lightest, ariaLabel: "Avatar for remaining count", hasIndicator: hasIndicator }))),
-        visibleAvatars.map((avatar, index) => {
-            var _a, _b;
-            return (React__default.createElement("li", { key: `avatar-group-item-${avatar.name}`, className: styles.item, "aria-label": `Avatar item of ${avatar.name}`, style: {
-                    '--avatar-z-index': visibleAvatars.length - index,
-                } },
-                React__default.createElement(Avatar, { ...avatar, size: compact ? 'md' : 'lg', bgColor: (_a = avatar === null || avatar === undefined ? undefined : avatar.bgColor) !== null && _a !== undefined ? _a : theme.colors.neutral.grey.light, textColor: (_b = avatar === null || avatar === undefined ? undefined : avatar.textColor) !== null && _b !== undefined ? _b : theme.colors.neutral.ink.base })));
-        })));
-};
-
-export { AvatarGroup };
-//# sourceMappingURL=AvatarGroup.js.map

package/dist/components/AvatarGroup/AvatarGroup.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"AvatarGroup.js","sources":["../../../src/components/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Avatar } from '../Avatar';\nimport { theme } from '../../theme';\nimport { buildClassnames } from '../../utils';\nimport { AvatarGroupProps } from './types';\n\nimport styles from './AvatarGroup.module.scss';\n\nexport const AvatarGroup = ({\n  avatars,\n  maxVisible = 3,\n  compact = false,\n  ariaLabel = 'Group of avatars',\n  hasIndicator = false,\n  className,\n  ...listProps\n}: AvatarGroupProps) => {\n  const visibleAvatars = avatars.slice(\n    0,\n    avatars.length > maxVisible ? Math.max(0, maxVisible - 1) : maxVisible,\n  );\n  const hiddenAvatars = avatars.filter((avatar) => !visibleAvatars.includes(avatar));\n\n  return (\n    <ul className={buildClassnames([styles.list, className])} aria-label={ariaLabel} {...listProps}>\n      {hiddenAvatars.length > 0 && (\n        <li\n          key=\"avatar-group-item-remaining-count\"\n          className={styles.item}\n          aria-label={`${hiddenAvatars.length} additional items`}\n          style={\n            {\n              '--avatar-z-index': maxVisible,\n            } as React.CSSProperties\n          }\n        >\n          <Avatar\n            name={`${hiddenAvatars.length}+`}\n            size={compact ? 'md' : 'lg'}\n            bgColor={theme.colors.secondary.blue.darkest}\n            textColor={theme.colors.neutral.grey.lightest}\n            ariaLabel=\"Avatar for remaining count\"\n            hasIndicator={hasIndicator}\n          />\n        </li>\n      )}\n      {visibleAvatars.map((avatar, index) => (\n        <li\n          key={`avatar-group-item-${avatar.name}`}\n          className={styles.item}\n          aria-label={`Avatar item of ${avatar.name}`}\n          style={\n            {\n              '--avatar-z-index': visibleAvatars.length - index,\n            } as React.CSSProperties\n          }\n        >\n          <Avatar\n            {...avatar}\n            size={compact ? 'md' : 'lg'}\n            bgColor={avatar?.bgColor ?? theme.colors.neutral.grey.light}\n            textColor={avatar?.textColor ?? theme.colors.neutral.ink.base}\n          />\n        </li>\n      ))}\n    </ul>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;AASO,MAAM,WAAW,GAAG,CAAC,EAC1B,OAAO,EACP,UAAU,GAAG,CAAC,EACd,OAAO,GAAG,KAAK,EACf,SAAS,GAAG,kBAAkB,EAC9B,YAAY,GAAG,KAAK,EACpB,SAAS,EACT,GAAG,SAAS,EACK,KAAI;AACrB,IAAA,MAAM,cAAc,GAAG,OAAO,CAAC,KAAK,CAClC,CAAC,EACD,OAAO,CAAC,MAAM,GAAG,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,UAAU,GAAG,CAAC,CAAC,GAAG,UAAU,CACvE;AACD,IAAA,MAAM,aAAa,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,MAAM,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;AAElF,IAAA,QACEA,cAAI,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,EAAc,YAAA,EAAA,SAAS,KAAM,SAAS,EAAA;QAC3F,aAAa,CAAC,MAAM,GAAG,CAAC,KACvBA,cACE,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,GAAG,EAAC,mCAAmC,EACvC,SAAS,EAAE,MAAM,CAAC,IAAI,EAAA,YAAA,EACV,CAAG,EAAA,aAAa,CAAC,MAAM,CAAA,iBAAA,CAAmB,EACtD,KAAK,EACH;AACE,gBAAA,kBAAkB,EAAE,UAAU;AACR,aAAA,EAAA;YAG1BA,cAAC,CAAA,aAAA,CAAA,MAAM,EACL,EAAA,IAAI,EAAE,CAAA,EAAG,aAAa,CAAC,MAAM,CAAG,CAAA,CAAA,EAChC,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,4BAA4B,EACtC,YAAY,EAAE,YAAY,EAC1B,CAAA,CACC,CACN;QACA,cAAc,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,KAAI;;YAAC,QACrCA,qCACE,GAAG,EAAE,qBAAqB,MAAM,CAAC,IAAI,CAAA,CAAE,EACvC,SAAS,EAAE,MAAM,CAAC,IAAI,EAAA,YAAA,EACV,CAAkB,eAAA,EAAA,MAAM,CAAC,IAAI,CAAA,CAAE,EAC3C,KAAK,EACH;AACE,oBAAA,kBAAkB,EAAE,cAAc,CAAC,MAAM,GAAG,KAAK;AAC3B,iBAAA,EAAA;AAG1B,gBAAAA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAA,GACD,MAAM,EACV,IAAI,EAAE,OAAO,GAAG,IAAI,GAAG,IAAI,EAC3B,OAAO,EAAE,CAAA,EAAA,GAAA,MAAM,KAAN,IAAA,IAAA,MAAM,KAAN,SAAA,GAAA,SAAA,GAAA,MAAM,CAAE,OAAO,MAAI,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,EAC3D,SAAS,EAAE,CAAA,EAAA,GAAA,MAAM,KAAA,IAAA,IAAN,MAAM,KAAA,SAAA,GAAA,SAAA,GAAN,MAAM,CAAE,SAAS,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAI,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAAA,CAC7D,CACC;SACN,CAAC,CACC;AAET;;;;"}

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

@@ -1,9 +0,0 @@
-'use strict';
-
-var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
-
-___$insertStyle("._list_1tlva_1 {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n._item_1tlva_10 {\n  position: relative;\n  border-radius: var(--radius-full);\n  z-index: var(--avatar-z-index, 1);\n}\n._item_1tlva_10:not(:first-child) {\n  margin-left: calc(var(--sizes-3) * -1);\n}");
-var styles = {"list":"_list_1tlva_1","item":"_item_1tlva_10"};
-
-module.exports = styles;
-//# sourceMappingURL=AvatarGroup.module.scss.cjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"AvatarGroup.module.scss.cjs","sources":["../../../src/components/AvatarGroup/AvatarGroup.module.scss"],"sourcesContent":[".list {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.item {\n  position: relative;\n  border-radius: var(--radius-full);\n  z-index: var(--avatar-z-index, 1);\n\n  &:not(:first-child) {\n    margin-left: calc(var(--sizes-3) * -1);\n  }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,uVAAA;AACA,aAAA,CAAA,MAAA,CAAA,eAAA,CAAA,MAAA,CAAA,gBAAA;;;;"}

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

@@ -1,7 +0,0 @@
-import insertStyle from '../../_virtual/____insertStyle.js';
-
-insertStyle("._list_1tlva_1 {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n._item_1tlva_10 {\n  position: relative;\n  border-radius: var(--radius-full);\n  z-index: var(--avatar-z-index, 1);\n}\n._item_1tlva_10:not(:first-child) {\n  margin-left: calc(var(--sizes-3) * -1);\n}");
-var styles = {"list":"_list_1tlva_1","item":"_item_1tlva_10"};
-
-export { styles as default };
-//# sourceMappingURL=AvatarGroup.module.scss.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"AvatarGroup.module.scss.js","sources":["../../../src/components/AvatarGroup/AvatarGroup.module.scss"],"sourcesContent":[".list {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.item {\n  position: relative;\n  border-radius: var(--radius-full);\n  z-index: var(--avatar-z-index, 1);\n\n  &:not(:first-child) {\n    margin-left: calc(var(--sizes-3) * -1);\n  }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,uVAAA;AACA,aAAA,CAAA,MAAA,CAAA,eAAA,CAAA,MAAA,CAAA,gBAAA;;;;"}

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

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

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

@@ -1,15 +0,0 @@
-/// <reference types="react" />
-import { AvatarProps } from '../Avatar/types';
-/** AvatarGroup properties. */
-export type AvatarGroupProps = React.HTMLAttributes<HTMLUListElement> & {
-    /** List of avatars to display */
-    avatars: Omit<AvatarProps, 'hasIndicator'>[];
-    /** Number of avatars to show before collapsing. Default is 3 */
-    maxVisible?: number;
-    /** Switches all avatars from lg to md size */
-    compact?: boolean;
-    /** Accessible label for the avatar group list */
-    ariaLabel?: string;
-    /** Controls the alert indicator on the overflow (“remaining count”) avatar */
-    hasIndicator?: boolean;
-};