@veeqo/ui 9.6.1 → 9.6.3

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

@@ -0,0 +1,19 @@
+'use strict';
+
+var React = require('react');
+require('../../../hooks/useFocusVisible.cjs');
+var useId = require('../../../hooks/useId.cjs');
+var styled = require('./styled.cjs');
+var ListItemContent = require('./components/ListItemContent.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, ...props }) => {
+    const idComputed = useId.useId({ id, prefix: 'list-item' });
+    return (React__default.default.createElement(styled.StyledListItem, { id: idComputed, textValue: label, href: href, ...props }, ({ selectionMode, allowsDragging, isSelected }) => (React__default.default.createElement(ListItemContent.ListItemContent, { selectionMode: selectionMode, allowsDragging: allowsDragging, isSelected: isSelected, label: label, isLink: Boolean(href), ...props }))));
+};
+
+exports.ListItem = ListItem;
+//# sourceMappingURL=ListItem.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListItem.cjs","sources":["../../../../src/components/SelectDropdown/ListItem/ListItem.tsx"],"sourcesContent":["import React from 'react';\nimport { ListBoxItemRenderProps } from 'react-aria-components';\nimport { useId } from '../../../hooks';\nimport { StyledListItem } from './styled';\nimport { ListItemProps } from './types';\nimport { ListItemContent } from './components/ListItemContent';\n\nexport const ListItem = ({ id, label, href, ...props }: ListItemProps) => {\n  const idComputed = useId({ id, prefix: 'list-item' });\n  return (\n    <StyledListItem id={idComputed} textValue={label} href={href} {...props}>\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          {...props}\n        />\n      )}\n    </StyledListItem>\n  );\n};\n"],"names":["useId","React","StyledListItem","ListItemContent"],"mappings":";;;;;;;;;;;;AAOa,MAAA,QAAQ,GAAG,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,KAAK,EAAiB,KAAI;AACvE,IAAA,MAAM,UAAU,GAAGA,WAAK,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC;AACrD,IAAA,QACEC,sBAAA,CAAA,aAAA,CAACC,qBAAc,EAAA,EAAC,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAA,GAAM,KAAK,EAAA,EAEpE,CAAC,EAAE,aAAa,EAAE,cAAc,EAAE,UAAU,EAA0B,MACrED,sBAAC,CAAA,aAAA,CAAAE,+BAAe,EACd,EAAA,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,cAAc,EAC9B,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,OAAO,CAAC,IAAI,CAAC,EAAA,GACjB,KAAK,EAAA,CACT,CACH,CACc;AAErB;;;;"}

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

@@ -0,0 +1,13 @@
+import React__default from 'react';
+import '../../../hooks/useFocusVisible.js';
+import { useId } from '../../../hooks/useId.js';
+import { StyledListItem } from './styled.js';
+import { ListItemContent } from './components/ListItemContent.js';
+
+const ListItem = ({ id, label, href, ...props }) => {
+    const idComputed = useId({ id, prefix: 'list-item' });
+    return (React__default.createElement(StyledListItem, { id: idComputed, textValue: label, href: href, ...props }, ({ selectionMode, allowsDragging, isSelected }) => (React__default.createElement(ListItemContent, { selectionMode: selectionMode, allowsDragging: allowsDragging, isSelected: isSelected, label: label, isLink: Boolean(href), ...props }))));
+};
+
+export { ListItem };
+//# sourceMappingURL=ListItem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListItem.js","sources":["../../../../src/components/SelectDropdown/ListItem/ListItem.tsx"],"sourcesContent":["import React from 'react';\nimport { ListBoxItemRenderProps } from 'react-aria-components';\nimport { useId } from '../../../hooks';\nimport { StyledListItem } from './styled';\nimport { ListItemProps } from './types';\nimport { ListItemContent } from './components/ListItemContent';\n\nexport const ListItem = ({ id, label, href, ...props }: ListItemProps) => {\n  const idComputed = useId({ id, prefix: 'list-item' });\n  return (\n    <StyledListItem id={idComputed} textValue={label} href={href} {...props}>\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          {...props}\n        />\n      )}\n    </StyledListItem>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;AAOa,MAAA,QAAQ,GAAG,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,KAAK,EAAiB,KAAI;AACvE,IAAA,MAAM,UAAU,GAAG,KAAK,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC;AACrD,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,cAAc,EAAA,EAAC,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAA,GAAM,KAAK,EAAA,EAEpE,CAAC,EAAE,aAAa,EAAE,cAAc,EAAE,UAAU,EAA0B,MACrEA,cAAC,CAAA,aAAA,CAAA,eAAe,EACd,EAAA,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,cAAc,EAC9B,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,OAAO,CAAC,IAAI,CAAC,EAAA,GACjB,KAAK,EAAA,CACT,CACH,CACc;AAErB;;;;"}

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

@@ -0,0 +1,18 @@
+'use strict';
+
+var React = require('react');
+var ActiveCheckboxIcon = require('../../../../tempIcons/ActiveCheckboxIcon.cjs');
+var InactiveCheckboxIcon = require('../../../../tempIcons/InactiveCheckboxIcon.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const CheckboxIndicator = ({ checked, ...otherProps }) => {
+    if (checked)
+        return React__default.default.createElement(ActiveCheckboxIcon.ActiveCheckboxIcon, { ...otherProps });
+    return React__default.default.createElement(InactiveCheckboxIcon.InactiveCheckboxIcon, { ...otherProps });
+};
+
+exports.CheckboxIndicator = CheckboxIndicator;
+//# sourceMappingURL=CheckboxIndicator.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxIndicator.cjs","sources":["../../../../../src/components/SelectDropdown/ListItem/components/CheckboxIndicator.tsx"],"sourcesContent":["import React from 'react';\nimport { ActiveCheckboxIcon } from '../../../../tempIcons/ActiveCheckboxIcon';\nimport { InactiveCheckboxIcon } from '../../../../tempIcons/InactiveCheckboxIcon';\n\nexport const CheckboxIndicator = ({ checked, ...otherProps }: any) => {\n  if (checked) return <ActiveCheckboxIcon {...otherProps} />;\n\n  return <InactiveCheckboxIcon {...otherProps} />;\n};\n"],"names":["React","ActiveCheckboxIcon","InactiveCheckboxIcon"],"mappings":";;;;;;;;;;AAIO,MAAM,iBAAiB,GAAG,CAAC,EAAE,OAAO,EAAE,GAAG,UAAU,EAAO,KAAI;AACnE,IAAA,IAAI,OAAO;AAAE,QAAA,OAAOA,sBAAC,CAAA,aAAA,CAAAC,qCAAkB,EAAK,EAAA,GAAA,UAAU,GAAI;AAE1D,IAAA,OAAOD,sBAAC,CAAA,aAAA,CAAAE,yCAAoB,EAAK,EAAA,GAAA,UAAU,GAAI;AACjD;;;;"}

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

@@ -0,0 +1,12 @@
+import React__default from 'react';
+import { ActiveCheckboxIcon } from '../../../../tempIcons/ActiveCheckboxIcon.js';
+import { InactiveCheckboxIcon } from '../../../../tempIcons/InactiveCheckboxIcon.js';
+
+const CheckboxIndicator = ({ checked, ...otherProps }) => {
+    if (checked)
+        return React__default.createElement(ActiveCheckboxIcon, { ...otherProps });
+    return React__default.createElement(InactiveCheckboxIcon, { ...otherProps });
+};
+
+export { CheckboxIndicator };
+//# sourceMappingURL=CheckboxIndicator.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxIndicator.js","sources":["../../../../../src/components/SelectDropdown/ListItem/components/CheckboxIndicator.tsx"],"sourcesContent":["import React from 'react';\nimport { ActiveCheckboxIcon } from '../../../../tempIcons/ActiveCheckboxIcon';\nimport { InactiveCheckboxIcon } from '../../../../tempIcons/InactiveCheckboxIcon';\n\nexport const CheckboxIndicator = ({ checked, ...otherProps }: any) => {\n  if (checked) return <ActiveCheckboxIcon {...otherProps} />;\n\n  return <InactiveCheckboxIcon {...otherProps} />;\n};\n"],"names":["React"],"mappings":";;;;AAIO,MAAM,iBAAiB,GAAG,CAAC,EAAE,OAAO,EAAE,GAAG,UAAU,EAAO,KAAI;AACnE,IAAA,IAAI,OAAO;AAAE,QAAA,OAAOA,cAAC,CAAA,aAAA,CAAA,kBAAkB,EAAK,EAAA,GAAA,UAAU,GAAI;AAE1D,IAAA,OAAOA,cAAC,CAAA,aAAA,CAAA,oBAAoB,EAAK,EAAA,GAAA,UAAU,GAAI;AACjD;;;;"}

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

@@ -0,0 +1,33 @@
+'use strict';
+
+var React = require('react');
+var reactAriaComponents = require('react-aria-components');
+var DragIndicatorIcon = require('../../../../tempIcons/DragIndicatorIcon.cjs');
+var styled = require('../styled.cjs');
+var Text = require('../../../Text/Text.cjs');
+var Stack = require('../../../Stack/Stack.cjs');
+var MiniAlert = require('../../../Alerts/MiniAlert/MiniAlert.cjs');
+var SelectionType = require('./SelectionType.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, }) => (React__default.default.createElement(Stack.Stack, { direction: "horizontal", alignY: "center", alignX: "between" },
+    React__default.default.createElement(styled.HorizontalContainer, null,
+        allowsDragging && React__default.default.createElement(DragIndicatorIcon.DragIndicatorIcon, null),
+        React__default.default.createElement(SelectionType.SelectionType, { selectionMode: selectionMode, isSelected: isSelected, isLink: isLink }),
+        mediaSlot,
+        React__default.default.createElement(styled.VerticalContainer, null,
+            React__default.default.createElement(styled.InfoContainer, { hasItemInfoSlot: Boolean(itemInfoSlot), hasEndInfoSlot: Boolean(endInfoSlot), "data-testid": "info-container" },
+                React__default.default.createElement(reactAriaComponents.Text, { slot: "label" },
+                    React__default.default.createElement(Text.Text, { variant: "body" }, label)),
+                itemInfoSlot,
+                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(styled.LinkIcon, { "data-testid": "link-icon" })));
+
+exports.ListItemContent = ListItemContent;
+//# sourceMappingURL=ListItemContent.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemContent.cjs","sources":["../../../../../src/components/SelectDropdown/ListItem/components/ListItemContent.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from 'react-aria-components';\nimport { DragIndicatorIcon } from '../../../../tempIcons/DragIndicatorIcon';\nimport { ListItemContentProps } from './types';\nimport { HorizontalContainer, InfoContainer, LinkIcon, VerticalContainer } from '../styled';\nimport { Text as VeeqoText } from '../../../Text';\nimport { Stack } from '../../../Stack';\nimport { MiniAlert } from '../../../Alerts/MiniAlert';\nimport { SelectionType } from './SelectionType';\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  <Stack direction=\"horizontal\" alignY=\"center\" alignX=\"between\">\n    <HorizontalContainer>\n      {allowsDragging && <DragIndicatorIcon />}\n      <SelectionType selectionMode={selectionMode} isSelected={isSelected} isLink={isLink} />\n      {mediaSlot}\n      <VerticalContainer>\n        <InfoContainer\n          hasItemInfoSlot={Boolean(itemInfoSlot)}\n          hasEndInfoSlot={Boolean(endInfoSlot)}\n          data-testid=\"info-container\"\n        >\n          <Text slot=\"label\">\n            <VeeqoText variant=\"body\">{label}</VeeqoText>\n          </Text>\n          {itemInfoSlot}\n          {endInfoSlot}\n        </InfoContainer>\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      </VerticalContainer>\n    </HorizontalContainer>\n    {isLink && <LinkIcon data-testid=\"link-icon\" />}\n  </Stack>\n);\n"],"names":["React","Stack","HorizontalContainer","DragIndicatorIcon","SelectionType","VerticalContainer","InfoContainer","Text","VeeqoText","MiniAlert","LinkIcon"],"mappings":";;;;;;;;;;;;;;;MAUa,eAAe,GAAG,CAAC,EAC9B,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,GACG,MACrBA,sBAAA,CAAA,aAAA,CAACC,WAAK,EAAC,EAAA,SAAS,EAAC,YAAY,EAAC,MAAM,EAAC,QAAQ,EAAC,MAAM,EAAC,SAAS,EAAA;AAC5D,IAAAD,sBAAA,CAAA,aAAA,CAACE,0BAAmB,EAAA,IAAA;QACjB,cAAc,IAAIF,sBAAC,CAAA,aAAA,CAAAG,mCAAiB,EAAG,IAAA,CAAA;AACxC,QAAAH,sBAAA,CAAA,aAAA,CAACI,2BAAa,EAAA,EAAC,aAAa,EAAE,aAAa,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,EAAI,CAAA;QACtF,SAAS;AACV,QAAAJ,sBAAA,CAAA,aAAA,CAACK,wBAAiB,EAAA,IAAA;AAChB,YAAAL,sBAAA,CAAA,aAAA,CAACM,oBAAa,EACZ,EAAA,eAAe,EAAE,OAAO,CAAC,YAAY,CAAC,EACtC,cAAc,EAAE,OAAO,CAAC,WAAW,CAAC,iBACxB,gBAAgB,EAAA;AAE5B,gBAAAN,sBAAA,CAAA,aAAA,CAACO,wBAAI,EAAA,EAAC,IAAI,EAAC,OAAO,EAAA;oBAChBP,sBAAC,CAAA,aAAA,CAAAQ,SAAS,IAAC,OAAO,EAAC,MAAM,EAAE,EAAA,KAAK,CAAa,CACxC;gBACN,YAAY;AACZ,gBAAA,WAAW,CACE;AAEf,YAAA,IAAI,KACHR,sBAAA,CAAA,aAAA,CAACO,wBAAI,EAAC,EAAA,IAAI,EAAC,aAAa,EAAA;gBACtBP,sBAAC,CAAA,aAAA,CAAAQ,SAAS,IAAC,OAAO,EAAC,UAAU,EAAE,EAAA,IAAI,CAAa,CAC3C,CACR;AACA,YAAA,KAAK,IAAIR,sBAAC,CAAA,aAAA,CAAAS,mBAAS,EAAC,EAAA,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,EAAA,CAAI,CACjD,CACA;IACrB,MAAM,IAAIT,qCAACU,eAAQ,EAAA,EAAA,aAAA,EAAa,WAAW,EAAG,CAAA,CACzC;;;;"}

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

@@ -0,0 +1,27 @@
+import React__default from 'react';
+import { Text } from 'react-aria-components';
+import { DragIndicatorIcon } from '../../../../tempIcons/DragIndicatorIcon.js';
+import { HorizontalContainer, VerticalContainer, InfoContainer, LinkIcon } from '../styled.js';
+import { Text as Text$1 } from '../../../Text/Text.js';
+import { Stack } from '../../../Stack/Stack.js';
+import { MiniAlert } from '../../../Alerts/MiniAlert/MiniAlert.js';
+import { SelectionType } from './SelectionType.js';
+
+const ListItemContent = ({ label, hint, itemInfoSlot, endInfoSlot, alert, mediaSlot, allowsDragging = false, selectionMode = 'single', isLink, isSelected = false, }) => (React__default.createElement(Stack, { direction: "horizontal", alignY: "center", alignX: "between" },
+    React__default.createElement(HorizontalContainer, null,
+        allowsDragging && React__default.createElement(DragIndicatorIcon, null),
+        React__default.createElement(SelectionType, { selectionMode: selectionMode, isSelected: isSelected, isLink: isLink }),
+        mediaSlot,
+        React__default.createElement(VerticalContainer, null,
+            React__default.createElement(InfoContainer, { hasItemInfoSlot: Boolean(itemInfoSlot), hasEndInfoSlot: Boolean(endInfoSlot), "data-testid": "info-container" },
+                React__default.createElement(Text, { slot: "label" },
+                    React__default.createElement(Text$1, { variant: "body" }, label)),
+                itemInfoSlot,
+                endInfoSlot),
+            hint && (React__default.createElement(Text, { slot: "description" },
+                React__default.createElement(Text$1, { variant: "hintText" }, hint))),
+            alert && React__default.createElement(MiniAlert, { title: alert.title, variant: alert.variant }))),
+    isLink && React__default.createElement(LinkIcon, { "data-testid": "link-icon" })));
+
+export { ListItemContent };
+//# sourceMappingURL=ListItemContent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemContent.js","sources":["../../../../../src/components/SelectDropdown/ListItem/components/ListItemContent.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from 'react-aria-components';\nimport { DragIndicatorIcon } from '../../../../tempIcons/DragIndicatorIcon';\nimport { ListItemContentProps } from './types';\nimport { HorizontalContainer, InfoContainer, LinkIcon, VerticalContainer } from '../styled';\nimport { Text as VeeqoText } from '../../../Text';\nimport { Stack } from '../../../Stack';\nimport { MiniAlert } from '../../../Alerts/MiniAlert';\nimport { SelectionType } from './SelectionType';\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  <Stack direction=\"horizontal\" alignY=\"center\" alignX=\"between\">\n    <HorizontalContainer>\n      {allowsDragging && <DragIndicatorIcon />}\n      <SelectionType selectionMode={selectionMode} isSelected={isSelected} isLink={isLink} />\n      {mediaSlot}\n      <VerticalContainer>\n        <InfoContainer\n          hasItemInfoSlot={Boolean(itemInfoSlot)}\n          hasEndInfoSlot={Boolean(endInfoSlot)}\n          data-testid=\"info-container\"\n        >\n          <Text slot=\"label\">\n            <VeeqoText variant=\"body\">{label}</VeeqoText>\n          </Text>\n          {itemInfoSlot}\n          {endInfoSlot}\n        </InfoContainer>\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      </VerticalContainer>\n    </HorizontalContainer>\n    {isLink && <LinkIcon data-testid=\"link-icon\" />}\n  </Stack>\n);\n"],"names":["React","VeeqoText"],"mappings":";;;;;;;;;MAUa,eAAe,GAAG,CAAC,EAC9B,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,GACG,MACrBA,cAAA,CAAA,aAAA,CAAC,KAAK,EAAC,EAAA,SAAS,EAAC,YAAY,EAAC,MAAM,EAAC,QAAQ,EAAC,MAAM,EAAC,SAAS,EAAA;AAC5D,IAAAA,cAAA,CAAA,aAAA,CAAC,mBAAmB,EAAA,IAAA;QACjB,cAAc,IAAIA,cAAC,CAAA,aAAA,CAAA,iBAAiB,EAAG,IAAA,CAAA;AACxC,QAAAA,cAAA,CAAA,aAAA,CAAC,aAAa,EAAA,EAAC,aAAa,EAAE,aAAa,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,EAAI,CAAA;QACtF,SAAS;AACV,QAAAA,cAAA,CAAA,aAAA,CAAC,iBAAiB,EAAA,IAAA;AAChB,YAAAA,cAAA,CAAA,aAAA,CAAC,aAAa,EACZ,EAAA,eAAe,EAAE,OAAO,CAAC,YAAY,CAAC,EACtC,cAAc,EAAE,OAAO,CAAC,WAAW,CAAC,iBACxB,gBAAgB,EAAA;AAE5B,gBAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,OAAO,EAAA;oBAChBA,cAAC,CAAA,aAAA,CAAAC,MAAS,IAAC,OAAO,EAAC,MAAM,EAAE,EAAA,KAAK,CAAa,CACxC;gBACN,YAAY;AACZ,gBAAA,WAAW,CACE;AAEf,YAAA,IAAI,KACHD,cAAA,CAAA,aAAA,CAAC,IAAI,EAAC,EAAA,IAAI,EAAC,aAAa,EAAA;gBACtBA,cAAC,CAAA,aAAA,CAAAC,MAAS,IAAC,OAAO,EAAC,UAAU,EAAE,EAAA,IAAI,CAAa,CAC3C,CACR;AACA,YAAA,KAAK,IAAID,cAAC,CAAA,aAAA,CAAA,SAAS,EAAC,EAAA,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,EAAA,CAAI,CACjD,CACA;IACrB,MAAM,IAAIA,6BAAC,QAAQ,EAAA,EAAA,aAAA,EAAa,WAAW,EAAG,CAAA,CACzC;;;;"}

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

@@ -0,0 +1,18 @@
+'use strict';
+
+var React = require('react');
+var ActiveRadioIcon = require('../../../../tempIcons/ActiveRadioIcon.cjs');
+var InactiveRadioIcon = require('../../../../tempIcons/InactiveRadioIcon.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const RadioIndicator = ({ checked, ...otherProps }) => {
+    if (checked)
+        return React__default.default.createElement(ActiveRadioIcon.ActiveRadioIcon, { ...otherProps });
+    return React__default.default.createElement(InactiveRadioIcon.InactiveRadioIcon, { ...otherProps });
+};
+
+exports.RadioIndicator = RadioIndicator;
+//# sourceMappingURL=RadioIndicator.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RadioIndicator.cjs","sources":["../../../../../src/components/SelectDropdown/ListItem/components/RadioIndicator.tsx"],"sourcesContent":["import React from 'react';\nimport { ActiveRadioIcon } from '../../../../tempIcons/ActiveRadioIcon';\nimport { InactiveRadioIcon } from '../../../../tempIcons/InactiveRadioIcon';\n\nexport const RadioIndicator = ({ checked, ...otherProps }: any) => {\n  if (checked) return <ActiveRadioIcon {...otherProps} />;\n\n  return <InactiveRadioIcon {...otherProps} />;\n};\n"],"names":["React","ActiveRadioIcon","InactiveRadioIcon"],"mappings":";;;;;;;;;;AAIO,MAAM,cAAc,GAAG,CAAC,EAAE,OAAO,EAAE,GAAG,UAAU,EAAO,KAAI;AAChE,IAAA,IAAI,OAAO;AAAE,QAAA,OAAOA,sBAAC,CAAA,aAAA,CAAAC,+BAAe,EAAK,EAAA,GAAA,UAAU,GAAI;AAEvD,IAAA,OAAOD,sBAAC,CAAA,aAAA,CAAAE,mCAAiB,EAAK,EAAA,GAAA,UAAU,GAAI;AAC9C;;;;"}

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

@@ -0,0 +1,12 @@
+import React__default from 'react';
+import { ActiveRadioIcon } from '../../../../tempIcons/ActiveRadioIcon.js';
+import { InactiveRadioIcon } from '../../../../tempIcons/InactiveRadioIcon.js';
+
+const RadioIndicator = ({ checked, ...otherProps }) => {
+    if (checked)
+        return React__default.createElement(ActiveRadioIcon, { ...otherProps });
+    return React__default.createElement(InactiveRadioIcon, { ...otherProps });
+};
+
+export { RadioIndicator };
+//# sourceMappingURL=RadioIndicator.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RadioIndicator.js","sources":["../../../../../src/components/SelectDropdown/ListItem/components/RadioIndicator.tsx"],"sourcesContent":["import React from 'react';\nimport { ActiveRadioIcon } from '../../../../tempIcons/ActiveRadioIcon';\nimport { InactiveRadioIcon } from '../../../../tempIcons/InactiveRadioIcon';\n\nexport const RadioIndicator = ({ checked, ...otherProps }: any) => {\n  if (checked) return <ActiveRadioIcon {...otherProps} />;\n\n  return <InactiveRadioIcon {...otherProps} />;\n};\n"],"names":["React"],"mappings":";;;;AAIO,MAAM,cAAc,GAAG,CAAC,EAAE,OAAO,EAAE,GAAG,UAAU,EAAO,KAAI;AAChE,IAAA,IAAI,OAAO;AAAE,QAAA,OAAOA,cAAC,CAAA,aAAA,CAAA,eAAe,EAAK,EAAA,GAAA,UAAU,GAAI;AAEvD,IAAA,OAAOA,cAAC,CAAA,aAAA,CAAA,iBAAiB,EAAK,EAAA,GAAA,UAAU,GAAI;AAC9C;;;;"}

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

@@ -0,0 +1,20 @@
+'use strict';
+
+var React = require('react');
+var RadioIndicator = require('./RadioIndicator.cjs');
+var CheckboxIndicator = require('./CheckboxIndicator.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const SelectionType = ({ selectionMode, isSelected, isLink }) => {
+    if (isLink || selectionMode === 'none')
+        return null;
+    if (selectionMode === 'single')
+        return React__default.default.createElement(RadioIndicator.RadioIndicator, { checked: isSelected });
+    return React__default.default.createElement(CheckboxIndicator.CheckboxIndicator, { checked: isSelected });
+};
+
+exports.SelectionType = SelectionType;
+//# sourceMappingURL=SelectionType.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectionType.cjs","sources":["../../../../../src/components/SelectDropdown/ListItem/components/SelectionType.tsx"],"sourcesContent":["import React from 'react';\nimport { RadioIndicator } from './RadioIndicator';\nimport { CheckboxIndicator } from './CheckboxIndicator';\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 <RadioIndicator checked={isSelected} />;\n\n  return <CheckboxIndicator checked={isSelected} />;\n};\n"],"names":["React","RadioIndicator","CheckboxIndicator"],"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,qCAACC,6BAAc,EAAA,EAAC,OAAO,EAAE,UAAU,GAAI;AAE9E,IAAA,OAAOD,qCAACE,mCAAiB,EAAA,EAAC,OAAO,EAAE,UAAU,GAAI;AACnD;;;;"}

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

@@ -0,0 +1,14 @@
+import React__default from 'react';
+import { RadioIndicator } from './RadioIndicator.js';
+import { CheckboxIndicator } from './CheckboxIndicator.js';
+
+const SelectionType = ({ selectionMode, isSelected, isLink }) => {
+    if (isLink || selectionMode === 'none')
+        return null;
+    if (selectionMode === 'single')
+        return React__default.createElement(RadioIndicator, { checked: isSelected });
+    return React__default.createElement(CheckboxIndicator, { checked: isSelected });
+};
+
+export { SelectionType };
+//# sourceMappingURL=SelectionType.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectionType.js","sources":["../../../../../src/components/SelectDropdown/ListItem/components/SelectionType.tsx"],"sourcesContent":["import React from 'react';\nimport { RadioIndicator } from './RadioIndicator';\nimport { CheckboxIndicator } from './CheckboxIndicator';\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 <RadioIndicator checked={isSelected} />;\n\n  return <CheckboxIndicator checked={isSelected} />;\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,6BAAC,cAAc,EAAA,EAAC,OAAO,EAAE,UAAU,GAAI;AAE9E,IAAA,OAAOA,6BAAC,iBAAiB,EAAA,EAAC,OAAO,EAAE,UAAU,GAAI;AACnD;;;;"}

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

@@ -0,0 +1,40 @@
+'use strict';
+
+var styled = require('styled-components');
+var index = require('../../../theme/index.cjs');
+var reactAriaComponents = require('react-aria-components');
+var ArrowUpIcon = require('../../../tempIcons/ArrowUpIcon.cjs');
+var Stack = require('../../Stack/Stack.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+
+const colourStatesMap = {
+    hovered: '#F0F7FC',
+    pressed: '#E3F0FA',
+    disabled: index.theme.colors.neutral.grey.light,
+};
+const StyledListItem = styled__default.default(reactAriaComponents.ListBoxItem).withConfig({ displayName: "vui--StyledListItem", componentId: "vui--16fm0j" }) `border-radius:${index.theme.radius.base};cursor:pointer;background-color:${({ appearance = 'primary' }) => appearance === 'primary' ? 'white' : index.theme.colors.neutral.grey.lightest};text-decoration:none;&[data-hovered] > div{background-color:${colourStatesMap.hovered};}&[data-pressed] > div{background-color:${colourStatesMap.pressed};}&[data-focused]{outline:0;}&[data-focus-visible] > div{outline:solid ${index.theme.sizes.xs} ${index.theme.colors.secondary.blue.light};z-index:1;position:relative;}&[data-dragging]{background-color:${index.theme.colors.neutral.grey.base};border-color:${index.theme.colors.secondary.blue.base};}&[data-drop-target]{background-color:${index.theme.colors.secondary.green.base};border-color:${index.theme.colors.secondary.green.base};}&[data-disabled]{cursor:not-allowed;background-color:${colourStatesMap.disabled};opacity:0.75;}& > div{padding:${index.theme.sizes.sm};border-radius:${index.theme.radius.base};}`;
+styled__default.default(reactAriaComponents.ListBox).withConfig({ displayName: "vui--StyledListBox", componentId: "vui--6npxd" }) `.react-aria-DropIndicator[data-drop-target]{outline:2px solid ${index.theme.colors.secondary.blue.base};}width:100%;`;
+const LinkIcon = styled__default.default(ArrowUpIcon.ArrowUpIcon).attrs({
+    width: index.theme.sizes.md,
+    height: index.theme.sizes.md,
+}).withConfig({ displayName: "vui--LinkIcon", componentId: "vui--14ybt8l" }) `transform:rotate(90deg);color:${index.theme.colors.neutral.ink.base};`;
+const HorizontalContainer = styled__default.default(Stack.Stack).attrs({
+    direction: 'horizontal',
+    alignY: 'center',
+}).withConfig({ displayName: "vui--HorizontalContainer", componentId: "vui--11udtca" }) `width:100%;`;
+const VerticalContainer = styled__default.default(Stack.Stack).attrs({
+    spacing: 'xs',
+}).withConfig({ displayName: "vui--VerticalContainer", componentId: "vui--1tl5q7x" }) `width:100%;`;
+const InfoContainer = styled__default.default.div.withConfig({ displayName: "vui--InfoContainer", componentId: "vui--i2xz7h" }) `display:grid;grid-template-columns:${({ hasItemInfoSlot, hasEndInfoSlot }) => hasItemInfoSlot && hasEndInfoSlot ? 'auto 1fr 1fr' : 'auto 1fr'};gap:${index.theme.sizes.sm};width:100%;align-items:center;min-width:0;flex:1;> *:last-child{justify-self:${({ hasEndInfoSlot }) => (hasEndInfoSlot ? 'end' : 'start')};}`;
+const ItemInfoContainer = styled__default.default.div.withConfig({ displayName: "vui--ItemInfoContainer", componentId: "vui--1gj2fqj" }) `display:flex;flex-direction:row;gap:8px;align-items:center;`;
+
+exports.HorizontalContainer = HorizontalContainer;
+exports.InfoContainer = InfoContainer;
+exports.ItemInfoContainer = ItemInfoContainer;
+exports.LinkIcon = LinkIcon;
+exports.StyledListItem = StyledListItem;
+exports.VerticalContainer = VerticalContainer;
+//# sourceMappingURL=styled.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styled.cjs","sources":["../../../../src/components/SelectDropdown/ListItem/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from 'Theme';\nimport { ListBox, ListBoxItem } from 'react-aria-components';\nimport { ArrowUpIcon } from '../../../tempIcons/ArrowUpIcon';\nimport { Stack } from '../../Stack';\n\nconst colourStatesMap = {\n  hovered: '#F0F7FC',\n  pressed: '#E3F0FA',\n  disabled: theme.colors.neutral.grey.light,\n};\n\nexport const StyledListItem = styled(ListBoxItem)<{\n  appearance?: 'primary' | 'secondary';\n}>`\n  border-radius: ${theme.radius.base};\n  cursor: pointer;\n  background-color: ${({ appearance = 'primary' }) =>\n    appearance === 'primary' ? 'white' : theme.colors.neutral.grey.lightest};\n  text-decoration: none;\n\n  &[data-hovered] > div {\n    background-color: ${colourStatesMap.hovered};\n  }\n\n  &[data-pressed] > div {\n    background-color: ${colourStatesMap.pressed};\n  }\n\n  &[data-focused] {\n    outline: 0;\n  }\n\n  &[data-focus-visible] > div {\n    outline: solid ${theme.sizes.xs} ${theme.colors.secondary.blue.light};\n    z-index: 1;\n    position: relative;\n  }\n\n  &[data-dragging] {\n    background-color: ${theme.colors.neutral.grey.base};\n    border-color: ${theme.colors.secondary.blue.base};\n  }\n  &[data-drop-target] {\n    background-color: ${theme.colors.secondary.green.base};\n    border-color: ${theme.colors.secondary.green.base};\n  }\n\n  &[data-disabled] {\n    cursor: not-allowed;\n    background-color: ${colourStatesMap.disabled};\n    opacity: 0.75;\n  }\n\n  & > div {\n    padding: ${theme.sizes.sm};\n    border-radius: ${theme.radius.base};\n  }\n`;\n\nexport const StyledListBox = styled(ListBox)`\n  .react-aria-DropIndicator[data-drop-target] {\n    outline: 2px solid ${theme.colors.secondary.blue.base};\n  }\n\n  width: 100%;\n`;\n\nexport const LinkIcon = styled(ArrowUpIcon).attrs({\n  width: theme.sizes.md,\n  height: theme.sizes.md,\n})`\n  transform: rotate(90deg);\n  color: ${theme.colors.neutral.ink.base};\n`;\n\nexport const HorizontalContainer = styled(Stack).attrs({\n  direction: 'horizontal',\n  alignY: 'center',\n})`\n  width: 100%;\n`;\n\nexport const VerticalContainer = styled(Stack).attrs({\n  spacing: 'xs',\n})`\n  width: 100%;\n`;\n\nexport const InfoContainer = styled.div<{\n  hasItemInfoSlot: boolean;\n  hasEndInfoSlot: boolean;\n}>`\n  display: grid;\n  grid-template-columns: ${({ hasItemInfoSlot, hasEndInfoSlot }) =>\n    hasItemInfoSlot && hasEndInfoSlot ? 'auto 1fr 1fr' : 'auto 1fr'};\n  gap: ${theme.sizes.sm};\n  width: 100%;\n  align-items: center;\n  min-width: 0;\n  flex: 1;\n\n  > *:last-child {\n    justify-self: ${({ hasEndInfoSlot }) => (hasEndInfoSlot ? 'end' : 'start')};\n  }\n`;\n\nexport const ItemInfoContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n  align-items: center;\n`;\n"],"names":["theme","styled","ListBoxItem","ListBox","ArrowUpIcon","Stack"],"mappings":"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"}

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

@@ -0,0 +1,29 @@
+import styled from 'styled-components';
+import { theme } from '../../../theme/index.js';
+import { ListBoxItem, ListBox } from 'react-aria-components';
+import { ArrowUpIcon } from '../../../tempIcons/ArrowUpIcon.js';
+import { Stack } from '../../Stack/Stack.js';
+
+const colourStatesMap = {
+    hovered: '#F0F7FC',
+    pressed: '#E3F0FA',
+    disabled: theme.colors.neutral.grey.light,
+};
+const StyledListItem = styled(ListBoxItem).withConfig({ displayName: "vui--StyledListItem", componentId: "vui--16fm0j" }) `border-radius:${theme.radius.base};cursor:pointer;background-color:${({ appearance = 'primary' }) => appearance === 'primary' ? 'white' : theme.colors.neutral.grey.lightest};text-decoration:none;&[data-hovered] > div{background-color:${colourStatesMap.hovered};}&[data-pressed] > div{background-color:${colourStatesMap.pressed};}&[data-focused]{outline:0;}&[data-focus-visible] > div{outline:solid ${theme.sizes.xs} ${theme.colors.secondary.blue.light};z-index:1;position:relative;}&[data-dragging]{background-color:${theme.colors.neutral.grey.base};border-color:${theme.colors.secondary.blue.base};}&[data-drop-target]{background-color:${theme.colors.secondary.green.base};border-color:${theme.colors.secondary.green.base};}&[data-disabled]{cursor:not-allowed;background-color:${colourStatesMap.disabled};opacity:0.75;}& > div{padding:${theme.sizes.sm};border-radius:${theme.radius.base};}`;
+styled(ListBox).withConfig({ displayName: "vui--StyledListBox", componentId: "vui--6npxd" }) `.react-aria-DropIndicator[data-drop-target]{outline:2px solid ${theme.colors.secondary.blue.base};}width:100%;`;
+const LinkIcon = styled(ArrowUpIcon).attrs({
+    width: theme.sizes.md,
+    height: theme.sizes.md,
+}).withConfig({ displayName: "vui--LinkIcon", componentId: "vui--14ybt8l" }) `transform:rotate(90deg);color:${theme.colors.neutral.ink.base};`;
+const HorizontalContainer = styled(Stack).attrs({
+    direction: 'horizontal',
+    alignY: 'center',
+}).withConfig({ displayName: "vui--HorizontalContainer", componentId: "vui--11udtca" }) `width:100%;`;
+const VerticalContainer = styled(Stack).attrs({
+    spacing: 'xs',
+}).withConfig({ displayName: "vui--VerticalContainer", componentId: "vui--1tl5q7x" }) `width:100%;`;
+const InfoContainer = styled.div.withConfig({ displayName: "vui--InfoContainer", componentId: "vui--i2xz7h" }) `display:grid;grid-template-columns:${({ hasItemInfoSlot, hasEndInfoSlot }) => hasItemInfoSlot && hasEndInfoSlot ? 'auto 1fr 1fr' : 'auto 1fr'};gap:${theme.sizes.sm};width:100%;align-items:center;min-width:0;flex:1;> *:last-child{justify-self:${({ hasEndInfoSlot }) => (hasEndInfoSlot ? 'end' : 'start')};}`;
+const ItemInfoContainer = styled.div.withConfig({ displayName: "vui--ItemInfoContainer", componentId: "vui--1gj2fqj" }) `display:flex;flex-direction:row;gap:8px;align-items:center;`;
+
+export { HorizontalContainer, InfoContainer, ItemInfoContainer, LinkIcon, StyledListItem, VerticalContainer };
+//# sourceMappingURL=styled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","sources":["../../../../src/components/SelectDropdown/ListItem/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from 'Theme';\nimport { ListBox, ListBoxItem } from 'react-aria-components';\nimport { ArrowUpIcon } from '../../../tempIcons/ArrowUpIcon';\nimport { Stack } from '../../Stack';\n\nconst colourStatesMap = {\n  hovered: '#F0F7FC',\n  pressed: '#E3F0FA',\n  disabled: theme.colors.neutral.grey.light,\n};\n\nexport const StyledListItem = styled(ListBoxItem)<{\n  appearance?: 'primary' | 'secondary';\n}>`\n  border-radius: ${theme.radius.base};\n  cursor: pointer;\n  background-color: ${({ appearance = 'primary' }) =>\n    appearance === 'primary' ? 'white' : theme.colors.neutral.grey.lightest};\n  text-decoration: none;\n\n  &[data-hovered] > div {\n    background-color: ${colourStatesMap.hovered};\n  }\n\n  &[data-pressed] > div {\n    background-color: ${colourStatesMap.pressed};\n  }\n\n  &[data-focused] {\n    outline: 0;\n  }\n\n  &[data-focus-visible] > div {\n    outline: solid ${theme.sizes.xs} ${theme.colors.secondary.blue.light};\n    z-index: 1;\n    position: relative;\n  }\n\n  &[data-dragging] {\n    background-color: ${theme.colors.neutral.grey.base};\n    border-color: ${theme.colors.secondary.blue.base};\n  }\n  &[data-drop-target] {\n    background-color: ${theme.colors.secondary.green.base};\n    border-color: ${theme.colors.secondary.green.base};\n  }\n\n  &[data-disabled] {\n    cursor: not-allowed;\n    background-color: ${colourStatesMap.disabled};\n    opacity: 0.75;\n  }\n\n  & > div {\n    padding: ${theme.sizes.sm};\n    border-radius: ${theme.radius.base};\n  }\n`;\n\nexport const StyledListBox = styled(ListBox)`\n  .react-aria-DropIndicator[data-drop-target] {\n    outline: 2px solid ${theme.colors.secondary.blue.base};\n  }\n\n  width: 100%;\n`;\n\nexport const LinkIcon = styled(ArrowUpIcon).attrs({\n  width: theme.sizes.md,\n  height: theme.sizes.md,\n})`\n  transform: rotate(90deg);\n  color: ${theme.colors.neutral.ink.base};\n`;\n\nexport const HorizontalContainer = styled(Stack).attrs({\n  direction: 'horizontal',\n  alignY: 'center',\n})`\n  width: 100%;\n`;\n\nexport const VerticalContainer = styled(Stack).attrs({\n  spacing: 'xs',\n})`\n  width: 100%;\n`;\n\nexport const InfoContainer = styled.div<{\n  hasItemInfoSlot: boolean;\n  hasEndInfoSlot: boolean;\n}>`\n  display: grid;\n  grid-template-columns: ${({ hasItemInfoSlot, hasEndInfoSlot }) =>\n    hasItemInfoSlot && hasEndInfoSlot ? 'auto 1fr 1fr' : 'auto 1fr'};\n  gap: ${theme.sizes.sm};\n  width: 100%;\n  align-items: center;\n  min-width: 0;\n  flex: 1;\n\n  > *:last-child {\n    justify-self: ${({ hasEndInfoSlot }) => (hasEndInfoSlot ? 'end' : 'start')};\n  }\n`;\n\nexport const ItemInfoContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n  align-items: center;\n`;\n"],"names":[],"mappings":";;;;;;AAMA,MAAM,eAAe,GAAG;AACtB,IAAA,OAAO,EAAE,SAAS;AAClB,IAAA,OAAO,EAAE,SAAS;IAClB,QAAQ,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK;CAC1C;AAEM,MAAM,cAAc,GAAG,MAAM,CAAC,WAAW,CAAC,CAG9B,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,cAAA,EAAA,KAAK,CAAC,MAAM,CAAC,IAAI,CAEd,iCAAA,EAAA,CAAC,EAAE,UAAU,GAAG,SAAS,EAAE,KAC7C,UAAU,KAAK,SAAS,GAAG,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAA,6DAAA,EAInD,eAAe,CAAC,OAAO,CAAA,yCAAA,EAIvB,eAAe,CAAC,OAAO,CAAA,uEAAA,EAQ1B,KAAK,CAAC,KAAK,CAAC,EAAE,CAAA,CAAA,EAAI,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAA,gEAAA,EAMhD,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,cAAA,EAClC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,uCAAA,EAG5B,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAA,cAAA,EACrC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAA,uDAAA,EAK7B,eAAe,CAAC,QAAQ,CAAA,+BAAA,EAKjC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAA,eAAA,EACR,KAAK,CAAC,MAAM,CAAC,IAAI,CAAA,EAAA;AAIT,MAAM,CAAC,OAAO,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,YAAA,EAAA,CAAA,CAAA,CAAA,8DAAA,EAEnB,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI;AAM5C,MAAA,QAAQ,GAAG,MAAM,CAAC,WAAW,CAAC,CAAC,KAAK,CAAC;AAChD,IAAA,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,EAAE;AACrB,IAAA,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,EAAE;CACvB,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,8BAAA,EAES,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA,CAAA;AAG3B,MAAA,mBAAmB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC;AACrD,IAAA,SAAS,EAAE,YAAY;AACvB,IAAA,MAAM,EAAE,QAAQ;AACjB,CAAA,CAAC;AAIW,MAAA,iBAAiB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC;AACnD,IAAA,OAAO,EAAE,IAAI;AACd,CAAA,CAAC;AAIW,MAAA,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,mCAAA,EAKZ,CAAC,EAAE,eAAe,EAAE,cAAc,EAAE,KAC3D,eAAe,IAAI,cAAc,GAAG,cAAc,GAAG,UAAU,CAC1D,KAAA,EAAA,KAAK,CAAC,KAAK,CAAC,EAAE,iFAOH,CAAC,EAAE,cAAc,EAAE,MAAM,cAAc,GAAG,KAAK,GAAG,OAAO,CAAC,CAAA,EAAA;MAIjE,iBAAiB,GAAG,MAAM,CAAC,GAAG;;;;"}

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

@@ -0,0 +1,25 @@
+'use strict';
+
+var React = require('react');
+var reactAriaComponents = require('react-aria-components');
+var Stack = require('../../Stack/Stack.cjs');
+var Text = require('../../Text/Text.cjs');
+var styled = require('./styled.cjs');
+var ListItem = require('../ListItem/ListItem.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const ListItemSection = ({ label, hint, itemInfoSlot, items, children, ...props }) => (React__default.default.createElement(styled.StyledSection, { ...props },
+    React__default.default.createElement(reactAriaComponents.Header, null,
+        React__default.default.createElement(Stack.Stack, { spacing: "xs" },
+            React__default.default.createElement(styled.InfoContainer, null,
+                React__default.default.createElement(Text.Text, { variant: "body" }, label),
+                itemInfoSlot),
+            hint && React__default.default.createElement(Text.Text, { variant: "hintText" }, hint))),
+    children,
+    items && (React__default.default.createElement(reactAriaComponents.Collection, { items: items }, (item) => React__default.default.createElement(ListItem.ListItem, { ...item })))));
+
+exports.ListItemSection = ListItemSection;
+//# sourceMappingURL=ListItemSection.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemSection.cjs","sources":["../../../../src/components/SelectDropdown/ListItemSection/ListItemSection.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport { Collection, Header, SectionProps } from 'react-aria-components';\nimport { Stack } from '../../Stack';\nimport { Text as VeeqoText } from '../../Text';\nimport { InfoContainer, StyledSection } from './styled';\nimport { ListItemProps } from '../ListItem/types';\nimport { ListItem } from '../ListItem/ListItem';\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  ...props\n}: ListItemSectionProps) => (\n  <StyledSection {...props}>\n    <Header>\n      <Stack spacing=\"xs\">\n        <InfoContainer>\n          <VeeqoText variant=\"body\">{label}</VeeqoText>\n          {itemInfoSlot}\n        </InfoContainer>\n        {hint && <VeeqoText variant=\"hintText\">{hint}</VeeqoText>}\n      </Stack>\n    </Header>\n    {children}\n    {items && (\n      <Collection items={items}>{(item: ListItemProps) => <ListItem {...item} />}</Collection>\n    )}\n  </StyledSection>\n);\n"],"names":["React","StyledSection","Header","Stack","InfoContainer","VeeqoText","Collection","ListItem"],"mappings":";;;;;;;;;;;;;AAea,MAAA,eAAe,GAAG,CAAC,EAC9B,KAAK,EACL,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACa,MACrBA,sBAAA,CAAA,aAAA,CAACC,oBAAa,EAAA,EAAA,GAAK,KAAK,EAAA;AACtB,IAAAD,sBAAA,CAAA,aAAA,CAACE,0BAAM,EAAA,IAAA;AACL,QAAAF,sBAAA,CAAA,aAAA,CAACG,WAAK,EAAA,EAAC,OAAO,EAAC,IAAI,EAAA;AACjB,YAAAH,sBAAA,CAAA,aAAA,CAACI,oBAAa,EAAA,IAAA;AACZ,gBAAAJ,sBAAA,CAAA,aAAA,CAACK,SAAS,EAAC,EAAA,OAAO,EAAC,MAAM,EAAA,EAAE,KAAK,CAAa;AAC5C,gBAAA,YAAY,CACC;YACf,IAAI,IAAIL,sBAAC,CAAA,aAAA,CAAAK,SAAS,EAAC,EAAA,OAAO,EAAC,UAAU,EAAE,EAAA,IAAI,CAAa,CACnD,CACD;IACR,QAAQ;IACR,KAAK,KACJL,sBAAC,CAAA,aAAA,CAAAM,8BAAU,IAAC,KAAK,EAAE,KAAK,EAAA,EAAG,CAAC,IAAmB,KAAKN,sBAAC,CAAA,aAAA,CAAAO,iBAAQ,EAAK,EAAA,GAAA,IAAI,GAAI,CAAc,CACzF,CACa;;;;"}

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

@@ -0,0 +1,19 @@
+import React__default from 'react';
+import { Header, Collection } from 'react-aria-components';
+import { Stack } from '../../Stack/Stack.js';
+import { Text } from '../../Text/Text.js';
+import { StyledSection, InfoContainer } from './styled.js';
+import { ListItem } from '../ListItem/ListItem.js';
+
+const ListItemSection = ({ label, hint, itemInfoSlot, items, children, ...props }) => (React__default.createElement(StyledSection, { ...props },
+    React__default.createElement(Header, null,
+        React__default.createElement(Stack, { spacing: "xs" },
+            React__default.createElement(InfoContainer, null,
+                React__default.createElement(Text, { variant: "body" }, label),
+                itemInfoSlot),
+            hint && React__default.createElement(Text, { variant: "hintText" }, hint))),
+    children,
+    items && (React__default.createElement(Collection, { items: items }, (item) => React__default.createElement(ListItem, { ...item })))));
+
+export { ListItemSection };
+//# sourceMappingURL=ListItemSection.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemSection.js","sources":["../../../../src/components/SelectDropdown/ListItemSection/ListItemSection.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport { Collection, Header, SectionProps } from 'react-aria-components';\nimport { Stack } from '../../Stack';\nimport { Text as VeeqoText } from '../../Text';\nimport { InfoContainer, StyledSection } from './styled';\nimport { ListItemProps } from '../ListItem/types';\nimport { ListItem } from '../ListItem/ListItem';\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  ...props\n}: ListItemSectionProps) => (\n  <StyledSection {...props}>\n    <Header>\n      <Stack spacing=\"xs\">\n        <InfoContainer>\n          <VeeqoText variant=\"body\">{label}</VeeqoText>\n          {itemInfoSlot}\n        </InfoContainer>\n        {hint && <VeeqoText variant=\"hintText\">{hint}</VeeqoText>}\n      </Stack>\n    </Header>\n    {children}\n    {items && (\n      <Collection items={items}>{(item: ListItemProps) => <ListItem {...item} />}</Collection>\n    )}\n  </StyledSection>\n);\n"],"names":["React","VeeqoText"],"mappings":";;;;;;;AAea,MAAA,eAAe,GAAG,CAAC,EAC9B,KAAK,EACL,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACa,MACrBA,cAAA,CAAA,aAAA,CAAC,aAAa,EAAA,EAAA,GAAK,KAAK,EAAA;AACtB,IAAAA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,IAAA;AACL,QAAAA,cAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,OAAO,EAAC,IAAI,EAAA;AACjB,YAAAA,cAAA,CAAA,aAAA,CAAC,aAAa,EAAA,IAAA;AACZ,gBAAAA,cAAA,CAAA,aAAA,CAACC,IAAS,EAAC,EAAA,OAAO,EAAC,MAAM,EAAA,EAAE,KAAK,CAAa;AAC5C,gBAAA,YAAY,CACC;YACf,IAAI,IAAID,cAAC,CAAA,aAAA,CAAAC,IAAS,EAAC,EAAA,OAAO,EAAC,UAAU,EAAE,EAAA,IAAI,CAAa,CACnD,CACD;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,CACa;;;;"}

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

@@ -0,0 +1,16 @@
+'use strict';
+
+var reactAriaComponents = require('react-aria-components');
+var styled = require('styled-components');
+var index = require('../../../theme/index.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+
+const InfoContainer = styled__default.default.div.withConfig({ displayName: "vui--InfoContainer", componentId: "vui--1q1w6zs" }) `display:flex;flex-direction:row;align-items:center;gap:${index.theme.sizes.sm};`;
+const StyledSection = styled__default.default(reactAriaComponents.Section).withConfig({ displayName: "vui--StyledSection", componentId: "vui--6na2yk" }) `border-radius:${index.theme.sizes.base};`;
+
+exports.InfoContainer = InfoContainer;
+exports.StyledSection = StyledSection;
+//# sourceMappingURL=styled.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styled.cjs","sources":["../../../../src/components/SelectDropdown/ListItemSection/styled.ts"],"sourcesContent":["import { Section } from 'react-aria-components';\nimport styled from 'styled-components';\nimport { theme } from 'Theme';\n\nexport const InfoContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: ${theme.sizes.sm};\n`;\n\nexport const StyledSection = styled(Section)`\n  border-radius: ${theme.sizes.base};\n`;\n"],"names":["styled","theme","Section"],"mappings":";;;;;;;;;;AAIO,MAAM,aAAa,GAAGA,uBAAM,CAAC,GAAG,CAI9B,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,uDAAA,EAAAC,WAAK,CAAC,KAAK,CAAC,EAAE;AAGhB,MAAM,aAAa,GAAGD,uBAAM,CAACE,2BAAO,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,cAAA,EACzBD,WAAK,CAAC,KAAK,CAAC,IAAI;;;;;"}

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

@@ -0,0 +1,9 @@
+import { Section } from 'react-aria-components';
+import styled from 'styled-components';
+import { theme } from '../../../theme/index.js';
+
+const InfoContainer = styled.div.withConfig({ displayName: "vui--InfoContainer", componentId: "vui--1q1w6zs" }) `display:flex;flex-direction:row;align-items:center;gap:${theme.sizes.sm};`;
+const StyledSection = styled(Section).withConfig({ displayName: "vui--StyledSection", componentId: "vui--6na2yk" }) `border-radius:${theme.sizes.base};`;
+
+export { InfoContainer, StyledSection };
+//# sourceMappingURL=styled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","sources":["../../../../src/components/SelectDropdown/ListItemSection/styled.ts"],"sourcesContent":["import { Section } from 'react-aria-components';\nimport styled from 'styled-components';\nimport { theme } from 'Theme';\n\nexport const InfoContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: ${theme.sizes.sm};\n`;\n\nexport const StyledSection = styled(Section)`\n  border-radius: ${theme.sizes.base};\n`;\n"],"names":[],"mappings":";;;;AAIO,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAI9B,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,uDAAA,EAAA,KAAK,CAAC,KAAK,CAAC,EAAE;AAGhB,MAAM,aAAa,GAAG,MAAM,CAAC,OAAO,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,cAAA,EACzB,KAAK,CAAC,KAAK,CAAC,IAAI;;;;"}

package/dist/components/SelectDropdown/SelectDropdown.cjs

@@ -0,0 +1,48 @@
+'use strict';
+
+var React = require('react');
+var buildClassnames = require('../../utils/buildClassnames.cjs');
+require('uid/secure');
+var SelectedOption = require('./components/SelectedOption.cjs');
+var utils = require('./utils.cjs');
+var styled = require('./styled.cjs');
+var ListItemSection = require('./ListItemSection/ListItemSection.cjs');
+var ListItem = require('./ListItem/ListItem.cjs');
+var SelectDropdownState = require('./components/SelectDropdownState.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const SelectDropdown = ({ id, className, placeholder = 'Select item', multiple = false, compact = false, hasError = false, options, value, actions, isLoading = false, searchValue, emptyStateSlot, onSearchChange, onChange, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, ...otherProps }) => {
+    const hasSection = options.flatMap((option) => option).some((item) => 'items' in item);
+    const classNames = utils.generateClassNames(className);
+    const [isSelectOpen, setIsSelectOpen] = React.useState(false);
+    const [selectedValues, setSelectedValues] = React.useState(utils.getValuesFromKeys(options, hasSection, value));
+    const selectionMode = multiple ? 'multiple' : 'single';
+    const onSelectionChange = React.useCallback((keys) => {
+        const selectedKeys = Array.from(keys);
+        const newSelectedValues = utils.getValuesFromKeys(options, hasSection, selectedKeys);
+        setSelectedValues(newSelectedValues);
+        onChange(newSelectedValues);
+        if (multiple)
+            return;
+        setIsSelectOpen(false);
+    }, [options, hasSection, onChange, multiple]);
+    return (React__default.default.createElement(styled.StyledDropdown, { id: `select-dropdown-${id}`, className: buildClassnames.buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.popover, className]), shouldShow: isSelectOpen, setShouldShow: setIsSelectOpen, useAnchorWidth: true, hasError: hasError, ctaProps: {
+            className: buildClassnames.buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.button, className]),
+            children: (React__default.default.createElement(SelectedOption.SelectedOption, { placeholder: placeholder, options: selectedValues, selectionMode: selectionMode })),
+            size: compact ? 'sm' : 'base',
+            variant: hasError ? 'destructive' : 'default',
+        } },
+        onSearchChange && (React__default.default.createElement(React__default.default.Fragment, null,
+            React__default.default.createElement(styled.StyledSearch, { value: searchValue, onChange: onSearchChange }),
+            React__default.default.createElement(styled.Separator, null))),
+        React__default.default.createElement(styled.StyledListBox, { className: buildClassnames.buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.optionsContainer, className]), "aria-labelledby": ariaLabelledBy !== null && ariaLabelledBy !== undefined ? ariaLabelledBy : `${id}-label`, "aria-describedby": ariaDescribedBy !== null && ariaDescribedBy !== undefined ? ariaDescribedBy : `${id}-hint`, selectionMode: selectionMode, items: options, onSelectionChange: onSelectionChange, selectedKeys: selectedValues.map((selectedValue) => selectedValue.id), renderEmptyState: () => (React__default.default.createElement(SelectDropdownState.SelectDropdownState, { isLoading: isLoading, emptyStateSlot: emptyStateSlot })), ...otherProps }, (item) => hasSection ? (React__default.default.createElement(ListItemSection.ListItemSection, { ...item })) : (React__default.default.createElement(ListItem.ListItem, { ...item }))), actions === null || actions === undefined ? undefined :
+        actions.map(({ label, ...props }) => (React__default.default.createElement(React__default.default.Fragment, null,
+            React__default.default.createElement(styled.Separator, { key: `seperator-${label}` }),
+            React__default.default.createElement(styled.CTAButton, { key: label, ...props }))))));
+};
+
+exports.SelectDropdown = SelectDropdown;
+//# sourceMappingURL=SelectDropdown.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectDropdown.cjs","sources":["../../../src/components/SelectDropdown/SelectDropdown.tsx"],"sourcesContent":["import React, { useCallback, useState } from 'react';\nimport { Key, Selection } from 'react-aria-components';\n\nimport { buildClassnames } from '../../utils';\nimport { SelectedOption } from './components/SelectedOption';\nimport { generateClassNames, getValuesFromKeys } from './utils';\nimport { CTAButton, Separator, StyledDropdown, StyledListBox, StyledSearch } from './styled';\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';\n\nexport const SelectDropdown = ({\n  id,\n  className,\n  placeholder = 'Select item',\n  multiple = false,\n  compact = false,\n  hasError = false,\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  const [selectedValues, setSelectedValues] = useState<SelectDropdownItem[]>(\n    getValuesFromKeys(options, hasSection, value),\n  );\n  const selectionMode = multiple ? 'multiple' : 'single';\n\n  const onSelectionChange = useCallback(\n    (keys: Selection) => {\n      const selectedKeys = Array.from(keys) as Key[];\n      const newSelectedValues = getValuesFromKeys(options, hasSection, selectedKeys);\n      setSelectedValues(newSelectedValues);\n      onChange(newSelectedValues);\n\n      if (multiple) return;\n      setIsSelectOpen(false);\n    },\n    [options, hasSection, onChange, multiple],\n  );\n\n  return (\n    <StyledDropdown\n      id={`select-dropdown-${id}`}\n      className={buildClassnames([classNames?.popover, className])}\n      shouldShow={isSelectOpen}\n      setShouldShow={setIsSelectOpen}\n      useAnchorWidth\n      hasError={hasError}\n      ctaProps={{\n        className: buildClassnames([classNames?.button, className]),\n        children: (\n          <SelectedOption\n            placeholder={placeholder}\n            options={selectedValues}\n            selectionMode={selectionMode}\n          />\n        ),\n        size: compact ? 'sm' : 'base',\n        variant: hasError ? 'destructive' : 'default',\n      }}\n    >\n      {onSearchChange && (\n        <>\n          <StyledSearch value={searchValue} onChange={onSearchChange} />\n          <Separator />\n        </>\n      )}\n      <StyledListBox\n        className={buildClassnames([classNames?.optionsContainer, 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      </StyledListBox>\n      {actions?.map(({ label, ...props }) => (\n        <>\n          <Separator key={`seperator-${label}`} />\n          <CTAButton key={label} {...props} />\n        </>\n      ))}\n    </StyledDropdown>\n  );\n};\n"],"names":["generateClassNames","useState","getValuesFromKeys","useCallback","React","StyledDropdown","buildClassnames","SelectedOption","StyledSearch","Separator","StyledListBox","SelectDropdownState","ListItemSection","ListItem","CTAButton"],"mappings":"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"}

package/dist/components/SelectDropdown/SelectDropdown.js

@@ -0,0 +1,42 @@
+import React__default, { useState, useCallback } from 'react';
+import { buildClassnames } from '../../utils/buildClassnames.js';
+import 'uid/secure';
+import { SelectedOption } from './components/SelectedOption.js';
+import { getValuesFromKeys, generateClassNames } from './utils.js';
+import { StyledDropdown, StyledSearch, Separator, StyledListBox, CTAButton } from './styled.js';
+import { ListItemSection } from './ListItemSection/ListItemSection.js';
+import { ListItem } from './ListItem/ListItem.js';
+import { SelectDropdownState } from './components/SelectDropdownState.js';
+
+const SelectDropdown = ({ id, className, placeholder = 'Select item', multiple = false, compact = false, hasError = false, options, value, actions, isLoading = false, searchValue, emptyStateSlot, onSearchChange, onChange, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, ...otherProps }) => {
+    const hasSection = options.flatMap((option) => option).some((item) => 'items' in item);
+    const classNames = generateClassNames(className);
+    const [isSelectOpen, setIsSelectOpen] = useState(false);
+    const [selectedValues, setSelectedValues] = useState(getValuesFromKeys(options, hasSection, value));
+    const selectionMode = multiple ? 'multiple' : 'single';
+    const onSelectionChange = useCallback((keys) => {
+        const selectedKeys = Array.from(keys);
+        const newSelectedValues = getValuesFromKeys(options, hasSection, selectedKeys);
+        setSelectedValues(newSelectedValues);
+        onChange(newSelectedValues);
+        if (multiple)
+            return;
+        setIsSelectOpen(false);
+    }, [options, hasSection, onChange, multiple]);
+    return (React__default.createElement(StyledDropdown, { id: `select-dropdown-${id}`, className: buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.popover, className]), shouldShow: isSelectOpen, setShouldShow: setIsSelectOpen, useAnchorWidth: true, hasError: hasError, ctaProps: {
+            className: buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.button, className]),
+            children: (React__default.createElement(SelectedOption, { placeholder: placeholder, options: selectedValues, selectionMode: selectionMode })),
+            size: compact ? 'sm' : 'base',
+            variant: hasError ? 'destructive' : 'default',
+        } },
+        onSearchChange && (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement(StyledSearch, { value: searchValue, onChange: onSearchChange }),
+            React__default.createElement(Separator, null))),
+        React__default.createElement(StyledListBox, { className: buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.optionsContainer, className]), "aria-labelledby": ariaLabelledBy !== null && ariaLabelledBy !== undefined ? ariaLabelledBy : `${id}-label`, "aria-describedby": ariaDescribedBy !== null && ariaDescribedBy !== undefined ? ariaDescribedBy : `${id}-hint`, selectionMode: selectionMode, items: options, onSelectionChange: onSelectionChange, selectedKeys: selectedValues.map((selectedValue) => selectedValue.id), renderEmptyState: () => (React__default.createElement(SelectDropdownState, { isLoading: isLoading, emptyStateSlot: emptyStateSlot })), ...otherProps }, (item) => hasSection ? (React__default.createElement(ListItemSection, { ...item })) : (React__default.createElement(ListItem, { ...item }))), actions === null || actions === undefined ? undefined :
+        actions.map(({ label, ...props }) => (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement(Separator, { key: `seperator-${label}` }),
+            React__default.createElement(CTAButton, { key: label, ...props }))))));
+};
+
+export { SelectDropdown };
+//# sourceMappingURL=SelectDropdown.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectDropdown.js","sources":["../../../src/components/SelectDropdown/SelectDropdown.tsx"],"sourcesContent":["import React, { useCallback, useState } from 'react';\nimport { Key, Selection } from 'react-aria-components';\n\nimport { buildClassnames } from '../../utils';\nimport { SelectedOption } from './components/SelectedOption';\nimport { generateClassNames, getValuesFromKeys } from './utils';\nimport { CTAButton, Separator, StyledDropdown, StyledListBox, StyledSearch } from './styled';\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';\n\nexport const SelectDropdown = ({\n  id,\n  className,\n  placeholder = 'Select item',\n  multiple = false,\n  compact = false,\n  hasError = false,\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  const [selectedValues, setSelectedValues] = useState<SelectDropdownItem[]>(\n    getValuesFromKeys(options, hasSection, value),\n  );\n  const selectionMode = multiple ? 'multiple' : 'single';\n\n  const onSelectionChange = useCallback(\n    (keys: Selection) => {\n      const selectedKeys = Array.from(keys) as Key[];\n      const newSelectedValues = getValuesFromKeys(options, hasSection, selectedKeys);\n      setSelectedValues(newSelectedValues);\n      onChange(newSelectedValues);\n\n      if (multiple) return;\n      setIsSelectOpen(false);\n    },\n    [options, hasSection, onChange, multiple],\n  );\n\n  return (\n    <StyledDropdown\n      id={`select-dropdown-${id}`}\n      className={buildClassnames([classNames?.popover, className])}\n      shouldShow={isSelectOpen}\n      setShouldShow={setIsSelectOpen}\n      useAnchorWidth\n      hasError={hasError}\n      ctaProps={{\n        className: buildClassnames([classNames?.button, className]),\n        children: (\n          <SelectedOption\n            placeholder={placeholder}\n            options={selectedValues}\n            selectionMode={selectionMode}\n          />\n        ),\n        size: compact ? 'sm' : 'base',\n        variant: hasError ? 'destructive' : 'default',\n      }}\n    >\n      {onSearchChange && (\n        <>\n          <StyledSearch value={searchValue} onChange={onSearchChange} />\n          <Separator />\n        </>\n      )}\n      <StyledListBox\n        className={buildClassnames([classNames?.optionsContainer, 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      </StyledListBox>\n      {actions?.map(({ label, ...props }) => (\n        <>\n          <Separator key={`seperator-${label}`} />\n          <CTAButton key={label} {...props} />\n        </>\n      ))}\n    </StyledDropdown>\n  );\n};\n"],"names":["React"],"mappings":"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"}

package/dist/components/SelectDropdown/components/SelectDropdownState.cjs

@@ -0,0 +1,19 @@
+'use strict';
+
+var React = require('react');
+var Loader = require('../../Loader/Loader.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const SelectDropdownState = ({ isLoading, emptyStateSlot }) => {
+    if (isLoading)
+        return React__default.default.createElement(Loader.Loader, null);
+    if (emptyStateSlot)
+        return emptyStateSlot;
+    return React__default.default.createElement("span", null, "No items found");
+};
+
+exports.SelectDropdownState = SelectDropdownState;
+//# sourceMappingURL=SelectDropdownState.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectDropdownState.cjs","sources":["../../../../src/components/SelectDropdown/components/SelectDropdownState.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport { Loader } from '../../Loader';\n\ntype SelectDropdownStateProps = {\n  isLoading: boolean;\n  emptyStateSlot?: ReactElement;\n};\n\nexport const SelectDropdownState = ({ isLoading, emptyStateSlot }: SelectDropdownStateProps) => {\n  if (isLoading) return <Loader />;\n  if (emptyStateSlot) return emptyStateSlot;\n\n  return <span>No items found</span>;\n};\n"],"names":["React","Loader"],"mappings":";;;;;;;;;AAQa,MAAA,mBAAmB,GAAG,CAAC,EAAE,SAAS,EAAE,cAAc,EAA4B,KAAI;AAC7F,IAAA,IAAI,SAAS;QAAE,OAAOA,sBAAA,CAAA,aAAA,CAACC,aAAM,EAAA,IAAA,CAAG;AAChC,IAAA,IAAI,cAAc;AAAE,QAAA,OAAO,cAAc;AAEzC,IAAA,OAAOD,oEAA2B;AACpC;;;;"}

package/dist/components/SelectDropdown/components/SelectDropdownState.js

@@ -0,0 +1,13 @@
+import React__default from 'react';
+import { Loader } from '../../Loader/Loader.js';
+
+const SelectDropdownState = ({ isLoading, emptyStateSlot }) => {
+    if (isLoading)
+        return React__default.createElement(Loader, null);
+    if (emptyStateSlot)
+        return emptyStateSlot;
+    return React__default.createElement("span", null, "No items found");
+};
+
+export { SelectDropdownState };
+//# sourceMappingURL=SelectDropdownState.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectDropdownState.js","sources":["../../../../src/components/SelectDropdown/components/SelectDropdownState.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport { Loader } from '../../Loader';\n\ntype SelectDropdownStateProps = {\n  isLoading: boolean;\n  emptyStateSlot?: ReactElement;\n};\n\nexport const SelectDropdownState = ({ isLoading, emptyStateSlot }: SelectDropdownStateProps) => {\n  if (isLoading) return <Loader />;\n  if (emptyStateSlot) return emptyStateSlot;\n\n  return <span>No items found</span>;\n};\n"],"names":["React"],"mappings":";;;AAQa,MAAA,mBAAmB,GAAG,CAAC,EAAE,SAAS,EAAE,cAAc,EAA4B,KAAI;AAC7F,IAAA,IAAI,SAAS;QAAE,OAAOA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,IAAA,CAAG;AAChC,IAAA,IAAI,cAAc;AAAE,QAAA,OAAO,cAAc;AAEzC,IAAA,OAAOA,4DAA2B;AACpC;;;;"}

package/dist/components/SelectDropdown/components/SelectedOption.cjs

@@ -0,0 +1,27 @@
+'use strict';
+
+var React = require('react');
+var Text = require('../../Text/Text.cjs');
+var styled = require('../ListItem/styled.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const SelectedOption = ({ placeholder, options, selectionMode }) => {
+    var _a, _b, _c;
+    if (options.length === 0) {
+        return (React__default.default.createElement(styled.ItemInfoContainer, null,
+            React__default.default.createElement(Text.Text, { variant: "placeholder" }, placeholder)));
+    }
+    if (selectionMode === 'single') {
+        return (React__default.default.createElement(styled.ItemInfoContainer, null,
+            React__default.default.createElement(Text.Text, { variant: "placeholder" }, (_a = options[0]) === null || _a === undefined ? undefined : _a.label),
+            ((_b = options[0]) === null || _b === undefined ? undefined : _b.itemInfoSlot) && React__default.default.createElement(Text.Text, { variant: "hintText" }, (_c = options[0]) === null || _c === undefined ? undefined : _c.itemInfoSlot)));
+    }
+    return (React__default.default.createElement(styled.ItemInfoContainer, null,
+        React__default.default.createElement(Text.Text, { variant: "placeholder" }, options.map((opt) => opt.label).join(', '))));
+};
+
+exports.SelectedOption = SelectedOption;
+//# sourceMappingURL=SelectedOption.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectedOption.cjs","sources":["../../../../src/components/SelectDropdown/components/SelectedOption.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from '../../Text';\nimport { ItemInfoContainer } from '../ListItem/styled';\nimport { SelectDropdownItem } from '../types';\n\ntype SelectedOptionProps = {\n  placeholder: string;\n  options: SelectDropdownItem[];\n  selectionMode: 'single' | 'multiple';\n};\n\nexport const SelectedOption = ({ placeholder, options, selectionMode }: SelectedOptionProps) => {\n  if (options.length === 0) {\n    return (\n      <ItemInfoContainer>\n        <Text variant=\"placeholder\">{placeholder}</Text>\n      </ItemInfoContainer>\n    );\n  }\n\n  if (selectionMode === 'single') {\n    return (\n      <ItemInfoContainer>\n        <Text variant=\"placeholder\">{options[0]?.label}</Text>\n        {options[0]?.itemInfoSlot && <Text variant=\"hintText\">{options[0]?.itemInfoSlot}</Text>}\n      </ItemInfoContainer>\n    );\n  }\n\n  return (\n    <ItemInfoContainer>\n      <Text variant=\"placeholder\">{options.map((opt: any) => opt.label).join(', ')}</Text>\n    </ItemInfoContainer>\n  );\n};\n"],"names":["React","ItemInfoContainer","Text"],"mappings":";;;;;;;;;;AAWO,MAAM,cAAc,GAAG,CAAC,EAAE,WAAW,EAAE,OAAO,EAAE,aAAa,EAAuB,KAAI;;AAC7F,IAAA,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE;QACxB,QACEA,qCAACC,wBAAiB,EAAA,IAAA;YAChBD,sBAAC,CAAA,aAAA,CAAAE,SAAI,EAAC,EAAA,OAAO,EAAC,aAAa,IAAE,WAAW,CAAQ,CAC9B;AAEvB;IAED,IAAI,aAAa,KAAK,QAAQ,EAAE;QAC9B,QACEF,qCAACC,wBAAiB,EAAA,IAAA;AAChB,YAAAD,sBAAA,CAAA,aAAA,CAACE,SAAI,EAAA,EAAC,OAAO,EAAC,aAAa,EAAA,EAAE,CAAA,EAAA,GAAA,OAAO,CAAC,CAAC,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,KAAK,CAAQ;YACrD,CAAA,CAAA,EAAA,GAAA,OAAO,CAAC,CAAC,CAAC,gDAAE,YAAY,KAAIF,sBAAC,CAAA,aAAA,CAAAE,SAAI,EAAC,EAAA,OAAO,EAAC,UAAU,EAAA,EAAE,CAAA,EAAA,GAAA,OAAO,CAAC,CAAC,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,YAAY,CAAQ,CACrE;AAEvB;IAED,QACEF,qCAACC,wBAAiB,EAAA,IAAA;QAChBD,sBAAC,CAAA,aAAA,CAAAE,SAAI,EAAC,EAAA,OAAO,EAAC,aAAa,EAAE,EAAA,OAAO,CAAC,GAAG,CAAC,CAAC,GAAQ,KAAK,GAAG,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAQ,CAClE;AAExB;;;;"}

package/dist/components/SelectDropdown/components/SelectedOption.js

@@ -0,0 +1,21 @@
+import React__default from 'react';
+import { Text } from '../../Text/Text.js';
+import { ItemInfoContainer } from '../ListItem/styled.js';
+
+const SelectedOption = ({ placeholder, options, selectionMode }) => {
+    var _a, _b, _c;
+    if (options.length === 0) {
+        return (React__default.createElement(ItemInfoContainer, null,
+            React__default.createElement(Text, { variant: "placeholder" }, placeholder)));
+    }
+    if (selectionMode === 'single') {
+        return (React__default.createElement(ItemInfoContainer, null,
+            React__default.createElement(Text, { variant: "placeholder" }, (_a = options[0]) === null || _a === undefined ? undefined : _a.label),
+            ((_b = options[0]) === null || _b === undefined ? undefined : _b.itemInfoSlot) && React__default.createElement(Text, { variant: "hintText" }, (_c = options[0]) === null || _c === undefined ? undefined : _c.itemInfoSlot)));
+    }
+    return (React__default.createElement(ItemInfoContainer, null,
+        React__default.createElement(Text, { variant: "placeholder" }, options.map((opt) => opt.label).join(', '))));
+};
+
+export { SelectedOption };
+//# sourceMappingURL=SelectedOption.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectedOption.js","sources":["../../../../src/components/SelectDropdown/components/SelectedOption.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from '../../Text';\nimport { ItemInfoContainer } from '../ListItem/styled';\nimport { SelectDropdownItem } from '../types';\n\ntype SelectedOptionProps = {\n  placeholder: string;\n  options: SelectDropdownItem[];\n  selectionMode: 'single' | 'multiple';\n};\n\nexport const SelectedOption = ({ placeholder, options, selectionMode }: SelectedOptionProps) => {\n  if (options.length === 0) {\n    return (\n      <ItemInfoContainer>\n        <Text variant=\"placeholder\">{placeholder}</Text>\n      </ItemInfoContainer>\n    );\n  }\n\n  if (selectionMode === 'single') {\n    return (\n      <ItemInfoContainer>\n        <Text variant=\"placeholder\">{options[0]?.label}</Text>\n        {options[0]?.itemInfoSlot && <Text variant=\"hintText\">{options[0]?.itemInfoSlot}</Text>}\n      </ItemInfoContainer>\n    );\n  }\n\n  return (\n    <ItemInfoContainer>\n      <Text variant=\"placeholder\">{options.map((opt: any) => opt.label).join(', ')}</Text>\n    </ItemInfoContainer>\n  );\n};\n"],"names":["React"],"mappings":";;;;AAWO,MAAM,cAAc,GAAG,CAAC,EAAE,WAAW,EAAE,OAAO,EAAE,aAAa,EAAuB,KAAI;;AAC7F,IAAA,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE;QACxB,QACEA,6BAAC,iBAAiB,EAAA,IAAA;YAChBA,cAAC,CAAA,aAAA,CAAA,IAAI,EAAC,EAAA,OAAO,EAAC,aAAa,IAAE,WAAW,CAAQ,CAC9B;AAEvB;IAED,IAAI,aAAa,KAAK,QAAQ,EAAE;QAC9B,QACEA,6BAAC,iBAAiB,EAAA,IAAA;AAChB,YAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAC,aAAa,EAAA,EAAE,CAAA,EAAA,GAAA,OAAO,CAAC,CAAC,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,KAAK,CAAQ;YACrD,CAAA,CAAA,EAAA,GAAA,OAAO,CAAC,CAAC,CAAC,gDAAE,YAAY,KAAIA,cAAC,CAAA,aAAA,CAAA,IAAI,EAAC,EAAA,OAAO,EAAC,UAAU,EAAA,EAAE,CAAA,EAAA,GAAA,OAAO,CAAC,CAAC,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,YAAY,CAAQ,CACrE;AAEvB;IAED,QACEA,6BAAC,iBAAiB,EAAA,IAAA;QAChBA,cAAC,CAAA,aAAA,CAAA,IAAI,EAAC,EAAA,OAAO,EAAC,aAAa,EAAE,EAAA,OAAO,CAAC,GAAG,CAAC,CAAC,GAAQ,KAAK,GAAG,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAQ,CAClE;AAExB;;;;"}

package/dist/components/SelectDropdown/index.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+var withLabels = require('../../hoc/withLabels/withLabels.cjs');
+require('react');
+var SelectDropdown$1 = require('./SelectDropdown.cjs');
+
+const SelectDropdown = withLabels.withLabels(SelectDropdown$1.SelectDropdown);
+
+exports.SelectDropdown = SelectDropdown;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../src/components/SelectDropdown/index.ts"],"sourcesContent":["import { withLabels } from '../../hoc';\nimport { SelectDropdown as BasicSelectDropdown } from './SelectDropdown';\n\nexport const SelectDropdown = withLabels(BasicSelectDropdown);\n"],"names":["withLabels","BasicSelectDropdown"],"mappings":";;;;;;MAGa,cAAc,GAAGA,qBAAU,CAACC,+BAAmB;;;;"}

package/dist/components/SelectDropdown/index.js

@@ -0,0 +1,8 @@
+import { withLabels } from '../../hoc/withLabels/withLabels.js';
+import 'react';
+import { SelectDropdown as SelectDropdown$1 } from './SelectDropdown.js';
+
+const SelectDropdown = withLabels(SelectDropdown$1);
+
+export { SelectDropdown };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/SelectDropdown/index.ts"],"sourcesContent":["import { withLabels } from '../../hoc';\nimport { SelectDropdown as BasicSelectDropdown } from './SelectDropdown';\n\nexport const SelectDropdown = withLabels(BasicSelectDropdown);\n"],"names":["BasicSelectDropdown"],"mappings":";;;;MAGa,cAAc,GAAG,UAAU,CAACA,gBAAmB;;;;"}

package/dist/components/SelectDropdown/styled.cjs

@@ -0,0 +1,39 @@
+'use strict';
+
+var styled = require('styled-components');
+var index = require('../../theme/index.cjs');
+var reactAriaComponents = require('react-aria-components');
+var Button = require('../Button/Button.cjs');
+var Dropdown = require('../Dropdown/Dropdown.cjs');
+var Search = require('../Search/Search.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+
+const StyledListBox = styled__default.default(reactAriaComponents.ListBox).withConfig({ displayName: "vui--StyledListBox", componentId: "vui--1fqdcy1" }) `overflow-y:scroll;max-height:300px;padding:${index.theme.sizes.sm};scroll-padding:${index.theme.sizes.xs} 0;&[data-empty]{display:flex;align-items:center;justify-content:center;}`;
+const StyledDropdown = styled__default.default(Dropdown.Dropdown).attrs((props) => ({
+    ctaProps: {
+        ...props.ctaProps,
+        style: {
+            padding: index.theme.sizes[3],
+            border: `1px solid ${props.hasError ? index.theme.colors.secondary.red.base : 'none'}`,
+        },
+        contentStyles: {
+            justifyContent: 'space-between',
+            flex: 1,
+        },
+    },
+})).withConfig({ displayName: "vui--StyledDropdown", componentId: "vui--to2qbd" }) `padding:0;`;
+const StyledSearch = styled__default.default(Search.Search).withConfig({ displayName: "vui--StyledSearch", componentId: "vui--122i7bz" }) `margin:${index.theme.sizes.sm};`;
+const Separator = styled__default.default.hr.withConfig({ displayName: "vui--Separator", componentId: "vui--1vuemb8" }) `height:1px;background:${index.theme.colors.neutral.grey.base};border:none;margin:0 0;width:100%;`;
+const CTAButton = styled__default.default(Button.Button).attrs({
+    variant: 'flat',
+}).withConfig({ displayName: "vui--CTAButton", componentId: "vui--1udm7tz" }) `justify-content:start;padding-left:${index.theme.sizes.xs};margin:${index.theme.sizes.sm} ${index.theme.sizes.xs};border-radius:${index.theme.radius.base};font-size:14px;svg{width:${index.theme.sizes.md};height:${index.theme.sizes.md};}`;
+
+exports.CTAButton = CTAButton;
+exports.Separator = Separator;
+exports.StyledDropdown = StyledDropdown;
+exports.StyledListBox = StyledListBox;
+exports.StyledSearch = StyledSearch;
+//# sourceMappingURL=styled.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styled.cjs","sources":["../../../src/components/SelectDropdown/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from 'Theme';\nimport { ListBox } from 'react-aria-components';\nimport { Button } from '../Button';\nimport { Dropdown } from '../Dropdown';\nimport { Search } from '../Search';\nimport { DropdownProps } from '../Dropdown/types';\n\nexport const StyledListBox = styled(ListBox)`\n  overflow-y: scroll;\n  max-height: 300px;\n  padding: ${theme.sizes.sm};\n  scroll-padding: ${theme.sizes.xs} 0;\n\n  &[data-empty] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n`;\n\nexport const StyledDropdown: React.FC<DropdownProps & { hasError: boolean }> = styled(\n  Dropdown,\n).attrs<{ hasError: boolean }>((props) => ({\n  ctaProps: {\n    ...props.ctaProps,\n    style: {\n      padding: theme.sizes[3],\n      border: `1px solid ${props.hasError ? theme.colors.secondary.red.base : 'none'}`,\n    },\n    contentStyles: {\n      justifyContent: 'space-between',\n      flex: 1,\n    },\n  },\n}))`\n  padding: 0;\n`;\n\nexport const StyledSearch = styled(Search)`\n  margin: ${theme.sizes.sm};\n`;\n\nexport const Separator = styled.hr`\n  height: 1px;\n  background: ${theme.colors.neutral.grey.base};\n  border: none;\n  margin: 0 0;\n  width: 100%;\n`;\n\nexport const CTAButton = styled(Button).attrs({\n  variant: 'flat',\n})`\n  justify-content: start;\n  padding-left: ${theme.sizes.xs};\n  margin: ${theme.sizes.sm} ${theme.sizes.xs};\n  border-radius: ${theme.radius.base};\n  font-size: 14px;\n  svg {\n    width: ${theme.sizes.md};\n    height: ${theme.sizes.md};\n  }\n`;\n"],"names":["styled","ListBox","theme","Dropdown","Search","Button"],"mappings":";;;;;;;;;;;;;MAQa,aAAa,GAAGA,uBAAM,CAACC,2BAAO,CAAC,CAG/B,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,2CAAA,EAAAC,WAAK,CAAC,KAAK,CAAC,EAAE,CACP,gBAAA,EAAAA,WAAK,CAAC,KAAK,CAAC,EAAE,CAAA,yEAAA;AASrB,MAAA,cAAc,GAAoDF,uBAAM,CACnFG,iBAAQ,CACT,CAAC,KAAK,CAAwB,CAAC,KAAK,MAAM;AACzC,IAAA,QAAQ,EAAE;QACR,GAAG,KAAK,CAAC,QAAQ;AACjB,QAAA,KAAK,EAAE;AACL,YAAA,OAAO,EAAED,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC;YACvB,MAAM,EAAE,aAAa,KAAK,CAAC,QAAQ,GAAGA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,GAAG,MAAM,CAAE,CAAA;AACjF,SAAA;AACD,QAAA,aAAa,EAAE;AACb,YAAA,cAAc,EAAE,eAAe;AAC/B,YAAA,IAAI,EAAE,CAAC;AACR,SAAA;AACF,KAAA;CACF,CAAC,CAAC;AAII,MAAM,YAAY,GAAGF,uBAAM,CAACI,aAAM,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,OAAA,EAC9BF,WAAK,CAAC,KAAK,CAAC,EAAE;AAGb,MAAA,SAAS,GAAGF,uBAAM,CAAC,EAAE,CAElB,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,sBAAA,EAAAE,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;AAMjC,MAAA,SAAS,GAAGF,uBAAM,CAACK,aAAM,CAAC,CAAC,KAAK,CAAC;AAC5C,IAAA,OAAO,EAAE,MAAM;AAChB,CAAA,CAAC,kHAEgBH,WAAK,CAAC,KAAK,CAAC,EAAE,CACpB,QAAA,EAAAA,WAAK,CAAC,KAAK,CAAC,EAAE,CAAA,CAAA,EAAIA,WAAK,CAAC,KAAK,CAAC,EAAE,CACzB,eAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,IAAI,CAAA,0BAAA,EAGvBA,WAAK,CAAC,KAAK,CAAC,EAAE,WACbA,WAAK,CAAC,KAAK,CAAC,EAAE;;;;;;;;"}

package/dist/components/SelectDropdown/styled.js

@@ -0,0 +1,29 @@
+import styled from 'styled-components';
+import { theme } from '../../theme/index.js';
+import { ListBox } from 'react-aria-components';
+import { Button } from '../Button/Button.js';
+import { Dropdown } from '../Dropdown/Dropdown.js';
+import { Search } from '../Search/Search.js';
+
+const StyledListBox = styled(ListBox).withConfig({ displayName: "vui--StyledListBox", componentId: "vui--1fqdcy1" }) `overflow-y:scroll;max-height:300px;padding:${theme.sizes.sm};scroll-padding:${theme.sizes.xs} 0;&[data-empty]{display:flex;align-items:center;justify-content:center;}`;
+const StyledDropdown = styled(Dropdown).attrs((props) => ({
+    ctaProps: {
+        ...props.ctaProps,
+        style: {
+            padding: theme.sizes[3],
+            border: `1px solid ${props.hasError ? theme.colors.secondary.red.base : 'none'}`,
+        },
+        contentStyles: {
+            justifyContent: 'space-between',
+            flex: 1,
+        },
+    },
+})).withConfig({ displayName: "vui--StyledDropdown", componentId: "vui--to2qbd" }) `padding:0;`;
+const StyledSearch = styled(Search).withConfig({ displayName: "vui--StyledSearch", componentId: "vui--122i7bz" }) `margin:${theme.sizes.sm};`;
+const Separator = styled.hr.withConfig({ displayName: "vui--Separator", componentId: "vui--1vuemb8" }) `height:1px;background:${theme.colors.neutral.grey.base};border:none;margin:0 0;width:100%;`;
+const CTAButton = styled(Button).attrs({
+    variant: 'flat',
+}).withConfig({ displayName: "vui--CTAButton", componentId: "vui--1udm7tz" }) `justify-content:start;padding-left:${theme.sizes.xs};margin:${theme.sizes.sm} ${theme.sizes.xs};border-radius:${theme.radius.base};font-size:14px;svg{width:${theme.sizes.md};height:${theme.sizes.md};}`;
+
+export { CTAButton, Separator, StyledDropdown, StyledListBox, StyledSearch };
+//# sourceMappingURL=styled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","sources":["../../../src/components/SelectDropdown/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from 'Theme';\nimport { ListBox } from 'react-aria-components';\nimport { Button } from '../Button';\nimport { Dropdown } from '../Dropdown';\nimport { Search } from '../Search';\nimport { DropdownProps } from '../Dropdown/types';\n\nexport const StyledListBox = styled(ListBox)`\n  overflow-y: scroll;\n  max-height: 300px;\n  padding: ${theme.sizes.sm};\n  scroll-padding: ${theme.sizes.xs} 0;\n\n  &[data-empty] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n`;\n\nexport const StyledDropdown: React.FC<DropdownProps & { hasError: boolean }> = styled(\n  Dropdown,\n).attrs<{ hasError: boolean }>((props) => ({\n  ctaProps: {\n    ...props.ctaProps,\n    style: {\n      padding: theme.sizes[3],\n      border: `1px solid ${props.hasError ? theme.colors.secondary.red.base : 'none'}`,\n    },\n    contentStyles: {\n      justifyContent: 'space-between',\n      flex: 1,\n    },\n  },\n}))`\n  padding: 0;\n`;\n\nexport const StyledSearch = styled(Search)`\n  margin: ${theme.sizes.sm};\n`;\n\nexport const Separator = styled.hr`\n  height: 1px;\n  background: ${theme.colors.neutral.grey.base};\n  border: none;\n  margin: 0 0;\n  width: 100%;\n`;\n\nexport const CTAButton = styled(Button).attrs({\n  variant: 'flat',\n})`\n  justify-content: start;\n  padding-left: ${theme.sizes.xs};\n  margin: ${theme.sizes.sm} ${theme.sizes.xs};\n  border-radius: ${theme.radius.base};\n  font-size: 14px;\n  svg {\n    width: ${theme.sizes.md};\n    height: ${theme.sizes.md};\n  }\n`;\n"],"names":[],"mappings":";;;;;;;MAQa,aAAa,GAAG,MAAM,CAAC,OAAO,CAAC,CAG/B,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,2CAAA,EAAA,KAAK,CAAC,KAAK,CAAC,EAAE,CACP,gBAAA,EAAA,KAAK,CAAC,KAAK,CAAC,EAAE,CAAA,yEAAA;AASrB,MAAA,cAAc,GAAoD,MAAM,CACnF,QAAQ,CACT,CAAC,KAAK,CAAwB,CAAC,KAAK,MAAM;AACzC,IAAA,QAAQ,EAAE;QACR,GAAG,KAAK,CAAC,QAAQ;AACjB,QAAA,KAAK,EAAE;AACL,YAAA,OAAO,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;YACvB,MAAM,EAAE,aAAa,KAAK,CAAC,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,GAAG,MAAM,CAAE,CAAA;AACjF,SAAA;AACD,QAAA,aAAa,EAAE;AACb,YAAA,cAAc,EAAE,eAAe;AAC/B,YAAA,IAAI,EAAE,CAAC;AACR,SAAA;AACF,KAAA;CACF,CAAC,CAAC;AAII,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,OAAA,EAC9B,KAAK,CAAC,KAAK,CAAC,EAAE;AAGb,MAAA,SAAS,GAAG,MAAM,CAAC,EAAE,CAElB,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,sBAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;AAMjC,MAAA,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC;AAC5C,IAAA,OAAO,EAAE,MAAM;AAChB,CAAA,CAAC,kHAEgB,KAAK,CAAC,KAAK,CAAC,EAAE,CACpB,QAAA,EAAA,KAAK,CAAC,KAAK,CAAC,EAAE,CAAA,CAAA,EAAI,KAAK,CAAC,KAAK,CAAC,EAAE,CACzB,eAAA,EAAA,KAAK,CAAC,MAAM,CAAC,IAAI,CAAA,0BAAA,EAGvB,KAAK,CAAC,KAAK,CAAC,EAAE,WACb,KAAK,CAAC,KAAK,CAAC,EAAE;;;;"}

package/dist/components/SelectDropdown/utils.cjs

@@ -0,0 +1,25 @@
+'use strict';
+
+const getValuesFromKeys = (items, hasSection, keys) => {
+    if (!keys)
+        return [];
+    if (!hasSection) {
+        return items.filter((item) => keys.includes(item.id));
+    }
+    return items.flatMap((section) => {
+        var _a;
+        return [
+            ...(keys.includes(section.id) ? [section] : []),
+            ...(((_a = section.items) === null || _a === undefined ? undefined : _a.filter((item) => keys.includes(item.id))) || []),
+        ];
+    });
+};
+const generateClassNames = (prefix) => ({
+    button: prefix ? `${prefix}-select-dropdown-button` : undefined,
+    optionsContainer: prefix ? `${prefix}-select-dropdown-container` : undefined,
+    popover: prefix ? `${prefix}-select-dropdown` : undefined,
+});
+
+exports.generateClassNames = generateClassNames;
+exports.getValuesFromKeys = getValuesFromKeys;
+//# sourceMappingURL=utils.cjs.map

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

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

@@ -0,0 +1,22 @@
+const getValuesFromKeys = (items, hasSection, keys) => {
+    if (!keys)
+        return [];
+    if (!hasSection) {
+        return items.filter((item) => keys.includes(item.id));
+    }
+    return items.flatMap((section) => {
+        var _a;
+        return [
+            ...(keys.includes(section.id) ? [section] : []),
+            ...(((_a = section.items) === null || _a === undefined ? undefined : _a.filter((item) => keys.includes(item.id))) || []),
+        ];
+    });
+};
+const generateClassNames = (prefix) => ({
+    button: prefix ? `${prefix}-select-dropdown-button` : undefined,
+    optionsContainer: prefix ? `${prefix}-select-dropdown-container` : undefined,
+    popover: prefix ? `${prefix}-select-dropdown` : undefined,
+});
+
+export { generateClassNames, getValuesFromKeys };
+//# sourceMappingURL=utils.js.map

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

@@ -0,0 +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 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 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,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;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/Stack/Stack.cjs

@@ -3,6 +3,7 @@
 var styled = require('styled-components');
 var Alignments = require('./Alignments.cjs');
 var index = require('../../theme/index.cjs');
+var Text = require('../Text/Text.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -46,7 +47,9 @@ const Stack = styled__default.default.div.withConfig({ displayName: "vui--Stack"
         flex: ${itemFlex};
       }
 
-      & > * + * {
+      & > * + *,
+      // Increase specificity to overwrite Text's Margin: 0
+      && > * + ${Text.Text} {
         margin-top: ${marginTop};
         margin-left: ${marginLeft};
       }

package/dist/components/Stack/Stack.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Stack.cjs","sources":["../../../src/components/Stack/Stack.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport { StackProps } from './types';\nimport { Alignments } from './Alignments';\n\nimport { theme } from '../../theme';\n\n/**\n * Layout component.\n */\nexport const Stack = styled.div<StackProps>`\n  display: flex;\n\n  ${(props) => {\n    const { direction = 'vertical', alignX = 'start', alignY = 'start', spacing = 'base' } = props;\n\n    let alignItems;\n    let justifyContent;\n    let flexDirection;\n    let itemFlex;\n    let marginTop = '';\n    let marginLeft = '';\n\n    if (direction === 'vertical') {\n      alignItems = alignX && Alignments[alignX];\n      justifyContent = alignY && Alignments[alignY];\n      marginTop = theme.sizes[spacing];\n      flexDirection = 'column';\n    } else {\n      alignItems = alignY && Alignments[alignY];\n      justifyContent = alignX && Alignments[alignX];\n      marginLeft = theme.sizes[spacing];\n      flexDirection = 'row';\n    }\n\n    // These options result in 'justify-content: stretch' which doesn't exist,\n    // so instead we set the flex of child elements\n    if (\n      (direction === 'vertical' && alignY === 'stretch') ||\n      (direction === 'horizontal' && alignX === 'stretch')\n    ) {\n      itemFlex = 1;\n    }\n\n    return `\n      align-items: ${alignItems};\n      justify-content: ${justifyContent};\n      flex-direction: ${flexDirection};\n\n      & > * {\n        flex: ${itemFlex};\n      }\n\n      & > * + * {\n        margin-top: ${marginTop};\n        margin-left: ${marginLeft};\n      }\n    `;\n  }}\n`;\n\nStack.displayName = 'Stack';\n"],"names":["styled","Alignments","theme"],"mappings":";;;;;;;;;;AAOA;;AAEG;AACU,MAAA,KAAK,GAAGA,uBAAM,CAAC,GAAG,CAG3B,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,aAAA,EAAA,CAAC,KAAK,KAAI;AACV,IAAA,MAAM,EAAE,SAAS,GAAG,UAAU,EAAE,MAAM,GAAG,OAAO,EAAE,MAAM,GAAG,OAAO,EAAE,OAAO,GAAG,MAAM,EAAE,GAAG,KAAK;AAE9F,IAAA,IAAI,UAAU;AACd,IAAA,IAAI,cAAc;AAClB,IAAA,IAAI,aAAa;AACjB,IAAA,IAAI,QAAQ;IACZ,IAAI,SAAS,GAAG,EAAE;IAClB,IAAI,UAAU,GAAG,EAAE;IAEnB,IAAI,SAAS,KAAK,UAAU,EAAE;AAC5B,QAAA,UAAU,GAAG,MAAM,IAAIC,qBAAU,CAAC,MAAM,CAAC;AACzC,QAAA,cAAc,GAAG,MAAM,IAAIA,qBAAU,CAAC,MAAM,CAAC;AAC7C,QAAA,SAAS,GAAGC,WAAK,CAAC,KAAK,CAAC,OAAO,CAAC;QAChC,aAAa,GAAG,QAAQ;AACzB;AAAM,SAAA;AACL,QAAA,UAAU,GAAG,MAAM,IAAID,qBAAU,CAAC,MAAM,CAAC;AACzC,QAAA,cAAc,GAAG,MAAM,IAAIA,qBAAU,CAAC,MAAM,CAAC;AAC7C,QAAA,UAAU,GAAGC,WAAK,CAAC,KAAK,CAAC,OAAO,CAAC;QACjC,aAAa,GAAG,KAAK;AACtB;;;IAID,IACE,CAAC,SAAS,KAAK,UAAU,IAAI,MAAM,KAAK,SAAS;SAChD,SAAS,KAAK,YAAY,IAAI,MAAM,KAAK,SAAS,CAAC,EACpD;QACA,QAAQ,GAAG,CAAC;AACb;IAED,OAAO;qBACU,UAAU,CAAA;yBACN,cAAc,CAAA;wBACf,aAAa,CAAA;;;gBAGrB,QAAQ,CAAA;;;;sBAIF,SAAS,CAAA;uBACR,UAAU,CAAA;;KAE5B;AACH,CAAC;AAGH,KAAK,CAAC,WAAW,GAAG,OAAO;;;;"}
+{"version":3,"file":"Stack.cjs","sources":["../../../src/components/Stack/Stack.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport { StackProps } from './types';\nimport { Alignments } from './Alignments';\n\nimport { theme } from '../../theme';\nimport { Text } from '../Text';\n\n/**\n * Layout component.\n */\nexport const Stack = styled.div<StackProps>`\n  display: flex;\n\n  ${(props) => {\n    const { direction = 'vertical', alignX = 'start', alignY = 'start', spacing = 'base' } = props;\n\n    let alignItems;\n    let justifyContent;\n    let flexDirection;\n    let itemFlex;\n    let marginTop = '';\n    let marginLeft = '';\n\n    if (direction === 'vertical') {\n      alignItems = alignX && Alignments[alignX];\n      justifyContent = alignY && Alignments[alignY];\n      marginTop = theme.sizes[spacing];\n      flexDirection = 'column';\n    } else {\n      alignItems = alignY && Alignments[alignY];\n      justifyContent = alignX && Alignments[alignX];\n      marginLeft = theme.sizes[spacing];\n      flexDirection = 'row';\n    }\n\n    // These options result in 'justify-content: stretch' which doesn't exist,\n    // so instead we set the flex of child elements\n    if (\n      (direction === 'vertical' && alignY === 'stretch') ||\n      (direction === 'horizontal' && alignX === 'stretch')\n    ) {\n      itemFlex = 1;\n    }\n\n    return `\n      align-items: ${alignItems};\n      justify-content: ${justifyContent};\n      flex-direction: ${flexDirection};\n\n      & > * {\n        flex: ${itemFlex};\n      }\n\n      & > * + *,\n      // Increase specificity to overwrite Text's Margin: 0\n      && > * + ${Text} {\n        margin-top: ${marginTop};\n        margin-left: ${marginLeft};\n      }\n    `;\n  }}\n`;\n\nStack.displayName = 'Stack';\n"],"names":["styled","Alignments","theme","Text"],"mappings":";;;;;;;;;;;AAQA;;AAEG;AACU,MAAA,KAAK,GAAGA,uBAAM,CAAC,GAAG,CAG3B,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,aAAA,EAAA,CAAC,KAAK,KAAI;AACV,IAAA,MAAM,EAAE,SAAS,GAAG,UAAU,EAAE,MAAM,GAAG,OAAO,EAAE,MAAM,GAAG,OAAO,EAAE,OAAO,GAAG,MAAM,EAAE,GAAG,KAAK;AAE9F,IAAA,IAAI,UAAU;AACd,IAAA,IAAI,cAAc;AAClB,IAAA,IAAI,aAAa;AACjB,IAAA,IAAI,QAAQ;IACZ,IAAI,SAAS,GAAG,EAAE;IAClB,IAAI,UAAU,GAAG,EAAE;IAEnB,IAAI,SAAS,KAAK,UAAU,EAAE;AAC5B,QAAA,UAAU,GAAG,MAAM,IAAIC,qBAAU,CAAC,MAAM,CAAC;AACzC,QAAA,cAAc,GAAG,MAAM,IAAIA,qBAAU,CAAC,MAAM,CAAC;AAC7C,QAAA,SAAS,GAAGC,WAAK,CAAC,KAAK,CAAC,OAAO,CAAC;QAChC,aAAa,GAAG,QAAQ;AACzB;AAAM,SAAA;AACL,QAAA,UAAU,GAAG,MAAM,IAAID,qBAAU,CAAC,MAAM,CAAC;AACzC,QAAA,cAAc,GAAG,MAAM,IAAIA,qBAAU,CAAC,MAAM,CAAC;AAC7C,QAAA,UAAU,GAAGC,WAAK,CAAC,KAAK,CAAC,OAAO,CAAC;QACjC,aAAa,GAAG,KAAK;AACtB;;;IAID,IACE,CAAC,SAAS,KAAK,UAAU,IAAI,MAAM,KAAK,SAAS;SAChD,SAAS,KAAK,YAAY,IAAI,MAAM,KAAK,SAAS,CAAC,EACpD;QACA,QAAQ,GAAG,CAAC;AACb;IAED,OAAO;qBACU,UAAU,CAAA;yBACN,cAAc,CAAA;wBACf,aAAa,CAAA;;;gBAGrB,QAAQ,CAAA;;;;;iBAKPC,SAAI,CAAA;sBACC,SAAS,CAAA;uBACR,UAAU,CAAA;;KAE5B;AACH,CAAC;AAGH,KAAK,CAAC,WAAW,GAAG,OAAO;;;;"}

package/dist/components/Stack/Stack.js

@@ -1,6 +1,7 @@
 import styled from 'styled-components';
 import { Alignments } from './Alignments.js';
 import { theme } from '../../theme/index.js';
+import { Text } from '../Text/Text.js';
 
 /**
  * Layout component.
@@ -40,7 +41,9 @@ const Stack = styled.div.withConfig({ displayName: "vui--Stack", componentId: "v
         flex: ${itemFlex};
       }
 
-      & > * + * {
+      & > * + *,
+      // Increase specificity to overwrite Text's Margin: 0
+      && > * + ${Text} {
         margin-top: ${marginTop};
         margin-left: ${marginLeft};
       }

package/dist/components/Stack/Stack.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stack.js","sources":["../../../src/components/Stack/Stack.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport { StackProps } from './types';\nimport { Alignments } from './Alignments';\n\nimport { theme } from '../../theme';\n\n/**\n * Layout component.\n */\nexport const Stack = styled.div<StackProps>`\n  display: flex;\n\n  ${(props) => {\n    const { direction = 'vertical', alignX = 'start', alignY = 'start', spacing = 'base' } = props;\n\n    let alignItems;\n    let justifyContent;\n    let flexDirection;\n    let itemFlex;\n    let marginTop = '';\n    let marginLeft = '';\n\n    if (direction === 'vertical') {\n      alignItems = alignX && Alignments[alignX];\n      justifyContent = alignY && Alignments[alignY];\n      marginTop = theme.sizes[spacing];\n      flexDirection = 'column';\n    } else {\n      alignItems = alignY && Alignments[alignY];\n      justifyContent = alignX && Alignments[alignX];\n      marginLeft = theme.sizes[spacing];\n      flexDirection = 'row';\n    }\n\n    // These options result in 'justify-content: stretch' which doesn't exist,\n    // so instead we set the flex of child elements\n    if (\n      (direction === 'vertical' && alignY === 'stretch') ||\n      (direction === 'horizontal' && alignX === 'stretch')\n    ) {\n      itemFlex = 1;\n    }\n\n    return `\n      align-items: ${alignItems};\n      justify-content: ${justifyContent};\n      flex-direction: ${flexDirection};\n\n      & > * {\n        flex: ${itemFlex};\n      }\n\n      & > * + * {\n        margin-top: ${marginTop};\n        margin-left: ${marginLeft};\n      }\n    `;\n  }}\n`;\n\nStack.displayName = 'Stack';\n"],"names":[],"mappings":";;;;AAOA;;AAEG;AACU,MAAA,KAAK,GAAG,MAAM,CAAC,GAAG,CAG3B,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,aAAA,EAAA,CAAC,KAAK,KAAI;AACV,IAAA,MAAM,EAAE,SAAS,GAAG,UAAU,EAAE,MAAM,GAAG,OAAO,EAAE,MAAM,GAAG,OAAO,EAAE,OAAO,GAAG,MAAM,EAAE,GAAG,KAAK;AAE9F,IAAA,IAAI,UAAU;AACd,IAAA,IAAI,cAAc;AAClB,IAAA,IAAI,aAAa;AACjB,IAAA,IAAI,QAAQ;IACZ,IAAI,SAAS,GAAG,EAAE;IAClB,IAAI,UAAU,GAAG,EAAE;IAEnB,IAAI,SAAS,KAAK,UAAU,EAAE;AAC5B,QAAA,UAAU,GAAG,MAAM,IAAI,UAAU,CAAC,MAAM,CAAC;AACzC,QAAA,cAAc,GAAG,MAAM,IAAI,UAAU,CAAC,MAAM,CAAC;AAC7C,QAAA,SAAS,GAAG,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC;QAChC,aAAa,GAAG,QAAQ;AACzB;AAAM,SAAA;AACL,QAAA,UAAU,GAAG,MAAM,IAAI,UAAU,CAAC,MAAM,CAAC;AACzC,QAAA,cAAc,GAAG,MAAM,IAAI,UAAU,CAAC,MAAM,CAAC;AAC7C,QAAA,UAAU,GAAG,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC;QACjC,aAAa,GAAG,KAAK;AACtB;;;IAID,IACE,CAAC,SAAS,KAAK,UAAU,IAAI,MAAM,KAAK,SAAS;SAChD,SAAS,KAAK,YAAY,IAAI,MAAM,KAAK,SAAS,CAAC,EACpD;QACA,QAAQ,GAAG,CAAC;AACb;IAED,OAAO;qBACU,UAAU,CAAA;yBACN,cAAc,CAAA;wBACf,aAAa,CAAA;;;gBAGrB,QAAQ,CAAA;;;;sBAIF,SAAS,CAAA;uBACR,UAAU,CAAA;;KAE5B;AACH,CAAC;AAGH,KAAK,CAAC,WAAW,GAAG,OAAO;;;;"}
+{"version":3,"file":"Stack.js","sources":["../../../src/components/Stack/Stack.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport { StackProps } from './types';\nimport { Alignments } from './Alignments';\n\nimport { theme } from '../../theme';\nimport { Text } from '../Text';\n\n/**\n * Layout component.\n */\nexport const Stack = styled.div<StackProps>`\n  display: flex;\n\n  ${(props) => {\n    const { direction = 'vertical', alignX = 'start', alignY = 'start', spacing = 'base' } = props;\n\n    let alignItems;\n    let justifyContent;\n    let flexDirection;\n    let itemFlex;\n    let marginTop = '';\n    let marginLeft = '';\n\n    if (direction === 'vertical') {\n      alignItems = alignX && Alignments[alignX];\n      justifyContent = alignY && Alignments[alignY];\n      marginTop = theme.sizes[spacing];\n      flexDirection = 'column';\n    } else {\n      alignItems = alignY && Alignments[alignY];\n      justifyContent = alignX && Alignments[alignX];\n      marginLeft = theme.sizes[spacing];\n      flexDirection = 'row';\n    }\n\n    // These options result in 'justify-content: stretch' which doesn't exist,\n    // so instead we set the flex of child elements\n    if (\n      (direction === 'vertical' && alignY === 'stretch') ||\n      (direction === 'horizontal' && alignX === 'stretch')\n    ) {\n      itemFlex = 1;\n    }\n\n    return `\n      align-items: ${alignItems};\n      justify-content: ${justifyContent};\n      flex-direction: ${flexDirection};\n\n      & > * {\n        flex: ${itemFlex};\n      }\n\n      & > * + *,\n      // Increase specificity to overwrite Text's Margin: 0\n      && > * + ${Text} {\n        margin-top: ${marginTop};\n        margin-left: ${marginLeft};\n      }\n    `;\n  }}\n`;\n\nStack.displayName = 'Stack';\n"],"names":[],"mappings":";;;;;AAQA;;AAEG;AACU,MAAA,KAAK,GAAG,MAAM,CAAC,GAAG,CAG3B,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,aAAA,EAAA,CAAC,KAAK,KAAI;AACV,IAAA,MAAM,EAAE,SAAS,GAAG,UAAU,EAAE,MAAM,GAAG,OAAO,EAAE,MAAM,GAAG,OAAO,EAAE,OAAO,GAAG,MAAM,EAAE,GAAG,KAAK;AAE9F,IAAA,IAAI,UAAU;AACd,IAAA,IAAI,cAAc;AAClB,IAAA,IAAI,aAAa;AACjB,IAAA,IAAI,QAAQ;IACZ,IAAI,SAAS,GAAG,EAAE;IAClB,IAAI,UAAU,GAAG,EAAE;IAEnB,IAAI,SAAS,KAAK,UAAU,EAAE;AAC5B,QAAA,UAAU,GAAG,MAAM,IAAI,UAAU,CAAC,MAAM,CAAC;AACzC,QAAA,cAAc,GAAG,MAAM,IAAI,UAAU,CAAC,MAAM,CAAC;AAC7C,QAAA,SAAS,GAAG,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC;QAChC,aAAa,GAAG,QAAQ;AACzB;AAAM,SAAA;AACL,QAAA,UAAU,GAAG,MAAM,IAAI,UAAU,CAAC,MAAM,CAAC;AACzC,QAAA,cAAc,GAAG,MAAM,IAAI,UAAU,CAAC,MAAM,CAAC;AAC7C,QAAA,UAAU,GAAG,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC;QACjC,aAAa,GAAG,KAAK;AACtB;;;IAID,IACE,CAAC,SAAS,KAAK,UAAU,IAAI,MAAM,KAAK,SAAS;SAChD,SAAS,KAAK,YAAY,IAAI,MAAM,KAAK,SAAS,CAAC,EACpD;QACA,QAAQ,GAAG,CAAC;AACb;IAED,OAAO;qBACU,UAAU,CAAA;yBACN,cAAc,CAAA;wBACf,aAAa,CAAA;;;gBAGrB,QAAQ,CAAA;;;;;iBAKP,IAAI,CAAA;sBACC,SAAS,CAAA;uBACR,UAAU,CAAA;;KAE5B;AACH,CAAC;AAGH,KAAK,CAAC,WAAW,GAAG,OAAO;;;;"}

package/dist/components/index.d.ts

@@ -62,3 +62,4 @@ export { ViewTab } from './ViewTab';
 export { ViewsContainer } from './ViewsContainer';
 export { WeightInput } from './WeightInput';
 export { Indicator } from './Indicator';
+export { SelectDropdown } from './SelectDropdown';

package/dist/index.cjs

@@ -75,6 +75,7 @@ var ViewTab = require('./components/ViewTab/ViewTab.cjs');
 var ViewsContainer = require('./components/ViewsContainer/ViewsContainer.cjs');
 var index$5 = require('./components/WeightInput/index.cjs');
 var Indicator = require('./components/Indicator/Indicator.cjs');
+var index$6 = require('./components/SelectDropdown/index.cjs');
 var useClickOutside = require('./hooks/useClickOutside.cjs');
 var useDebounce = require('./hooks/useDebounce.cjs');
 var useDropdown = require('./hooks/useDropdown.cjs');
@@ -89,7 +90,7 @@ var buildClassnames = require('./utils/buildClassnames.cjs');
 var color = require('./utils/color.cjs');
 var generateId = require('./utils/generateId.cjs');
 var isExternalLink = require('./utils/isExternalLink.cjs');
-var index$6 = require('./theme/index.cjs');
+var index$7 = require('./theme/index.cjs');
 var ActiveCheckboxIcon = require('./tempIcons/ActiveCheckboxIcon.cjs');
 var ActiveRadioIcon = require('./tempIcons/ActiveRadioIcon.cjs');
 var ArrowDownIcon = require('./tempIcons/ArrowDownIcon.cjs');
@@ -220,6 +221,7 @@ exports.ViewTab = ViewTab.ViewTab;
 exports.ViewsContainer = ViewsContainer.ViewsContainer;
 exports.WeightInput = index$5.WeightInput;
 exports.Indicator = Indicator.Indicator;
+exports.SelectDropdown = index$6.SelectDropdown;
 exports.useClickOutside = useClickOutside.useClickOutside;
 exports.useDebounce = useDebounce.useDebounce;
 exports.useDropdown = useDropdown.useDropdown;
@@ -236,7 +238,7 @@ exports.getOpaqueHexColor = color.getOpaqueHexColor;
 exports.hexToRgb = color.hexToRgb;
 exports.generateId = generateId.generateId;
 exports.isExternalLink = isExternalLink.isExternalLink;
-exports.theme = index$6.theme;
+exports.theme = index$7.theme;
 exports.ActiveCheckboxIcon = ActiveCheckboxIcon.ActiveCheckboxIcon;
 exports.ActiveRadioIcon = ActiveRadioIcon.ActiveRadioIcon;
 exports.ArrowDownIcon = ArrowDownIcon.ArrowDownIcon;

package/dist/index.cjs.map

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

package/dist/index.js

@@ -73,6 +73,7 @@ export { ViewTab } from './components/ViewTab/ViewTab.js';
 export { ViewsContainer } from './components/ViewsContainer/ViewsContainer.js';
 export { WeightInput } from './components/WeightInput/index.js';
 export { Indicator } from './components/Indicator/Indicator.js';
+export { SelectDropdown } from './components/SelectDropdown/index.js';
 export { useClickOutside } from './hooks/useClickOutside.js';
 export { useDebounce } from './hooks/useDebounce.js';
 export { useDropdown } from './hooks/useDropdown.js';

package/dist/index.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veeqo/ui",
-  "version": "9.6.1",
+  "version": "9.6.3",
   "description": "New optimised component library for Veeqo.",
   "author": "Robert Wealthall",
   "license": "ISC",
@@ -37,7 +37,7 @@
     "patch": "npm version patch && npm run changelog:update",
     "minor": "npm version minor && npm run changelog:update",
     "major": "npm version major && npm run changelog:update",
-    "tags:remove": "node scripts/remove-tag.js",
+    "tags:remove": "node scripts/remove-tag.cjs",
     "tags:update": "git fetch --tags && git push --follow-tags",
     "changelog:update": "npm run tags:update && auto-changelog -p && git add CHANGELOG.md && git commit -m \"Update CHANGELOG\" && git push"
   },