@veeqo/ui 13.4.4 → 13.5.0

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

@@ -17,7 +17,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const SelectDropdown = ({ id, className, placeholder = 'Select item', multiple = false, compact = false, hasError = false, disabled, options, value, actions, isLoading = false, searchValue, emptyStateSlot, selectedSlot, onSearchChange, onSelectionChange, topAction, isSelectOpen, setIsSelectOpen, hasSection, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, ...otherProps }) => {
+const SelectDropdown = ({ id, className, placeholder = 'Select item', multiple = false, compact = false, hasError = false, disabled, options, value, actions, isLoading = false, searchValue, headerSlot, emptyStateSlot, selectedSlot, onSearchChange, onSelectionChange, topAction, isSelectOpen, setIsSelectOpen, hasSection, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, ...otherProps }) => {
     const classNames = utils.generateClassNames(className);
     const selectedValues = utils.getSelectedValues(options, hasSection, value);
     const selectionMode = multiple ? 'multiple' : 'single';
@@ -32,6 +32,7 @@ const SelectDropdown = ({ id, className, placeholder = 'Select item', multiple =
                     compact && form_module.compact,
                 ]) }, selectedSlot || (React__default.default.createElement(SelectedOption.SelectedOption, { placeholder: placeholder, options: selectedValues, selectionMode: selectionMode }))));
         } },
+        headerSlot && React__default.default.createElement("div", { className: SelectDropdown_module.headerContainer }, headerSlot),
         onSearchChange && (React__default.default.createElement(React__default.default.Fragment, null,
             React__default.default.createElement(Search.Search, { className: SelectDropdown_module.search, value: searchValue, onChange: onSearchChange }),
             React__default.default.createElement("hr", { className: SelectDropdown_module.separator }))),

package/dist/components/SelectDropdown/SelectDropdown.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SelectDropdown.cjs","sources":["../../../src/components/SelectDropdown/SelectDropdown.tsx"],"sourcesContent":["import React, { Fragment } from 'react';\nimport { Selection } from 'react-aria-components';\nimport { Search } from '../Search';\nimport { Button } from '../Button';\n\nimport { GridList } from './components/OptionsContainers/GridList';\nimport { GridItemProps } from './components/GridItem/types';\nimport { SelectDropdownProps } from './types';\nimport { ListBox } from './components/OptionsContainers/ListBox';\nimport { Dropdown } from '../Dropdown';\nimport { buildClassnames } from '../../utils';\nimport { generateClassNames, getSelectedValues } from './utils';\nimport { SelectedOption } from './components/SelectedOption';\n\nimport styles from './SelectDropdown.module.scss';\nimport formStyles from '../../utils/forms/form.module.scss';\n\ntype SelectDropdownElementProps = Omit<SelectDropdownProps, 'onChange'> & {\n  isSelectOpen: boolean;\n  setIsSelectOpen: (isOpen: boolean) => void;\n  onSelectionChange: (keys: Selection) => void;\n  hasSection: boolean;\n};\n\nexport const SelectDropdown = ({\n  id,\n  className,\n  placeholder = 'Select item',\n  multiple = false,\n  compact = false,\n  hasError = false,\n  disabled,\n  options,\n  value,\n  actions,\n  isLoading = false,\n  searchValue,\n  emptyStateSlot,\n  selectedSlot,\n  onSearchChange,\n  onSelectionChange,\n  topAction,\n  isSelectOpen,\n  setIsSelectOpen,\n  hasSection,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  ...otherProps\n}: SelectDropdownElementProps) => {\n  const classNames = generateClassNames(className);\n\n  const selectedValues = getSelectedValues(options, hasSection, value);\n  const selectionMode = multiple ? 'multiple' : 'single';\n\n  const hasRowAction = options.some(\n    (option) => 'onClickRowAction' in option && option.onClickRowAction,\n  );\n\n  return (\n    <Dropdown\n      id={`select-dropdown-${id}`}\n      className={buildClassnames([classNames?.popover, styles.dropdown, className])}\n      shouldShow={isSelectOpen}\n      setShouldShow={setIsSelectOpen}\n      useAnchorWidth\n      disabled={disabled}\n      renderCta={(buttonProps, anchorRef) => {\n        return (\n          <button\n            {...buttonProps}\n            type=\"button\"\n            ref={anchorRef}\n            className={buildClassnames([\n              className,\n              styles.dropdownTrigger,\n              formStyles.fullStyles,\n              formStyles.base,\n              hasError && formStyles.error,\n              compact && formStyles.compact,\n            ])}\n          >\n            {selectedSlot || (\n              <SelectedOption\n                placeholder={placeholder}\n                options={selectedValues}\n                selectionMode={selectionMode}\n              />\n            )}\n          </button>\n        );\n      }}\n    >\n      {onSearchChange && (\n        <>\n          <Search className={styles.search} value={searchValue} onChange={onSearchChange} />\n          <hr className={styles.separator} />\n        </>\n      )}\n      {topAction && (\n        <Fragment key={topAction.label}>\n          <Button\n            className={styles.ctaButton}\n            key={topAction.label}\n            variant=\"flat\"\n            {...topAction}\n          />\n          <hr className={styles.separator} key={`separator-${topAction.label}`} />\n        </Fragment>\n      )}\n      {hasRowAction ? (\n        <GridList\n          id={id}\n          className={classNames.optionsContainer}\n          ariaLabelledBy={ariaLabelledBy}\n          ariaDescribedBy={ariaDescribedBy}\n          selectionMode={selectionMode}\n          options={options as GridItemProps[]}\n          onSelectionChange={onSelectionChange}\n          selectedValues={selectedValues as GridItemProps[]}\n          isLoading={isLoading}\n          emptyStateSlot={emptyStateSlot}\n          {...otherProps}\n        />\n      ) : (\n        <ListBox\n          id={id}\n          className={classNames.optionsContainer}\n          ariaLabelledBy={ariaLabelledBy}\n          ariaDescribedBy={ariaDescribedBy}\n          selectionMode={selectionMode}\n          options={options}\n          onSelectionChange={onSelectionChange}\n          selectedValues={selectedValues}\n          isLoading={isLoading}\n          emptyStateSlot={emptyStateSlot}\n          hasSection={hasSection}\n          {...otherProps}\n        />\n      )}\n      {actions?.map(({ label, ...actionProps }) => (\n        <Fragment key={label}>\n          <hr className={styles.separator} key={`separator-${label}`} />\n          <Button className={styles.ctaButton} variant=\"flat\" key={label} {...actionProps} />\n        </Fragment>\n      ))}\n    </Dropdown>\n  );\n};\n"],"names":["generateClassNames","getSelectedValues","React","Dropdown","buildClassnames","styles","formStyles","SelectedOption","Search","Fragment","Button","GridList","ListBox"],"mappings":"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"}
+{"version":3,"file":"SelectDropdown.cjs","sources":["../../../src/components/SelectDropdown/SelectDropdown.tsx"],"sourcesContent":["import React, { Fragment } from 'react';\nimport { Selection } from 'react-aria-components';\nimport { Search } from '../Search';\nimport { Button } from '../Button';\n\nimport { GridList } from './components/OptionsContainers/GridList';\nimport { GridItemProps } from './components/GridItem/types';\nimport { SelectDropdownProps } from './types';\nimport { ListBox } from './components/OptionsContainers/ListBox';\nimport { Dropdown } from '../Dropdown';\nimport { buildClassnames } from '../../utils';\nimport { generateClassNames, getSelectedValues } from './utils';\nimport { SelectedOption } from './components/SelectedOption';\n\nimport styles from './SelectDropdown.module.scss';\nimport formStyles from '../../utils/forms/form.module.scss';\n\ntype SelectDropdownElementProps = Omit<SelectDropdownProps, 'onChange'> & {\n  isSelectOpen: boolean;\n  setIsSelectOpen: (isOpen: boolean) => void;\n  onSelectionChange: (keys: Selection) => void;\n  hasSection: boolean;\n};\n\nexport const SelectDropdown = ({\n  id,\n  className,\n  placeholder = 'Select item',\n  multiple = false,\n  compact = false,\n  hasError = false,\n  disabled,\n  options,\n  value,\n  actions,\n  isLoading = false,\n  searchValue,\n  headerSlot,\n  emptyStateSlot,\n  selectedSlot,\n  onSearchChange,\n  onSelectionChange,\n  topAction,\n  isSelectOpen,\n  setIsSelectOpen,\n  hasSection,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  ...otherProps\n}: SelectDropdownElementProps) => {\n  const classNames = generateClassNames(className);\n\n  const selectedValues = getSelectedValues(options, hasSection, value);\n  const selectionMode = multiple ? 'multiple' : 'single';\n\n  const hasRowAction = options.some(\n    (option) => 'onClickRowAction' in option && option.onClickRowAction,\n  );\n\n  return (\n    <Dropdown\n      id={`select-dropdown-${id}`}\n      className={buildClassnames([classNames?.popover, styles.dropdown, className])}\n      shouldShow={isSelectOpen}\n      setShouldShow={setIsSelectOpen}\n      useAnchorWidth\n      disabled={disabled}\n      renderCta={(buttonProps, anchorRef) => {\n        return (\n          <button\n            {...buttonProps}\n            type=\"button\"\n            ref={anchorRef}\n            className={buildClassnames([\n              className,\n              styles.dropdownTrigger,\n              formStyles.fullStyles,\n              formStyles.base,\n              hasError && formStyles.error,\n              compact && formStyles.compact,\n            ])}\n          >\n            {selectedSlot || (\n              <SelectedOption\n                placeholder={placeholder}\n                options={selectedValues}\n                selectionMode={selectionMode}\n              />\n            )}\n          </button>\n        );\n      }}\n    >\n      {headerSlot && <div className={styles.headerContainer}>{headerSlot}</div>}\n      {onSearchChange && (\n        <>\n          <Search className={styles.search} value={searchValue} onChange={onSearchChange} />\n          <hr className={styles.separator} />\n        </>\n      )}\n      {topAction && (\n        <Fragment key={topAction.label}>\n          <Button\n            className={styles.ctaButton}\n            key={topAction.label}\n            variant=\"flat\"\n            {...topAction}\n          />\n          <hr className={styles.separator} key={`separator-${topAction.label}`} />\n        </Fragment>\n      )}\n      {hasRowAction ? (\n        <GridList\n          id={id}\n          className={classNames.optionsContainer}\n          ariaLabelledBy={ariaLabelledBy}\n          ariaDescribedBy={ariaDescribedBy}\n          selectionMode={selectionMode}\n          options={options as GridItemProps[]}\n          onSelectionChange={onSelectionChange}\n          selectedValues={selectedValues as GridItemProps[]}\n          isLoading={isLoading}\n          emptyStateSlot={emptyStateSlot}\n          {...otherProps}\n        />\n      ) : (\n        <ListBox\n          id={id}\n          className={classNames.optionsContainer}\n          ariaLabelledBy={ariaLabelledBy}\n          ariaDescribedBy={ariaDescribedBy}\n          selectionMode={selectionMode}\n          options={options}\n          onSelectionChange={onSelectionChange}\n          selectedValues={selectedValues}\n          isLoading={isLoading}\n          emptyStateSlot={emptyStateSlot}\n          hasSection={hasSection}\n          {...otherProps}\n        />\n      )}\n      {actions?.map(({ label, ...actionProps }) => (\n        <Fragment key={label}>\n          <hr className={styles.separator} key={`separator-${label}`} />\n          <Button className={styles.ctaButton} variant=\"flat\" key={label} {...actionProps} />\n        </Fragment>\n      ))}\n    </Dropdown>\n  );\n};\n"],"names":["generateClassNames","getSelectedValues","React","Dropdown","buildClassnames","styles","formStyles","SelectedOption","Search","Fragment","Button","GridList","ListBox"],"mappings":"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"}

package/dist/components/SelectDropdown/SelectDropdown.d.ts

@@ -7,5 +7,5 @@ type SelectDropdownElementProps = Omit<SelectDropdownProps, 'onChange'> & {
     onSelectionChange: (keys: Selection) => void;
     hasSection: boolean;
 };
-export declare const SelectDropdown: ({ id, className, placeholder, multiple, compact, hasError, disabled, options, value, actions, isLoading, searchValue, emptyStateSlot, selectedSlot, onSearchChange, onSelectionChange, topAction, isSelectOpen, setIsSelectOpen, hasSection, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...otherProps }: SelectDropdownElementProps) => React.JSX.Element;
+export declare const SelectDropdown: ({ id, className, placeholder, multiple, compact, hasError, disabled, options, value, actions, isLoading, searchValue, headerSlot, emptyStateSlot, selectedSlot, onSearchChange, onSelectionChange, topAction, isSelectOpen, setIsSelectOpen, hasSection, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...otherProps }: SelectDropdownElementProps) => React.JSX.Element;
 export {};

package/dist/components/SelectDropdown/SelectDropdown.js

@@ -11,7 +11,7 @@ import { SelectedOption } from './components/SelectedOption.js';
 import styles from './SelectDropdown.module.scss.js';
 import formStyles from '../../utils/forms/form.module.scss.js';
 
-const SelectDropdown = ({ id, className, placeholder = 'Select item', multiple = false, compact = false, hasError = false, disabled, options, value, actions, isLoading = false, searchValue, emptyStateSlot, selectedSlot, onSearchChange, onSelectionChange, topAction, isSelectOpen, setIsSelectOpen, hasSection, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, ...otherProps }) => {
+const SelectDropdown = ({ id, className, placeholder = 'Select item', multiple = false, compact = false, hasError = false, disabled, options, value, actions, isLoading = false, searchValue, headerSlot, emptyStateSlot, selectedSlot, onSearchChange, onSelectionChange, topAction, isSelectOpen, setIsSelectOpen, hasSection, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, ...otherProps }) => {
     const classNames = generateClassNames(className);
     const selectedValues = getSelectedValues(options, hasSection, value);
     const selectionMode = multiple ? 'multiple' : 'single';
@@ -26,6 +26,7 @@ const SelectDropdown = ({ id, className, placeholder = 'Select item', multiple =
                     compact && formStyles.compact,
                 ]) }, selectedSlot || (React__default.createElement(SelectedOption, { placeholder: placeholder, options: selectedValues, selectionMode: selectionMode }))));
         } },
+        headerSlot && React__default.createElement("div", { className: styles.headerContainer }, headerSlot),
         onSearchChange && (React__default.createElement(React__default.Fragment, null,
             React__default.createElement(Search, { className: styles.search, value: searchValue, onChange: onSearchChange }),
             React__default.createElement("hr", { className: styles.separator }))),

package/dist/components/SelectDropdown/SelectDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectDropdown.js","sources":["../../../src/components/SelectDropdown/SelectDropdown.tsx"],"sourcesContent":["import React, { Fragment } from 'react';\nimport { Selection } from 'react-aria-components';\nimport { Search } from '../Search';\nimport { Button } from '../Button';\n\nimport { GridList } from './components/OptionsContainers/GridList';\nimport { GridItemProps } from './components/GridItem/types';\nimport { SelectDropdownProps } from './types';\nimport { ListBox } from './components/OptionsContainers/ListBox';\nimport { Dropdown } from '../Dropdown';\nimport { buildClassnames } from '../../utils';\nimport { generateClassNames, getSelectedValues } from './utils';\nimport { SelectedOption } from './components/SelectedOption';\n\nimport styles from './SelectDropdown.module.scss';\nimport formStyles from '../../utils/forms/form.module.scss';\n\ntype SelectDropdownElementProps = Omit<SelectDropdownProps, 'onChange'> & {\n  isSelectOpen: boolean;\n  setIsSelectOpen: (isOpen: boolean) => void;\n  onSelectionChange: (keys: Selection) => void;\n  hasSection: boolean;\n};\n\nexport const SelectDropdown = ({\n  id,\n  className,\n  placeholder = 'Select item',\n  multiple = false,\n  compact = false,\n  hasError = false,\n  disabled,\n  options,\n  value,\n  actions,\n  isLoading = false,\n  searchValue,\n  emptyStateSlot,\n  selectedSlot,\n  onSearchChange,\n  onSelectionChange,\n  topAction,\n  isSelectOpen,\n  setIsSelectOpen,\n  hasSection,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  ...otherProps\n}: SelectDropdownElementProps) => {\n  const classNames = generateClassNames(className);\n\n  const selectedValues = getSelectedValues(options, hasSection, value);\n  const selectionMode = multiple ? 'multiple' : 'single';\n\n  const hasRowAction = options.some(\n    (option) => 'onClickRowAction' in option && option.onClickRowAction,\n  );\n\n  return (\n    <Dropdown\n      id={`select-dropdown-${id}`}\n      className={buildClassnames([classNames?.popover, styles.dropdown, className])}\n      shouldShow={isSelectOpen}\n      setShouldShow={setIsSelectOpen}\n      useAnchorWidth\n      disabled={disabled}\n      renderCta={(buttonProps, anchorRef) => {\n        return (\n          <button\n            {...buttonProps}\n            type=\"button\"\n            ref={anchorRef}\n            className={buildClassnames([\n              className,\n              styles.dropdownTrigger,\n              formStyles.fullStyles,\n              formStyles.base,\n              hasError && formStyles.error,\n              compact && formStyles.compact,\n            ])}\n          >\n            {selectedSlot || (\n              <SelectedOption\n                placeholder={placeholder}\n                options={selectedValues}\n                selectionMode={selectionMode}\n              />\n            )}\n          </button>\n        );\n      }}\n    >\n      {onSearchChange && (\n        <>\n          <Search className={styles.search} value={searchValue} onChange={onSearchChange} />\n          <hr className={styles.separator} />\n        </>\n      )}\n      {topAction && (\n        <Fragment key={topAction.label}>\n          <Button\n            className={styles.ctaButton}\n            key={topAction.label}\n            variant=\"flat\"\n            {...topAction}\n          />\n          <hr className={styles.separator} key={`separator-${topAction.label}`} />\n        </Fragment>\n      )}\n      {hasRowAction ? (\n        <GridList\n          id={id}\n          className={classNames.optionsContainer}\n          ariaLabelledBy={ariaLabelledBy}\n          ariaDescribedBy={ariaDescribedBy}\n          selectionMode={selectionMode}\n          options={options as GridItemProps[]}\n          onSelectionChange={onSelectionChange}\n          selectedValues={selectedValues as GridItemProps[]}\n          isLoading={isLoading}\n          emptyStateSlot={emptyStateSlot}\n          {...otherProps}\n        />\n      ) : (\n        <ListBox\n          id={id}\n          className={classNames.optionsContainer}\n          ariaLabelledBy={ariaLabelledBy}\n          ariaDescribedBy={ariaDescribedBy}\n          selectionMode={selectionMode}\n          options={options}\n          onSelectionChange={onSelectionChange}\n          selectedValues={selectedValues}\n          isLoading={isLoading}\n          emptyStateSlot={emptyStateSlot}\n          hasSection={hasSection}\n          {...otherProps}\n        />\n      )}\n      {actions?.map(({ label, ...actionProps }) => (\n        <Fragment key={label}>\n          <hr className={styles.separator} key={`separator-${label}`} />\n          <Button className={styles.ctaButton} variant=\"flat\" key={label} {...actionProps} />\n        </Fragment>\n      ))}\n    </Dropdown>\n  );\n};\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"SelectDropdown.js","sources":["../../../src/components/SelectDropdown/SelectDropdown.tsx"],"sourcesContent":["import React, { Fragment } from 'react';\nimport { Selection } from 'react-aria-components';\nimport { Search } from '../Search';\nimport { Button } from '../Button';\n\nimport { GridList } from './components/OptionsContainers/GridList';\nimport { GridItemProps } from './components/GridItem/types';\nimport { SelectDropdownProps } from './types';\nimport { ListBox } from './components/OptionsContainers/ListBox';\nimport { Dropdown } from '../Dropdown';\nimport { buildClassnames } from '../../utils';\nimport { generateClassNames, getSelectedValues } from './utils';\nimport { SelectedOption } from './components/SelectedOption';\n\nimport styles from './SelectDropdown.module.scss';\nimport formStyles from '../../utils/forms/form.module.scss';\n\ntype SelectDropdownElementProps = Omit<SelectDropdownProps, 'onChange'> & {\n  isSelectOpen: boolean;\n  setIsSelectOpen: (isOpen: boolean) => void;\n  onSelectionChange: (keys: Selection) => void;\n  hasSection: boolean;\n};\n\nexport const SelectDropdown = ({\n  id,\n  className,\n  placeholder = 'Select item',\n  multiple = false,\n  compact = false,\n  hasError = false,\n  disabled,\n  options,\n  value,\n  actions,\n  isLoading = false,\n  searchValue,\n  headerSlot,\n  emptyStateSlot,\n  selectedSlot,\n  onSearchChange,\n  onSelectionChange,\n  topAction,\n  isSelectOpen,\n  setIsSelectOpen,\n  hasSection,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  ...otherProps\n}: SelectDropdownElementProps) => {\n  const classNames = generateClassNames(className);\n\n  const selectedValues = getSelectedValues(options, hasSection, value);\n  const selectionMode = multiple ? 'multiple' : 'single';\n\n  const hasRowAction = options.some(\n    (option) => 'onClickRowAction' in option && option.onClickRowAction,\n  );\n\n  return (\n    <Dropdown\n      id={`select-dropdown-${id}`}\n      className={buildClassnames([classNames?.popover, styles.dropdown, className])}\n      shouldShow={isSelectOpen}\n      setShouldShow={setIsSelectOpen}\n      useAnchorWidth\n      disabled={disabled}\n      renderCta={(buttonProps, anchorRef) => {\n        return (\n          <button\n            {...buttonProps}\n            type=\"button\"\n            ref={anchorRef}\n            className={buildClassnames([\n              className,\n              styles.dropdownTrigger,\n              formStyles.fullStyles,\n              formStyles.base,\n              hasError && formStyles.error,\n              compact && formStyles.compact,\n            ])}\n          >\n            {selectedSlot || (\n              <SelectedOption\n                placeholder={placeholder}\n                options={selectedValues}\n                selectionMode={selectionMode}\n              />\n            )}\n          </button>\n        );\n      }}\n    >\n      {headerSlot && <div className={styles.headerContainer}>{headerSlot}</div>}\n      {onSearchChange && (\n        <>\n          <Search className={styles.search} value={searchValue} onChange={onSearchChange} />\n          <hr className={styles.separator} />\n        </>\n      )}\n      {topAction && (\n        <Fragment key={topAction.label}>\n          <Button\n            className={styles.ctaButton}\n            key={topAction.label}\n            variant=\"flat\"\n            {...topAction}\n          />\n          <hr className={styles.separator} key={`separator-${topAction.label}`} />\n        </Fragment>\n      )}\n      {hasRowAction ? (\n        <GridList\n          id={id}\n          className={classNames.optionsContainer}\n          ariaLabelledBy={ariaLabelledBy}\n          ariaDescribedBy={ariaDescribedBy}\n          selectionMode={selectionMode}\n          options={options as GridItemProps[]}\n          onSelectionChange={onSelectionChange}\n          selectedValues={selectedValues as GridItemProps[]}\n          isLoading={isLoading}\n          emptyStateSlot={emptyStateSlot}\n          {...otherProps}\n        />\n      ) : (\n        <ListBox\n          id={id}\n          className={classNames.optionsContainer}\n          ariaLabelledBy={ariaLabelledBy}\n          ariaDescribedBy={ariaDescribedBy}\n          selectionMode={selectionMode}\n          options={options}\n          onSelectionChange={onSelectionChange}\n          selectedValues={selectedValues}\n          isLoading={isLoading}\n          emptyStateSlot={emptyStateSlot}\n          hasSection={hasSection}\n          {...otherProps}\n        />\n      )}\n      {actions?.map(({ label, ...actionProps }) => (\n        <Fragment key={label}>\n          <hr className={styles.separator} key={`separator-${label}`} />\n          <Button className={styles.ctaButton} variant=\"flat\" key={label} {...actionProps} />\n        </Fragment>\n      ))}\n    </Dropdown>\n  );\n};\n"],"names":["React"],"mappings":"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"}

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

@@ -2,8 +2,8 @@
 
 var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
 
-___$insertStyle("._listBox_1fva9_1 {\n  overflow-y: scroll;\n  max-height: 300px;\n  padding: var(--sizes-sm);\n  scroll-padding: var(--sizes-xs) 0;\n}\n._listBox_1fva9_1[data-empty] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n._dropdown_1fva9_13 {\n  padding: var(--sizes-none) !important;\n}\n\n._dropdownTrigger_1fva9_17 {\n  padding-right: var(--sizes-9);\n  background-image: url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M4 6L8 10L12 6H4Z' fill='currentColor' /%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right var(--sizes-3) top 50%;\n  width: 100%;\n}\n\n._separator_1fva9_25 {\n  height: var(--sizes-line);\n  background: var(--colors-neutral-grey-base);\n  border: none;\n  margin: var(--sizes-none) var(--sizes-none);\n  width: 100%;\n}\n\n._search_1fva9_33 {\n  margin: var(--sizes-sm) !important;\n}\n\n._ctaButton_1fva9_37 {\n  justify-content: start !important;\n  padding: var(--sizes-sm) var(--sizes-xs) !important;\n  margin: var(--sizes-sm) !important;\n  border-radius: var(--radius-base) !important;\n  border: 0 !important;\n}\n._ctaButton_1fva9_37 svg {\n  width: var(--sizes-md) !important;\n  height: var(--sizes-md) !important;\n}\n._ctaButton_1fva9_37 > span {\n  gap: var(--sizes-base);\n  padding: 0 var(--sizes-xs);\n}\n._ctaButton_1fva9_37:hover {\n  background-color: var(--colors-neutral-grey-lightest) !important;\n  font-weight: var(--text-body-bold-font-weight) !important;\n}");
-var styles = {"listBox":"_listBox_1fva9_1","dropdown":"_dropdown_1fva9_13","dropdownTrigger":"_dropdownTrigger_1fva9_17","separator":"_separator_1fva9_25","search":"_search_1fva9_33","ctaButton":"_ctaButton_1fva9_37"};
+___$insertStyle("._listBox_1rgmd_1 {\n  overflow-y: scroll;\n  max-height: 300px;\n  padding: var(--sizes-sm);\n  scroll-padding: var(--sizes-xs) 0;\n}\n._listBox_1rgmd_1[data-empty] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n._dropdown_1rgmd_13 {\n  padding: var(--sizes-none) !important;\n}\n\n._dropdownTrigger_1rgmd_17 {\n  padding-right: var(--sizes-9);\n  background-image: url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M4 6L8 10L12 6H4Z' fill='currentColor' /%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right var(--sizes-3) top 50%;\n  width: 100%;\n}\n\n._separator_1rgmd_25 {\n  height: var(--sizes-line);\n  background: var(--colors-neutral-grey-base);\n  border: none;\n  margin: var(--sizes-none) var(--sizes-none);\n  width: 100%;\n}\n\n._search_1rgmd_33 {\n  margin: var(--sizes-sm) !important;\n}\n\n._ctaButton_1rgmd_37 {\n  justify-content: start !important;\n  padding: var(--sizes-sm) var(--sizes-xs) !important;\n  margin: var(--sizes-sm) !important;\n  border-radius: var(--radius-base) !important;\n  border: 0 !important;\n}\n._ctaButton_1rgmd_37 svg {\n  width: var(--sizes-md) !important;\n  height: var(--sizes-md) !important;\n}\n._ctaButton_1rgmd_37 > span {\n  gap: var(--sizes-base);\n  padding: 0 var(--sizes-xs);\n}\n._ctaButton_1rgmd_37:hover {\n  background-color: var(--colors-neutral-grey-lightest) !important;\n  font-weight: var(--text-body-bold-font-weight) !important;\n}\n\n._headerContainer_1rgmd_57 {\n  padding: var(--sizes-sm) var(--sizes-base);\n  border-bottom: 1px solid var(--colors-neutral-grey-base);\n}");
+var styles = {"listBox":"_listBox_1rgmd_1","dropdown":"_dropdown_1rgmd_13","dropdownTrigger":"_dropdownTrigger_1rgmd_17","separator":"_separator_1rgmd_25","search":"_search_1rgmd_33","ctaButton":"_ctaButton_1rgmd_37","headerContainer":"_headerContainer_1rgmd_57"};
 
 module.exports = styles;
 //# sourceMappingURL=SelectDropdown.module.scss.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"SelectDropdown.module.scss.cjs","sources":["../../../src/components/SelectDropdown/SelectDropdown.module.scss"],"sourcesContent":[".listBox {\n  overflow-y: scroll;\n  max-height: 300px;\n  padding: var(--sizes-sm);\n  scroll-padding: var(--sizes-xs) 0;\n\n  &[data-empty] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n}\n\n// used important to override styled-component styles from Dropdown\n.dropdown {\n  padding: var(--sizes-none) !important;\n}\n\n.dropdownTrigger {\n  padding-right: var(--sizes-9);\n  background-image: url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M4 6L8 10L12 6H4Z' fill='currentColor' /%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right var(--sizes-3) top 50%;\n  width: 100%;\n}\n\n.separator {\n  height: var(--sizes-line);\n  background: var(--colors-neutral-grey-base);\n  border: none;\n  margin: var(--sizes-none) var(--sizes-none);\n  width: 100%;\n}\n\n// used important to override styled-component styles from Search\n.search {\n  margin: var(--sizes-sm) !important;\n}\n\n// used important to override styled-component styles from Button\n.ctaButton {\n  justify-content: start !important;\n  padding: var(--sizes-sm) var(--sizes-xs) !important;\n  margin: var(--sizes-sm) !important;\n  border-radius: var(--radius-base) !important;\n  border: 0 !important;\n\n  svg {\n    width: var(--sizes-md) !important;\n    height: var(--sizes-md) !important;\n  }\n\n  > span {\n    gap: var(--sizes-base);\n    padding: 0 var(--sizes-xs);\n  }\n\n  &:hover {\n    background-color: var(--colors-neutral-grey-lightest) !important;\n    font-weight: var(--text-body-bold-font-weight) !important;\n  }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,qjDAAA;AACA,aAAA,CAAA,SAAA,CAAA,kBAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,iBAAA,CAAA,2BAAA,CAAA,WAAA,CAAA,qBAAA,CAAA,QAAA,CAAA,kBAAA,CAAA,WAAA,CAAA,qBAAA;;;;"}
+{"version":3,"file":"SelectDropdown.module.scss.cjs","sources":["../../../src/components/SelectDropdown/SelectDropdown.module.scss"],"sourcesContent":[".listBox {\n  overflow-y: scroll;\n  max-height: 300px;\n  padding: var(--sizes-sm);\n  scroll-padding: var(--sizes-xs) 0;\n\n  &[data-empty] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n}\n\n// used important to override styled-component styles from Dropdown\n.dropdown {\n  padding: var(--sizes-none) !important;\n}\n\n.dropdownTrigger {\n  padding-right: var(--sizes-9);\n  background-image: url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M4 6L8 10L12 6H4Z' fill='currentColor' /%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right var(--sizes-3) top 50%;\n  width: 100%;\n}\n\n.separator {\n  height: var(--sizes-line);\n  background: var(--colors-neutral-grey-base);\n  border: none;\n  margin: var(--sizes-none) var(--sizes-none);\n  width: 100%;\n}\n\n// used important to override styled-component styles from Search\n.search {\n  margin: var(--sizes-sm) !important;\n}\n\n// used important to override styled-component styles from Button\n.ctaButton {\n  justify-content: start !important;\n  padding: var(--sizes-sm) var(--sizes-xs) !important;\n  margin: var(--sizes-sm) !important;\n  border-radius: var(--radius-base) !important;\n  border: 0 !important;\n\n  svg {\n    width: var(--sizes-md) !important;\n    height: var(--sizes-md) !important;\n  }\n\n  > span {\n    gap: var(--sizes-base);\n    padding: 0 var(--sizes-xs);\n  }\n\n  &:hover {\n    background-color: var(--colors-neutral-grey-lightest) !important;\n    font-weight: var(--text-body-bold-font-weight) !important;\n  }\n}\n\n.headerContainer {\n  padding: var(--sizes-sm) var(--sizes-base);\n  border-bottom: 1px solid var(--colors-neutral-grey-base);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,osDAAA;AACA,aAAA,CAAA,SAAA,CAAA,kBAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,iBAAA,CAAA,2BAAA,CAAA,WAAA,CAAA,qBAAA,CAAA,QAAA,CAAA,kBAAA,CAAA,WAAA,CAAA,qBAAA,CAAA,iBAAA,CAAA,2BAAA;;;;"}

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

@@ -1,7 +1,7 @@
 import insertStyle from '../../_virtual/____insertStyle.js';
 
-insertStyle("._listBox_1fva9_1 {\n  overflow-y: scroll;\n  max-height: 300px;\n  padding: var(--sizes-sm);\n  scroll-padding: var(--sizes-xs) 0;\n}\n._listBox_1fva9_1[data-empty] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n._dropdown_1fva9_13 {\n  padding: var(--sizes-none) !important;\n}\n\n._dropdownTrigger_1fva9_17 {\n  padding-right: var(--sizes-9);\n  background-image: url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M4 6L8 10L12 6H4Z' fill='currentColor' /%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right var(--sizes-3) top 50%;\n  width: 100%;\n}\n\n._separator_1fva9_25 {\n  height: var(--sizes-line);\n  background: var(--colors-neutral-grey-base);\n  border: none;\n  margin: var(--sizes-none) var(--sizes-none);\n  width: 100%;\n}\n\n._search_1fva9_33 {\n  margin: var(--sizes-sm) !important;\n}\n\n._ctaButton_1fva9_37 {\n  justify-content: start !important;\n  padding: var(--sizes-sm) var(--sizes-xs) !important;\n  margin: var(--sizes-sm) !important;\n  border-radius: var(--radius-base) !important;\n  border: 0 !important;\n}\n._ctaButton_1fva9_37 svg {\n  width: var(--sizes-md) !important;\n  height: var(--sizes-md) !important;\n}\n._ctaButton_1fva9_37 > span {\n  gap: var(--sizes-base);\n  padding: 0 var(--sizes-xs);\n}\n._ctaButton_1fva9_37:hover {\n  background-color: var(--colors-neutral-grey-lightest) !important;\n  font-weight: var(--text-body-bold-font-weight) !important;\n}");
-var styles = {"listBox":"_listBox_1fva9_1","dropdown":"_dropdown_1fva9_13","dropdownTrigger":"_dropdownTrigger_1fva9_17","separator":"_separator_1fva9_25","search":"_search_1fva9_33","ctaButton":"_ctaButton_1fva9_37"};
+insertStyle("._listBox_1rgmd_1 {\n  overflow-y: scroll;\n  max-height: 300px;\n  padding: var(--sizes-sm);\n  scroll-padding: var(--sizes-xs) 0;\n}\n._listBox_1rgmd_1[data-empty] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n._dropdown_1rgmd_13 {\n  padding: var(--sizes-none) !important;\n}\n\n._dropdownTrigger_1rgmd_17 {\n  padding-right: var(--sizes-9);\n  background-image: url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M4 6L8 10L12 6H4Z' fill='currentColor' /%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right var(--sizes-3) top 50%;\n  width: 100%;\n}\n\n._separator_1rgmd_25 {\n  height: var(--sizes-line);\n  background: var(--colors-neutral-grey-base);\n  border: none;\n  margin: var(--sizes-none) var(--sizes-none);\n  width: 100%;\n}\n\n._search_1rgmd_33 {\n  margin: var(--sizes-sm) !important;\n}\n\n._ctaButton_1rgmd_37 {\n  justify-content: start !important;\n  padding: var(--sizes-sm) var(--sizes-xs) !important;\n  margin: var(--sizes-sm) !important;\n  border-radius: var(--radius-base) !important;\n  border: 0 !important;\n}\n._ctaButton_1rgmd_37 svg {\n  width: var(--sizes-md) !important;\n  height: var(--sizes-md) !important;\n}\n._ctaButton_1rgmd_37 > span {\n  gap: var(--sizes-base);\n  padding: 0 var(--sizes-xs);\n}\n._ctaButton_1rgmd_37:hover {\n  background-color: var(--colors-neutral-grey-lightest) !important;\n  font-weight: var(--text-body-bold-font-weight) !important;\n}\n\n._headerContainer_1rgmd_57 {\n  padding: var(--sizes-sm) var(--sizes-base);\n  border-bottom: 1px solid var(--colors-neutral-grey-base);\n}");
+var styles = {"listBox":"_listBox_1rgmd_1","dropdown":"_dropdown_1rgmd_13","dropdownTrigger":"_dropdownTrigger_1rgmd_17","separator":"_separator_1rgmd_25","search":"_search_1rgmd_33","ctaButton":"_ctaButton_1rgmd_37","headerContainer":"_headerContainer_1rgmd_57"};
 
 export { styles as default };
 //# sourceMappingURL=SelectDropdown.module.scss.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SelectDropdown.module.scss.js","sources":["../../../src/components/SelectDropdown/SelectDropdown.module.scss"],"sourcesContent":[".listBox {\n  overflow-y: scroll;\n  max-height: 300px;\n  padding: var(--sizes-sm);\n  scroll-padding: var(--sizes-xs) 0;\n\n  &[data-empty] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n}\n\n// used important to override styled-component styles from Dropdown\n.dropdown {\n  padding: var(--sizes-none) !important;\n}\n\n.dropdownTrigger {\n  padding-right: var(--sizes-9);\n  background-image: url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M4 6L8 10L12 6H4Z' fill='currentColor' /%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right var(--sizes-3) top 50%;\n  width: 100%;\n}\n\n.separator {\n  height: var(--sizes-line);\n  background: var(--colors-neutral-grey-base);\n  border: none;\n  margin: var(--sizes-none) var(--sizes-none);\n  width: 100%;\n}\n\n// used important to override styled-component styles from Search\n.search {\n  margin: var(--sizes-sm) !important;\n}\n\n// used important to override styled-component styles from Button\n.ctaButton {\n  justify-content: start !important;\n  padding: var(--sizes-sm) var(--sizes-xs) !important;\n  margin: var(--sizes-sm) !important;\n  border-radius: var(--radius-base) !important;\n  border: 0 !important;\n\n  svg {\n    width: var(--sizes-md) !important;\n    height: var(--sizes-md) !important;\n  }\n\n  > span {\n    gap: var(--sizes-base);\n    padding: 0 var(--sizes-xs);\n  }\n\n  &:hover {\n    background-color: var(--colors-neutral-grey-lightest) !important;\n    font-weight: var(--text-body-bold-font-weight) !important;\n  }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,qjDAAA;AACA,aAAA,CAAA,SAAA,CAAA,kBAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,iBAAA,CAAA,2BAAA,CAAA,WAAA,CAAA,qBAAA,CAAA,QAAA,CAAA,kBAAA,CAAA,WAAA,CAAA,qBAAA;;;;"}
+{"version":3,"file":"SelectDropdown.module.scss.js","sources":["../../../src/components/SelectDropdown/SelectDropdown.module.scss"],"sourcesContent":[".listBox {\n  overflow-y: scroll;\n  max-height: 300px;\n  padding: var(--sizes-sm);\n  scroll-padding: var(--sizes-xs) 0;\n\n  &[data-empty] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n}\n\n// used important to override styled-component styles from Dropdown\n.dropdown {\n  padding: var(--sizes-none) !important;\n}\n\n.dropdownTrigger {\n  padding-right: var(--sizes-9);\n  background-image: url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M4 6L8 10L12 6H4Z' fill='currentColor' /%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right var(--sizes-3) top 50%;\n  width: 100%;\n}\n\n.separator {\n  height: var(--sizes-line);\n  background: var(--colors-neutral-grey-base);\n  border: none;\n  margin: var(--sizes-none) var(--sizes-none);\n  width: 100%;\n}\n\n// used important to override styled-component styles from Search\n.search {\n  margin: var(--sizes-sm) !important;\n}\n\n// used important to override styled-component styles from Button\n.ctaButton {\n  justify-content: start !important;\n  padding: var(--sizes-sm) var(--sizes-xs) !important;\n  margin: var(--sizes-sm) !important;\n  border-radius: var(--radius-base) !important;\n  border: 0 !important;\n\n  svg {\n    width: var(--sizes-md) !important;\n    height: var(--sizes-md) !important;\n  }\n\n  > span {\n    gap: var(--sizes-base);\n    padding: 0 var(--sizes-xs);\n  }\n\n  &:hover {\n    background-color: var(--colors-neutral-grey-lightest) !important;\n    font-weight: var(--text-body-bold-font-weight) !important;\n  }\n}\n\n.headerContainer {\n  padding: var(--sizes-sm) var(--sizes-base);\n  border-bottom: 1px solid var(--colors-neutral-grey-base);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,osDAAA;AACA,aAAA,CAAA,SAAA,CAAA,kBAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,iBAAA,CAAA,2BAAA,CAAA,WAAA,CAAA,qBAAA,CAAA,QAAA,CAAA,kBAAA,CAAA,WAAA,CAAA,qBAAA,CAAA,iBAAA,CAAA,2BAAA;;;;"}

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

@@ -26,6 +26,7 @@ export type SelectDropdownControlledProps = (SelectDropdownSingleProps | SelectD
     hasError?: boolean;
     disabled?: boolean;
     options: SelectDropdownItem[];
+    headerSlot?: ReactNode;
     emptyStateSlot?: ReactElement;
     isLoading?: boolean;
     placeholder?: string;

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

@@ -16,6 +16,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 +25,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 +43,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

@@ -21,6 +21,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 +36,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 +54,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');
@@ -355,6 +358,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 +380,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 +398,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

@@ -19,6 +19,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 +34,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 +52,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.4",
+  "version": "13.5.0",
   "description": "New optimised component library for Veeqo.",
   "author": "Robert Wealthall",
   "license": "ISC",