@veeqo/ui 13.5.0 → 13.5.2

package/dist/components/AvatarGroup/AvatarGroup.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 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

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGroup.cjs","sources":["../../../src/components/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import React from 'react';\nimport { Avatar } from '../Avatar';\nimport { theme } from '../../theme';\nimport { AvatarProps } from '../Avatar/types';\nimport { buildClassnames } from '../../utils';\nimport styles from './AvatarGroup.module.scss';\n\ntype AvatarGroupProps = React.HTMLAttributes<HTMLUListElement> & {\n  avatars: Omit<AvatarProps, 'hasIndicator'>[];\n  maxVisible?: number;\n  compact?: boolean;\n  ariaLabel?: string;\n  hasIndicator?: boolean;\n};\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":";;;;;;;;;;;;;AAeO,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.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 './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

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGroup.js","sources":["../../../src/components/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import React from 'react';\nimport { Avatar } from '../Avatar';\nimport { theme } from '../../theme';\nimport { AvatarProps } from '../Avatar/types';\nimport { buildClassnames } from '../../utils';\nimport styles from './AvatarGroup.module.scss';\n\ntype AvatarGroupProps = React.HTMLAttributes<HTMLUListElement> & {\n  avatars: Omit<AvatarProps, 'hasIndicator'>[];\n  maxVisible?: number;\n  compact?: boolean;\n  ariaLabel?: string;\n  hasIndicator?: boolean;\n};\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":";;;;;;;AAeO,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

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._list_1d50a_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_1d50a_10 {\n  position: relative;\n  margin-left: calc(var(--sizes-3) * -1);\n  border-radius: var(--radius-full);\n  z-index: var(--avatar-z-index, 1);\n}");
+var styles = {"list":"_list_1d50a_1","item":"_item_1d50a_10"};
+
+module.exports = styles;
+//# sourceMappingURL=AvatarGroup.module.scss.cjs.map

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

@@ -0,0 +1 @@
+{"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  margin-left: calc(var(--sizes-3) * -1);\n  border-radius: var(--radius-full);\n  z-index: var(--avatar-z-index, 1);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,+SAAA;AACA,aAAA,CAAA,MAAA,CAAA,eAAA,CAAA,MAAA,CAAA,gBAAA;;;;"}

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

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+
+insertStyle("._list_1d50a_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_1d50a_10 {\n  position: relative;\n  margin-left: calc(var(--sizes-3) * -1);\n  border-radius: var(--radius-full);\n  z-index: var(--avatar-z-index, 1);\n}");
+var styles = {"list":"_list_1d50a_1","item":"_item_1d50a_10"};
+
+export { styles as default };
+//# sourceMappingURL=AvatarGroup.module.scss.js.map

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

@@ -0,0 +1 @@
+{"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  margin-left: calc(var(--sizes-3) * -1);\n  border-radius: var(--radius-full);\n  z-index: var(--avatar-z-index, 1);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,+SAAA;AACA,aAAA,CAAA,MAAA,CAAA,eAAA,CAAA,MAAA,CAAA,gBAAA;;;;"}

package/dist/components/SectionLayout/SectionLayout.cjs

@@ -14,7 +14,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 function SectionLayout({ children, title, description, accessorySlot, className, ...otherProps }) {
     const classNames = buildClassnames.buildClassnames([SectionLayout_module.grid, className]);
     return (React__default.default.createElement("div", { className: classNames, ...otherProps },
-        React__default.default.createElement(FlexCol.FlexCol, null,
+        React__default.default.createElement(FlexCol.FlexCol, { alignItems: "flex-start" },
             React__default.default.createElement(Text.Text, { variant: "headingSmall" }, title),
             description && React__default.default.createElement(Text.Text, { variant: "hintText" }, description),
             accessorySlot),

package/dist/components/SectionLayout/SectionLayout.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SectionLayout.cjs","sources":["../../../src/components/SectionLayout/SectionLayout.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../utils';\nimport { FlexCol } from '../Flex/FlexCol';\nimport { Text } from '../Text';\nimport styles from './SectionLayout.module.scss';\n\ntype SectionLayoutProps = React.HTMLAttributes<HTMLDivElement> & {\n  children: React.ReactNode;\n  title: string;\n  description?: string;\n  accessorySlot?: React.ReactNode;\n};\n\nexport function SectionLayout({\n  children,\n  title,\n  description,\n  accessorySlot,\n  className,\n  ...otherProps\n}: SectionLayoutProps) {\n  const classNames = buildClassnames([styles.grid, className]);\n  return (\n    <div className={classNames} {...otherProps}>\n      <FlexCol>\n        <Text variant=\"headingSmall\">{title}</Text>\n        {description && <Text variant=\"hintText\">{description}</Text>}\n        {accessorySlot}\n      </FlexCol>\n      <div>{children}</div>\n    </div>\n  );\n}\n"],"names":["buildClassnames","styles","React","FlexCol","Text"],"mappings":";;;;;;;;;;;;;SAagB,aAAa,CAAC,EAC5B,QAAQ,EACR,KAAK,EACL,WAAW,EACX,aAAa,EACb,SAAS,EACT,GAAG,UAAU,EACM,EAAA;AACnB,IAAA,MAAM,UAAU,GAAGA,+BAAe,CAAC,CAACC,oBAAM,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;AAC5D,IAAA,QACEC,sBAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,UAAU,KAAM,UAAU,EAAA;AACxC,QAAAA,sBAAA,CAAA,aAAA,CAACC,eAAO,EAAA,IAAA;AACN,YAAAD,sBAAA,CAAA,aAAA,CAACE,SAAI,EAAC,EAAA,OAAO,EAAC,cAAc,EAAA,EAAE,KAAK,CAAQ;YAC1C,WAAW,IAAIF,qCAACE,SAAI,EAAA,EAAC,OAAO,EAAC,UAAU,EAAE,EAAA,WAAW,CAAQ;AAC5D,YAAA,aAAa,CACN;AACV,QAAAF,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA,EAAM,QAAQ,CAAO,CACjB;AAEV;;;;"}
+{"version":3,"file":"SectionLayout.cjs","sources":["../../../src/components/SectionLayout/SectionLayout.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../utils';\nimport { FlexCol } from '../Flex/FlexCol';\nimport { Text } from '../Text';\nimport styles from './SectionLayout.module.scss';\n\ntype SectionLayoutProps = React.HTMLAttributes<HTMLDivElement> & {\n  children: React.ReactNode;\n  title: string;\n  description?: string;\n  accessorySlot?: React.ReactNode;\n};\n\nexport function SectionLayout({\n  children,\n  title,\n  description,\n  accessorySlot,\n  className,\n  ...otherProps\n}: SectionLayoutProps) {\n  const classNames = buildClassnames([styles.grid, className]);\n  return (\n    <div className={classNames} {...otherProps}>\n      <FlexCol alignItems=\"flex-start\">\n        <Text variant=\"headingSmall\">{title}</Text>\n        {description && <Text variant=\"hintText\">{description}</Text>}\n        {accessorySlot}\n      </FlexCol>\n      <div>{children}</div>\n    </div>\n  );\n}\n"],"names":["buildClassnames","styles","React","FlexCol","Text"],"mappings":";;;;;;;;;;;;;SAagB,aAAa,CAAC,EAC5B,QAAQ,EACR,KAAK,EACL,WAAW,EACX,aAAa,EACb,SAAS,EACT,GAAG,UAAU,EACM,EAAA;AACnB,IAAA,MAAM,UAAU,GAAGA,+BAAe,CAAC,CAACC,oBAAM,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;AAC5D,IAAA,QACEC,sBAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,UAAU,KAAM,UAAU,EAAA;AACxC,QAAAA,sBAAA,CAAA,aAAA,CAACC,eAAO,EAAA,EAAC,UAAU,EAAC,YAAY,EAAA;AAC9B,YAAAD,sBAAA,CAAA,aAAA,CAACE,SAAI,EAAC,EAAA,OAAO,EAAC,cAAc,EAAA,EAAE,KAAK,CAAQ;YAC1C,WAAW,IAAIF,qCAACE,SAAI,EAAA,EAAC,OAAO,EAAC,UAAU,EAAE,EAAA,WAAW,CAAQ;AAC5D,YAAA,aAAa,CACN;AACV,QAAAF,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA,EAAM,QAAQ,CAAO,CACjB;AAEV;;;;"}

package/dist/components/SectionLayout/SectionLayout.js

@@ -8,7 +8,7 @@ import styles from './SectionLayout.module.scss.js';
 function SectionLayout({ children, title, description, accessorySlot, className, ...otherProps }) {
     const classNames = buildClassnames([styles.grid, className]);
     return (React__default.createElement("div", { className: classNames, ...otherProps },
-        React__default.createElement(FlexCol, null,
+        React__default.createElement(FlexCol, { alignItems: "flex-start" },
             React__default.createElement(Text, { variant: "headingSmall" }, title),
             description && React__default.createElement(Text, { variant: "hintText" }, description),
             accessorySlot),

package/dist/components/SectionLayout/SectionLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"SectionLayout.js","sources":["../../../src/components/SectionLayout/SectionLayout.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../utils';\nimport { FlexCol } from '../Flex/FlexCol';\nimport { Text } from '../Text';\nimport styles from './SectionLayout.module.scss';\n\ntype SectionLayoutProps = React.HTMLAttributes<HTMLDivElement> & {\n  children: React.ReactNode;\n  title: string;\n  description?: string;\n  accessorySlot?: React.ReactNode;\n};\n\nexport function SectionLayout({\n  children,\n  title,\n  description,\n  accessorySlot,\n  className,\n  ...otherProps\n}: SectionLayoutProps) {\n  const classNames = buildClassnames([styles.grid, className]);\n  return (\n    <div className={classNames} {...otherProps}>\n      <FlexCol>\n        <Text variant=\"headingSmall\">{title}</Text>\n        {description && <Text variant=\"hintText\">{description}</Text>}\n        {accessorySlot}\n      </FlexCol>\n      <div>{children}</div>\n    </div>\n  );\n}\n"],"names":["React"],"mappings":";;;;;;;SAagB,aAAa,CAAC,EAC5B,QAAQ,EACR,KAAK,EACL,WAAW,EACX,aAAa,EACb,SAAS,EACT,GAAG,UAAU,EACM,EAAA;AACnB,IAAA,MAAM,UAAU,GAAG,eAAe,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;AAC5D,IAAA,QACEA,cAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,UAAU,KAAM,UAAU,EAAA;AACxC,QAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,IAAA;AACN,YAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAC,EAAA,OAAO,EAAC,cAAc,EAAA,EAAE,KAAK,CAAQ;YAC1C,WAAW,IAAIA,6BAAC,IAAI,EAAA,EAAC,OAAO,EAAC,UAAU,EAAE,EAAA,WAAW,CAAQ;AAC5D,YAAA,aAAa,CACN;AACV,QAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA,EAAM,QAAQ,CAAO,CACjB;AAEV;;;;"}
+{"version":3,"file":"SectionLayout.js","sources":["../../../src/components/SectionLayout/SectionLayout.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../utils';\nimport { FlexCol } from '../Flex/FlexCol';\nimport { Text } from '../Text';\nimport styles from './SectionLayout.module.scss';\n\ntype SectionLayoutProps = React.HTMLAttributes<HTMLDivElement> & {\n  children: React.ReactNode;\n  title: string;\n  description?: string;\n  accessorySlot?: React.ReactNode;\n};\n\nexport function SectionLayout({\n  children,\n  title,\n  description,\n  accessorySlot,\n  className,\n  ...otherProps\n}: SectionLayoutProps) {\n  const classNames = buildClassnames([styles.grid, className]);\n  return (\n    <div className={classNames} {...otherProps}>\n      <FlexCol alignItems=\"flex-start\">\n        <Text variant=\"headingSmall\">{title}</Text>\n        {description && <Text variant=\"hintText\">{description}</Text>}\n        {accessorySlot}\n      </FlexCol>\n      <div>{children}</div>\n    </div>\n  );\n}\n"],"names":["React"],"mappings":";;;;;;;SAagB,aAAa,CAAC,EAC5B,QAAQ,EACR,KAAK,EACL,WAAW,EACX,aAAa,EACb,SAAS,EACT,GAAG,UAAU,EACM,EAAA;AACnB,IAAA,MAAM,UAAU,GAAG,eAAe,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;AAC5D,IAAA,QACEA,cAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,UAAU,KAAM,UAAU,EAAA;AACxC,QAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,UAAU,EAAC,YAAY,EAAA;AAC9B,YAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAC,EAAA,OAAO,EAAC,cAAc,EAAA,EAAE,KAAK,CAAQ;YAC1C,WAAW,IAAIA,6BAAC,IAAI,EAAA,EAAC,OAAO,EAAC,UAAU,EAAE,EAAA,WAAW,CAAQ;AAC5D,YAAA,aAAa,CACN;AACV,QAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA,EAAM,QAAQ,CAAO,CACjB;AAEV;;;;"}

package/dist/components/index.d.ts

@@ -5,6 +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 { Badge } from './Badge';
 export { Banner } from './Banner';
 export { BaseContainer } from './BaseContainer';

package/dist/index.cjs

@@ -8,6 +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 Badge = require('./components/Badge/Badge.cjs');
 var Banner = require('./components/Banner/Banner.cjs');
 var BaseContainer = require('./components/BaseContainer/BaseContainer.cjs');
@@ -345,6 +346,7 @@ exports.isRelativeUrl = urlUtils.isRelativeUrl;
 exports.shouldAddPrefix = urlUtils.shouldAddPrefix;
 exports.AnimatedDropdown = AnimatedDropdown.AnimatedDropdown;
 exports.Avatar = Avatar.Avatar;
+exports.AvatarGroup = AvatarGroup.AvatarGroup;
 exports.Badge = Badge.Badge;
 exports.Banner = Banner.Banner;
 exports.BaseContainer = BaseContainer.BaseContainer;

package/dist/index.cjs.map

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

package/dist/index.js

@@ -6,6 +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 { Badge } from './components/Badge/Badge.js';
 export { Banner } from './components/Banner/Banner.js';
 export { BaseContainer } from './components/BaseContainer/BaseContainer.js';

package/dist/index.js.map

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

package/package.json

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