@veeqo/ui 13.4.5 → 13.5.1

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/Container/Container.cjs

@@ -0,0 +1,37 @@
+'use strict';
+
+var React = require('react');
+var buildClassnames = require('../../utils/buildClassnames.cjs');
+require('uid/secure');
+var Container_module = require('./Container.module.scss.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const sizeClasses = {
+    small: Container_module.small,
+    medium: Container_module.medium,
+    large: Container_module.large,
+};
+/**
+ * Warning: This component uses container queries, and they don't work well when used on an element that is a direct child
+ * of a flexbox or grid container. This is because the element doesn't have a defined width, so the container
+ * query can't be resolved correctly.
+ *
+ * If you need to use multiple Container components stacked vertically, consider wrapping them in a div and using
+ * margins to apply spacing between them if necessary.
+ */
+function Container({ size, children, className, ...otherProps }) {
+    const classNames = buildClassnames.buildClassnames([
+        className,
+        Container_module.container,
+        size && Container_module.centered,
+        size && sizeClasses[size],
+    ]);
+    return (React__default.default.createElement("div", { className: classNames, ...otherProps }, children));
+}
+
+exports.Container = Container;
+exports.sizeClasses = sizeClasses;
+//# sourceMappingURL=Container.cjs.map

package/dist/components/Container/Container.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Container.cjs","sources":["../../../src/components/Container/Container.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../utils';\nimport styles from './Container.module.scss';\n\nexport const sizeClasses = {\n  small: styles.small,\n  medium: styles.medium,\n  large: styles.large,\n};\n\nexport type ContainerSize = keyof typeof sizeClasses;\n\nexport type ContainerProps = React.HTMLAttributes<HTMLDivElement> & {\n  size?: ContainerSize;\n  children: React.ReactNode;\n};\n\n/**\n * Warning: This component uses container queries, and they don't work well when used on an element that is a direct child\n * of a flexbox or grid container. This is because the element doesn't have a defined width, so the container\n * query can't be resolved correctly.\n *\n * If you need to use multiple Container components stacked vertically, consider wrapping them in a div and using\n * margins to apply spacing between them if necessary.\n */\nexport function Container({ size, children, className, ...otherProps }: ContainerProps) {\n  const classNames = buildClassnames([\n    className,\n    styles.container,\n    size && styles.centered,\n    size && sizeClasses[size],\n  ]);\n\n  return (\n    <div className={classNames} {...otherProps}>\n      {children}\n    </div>\n  );\n}\n"],"names":["styles","buildClassnames","React"],"mappings":";;;;;;;;;;;AAIa,MAAA,WAAW,GAAG;IACzB,KAAK,EAAEA,gBAAM,CAAC,KAAK;IACnB,MAAM,EAAEA,gBAAM,CAAC,MAAM;IACrB,KAAK,EAAEA,gBAAM,CAAC,KAAK;;AAUrB;;;;;;;AAOG;AACa,SAAA,SAAS,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,UAAU,EAAkB,EAAA;IACpF,MAAM,UAAU,GAAGC,+BAAe,CAAC;QACjC,SAAS;AACT,QAAAD,gBAAM,CAAC,SAAS;QAChB,IAAI,IAAIA,gBAAM,CAAC,QAAQ;AACvB,QAAA,IAAI,IAAI,WAAW,CAAC,IAAI,CAAC;AAC1B,KAAA,CAAC;IAEF,QACEE,sBAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,UAAU,EAAM,GAAA,UAAU,EACvC,EAAA,QAAQ,CACL;AAEV;;;;;"}

package/dist/components/Container/Container.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+export declare const sizeClasses: {
+    small: any;
+    medium: any;
+    large: any;
+};
+export type ContainerSize = keyof typeof sizeClasses;
+export type ContainerProps = React.HTMLAttributes<HTMLDivElement> & {
+    size?: ContainerSize;
+    children: React.ReactNode;
+};
+/**
+ * Warning: This component uses container queries, and they don't work well when used on an element that is a direct child
+ * of a flexbox or grid container. This is because the element doesn't have a defined width, so the container
+ * query can't be resolved correctly.
+ *
+ * If you need to use multiple Container components stacked vertically, consider wrapping them in a div and using
+ * margins to apply spacing between them if necessary.
+ */
+export declare function Container({ size, children, className, ...otherProps }: ContainerProps): React.JSX.Element;

package/dist/components/Container/Container.js

@@ -0,0 +1,30 @@
+import React__default from 'react';
+import { buildClassnames } from '../../utils/buildClassnames.js';
+import 'uid/secure';
+import styles from './Container.module.scss.js';
+
+const sizeClasses = {
+    small: styles.small,
+    medium: styles.medium,
+    large: styles.large,
+};
+/**
+ * Warning: This component uses container queries, and they don't work well when used on an element that is a direct child
+ * of a flexbox or grid container. This is because the element doesn't have a defined width, so the container
+ * query can't be resolved correctly.
+ *
+ * If you need to use multiple Container components stacked vertically, consider wrapping them in a div and using
+ * margins to apply spacing between them if necessary.
+ */
+function Container({ size, children, className, ...otherProps }) {
+    const classNames = buildClassnames([
+        className,
+        styles.container,
+        size && styles.centered,
+        size && sizeClasses[size],
+    ]);
+    return (React__default.createElement("div", { className: classNames, ...otherProps }, children));
+}
+
+export { Container, sizeClasses };
+//# sourceMappingURL=Container.js.map

package/dist/components/Container/Container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Container.js","sources":["../../../src/components/Container/Container.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../utils';\nimport styles from './Container.module.scss';\n\nexport const sizeClasses = {\n  small: styles.small,\n  medium: styles.medium,\n  large: styles.large,\n};\n\nexport type ContainerSize = keyof typeof sizeClasses;\n\nexport type ContainerProps = React.HTMLAttributes<HTMLDivElement> & {\n  size?: ContainerSize;\n  children: React.ReactNode;\n};\n\n/**\n * Warning: This component uses container queries, and they don't work well when used on an element that is a direct child\n * of a flexbox or grid container. This is because the element doesn't have a defined width, so the container\n * query can't be resolved correctly.\n *\n * If you need to use multiple Container components stacked vertically, consider wrapping them in a div and using\n * margins to apply spacing between them if necessary.\n */\nexport function Container({ size, children, className, ...otherProps }: ContainerProps) {\n  const classNames = buildClassnames([\n    className,\n    styles.container,\n    size && styles.centered,\n    size && sizeClasses[size],\n  ]);\n\n  return (\n    <div className={classNames} {...otherProps}>\n      {children}\n    </div>\n  );\n}\n"],"names":["React"],"mappings":";;;;;AAIa,MAAA,WAAW,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC,KAAK;IACnB,MAAM,EAAE,MAAM,CAAC,MAAM;IACrB,KAAK,EAAE,MAAM,CAAC,KAAK;;AAUrB;;;;;;;AAOG;AACa,SAAA,SAAS,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,UAAU,EAAkB,EAAA;IACpF,MAAM,UAAU,GAAG,eAAe,CAAC;QACjC,SAAS;AACT,QAAA,MAAM,CAAC,SAAS;QAChB,IAAI,IAAI,MAAM,CAAC,QAAQ;AACvB,QAAA,IAAI,IAAI,WAAW,CAAC,IAAI,CAAC;AAC1B,KAAA,CAAC;IAEF,QACEA,cAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,UAAU,EAAM,GAAA,UAAU,EACvC,EAAA,QAAQ,CACL;AAEV;;;;"}

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

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._container_tqie6_1 {\n  container-type: inline-size;\n}\n\n._centered_tqie6_5 {\n  margin-inline: auto;\n  padding-inline: var(--sizes-6);\n}\n\n._small_tqie6_10 {\n  max-width: 540px;\n}\n\n._medium_tqie6_14 {\n  max-width: 720px;\n}\n\n._large_tqie6_18 {\n  max-width: 960px;\n}");
+var styles = {"container":"_container_tqie6_1","centered":"_centered_tqie6_5","small":"_small_tqie6_10","medium":"_medium_tqie6_14","large":"_large_tqie6_18"};
+
+module.exports = styles;
+//# sourceMappingURL=Container.module.scss.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Container.module.scss.cjs","sources":["../../../src/components/Container/Container.module.scss"],"sourcesContent":[".container {\n  container-type: inline-size;\n}\n\n.centered {\n  margin-inline: auto;\n  padding-inline: var(--sizes-6);\n}\n\n.small {\n  max-width: 540px;\n}\n\n.medium {\n  max-width: 720px;\n}\n\n.large {\n  max-width: 960px;\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,2RAAA;;;;;"}

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

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+
+insertStyle("._container_tqie6_1 {\n  container-type: inline-size;\n}\n\n._centered_tqie6_5 {\n  margin-inline: auto;\n  padding-inline: var(--sizes-6);\n}\n\n._small_tqie6_10 {\n  max-width: 540px;\n}\n\n._medium_tqie6_14 {\n  max-width: 720px;\n}\n\n._large_tqie6_18 {\n  max-width: 960px;\n}");
+var styles = {"container":"_container_tqie6_1","centered":"_centered_tqie6_5","small":"_small_tqie6_10","medium":"_medium_tqie6_14","large":"_large_tqie6_18"};
+
+export { styles as default };
+//# sourceMappingURL=Container.module.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Container.module.scss.js","sources":["../../../src/components/Container/Container.module.scss"],"sourcesContent":[".container {\n  container-type: inline-size;\n}\n\n.centered {\n  margin-inline: auto;\n  padding-inline: var(--sizes-6);\n}\n\n.small {\n  max-width: 540px;\n}\n\n.medium {\n  max-width: 720px;\n}\n\n.large {\n  max-width: 960px;\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,2RAAA;;;;;"}

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

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

package/dist/components/Divider/Divider.cjs

@@ -0,0 +1,18 @@
+'use strict';
+
+var React = require('react');
+var buildClassnames = require('../../utils/buildClassnames.cjs');
+require('uid/secure');
+var Divider_module = require('./Divider.module.scss.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+function Divider({ className, ...otherProps }) {
+    const classNames = buildClassnames.buildClassnames([Divider_module.divider, className]);
+    return React__default.default.createElement("div", { className: classNames, ...otherProps });
+}
+
+exports.Divider = Divider;
+//# sourceMappingURL=Divider.cjs.map

package/dist/components/Divider/Divider.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.cjs","sources":["../../../src/components/Divider/Divider.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../utils';\nimport styles from './Divider.module.scss';\n\ntype DividerProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport function Divider({ className, ...otherProps }: DividerProps) {\n  const classNames = buildClassnames([styles.divider, className]);\n  return <div className={classNames} {...otherProps} />;\n}\n"],"names":["buildClassnames","styles","React"],"mappings":";;;;;;;;;;;AAMM,SAAU,OAAO,CAAC,EAAE,SAAS,EAAE,GAAG,UAAU,EAAgB,EAAA;AAChE,IAAA,MAAM,UAAU,GAAGA,+BAAe,CAAC,CAACC,cAAM,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;AAC/D,IAAA,OAAOC,8CAAK,SAAS,EAAE,UAAU,EAAM,GAAA,UAAU,GAAI;AACvD;;;;"}

package/dist/components/Divider/Divider.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+type DividerProps = React.HTMLAttributes<HTMLDivElement>;
+export declare function Divider({ className, ...otherProps }: DividerProps): React.JSX.Element;
+export {};

package/dist/components/Divider/Divider.js

@@ -0,0 +1,12 @@
+import React__default from 'react';
+import { buildClassnames } from '../../utils/buildClassnames.js';
+import 'uid/secure';
+import styles from './Divider.module.scss.js';
+
+function Divider({ className, ...otherProps }) {
+    const classNames = buildClassnames([styles.divider, className]);
+    return React__default.createElement("div", { className: classNames, ...otherProps });
+}
+
+export { Divider };
+//# sourceMappingURL=Divider.js.map

package/dist/components/Divider/Divider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.js","sources":["../../../src/components/Divider/Divider.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../utils';\nimport styles from './Divider.module.scss';\n\ntype DividerProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport function Divider({ className, ...otherProps }: DividerProps) {\n  const classNames = buildClassnames([styles.divider, className]);\n  return <div className={classNames} {...otherProps} />;\n}\n"],"names":["React"],"mappings":";;;;;AAMM,SAAU,OAAO,CAAC,EAAE,SAAS,EAAE,GAAG,UAAU,EAAgB,EAAA;AAChE,IAAA,MAAM,UAAU,GAAG,eAAe,CAAC,CAAC,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;AAC/D,IAAA,OAAOA,sCAAK,SAAS,EAAE,UAAU,EAAM,GAAA,UAAU,GAAI;AACvD;;;;"}

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

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._divider_1bzcp_1 {\n  height: var(--sizes-line);\n  background-color: var(--colors-neutral-grey-base);\n}");
+var styles = {"divider":"_divider_1bzcp_1"};
+
+module.exports = styles;
+//# sourceMappingURL=Divider.module.scss.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.module.scss.cjs","sources":["../../../src/components/Divider/Divider.module.scss"],"sourcesContent":[".divider {\n  height: var(--sizes-line);\n  background-color: var(--colors-neutral-grey-base);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,4GAAA;AACA,aAAA,CAAA,SAAA,CAAA,kBAAA;;;;"}

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

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+
+insertStyle("._divider_1bzcp_1 {\n  height: var(--sizes-line);\n  background-color: var(--colors-neutral-grey-base);\n}");
+var styles = {"divider":"_divider_1bzcp_1"};
+
+export { styles as default };
+//# sourceMappingURL=Divider.module.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.module.scss.js","sources":["../../../src/components/Divider/Divider.module.scss"],"sourcesContent":[".divider {\n  height: var(--sizes-line);\n  background-color: var(--colors-neutral-grey-base);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,4GAAA;AACA,aAAA,CAAA,SAAA,CAAA,kBAAA;;;;"}

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

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

package/dist/components/SectionLayout/SectionLayout.cjs

@@ -0,0 +1,25 @@
+'use strict';
+
+var React = require('react');
+var buildClassnames = require('../../utils/buildClassnames.cjs');
+require('uid/secure');
+var FlexCol = require('../Flex/FlexCol/FlexCol.cjs');
+var Text = require('../Text/Text.cjs');
+var SectionLayout_module = require('./SectionLayout.module.scss.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+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(Text.Text, { variant: "headingSmall" }, title),
+            description && React__default.default.createElement(Text.Text, { variant: "hintText" }, description),
+            accessorySlot),
+        React__default.default.createElement("div", null, children)));
+}
+
+exports.SectionLayout = SectionLayout;
+//# sourceMappingURL=SectionLayout.cjs.map

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

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

package/dist/components/SectionLayout/SectionLayout.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+type SectionLayoutProps = React.HTMLAttributes<HTMLDivElement> & {
+    children: React.ReactNode;
+    title: string;
+    description?: string;
+    accessorySlot?: React.ReactNode;
+};
+export declare function SectionLayout({ children, title, description, accessorySlot, className, ...otherProps }: SectionLayoutProps): React.JSX.Element;
+export {};

package/dist/components/SectionLayout/SectionLayout.js

@@ -0,0 +1,19 @@
+import React__default from 'react';
+import { buildClassnames } from '../../utils/buildClassnames.js';
+import 'uid/secure';
+import { FlexCol } from '../Flex/FlexCol/FlexCol.js';
+import { Text } from '../Text/Text.js';
+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(Text, { variant: "headingSmall" }, title),
+            description && React__default.createElement(Text, { variant: "hintText" }, description),
+            accessorySlot),
+        React__default.createElement("div", null, children)));
+}
+
+export { SectionLayout };
+//# sourceMappingURL=SectionLayout.js.map

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

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

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

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._grid_o5hjx_1 {\n  display: grid;\n  grid-template-columns: 1fr 2fr;\n  gap: var(--sizes-10);\n}\n\n@container (width < 600px) {\n  ._grid_o5hjx_1 {\n    grid-template-columns: 1fr;\n    gap: var(--sizes-6);\n  }\n}");
+var styles = {"grid":"_grid_o5hjx_1"};
+
+module.exports = styles;
+//# sourceMappingURL=SectionLayout.module.scss.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SectionLayout.module.scss.cjs","sources":["../../../src/components/SectionLayout/SectionLayout.module.scss"],"sourcesContent":[".grid {\n  display: grid;\n  grid-template-columns: 1fr 2fr;\n  gap: var(--sizes-10);\n}\n\n@container (width < 600px) {\n  .grid {\n    grid-template-columns: 1fr;\n    gap: var(--sizes-6);\n  }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,0NAAA;AACA,aAAA,CAAA,MAAA,CAAA,eAAA;;;;"}

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

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+
+insertStyle("._grid_o5hjx_1 {\n  display: grid;\n  grid-template-columns: 1fr 2fr;\n  gap: var(--sizes-10);\n}\n\n@container (width < 600px) {\n  ._grid_o5hjx_1 {\n    grid-template-columns: 1fr;\n    gap: var(--sizes-6);\n  }\n}");
+var styles = {"grid":"_grid_o5hjx_1"};
+
+export { styles as default };
+//# sourceMappingURL=SectionLayout.module.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SectionLayout.module.scss.js","sources":["../../../src/components/SectionLayout/SectionLayout.module.scss"],"sourcesContent":[".grid {\n  display: grid;\n  grid-template-columns: 1fr 2fr;\n  gap: var(--sizes-10);\n}\n\n@container (width < 600px) {\n  .grid {\n    grid-template-columns: 1fr;\n    gap: var(--sizes-6);\n  }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,0NAAA;AACA,aAAA,CAAA,MAAA,CAAA,eAAA;;;;"}

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

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

package/dist/components/_internal/Placeholder.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+/**
+ * A visual placeholder component for internal use only.
+ *
+ * This component is intended to be used within stories or development environments
+ * to visually represent empty slots or areas where content will be placed.
+ * It displays a styled box with optional children content.
+ *
+ * @internal
+ * @param style - Optional custom styles to override the default placeholder styles.
+ * @param children - Optional React nodes to display inside the placeholder.
+ */
+export declare function Placeholder({ style, children }: any): React.JSX.Element;

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';
@@ -16,6 +17,7 @@ export { CardHeader } from './CardHeader';
 export { Checkbox } from './Checkbox';
 export { Choice } from './Choice';
 export { ChoiceList } from './ChoiceList';
+export { Container } from './Container';
 export { CopyToClipboard } from './CopyToClipboard';
 export { DateInputField } from './DateInputField';
 export { DatePicker } from './DatePicker';
@@ -24,6 +26,7 @@ export { DataTable, ColumnWidthsType, ColumnConfig, useCellWidths, useColumns, u
 export { DescriptionList } from './DescriptionList';
 export { DetailPage } from './DetailPage';
 export { DimensionsInput } from './DimensionsInput';
+export { Divider } from './Divider';
 export { Dropdown } from './Dropdown';
 export { FilterTag } from './FilterTag';
 export { Grid } from './Grid';
@@ -41,6 +44,7 @@ export { PriceInput } from './PriceInput';
 export { Radio } from './Radio';
 export { ScreenReaderOnly } from './ScreenReaderOnly';
 export { Search, SearchProps } from './Search';
+export { SectionLayout } from './SectionLayout';
 export { SegmentedControl } from './SegmentedControl';
 export { Select, SelectOption } from './Select';
 export { ShortcutKeys } from './ShortcutKeys';

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');
@@ -21,6 +22,7 @@ var CardHeader = require('./components/CardHeader/CardHeader.cjs');
 var Checkbox = require('./components/Checkbox/Checkbox.cjs');
 var Choice = require('./components/Choice/Choice.cjs');
 var ChoiceList = require('./components/ChoiceList/ChoiceList.cjs');
+var Container = require('./components/Container/Container.cjs');
 var CopyToClipboard = require('./components/CopyToClipboard/CopyToClipboard.cjs');
 var index = require('./components/DateInputField/index.cjs');
 var DatePicker = require('./components/DatePicker/DatePicker.cjs');
@@ -35,6 +37,7 @@ var useSelection = require('./components/DataTable/hooks/useSelection.cjs');
 var DescriptionList = require('./components/DescriptionList/DescriptionList.cjs');
 var DetailPage = require('./components/DetailPage/DetailPage.cjs');
 var DimensionsInput = require('./components/DimensionsInput/DimensionsInput.cjs');
+var Divider = require('./components/Divider/Divider.cjs');
 var Dropdown = require('./components/Dropdown/Dropdown.cjs');
 var FilterTag = require('./components/FilterTag/FilterTag.cjs');
 var index$1 = require('./components/Grid/index.cjs');
@@ -52,6 +55,7 @@ var PriceInput = require('./components/PriceInput/PriceInput.cjs');
 var Radio = require('./components/Radio/Radio.cjs');
 var ScreenReaderOnly = require('./components/ScreenReaderOnly/ScreenReaderOnly.cjs');
 var Search = require('./components/Search/Search.cjs');
+var SectionLayout = require('./components/SectionLayout/SectionLayout.cjs');
 var SegmentedControl = require('./components/SegmentedControl/SegmentedControl.cjs');
 var Select = require('./components/Select/Select.cjs');
 var ShortcutKeys = require('./components/ShortcutKeys/ShortcutKeys.cjs');
@@ -342,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;
@@ -355,6 +360,7 @@ exports.CardHeader = CardHeader.CardHeader;
 exports.Checkbox = Checkbox.Checkbox;
 exports.Choice = Choice.Choice;
 exports.ChoiceList = ChoiceList.ChoiceList;
+exports.Container = Container.Container;
 exports.CopyToClipboard = CopyToClipboard.CopyToClipboard;
 exports.DateInputField = index.DateInputField;
 exports.DatePicker = DatePicker.DatePicker;
@@ -376,6 +382,7 @@ exports.useSelection = useSelection.useSelection;
 exports.DescriptionList = DescriptionList.DescriptionList;
 exports.DetailPage = DetailPage.DetailPage;
 exports.DimensionsInput = DimensionsInput.DimensionsInput;
+exports.Divider = Divider.Divider;
 exports.Dropdown = Dropdown.Dropdown;
 exports.FilterTag = FilterTag.FilterTag;
 exports.Grid = index$1.Grid;
@@ -393,6 +400,7 @@ exports.PriceInput = PriceInput.PriceInput;
 exports.Radio = Radio.Radio;
 exports.ScreenReaderOnly = ScreenReaderOnly.ScreenReaderOnly;
 exports.Search = Search.Search;
+exports.SectionLayout = SectionLayout.SectionLayout;
 exports.SegmentedControl = SegmentedControl.SegmentedControl;
 exports.Select = Select.Select;
 exports.ShortcutKeys = ShortcutKeys.ShortcutKeys;

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';
@@ -19,6 +20,7 @@ export { CardHeader } from './components/CardHeader/CardHeader.js';
 export { Checkbox } from './components/Checkbox/Checkbox.js';
 export { Choice } from './components/Choice/Choice.js';
 export { ChoiceList } from './components/ChoiceList/ChoiceList.js';
+export { Container } from './components/Container/Container.js';
 export { CopyToClipboard } from './components/CopyToClipboard/CopyToClipboard.js';
 export { DateInputField } from './components/DateInputField/index.js';
 export { DatePicker } from './components/DatePicker/DatePicker.js';
@@ -33,6 +35,7 @@ export { useSelection } from './components/DataTable/hooks/useSelection.js';
 export { DescriptionList } from './components/DescriptionList/DescriptionList.js';
 export { DetailPage } from './components/DetailPage/DetailPage.js';
 export { DimensionsInput } from './components/DimensionsInput/DimensionsInput.js';
+export { Divider } from './components/Divider/Divider.js';
 export { Dropdown } from './components/Dropdown/Dropdown.js';
 export { FilterTag } from './components/FilterTag/FilterTag.js';
 export { Grid } from './components/Grid/index.js';
@@ -50,6 +53,7 @@ export { PriceInput } from './components/PriceInput/PriceInput.js';
 export { Radio } from './components/Radio/Radio.js';
 export { ScreenReaderOnly } from './components/ScreenReaderOnly/ScreenReaderOnly.js';
 export { Search } from './components/Search/Search.js';
+export { SectionLayout } from './components/SectionLayout/SectionLayout.js';
 export { SegmentedControl } from './components/SegmentedControl/SegmentedControl.js';
 export { Select } from './components/Select/Select.js';
 export { ShortcutKeys } from './components/ShortcutKeys/ShortcutKeys.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/dist/testUtils/itSupportsCommonProps.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+type Options = {
+    Component: React.ComponentType<any>;
+};
+export declare function itSupportsCommonProps({ Component }: Options): void;
+export {};

package/package.json

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