@veeqo/ui 12.1.1 → 12.3.0

package/dist/components/Flex/FlexCol/FlexCol.cjs

@@ -2,6 +2,7 @@
 
 var React = require('react');
 var buildClassnames = require('../../../utils/buildClassnames.cjs');
+require('uid/secure');
 var FlexCol_module = require('./FlexCol.module.scss.cjs');
 var Flex_module = require('../Flex.module.scss.cjs');
 
@@ -14,8 +15,9 @@ const FLEX_COL_DEFAULT_PROPS = {
     justifyContent: 'flex-start',
     gap: 'sm',
     flexWrap: 'wrap',
+    flexGrow: 0,
 };
-const FlexCol = ({ alignItems = FLEX_COL_DEFAULT_PROPS.alignItems, justifyContent = FLEX_COL_DEFAULT_PROPS.justifyContent, gap = FLEX_COL_DEFAULT_PROPS.gap, flexWrap = FLEX_COL_DEFAULT_PROPS.flexWrap, className, style, children, ...rest }) => {
+const FlexCol = React__default.default.forwardRef(({ alignItems = FLEX_COL_DEFAULT_PROPS.alignItems, justifyContent = FLEX_COL_DEFAULT_PROPS.justifyContent, gap = FLEX_COL_DEFAULT_PROPS.gap, flexWrap = FLEX_COL_DEFAULT_PROPS.flexWrap, flexGrow = FLEX_COL_DEFAULT_PROPS.flexGrow, className, style, children, ...rest }, ref) => {
     const cssClasses = [
         FlexCol_module.flexCol,
         Flex_module[`alignItems-${alignItems}`],
@@ -24,8 +26,8 @@ const FlexCol = ({ alignItems = FLEX_COL_DEFAULT_PROPS.alignItems, justifyConten
         Flex_module[`flexWrap-${flexWrap}`],
         className,
     ];
-    return (React__default.default.createElement("div", { className: buildClassnames.buildClassnames(cssClasses), style: style, ...rest }, children));
-};
+    return (React__default.default.createElement("div", { className: buildClassnames.buildClassnames(cssClasses), style: { flexGrow, ...style }, ref: ref, ...rest }, children));
+});
 
 exports.FLEX_COL_DEFAULT_PROPS = FLEX_COL_DEFAULT_PROPS;
 exports.FlexCol = FlexCol;

package/dist/components/Flex/FlexCol/FlexCol.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FlexCol.cjs","sources":["../../../../src/components/Flex/FlexCol/FlexCol.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../../utils/buildClassnames';\nimport { FlexDefaultProps, FlexProps } from '../types';\nimport flexColStyles from './FlexCol.module.scss';\nimport flexStyles from '../Flex.module.scss';\n\nexport const FLEX_COL_DEFAULT_PROPS: FlexDefaultProps = {\n  alignItems: 'stretch',\n  justifyContent: 'flex-start',\n  gap: 'sm',\n  flexWrap: 'wrap',\n};\n\nexport const FlexCol: React.FC<FlexProps> = ({\n  alignItems = FLEX_COL_DEFAULT_PROPS.alignItems,\n  justifyContent = FLEX_COL_DEFAULT_PROPS.justifyContent,\n  gap = FLEX_COL_DEFAULT_PROPS.gap,\n  flexWrap = FLEX_COL_DEFAULT_PROPS.flexWrap,\n  className,\n  style,\n  children,\n  ...rest\n}) => {\n  const cssClasses = [\n    flexColStyles.flexCol,\n    flexStyles[`alignItems-${alignItems}`],\n    flexStyles[`justifyContent-${justifyContent}`],\n    flexStyles[`gap-${gap}`],\n    flexStyles[`flexWrap-${flexWrap}`],\n    className,\n  ];\n\n  return (\n    <div className={buildClassnames(cssClasses)} style={style} {...rest}>\n      {children}\n    </div>\n  );\n};\n"],"names":["flexColStyles","flexStyles","React","buildClassnames"],"mappings":";;;;;;;;;;;AAMa,MAAA,sBAAsB,GAAqB;AACtD,IAAA,UAAU,EAAE,SAAS;AACrB,IAAA,cAAc,EAAE,YAAY;AAC5B,IAAA,GAAG,EAAE,IAAI;AACT,IAAA,QAAQ,EAAE,MAAM;;AAGL,MAAA,OAAO,GAAwB,CAAC,EAC3C,UAAU,GAAG,sBAAsB,CAAC,UAAU,EAC9C,cAAc,GAAG,sBAAsB,CAAC,cAAc,EACtD,GAAG,GAAG,sBAAsB,CAAC,GAAG,EAChC,QAAQ,GAAG,sBAAsB,CAAC,QAAQ,EAC1C,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,IAAI,EACR,KAAI;AACH,IAAA,MAAM,UAAU,GAAG;AACjB,QAAAA,cAAa,CAAC,OAAO;AACrB,QAAAC,WAAU,CAAC,CAAA,WAAA,EAAc,UAAU,CAAA,CAAE,CAAC;AACtC,QAAAA,WAAU,CAAC,CAAA,eAAA,EAAkB,cAAc,CAAA,CAAE,CAAC;AAC9C,QAAAA,WAAU,CAAC,CAAA,IAAA,EAAO,GAAG,CAAA,CAAE,CAAC;AACxB,QAAAA,WAAU,CAAC,CAAA,SAAA,EAAY,QAAQ,CAAA,CAAE,CAAC;QAClC,SAAS;KACV;AAED,IAAA,QACEC,sBAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEC,+BAAe,CAAC,UAAU,CAAC,EAAE,KAAK,EAAE,KAAK,EAAM,GAAA,IAAI,IAChE,QAAQ,CACL;AAEV;;;;;"}
+{"version":3,"file":"FlexCol.cjs","sources":["../../../../src/components/Flex/FlexCol/FlexCol.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../../utils';\nimport { FlexDefaultProps, FlexProps } from '../types';\nimport flexColStyles from './FlexCol.module.scss';\nimport flexStyles from '../Flex.module.scss';\n\nexport const FLEX_COL_DEFAULT_PROPS: FlexDefaultProps = {\n  alignItems: 'stretch',\n  justifyContent: 'flex-start',\n  gap: 'sm',\n  flexWrap: 'wrap',\n  flexGrow: 0,\n};\n\nexport const FlexCol = React.forwardRef<HTMLDivElement, FlexProps>(\n  (\n    {\n      alignItems = FLEX_COL_DEFAULT_PROPS.alignItems,\n      justifyContent = FLEX_COL_DEFAULT_PROPS.justifyContent,\n      gap = FLEX_COL_DEFAULT_PROPS.gap,\n      flexWrap = FLEX_COL_DEFAULT_PROPS.flexWrap,\n      flexGrow = FLEX_COL_DEFAULT_PROPS.flexGrow,\n      className,\n      style,\n      children,\n      ...rest\n    },\n    ref,\n  ) => {\n    const cssClasses = [\n      flexColStyles.flexCol,\n      flexStyles[`alignItems-${alignItems}`],\n      flexStyles[`justifyContent-${justifyContent}`],\n      flexStyles[`gap-${gap}`],\n      flexStyles[`flexWrap-${flexWrap}`],\n      className,\n    ];\n\n    return (\n      <div\n        className={buildClassnames(cssClasses)}\n        style={{ flexGrow, ...style }}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n"],"names":["React","flexColStyles","flexStyles","buildClassnames"],"mappings":";;;;;;;;;;;;AAMa,MAAA,sBAAsB,GAAqB;AACtD,IAAA,UAAU,EAAE,SAAS;AACrB,IAAA,cAAc,EAAE,YAAY;AAC5B,IAAA,GAAG,EAAE,IAAI;AACT,IAAA,QAAQ,EAAE,MAAM;AAChB,IAAA,QAAQ,EAAE,CAAC;;AAGA,MAAA,OAAO,GAAGA,sBAAK,CAAC,UAAU,CACrC,CACE,EACE,UAAU,GAAG,sBAAsB,CAAC,UAAU,EAC9C,cAAc,GAAG,sBAAsB,CAAC,cAAc,EACtD,GAAG,GAAG,sBAAsB,CAAC,GAAG,EAChC,QAAQ,GAAG,sBAAsB,CAAC,QAAQ,EAC1C,QAAQ,GAAG,sBAAsB,CAAC,QAAQ,EAC1C,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,IAAI,EACR,EACD,GAAG,KACD;AACF,IAAA,MAAM,UAAU,GAAG;AACjB,QAAAC,cAAa,CAAC,OAAO;AACrB,QAAAC,WAAU,CAAC,CAAA,WAAA,EAAc,UAAU,CAAA,CAAE,CAAC;AACtC,QAAAA,WAAU,CAAC,CAAA,eAAA,EAAkB,cAAc,CAAA,CAAE,CAAC;AAC9C,QAAAA,WAAU,CAAC,CAAA,IAAA,EAAO,GAAG,CAAA,CAAE,CAAC;AACxB,QAAAA,WAAU,CAAC,CAAA,SAAA,EAAY,QAAQ,CAAA,CAAE,CAAC;QAClC,SAAS;KACV;IAED,QACEF,sBACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEG,+BAAe,CAAC,UAAU,CAAC,EACtC,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAC7B,GAAG,EAAE,GAAG,EACJ,GAAA,IAAI,EAEP,EAAA,QAAQ,CACL;AAEV,CAAC;;;;;"}

package/dist/components/Flex/FlexCol/FlexCol.d.ts

@@ -1,4 +1,10 @@
 import React from 'react';
-import { FlexDefaultProps, FlexProps } from '../types';
+import { FlexDefaultProps } from '../types';
 export declare const FLEX_COL_DEFAULT_PROPS: FlexDefaultProps;
-export declare const FlexCol: React.FC<FlexProps>;
+export declare const FlexCol: React.ForwardRefExoticComponent<{
+    alignItems?: import("csstype").Property.AlignItems | undefined;
+    justifyContent?: import("csstype").Property.JustifyContent | undefined;
+    gap?: keyof import("../../../theme/modules/sizes").SizeScale | undefined;
+    flexWrap?: import("csstype").Property.FlexWrap | undefined;
+    flexGrow?: import("csstype").Property.FlexGrow | undefined;
+} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Flex/FlexCol/FlexCol.js

@@ -1,5 +1,6 @@
 import React__default from 'react';
 import { buildClassnames } from '../../../utils/buildClassnames.js';
+import 'uid/secure';
 import flexColStyles from './FlexCol.module.scss.js';
 import flexStyles from '../Flex.module.scss.js';
 
@@ -8,8 +9,9 @@ const FLEX_COL_DEFAULT_PROPS = {
     justifyContent: 'flex-start',
     gap: 'sm',
     flexWrap: 'wrap',
+    flexGrow: 0,
 };
-const FlexCol = ({ alignItems = FLEX_COL_DEFAULT_PROPS.alignItems, justifyContent = FLEX_COL_DEFAULT_PROPS.justifyContent, gap = FLEX_COL_DEFAULT_PROPS.gap, flexWrap = FLEX_COL_DEFAULT_PROPS.flexWrap, className, style, children, ...rest }) => {
+const FlexCol = React__default.forwardRef(({ alignItems = FLEX_COL_DEFAULT_PROPS.alignItems, justifyContent = FLEX_COL_DEFAULT_PROPS.justifyContent, gap = FLEX_COL_DEFAULT_PROPS.gap, flexWrap = FLEX_COL_DEFAULT_PROPS.flexWrap, flexGrow = FLEX_COL_DEFAULT_PROPS.flexGrow, className, style, children, ...rest }, ref) => {
     const cssClasses = [
         flexColStyles.flexCol,
         flexStyles[`alignItems-${alignItems}`],
@@ -18,8 +20,8 @@ const FlexCol = ({ alignItems = FLEX_COL_DEFAULT_PROPS.alignItems, justifyConten
         flexStyles[`flexWrap-${flexWrap}`],
         className,
     ];
-    return (React__default.createElement("div", { className: buildClassnames(cssClasses), style: style, ...rest }, children));
-};
+    return (React__default.createElement("div", { className: buildClassnames(cssClasses), style: { flexGrow, ...style }, ref: ref, ...rest }, children));
+});
 
 export { FLEX_COL_DEFAULT_PROPS, FlexCol };
 //# sourceMappingURL=FlexCol.js.map

package/dist/components/Flex/FlexCol/FlexCol.js.map

@@ -1 +1 @@
-{"version":3,"file":"FlexCol.js","sources":["../../../../src/components/Flex/FlexCol/FlexCol.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../../utils/buildClassnames';\nimport { FlexDefaultProps, FlexProps } from '../types';\nimport flexColStyles from './FlexCol.module.scss';\nimport flexStyles from '../Flex.module.scss';\n\nexport const FLEX_COL_DEFAULT_PROPS: FlexDefaultProps = {\n  alignItems: 'stretch',\n  justifyContent: 'flex-start',\n  gap: 'sm',\n  flexWrap: 'wrap',\n};\n\nexport const FlexCol: React.FC<FlexProps> = ({\n  alignItems = FLEX_COL_DEFAULT_PROPS.alignItems,\n  justifyContent = FLEX_COL_DEFAULT_PROPS.justifyContent,\n  gap = FLEX_COL_DEFAULT_PROPS.gap,\n  flexWrap = FLEX_COL_DEFAULT_PROPS.flexWrap,\n  className,\n  style,\n  children,\n  ...rest\n}) => {\n  const cssClasses = [\n    flexColStyles.flexCol,\n    flexStyles[`alignItems-${alignItems}`],\n    flexStyles[`justifyContent-${justifyContent}`],\n    flexStyles[`gap-${gap}`],\n    flexStyles[`flexWrap-${flexWrap}`],\n    className,\n  ];\n\n  return (\n    <div className={buildClassnames(cssClasses)} style={style} {...rest}>\n      {children}\n    </div>\n  );\n};\n"],"names":["React"],"mappings":";;;;;AAMa,MAAA,sBAAsB,GAAqB;AACtD,IAAA,UAAU,EAAE,SAAS;AACrB,IAAA,cAAc,EAAE,YAAY;AAC5B,IAAA,GAAG,EAAE,IAAI;AACT,IAAA,QAAQ,EAAE,MAAM;;AAGL,MAAA,OAAO,GAAwB,CAAC,EAC3C,UAAU,GAAG,sBAAsB,CAAC,UAAU,EAC9C,cAAc,GAAG,sBAAsB,CAAC,cAAc,EACtD,GAAG,GAAG,sBAAsB,CAAC,GAAG,EAChC,QAAQ,GAAG,sBAAsB,CAAC,QAAQ,EAC1C,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,IAAI,EACR,KAAI;AACH,IAAA,MAAM,UAAU,GAAG;AACjB,QAAA,aAAa,CAAC,OAAO;AACrB,QAAA,UAAU,CAAC,CAAA,WAAA,EAAc,UAAU,CAAA,CAAE,CAAC;AACtC,QAAA,UAAU,CAAC,CAAA,eAAA,EAAkB,cAAc,CAAA,CAAE,CAAC;AAC9C,QAAA,UAAU,CAAC,CAAA,IAAA,EAAO,GAAG,CAAA,CAAE,CAAC;AACxB,QAAA,UAAU,CAAC,CAAA,SAAA,EAAY,QAAQ,CAAA,CAAE,CAAC;QAClC,SAAS;KACV;AAED,IAAA,QACEA,cAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,eAAe,CAAC,UAAU,CAAC,EAAE,KAAK,EAAE,KAAK,EAAM,GAAA,IAAI,IAChE,QAAQ,CACL;AAEV;;;;"}
+{"version":3,"file":"FlexCol.js","sources":["../../../../src/components/Flex/FlexCol/FlexCol.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../../utils';\nimport { FlexDefaultProps, FlexProps } from '../types';\nimport flexColStyles from './FlexCol.module.scss';\nimport flexStyles from '../Flex.module.scss';\n\nexport const FLEX_COL_DEFAULT_PROPS: FlexDefaultProps = {\n  alignItems: 'stretch',\n  justifyContent: 'flex-start',\n  gap: 'sm',\n  flexWrap: 'wrap',\n  flexGrow: 0,\n};\n\nexport const FlexCol = React.forwardRef<HTMLDivElement, FlexProps>(\n  (\n    {\n      alignItems = FLEX_COL_DEFAULT_PROPS.alignItems,\n      justifyContent = FLEX_COL_DEFAULT_PROPS.justifyContent,\n      gap = FLEX_COL_DEFAULT_PROPS.gap,\n      flexWrap = FLEX_COL_DEFAULT_PROPS.flexWrap,\n      flexGrow = FLEX_COL_DEFAULT_PROPS.flexGrow,\n      className,\n      style,\n      children,\n      ...rest\n    },\n    ref,\n  ) => {\n    const cssClasses = [\n      flexColStyles.flexCol,\n      flexStyles[`alignItems-${alignItems}`],\n      flexStyles[`justifyContent-${justifyContent}`],\n      flexStyles[`gap-${gap}`],\n      flexStyles[`flexWrap-${flexWrap}`],\n      className,\n    ];\n\n    return (\n      <div\n        className={buildClassnames(cssClasses)}\n        style={{ flexGrow, ...style }}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n"],"names":["React"],"mappings":";;;;;;AAMa,MAAA,sBAAsB,GAAqB;AACtD,IAAA,UAAU,EAAE,SAAS;AACrB,IAAA,cAAc,EAAE,YAAY;AAC5B,IAAA,GAAG,EAAE,IAAI;AACT,IAAA,QAAQ,EAAE,MAAM;AAChB,IAAA,QAAQ,EAAE,CAAC;;AAGA,MAAA,OAAO,GAAGA,cAAK,CAAC,UAAU,CACrC,CACE,EACE,UAAU,GAAG,sBAAsB,CAAC,UAAU,EAC9C,cAAc,GAAG,sBAAsB,CAAC,cAAc,EACtD,GAAG,GAAG,sBAAsB,CAAC,GAAG,EAChC,QAAQ,GAAG,sBAAsB,CAAC,QAAQ,EAC1C,QAAQ,GAAG,sBAAsB,CAAC,QAAQ,EAC1C,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,IAAI,EACR,EACD,GAAG,KACD;AACF,IAAA,MAAM,UAAU,GAAG;AACjB,QAAA,aAAa,CAAC,OAAO;AACrB,QAAA,UAAU,CAAC,CAAA,WAAA,EAAc,UAAU,CAAA,CAAE,CAAC;AACtC,QAAA,UAAU,CAAC,CAAA,eAAA,EAAkB,cAAc,CAAA,CAAE,CAAC;AAC9C,QAAA,UAAU,CAAC,CAAA,IAAA,EAAO,GAAG,CAAA,CAAE,CAAC;AACxB,QAAA,UAAU,CAAC,CAAA,SAAA,EAAY,QAAQ,CAAA,CAAE,CAAC;QAClC,SAAS;KACV;IAED,QACEA,cACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,eAAe,CAAC,UAAU,CAAC,EACtC,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAC7B,GAAG,EAAE,GAAG,EACJ,GAAA,IAAI,EAEP,EAAA,QAAQ,CACL;AAEV,CAAC;;;;"}

package/dist/components/Flex/FlexRow/FlexRow.cjs

@@ -15,8 +15,9 @@ const FLEX_ROW_DEFAULT_PROPS = {
     justifyContent: 'flex-start',
     gap: 'sm',
     flexWrap: 'wrap',
+    flexGrow: 0,
 };
-const FlexRow = React__default.default.forwardRef(({ alignItems = FLEX_ROW_DEFAULT_PROPS.alignItems, justifyContent = FLEX_ROW_DEFAULT_PROPS.justifyContent, gap = FLEX_ROW_DEFAULT_PROPS.gap, flexWrap = FLEX_ROW_DEFAULT_PROPS.flexWrap, className, style, children, ...rest }, ref) => {
+const FlexRow = React__default.default.forwardRef(({ alignItems = FLEX_ROW_DEFAULT_PROPS.alignItems, justifyContent = FLEX_ROW_DEFAULT_PROPS.justifyContent, gap = FLEX_ROW_DEFAULT_PROPS.gap, flexWrap = FLEX_ROW_DEFAULT_PROPS.flexWrap, flexGrow = FLEX_ROW_DEFAULT_PROPS.flexGrow, className, style, children, ...rest }, ref) => {
     const cssClasses = [
         FlexRow_module.flexRow,
         Flex_module[`alignItems-${alignItems}`],
@@ -25,7 +26,7 @@ const FlexRow = React__default.default.forwardRef(({ alignItems = FLEX_ROW_DEFAU
         Flex_module[`flexWrap-${flexWrap}`],
         className,
     ];
-    return (React__default.default.createElement("div", { className: buildClassnames.buildClassnames(cssClasses), style: style, ref: ref, ...rest }, children));
+    return (React__default.default.createElement("div", { className: buildClassnames.buildClassnames(cssClasses), style: { flexGrow, ...style }, ref: ref, ...rest }, children));
 });
 
 exports.FLEX_ROW_DEFAULT_PROPS = FLEX_ROW_DEFAULT_PROPS;

package/dist/components/Flex/FlexRow/FlexRow.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FlexRow.cjs","sources":["../../../../src/components/Flex/FlexRow/FlexRow.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../../utils';\nimport { FlexDefaultProps, FlexProps } from '../types';\nimport flexRowStyles from './FlexRow.module.scss';\nimport flexStyles from '../Flex.module.scss';\n\nexport const FLEX_ROW_DEFAULT_PROPS: FlexDefaultProps = {\n  alignItems: 'center',\n  justifyContent: 'flex-start',\n  gap: 'sm',\n  flexWrap: 'wrap',\n};\n\nexport const FlexRow = React.forwardRef<HTMLDivElement, FlexProps>(\n  (\n    {\n      alignItems = FLEX_ROW_DEFAULT_PROPS.alignItems,\n      justifyContent = FLEX_ROW_DEFAULT_PROPS.justifyContent,\n      gap = FLEX_ROW_DEFAULT_PROPS.gap,\n      flexWrap = FLEX_ROW_DEFAULT_PROPS.flexWrap,\n      className,\n      style,\n      children,\n      ...rest\n    },\n    ref,\n  ) => {\n    const cssClasses = [\n      flexRowStyles.flexRow,\n      flexStyles[`alignItems-${alignItems}`],\n      flexStyles[`justifyContent-${justifyContent}`],\n      flexStyles[`gap-${gap}`],\n      flexStyles[`flexWrap-${flexWrap}`],\n      className,\n    ];\n\n    return (\n      <div className={buildClassnames(cssClasses)} style={style} ref={ref} {...rest}>\n        {children}\n      </div>\n    );\n  },\n);\n"],"names":["React","flexRowStyles","flexStyles","buildClassnames"],"mappings":";;;;;;;;;;;;AAMa,MAAA,sBAAsB,GAAqB;AACtD,IAAA,UAAU,EAAE,QAAQ;AACpB,IAAA,cAAc,EAAE,YAAY;AAC5B,IAAA,GAAG,EAAE,IAAI;AACT,IAAA,QAAQ,EAAE,MAAM;;MAGL,OAAO,GAAGA,sBAAK,CAAC,UAAU,CACrC,CACE,EACE,UAAU,GAAG,sBAAsB,CAAC,UAAU,EAC9C,cAAc,GAAG,sBAAsB,CAAC,cAAc,EACtD,GAAG,GAAG,sBAAsB,CAAC,GAAG,EAChC,QAAQ,GAAG,sBAAsB,CAAC,QAAQ,EAC1C,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,IAAI,EACR,EACD,GAAG,KACD;AACF,IAAA,MAAM,UAAU,GAAG;AACjB,QAAAC,cAAa,CAAC,OAAO;AACrB,QAAAC,WAAU,CAAC,CAAA,WAAA,EAAc,UAAU,CAAA,CAAE,CAAC;AACtC,QAAAA,WAAU,CAAC,CAAA,eAAA,EAAkB,cAAc,CAAA,CAAE,CAAC;AAC9C,QAAAA,WAAU,CAAC,CAAA,IAAA,EAAO,GAAG,CAAA,CAAE,CAAC;AACxB,QAAAA,WAAU,CAAC,CAAA,SAAA,EAAY,QAAQ,CAAA,CAAE,CAAC;QAClC,SAAS;KACV;IAED,QACEF,8CAAK,SAAS,EAAEG,+BAAe,CAAC,UAAU,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,EAAA,GAAM,IAAI,EAC1E,EAAA,QAAQ,CACL;AAEV,CAAC;;;;;"}
+{"version":3,"file":"FlexRow.cjs","sources":["../../../../src/components/Flex/FlexRow/FlexRow.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../../utils';\nimport { FlexDefaultProps, FlexProps } from '../types';\nimport flexRowStyles from './FlexRow.module.scss';\nimport flexStyles from '../Flex.module.scss';\n\nexport const FLEX_ROW_DEFAULT_PROPS: FlexDefaultProps = {\n  alignItems: 'center',\n  justifyContent: 'flex-start',\n  gap: 'sm',\n  flexWrap: 'wrap',\n  flexGrow: 0,\n};\n\nexport const FlexRow = React.forwardRef<HTMLDivElement, FlexProps>(\n  (\n    {\n      alignItems = FLEX_ROW_DEFAULT_PROPS.alignItems,\n      justifyContent = FLEX_ROW_DEFAULT_PROPS.justifyContent,\n      gap = FLEX_ROW_DEFAULT_PROPS.gap,\n      flexWrap = FLEX_ROW_DEFAULT_PROPS.flexWrap,\n      flexGrow = FLEX_ROW_DEFAULT_PROPS.flexGrow,\n      className,\n      style,\n      children,\n      ...rest\n    },\n    ref,\n  ) => {\n    const cssClasses = [\n      flexRowStyles.flexRow,\n      flexStyles[`alignItems-${alignItems}`],\n      flexStyles[`justifyContent-${justifyContent}`],\n      flexStyles[`gap-${gap}`],\n      flexStyles[`flexWrap-${flexWrap}`],\n      className,\n    ];\n\n    return (\n      <div\n        className={buildClassnames(cssClasses)}\n        style={{ flexGrow, ...style }}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n"],"names":["React","flexRowStyles","flexStyles","buildClassnames"],"mappings":";;;;;;;;;;;;AAMa,MAAA,sBAAsB,GAAqB;AACtD,IAAA,UAAU,EAAE,QAAQ;AACpB,IAAA,cAAc,EAAE,YAAY;AAC5B,IAAA,GAAG,EAAE,IAAI;AACT,IAAA,QAAQ,EAAE,MAAM;AAChB,IAAA,QAAQ,EAAE,CAAC;;AAGA,MAAA,OAAO,GAAGA,sBAAK,CAAC,UAAU,CACrC,CACE,EACE,UAAU,GAAG,sBAAsB,CAAC,UAAU,EAC9C,cAAc,GAAG,sBAAsB,CAAC,cAAc,EACtD,GAAG,GAAG,sBAAsB,CAAC,GAAG,EAChC,QAAQ,GAAG,sBAAsB,CAAC,QAAQ,EAC1C,QAAQ,GAAG,sBAAsB,CAAC,QAAQ,EAC1C,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,IAAI,EACR,EACD,GAAG,KACD;AACF,IAAA,MAAM,UAAU,GAAG;AACjB,QAAAC,cAAa,CAAC,OAAO;AACrB,QAAAC,WAAU,CAAC,CAAA,WAAA,EAAc,UAAU,CAAA,CAAE,CAAC;AACtC,QAAAA,WAAU,CAAC,CAAA,eAAA,EAAkB,cAAc,CAAA,CAAE,CAAC;AAC9C,QAAAA,WAAU,CAAC,CAAA,IAAA,EAAO,GAAG,CAAA,CAAE,CAAC;AACxB,QAAAA,WAAU,CAAC,CAAA,SAAA,EAAY,QAAQ,CAAA,CAAE,CAAC;QAClC,SAAS;KACV;IAED,QACEF,sBACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEG,+BAAe,CAAC,UAAU,CAAC,EACtC,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAC7B,GAAG,EAAE,GAAG,EACJ,GAAA,IAAI,EAEP,EAAA,QAAQ,CACL;AAEV,CAAC;;;;;"}

package/dist/components/Flex/FlexRow/FlexRow.d.ts

@@ -6,4 +6,5 @@ export declare const FlexRow: React.ForwardRefExoticComponent<{
     justifyContent?: import("csstype").Property.JustifyContent | undefined;
     gap?: keyof import("../../../theme/modules/sizes").SizeScale | undefined;
     flexWrap?: import("csstype").Property.FlexWrap | undefined;
+    flexGrow?: import("csstype").Property.FlexGrow | undefined;
 } & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Flex/FlexRow/FlexRow.js

@@ -9,8 +9,9 @@ const FLEX_ROW_DEFAULT_PROPS = {
     justifyContent: 'flex-start',
     gap: 'sm',
     flexWrap: 'wrap',
+    flexGrow: 0,
 };
-const FlexRow = React__default.forwardRef(({ alignItems = FLEX_ROW_DEFAULT_PROPS.alignItems, justifyContent = FLEX_ROW_DEFAULT_PROPS.justifyContent, gap = FLEX_ROW_DEFAULT_PROPS.gap, flexWrap = FLEX_ROW_DEFAULT_PROPS.flexWrap, className, style, children, ...rest }, ref) => {
+const FlexRow = React__default.forwardRef(({ alignItems = FLEX_ROW_DEFAULT_PROPS.alignItems, justifyContent = FLEX_ROW_DEFAULT_PROPS.justifyContent, gap = FLEX_ROW_DEFAULT_PROPS.gap, flexWrap = FLEX_ROW_DEFAULT_PROPS.flexWrap, flexGrow = FLEX_ROW_DEFAULT_PROPS.flexGrow, className, style, children, ...rest }, ref) => {
     const cssClasses = [
         flexRowStyles.flexRow,
         flexStyles[`alignItems-${alignItems}`],
@@ -19,7 +20,7 @@ const FlexRow = React__default.forwardRef(({ alignItems = FLEX_ROW_DEFAULT_PROPS
         flexStyles[`flexWrap-${flexWrap}`],
         className,
     ];
-    return (React__default.createElement("div", { className: buildClassnames(cssClasses), style: style, ref: ref, ...rest }, children));
+    return (React__default.createElement("div", { className: buildClassnames(cssClasses), style: { flexGrow, ...style }, ref: ref, ...rest }, children));
 });
 
 export { FLEX_ROW_DEFAULT_PROPS, FlexRow };

package/dist/components/Flex/FlexRow/FlexRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"FlexRow.js","sources":["../../../../src/components/Flex/FlexRow/FlexRow.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../../utils';\nimport { FlexDefaultProps, FlexProps } from '../types';\nimport flexRowStyles from './FlexRow.module.scss';\nimport flexStyles from '../Flex.module.scss';\n\nexport const FLEX_ROW_DEFAULT_PROPS: FlexDefaultProps = {\n  alignItems: 'center',\n  justifyContent: 'flex-start',\n  gap: 'sm',\n  flexWrap: 'wrap',\n};\n\nexport const FlexRow = React.forwardRef<HTMLDivElement, FlexProps>(\n  (\n    {\n      alignItems = FLEX_ROW_DEFAULT_PROPS.alignItems,\n      justifyContent = FLEX_ROW_DEFAULT_PROPS.justifyContent,\n      gap = FLEX_ROW_DEFAULT_PROPS.gap,\n      flexWrap = FLEX_ROW_DEFAULT_PROPS.flexWrap,\n      className,\n      style,\n      children,\n      ...rest\n    },\n    ref,\n  ) => {\n    const cssClasses = [\n      flexRowStyles.flexRow,\n      flexStyles[`alignItems-${alignItems}`],\n      flexStyles[`justifyContent-${justifyContent}`],\n      flexStyles[`gap-${gap}`],\n      flexStyles[`flexWrap-${flexWrap}`],\n      className,\n    ];\n\n    return (\n      <div className={buildClassnames(cssClasses)} style={style} ref={ref} {...rest}>\n        {children}\n      </div>\n    );\n  },\n);\n"],"names":["React"],"mappings":";;;;;;AAMa,MAAA,sBAAsB,GAAqB;AACtD,IAAA,UAAU,EAAE,QAAQ;AACpB,IAAA,cAAc,EAAE,YAAY;AAC5B,IAAA,GAAG,EAAE,IAAI;AACT,IAAA,QAAQ,EAAE,MAAM;;MAGL,OAAO,GAAGA,cAAK,CAAC,UAAU,CACrC,CACE,EACE,UAAU,GAAG,sBAAsB,CAAC,UAAU,EAC9C,cAAc,GAAG,sBAAsB,CAAC,cAAc,EACtD,GAAG,GAAG,sBAAsB,CAAC,GAAG,EAChC,QAAQ,GAAG,sBAAsB,CAAC,QAAQ,EAC1C,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,IAAI,EACR,EACD,GAAG,KACD;AACF,IAAA,MAAM,UAAU,GAAG;AACjB,QAAA,aAAa,CAAC,OAAO;AACrB,QAAA,UAAU,CAAC,CAAA,WAAA,EAAc,UAAU,CAAA,CAAE,CAAC;AACtC,QAAA,UAAU,CAAC,CAAA,eAAA,EAAkB,cAAc,CAAA,CAAE,CAAC;AAC9C,QAAA,UAAU,CAAC,CAAA,IAAA,EAAO,GAAG,CAAA,CAAE,CAAC;AACxB,QAAA,UAAU,CAAC,CAAA,SAAA,EAAY,QAAQ,CAAA,CAAE,CAAC;QAClC,SAAS;KACV;IAED,QACEA,sCAAK,SAAS,EAAE,eAAe,CAAC,UAAU,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,EAAA,GAAM,IAAI,EAC1E,EAAA,QAAQ,CACL;AAEV,CAAC;;;;"}
+{"version":3,"file":"FlexRow.js","sources":["../../../../src/components/Flex/FlexRow/FlexRow.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../../utils';\nimport { FlexDefaultProps, FlexProps } from '../types';\nimport flexRowStyles from './FlexRow.module.scss';\nimport flexStyles from '../Flex.module.scss';\n\nexport const FLEX_ROW_DEFAULT_PROPS: FlexDefaultProps = {\n  alignItems: 'center',\n  justifyContent: 'flex-start',\n  gap: 'sm',\n  flexWrap: 'wrap',\n  flexGrow: 0,\n};\n\nexport const FlexRow = React.forwardRef<HTMLDivElement, FlexProps>(\n  (\n    {\n      alignItems = FLEX_ROW_DEFAULT_PROPS.alignItems,\n      justifyContent = FLEX_ROW_DEFAULT_PROPS.justifyContent,\n      gap = FLEX_ROW_DEFAULT_PROPS.gap,\n      flexWrap = FLEX_ROW_DEFAULT_PROPS.flexWrap,\n      flexGrow = FLEX_ROW_DEFAULT_PROPS.flexGrow,\n      className,\n      style,\n      children,\n      ...rest\n    },\n    ref,\n  ) => {\n    const cssClasses = [\n      flexRowStyles.flexRow,\n      flexStyles[`alignItems-${alignItems}`],\n      flexStyles[`justifyContent-${justifyContent}`],\n      flexStyles[`gap-${gap}`],\n      flexStyles[`flexWrap-${flexWrap}`],\n      className,\n    ];\n\n    return (\n      <div\n        className={buildClassnames(cssClasses)}\n        style={{ flexGrow, ...style }}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n"],"names":["React"],"mappings":";;;;;;AAMa,MAAA,sBAAsB,GAAqB;AACtD,IAAA,UAAU,EAAE,QAAQ;AACpB,IAAA,cAAc,EAAE,YAAY;AAC5B,IAAA,GAAG,EAAE,IAAI;AACT,IAAA,QAAQ,EAAE,MAAM;AAChB,IAAA,QAAQ,EAAE,CAAC;;AAGA,MAAA,OAAO,GAAGA,cAAK,CAAC,UAAU,CACrC,CACE,EACE,UAAU,GAAG,sBAAsB,CAAC,UAAU,EAC9C,cAAc,GAAG,sBAAsB,CAAC,cAAc,EACtD,GAAG,GAAG,sBAAsB,CAAC,GAAG,EAChC,QAAQ,GAAG,sBAAsB,CAAC,QAAQ,EAC1C,QAAQ,GAAG,sBAAsB,CAAC,QAAQ,EAC1C,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,IAAI,EACR,EACD,GAAG,KACD;AACF,IAAA,MAAM,UAAU,GAAG;AACjB,QAAA,aAAa,CAAC,OAAO;AACrB,QAAA,UAAU,CAAC,CAAA,WAAA,EAAc,UAAU,CAAA,CAAE,CAAC;AACtC,QAAA,UAAU,CAAC,CAAA,eAAA,EAAkB,cAAc,CAAA,CAAE,CAAC;AAC9C,QAAA,UAAU,CAAC,CAAA,IAAA,EAAO,GAAG,CAAA,CAAE,CAAC;AACxB,QAAA,UAAU,CAAC,CAAA,SAAA,EAAY,QAAQ,CAAA,CAAE,CAAC;QAClC,SAAS;KACV;IAED,QACEA,cACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,eAAe,CAAC,UAAU,CAAC,EACtC,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAC7B,GAAG,EAAE,GAAG,EACJ,GAAA,IAAI,EAEP,EAAA,QAAQ,CACL;AAEV,CAAC;;;;"}

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

@@ -5,6 +5,7 @@ export type FlexProps = {
     justifyContent?: CSSProperties['justifyContent'];
     gap?: keyof typeof sizes;
     flexWrap?: CSSProperties['flexWrap'];
+    flexGrow?: CSSProperties['flexGrow'];
 } & HTMLAttributes<HTMLDivElement>;
-export type FlexDefaultProps = Pick<CSSProperties, 'alignItems' | 'justifyContent' | 'gap' | 'flexWrap'>;
+export type FlexDefaultProps = Pick<CSSProperties, 'alignItems' | 'justifyContent' | 'gap' | 'flexWrap' | 'flexGrow'>;
 export {};

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

@@ -4,6 +4,7 @@ export declare const PageLimitContainer: import("styled-components").StyledCompo
     justifyContent?: import("csstype").Property.JustifyContent | undefined;
     gap?: keyof import("../../theme/modules/sizes").SizeScale | undefined;
     flexWrap?: import("csstype").Property.FlexWrap | undefined;
+    flexGrow?: import("csstype").Property.FlexGrow | undefined;
 } & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
 export declare const PaginationButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
     children?: import("react").ReactNode;

package/dist/components/SelectDropdown/SelectDropdown.cjs

@@ -6,8 +6,8 @@ var buildClassnames = require('../../utils/buildClassnames.cjs');
 require('uid/secure');
 var SelectedOption = require('./components/SelectedOption.cjs');
 var utils = require('./utils.cjs');
-var ListItemSection = require('./ListItemSection/ListItemSection.cjs');
-var ListItem = require('./ListItem/ListItem.cjs');
+var ListItemSection = require('./components/ListItemSection/ListItemSection.cjs');
+var ListItem = require('./components/ListItem/ListItem.cjs');
 var SelectDropdownState = require('./components/SelectDropdownState.cjs');
 var Dropdown = require('../Dropdown/Dropdown.cjs');
 var Search = require('../Search/Search.cjs');

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

@@ -1 +1 @@
-{"version":3,"file":"SelectDropdown.cjs","sources":["../../../src/components/SelectDropdown/SelectDropdown.tsx"],"sourcesContent":["/* eslint-disable react/destructuring-assignment */\nimport React, { Fragment, useCallback, useState } from 'react';\nimport { Key, ListBox, Selection } from 'react-aria-components';\n\nimport { buildClassnames } from '../../utils';\nimport { SelectedOption } from './components/SelectedOption';\nimport { generateClassNames, getSelectedValues } from './utils';\nimport { SelectDropdownItem, SelectDropdownProps } from './types';\nimport { ListItemSection, ListItemSectionProps } from './ListItemSection/ListItemSection';\nimport { ListItem } from './ListItem';\nimport { ListItemProps } from './ListItem/types';\nimport { SelectDropdownState } from './components/SelectDropdownState';\nimport { Dropdown } from '../Dropdown';\nimport { Search } from '../Search';\nimport { Button } from '../Button';\nimport styles from './SelectDropdown.module.scss';\nimport formStyles from '../../utils/forms/form.module.scss';\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  onSearchChange,\n  onChange,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  ...otherProps\n}: SelectDropdownProps) => {\n  const hasSection = options.flatMap((option) => option).some((item) => 'items' in item);\n  const classNames = generateClassNames(className);\n\n  const [isSelectOpen, setIsSelectOpen] = useState(false);\n\n  const selectedValues = getSelectedValues(options, hasSection, value);\n  const selectionMode = multiple ? 'multiple' : 'single';\n\n  const onSelectionChange = useCallback(\n    (keys: Selection) => {\n      const selectedKeys = Array.from(keys);\n      const newSelectedValues = getSelectedValues(options, hasSection, selectedKeys);\n\n      if (multiple) {\n        (onChange as (items: SelectDropdownItem[]) => void)(newSelectedValues);\n      } else {\n        (onChange as (item: SelectDropdownItem) => void)(newSelectedValues[0]);\n        setIsSelectOpen(false);\n      }\n    },\n    [options, hasSection, multiple, onChange],\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        <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          <SelectedOption\n            placeholder={placeholder}\n            options={selectedValues}\n            selectionMode={selectionMode}\n          />\n        </button>\n      )}\n    >\n      {onSearchChange && (\n        <>\n          <Search className={styles.search} value={searchValue} onChange={onSearchChange} />\n          <hr className={styles.separator} />\n        </>\n      )}\n      <ListBox\n        className={buildClassnames([classNames?.optionsContainer, styles.listBox, className])}\n        aria-labelledby={ariaLabelledBy ?? `${id}-label`}\n        aria-describedby={ariaDescribedBy ?? `${id}-hint`}\n        selectionMode={selectionMode}\n        items={options}\n        onSelectionChange={onSelectionChange}\n        selectedKeys={selectedValues.map((selectedValue) => selectedValue.id) as Key[]}\n        renderEmptyState={() => (\n          <SelectDropdownState isLoading={isLoading} emptyStateSlot={emptyStateSlot} />\n        )}\n        {...otherProps}\n      >\n        {(item) =>\n          hasSection ? (\n            <ListItemSection {...(item as ListItemSectionProps)} />\n          ) : (\n            <ListItem {...(item as ListItemProps)} />\n          )\n        }\n      </ListBox>\n      {actions?.map(({ label, ...actionProps }) => (\n        <Fragment key={label}>\n          <hr className={styles.separator} key={`seperator-${label}`} />\n          <Button className={styles.ctaButton} variant=\"flat\" key={label} {...actionProps} />\n        </Fragment>\n      ))}\n    </Dropdown>\n  );\n};\n"],"names":["generateClassNames","useState","getSelectedValues","useCallback","React","Dropdown","buildClassnames","styles","formStyles","SelectedOption","Search","ListBox","SelectDropdownState","ListItemSection","ListItem","Fragment","Button"],"mappings":"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"}
+{"version":3,"file":"SelectDropdown.cjs","sources":["../../../src/components/SelectDropdown/SelectDropdown.tsx"],"sourcesContent":["/* eslint-disable react/destructuring-assignment */\nimport React, { Fragment, useCallback, useState } from 'react';\nimport { Key, ListBox, Selection } from 'react-aria-components';\n\nimport { buildClassnames } from '../../utils';\nimport { SelectedOption } from './components/SelectedOption';\nimport { generateClassNames, getSelectedValues } from './utils';\nimport { SelectDropdownItem, SelectDropdownProps } from './types';\nimport {\n  ListItemSection,\n  ListItemSectionProps,\n} from './components/ListItemSection/ListItemSection';\nimport { ListItem } from './components/ListItem';\nimport { ListItemProps } from './components/ListItem/types';\nimport { SelectDropdownState } from './components/SelectDropdownState';\nimport { Dropdown } from '../Dropdown';\nimport { Search } from '../Search';\nimport { Button } from '../Button';\nimport styles from './SelectDropdown.module.scss';\nimport formStyles from '../../utils/forms/form.module.scss';\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  onSearchChange,\n  onChange,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  ...otherProps\n}: SelectDropdownProps) => {\n  const hasSection = options.flatMap((option) => option).some((item) => 'items' in item);\n  const classNames = generateClassNames(className);\n\n  const [isSelectOpen, setIsSelectOpen] = useState(false);\n\n  const selectedValues = getSelectedValues(options, hasSection, value);\n  const selectionMode = multiple ? 'multiple' : 'single';\n\n  const onSelectionChange = useCallback(\n    (keys: Selection) => {\n      const selectedKeys = Array.from(keys);\n      const newSelectedValues = getSelectedValues(options, hasSection, selectedKeys);\n\n      if (multiple) {\n        (onChange as (items: SelectDropdownItem[]) => void)(newSelectedValues);\n      } else {\n        (onChange as (item: SelectDropdownItem) => void)(newSelectedValues[0]);\n        setIsSelectOpen(false);\n      }\n    },\n    [options, hasSection, multiple, onChange],\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        <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          <SelectedOption\n            placeholder={placeholder}\n            options={selectedValues}\n            selectionMode={selectionMode}\n          />\n        </button>\n      )}\n    >\n      {onSearchChange && (\n        <>\n          <Search className={styles.search} value={searchValue} onChange={onSearchChange} />\n          <hr className={styles.separator} />\n        </>\n      )}\n      <ListBox\n        className={buildClassnames([classNames?.optionsContainer, styles.listBox, className])}\n        aria-labelledby={ariaLabelledBy ?? `${id}-label`}\n        aria-describedby={ariaDescribedBy ?? `${id}-hint`}\n        selectionMode={selectionMode}\n        items={options}\n        onSelectionChange={onSelectionChange}\n        selectedKeys={selectedValues.map((selectedValue) => selectedValue.id) as Key[]}\n        renderEmptyState={() => (\n          <SelectDropdownState isLoading={isLoading} emptyStateSlot={emptyStateSlot} />\n        )}\n        {...otherProps}\n      >\n        {(item) =>\n          hasSection ? (\n            <ListItemSection {...(item as ListItemSectionProps)} />\n          ) : (\n            <ListItem {...(item as ListItemProps)} />\n          )\n        }\n      </ListBox>\n      {actions?.map(({ label, ...actionProps }) => (\n        <Fragment key={label}>\n          <hr className={styles.separator} key={`seperator-${label}`} />\n          <Button className={styles.ctaButton} variant=\"flat\" key={label} {...actionProps} />\n        </Fragment>\n      ))}\n    </Dropdown>\n  );\n};\n"],"names":["generateClassNames","useState","getSelectedValues","useCallback","React","Dropdown","buildClassnames","styles","formStyles","SelectedOption","Search","ListBox","SelectDropdownState","ListItemSection","ListItem","Fragment","Button"],"mappings":"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"}

package/dist/components/SelectDropdown/SelectDropdown.js

@@ -4,8 +4,8 @@ import { buildClassnames } from '../../utils/buildClassnames.js';
 import 'uid/secure';
 import { SelectedOption } from './components/SelectedOption.js';
 import { getSelectedValues, generateClassNames } from './utils.js';
-import { ListItemSection } from './ListItemSection/ListItemSection.js';
-import { ListItem } from './ListItem/ListItem.js';
+import { ListItemSection } from './components/ListItemSection/ListItemSection.js';
+import { ListItem } from './components/ListItem/ListItem.js';
 import { SelectDropdownState } from './components/SelectDropdownState.js';
 import { Dropdown } from '../Dropdown/Dropdown.js';
 import { Search } from '../Search/Search.js';

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

@@ -1 +1 @@
-{"version":3,"file":"SelectDropdown.js","sources":["../../../src/components/SelectDropdown/SelectDropdown.tsx"],"sourcesContent":["/* eslint-disable react/destructuring-assignment */\nimport React, { Fragment, useCallback, useState } from 'react';\nimport { Key, ListBox, Selection } from 'react-aria-components';\n\nimport { buildClassnames } from '../../utils';\nimport { SelectedOption } from './components/SelectedOption';\nimport { generateClassNames, getSelectedValues } from './utils';\nimport { SelectDropdownItem, SelectDropdownProps } from './types';\nimport { ListItemSection, ListItemSectionProps } from './ListItemSection/ListItemSection';\nimport { ListItem } from './ListItem';\nimport { ListItemProps } from './ListItem/types';\nimport { SelectDropdownState } from './components/SelectDropdownState';\nimport { Dropdown } from '../Dropdown';\nimport { Search } from '../Search';\nimport { Button } from '../Button';\nimport styles from './SelectDropdown.module.scss';\nimport formStyles from '../../utils/forms/form.module.scss';\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  onSearchChange,\n  onChange,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  ...otherProps\n}: SelectDropdownProps) => {\n  const hasSection = options.flatMap((option) => option).some((item) => 'items' in item);\n  const classNames = generateClassNames(className);\n\n  const [isSelectOpen, setIsSelectOpen] = useState(false);\n\n  const selectedValues = getSelectedValues(options, hasSection, value);\n  const selectionMode = multiple ? 'multiple' : 'single';\n\n  const onSelectionChange = useCallback(\n    (keys: Selection) => {\n      const selectedKeys = Array.from(keys);\n      const newSelectedValues = getSelectedValues(options, hasSection, selectedKeys);\n\n      if (multiple) {\n        (onChange as (items: SelectDropdownItem[]) => void)(newSelectedValues);\n      } else {\n        (onChange as (item: SelectDropdownItem) => void)(newSelectedValues[0]);\n        setIsSelectOpen(false);\n      }\n    },\n    [options, hasSection, multiple, onChange],\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        <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          <SelectedOption\n            placeholder={placeholder}\n            options={selectedValues}\n            selectionMode={selectionMode}\n          />\n        </button>\n      )}\n    >\n      {onSearchChange && (\n        <>\n          <Search className={styles.search} value={searchValue} onChange={onSearchChange} />\n          <hr className={styles.separator} />\n        </>\n      )}\n      <ListBox\n        className={buildClassnames([classNames?.optionsContainer, styles.listBox, className])}\n        aria-labelledby={ariaLabelledBy ?? `${id}-label`}\n        aria-describedby={ariaDescribedBy ?? `${id}-hint`}\n        selectionMode={selectionMode}\n        items={options}\n        onSelectionChange={onSelectionChange}\n        selectedKeys={selectedValues.map((selectedValue) => selectedValue.id) as Key[]}\n        renderEmptyState={() => (\n          <SelectDropdownState isLoading={isLoading} emptyStateSlot={emptyStateSlot} />\n        )}\n        {...otherProps}\n      >\n        {(item) =>\n          hasSection ? (\n            <ListItemSection {...(item as ListItemSectionProps)} />\n          ) : (\n            <ListItem {...(item as ListItemProps)} />\n          )\n        }\n      </ListBox>\n      {actions?.map(({ label, ...actionProps }) => (\n        <Fragment key={label}>\n          <hr className={styles.separator} key={`seperator-${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":["/* eslint-disable react/destructuring-assignment */\nimport React, { Fragment, useCallback, useState } from 'react';\nimport { Key, ListBox, Selection } from 'react-aria-components';\n\nimport { buildClassnames } from '../../utils';\nimport { SelectedOption } from './components/SelectedOption';\nimport { generateClassNames, getSelectedValues } from './utils';\nimport { SelectDropdownItem, SelectDropdownProps } from './types';\nimport {\n  ListItemSection,\n  ListItemSectionProps,\n} from './components/ListItemSection/ListItemSection';\nimport { ListItem } from './components/ListItem';\nimport { ListItemProps } from './components/ListItem/types';\nimport { SelectDropdownState } from './components/SelectDropdownState';\nimport { Dropdown } from '../Dropdown';\nimport { Search } from '../Search';\nimport { Button } from '../Button';\nimport styles from './SelectDropdown.module.scss';\nimport formStyles from '../../utils/forms/form.module.scss';\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  onSearchChange,\n  onChange,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  ...otherProps\n}: SelectDropdownProps) => {\n  const hasSection = options.flatMap((option) => option).some((item) => 'items' in item);\n  const classNames = generateClassNames(className);\n\n  const [isSelectOpen, setIsSelectOpen] = useState(false);\n\n  const selectedValues = getSelectedValues(options, hasSection, value);\n  const selectionMode = multiple ? 'multiple' : 'single';\n\n  const onSelectionChange = useCallback(\n    (keys: Selection) => {\n      const selectedKeys = Array.from(keys);\n      const newSelectedValues = getSelectedValues(options, hasSection, selectedKeys);\n\n      if (multiple) {\n        (onChange as (items: SelectDropdownItem[]) => void)(newSelectedValues);\n      } else {\n        (onChange as (item: SelectDropdownItem) => void)(newSelectedValues[0]);\n        setIsSelectOpen(false);\n      }\n    },\n    [options, hasSection, multiple, onChange],\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        <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          <SelectedOption\n            placeholder={placeholder}\n            options={selectedValues}\n            selectionMode={selectionMode}\n          />\n        </button>\n      )}\n    >\n      {onSearchChange && (\n        <>\n          <Search className={styles.search} value={searchValue} onChange={onSearchChange} />\n          <hr className={styles.separator} />\n        </>\n      )}\n      <ListBox\n        className={buildClassnames([classNames?.optionsContainer, styles.listBox, className])}\n        aria-labelledby={ariaLabelledBy ?? `${id}-label`}\n        aria-describedby={ariaDescribedBy ?? `${id}-hint`}\n        selectionMode={selectionMode}\n        items={options}\n        onSelectionChange={onSelectionChange}\n        selectedKeys={selectedValues.map((selectedValue) => selectedValue.id) as Key[]}\n        renderEmptyState={() => (\n          <SelectDropdownState isLoading={isLoading} emptyStateSlot={emptyStateSlot} />\n        )}\n        {...otherProps}\n      >\n        {(item) =>\n          hasSection ? (\n            <ListItemSection {...(item as ListItemSectionProps)} />\n          ) : (\n            <ListItem {...(item as ListItemProps)} />\n          )\n        }\n      </ListBox>\n      {actions?.map(({ label, ...actionProps }) => (\n        <Fragment key={label}>\n          <hr className={styles.separator} key={`seperator-${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/components/GridItem/GridItem.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { GridItemProps } from './types';
+export declare function GridItem({ id, label, href, appearance, className, onClickRowAction, rowActionAriaLabel, isRowActionDisabled, ...props }: GridItemProps): React.JSX.Element;

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

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

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

@@ -0,0 +1,7 @@
+import { GridListItemProps } from 'react-aria-components';
+import { BaseItemProps } from '../types';
+export type GridItemProps = BaseItemProps & GridListItemProps & {
+    onClickRowAction?: () => void;
+    rowActionAriaLabel?: string;
+    isRowActionDisabled?: boolean;
+};

package/dist/components/SelectDropdown/{ListItem/components/ListItemContent.cjs → components/ItemContent/ItemContent.cjs}

@@ -10,43 +10,43 @@ var DragIndicatorIcon = require('../../../../icons/design-system/components/Drag
 var Text = require('../../../Text/Text.cjs');
 var MiniAlert = require('../../../Alerts/MiniAlert/MiniAlert.cjs');
 var SelectionType = require('./SelectionType.cjs');
-var ListItem_module = require('../ListItem.module.scss.cjs');
+var ItemContent_module = require('./ItemContent.module.scss.cjs');
 var FlexRow = require('../../../Flex/FlexRow/FlexRow.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const ListItemContent = ({ label, hint, itemInfoSlot, endInfoSlot, alert, mediaSlot, allowsDragging = false, selectionMode = 'single', isLink, isSelected = false, }) => {
-    const getInfoContainerClassNames = React.useMemo(() => {
-        const base = ListItem_module.infoContainer;
+const ItemContent = ({ label, hint, itemInfoSlot, endInfoSlot, alert, mediaSlot, allowsDragging = false, selectionMode = 'single', isLink, isSelected = false, itemType, }) => {
+    const infoContainerClassNames = React.useMemo(() => {
+        const base = ItemContent_module.infoContainer;
         if (itemInfoSlot && endInfoSlot) {
-            return buildClassnames.buildClassnames([base, ListItem_module.hasItemInfoAndEndInfo]);
+            return buildClassnames.buildClassnames([base, ItemContent_module.hasItemInfoAndEndInfo]);
         }
         if (itemInfoSlot) {
-            return buildClassnames.buildClassnames([base, ListItem_module.hasItemInfoOnly]);
+            return buildClassnames.buildClassnames([base, ItemContent_module.hasItemInfoOnly]);
         }
         if (endInfoSlot) {
-            return buildClassnames.buildClassnames([base, ListItem_module.hasEndInfoOnly]);
+            return buildClassnames.buildClassnames([base, ItemContent_module.hasEndInfoOnly]);
         }
         return buildClassnames.buildClassnames([base]);
     }, [endInfoSlot, itemInfoSlot]);
-    return (React__default.default.createElement(FlexRow.FlexRow, { flexWrap: "nowrap", justifyContent: "space-between", alignItems: "center", gap: "base" },
+    return (React__default.default.createElement(FlexRow.FlexRow, { flexWrap: "nowrap", justifyContent: "space-between", alignItems: "center", gap: "base", style: { flexGrow: 1 } },
         React__default.default.createElement(FlexRow.FlexRow, { flexWrap: "nowrap", gap: "base", style: { flexGrow: 1 } },
             allowsDragging && React__default.default.createElement(DragIndicatorIcon.ReactComponent, { "data-testid": "drag-icon" }),
             React__default.default.createElement(SelectionType.SelectionType, { selectionMode: selectionMode, isSelected: isSelected, isLink: isLink }),
             mediaSlot,
             React__default.default.createElement(FlexCol.FlexCol, { gap: "xs", style: { flexGrow: 1 } },
-                React__default.default.createElement("div", { className: getInfoContainerClassNames, "data-testid": "info-container" },
-                    React__default.default.createElement(reactAriaComponents.Text, { slot: "label" },
-                        React__default.default.createElement(Text.Text, { variant: "body" }, label)),
+                React__default.default.createElement("div", { className: infoContainerClassNames, "data-testid": "info-container" },
+                    itemType === 'grid' ? (React__default.default.createElement(Text.Text, { variant: "body" }, label)) : (React__default.default.createElement(reactAriaComponents.Text, { slot: "label" },
+                        React__default.default.createElement(Text.Text, { variant: "body" }, label))),
                     itemInfoSlot,
-                    endInfoSlot && (React__default.default.createElement("div", { className: endInfoSlot ? ListItem_module.justifyEnd : ListItem_module.justifyStart }, endInfoSlot))),
+                    endInfoSlot && (React__default.default.createElement("div", { className: endInfoSlot ? ItemContent_module.justifyEnd : ItemContent_module.justifyStart }, endInfoSlot))),
                 hint && (React__default.default.createElement(reactAriaComponents.Text, { slot: "description" },
                     React__default.default.createElement(Text.Text, { variant: "hintText" }, hint))),
                 alert && React__default.default.createElement(MiniAlert.MiniAlert, { title: alert.title, variant: alert.variant }))),
-        isLink && React__default.default.createElement(ArrowRightIcon.ReactComponent, { className: ListItem_module.linkIcon, "data-testid": "link-icon" })));
+        isLink && React__default.default.createElement(ArrowRightIcon.ReactComponent, { className: ItemContent_module.linkIcon, "data-testid": "link-icon" })));
 };
 
-exports.ListItemContent = ListItemContent;
-//# sourceMappingURL=ListItemContent.cjs.map
+exports.ItemContent = ItemContent;
+//# sourceMappingURL=ItemContent.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ItemContent.cjs","sources":["../../../../../src/components/SelectDropdown/components/ItemContent/ItemContent.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { Text } from 'react-aria-components';\nimport { buildClassnames } from '../../../../utils';\nimport { FlexCol } from '../../../Flex/FlexCol';\nimport { ArrowRightIcon, DragIndicatorIcon } from '../../../../icons';\nimport { ItemContentProps } from './types';\nimport { Text as VeeqoText } from '../../../Text';\nimport { MiniAlert } from '../../../Alerts/MiniAlert';\nimport { SelectionType } from './SelectionType';\nimport styles from './ItemContent.module.scss';\nimport { FlexRow } from '../../../Flex/FlexRow';\n\nexport const ItemContent = ({\n  label,\n  hint,\n  itemInfoSlot,\n  endInfoSlot,\n  alert,\n  mediaSlot,\n  allowsDragging = false,\n  selectionMode = 'single',\n  isLink,\n  isSelected = false,\n  itemType,\n}: ItemContentProps) => {\n  const infoContainerClassNames = useMemo(() => {\n    const base = styles.infoContainer;\n\n    if (itemInfoSlot && endInfoSlot) {\n      return buildClassnames([base, styles.hasItemInfoAndEndInfo]);\n    }\n\n    if (itemInfoSlot) {\n      return buildClassnames([base, styles.hasItemInfoOnly]);\n    }\n\n    if (endInfoSlot) {\n      return buildClassnames([base, styles.hasEndInfoOnly]);\n    }\n\n    return buildClassnames([base]);\n  }, [endInfoSlot, itemInfoSlot]);\n\n  return (\n    <FlexRow\n      flexWrap=\"nowrap\"\n      justifyContent=\"space-between\"\n      alignItems=\"center\"\n      gap=\"base\"\n      style={{ flexGrow: 1 }}\n    >\n      <FlexRow flexWrap=\"nowrap\" gap=\"base\" style={{ flexGrow: 1 }}>\n        {allowsDragging && <DragIndicatorIcon data-testid=\"drag-icon\" />}\n        <SelectionType selectionMode={selectionMode} isSelected={isSelected} isLink={isLink} />\n        {mediaSlot}\n        <FlexCol gap=\"xs\" style={{ flexGrow: 1 }}>\n          <div className={infoContainerClassNames} data-testid=\"info-container\">\n            {itemType === 'grid' ? (\n              <VeeqoText variant=\"body\">{label}</VeeqoText>\n            ) : (\n              <Text slot=\"label\">\n                <VeeqoText variant=\"body\">{label}</VeeqoText>\n              </Text>\n            )}\n            {itemInfoSlot}\n            {endInfoSlot && (\n              <div className={endInfoSlot ? styles.justifyEnd : styles.justifyStart}>\n                {endInfoSlot}\n              </div>\n            )}\n          </div>\n\n          {hint && (\n            <Text slot=\"description\">\n              <VeeqoText variant=\"hintText\">{hint}</VeeqoText>\n            </Text>\n          )}\n          {alert && <MiniAlert title={alert.title} variant={alert.variant} />}\n        </FlexCol>\n      </FlexRow>\n      {isLink && <ArrowRightIcon className={styles.linkIcon} data-testid=\"link-icon\" />}\n    </FlexRow>\n  );\n};\n"],"names":["useMemo","styles","buildClassnames","React","FlexRow","DragIndicatorIcon","SelectionType","FlexCol","VeeqoText","Text","MiniAlert","ArrowRightIcon"],"mappings":";;;;;;;;;;;;;;;;;;;AAYO,MAAM,WAAW,GAAG,CAAC,EAC1B,KAAK,EACL,IAAI,EACJ,YAAY,EACZ,WAAW,EACX,KAAK,EACL,SAAS,EACT,cAAc,GAAG,KAAK,EACtB,aAAa,GAAG,QAAQ,EACxB,MAAM,EACN,UAAU,GAAG,KAAK,EAClB,QAAQ,GACS,KAAI;AACrB,IAAA,MAAM,uBAAuB,GAAGA,aAAO,CAAC,MAAK;AAC3C,QAAA,MAAM,IAAI,GAAGC,kBAAM,CAAC,aAAa;QAEjC,IAAI,YAAY,IAAI,WAAW,EAAE;YAC/B,OAAOC,+BAAe,CAAC,CAAC,IAAI,EAAED,kBAAM,CAAC,qBAAqB,CAAC,CAAC;AAC7D;AAED,QAAA,IAAI,YAAY,EAAE;YAChB,OAAOC,+BAAe,CAAC,CAAC,IAAI,EAAED,kBAAM,CAAC,eAAe,CAAC,CAAC;AACvD;AAED,QAAA,IAAI,WAAW,EAAE;YACf,OAAOC,+BAAe,CAAC,CAAC,IAAI,EAAED,kBAAM,CAAC,cAAc,CAAC,CAAC;AACtD;AAED,QAAA,OAAOC,+BAAe,CAAC,CAAC,IAAI,CAAC,CAAC;AAChC,KAAC,EAAE,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC;IAE/B,QACEC,sBAAC,CAAA,aAAA,CAAAC,eAAO,EACN,EAAA,QAAQ,EAAC,QAAQ,EACjB,cAAc,EAAC,eAAe,EAC9B,UAAU,EAAC,QAAQ,EACnB,GAAG,EAAC,MAAM,EACV,KAAK,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE,EAAA;AAEtB,QAAAD,sBAAA,CAAA,aAAA,CAACC,eAAO,EAAC,EAAA,QAAQ,EAAC,QAAQ,EAAC,GAAG,EAAC,MAAM,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE,EAAA;AACzD,YAAA,cAAc,IAAID,sBAAA,CAAA,aAAA,CAACE,gCAAiB,EAAA,EAAA,aAAA,EAAa,WAAW,EAAG,CAAA;AAChE,YAAAF,sBAAA,CAAA,aAAA,CAACG,2BAAa,EAAA,EAAC,aAAa,EAAE,aAAa,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,EAAI,CAAA;YACtF,SAAS;AACV,YAAAH,sBAAA,CAAA,aAAA,CAACI,eAAO,EAAA,EAAC,GAAG,EAAC,IAAI,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE,EAAA;AACtC,gBAAAJ,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,uBAAuB,EAAA,aAAA,EAAc,gBAAgB,EAAA;oBAClE,QAAQ,KAAK,MAAM,IAClBA,sBAAC,CAAA,aAAA,CAAAK,SAAS,EAAC,EAAA,OAAO,EAAC,MAAM,IAAE,KAAK,CAAa,KAE7CL,sBAAA,CAAA,aAAA,CAACM,wBAAI,EAAA,EAAC,IAAI,EAAC,OAAO,EAAA;wBAChBN,sBAAC,CAAA,aAAA,CAAAK,SAAS,IAAC,OAAO,EAAC,MAAM,EAAE,EAAA,KAAK,CAAa,CACxC,CACR;oBACA,YAAY;oBACZ,WAAW,KACVL,sBAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,WAAW,GAAGF,kBAAM,CAAC,UAAU,GAAGA,kBAAM,CAAC,YAAY,EAClE,EAAA,WAAW,CACR,CACP,CACG;AAEL,gBAAA,IAAI,KACHE,sBAAA,CAAA,aAAA,CAACM,wBAAI,EAAC,EAAA,IAAI,EAAC,aAAa,EAAA;oBACtBN,sBAAC,CAAA,aAAA,CAAAK,SAAS,IAAC,OAAO,EAAC,UAAU,EAAE,EAAA,IAAI,CAAa,CAC3C,CACR;AACA,gBAAA,KAAK,IAAIL,sBAAC,CAAA,aAAA,CAAAO,mBAAS,EAAC,EAAA,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,EAAA,CAAI,CAC3D,CACF;AACT,QAAA,MAAM,IAAIP,sBAAA,CAAA,aAAA,CAACQ,6BAAc,EAAA,EAAC,SAAS,EAAEV,kBAAM,CAAC,QAAQ,EAAc,aAAA,EAAA,WAAW,EAAG,CAAA,CACzE;AAEd;;;;"}

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ItemContentProps } from './types';
+export declare const ItemContent: ({ label, hint, itemInfoSlot, endInfoSlot, alert, mediaSlot, allowsDragging, selectionMode, isLink, isSelected, itemType, }: ItemContentProps) => React.JSX.Element;

package/dist/components/SelectDropdown/{ListItem/components/ListItemContent.js → components/ItemContent/ItemContent.js}

@@ -1,18 +1,18 @@
 import React__default, { useMemo } from 'react';
-import { Text } from 'react-aria-components';
+import { Text as Text$1 } from 'react-aria-components';
 import { buildClassnames } from '../../../../utils/buildClassnames.js';
 import 'uid/secure';
 import { FlexCol } from '../../../Flex/FlexCol/FlexCol.js';
 import { ReactComponent as ArrowRightIcon } from '../../../../icons/design-system/components/ArrowRightIcon.js';
 import { ReactComponent as DragIndicatorIcon } from '../../../../icons/design-system/components/DragIndicatorIcon.js';
-import { Text as Text$1 } from '../../../Text/Text.js';
+import { Text } from '../../../Text/Text.js';
 import { MiniAlert } from '../../../Alerts/MiniAlert/MiniAlert.js';
 import { SelectionType } from './SelectionType.js';
-import styles from '../ListItem.module.scss.js';
+import styles from './ItemContent.module.scss.js';
 import { FlexRow } from '../../../Flex/FlexRow/FlexRow.js';
 
-const ListItemContent = ({ label, hint, itemInfoSlot, endInfoSlot, alert, mediaSlot, allowsDragging = false, selectionMode = 'single', isLink, isSelected = false, }) => {
-    const getInfoContainerClassNames = useMemo(() => {
+const ItemContent = ({ label, hint, itemInfoSlot, endInfoSlot, alert, mediaSlot, allowsDragging = false, selectionMode = 'single', isLink, isSelected = false, itemType, }) => {
+    const infoContainerClassNames = useMemo(() => {
         const base = styles.infoContainer;
         if (itemInfoSlot && endInfoSlot) {
             return buildClassnames([base, styles.hasItemInfoAndEndInfo]);
@@ -25,22 +25,22 @@ const ListItemContent = ({ label, hint, itemInfoSlot, endInfoSlot, alert, mediaS
         }
         return buildClassnames([base]);
     }, [endInfoSlot, itemInfoSlot]);
-    return (React__default.createElement(FlexRow, { flexWrap: "nowrap", justifyContent: "space-between", alignItems: "center", gap: "base" },
+    return (React__default.createElement(FlexRow, { flexWrap: "nowrap", justifyContent: "space-between", alignItems: "center", gap: "base", style: { flexGrow: 1 } },
         React__default.createElement(FlexRow, { flexWrap: "nowrap", gap: "base", style: { flexGrow: 1 } },
             allowsDragging && React__default.createElement(DragIndicatorIcon, { "data-testid": "drag-icon" }),
             React__default.createElement(SelectionType, { selectionMode: selectionMode, isSelected: isSelected, isLink: isLink }),
             mediaSlot,
             React__default.createElement(FlexCol, { gap: "xs", style: { flexGrow: 1 } },
-                React__default.createElement("div", { className: getInfoContainerClassNames, "data-testid": "info-container" },
-                    React__default.createElement(Text, { slot: "label" },
-                        React__default.createElement(Text$1, { variant: "body" }, label)),
+                React__default.createElement("div", { className: infoContainerClassNames, "data-testid": "info-container" },
+                    itemType === 'grid' ? (React__default.createElement(Text, { variant: "body" }, label)) : (React__default.createElement(Text$1, { slot: "label" },
+                        React__default.createElement(Text, { variant: "body" }, label))),
                     itemInfoSlot,
                     endInfoSlot && (React__default.createElement("div", { className: endInfoSlot ? styles.justifyEnd : styles.justifyStart }, endInfoSlot))),
-                hint && (React__default.createElement(Text, { slot: "description" },
-                    React__default.createElement(Text$1, { variant: "hintText" }, hint))),
+                hint && (React__default.createElement(Text$1, { slot: "description" },
+                    React__default.createElement(Text, { variant: "hintText" }, hint))),
                 alert && React__default.createElement(MiniAlert, { title: alert.title, variant: alert.variant }))),
         isLink && React__default.createElement(ArrowRightIcon, { className: styles.linkIcon, "data-testid": "link-icon" })));
 };
 
-export { ListItemContent };
-//# sourceMappingURL=ListItemContent.js.map
+export { ItemContent };
+//# sourceMappingURL=ItemContent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ItemContent.js","sources":["../../../../../src/components/SelectDropdown/components/ItemContent/ItemContent.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { Text } from 'react-aria-components';\nimport { buildClassnames } from '../../../../utils';\nimport { FlexCol } from '../../../Flex/FlexCol';\nimport { ArrowRightIcon, DragIndicatorIcon } from '../../../../icons';\nimport { ItemContentProps } from './types';\nimport { Text as VeeqoText } from '../../../Text';\nimport { MiniAlert } from '../../../Alerts/MiniAlert';\nimport { SelectionType } from './SelectionType';\nimport styles from './ItemContent.module.scss';\nimport { FlexRow } from '../../../Flex/FlexRow';\n\nexport const ItemContent = ({\n  label,\n  hint,\n  itemInfoSlot,\n  endInfoSlot,\n  alert,\n  mediaSlot,\n  allowsDragging = false,\n  selectionMode = 'single',\n  isLink,\n  isSelected = false,\n  itemType,\n}: ItemContentProps) => {\n  const infoContainerClassNames = useMemo(() => {\n    const base = styles.infoContainer;\n\n    if (itemInfoSlot && endInfoSlot) {\n      return buildClassnames([base, styles.hasItemInfoAndEndInfo]);\n    }\n\n    if (itemInfoSlot) {\n      return buildClassnames([base, styles.hasItemInfoOnly]);\n    }\n\n    if (endInfoSlot) {\n      return buildClassnames([base, styles.hasEndInfoOnly]);\n    }\n\n    return buildClassnames([base]);\n  }, [endInfoSlot, itemInfoSlot]);\n\n  return (\n    <FlexRow\n      flexWrap=\"nowrap\"\n      justifyContent=\"space-between\"\n      alignItems=\"center\"\n      gap=\"base\"\n      style={{ flexGrow: 1 }}\n    >\n      <FlexRow flexWrap=\"nowrap\" gap=\"base\" style={{ flexGrow: 1 }}>\n        {allowsDragging && <DragIndicatorIcon data-testid=\"drag-icon\" />}\n        <SelectionType selectionMode={selectionMode} isSelected={isSelected} isLink={isLink} />\n        {mediaSlot}\n        <FlexCol gap=\"xs\" style={{ flexGrow: 1 }}>\n          <div className={infoContainerClassNames} data-testid=\"info-container\">\n            {itemType === 'grid' ? (\n              <VeeqoText variant=\"body\">{label}</VeeqoText>\n            ) : (\n              <Text slot=\"label\">\n                <VeeqoText variant=\"body\">{label}</VeeqoText>\n              </Text>\n            )}\n            {itemInfoSlot}\n            {endInfoSlot && (\n              <div className={endInfoSlot ? styles.justifyEnd : styles.justifyStart}>\n                {endInfoSlot}\n              </div>\n            )}\n          </div>\n\n          {hint && (\n            <Text slot=\"description\">\n              <VeeqoText variant=\"hintText\">{hint}</VeeqoText>\n            </Text>\n          )}\n          {alert && <MiniAlert title={alert.title} variant={alert.variant} />}\n        </FlexCol>\n      </FlexRow>\n      {isLink && <ArrowRightIcon className={styles.linkIcon} data-testid=\"link-icon\" />}\n    </FlexRow>\n  );\n};\n"],"names":["React","VeeqoText","Text"],"mappings":";;;;;;;;;;;;;AAYO,MAAM,WAAW,GAAG,CAAC,EAC1B,KAAK,EACL,IAAI,EACJ,YAAY,EACZ,WAAW,EACX,KAAK,EACL,SAAS,EACT,cAAc,GAAG,KAAK,EACtB,aAAa,GAAG,QAAQ,EACxB,MAAM,EACN,UAAU,GAAG,KAAK,EAClB,QAAQ,GACS,KAAI;AACrB,IAAA,MAAM,uBAAuB,GAAG,OAAO,CAAC,MAAK;AAC3C,QAAA,MAAM,IAAI,GAAG,MAAM,CAAC,aAAa;QAEjC,IAAI,YAAY,IAAI,WAAW,EAAE;YAC/B,OAAO,eAAe,CAAC,CAAC,IAAI,EAAE,MAAM,CAAC,qBAAqB,CAAC,CAAC;AAC7D;AAED,QAAA,IAAI,YAAY,EAAE;YAChB,OAAO,eAAe,CAAC,CAAC,IAAI,EAAE,MAAM,CAAC,eAAe,CAAC,CAAC;AACvD;AAED,QAAA,IAAI,WAAW,EAAE;YACf,OAAO,eAAe,CAAC,CAAC,IAAI,EAAE,MAAM,CAAC,cAAc,CAAC,CAAC;AACtD;AAED,QAAA,OAAO,eAAe,CAAC,CAAC,IAAI,CAAC,CAAC;AAChC,KAAC,EAAE,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC;IAE/B,QACEA,cAAC,CAAA,aAAA,CAAA,OAAO,EACN,EAAA,QAAQ,EAAC,QAAQ,EACjB,cAAc,EAAC,eAAe,EAC9B,UAAU,EAAC,QAAQ,EACnB,GAAG,EAAC,MAAM,EACV,KAAK,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE,EAAA;AAEtB,QAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAC,EAAA,QAAQ,EAAC,QAAQ,EAAC,GAAG,EAAC,MAAM,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE,EAAA;AACzD,YAAA,cAAc,IAAIA,cAAA,CAAA,aAAA,CAAC,iBAAiB,EAAA,EAAA,aAAA,EAAa,WAAW,EAAG,CAAA;AAChE,YAAAA,cAAA,CAAA,aAAA,CAAC,aAAa,EAAA,EAAC,aAAa,EAAE,aAAa,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,EAAI,CAAA;YACtF,SAAS;AACV,YAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,GAAG,EAAC,IAAI,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE,EAAA;AACtC,gBAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,uBAAuB,EAAA,aAAA,EAAc,gBAAgB,EAAA;oBAClE,QAAQ,KAAK,MAAM,IAClBA,cAAC,CAAA,aAAA,CAAAC,IAAS,EAAC,EAAA,OAAO,EAAC,MAAM,IAAE,KAAK,CAAa,KAE7CD,cAAA,CAAA,aAAA,CAACE,MAAI,EAAA,EAAC,IAAI,EAAC,OAAO,EAAA;wBAChBF,cAAC,CAAA,aAAA,CAAAC,IAAS,IAAC,OAAO,EAAC,MAAM,EAAE,EAAA,KAAK,CAAa,CACxC,CACR;oBACA,YAAY;oBACZ,WAAW,KACVD,cAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,WAAW,GAAG,MAAM,CAAC,UAAU,GAAG,MAAM,CAAC,YAAY,EAClE,EAAA,WAAW,CACR,CACP,CACG;AAEL,gBAAA,IAAI,KACHA,cAAA,CAAA,aAAA,CAACE,MAAI,EAAC,EAAA,IAAI,EAAC,aAAa,EAAA;oBACtBF,cAAC,CAAA,aAAA,CAAAC,IAAS,IAAC,OAAO,EAAC,UAAU,EAAE,EAAA,IAAI,CAAa,CAC3C,CACR;AACA,gBAAA,KAAK,IAAID,cAAC,CAAA,aAAA,CAAA,SAAS,EAAC,EAAA,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,EAAA,CAAI,CAC3D,CACF;AACT,QAAA,MAAM,IAAIA,cAAA,CAAA,aAAA,CAAC,cAAc,EAAA,EAAC,SAAS,EAAE,MAAM,CAAC,QAAQ,EAAc,aAAA,EAAA,WAAW,EAAG,CAAA,CACzE;AAEd;;;;"}

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

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._infoContainer_khhvq_1 {\n  display: grid;\n  gap: var(--sizes-sm);\n  width: 100%;\n  align-items: center;\n  min-width: 0;\n  flex: 1;\n}\n._infoContainer_khhvq_1._hasItemInfoAndEndInfo_khhvq_9 {\n  grid-template-columns: auto 1fr 1fr;\n}\n._infoContainer_khhvq_1._hasItemInfoOnly_khhvq_12, ._infoContainer_khhvq_1._hasEndInfoOnly_khhvq_12 {\n  grid-template-columns: auto 1fr;\n}\n._infoContainer_khhvq_1 > *:last-child._justifyEnd_khhvq_15 {\n  justify-self: end;\n}\n._infoContainer_khhvq_1 > *:last-child._justifyStart_khhvq_18 {\n  justify-self: start;\n}\n\n._linkIcon_khhvq_22 {\n  color: var(--colors-neutral-ink-base);\n}");
+var styles = {"infoContainer":"_infoContainer_khhvq_1","hasItemInfoAndEndInfo":"_hasItemInfoAndEndInfo_khhvq_9","hasItemInfoOnly":"_hasItemInfoOnly_khhvq_12","hasEndInfoOnly":"_hasEndInfoOnly_khhvq_12","justifyEnd":"_justifyEnd_khhvq_15","justifyStart":"_justifyStart_khhvq_18","linkIcon":"_linkIcon_khhvq_22"};
+
+module.exports = styles;
+//# sourceMappingURL=ItemContent.module.scss.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ItemContent.module.scss.cjs","sources":["../../../../../src/components/SelectDropdown/components/ItemContent/ItemContent.module.scss"],"sourcesContent":[".infoContainer {\n  display: grid;\n  gap: var(--sizes-sm);\n  width: 100%;\n  align-items: center;\n  min-width: 0;\n  flex: 1;\n\n  &.hasItemInfoAndEndInfo {\n    grid-template-columns: auto 1fr 1fr;\n  }\n\n  &.hasItemInfoOnly,\n  &.hasEndInfoOnly {\n    grid-template-columns: auto 1fr;\n  }\n\n  > *:last-child {\n    &.justifyEnd {\n      justify-self: end;\n    }\n\n    &.justifyStart {\n      justify-self: start;\n    }\n  }\n}\n\n.linkIcon {\n  color: var(--colors-neutral-ink-base);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,2nBAAA;AACA,aAAA,CAAA,eAAA,CAAA,wBAAA,CAAA,uBAAA,CAAA,gCAAA,CAAA,iBAAA,CAAA,2BAAA,CAAA,gBAAA,CAAA,0BAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,cAAA,CAAA,wBAAA,CAAA,UAAA,CAAA,oBAAA;;;;"}

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

@@ -0,0 +1,7 @@
+import insertStyle from '../../../../_virtual/____insertStyle.js';
+
+insertStyle("._infoContainer_khhvq_1 {\n  display: grid;\n  gap: var(--sizes-sm);\n  width: 100%;\n  align-items: center;\n  min-width: 0;\n  flex: 1;\n}\n._infoContainer_khhvq_1._hasItemInfoAndEndInfo_khhvq_9 {\n  grid-template-columns: auto 1fr 1fr;\n}\n._infoContainer_khhvq_1._hasItemInfoOnly_khhvq_12, ._infoContainer_khhvq_1._hasEndInfoOnly_khhvq_12 {\n  grid-template-columns: auto 1fr;\n}\n._infoContainer_khhvq_1 > *:last-child._justifyEnd_khhvq_15 {\n  justify-self: end;\n}\n._infoContainer_khhvq_1 > *:last-child._justifyStart_khhvq_18 {\n  justify-self: start;\n}\n\n._linkIcon_khhvq_22 {\n  color: var(--colors-neutral-ink-base);\n}");
+var styles = {"infoContainer":"_infoContainer_khhvq_1","hasItemInfoAndEndInfo":"_hasItemInfoAndEndInfo_khhvq_9","hasItemInfoOnly":"_hasItemInfoOnly_khhvq_12","hasEndInfoOnly":"_hasEndInfoOnly_khhvq_12","justifyEnd":"_justifyEnd_khhvq_15","justifyStart":"_justifyStart_khhvq_18","linkIcon":"_linkIcon_khhvq_22"};
+
+export { styles as default };
+//# sourceMappingURL=ItemContent.module.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ItemContent.module.scss.js","sources":["../../../../../src/components/SelectDropdown/components/ItemContent/ItemContent.module.scss"],"sourcesContent":[".infoContainer {\n  display: grid;\n  gap: var(--sizes-sm);\n  width: 100%;\n  align-items: center;\n  min-width: 0;\n  flex: 1;\n\n  &.hasItemInfoAndEndInfo {\n    grid-template-columns: auto 1fr 1fr;\n  }\n\n  &.hasItemInfoOnly,\n  &.hasEndInfoOnly {\n    grid-template-columns: auto 1fr;\n  }\n\n  > *:last-child {\n    &.justifyEnd {\n      justify-self: end;\n    }\n\n    &.justifyStart {\n      justify-self: start;\n    }\n  }\n}\n\n.linkIcon {\n  color: var(--colors-neutral-ink-base);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,2nBAAA;AACA,aAAA,CAAA,eAAA,CAAA,wBAAA,CAAA,uBAAA,CAAA,gCAAA,CAAA,iBAAA,CAAA,2BAAA,CAAA,gBAAA,CAAA,0BAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,cAAA,CAAA,wBAAA,CAAA,UAAA,CAAA,oBAAA;;;;"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectionType.cjs","sources":["../../../../../src/components/SelectDropdown/components/ItemContent/SelectionType.tsx"],"sourcesContent":["import React from 'react';\nimport { Radio } from '../../../Radio';\nimport { Checkbox } from '../../../Checkbox';\n\ntype SelectionTypeProps = {\n  selectionMode: 'single' | 'multiple' | 'none';\n  isSelected: boolean;\n  isLink?: boolean;\n};\n\nexport const SelectionType = ({ selectionMode, isSelected, isLink }: SelectionTypeProps) => {\n  if (isLink || selectionMode === 'none') return null;\n\n  if (selectionMode === 'single') return <Radio checked={isSelected} onChange={() => {}} />;\n\n  return <Checkbox checked={isSelected} onChange={() => {}} />;\n};\n"],"names":["React","Radio","Checkbox"],"mappings":";;;;;;;;;;AAUO,MAAM,aAAa,GAAG,CAAC,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,EAAsB,KAAI;AACzF,IAAA,IAAI,MAAM,IAAI,aAAa,KAAK,MAAM;AAAE,QAAA,OAAO,IAAI;IAEnD,IAAI,aAAa,KAAK,QAAQ;AAAE,QAAA,OAAOA,sBAAC,CAAA,aAAA,CAAAC,WAAK,EAAC,EAAA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAO,GAAC,GAAI;AAEzF,IAAA,OAAOD,sBAAC,CAAA,aAAA,CAAAE,iBAAQ,EAAC,EAAA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAO,GAAC,GAAI;AAC9D;;;;"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectionType.js","sources":["../../../../../src/components/SelectDropdown/components/ItemContent/SelectionType.tsx"],"sourcesContent":["import React from 'react';\nimport { Radio } from '../../../Radio';\nimport { Checkbox } from '../../../Checkbox';\n\ntype SelectionTypeProps = {\n  selectionMode: 'single' | 'multiple' | 'none';\n  isSelected: boolean;\n  isLink?: boolean;\n};\n\nexport const SelectionType = ({ selectionMode, isSelected, isLink }: SelectionTypeProps) => {\n  if (isLink || selectionMode === 'none') return null;\n\n  if (selectionMode === 'single') return <Radio checked={isSelected} onChange={() => {}} />;\n\n  return <Checkbox checked={isSelected} onChange={() => {}} />;\n};\n"],"names":["React"],"mappings":";;;;AAUO,MAAM,aAAa,GAAG,CAAC,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,EAAsB,KAAI;AACzF,IAAA,IAAI,MAAM,IAAI,aAAa,KAAK,MAAM;AAAE,QAAA,OAAO,IAAI;IAEnD,IAAI,aAAa,KAAK,QAAQ;AAAE,QAAA,OAAOA,cAAC,CAAA,aAAA,CAAA,KAAK,EAAC,EAAA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAO,GAAC,GAAI;AAEzF,IAAA,OAAOA,cAAC,CAAA,aAAA,CAAA,QAAQ,EAAC,EAAA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAO,GAAC,GAAI;AAC9D;;;;"}

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

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

package/dist/components/SelectDropdown/{ListItem/components → components/ItemContent}/types.d.ts

@@ -1,5 +1,5 @@
-import { BasicListItemProps } from '../types';
-export type ListItemContentProps = BasicListItemProps & {
+import { BaseItemProps } from '../types';
+export type ItemContentProps = BaseItemProps & {
     /** renders a drag icon */
     allowsDragging?: boolean;
     /** renders a checkbox or radio depending on state, default is radio */
@@ -8,4 +8,6 @@ export type ListItemContentProps = BasicListItemProps & {
     isSelected?: boolean;
     /** Renders icon to indicate item is a link */
     isLink?: boolean;
+    /** type of item  */
+    itemType: 'list' | 'grid';
 };

package/dist/components/SelectDropdown/components/ListItem/ListItem.cjs

@@ -0,0 +1,23 @@
+'use strict';
+
+var React = require('react');
+var reactAriaComponents = require('react-aria-components');
+require('../../../../hooks/useFocusVisible.cjs');
+var useId = require('../../../../hooks/useId.cjs');
+require('lodash.throttle');
+var ItemContent = require('../ItemContent/ItemContent.cjs');
+var buildClassnames = require('../../../../utils/buildClassnames.cjs');
+require('uid/secure');
+var item_module = require('../item.module.scss.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const ListItem = ({ id, label, href, appearance = 'primary', className, ...props }) => {
+    const idComputed = useId.useId({ id, prefix: 'list-item' });
+    return (React__default.default.createElement(reactAriaComponents.ListBoxItem, { id: idComputed, textValue: label, href: href, className: buildClassnames.buildClassnames([item_module.item, item_module[`appearance-${appearance}`], className]), ...props }, ({ selectionMode, allowsDragging, isSelected }) => (React__default.default.createElement(ItemContent.ItemContent, { selectionMode: selectionMode, allowsDragging: allowsDragging, isSelected: isSelected, label: label, isLink: Boolean(href), appearance: appearance, itemType: "list", ...props }))));
+};
+
+exports.ListItem = ListItem;
+//# sourceMappingURL=ListItem.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListItem.cjs","sources":["../../../../../src/components/SelectDropdown/components/ListItem/ListItem.tsx"],"sourcesContent":["import React from 'react';\nimport { ListBoxItem, ListBoxItemRenderProps } from 'react-aria-components';\nimport { useId } from '../../../../hooks';\nimport { ListItemProps } from './types';\nimport { ItemContent } from '../ItemContent';\nimport { buildClassnames } from '../../../../utils';\n\nimport styles from '../item.module.scss';\n\nexport const ListItem = ({\n  id,\n  label,\n  href,\n  appearance = 'primary',\n  className,\n  ...props\n}: ListItemProps) => {\n  const idComputed = useId({ id, prefix: 'list-item' });\n\n  return (\n    <ListBoxItem\n      id={idComputed}\n      textValue={label}\n      href={href}\n      className={buildClassnames([styles.item, styles[`appearance-${appearance}`], className])}\n      {...props}\n    >\n      {/* use react aria's render props to add more such as isHovered */}\n      {({ selectionMode, allowsDragging, isSelected }: ListBoxItemRenderProps) => (\n        <ItemContent\n          selectionMode={selectionMode}\n          allowsDragging={allowsDragging}\n          isSelected={isSelected}\n          label={label}\n          isLink={Boolean(href)}\n          appearance={appearance}\n          itemType=\"list\"\n          {...props}\n        />\n      )}\n    </ListBoxItem>\n  );\n};\n"],"names":["useId","React","ListBoxItem","buildClassnames","styles","ItemContent"],"mappings":";;;;;;;;;;;;;;;;MASa,QAAQ,GAAG,CAAC,EACvB,EAAE,EACF,KAAK,EACL,IAAI,EACJ,UAAU,GAAG,SAAS,EACtB,SAAS,EACT,GAAG,KAAK,EACM,KAAI;AAClB,IAAA,MAAM,UAAU,GAAGA,WAAK,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC;AAErD,IAAA,QACEC,sBAAC,CAAA,aAAA,CAAAC,+BAAW,IACV,EAAE,EAAE,UAAU,EACd,SAAS,EAAE,KAAK,EAChB,IAAI,EAAE,IAAI,EACV,SAAS,EAAEC,+BAAe,CAAC,CAACC,WAAM,CAAC,IAAI,EAAEA,WAAM,CAAC,CAAc,WAAA,EAAA,UAAU,EAAE,CAAC,EAAE,SAAS,CAAC,CAAC,KACpF,KAAK,EAAA,EAGR,CAAC,EAAE,aAAa,EAAE,cAAc,EAAE,UAAU,EAA0B,MACrEH,sBAAC,CAAA,aAAA,CAAAI,uBAAW,IACV,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,cAAc,EAC9B,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,OAAO,CAAC,IAAI,CAAC,EACrB,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAC,MAAM,EACX,GAAA,KAAK,GACT,CACH,CACW;AAElB;;;;"}

package/dist/components/SelectDropdown/components/ListItem/ListItem.js

@@ -0,0 +1,17 @@
+import React__default from 'react';
+import { ListBoxItem } from 'react-aria-components';
+import '../../../../hooks/useFocusVisible.js';
+import { useId } from '../../../../hooks/useId.js';
+import 'lodash.throttle';
+import { ItemContent } from '../ItemContent/ItemContent.js';
+import { buildClassnames } from '../../../../utils/buildClassnames.js';
+import 'uid/secure';
+import styles from '../item.module.scss.js';
+
+const ListItem = ({ id, label, href, appearance = 'primary', className, ...props }) => {
+    const idComputed = useId({ id, prefix: 'list-item' });
+    return (React__default.createElement(ListBoxItem, { id: idComputed, textValue: label, href: href, className: buildClassnames([styles.item, styles[`appearance-${appearance}`], className]), ...props }, ({ selectionMode, allowsDragging, isSelected }) => (React__default.createElement(ItemContent, { selectionMode: selectionMode, allowsDragging: allowsDragging, isSelected: isSelected, label: label, isLink: Boolean(href), appearance: appearance, itemType: "list", ...props }))));
+};
+
+export { ListItem };
+//# sourceMappingURL=ListItem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListItem.js","sources":["../../../../../src/components/SelectDropdown/components/ListItem/ListItem.tsx"],"sourcesContent":["import React from 'react';\nimport { ListBoxItem, ListBoxItemRenderProps } from 'react-aria-components';\nimport { useId } from '../../../../hooks';\nimport { ListItemProps } from './types';\nimport { ItemContent } from '../ItemContent';\nimport { buildClassnames } from '../../../../utils';\n\nimport styles from '../item.module.scss';\n\nexport const ListItem = ({\n  id,\n  label,\n  href,\n  appearance = 'primary',\n  className,\n  ...props\n}: ListItemProps) => {\n  const idComputed = useId({ id, prefix: 'list-item' });\n\n  return (\n    <ListBoxItem\n      id={idComputed}\n      textValue={label}\n      href={href}\n      className={buildClassnames([styles.item, styles[`appearance-${appearance}`], className])}\n      {...props}\n    >\n      {/* use react aria's render props to add more such as isHovered */}\n      {({ selectionMode, allowsDragging, isSelected }: ListBoxItemRenderProps) => (\n        <ItemContent\n          selectionMode={selectionMode}\n          allowsDragging={allowsDragging}\n          isSelected={isSelected}\n          label={label}\n          isLink={Boolean(href)}\n          appearance={appearance}\n          itemType=\"list\"\n          {...props}\n        />\n      )}\n    </ListBoxItem>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;MASa,QAAQ,GAAG,CAAC,EACvB,EAAE,EACF,KAAK,EACL,IAAI,EACJ,UAAU,GAAG,SAAS,EACtB,SAAS,EACT,GAAG,KAAK,EACM,KAAI;AAClB,IAAA,MAAM,UAAU,GAAG,KAAK,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC;AAErD,IAAA,QACEA,cAAC,CAAA,aAAA,CAAA,WAAW,IACV,EAAE,EAAE,UAAU,EACd,SAAS,EAAE,KAAK,EAChB,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,CAAc,WAAA,EAAA,UAAU,EAAE,CAAC,EAAE,SAAS,CAAC,CAAC,KACpF,KAAK,EAAA,EAGR,CAAC,EAAE,aAAa,EAAE,cAAc,EAAE,UAAU,EAA0B,MACrEA,cAAC,CAAA,aAAA,CAAA,WAAW,IACV,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,cAAc,EAC9B,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,OAAO,CAAC,IAAI,CAAC,EACrB,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAC,MAAM,EACX,GAAA,KAAK,GACT,CACH,CACW;AAElB;;;;"}

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

@@ -0,0 +1,3 @@
+import { ListBoxItemProps } from 'react-aria-components';
+import { BaseItemProps } from '../types';
+export type ListItemProps = ListBoxItemProps & BaseItemProps;

package/dist/components/SelectDropdown/{ListItemSection → components/ListItemSection}/ListItemSection.cjs

@@ -2,13 +2,13 @@
 
 var React = require('react');
 var reactAriaComponents = require('react-aria-components');
-var FlexRow = require('../../Flex/FlexRow/FlexRow.cjs');
-var FlexCol = require('../../Flex/FlexCol/FlexCol.cjs');
-var Text = require('../../Text/Text.cjs');
+var FlexRow = require('../../../Flex/FlexRow/FlexRow.cjs');
+var FlexCol = require('../../../Flex/FlexCol/FlexCol.cjs');
+var Text = require('../../../Text/Text.cjs');
 var ListItem = require('../ListItem/ListItem.cjs');
-var ListItemSection_module = require('./ListItemSection.module.scss.cjs');
-var buildClassnames = require('../../../utils/buildClassnames.cjs');
+var buildClassnames = require('../../../../utils/buildClassnames.cjs');
 require('uid/secure');
+var ListItemSection_module = require('./ListItemSection.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemSection.cjs","sources":["../../../../../src/components/SelectDropdown/components/ListItemSection/ListItemSection.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport { Collection, Header, Section, SectionProps } from 'react-aria-components';\nimport { FlexRow } from '../../../Flex/FlexRow';\nimport { FlexCol } from '../../../Flex/FlexCol';\nimport { Text as VeeqoText } from '../../../Text';\nimport { ListItemProps } from '../ListItem/types';\nimport { ListItem } from '../ListItem/ListItem';\nimport { buildClassnames } from '../../../../utils';\nimport styles from './ListItemSection.module.scss';\n\nexport type ListItemSectionProps = Omit<SectionProps<ListItemProps>, 'items'> & {\n  label: string;\n  hint?: string;\n  itemInfoSlot?: ReactElement;\n  items?: ListItemProps[];\n};\n\nexport const ListItemSection = ({\n  label,\n  hint,\n  itemInfoSlot,\n  items,\n  children,\n  className,\n  ...props\n}: ListItemSectionProps) => (\n  <Section className={buildClassnames([styles.section, className])} {...props}>\n    <Header>\n      <FlexCol gap=\"xs\">\n        <FlexRow>\n          <VeeqoText variant=\"body\">{label}</VeeqoText>\n          {itemInfoSlot}\n        </FlexRow>\n        {hint && <VeeqoText variant=\"hintText\">{hint}</VeeqoText>}\n      </FlexCol>\n    </Header>\n    {children}\n    {items && (\n      <Collection items={items}>{(item: ListItemProps) => <ListItem {...item} />}</Collection>\n    )}\n  </Section>\n);\n"],"names":["React","Section","buildClassnames","styles","Header","FlexCol","FlexRow","VeeqoText","Collection","ListItem"],"mappings":";;;;;;;;;;;;;;;;AAiBa,MAAA,eAAe,GAAG,CAAC,EAC9B,KAAK,EACL,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACa,MACrBA,qCAACC,2BAAO,EAAA,EAAC,SAAS,EAAEC,+BAAe,CAAC,CAACC,sBAAM,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,KAAM,KAAK,EAAA;AACzE,IAAAH,sBAAA,CAAA,aAAA,CAACI,0BAAM,EAAA,IAAA;AACL,QAAAJ,sBAAA,CAAA,aAAA,CAACK,eAAO,EAAA,EAAC,GAAG,EAAC,IAAI,EAAA;AACf,YAAAL,sBAAA,CAAA,aAAA,CAACM,eAAO,EAAA,IAAA;AACN,gBAAAN,sBAAA,CAAA,aAAA,CAACO,SAAS,EAAC,EAAA,OAAO,EAAC,MAAM,EAAA,EAAE,KAAK,CAAa;AAC5C,gBAAA,YAAY,CACL;YACT,IAAI,IAAIP,sBAAC,CAAA,aAAA,CAAAO,SAAS,EAAC,EAAA,OAAO,EAAC,UAAU,EAAE,EAAA,IAAI,CAAa,CACjD,CACH;IACR,QAAQ;IACR,KAAK,KACJP,sBAAC,CAAA,aAAA,CAAAQ,8BAAU,IAAC,KAAK,EAAE,KAAK,EAAA,EAAG,CAAC,IAAmB,KAAKR,sBAAC,CAAA,aAAA,CAAAS,iBAAQ,EAAK,EAAA,GAAA,IAAI,GAAI,CAAc,CACzF,CACO;;;;"}

package/dist/components/SelectDropdown/{ListItemSection → components/ListItemSection}/ListItemSection.js

@@ -1,12 +1,12 @@
 import React__default from 'react';
 import { Section, Header, Collection } from 'react-aria-components';
-import { FlexRow } from '../../Flex/FlexRow/FlexRow.js';
-import { FlexCol } from '../../Flex/FlexCol/FlexCol.js';
-import { Text } from '../../Text/Text.js';
+import { FlexRow } from '../../../Flex/FlexRow/FlexRow.js';
+import { FlexCol } from '../../../Flex/FlexCol/FlexCol.js';
+import { Text } from '../../../Text/Text.js';
 import { ListItem } from '../ListItem/ListItem.js';
-import styles from './ListItemSection.module.scss.js';
-import { buildClassnames } from '../../../utils/buildClassnames.js';
+import { buildClassnames } from '../../../../utils/buildClassnames.js';
 import 'uid/secure';
+import styles from './ListItemSection.module.scss.js';
 
 const ListItemSection = ({ label, hint, itemInfoSlot, items, children, className, ...props }) => (React__default.createElement(Section, { className: buildClassnames([styles.section, className]), ...props },
     React__default.createElement(Header, null,

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemSection.js","sources":["../../../../../src/components/SelectDropdown/components/ListItemSection/ListItemSection.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport { Collection, Header, Section, SectionProps } from 'react-aria-components';\nimport { FlexRow } from '../../../Flex/FlexRow';\nimport { FlexCol } from '../../../Flex/FlexCol';\nimport { Text as VeeqoText } from '../../../Text';\nimport { ListItemProps } from '../ListItem/types';\nimport { ListItem } from '../ListItem/ListItem';\nimport { buildClassnames } from '../../../../utils';\nimport styles from './ListItemSection.module.scss';\n\nexport type ListItemSectionProps = Omit<SectionProps<ListItemProps>, 'items'> & {\n  label: string;\n  hint?: string;\n  itemInfoSlot?: ReactElement;\n  items?: ListItemProps[];\n};\n\nexport const ListItemSection = ({\n  label,\n  hint,\n  itemInfoSlot,\n  items,\n  children,\n  className,\n  ...props\n}: ListItemSectionProps) => (\n  <Section className={buildClassnames([styles.section, className])} {...props}>\n    <Header>\n      <FlexCol gap=\"xs\">\n        <FlexRow>\n          <VeeqoText variant=\"body\">{label}</VeeqoText>\n          {itemInfoSlot}\n        </FlexRow>\n        {hint && <VeeqoText variant=\"hintText\">{hint}</VeeqoText>}\n      </FlexCol>\n    </Header>\n    {children}\n    {items && (\n      <Collection items={items}>{(item: ListItemProps) => <ListItem {...item} />}</Collection>\n    )}\n  </Section>\n);\n"],"names":["React","VeeqoText"],"mappings":";;;;;;;;;;AAiBa,MAAA,eAAe,GAAG,CAAC,EAC9B,KAAK,EACL,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACa,MACrBA,6BAAC,OAAO,EAAA,EAAC,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,KAAM,KAAK,EAAA;AACzE,IAAAA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,IAAA;AACL,QAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,GAAG,EAAC,IAAI,EAAA;AACf,YAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,IAAA;AACN,gBAAAA,cAAA,CAAA,aAAA,CAACC,IAAS,EAAC,EAAA,OAAO,EAAC,MAAM,EAAA,EAAE,KAAK,CAAa;AAC5C,gBAAA,YAAY,CACL;YACT,IAAI,IAAID,cAAC,CAAA,aAAA,CAAAC,IAAS,EAAC,EAAA,OAAO,EAAC,UAAU,EAAE,EAAA,IAAI,CAAa,CACjD,CACH;IACR,QAAQ;IACR,KAAK,KACJD,cAAC,CAAA,aAAA,CAAA,UAAU,IAAC,KAAK,EAAE,KAAK,EAAA,EAAG,CAAC,IAAmB,KAAKA,cAAC,CAAA,aAAA,CAAA,QAAQ,EAAK,EAAA,GAAA,IAAI,GAAI,CAAc,CACzF,CACO;;;;"}

package/dist/components/SelectDropdown/{ListItemSection → components/ListItemSection}/ListItemSection.module.scss.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var ___$insertStyle = require('../../../_virtual/____insertStyle.cjs');
+var ___$insertStyle = require('../../../../_virtual/____insertStyle.cjs');
 
 ___$insertStyle("._section_wlx0b_1 {\n  border-radius: var(--sizes-base);\n}");
 var styles = {"section":"_section_wlx0b_1"};

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemSection.module.scss.cjs","sources":["../../../../../src/components/SelectDropdown/components/ListItemSection/ListItemSection.module.scss"],"sourcesContent":[".section {\n  border-radius: var(--sizes-base);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,6DAAA;;;;;"}

package/dist/components/SelectDropdown/{ListItemSection → components/ListItemSection}/ListItemSection.module.scss.js

@@ -1,4 +1,4 @@
-import insertStyle from '../../../_virtual/____insertStyle.js';
+import insertStyle from '../../../../_virtual/____insertStyle.js';
 
 insertStyle("._section_wlx0b_1 {\n  border-radius: var(--sizes-base);\n}");
 var styles = {"section":"_section_wlx0b_1"};

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemSection.module.scss.js","sources":["../../../../../src/components/SelectDropdown/components/ListItemSection/ListItemSection.module.scss"],"sourcesContent":[".section {\n  border-radius: var(--sizes-base);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,6DAAA;;;;;"}

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

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._item_19dv4_1 {\n  border-radius: var(--radius-base);\n  cursor: pointer;\n  background-color: #ffffff;\n  text-decoration: none;\n}\n._item_19dv4_1._appearance-secondary_19dv4_7 {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n._item_19dv4_1[data-hovered] > div, ._item_19dv4_1[data-hovered] > div:first-of-type[role=gridcell] > :first-child {\n  background-color: #f0f7fc;\n}\n._item_19dv4_1[data-pressed] > div, ._item_19dv4_1[data-pressed] > div:first-of-type[role=gridcell] > :first-child {\n  background-color: #e3f0fa;\n}\n._item_19dv4_1[data-focused] {\n  outline: 0;\n}\n._item_19dv4_1[data-focus-visible] > div, ._item_19dv4_1[data-focus-visible] > div:first-of-type[role=gridcell] > :first-child {\n  outline: solid var(--sizes-xs) var(--colors-secondary-blue-light);\n  z-index: 1;\n  position: relative;\n}\n._item_19dv4_1[data-dragging] {\n  background-color: var(--colors-neutral-grey-base);\n  border-color: var(--color-secondary-blue-base);\n}\n._item_19dv4_1[data-drop-target] {\n  background-color: var(--colors-secondary-green-base);\n  border-color: var(--colors-secondary-green-base);\n}\n._item_19dv4_1[data-disabled] {\n  cursor: not-allowed;\n  background-color: var(--colors-neutral-grey-light);\n  opacity: 0.75;\n}\n._item_19dv4_1 > div,\n._item_19dv4_1 > div:first-of-type[role=gridcell] > :first-child {\n  padding: var(--sizes-sm);\n  border-radius: var(--radius-base);\n}");
+var styles = {"item":"_item_19dv4_1","appearance-secondary":"_appearance-secondary_19dv4_7"};
+
+module.exports = styles;
+//# sourceMappingURL=item.module.scss.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"item.module.scss.cjs","sources":["../../../../src/components/SelectDropdown/components/item.module.scss"],"sourcesContent":[".item {\n  border-radius: var(--radius-base);\n  cursor: pointer;\n  background-color: #ffffff;\n  text-decoration: none;\n\n  &.appearance-secondary {\n    background-color: var(--colors-neutral-grey-lightest);\n  }\n\n  &[data-hovered] > div,\n  &[data-hovered] > div:first-of-type[role='gridcell'] > :first-child {\n    background-color: #f0f7fc;\n  }\n\n  &[data-pressed] > div,\n  &[data-pressed] > div:first-of-type[role='gridcell'] > :first-child {\n    background-color: #e3f0fa;\n  }\n\n  &[data-focused] {\n    outline: 0;\n  }\n\n  &[data-focus-visible] > div,\n  &[data-focus-visible] > div:first-of-type[role='gridcell'] > :first-child {\n    outline: solid var(--sizes-xs) var(--colors-secondary-blue-light);\n    z-index: 1;\n    position: relative;\n  }\n\n  &[data-dragging] {\n    background-color: var(--colors-neutral-grey-base);\n    border-color: var(--color-secondary-blue-base);\n  }\n\n  &[data-drop-target] {\n    background-color: var(--colors-secondary-green-base);\n    border-color: var(--colors-secondary-green-base);\n  }\n\n  &[data-disabled] {\n    cursor: not-allowed;\n    background-color: var(--colors-neutral-grey-light);\n    opacity: 0.75;\n  }\n\n  > div,\n  > div:first-of-type[role='gridcell'] > :first-child {\n    padding: var(--sizes-sm);\n    border-radius: var(--radius-base);\n  }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,64CAAA;AACA,aAAA,CAAA,MAAA,CAAA,eAAA,CAAA,sBAAA,CAAA,+BAAA;;;;"}

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

@@ -0,0 +1,7 @@
+import insertStyle from '../../../_virtual/____insertStyle.js';
+
+insertStyle("._item_19dv4_1 {\n  border-radius: var(--radius-base);\n  cursor: pointer;\n  background-color: #ffffff;\n  text-decoration: none;\n}\n._item_19dv4_1._appearance-secondary_19dv4_7 {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n._item_19dv4_1[data-hovered] > div, ._item_19dv4_1[data-hovered] > div:first-of-type[role=gridcell] > :first-child {\n  background-color: #f0f7fc;\n}\n._item_19dv4_1[data-pressed] > div, ._item_19dv4_1[data-pressed] > div:first-of-type[role=gridcell] > :first-child {\n  background-color: #e3f0fa;\n}\n._item_19dv4_1[data-focused] {\n  outline: 0;\n}\n._item_19dv4_1[data-focus-visible] > div, ._item_19dv4_1[data-focus-visible] > div:first-of-type[role=gridcell] > :first-child {\n  outline: solid var(--sizes-xs) var(--colors-secondary-blue-light);\n  z-index: 1;\n  position: relative;\n}\n._item_19dv4_1[data-dragging] {\n  background-color: var(--colors-neutral-grey-base);\n  border-color: var(--color-secondary-blue-base);\n}\n._item_19dv4_1[data-drop-target] {\n  background-color: var(--colors-secondary-green-base);\n  border-color: var(--colors-secondary-green-base);\n}\n._item_19dv4_1[data-disabled] {\n  cursor: not-allowed;\n  background-color: var(--colors-neutral-grey-light);\n  opacity: 0.75;\n}\n._item_19dv4_1 > div,\n._item_19dv4_1 > div:first-of-type[role=gridcell] > :first-child {\n  padding: var(--sizes-sm);\n  border-radius: var(--radius-base);\n}");
+var styles = {"item":"_item_19dv4_1","appearance-secondary":"_appearance-secondary_19dv4_7"};
+
+export { styles as default };
+//# sourceMappingURL=item.module.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"item.module.scss.js","sources":["../../../../src/components/SelectDropdown/components/item.module.scss"],"sourcesContent":[".item {\n  border-radius: var(--radius-base);\n  cursor: pointer;\n  background-color: #ffffff;\n  text-decoration: none;\n\n  &.appearance-secondary {\n    background-color: var(--colors-neutral-grey-lightest);\n  }\n\n  &[data-hovered] > div,\n  &[data-hovered] > div:first-of-type[role='gridcell'] > :first-child {\n    background-color: #f0f7fc;\n  }\n\n  &[data-pressed] > div,\n  &[data-pressed] > div:first-of-type[role='gridcell'] > :first-child {\n    background-color: #e3f0fa;\n  }\n\n  &[data-focused] {\n    outline: 0;\n  }\n\n  &[data-focus-visible] > div,\n  &[data-focus-visible] > div:first-of-type[role='gridcell'] > :first-child {\n    outline: solid var(--sizes-xs) var(--colors-secondary-blue-light);\n    z-index: 1;\n    position: relative;\n  }\n\n  &[data-dragging] {\n    background-color: var(--colors-neutral-grey-base);\n    border-color: var(--color-secondary-blue-base);\n  }\n\n  &[data-drop-target] {\n    background-color: var(--colors-secondary-green-base);\n    border-color: var(--colors-secondary-green-base);\n  }\n\n  &[data-disabled] {\n    cursor: not-allowed;\n    background-color: var(--colors-neutral-grey-light);\n    opacity: 0.75;\n  }\n\n  > div,\n  > div:first-of-type[role='gridcell'] > :first-child {\n    padding: var(--sizes-sm);\n    border-radius: var(--radius-base);\n  }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,64CAAA;AACA,aAAA,CAAA,MAAA,CAAA,eAAA,CAAA,sBAAA,CAAA,+BAAA;;;;"}

package/dist/components/SelectDropdown/{ListItem → components}/types.d.ts

@@ -1,16 +1,15 @@
-import { ReactElement } from 'react';
-import { ListBoxItemProps } from 'react-aria-components';
-export type BasicListItemProps = {
+import { ReactNode } from 'react';
+export type BaseItemProps = {
     id?: string;
     /** Label for the item */
     label: string;
     /** Renders the media provided, e.g Image or Icon */
-    mediaSlot?: ReactElement;
+    mediaSlot?: ReactNode;
     /** Hint text for the item */
     hint?: string;
     /** Slot for extra info for the item, e.g (Tooltip, mini-tag) */
-    itemInfoSlot?: ReactElement;
-    endInfoSlot?: ReactElement;
+    itemInfoSlot?: ReactNode;
+    endInfoSlot?: ReactNode;
     /** Renders mini alert, e.g (Low stock) */
     alert?: {
         title: string;
@@ -19,4 +18,3 @@ export type BasicListItemProps = {
     /** Used to differentiate between items */
     appearance?: 'primary' | 'secondary';
 };
-export type ListItemProps = ListBoxItemProps & BasicListItemProps;

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

@@ -1,8 +1,8 @@
 import { Key, ListBoxProps } from 'react-aria-components';
 import { ReactElement } from 'react';
 import { ButtonProps } from '../Button/types';
-import { ListItemProps } from './ListItem/types';
-import { ListItemSectionProps } from './ListItemSection/ListItemSection';
+import { ListItemProps } from './components/ListItem/types';
+import { ListItemSectionProps } from './components/ListItemSection/ListItemSection';
 type CTAButtonProps = Omit<ButtonProps, 'variant'> & {
     label: string;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"utils.cjs","sources":["../../../src/components/SelectDropdown/utils.ts"],"sourcesContent":["import { Key } from 'react-aria-components';\nimport { ClassNamesReturnPayload, SelectDropdownItem } from './types';\nimport { ListItemSectionProps } from './ListItemSection/ListItemSection';\nimport { ListItemProps } from './ListItem/types';\n\nexport const getValueFromKey = (items: SelectDropdownItem[], hasSection: boolean, key?: Key) => {\n  if (!key) return undefined;\n  if (!hasSection) {\n    return items.find((item) => item.id === key) || undefined;\n  }\n\n  const selectedSection = items.find((section) => section.id === key);\n  if (selectedSection) return selectedSection;\n\n  return items\n    .flatMap((section) => ('items' in section && Array.isArray(section.items) ? section.items : []))\n    .find((item: ListItemProps) => item.id === key);\n};\n\nexport const getValuesFromKeys = (\n  items: SelectDropdownItem[],\n  hasSection: boolean,\n  keys?: Key[],\n): SelectDropdownItem[] => {\n  if (!keys) return [];\n  if (!hasSection) {\n    return items.filter((item) => keys.includes(item.id as Key));\n  }\n\n  return (items as ListItemSectionProps[]).flatMap((section) => [\n    ...(keys.includes(section.id as Key) ? [section] : []),\n    ...(section.items?.filter((item: ListItemProps) => keys.includes(item.id as Key)) || []),\n  ]);\n};\n\nexport const getSelectedValues = (\n  items: SelectDropdownItem[],\n  hasSection: boolean,\n  value?: Key | Key[],\n): SelectDropdownItem[] => {\n  if (!value) return [];\n  if (Array.isArray(value)) {\n    return getValuesFromKeys(items, hasSection, value);\n  }\n  const keyValue = getValueFromKey(items, hasSection, value);\n  return keyValue === undefined ? [] : [keyValue];\n};\n\nexport const generateClassNames = (prefix?: string): ClassNamesReturnPayload => ({\n  button: prefix ? `${prefix}-select-dropdown-button` : undefined,\n  optionsContainer: prefix ? `${prefix}-select-dropdown-container` : undefined,\n  popover: prefix ? `${prefix}-select-dropdown` : undefined,\n});\n"],"names":[],"mappings":";;AAKa,MAAA,eAAe,GAAG,CAAC,KAA2B,EAAE,UAAmB,EAAE,GAAS,KAAI;AAC7F,IAAA,IAAI,CAAC,GAAG;AAAE,QAAA,OAAO,SAAS;IAC1B,IAAI,CAAC,UAAU,EAAE;AACf,QAAA,OAAO,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,EAAE,KAAK,GAAG,CAAC,IAAI,SAAS;AAC1D;AAED,IAAA,MAAM,eAAe,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,OAAO,KAAK,OAAO,CAAC,EAAE,KAAK,GAAG,CAAC;AACnE,IAAA,IAAI,eAAe;AAAE,QAAA,OAAO,eAAe;AAE3C,IAAA,OAAO;AACJ,SAAA,OAAO,CAAC,CAAC,OAAO,MAAM,OAAO,IAAI,OAAO,IAAI,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,OAAO,CAAC,KAAK,GAAG,EAAE,CAAC;AAC9F,SAAA,IAAI,CAAC,CAAC,IAAmB,KAAK,IAAI,CAAC,EAAE,KAAK,GAAG,CAAC;AACnD;AAEa,MAAA,iBAAiB,GAAG,CAC/B,KAA2B,EAC3B,UAAmB,EACnB,IAAY,KACY;AACxB,IAAA,IAAI,CAAC,IAAI;AAAE,QAAA,OAAO,EAAE;IACpB,IAAI,CAAC,UAAU,EAAE;AACf,QAAA,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAS,CAAC,CAAC;AAC7D;AAED,IAAA,OAAQ,KAAgC,CAAC,OAAO,CAAC,CAAC,OAAO,KAAI;;QAAC,OAAA;AAC5D,YAAA,IAAI,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAS,CAAC,GAAG,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC;YACtD,IAAI,CAAA,CAAA,EAAA,GAAA,OAAO,CAAC,KAAK,MAAE,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAA,MAAM,CAAC,CAAC,IAAmB,KAAK,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAS,CAAC,CAAC,KAAI,EAAE,CAAC;SACzF;AAAA,KAAA,CAAC;AACJ;AAEa,MAAA,iBAAiB,GAAG,CAC/B,KAA2B,EAC3B,UAAmB,EACnB,KAAmB,KACK;AACxB,IAAA,IAAI,CAAC,KAAK;AAAE,QAAA,OAAO,EAAE;AACrB,IAAA,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;QACxB,OAAO,iBAAiB,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,CAAC;AACnD;IACD,MAAM,QAAQ,GAAG,eAAe,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,CAAC;AAC1D,IAAA,OAAO,QAAQ,KAAK,SAAS,GAAG,EAAE,GAAG,CAAC,QAAQ,CAAC;AACjD;MAEa,kBAAkB,GAAG,CAAC,MAAe,MAA+B;IAC/E,MAAM,EAAE,MAAM,GAAG,CAAG,EAAA,MAAM,CAAyB,uBAAA,CAAA,GAAG,SAAS;IAC/D,gBAAgB,EAAE,MAAM,GAAG,CAAG,EAAA,MAAM,CAA4B,0BAAA,CAAA,GAAG,SAAS;IAC5E,OAAO,EAAE,MAAM,GAAG,CAAG,EAAA,MAAM,CAAkB,gBAAA,CAAA,GAAG,SAAS;AAC1D,CAAA;;;;;;;"}
+{"version":3,"file":"utils.cjs","sources":["../../../src/components/SelectDropdown/utils.ts"],"sourcesContent":["import { Key } from 'react-aria-components';\nimport { ClassNamesReturnPayload, SelectDropdownItem } from './types';\nimport { ListItemSectionProps } from './components/ListItemSection/ListItemSection';\nimport { ListItemProps } from './components/ListItem/types';\n\nexport const getValueFromKey = (items: SelectDropdownItem[], hasSection: boolean, key?: Key) => {\n  if (!key) return undefined;\n  if (!hasSection) {\n    return items.find((item) => item.id === key) || undefined;\n  }\n\n  const selectedSection = items.find((section) => section.id === key);\n  if (selectedSection) return selectedSection;\n\n  return items\n    .flatMap((section) => ('items' in section && Array.isArray(section.items) ? section.items : []))\n    .find((item: ListItemProps) => item.id === key);\n};\n\nexport const getValuesFromKeys = (\n  items: SelectDropdownItem[],\n  hasSection: boolean,\n  keys?: Key[],\n): SelectDropdownItem[] => {\n  if (!keys) return [];\n  if (!hasSection) {\n    return items.filter((item) => keys.includes(item.id as Key));\n  }\n\n  return (items as ListItemSectionProps[]).flatMap((section) => [\n    ...(keys.includes(section.id as Key) ? [section] : []),\n    ...(section.items?.filter((item: ListItemProps) => keys.includes(item.id as Key)) || []),\n  ]);\n};\n\nexport const getSelectedValues = (\n  items: SelectDropdownItem[],\n  hasSection: boolean,\n  value?: Key | Key[],\n): SelectDropdownItem[] => {\n  if (!value) return [];\n  if (Array.isArray(value)) {\n    return getValuesFromKeys(items, hasSection, value);\n  }\n  const keyValue = getValueFromKey(items, hasSection, value);\n  return keyValue === undefined ? [] : [keyValue];\n};\n\nexport const generateClassNames = (prefix?: string): ClassNamesReturnPayload => ({\n  button: prefix ? `${prefix}-select-dropdown-button` : undefined,\n  optionsContainer: prefix ? `${prefix}-select-dropdown-container` : undefined,\n  popover: prefix ? `${prefix}-select-dropdown` : undefined,\n});\n"],"names":[],"mappings":";;AAKa,MAAA,eAAe,GAAG,CAAC,KAA2B,EAAE,UAAmB,EAAE,GAAS,KAAI;AAC7F,IAAA,IAAI,CAAC,GAAG;AAAE,QAAA,OAAO,SAAS;IAC1B,IAAI,CAAC,UAAU,EAAE;AACf,QAAA,OAAO,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,EAAE,KAAK,GAAG,CAAC,IAAI,SAAS;AAC1D;AAED,IAAA,MAAM,eAAe,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,OAAO,KAAK,OAAO,CAAC,EAAE,KAAK,GAAG,CAAC;AACnE,IAAA,IAAI,eAAe;AAAE,QAAA,OAAO,eAAe;AAE3C,IAAA,OAAO;AACJ,SAAA,OAAO,CAAC,CAAC,OAAO,MAAM,OAAO,IAAI,OAAO,IAAI,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,OAAO,CAAC,KAAK,GAAG,EAAE,CAAC;AAC9F,SAAA,IAAI,CAAC,CAAC,IAAmB,KAAK,IAAI,CAAC,EAAE,KAAK,GAAG,CAAC;AACnD;AAEa,MAAA,iBAAiB,GAAG,CAC/B,KAA2B,EAC3B,UAAmB,EACnB,IAAY,KACY;AACxB,IAAA,IAAI,CAAC,IAAI;AAAE,QAAA,OAAO,EAAE;IACpB,IAAI,CAAC,UAAU,EAAE;AACf,QAAA,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAS,CAAC,CAAC;AAC7D;AAED,IAAA,OAAQ,KAAgC,CAAC,OAAO,CAAC,CAAC,OAAO,KAAI;;QAAC,OAAA;AAC5D,YAAA,IAAI,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAS,CAAC,GAAG,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC;YACtD,IAAI,CAAA,CAAA,EAAA,GAAA,OAAO,CAAC,KAAK,MAAE,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAA,MAAM,CAAC,CAAC,IAAmB,KAAK,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAS,CAAC,CAAC,KAAI,EAAE,CAAC;SACzF;AAAA,KAAA,CAAC;AACJ;AAEa,MAAA,iBAAiB,GAAG,CAC/B,KAA2B,EAC3B,UAAmB,EACnB,KAAmB,KACK;AACxB,IAAA,IAAI,CAAC,KAAK;AAAE,QAAA,OAAO,EAAE;AACrB,IAAA,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;QACxB,OAAO,iBAAiB,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,CAAC;AACnD;IACD,MAAM,QAAQ,GAAG,eAAe,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,CAAC;AAC1D,IAAA,OAAO,QAAQ,KAAK,SAAS,GAAG,EAAE,GAAG,CAAC,QAAQ,CAAC;AACjD;MAEa,kBAAkB,GAAG,CAAC,MAAe,MAA+B;IAC/E,MAAM,EAAE,MAAM,GAAG,CAAG,EAAA,MAAM,CAAyB,uBAAA,CAAA,GAAG,SAAS;IAC/D,gBAAgB,EAAE,MAAM,GAAG,CAAG,EAAA,MAAM,CAA4B,0BAAA,CAAA,GAAG,SAAS;IAC5E,OAAO,EAAE,MAAM,GAAG,CAAG,EAAA,MAAM,CAAkB,gBAAA,CAAA,GAAG,SAAS;AAC1D,CAAA;;;;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../src/components/SelectDropdown/utils.ts"],"sourcesContent":["import { Key } from 'react-aria-components';\nimport { ClassNamesReturnPayload, SelectDropdownItem } from './types';\nimport { ListItemSectionProps } from './ListItemSection/ListItemSection';\nimport { ListItemProps } from './ListItem/types';\n\nexport const getValueFromKey = (items: SelectDropdownItem[], hasSection: boolean, key?: Key) => {\n  if (!key) return undefined;\n  if (!hasSection) {\n    return items.find((item) => item.id === key) || undefined;\n  }\n\n  const selectedSection = items.find((section) => section.id === key);\n  if (selectedSection) return selectedSection;\n\n  return items\n    .flatMap((section) => ('items' in section && Array.isArray(section.items) ? section.items : []))\n    .find((item: ListItemProps) => item.id === key);\n};\n\nexport const getValuesFromKeys = (\n  items: SelectDropdownItem[],\n  hasSection: boolean,\n  keys?: Key[],\n): SelectDropdownItem[] => {\n  if (!keys) return [];\n  if (!hasSection) {\n    return items.filter((item) => keys.includes(item.id as Key));\n  }\n\n  return (items as ListItemSectionProps[]).flatMap((section) => [\n    ...(keys.includes(section.id as Key) ? [section] : []),\n    ...(section.items?.filter((item: ListItemProps) => keys.includes(item.id as Key)) || []),\n  ]);\n};\n\nexport const getSelectedValues = (\n  items: SelectDropdownItem[],\n  hasSection: boolean,\n  value?: Key | Key[],\n): SelectDropdownItem[] => {\n  if (!value) return [];\n  if (Array.isArray(value)) {\n    return getValuesFromKeys(items, hasSection, value);\n  }\n  const keyValue = getValueFromKey(items, hasSection, value);\n  return keyValue === undefined ? [] : [keyValue];\n};\n\nexport const generateClassNames = (prefix?: string): ClassNamesReturnPayload => ({\n  button: prefix ? `${prefix}-select-dropdown-button` : undefined,\n  optionsContainer: prefix ? `${prefix}-select-dropdown-container` : undefined,\n  popover: prefix ? `${prefix}-select-dropdown` : undefined,\n});\n"],"names":[],"mappings":"AAKa,MAAA,eAAe,GAAG,CAAC,KAA2B,EAAE,UAAmB,EAAE,GAAS,KAAI;AAC7F,IAAA,IAAI,CAAC,GAAG;AAAE,QAAA,OAAO,SAAS;IAC1B,IAAI,CAAC,UAAU,EAAE;AACf,QAAA,OAAO,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,EAAE,KAAK,GAAG,CAAC,IAAI,SAAS;AAC1D;AAED,IAAA,MAAM,eAAe,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,OAAO,KAAK,OAAO,CAAC,EAAE,KAAK,GAAG,CAAC;AACnE,IAAA,IAAI,eAAe;AAAE,QAAA,OAAO,eAAe;AAE3C,IAAA,OAAO;AACJ,SAAA,OAAO,CAAC,CAAC,OAAO,MAAM,OAAO,IAAI,OAAO,IAAI,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,OAAO,CAAC,KAAK,GAAG,EAAE,CAAC;AAC9F,SAAA,IAAI,CAAC,CAAC,IAAmB,KAAK,IAAI,CAAC,EAAE,KAAK,GAAG,CAAC;AACnD;AAEa,MAAA,iBAAiB,GAAG,CAC/B,KAA2B,EAC3B,UAAmB,EACnB,IAAY,KACY;AACxB,IAAA,IAAI,CAAC,IAAI;AAAE,QAAA,OAAO,EAAE;IACpB,IAAI,CAAC,UAAU,EAAE;AACf,QAAA,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAS,CAAC,CAAC;AAC7D;AAED,IAAA,OAAQ,KAAgC,CAAC,OAAO,CAAC,CAAC,OAAO,KAAI;;QAAC,OAAA;AAC5D,YAAA,IAAI,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAS,CAAC,GAAG,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC;YACtD,IAAI,CAAA,CAAA,EAAA,GAAA,OAAO,CAAC,KAAK,MAAE,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAA,MAAM,CAAC,CAAC,IAAmB,KAAK,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAS,CAAC,CAAC,KAAI,EAAE,CAAC;SACzF;AAAA,KAAA,CAAC;AACJ;AAEa,MAAA,iBAAiB,GAAG,CAC/B,KAA2B,EAC3B,UAAmB,EACnB,KAAmB,KACK;AACxB,IAAA,IAAI,CAAC,KAAK;AAAE,QAAA,OAAO,EAAE;AACrB,IAAA,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;QACxB,OAAO,iBAAiB,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,CAAC;AACnD;IACD,MAAM,QAAQ,GAAG,eAAe,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,CAAC;AAC1D,IAAA,OAAO,QAAQ,KAAK,SAAS,GAAG,EAAE,GAAG,CAAC,QAAQ,CAAC;AACjD;MAEa,kBAAkB,GAAG,CAAC,MAAe,MAA+B;IAC/E,MAAM,EAAE,MAAM,GAAG,CAAG,EAAA,MAAM,CAAyB,uBAAA,CAAA,GAAG,SAAS;IAC/D,gBAAgB,EAAE,MAAM,GAAG,CAAG,EAAA,MAAM,CAA4B,0BAAA,CAAA,GAAG,SAAS;IAC5E,OAAO,EAAE,MAAM,GAAG,CAAG,EAAA,MAAM,CAAkB,gBAAA,CAAA,GAAG,SAAS;AAC1D,CAAA;;;;"}
+{"version":3,"file":"utils.js","sources":["../../../src/components/SelectDropdown/utils.ts"],"sourcesContent":["import { Key } from 'react-aria-components';\nimport { ClassNamesReturnPayload, SelectDropdownItem } from './types';\nimport { ListItemSectionProps } from './components/ListItemSection/ListItemSection';\nimport { ListItemProps } from './components/ListItem/types';\n\nexport const getValueFromKey = (items: SelectDropdownItem[], hasSection: boolean, key?: Key) => {\n  if (!key) return undefined;\n  if (!hasSection) {\n    return items.find((item) => item.id === key) || undefined;\n  }\n\n  const selectedSection = items.find((section) => section.id === key);\n  if (selectedSection) return selectedSection;\n\n  return items\n    .flatMap((section) => ('items' in section && Array.isArray(section.items) ? section.items : []))\n    .find((item: ListItemProps) => item.id === key);\n};\n\nexport const getValuesFromKeys = (\n  items: SelectDropdownItem[],\n  hasSection: boolean,\n  keys?: Key[],\n): SelectDropdownItem[] => {\n  if (!keys) return [];\n  if (!hasSection) {\n    return items.filter((item) => keys.includes(item.id as Key));\n  }\n\n  return (items as ListItemSectionProps[]).flatMap((section) => [\n    ...(keys.includes(section.id as Key) ? [section] : []),\n    ...(section.items?.filter((item: ListItemProps) => keys.includes(item.id as Key)) || []),\n  ]);\n};\n\nexport const getSelectedValues = (\n  items: SelectDropdownItem[],\n  hasSection: boolean,\n  value?: Key | Key[],\n): SelectDropdownItem[] => {\n  if (!value) return [];\n  if (Array.isArray(value)) {\n    return getValuesFromKeys(items, hasSection, value);\n  }\n  const keyValue = getValueFromKey(items, hasSection, value);\n  return keyValue === undefined ? [] : [keyValue];\n};\n\nexport const generateClassNames = (prefix?: string): ClassNamesReturnPayload => ({\n  button: prefix ? `${prefix}-select-dropdown-button` : undefined,\n  optionsContainer: prefix ? `${prefix}-select-dropdown-container` : undefined,\n  popover: prefix ? `${prefix}-select-dropdown` : undefined,\n});\n"],"names":[],"mappings":"AAKa,MAAA,eAAe,GAAG,CAAC,KAA2B,EAAE,UAAmB,EAAE,GAAS,KAAI;AAC7F,IAAA,IAAI,CAAC,GAAG;AAAE,QAAA,OAAO,SAAS;IAC1B,IAAI,CAAC,UAAU,EAAE;AACf,QAAA,OAAO,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,EAAE,KAAK,GAAG,CAAC,IAAI,SAAS;AAC1D;AAED,IAAA,MAAM,eAAe,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,OAAO,KAAK,OAAO,CAAC,EAAE,KAAK,GAAG,CAAC;AACnE,IAAA,IAAI,eAAe;AAAE,QAAA,OAAO,eAAe;AAE3C,IAAA,OAAO;AACJ,SAAA,OAAO,CAAC,CAAC,OAAO,MAAM,OAAO,IAAI,OAAO,IAAI,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,OAAO,CAAC,KAAK,GAAG,EAAE,CAAC;AAC9F,SAAA,IAAI,CAAC,CAAC,IAAmB,KAAK,IAAI,CAAC,EAAE,KAAK,GAAG,CAAC;AACnD;AAEa,MAAA,iBAAiB,GAAG,CAC/B,KAA2B,EAC3B,UAAmB,EACnB,IAAY,KACY;AACxB,IAAA,IAAI,CAAC,IAAI;AAAE,QAAA,OAAO,EAAE;IACpB,IAAI,CAAC,UAAU,EAAE;AACf,QAAA,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAS,CAAC,CAAC;AAC7D;AAED,IAAA,OAAQ,KAAgC,CAAC,OAAO,CAAC,CAAC,OAAO,KAAI;;QAAC,OAAA;AAC5D,YAAA,IAAI,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAS,CAAC,GAAG,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC;YACtD,IAAI,CAAA,CAAA,EAAA,GAAA,OAAO,CAAC,KAAK,MAAE,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAA,MAAM,CAAC,CAAC,IAAmB,KAAK,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAS,CAAC,CAAC,KAAI,EAAE,CAAC;SACzF;AAAA,KAAA,CAAC;AACJ;AAEa,MAAA,iBAAiB,GAAG,CAC/B,KAA2B,EAC3B,UAAmB,EACnB,KAAmB,KACK;AACxB,IAAA,IAAI,CAAC,KAAK;AAAE,QAAA,OAAO,EAAE;AACrB,IAAA,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;QACxB,OAAO,iBAAiB,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,CAAC;AACnD;IACD,MAAM,QAAQ,GAAG,eAAe,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,CAAC;AAC1D,IAAA,OAAO,QAAQ,KAAK,SAAS,GAAG,EAAE,GAAG,CAAC,QAAQ,CAAC;AACjD;MAEa,kBAAkB,GAAG,CAAC,MAAe,MAA+B;IAC/E,MAAM,EAAE,MAAM,GAAG,CAAG,EAAA,MAAM,CAAyB,uBAAA,CAAA,GAAG,SAAS;IAC/D,gBAAgB,EAAE,MAAM,GAAG,CAAG,EAAA,MAAM,CAA4B,0BAAA,CAAA,GAAG,SAAS;IAC5E,OAAO,EAAE,MAAM,GAAG,CAAG,EAAA,MAAM,CAAkB,gBAAA,CAAA,GAAG,SAAS;AAC1D,CAAA;;;;"}

package/package.json

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

package/dist/components/SelectDropdown/ListItem/ListItem.cjs

@@ -1,23 +0,0 @@
-'use strict';
-
-var React = require('react');
-var reactAriaComponents = require('react-aria-components');
-require('../../../hooks/useFocusVisible.cjs');
-var useId = require('../../../hooks/useId.cjs');
-require('lodash.throttle');
-var ListItemContent = require('./components/ListItemContent.cjs');
-var ListItem_module = require('./ListItem.module.scss.cjs');
-var buildClassnames = require('../../../utils/buildClassnames.cjs');
-require('uid/secure');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-
-const ListItem = ({ id, label, href, appearance = 'primary', className, ...props }) => {
-    const idComputed = useId.useId({ id, prefix: 'list-item' });
-    return (React__default.default.createElement(reactAriaComponents.ListBoxItem, { id: idComputed, textValue: label, href: href, className: buildClassnames.buildClassnames([ListItem_module.listItem, ListItem_module[`appearance-${appearance}`], className]), ...props }, ({ selectionMode, allowsDragging, isSelected }) => (React__default.default.createElement(ListItemContent.ListItemContent, { selectionMode: selectionMode, allowsDragging: allowsDragging, isSelected: isSelected, label: label, isLink: Boolean(href), appearance: appearance, ...props }))));
-};
-
-exports.ListItem = ListItem;
-//# sourceMappingURL=ListItem.cjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ListItem.cjs","sources":["../../../../src/components/SelectDropdown/ListItem/ListItem.tsx"],"sourcesContent":["import React from 'react';\nimport { ListBoxItem, ListBoxItemRenderProps } from 'react-aria-components';\nimport { useId } from '../../../hooks';\nimport { ListItemProps } from './types';\nimport { ListItemContent } from './components/ListItemContent';\nimport styles from './ListItem.module.scss';\nimport { buildClassnames } from '../../../utils';\n\nexport const ListItem = ({\n  id,\n  label,\n  href,\n  appearance = 'primary',\n  className,\n  ...props\n}: ListItemProps) => {\n  const idComputed = useId({ id, prefix: 'list-item' });\n\n  return (\n    <ListBoxItem\n      id={idComputed}\n      textValue={label}\n      href={href}\n      className={buildClassnames([styles.listItem, styles[`appearance-${appearance}`], className])}\n      {...props}\n    >\n      {/* use react aria's render props to add more such as isHovered */}\n      {({ selectionMode, allowsDragging, isSelected }: ListBoxItemRenderProps) => (\n        <ListItemContent\n          selectionMode={selectionMode}\n          allowsDragging={allowsDragging}\n          isSelected={isSelected}\n          label={label}\n          isLink={Boolean(href)}\n          appearance={appearance}\n          {...props}\n        />\n      )}\n    </ListBoxItem>\n  );\n};\n"],"names":["useId","React","ListBoxItem","buildClassnames","styles","ListItemContent"],"mappings":";;;;;;;;;;;;;;;;MAQa,QAAQ,GAAG,CAAC,EACvB,EAAE,EACF,KAAK,EACL,IAAI,EACJ,UAAU,GAAG,SAAS,EACtB,SAAS,EACT,GAAG,KAAK,EACM,KAAI;AAClB,IAAA,MAAM,UAAU,GAAGA,WAAK,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC;AAErD,IAAA,QACEC,sBAAC,CAAA,aAAA,CAAAC,+BAAW,IACV,EAAE,EAAE,UAAU,EACd,SAAS,EAAE,KAAK,EAChB,IAAI,EAAE,IAAI,EACV,SAAS,EAAEC,+BAAe,CAAC,CAACC,eAAM,CAAC,QAAQ,EAAEA,eAAM,CAAC,CAAA,WAAA,EAAc,UAAU,CAAE,CAAA,CAAC,EAAE,SAAS,CAAC,CAAC,EAAA,GACxF,KAAK,EAGR,EAAA,CAAC,EAAE,aAAa,EAAE,cAAc,EAAE,UAAU,EAA0B,MACrEH,qCAACI,+BAAe,EAAA,EACd,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,cAAc,EAC9B,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,OAAO,CAAC,IAAI,CAAC,EACrB,UAAU,EAAE,UAAU,EAClB,GAAA,KAAK,GACT,CACH,CACW;AAElB;;;;"}

package/dist/components/SelectDropdown/ListItem/ListItem.js

@@ -1,17 +0,0 @@
-import React__default from 'react';
-import { ListBoxItem } from 'react-aria-components';
-import '../../../hooks/useFocusVisible.js';
-import { useId } from '../../../hooks/useId.js';
-import 'lodash.throttle';
-import { ListItemContent } from './components/ListItemContent.js';
-import styles from './ListItem.module.scss.js';
-import { buildClassnames } from '../../../utils/buildClassnames.js';
-import 'uid/secure';
-
-const ListItem = ({ id, label, href, appearance = 'primary', className, ...props }) => {
-    const idComputed = useId({ id, prefix: 'list-item' });
-    return (React__default.createElement(ListBoxItem, { id: idComputed, textValue: label, href: href, className: buildClassnames([styles.listItem, styles[`appearance-${appearance}`], className]), ...props }, ({ selectionMode, allowsDragging, isSelected }) => (React__default.createElement(ListItemContent, { selectionMode: selectionMode, allowsDragging: allowsDragging, isSelected: isSelected, label: label, isLink: Boolean(href), appearance: appearance, ...props }))));
-};
-
-export { ListItem };
-//# sourceMappingURL=ListItem.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ListItem.js","sources":["../../../../src/components/SelectDropdown/ListItem/ListItem.tsx"],"sourcesContent":["import React from 'react';\nimport { ListBoxItem, ListBoxItemRenderProps } from 'react-aria-components';\nimport { useId } from '../../../hooks';\nimport { ListItemProps } from './types';\nimport { ListItemContent } from './components/ListItemContent';\nimport styles from './ListItem.module.scss';\nimport { buildClassnames } from '../../../utils';\n\nexport const ListItem = ({\n  id,\n  label,\n  href,\n  appearance = 'primary',\n  className,\n  ...props\n}: ListItemProps) => {\n  const idComputed = useId({ id, prefix: 'list-item' });\n\n  return (\n    <ListBoxItem\n      id={idComputed}\n      textValue={label}\n      href={href}\n      className={buildClassnames([styles.listItem, styles[`appearance-${appearance}`], className])}\n      {...props}\n    >\n      {/* use react aria's render props to add more such as isHovered */}\n      {({ selectionMode, allowsDragging, isSelected }: ListBoxItemRenderProps) => (\n        <ListItemContent\n          selectionMode={selectionMode}\n          allowsDragging={allowsDragging}\n          isSelected={isSelected}\n          label={label}\n          isLink={Boolean(href)}\n          appearance={appearance}\n          {...props}\n        />\n      )}\n    </ListBoxItem>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;MAQa,QAAQ,GAAG,CAAC,EACvB,EAAE,EACF,KAAK,EACL,IAAI,EACJ,UAAU,GAAG,SAAS,EACtB,SAAS,EACT,GAAG,KAAK,EACM,KAAI;AAClB,IAAA,MAAM,UAAU,GAAG,KAAK,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC;AAErD,IAAA,QACEA,cAAC,CAAA,aAAA,CAAA,WAAW,IACV,EAAE,EAAE,UAAU,EACd,SAAS,EAAE,KAAK,EAChB,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAA,WAAA,EAAc,UAAU,CAAE,CAAA,CAAC,EAAE,SAAS,CAAC,CAAC,EAAA,GACxF,KAAK,EAGR,EAAA,CAAC,EAAE,aAAa,EAAE,cAAc,EAAE,UAAU,EAA0B,MACrEA,6BAAC,eAAe,EAAA,EACd,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,cAAc,EAC9B,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,OAAO,CAAC,IAAI,CAAC,EACrB,UAAU,EAAE,UAAU,EAClB,GAAA,KAAK,GACT,CACH,CACW;AAElB;;;;"}

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

@@ -1,9 +0,0 @@
-'use strict';
-
-var ___$insertStyle = require('../../../_virtual/____insertStyle.cjs');
-
-___$insertStyle("._listItem_y5fce_1 {\n  border-radius: var(--radius-base);\n  cursor: pointer;\n  background-color: #ffffff;\n  text-decoration: none;\n}\n._listItem_y5fce_1._appearance-secondary_y5fce_7 {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n._listItem_y5fce_1[data-hovered] > div {\n  background-color: #f0f7fc;\n}\n._listItem_y5fce_1[data-pressed] > div {\n  background-color: #e3f0fa;\n}\n._listItem_y5fce_1[data-focused] {\n  outline: 0;\n}\n._listItem_y5fce_1[data-focus-visible] > div {\n  outline: solid var(--sizes-xs) var(--colors-secondary-blue-light);\n  z-index: 1;\n  position: relative;\n}\n._listItem_y5fce_1[data-dragging] {\n  background-color: var(--colors-neutral-grey-base);\n  border-color: var(--color-secondary-blue-base);\n}\n._listItem_y5fce_1[data-drop-target] {\n  background-color: var(--colors-secondary-green-base);\n  border-color: var(--colors-secondary-green-base);\n}\n._listItem_y5fce_1[data-disabled] {\n  cursor: not-allowed;\n  background-color: var(--colors-neutral-grey-light);\n  opacity: 0.75;\n}\n._listItem_y5fce_1 > div {\n  padding: var(--sizes-sm);\n  border-radius: var(--radius-base);\n}\n\n._linkIcon_y5fce_42 {\n  color: var(--colors-neutral-ink-base);\n}\n\n._infoContainer_y5fce_46 {\n  display: grid;\n  gap: var(--sizes-sm);\n  width: 100%;\n  align-items: center;\n  min-width: 0;\n  flex: 1;\n}\n._infoContainer_y5fce_46._hasItemInfoAndEndInfo_y5fce_54 {\n  grid-template-columns: auto 1fr 1fr;\n}\n._infoContainer_y5fce_46._hasItemInfoOnly_y5fce_57, ._infoContainer_y5fce_46._hasEndInfoOnly_y5fce_57 {\n  grid-template-columns: auto 1fr;\n}\n._infoContainer_y5fce_46 > *:last-child._justifyEnd_y5fce_60 {\n  justify-self: end;\n}\n._infoContainer_y5fce_46 > *:last-child._justifyStart_y5fce_63 {\n  justify-self: start;\n}");
-var styles = {"listItem":"_listItem_y5fce_1","appearance-secondary":"_appearance-secondary_y5fce_7","linkIcon":"_linkIcon_y5fce_42","infoContainer":"_infoContainer_y5fce_46","hasItemInfoAndEndInfo":"_hasItemInfoAndEndInfo_y5fce_54","hasItemInfoOnly":"_hasItemInfoOnly_y5fce_57","hasEndInfoOnly":"_hasEndInfoOnly_y5fce_57","justifyEnd":"_justifyEnd_y5fce_60","justifyStart":"_justifyStart_y5fce_63"};
-
-module.exports = styles;
-//# sourceMappingURL=ListItem.module.scss.cjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ListItem.module.scss.cjs","sources":["../../../../src/components/SelectDropdown/ListItem/ListItem.module.scss"],"sourcesContent":[".listItem {\n  border-radius: var(--radius-base);\n  cursor: pointer;\n  background-color: #ffffff;\n  text-decoration: none;\n\n  &.appearance-secondary {\n    background-color: var(--colors-neutral-grey-lightest);\n  }\n\n  &[data-hovered] > div {\n    background-color: #f0f7fc;\n  }\n\n  &[data-pressed] > div {\n    background-color: #e3f0fa;\n  }\n\n  &[data-focused] {\n    outline: 0;\n  }\n\n  &[data-focus-visible] > div {\n    outline: solid var(--sizes-xs) var(--colors-secondary-blue-light);\n    z-index: 1;\n    position: relative;\n  }\n\n  &[data-dragging] {\n    background-color: var(--colors-neutral-grey-base);\n    border-color: var(--color-secondary-blue-base);\n  }\n\n  &[data-drop-target] {\n    background-color: var(--colors-secondary-green-base);\n    border-color: var(--colors-secondary-green-base);\n  }\n\n  &[data-disabled] {\n    cursor: not-allowed;\n    background-color: var(--colors-neutral-grey-light);\n    opacity: 0.75;\n  }\n\n  > div {\n    padding: var(--sizes-sm);\n    border-radius: var(--radius-base);\n  }\n}\n\n.linkIcon {\n  color: var(--colors-neutral-ink-base);\n}\n\n.infoContainer {\n  display: grid;\n  gap: var(--sizes-sm);\n  width: 100%;\n  align-items: center;\n  min-width: 0;\n  flex: 1;\n\n  &.hasItemInfoAndEndInfo {\n    grid-template-columns: auto 1fr 1fr;\n  }\n\n  &.hasItemInfoOnly,\n  &.hasEndInfoOnly {\n    grid-template-columns: auto 1fr;\n  }\n\n  > *:last-child {\n    &.justifyEnd {\n      justify-self: end;\n    }\n\n    &.justifyStart {\n      justify-self: start;\n    }\n  }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,gwDAAA;AACA,aAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,sBAAA,CAAA,+BAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,uBAAA,CAAA,iCAAA,CAAA,iBAAA,CAAA,2BAAA,CAAA,gBAAA,CAAA,0BAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,cAAA,CAAA,wBAAA;;;;"}

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

@@ -1,7 +0,0 @@
-import insertStyle from '../../../_virtual/____insertStyle.js';
-
-insertStyle("._listItem_y5fce_1 {\n  border-radius: var(--radius-base);\n  cursor: pointer;\n  background-color: #ffffff;\n  text-decoration: none;\n}\n._listItem_y5fce_1._appearance-secondary_y5fce_7 {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n._listItem_y5fce_1[data-hovered] > div {\n  background-color: #f0f7fc;\n}\n._listItem_y5fce_1[data-pressed] > div {\n  background-color: #e3f0fa;\n}\n._listItem_y5fce_1[data-focused] {\n  outline: 0;\n}\n._listItem_y5fce_1[data-focus-visible] > div {\n  outline: solid var(--sizes-xs) var(--colors-secondary-blue-light);\n  z-index: 1;\n  position: relative;\n}\n._listItem_y5fce_1[data-dragging] {\n  background-color: var(--colors-neutral-grey-base);\n  border-color: var(--color-secondary-blue-base);\n}\n._listItem_y5fce_1[data-drop-target] {\n  background-color: var(--colors-secondary-green-base);\n  border-color: var(--colors-secondary-green-base);\n}\n._listItem_y5fce_1[data-disabled] {\n  cursor: not-allowed;\n  background-color: var(--colors-neutral-grey-light);\n  opacity: 0.75;\n}\n._listItem_y5fce_1 > div {\n  padding: var(--sizes-sm);\n  border-radius: var(--radius-base);\n}\n\n._linkIcon_y5fce_42 {\n  color: var(--colors-neutral-ink-base);\n}\n\n._infoContainer_y5fce_46 {\n  display: grid;\n  gap: var(--sizes-sm);\n  width: 100%;\n  align-items: center;\n  min-width: 0;\n  flex: 1;\n}\n._infoContainer_y5fce_46._hasItemInfoAndEndInfo_y5fce_54 {\n  grid-template-columns: auto 1fr 1fr;\n}\n._infoContainer_y5fce_46._hasItemInfoOnly_y5fce_57, ._infoContainer_y5fce_46._hasEndInfoOnly_y5fce_57 {\n  grid-template-columns: auto 1fr;\n}\n._infoContainer_y5fce_46 > *:last-child._justifyEnd_y5fce_60 {\n  justify-self: end;\n}\n._infoContainer_y5fce_46 > *:last-child._justifyStart_y5fce_63 {\n  justify-self: start;\n}");
-var styles = {"listItem":"_listItem_y5fce_1","appearance-secondary":"_appearance-secondary_y5fce_7","linkIcon":"_linkIcon_y5fce_42","infoContainer":"_infoContainer_y5fce_46","hasItemInfoAndEndInfo":"_hasItemInfoAndEndInfo_y5fce_54","hasItemInfoOnly":"_hasItemInfoOnly_y5fce_57","hasEndInfoOnly":"_hasEndInfoOnly_y5fce_57","justifyEnd":"_justifyEnd_y5fce_60","justifyStart":"_justifyStart_y5fce_63"};
-
-export { styles as default };
-//# sourceMappingURL=ListItem.module.scss.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ListItem.module.scss.js","sources":["../../../../src/components/SelectDropdown/ListItem/ListItem.module.scss"],"sourcesContent":[".listItem {\n  border-radius: var(--radius-base);\n  cursor: pointer;\n  background-color: #ffffff;\n  text-decoration: none;\n\n  &.appearance-secondary {\n    background-color: var(--colors-neutral-grey-lightest);\n  }\n\n  &[data-hovered] > div {\n    background-color: #f0f7fc;\n  }\n\n  &[data-pressed] > div {\n    background-color: #e3f0fa;\n  }\n\n  &[data-focused] {\n    outline: 0;\n  }\n\n  &[data-focus-visible] > div {\n    outline: solid var(--sizes-xs) var(--colors-secondary-blue-light);\n    z-index: 1;\n    position: relative;\n  }\n\n  &[data-dragging] {\n    background-color: var(--colors-neutral-grey-base);\n    border-color: var(--color-secondary-blue-base);\n  }\n\n  &[data-drop-target] {\n    background-color: var(--colors-secondary-green-base);\n    border-color: var(--colors-secondary-green-base);\n  }\n\n  &[data-disabled] {\n    cursor: not-allowed;\n    background-color: var(--colors-neutral-grey-light);\n    opacity: 0.75;\n  }\n\n  > div {\n    padding: var(--sizes-sm);\n    border-radius: var(--radius-base);\n  }\n}\n\n.linkIcon {\n  color: var(--colors-neutral-ink-base);\n}\n\n.infoContainer {\n  display: grid;\n  gap: var(--sizes-sm);\n  width: 100%;\n  align-items: center;\n  min-width: 0;\n  flex: 1;\n\n  &.hasItemInfoAndEndInfo {\n    grid-template-columns: auto 1fr 1fr;\n  }\n\n  &.hasItemInfoOnly,\n  &.hasEndInfoOnly {\n    grid-template-columns: auto 1fr;\n  }\n\n  > *:last-child {\n    &.justifyEnd {\n      justify-self: end;\n    }\n\n    &.justifyStart {\n      justify-self: start;\n    }\n  }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,gwDAAA;AACA,aAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,sBAAA,CAAA,+BAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,uBAAA,CAAA,iCAAA,CAAA,iBAAA,CAAA,2BAAA,CAAA,gBAAA,CAAA,0BAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,cAAA,CAAA,wBAAA;;;;"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"ListItemContent.cjs","sources":["../../../../../src/components/SelectDropdown/ListItem/components/ListItemContent.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { Text } from 'react-aria-components';\nimport { buildClassnames } from '../../../../utils';\nimport { FlexCol } from '../../../Flex/FlexCol';\nimport { ArrowRightIcon, DragIndicatorIcon } from '../../../../icons';\nimport { ListItemContentProps } from './types';\nimport { Text as VeeqoText } from '../../../Text';\nimport { MiniAlert } from '../../../Alerts/MiniAlert';\nimport { SelectionType } from './SelectionType';\nimport styles from '../ListItem.module.scss';\nimport { FlexRow } from '../../../Flex/FlexRow';\n\nexport const ListItemContent = ({\n  label,\n  hint,\n  itemInfoSlot,\n  endInfoSlot,\n  alert,\n  mediaSlot,\n  allowsDragging = false,\n  selectionMode = 'single',\n  isLink,\n  isSelected = false,\n}: ListItemContentProps) => {\n  const getInfoContainerClassNames = useMemo(() => {\n    const base = styles.infoContainer;\n\n    if (itemInfoSlot && endInfoSlot) {\n      return buildClassnames([base, styles.hasItemInfoAndEndInfo]);\n    }\n\n    if (itemInfoSlot) {\n      return buildClassnames([base, styles.hasItemInfoOnly]);\n    }\n\n    if (endInfoSlot) {\n      return buildClassnames([base, styles.hasEndInfoOnly]);\n    }\n\n    return buildClassnames([base]);\n  }, [endInfoSlot, itemInfoSlot]);\n\n  return (\n    <FlexRow flexWrap=\"nowrap\" justifyContent=\"space-between\" alignItems=\"center\" gap=\"base\">\n      <FlexRow flexWrap=\"nowrap\" gap=\"base\" style={{ flexGrow: 1 }}>\n        {allowsDragging && <DragIndicatorIcon data-testid=\"drag-icon\" />}\n        <SelectionType selectionMode={selectionMode} isSelected={isSelected} isLink={isLink} />\n        {mediaSlot}\n        <FlexCol gap=\"xs\" style={{ flexGrow: 1 }}>\n          <div className={getInfoContainerClassNames} data-testid=\"info-container\">\n            <Text slot=\"label\">\n              <VeeqoText variant=\"body\">{label}</VeeqoText>\n            </Text>\n            {itemInfoSlot}\n            {endInfoSlot && (\n              <div className={endInfoSlot ? styles.justifyEnd : styles.justifyStart}>\n                {endInfoSlot}\n              </div>\n            )}\n          </div>\n\n          {hint && (\n            <Text slot=\"description\">\n              <VeeqoText variant=\"hintText\">{hint}</VeeqoText>\n            </Text>\n          )}\n          {alert && <MiniAlert title={alert.title} variant={alert.variant} />}\n        </FlexCol>\n      </FlexRow>\n      {isLink && <ArrowRightIcon className={styles.linkIcon} data-testid=\"link-icon\" />}\n    </FlexRow>\n  );\n};\n"],"names":["useMemo","styles","buildClassnames","React","FlexRow","DragIndicatorIcon","SelectionType","FlexCol","Text","VeeqoText","MiniAlert","ArrowRightIcon"],"mappings":"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"}

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

@@ -1,3 +0,0 @@
-import React from 'react';
-import { ListItemContentProps } from './types';
-export declare const ListItemContent: ({ label, hint, itemInfoSlot, endInfoSlot, alert, mediaSlot, allowsDragging, selectionMode, isLink, isSelected, }: ListItemContentProps) => React.JSX.Element;

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

@@ -1 +0,0 @@
-{"version":3,"file":"ListItemContent.js","sources":["../../../../../src/components/SelectDropdown/ListItem/components/ListItemContent.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { Text } from 'react-aria-components';\nimport { buildClassnames } from '../../../../utils';\nimport { FlexCol } from '../../../Flex/FlexCol';\nimport { ArrowRightIcon, DragIndicatorIcon } from '../../../../icons';\nimport { ListItemContentProps } from './types';\nimport { Text as VeeqoText } from '../../../Text';\nimport { MiniAlert } from '../../../Alerts/MiniAlert';\nimport { SelectionType } from './SelectionType';\nimport styles from '../ListItem.module.scss';\nimport { FlexRow } from '../../../Flex/FlexRow';\n\nexport const ListItemContent = ({\n  label,\n  hint,\n  itemInfoSlot,\n  endInfoSlot,\n  alert,\n  mediaSlot,\n  allowsDragging = false,\n  selectionMode = 'single',\n  isLink,\n  isSelected = false,\n}: ListItemContentProps) => {\n  const getInfoContainerClassNames = useMemo(() => {\n    const base = styles.infoContainer;\n\n    if (itemInfoSlot && endInfoSlot) {\n      return buildClassnames([base, styles.hasItemInfoAndEndInfo]);\n    }\n\n    if (itemInfoSlot) {\n      return buildClassnames([base, styles.hasItemInfoOnly]);\n    }\n\n    if (endInfoSlot) {\n      return buildClassnames([base, styles.hasEndInfoOnly]);\n    }\n\n    return buildClassnames([base]);\n  }, [endInfoSlot, itemInfoSlot]);\n\n  return (\n    <FlexRow flexWrap=\"nowrap\" justifyContent=\"space-between\" alignItems=\"center\" gap=\"base\">\n      <FlexRow flexWrap=\"nowrap\" gap=\"base\" style={{ flexGrow: 1 }}>\n        {allowsDragging && <DragIndicatorIcon data-testid=\"drag-icon\" />}\n        <SelectionType selectionMode={selectionMode} isSelected={isSelected} isLink={isLink} />\n        {mediaSlot}\n        <FlexCol gap=\"xs\" style={{ flexGrow: 1 }}>\n          <div className={getInfoContainerClassNames} data-testid=\"info-container\">\n            <Text slot=\"label\">\n              <VeeqoText variant=\"body\">{label}</VeeqoText>\n            </Text>\n            {itemInfoSlot}\n            {endInfoSlot && (\n              <div className={endInfoSlot ? styles.justifyEnd : styles.justifyStart}>\n                {endInfoSlot}\n              </div>\n            )}\n          </div>\n\n          {hint && (\n            <Text slot=\"description\">\n              <VeeqoText variant=\"hintText\">{hint}</VeeqoText>\n            </Text>\n          )}\n          {alert && <MiniAlert title={alert.title} variant={alert.variant} />}\n        </FlexCol>\n      </FlexRow>\n      {isLink && <ArrowRightIcon className={styles.linkIcon} data-testid=\"link-icon\" />}\n    </FlexRow>\n  );\n};\n"],"names":["React","VeeqoText"],"mappings":"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"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"SelectionType.cjs","sources":["../../../../../src/components/SelectDropdown/ListItem/components/SelectionType.tsx"],"sourcesContent":["import React from 'react';\nimport { Radio } from '../../../Radio';\nimport { Checkbox } from '../../../Checkbox';\n\ntype SelectionTypeProps = {\n  selectionMode: 'single' | 'multiple' | 'none';\n  isSelected: boolean;\n  isLink?: boolean;\n};\n\nexport const SelectionType = ({ selectionMode, isSelected, isLink }: SelectionTypeProps) => {\n  if (isLink || selectionMode === 'none') return null;\n\n  if (selectionMode === 'single') return <Radio checked={isSelected} onChange={() => {}} />;\n\n  return <Checkbox checked={isSelected} onChange={() => {}} />;\n};\n"],"names":["React","Radio","Checkbox"],"mappings":";;;;;;;;;;AAUO,MAAM,aAAa,GAAG,CAAC,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,EAAsB,KAAI;AACzF,IAAA,IAAI,MAAM,IAAI,aAAa,KAAK,MAAM;AAAE,QAAA,OAAO,IAAI;IAEnD,IAAI,aAAa,KAAK,QAAQ;AAAE,QAAA,OAAOA,sBAAC,CAAA,aAAA,CAAAC,WAAK,EAAC,EAAA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAO,GAAC,GAAI;AAEzF,IAAA,OAAOD,sBAAC,CAAA,aAAA,CAAAE,iBAAQ,EAAC,EAAA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAO,GAAC,GAAI;AAC9D;;;;"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"SelectionType.js","sources":["../../../../../src/components/SelectDropdown/ListItem/components/SelectionType.tsx"],"sourcesContent":["import React from 'react';\nimport { Radio } from '../../../Radio';\nimport { Checkbox } from '../../../Checkbox';\n\ntype SelectionTypeProps = {\n  selectionMode: 'single' | 'multiple' | 'none';\n  isSelected: boolean;\n  isLink?: boolean;\n};\n\nexport const SelectionType = ({ selectionMode, isSelected, isLink }: SelectionTypeProps) => {\n  if (isLink || selectionMode === 'none') return null;\n\n  if (selectionMode === 'single') return <Radio checked={isSelected} onChange={() => {}} />;\n\n  return <Checkbox checked={isSelected} onChange={() => {}} />;\n};\n"],"names":["React"],"mappings":";;;;AAUO,MAAM,aAAa,GAAG,CAAC,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,EAAsB,KAAI;AACzF,IAAA,IAAI,MAAM,IAAI,aAAa,KAAK,MAAM;AAAE,QAAA,OAAO,IAAI;IAEnD,IAAI,aAAa,KAAK,QAAQ;AAAE,QAAA,OAAOA,cAAC,CAAA,aAAA,CAAA,KAAK,EAAC,EAAA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAO,GAAC,GAAI;AAEzF,IAAA,OAAOA,cAAC,CAAA,aAAA,CAAA,QAAQ,EAAC,EAAA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAO,GAAC,GAAI;AAC9D;;;;"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"ListItemSection.cjs","sources":["../../../../src/components/SelectDropdown/ListItemSection/ListItemSection.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport { Collection, Header, Section, SectionProps } from 'react-aria-components';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { FlexCol } from '../../Flex/FlexCol';\nimport { Text as VeeqoText } from '../../Text';\nimport { ListItemProps } from '../ListItem/types';\nimport { ListItem } from '../ListItem/ListItem';\nimport styles from './ListItemSection.module.scss';\nimport { buildClassnames } from '../../../utils';\n\nexport type ListItemSectionProps = Omit<SectionProps<ListItemProps>, 'items'> & {\n  label: string;\n  hint?: string;\n  itemInfoSlot?: ReactElement;\n  items?: ListItemProps[];\n};\n\nexport const ListItemSection = ({\n  label,\n  hint,\n  itemInfoSlot,\n  items,\n  children,\n  className,\n  ...props\n}: ListItemSectionProps) => (\n  <Section className={buildClassnames([styles.section, className])} {...props}>\n    <Header>\n      <FlexCol gap=\"xs\">\n        <FlexRow>\n          <VeeqoText variant=\"body\">{label}</VeeqoText>\n          {itemInfoSlot}\n        </FlexRow>\n        {hint && <VeeqoText variant=\"hintText\">{hint}</VeeqoText>}\n      </FlexCol>\n    </Header>\n    {children}\n    {items && (\n      <Collection items={items}>{(item: ListItemProps) => <ListItem {...item} />}</Collection>\n    )}\n  </Section>\n);\n"],"names":["React","Section","buildClassnames","styles","Header","FlexCol","FlexRow","VeeqoText","Collection","ListItem"],"mappings":";;;;;;;;;;;;;;;;AAiBa,MAAA,eAAe,GAAG,CAAC,EAC9B,KAAK,EACL,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACa,MACrBA,qCAACC,2BAAO,EAAA,EAAC,SAAS,EAAEC,+BAAe,CAAC,CAACC,sBAAM,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,KAAM,KAAK,EAAA;AACzE,IAAAH,sBAAA,CAAA,aAAA,CAACI,0BAAM,EAAA,IAAA;AACL,QAAAJ,sBAAA,CAAA,aAAA,CAACK,eAAO,EAAA,EAAC,GAAG,EAAC,IAAI,EAAA;AACf,YAAAL,sBAAA,CAAA,aAAA,CAACM,eAAO,EAAA,IAAA;AACN,gBAAAN,sBAAA,CAAA,aAAA,CAACO,SAAS,EAAC,EAAA,OAAO,EAAC,MAAM,EAAA,EAAE,KAAK,CAAa;AAC5C,gBAAA,YAAY,CACL;YACT,IAAI,IAAIP,sBAAC,CAAA,aAAA,CAAAO,SAAS,EAAC,EAAA,OAAO,EAAC,UAAU,EAAE,EAAA,IAAI,CAAa,CACjD,CACH;IACR,QAAQ;IACR,KAAK,KACJP,sBAAC,CAAA,aAAA,CAAAQ,8BAAU,IAAC,KAAK,EAAE,KAAK,EAAA,EAAG,CAAC,IAAmB,KAAKR,sBAAC,CAAA,aAAA,CAAAS,iBAAQ,EAAK,EAAA,GAAA,IAAI,GAAI,CAAc,CACzF,CACO;;;;"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"ListItemSection.js","sources":["../../../../src/components/SelectDropdown/ListItemSection/ListItemSection.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport { Collection, Header, Section, SectionProps } from 'react-aria-components';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { FlexCol } from '../../Flex/FlexCol';\nimport { Text as VeeqoText } from '../../Text';\nimport { ListItemProps } from '../ListItem/types';\nimport { ListItem } from '../ListItem/ListItem';\nimport styles from './ListItemSection.module.scss';\nimport { buildClassnames } from '../../../utils';\n\nexport type ListItemSectionProps = Omit<SectionProps<ListItemProps>, 'items'> & {\n  label: string;\n  hint?: string;\n  itemInfoSlot?: ReactElement;\n  items?: ListItemProps[];\n};\n\nexport const ListItemSection = ({\n  label,\n  hint,\n  itemInfoSlot,\n  items,\n  children,\n  className,\n  ...props\n}: ListItemSectionProps) => (\n  <Section className={buildClassnames([styles.section, className])} {...props}>\n    <Header>\n      <FlexCol gap=\"xs\">\n        <FlexRow>\n          <VeeqoText variant=\"body\">{label}</VeeqoText>\n          {itemInfoSlot}\n        </FlexRow>\n        {hint && <VeeqoText variant=\"hintText\">{hint}</VeeqoText>}\n      </FlexCol>\n    </Header>\n    {children}\n    {items && (\n      <Collection items={items}>{(item: ListItemProps) => <ListItem {...item} />}</Collection>\n    )}\n  </Section>\n);\n"],"names":["React","VeeqoText"],"mappings":";;;;;;;;;;AAiBa,MAAA,eAAe,GAAG,CAAC,EAC9B,KAAK,EACL,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACa,MACrBA,6BAAC,OAAO,EAAA,EAAC,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,KAAM,KAAK,EAAA;AACzE,IAAAA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,IAAA;AACL,QAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,GAAG,EAAC,IAAI,EAAA;AACf,YAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,IAAA;AACN,gBAAAA,cAAA,CAAA,aAAA,CAACC,IAAS,EAAC,EAAA,OAAO,EAAC,MAAM,EAAA,EAAE,KAAK,CAAa;AAC5C,gBAAA,YAAY,CACL;YACT,IAAI,IAAID,cAAC,CAAA,aAAA,CAAAC,IAAS,EAAC,EAAA,OAAO,EAAC,UAAU,EAAE,EAAA,IAAI,CAAa,CACjD,CACH;IACR,QAAQ;IACR,KAAK,KACJD,cAAC,CAAA,aAAA,CAAA,UAAU,IAAC,KAAK,EAAE,KAAK,EAAA,EAAG,CAAC,IAAmB,KAAKA,cAAC,CAAA,aAAA,CAAA,QAAQ,EAAK,EAAA,GAAA,IAAI,GAAI,CAAc,CACzF,CACO;;;;"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"ListItemSection.module.scss.cjs","sources":["../../../../src/components/SelectDropdown/ListItemSection/ListItemSection.module.scss"],"sourcesContent":[".section {\n  border-radius: var(--sizes-base);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,6DAAA;;;;;"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"ListItemSection.module.scss.js","sources":["../../../../src/components/SelectDropdown/ListItemSection/ListItemSection.module.scss"],"sourcesContent":[".section {\n  border-radius: var(--sizes-base);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,6DAAA;;;;;"}