@veeqo/ui 13.2.7 → 13.4.0

package/dist/components/Dropdown/Dropdown.cjs

@@ -10,7 +10,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 const Dropdown = ({ id, shouldShow, disabled, setShouldShow, ctaIconSlot, ctaProps, renderCta, ...dropdownProps }) => {
     var _a;
-    const anchorRef = React.useRef(null);
+    const [anchorRefState, setAnchorRefState] = React.useState(null);
     const buttonProps = {
         'aria-haspopup': 'dialog',
         'aria-expanded': shouldShow,
@@ -20,10 +20,10 @@ const Dropdown = ({ id, shouldShow, disabled, setShouldShow, ctaIconSlot, ctaPro
     };
     // If a custom render function is provided, use it to render the button
     // Otherwise, use the default Button component
-    const ctaButton = (_a = renderCta === null || renderCta === undefined ? undefined : renderCta(buttonProps, anchorRef)) !== null && _a !== undefined ? _a : (React__default.default.createElement(Button.Button, { ref: anchorRef, iconSlot: ctaIconSlot, dropdown: true, ...buttonProps, ...ctaProps }));
+    const ctaButton = (_a = renderCta === null || renderCta === undefined ? undefined : renderCta(buttonProps, setAnchorRefState)) !== null && _a !== undefined ? _a : (React__default.default.createElement(Button.Button, { ref: setAnchorRefState, iconSlot: ctaIconSlot, dropdown: true, ...buttonProps, ...ctaProps }));
     return (React__default.default.createElement(React__default.default.Fragment, null,
         ctaButton,
-        shouldShow && (React__default.default.createElement(DropdownPopover.DropdownPopover, { id: id, anchorElement: anchorRef.current, onShouldClose: () => setShouldShow === null || setShouldShow === undefined ? undefined : setShouldShow(false), ...dropdownProps }))));
+        shouldShow && (React__default.default.createElement(DropdownPopover.DropdownPopover, { id: id, anchorElement: anchorRefState, onShouldClose: () => setShouldShow === null || setShouldShow === undefined ? undefined : setShouldShow(false), ...dropdownProps }))));
 };
 
 exports.Dropdown = Dropdown;

package/dist/components/Dropdown/Dropdown.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.cjs","sources":["../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { Button } from '../Button';\nimport { DropdownPopover } from './DropdownPopover';\nimport { DropdownProps } from './types';\n\nexport const Dropdown = ({\n  id,\n  shouldShow,\n  disabled,\n  setShouldShow,\n  ctaIconSlot,\n  ctaProps,\n  renderCta,\n  ...dropdownProps\n}: DropdownProps) => {\n  const anchorRef = useRef<HTMLButtonElement | null>(null);\n\n  const buttonProps: React.ButtonHTMLAttributes<HTMLButtonElement> = {\n    'aria-haspopup': 'dialog',\n    'aria-expanded': shouldShow,\n    'aria-controls': id,\n    onClick: () => setShouldShow?.(!shouldShow),\n    disabled,\n  };\n\n  // If a custom render function is provided, use it to render the button\n  // Otherwise, use the default Button component\n  const ctaButton = renderCta?.(buttonProps, anchorRef) ?? (\n    <Button ref={anchorRef} iconSlot={ctaIconSlot} dropdown {...buttonProps} {...ctaProps} />\n  );\n\n  return (\n    <>\n      {ctaButton}\n\n      {shouldShow && (\n        <DropdownPopover\n          id={id}\n          anchorElement={anchorRef.current}\n          onShouldClose={() => setShouldShow?.(false)}\n          {...dropdownProps}\n        />\n      )}\n    </>\n  );\n};\n"],"names":["useRef","React","Button","DropdownPopover"],"mappings":";;;;;;;;;;AAKa,MAAA,QAAQ,GAAG,CAAC,EACvB,EAAE,EACF,UAAU,EACV,QAAQ,EACR,aAAa,EACb,WAAW,EACX,QAAQ,EACR,SAAS,EACT,GAAG,aAAa,EACF,KAAI;;AAClB,IAAA,MAAM,SAAS,GAAGA,YAAM,CAA2B,IAAI,CAAC;AAExD,IAAA,MAAM,WAAW,GAAkD;AACjE,QAAA,eAAe,EAAE,QAAQ;AACzB,QAAA,eAAe,EAAE,UAAU;AAC3B,QAAA,eAAe,EAAE,EAAE;AACnB,QAAA,OAAO,EAAE,MAAM,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,SAAA,GAAA,SAAA,GAAb,aAAa,CAAG,CAAC,UAAU,CAAC;QAC3C,QAAQ;KACT;;;AAID,IAAA,MAAM,SAAS,GAAG,CAAA,EAAA,GAAA,SAAS,aAAT,SAAS,KAAA,SAAA,GAAA,SAAA,GAAT,SAAS,CAAG,WAAW,EAAE,SAAS,CAAC,uCACnDC,sBAAA,CAAA,aAAA,CAACC,aAAM,EAAA,EAAC,GAAG,EAAE,SAAS,EAAE,QAAQ,EAAE,WAAW,EAAE,QAAQ,WAAK,WAAW,EAAA,GAAM,QAAQ,EAAA,CAAI,CAC1F;AAED,IAAA,QACED,sBAAA,CAAA,aAAA,CAAAA,sBAAA,CAAA,QAAA,EAAA,IAAA;QACG,SAAS;AAET,QAAA,UAAU,KACTA,sBAAC,CAAA,aAAA,CAAAE,+BAAe,IACd,EAAE,EAAE,EAAE,EACN,aAAa,EAAE,SAAS,CAAC,OAAO,EAChC,aAAa,EAAE,MAAM,aAAa,KAAb,IAAA,IAAA,aAAa,6BAAb,aAAa,CAAG,KAAK,CAAC,KACvC,aAAa,EAAA,CACjB,CACH,CACA;AAEP;;;;"}
+{"version":3,"file":"Dropdown.cjs","sources":["../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { Button } from '../Button';\nimport { DropdownPopover } from './DropdownPopover';\nimport { DropdownProps } from './types';\n\nexport const Dropdown = ({\n  id,\n  shouldShow,\n  disabled,\n  setShouldShow,\n  ctaIconSlot,\n  ctaProps,\n  renderCta,\n  ...dropdownProps\n}: DropdownProps) => {\n  const [anchorRefState, setAnchorRefState] = useState<HTMLButtonElement | null>(null);\n\n  const buttonProps: React.ButtonHTMLAttributes<HTMLButtonElement> = {\n    'aria-haspopup': 'dialog',\n    'aria-expanded': shouldShow,\n    'aria-controls': id,\n    onClick: () => setShouldShow?.(!shouldShow),\n    disabled,\n  };\n\n  // If a custom render function is provided, use it to render the button\n  // Otherwise, use the default Button component\n  const ctaButton = renderCta?.(buttonProps, setAnchorRefState) ?? (\n    <Button\n      ref={setAnchorRefState}\n      iconSlot={ctaIconSlot}\n      dropdown\n      {...buttonProps}\n      {...ctaProps}\n    />\n  );\n\n  return (\n    <>\n      {ctaButton}\n\n      {shouldShow && (\n        <DropdownPopover\n          id={id}\n          anchorElement={anchorRefState}\n          onShouldClose={() => setShouldShow?.(false)}\n          {...dropdownProps}\n        />\n      )}\n    </>\n  );\n};\n"],"names":["useState","React","Button","DropdownPopover"],"mappings":";;;;;;;;;;AAKa,MAAA,QAAQ,GAAG,CAAC,EACvB,EAAE,EACF,UAAU,EACV,QAAQ,EACR,aAAa,EACb,WAAW,EACX,QAAQ,EACR,SAAS,EACT,GAAG,aAAa,EACF,KAAI;;IAClB,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAGA,cAAQ,CAA2B,IAAI,CAAC;AAEpF,IAAA,MAAM,WAAW,GAAkD;AACjE,QAAA,eAAe,EAAE,QAAQ;AACzB,QAAA,eAAe,EAAE,UAAU;AAC3B,QAAA,eAAe,EAAE,EAAE;AACnB,QAAA,OAAO,EAAE,MAAM,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,SAAA,GAAA,SAAA,GAAb,aAAa,CAAG,CAAC,UAAU,CAAC;QAC3C,QAAQ;KACT;;;AAID,IAAA,MAAM,SAAS,GAAG,CAAA,EAAA,GAAA,SAAS,aAAT,SAAS,KAAA,SAAA,GAAA,SAAA,GAAT,SAAS,CAAG,WAAW,EAAE,iBAAiB,CAAC,uCAC3DC,sBAAA,CAAA,aAAA,CAACC,aAAM,EAAA,EACL,GAAG,EAAE,iBAAiB,EACtB,QAAQ,EAAE,WAAW,EACrB,QAAQ,WACJ,WAAW,EAAA,GACX,QAAQ,EAAA,CACZ,CACH;AAED,IAAA,QACED,sBAAA,CAAA,aAAA,CAAAA,sBAAA,CAAA,QAAA,EAAA,IAAA;QACG,SAAS;AAET,QAAA,UAAU,KACTA,sBAAC,CAAA,aAAA,CAAAE,+BAAe,IACd,EAAE,EAAE,EAAE,EACN,aAAa,EAAE,cAAc,EAC7B,aAAa,EAAE,MAAM,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,SAAA,GAAA,SAAA,GAAb,aAAa,CAAG,KAAK,CAAC,EAAA,GACvC,aAAa,EAAA,CACjB,CACH,CACA;AAEP;;;;"}

package/dist/components/Dropdown/Dropdown.js

@@ -1,10 +1,10 @@
-import React__default, { useRef } from 'react';
+import React__default, { useState } from 'react';
 import { Button } from '../Button/Button.js';
 import { DropdownPopover } from './DropdownPopover.js';
 
 const Dropdown = ({ id, shouldShow, disabled, setShouldShow, ctaIconSlot, ctaProps, renderCta, ...dropdownProps }) => {
     var _a;
-    const anchorRef = useRef(null);
+    const [anchorRefState, setAnchorRefState] = useState(null);
     const buttonProps = {
         'aria-haspopup': 'dialog',
         'aria-expanded': shouldShow,
@@ -14,10 +14,10 @@ const Dropdown = ({ id, shouldShow, disabled, setShouldShow, ctaIconSlot, ctaPro
     };
     // If a custom render function is provided, use it to render the button
     // Otherwise, use the default Button component
-    const ctaButton = (_a = renderCta === null || renderCta === undefined ? undefined : renderCta(buttonProps, anchorRef)) !== null && _a !== undefined ? _a : (React__default.createElement(Button, { ref: anchorRef, iconSlot: ctaIconSlot, dropdown: true, ...buttonProps, ...ctaProps }));
+    const ctaButton = (_a = renderCta === null || renderCta === undefined ? undefined : renderCta(buttonProps, setAnchorRefState)) !== null && _a !== undefined ? _a : (React__default.createElement(Button, { ref: setAnchorRefState, iconSlot: ctaIconSlot, dropdown: true, ...buttonProps, ...ctaProps }));
     return (React__default.createElement(React__default.Fragment, null,
         ctaButton,
-        shouldShow && (React__default.createElement(DropdownPopover, { id: id, anchorElement: anchorRef.current, onShouldClose: () => setShouldShow === null || setShouldShow === undefined ? undefined : setShouldShow(false), ...dropdownProps }))));
+        shouldShow && (React__default.createElement(DropdownPopover, { id: id, anchorElement: anchorRefState, onShouldClose: () => setShouldShow === null || setShouldShow === undefined ? undefined : setShouldShow(false), ...dropdownProps }))));
 };
 
 export { Dropdown };

package/dist/components/Dropdown/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","sources":["../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { Button } from '../Button';\nimport { DropdownPopover } from './DropdownPopover';\nimport { DropdownProps } from './types';\n\nexport const Dropdown = ({\n  id,\n  shouldShow,\n  disabled,\n  setShouldShow,\n  ctaIconSlot,\n  ctaProps,\n  renderCta,\n  ...dropdownProps\n}: DropdownProps) => {\n  const anchorRef = useRef<HTMLButtonElement | null>(null);\n\n  const buttonProps: React.ButtonHTMLAttributes<HTMLButtonElement> = {\n    'aria-haspopup': 'dialog',\n    'aria-expanded': shouldShow,\n    'aria-controls': id,\n    onClick: () => setShouldShow?.(!shouldShow),\n    disabled,\n  };\n\n  // If a custom render function is provided, use it to render the button\n  // Otherwise, use the default Button component\n  const ctaButton = renderCta?.(buttonProps, anchorRef) ?? (\n    <Button ref={anchorRef} iconSlot={ctaIconSlot} dropdown {...buttonProps} {...ctaProps} />\n  );\n\n  return (\n    <>\n      {ctaButton}\n\n      {shouldShow && (\n        <DropdownPopover\n          id={id}\n          anchorElement={anchorRef.current}\n          onShouldClose={() => setShouldShow?.(false)}\n          {...dropdownProps}\n        />\n      )}\n    </>\n  );\n};\n"],"names":["React"],"mappings":";;;;AAKa,MAAA,QAAQ,GAAG,CAAC,EACvB,EAAE,EACF,UAAU,EACV,QAAQ,EACR,aAAa,EACb,WAAW,EACX,QAAQ,EACR,SAAS,EACT,GAAG,aAAa,EACF,KAAI;;AAClB,IAAA,MAAM,SAAS,GAAG,MAAM,CAA2B,IAAI,CAAC;AAExD,IAAA,MAAM,WAAW,GAAkD;AACjE,QAAA,eAAe,EAAE,QAAQ;AACzB,QAAA,eAAe,EAAE,UAAU;AAC3B,QAAA,eAAe,EAAE,EAAE;AACnB,QAAA,OAAO,EAAE,MAAM,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,SAAA,GAAA,SAAA,GAAb,aAAa,CAAG,CAAC,UAAU,CAAC;QAC3C,QAAQ;KACT;;;AAID,IAAA,MAAM,SAAS,GAAG,CAAA,EAAA,GAAA,SAAS,aAAT,SAAS,KAAA,SAAA,GAAA,SAAA,GAAT,SAAS,CAAG,WAAW,EAAE,SAAS,CAAC,uCACnDA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,GAAG,EAAE,SAAS,EAAE,QAAQ,EAAE,WAAW,EAAE,QAAQ,WAAK,WAAW,EAAA,GAAM,QAAQ,EAAA,CAAI,CAC1F;AAED,IAAA,QACEA,cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA;QACG,SAAS;AAET,QAAA,UAAU,KACTA,cAAC,CAAA,aAAA,CAAA,eAAe,IACd,EAAE,EAAE,EAAE,EACN,aAAa,EAAE,SAAS,CAAC,OAAO,EAChC,aAAa,EAAE,MAAM,aAAa,KAAb,IAAA,IAAA,aAAa,6BAAb,aAAa,CAAG,KAAK,CAAC,KACvC,aAAa,EAAA,CACjB,CACH,CACA;AAEP;;;;"}
+{"version":3,"file":"Dropdown.js","sources":["../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { Button } from '../Button';\nimport { DropdownPopover } from './DropdownPopover';\nimport { DropdownProps } from './types';\n\nexport const Dropdown = ({\n  id,\n  shouldShow,\n  disabled,\n  setShouldShow,\n  ctaIconSlot,\n  ctaProps,\n  renderCta,\n  ...dropdownProps\n}: DropdownProps) => {\n  const [anchorRefState, setAnchorRefState] = useState<HTMLButtonElement | null>(null);\n\n  const buttonProps: React.ButtonHTMLAttributes<HTMLButtonElement> = {\n    'aria-haspopup': 'dialog',\n    'aria-expanded': shouldShow,\n    'aria-controls': id,\n    onClick: () => setShouldShow?.(!shouldShow),\n    disabled,\n  };\n\n  // If a custom render function is provided, use it to render the button\n  // Otherwise, use the default Button component\n  const ctaButton = renderCta?.(buttonProps, setAnchorRefState) ?? (\n    <Button\n      ref={setAnchorRefState}\n      iconSlot={ctaIconSlot}\n      dropdown\n      {...buttonProps}\n      {...ctaProps}\n    />\n  );\n\n  return (\n    <>\n      {ctaButton}\n\n      {shouldShow && (\n        <DropdownPopover\n          id={id}\n          anchorElement={anchorRefState}\n          onShouldClose={() => setShouldShow?.(false)}\n          {...dropdownProps}\n        />\n      )}\n    </>\n  );\n};\n"],"names":["React"],"mappings":";;;;AAKa,MAAA,QAAQ,GAAG,CAAC,EACvB,EAAE,EACF,UAAU,EACV,QAAQ,EACR,aAAa,EACb,WAAW,EACX,QAAQ,EACR,SAAS,EACT,GAAG,aAAa,EACF,KAAI;;IAClB,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAA2B,IAAI,CAAC;AAEpF,IAAA,MAAM,WAAW,GAAkD;AACjE,QAAA,eAAe,EAAE,QAAQ;AACzB,QAAA,eAAe,EAAE,UAAU;AAC3B,QAAA,eAAe,EAAE,EAAE;AACnB,QAAA,OAAO,EAAE,MAAM,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,SAAA,GAAA,SAAA,GAAb,aAAa,CAAG,CAAC,UAAU,CAAC;QAC3C,QAAQ;KACT;;;AAID,IAAA,MAAM,SAAS,GAAG,CAAA,EAAA,GAAA,SAAS,aAAT,SAAS,KAAA,SAAA,GAAA,SAAA,GAAT,SAAS,CAAG,WAAW,EAAE,iBAAiB,CAAC,uCAC3DA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EACL,GAAG,EAAE,iBAAiB,EACtB,QAAQ,EAAE,WAAW,EACrB,QAAQ,WACJ,WAAW,EAAA,GACX,QAAQ,EAAA,CACZ,CACH;AAED,IAAA,QACEA,cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA;QACG,SAAS;AAET,QAAA,UAAU,KACTA,cAAC,CAAA,aAAA,CAAA,eAAe,IACd,EAAE,EAAE,EAAE,EACN,aAAa,EAAE,cAAc,EAC7B,aAAa,EAAE,MAAM,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,SAAA,GAAA,SAAA,GAAb,aAAa,CAAG,KAAK,CAAC,EAAA,GACvC,aAAa,EAAA,CACjB,CACH,CACA;AAEP;;;;"}

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

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode, Ref } from 'react';
+import { ReactElement, ReactNode } from 'react';
 import { PopoverProps } from '../Popover/types';
 import { ButtonProps } from '../Button/types';
 export type BasicDropdownProps = {
@@ -13,6 +13,6 @@ export type DropdownProps = Omit<BasicDropdownProps, 'anchorElement' | 'onShould
     setShouldShow?: (newValue: boolean) => void;
     ctaIconSlot?: ReactElement;
     ctaProps?: ButtonProps;
-    renderCta?: (buttonProps: React.ButtonHTMLAttributes<HTMLButtonElement>, anchorRef: Ref<HTMLButtonElement>) => ReactElement;
+    renderCta?: (buttonProps: React.ButtonHTMLAttributes<HTMLButtonElement>, anchorRef: (el: HTMLButtonElement | null) => void) => ReactElement;
     children?: ReactNode;
 };

package/dist/components/SelectDropdown/SelectDropdown.cjs

@@ -1,46 +1,28 @@
 'use strict';
 
 var React = require('react');
+var Search = require('../Search/Search.cjs');
+var Button = require('../Button/Button.cjs');
+var GridList = require('./components/OptionsContainers/GridList.cjs');
+var ListBox = require('./components/OptionsContainers/ListBox.cjs');
+var Dropdown = require('../Dropdown/Dropdown.cjs');
 var buildClassnames = require('../../utils/buildClassnames.cjs');
 require('uid/secure');
-var SelectedOption = require('./components/SelectedOption.cjs');
 var utils = require('./utils.cjs');
-var Dropdown = require('../Dropdown/Dropdown.cjs');
-var Search = require('../Search/Search.cjs');
-var Button = require('../Button/Button.cjs');
+var SelectedOption = require('./components/SelectedOption.cjs');
 var SelectDropdown_module = require('./SelectDropdown.module.scss.cjs');
 var form_module = require('../../utils/forms/form.module.scss.cjs');
-var ListBox = require('./components/OptionsContainers/ListBox.cjs');
-var GridList = require('./components/OptionsContainers/GridList.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, disabled, options, value, actions, isLoading = false, searchValue, emptyStateSlot, selectedSlot, onSearchChange, onChange, topAction, isSelectDropdownOpen = false, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, ...otherProps }) => {
-    const hasSection = options.flatMap((option) => option).some((item) => 'items' in item);
+const SelectDropdown = ({ id, className, placeholder = 'Select item', multiple = false, compact = false, hasError = false, disabled, options, value, actions, isLoading = false, searchValue, emptyStateSlot, selectedSlot, onSearchChange, onSelectionChange, topAction, isSelectOpen, setIsSelectOpen, hasSection, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, ...otherProps }) => {
     const classNames = utils.generateClassNames(className);
-    const [isSelectOpen, setIsSelectOpen] = React.useState(false);
     const selectedValues = utils.getSelectedValues(options, hasSection, value);
     const selectionMode = multiple ? 'multiple' : 'single';
     const hasRowAction = options.some((option) => 'onClickRowAction' in option && option.onClickRowAction);
-    const onSelectionChange = React.useCallback((keys) => {
-        const selectedKeys = Array.from(keys);
-        const newSelectedValues = utils.getSelectedValues(options, hasSection, selectedKeys);
-        if (multiple) {
-            onChange(newSelectedValues);
-        }
-        else {
-            onChange(newSelectedValues[0]);
-            if (!isSelectDropdownOpen) {
-                setIsSelectOpen(false);
-            }
-        }
-    }, [options, hasSection, multiple, onChange, isSelectDropdownOpen]);
     return (React__default.default.createElement(Dropdown.Dropdown, { id: `select-dropdown-${id}`, className: buildClassnames.buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.popover, SelectDropdown_module.dropdown, className]), shouldShow: isSelectOpen, setShouldShow: setIsSelectOpen, useAnchorWidth: true, disabled: disabled, renderCta: (buttonProps, anchorRef) => {
-            if (anchorRef && isSelectDropdownOpen) {
-                setIsSelectOpen(isSelectDropdownOpen);
-            }
             return (React__default.default.createElement("button", { ...buttonProps, type: "button", ref: anchorRef, className: buildClassnames.buildClassnames([
                     className,
                     SelectDropdown_module.dropdownTrigger,
@@ -56,7 +38,7 @@ const SelectDropdown = ({ id, className, placeholder = 'Select item', multiple =
         topAction && (React__default.default.createElement(React.Fragment, { key: topAction.label },
             React__default.default.createElement(Button.Button, { className: SelectDropdown_module.ctaButton, key: topAction.label, variant: "flat", ...topAction }),
             React__default.default.createElement("hr", { className: SelectDropdown_module.separator, key: `separator-${topAction.label}` }))),
-        hasRowAction ? (React__default.default.createElement(GridList.GridList, { id: id, className: classNames === null || classNames === undefined ? undefined : classNames.optionsContainer, ariaLabelledBy: ariaLabelledBy, ariaDescribedBy: ariaDescribedBy, selectionMode: selectionMode, options: options, onSelectionChange: onSelectionChange, selectedValues: selectedValues, isLoading: isLoading, emptyStateSlot: emptyStateSlot, ...otherProps })) : (React__default.default.createElement(ListBox.ListBox, { id: id, className: classNames === null || classNames === undefined ? undefined : classNames.optionsContainer, ariaLabelledBy: ariaLabelledBy, ariaDescribedBy: ariaDescribedBy, selectionMode: selectionMode, options: options, onSelectionChange: onSelectionChange, selectedValues: selectedValues, isLoading: isLoading, emptyStateSlot: emptyStateSlot, hasSection: hasSection, ...otherProps })), actions === null || actions === undefined ? undefined :
+        hasRowAction ? (React__default.default.createElement(GridList.GridList, { id: id, className: classNames.optionsContainer, ariaLabelledBy: ariaLabelledBy, ariaDescribedBy: ariaDescribedBy, selectionMode: selectionMode, options: options, onSelectionChange: onSelectionChange, selectedValues: selectedValues, isLoading: isLoading, emptyStateSlot: emptyStateSlot, ...otherProps })) : (React__default.default.createElement(ListBox.ListBox, { id: id, className: classNames.optionsContainer, ariaLabelledBy: ariaLabelledBy, ariaDescribedBy: ariaDescribedBy, selectionMode: selectionMode, options: options, onSelectionChange: onSelectionChange, selectedValues: selectedValues, isLoading: isLoading, emptyStateSlot: emptyStateSlot, hasSection: hasSection, ...otherProps })), actions === null || actions === undefined ? undefined :
         actions.map(({ label, ...actionProps }) => (React__default.default.createElement(React.Fragment, { key: label },
             React__default.default.createElement("hr", { className: SelectDropdown_module.separator, key: `separator-${label}` }),
             React__default.default.createElement(Button.Button, { className: SelectDropdown_module.ctaButton, variant: "flat", key: label, ...actionProps }))))));

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

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

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

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

package/dist/components/SelectDropdown/SelectDropdown.js

@@ -1,40 +1,22 @@
-import React__default, { useState, useCallback, Fragment } from 'react';
+import React__default, { Fragment } from 'react';
+import { Search } from '../Search/Search.js';
+import { Button } from '../Button/Button.js';
+import { GridList } from './components/OptionsContainers/GridList.js';
+import { ListBox } from './components/OptionsContainers/ListBox.js';
+import { Dropdown } from '../Dropdown/Dropdown.js';
 import { buildClassnames } from '../../utils/buildClassnames.js';
 import 'uid/secure';
-import { SelectedOption } from './components/SelectedOption.js';
 import { getSelectedValues, generateClassNames } from './utils.js';
-import { Dropdown } from '../Dropdown/Dropdown.js';
-import { Search } from '../Search/Search.js';
-import { Button } from '../Button/Button.js';
+import { SelectedOption } from './components/SelectedOption.js';
 import styles from './SelectDropdown.module.scss.js';
 import formStyles from '../../utils/forms/form.module.scss.js';
-import { ListBox } from './components/OptionsContainers/ListBox.js';
-import { GridList } from './components/OptionsContainers/GridList.js';
 
-const SelectDropdown = ({ id, className, placeholder = 'Select item', multiple = false, compact = false, hasError = false, disabled, options, value, actions, isLoading = false, searchValue, emptyStateSlot, selectedSlot, onSearchChange, onChange, topAction, isSelectDropdownOpen = false, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, ...otherProps }) => {
-    const hasSection = options.flatMap((option) => option).some((item) => 'items' in item);
+const SelectDropdown = ({ id, className, placeholder = 'Select item', multiple = false, compact = false, hasError = false, disabled, options, value, actions, isLoading = false, searchValue, emptyStateSlot, selectedSlot, onSearchChange, onSelectionChange, topAction, isSelectOpen, setIsSelectOpen, hasSection, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, ...otherProps }) => {
     const classNames = generateClassNames(className);
-    const [isSelectOpen, setIsSelectOpen] = useState(false);
     const selectedValues = getSelectedValues(options, hasSection, value);
     const selectionMode = multiple ? 'multiple' : 'single';
     const hasRowAction = options.some((option) => 'onClickRowAction' in option && option.onClickRowAction);
-    const onSelectionChange = useCallback((keys) => {
-        const selectedKeys = Array.from(keys);
-        const newSelectedValues = getSelectedValues(options, hasSection, selectedKeys);
-        if (multiple) {
-            onChange(newSelectedValues);
-        }
-        else {
-            onChange(newSelectedValues[0]);
-            if (!isSelectDropdownOpen) {
-                setIsSelectOpen(false);
-            }
-        }
-    }, [options, hasSection, multiple, onChange, isSelectDropdownOpen]);
     return (React__default.createElement(Dropdown, { id: `select-dropdown-${id}`, className: buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.popover, styles.dropdown, className]), shouldShow: isSelectOpen, setShouldShow: setIsSelectOpen, useAnchorWidth: true, disabled: disabled, renderCta: (buttonProps, anchorRef) => {
-            if (anchorRef && isSelectDropdownOpen) {
-                setIsSelectOpen(isSelectDropdownOpen);
-            }
             return (React__default.createElement("button", { ...buttonProps, type: "button", ref: anchorRef, className: buildClassnames([
                     className,
                     styles.dropdownTrigger,
@@ -50,7 +32,7 @@ const SelectDropdown = ({ id, className, placeholder = 'Select item', multiple =
         topAction && (React__default.createElement(Fragment, { key: topAction.label },
             React__default.createElement(Button, { className: styles.ctaButton, key: topAction.label, variant: "flat", ...topAction }),
             React__default.createElement("hr", { className: styles.separator, key: `separator-${topAction.label}` }))),
-        hasRowAction ? (React__default.createElement(GridList, { id: id, className: classNames === null || classNames === undefined ? undefined : classNames.optionsContainer, ariaLabelledBy: ariaLabelledBy, ariaDescribedBy: ariaDescribedBy, selectionMode: selectionMode, options: options, onSelectionChange: onSelectionChange, selectedValues: selectedValues, isLoading: isLoading, emptyStateSlot: emptyStateSlot, ...otherProps })) : (React__default.createElement(ListBox, { id: id, className: classNames === null || classNames === undefined ? undefined : classNames.optionsContainer, ariaLabelledBy: ariaLabelledBy, ariaDescribedBy: ariaDescribedBy, selectionMode: selectionMode, options: options, onSelectionChange: onSelectionChange, selectedValues: selectedValues, isLoading: isLoading, emptyStateSlot: emptyStateSlot, hasSection: hasSection, ...otherProps })), actions === null || actions === undefined ? undefined :
+        hasRowAction ? (React__default.createElement(GridList, { id: id, className: classNames.optionsContainer, ariaLabelledBy: ariaLabelledBy, ariaDescribedBy: ariaDescribedBy, selectionMode: selectionMode, options: options, onSelectionChange: onSelectionChange, selectedValues: selectedValues, isLoading: isLoading, emptyStateSlot: emptyStateSlot, ...otherProps })) : (React__default.createElement(ListBox, { id: id, className: classNames.optionsContainer, ariaLabelledBy: ariaLabelledBy, ariaDescribedBy: ariaDescribedBy, selectionMode: selectionMode, options: options, onSelectionChange: onSelectionChange, selectedValues: selectedValues, isLoading: isLoading, emptyStateSlot: emptyStateSlot, hasSection: hasSection, ...otherProps })), actions === null || actions === undefined ? undefined :
         actions.map(({ label, ...actionProps }) => (React__default.createElement(Fragment, { key: label },
             React__default.createElement("hr", { className: styles.separator, key: `separator-${label}` }),
             React__default.createElement(Button, { className: styles.ctaButton, variant: "flat", key: label, ...actionProps }))))));

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

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

package/dist/components/SelectDropdown/SelectDropdownControlled.cjs

@@ -0,0 +1,29 @@
+'use strict';
+
+var React = require('react');
+var SelectDropdown = require('./SelectDropdown.cjs');
+var utils = require('./utils.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const SelectDropdownControlled = ({ multiple = false, options, onChange, ...otherProps }) => {
+    const [isSelectOpen, setIsSelectOpen] = React.useState(false);
+    const hasSection = options.flatMap((option) => option).some((item) => 'items' in item);
+    const onSelectionChange = React.useCallback((keys) => {
+        const selectedKeys = Array.from(keys);
+        const newSelectedValues = utils.getSelectedValues(options, hasSection, selectedKeys);
+        if (multiple) {
+            onChange(newSelectedValues);
+        }
+        else {
+            onChange(newSelectedValues[0]);
+            setIsSelectOpen(false);
+        }
+    }, [options, hasSection, multiple, onChange]);
+    return (React__default.default.createElement(SelectDropdown.SelectDropdown, { ...otherProps, multiple: multiple, options: options, isSelectOpen: isSelectOpen, setIsSelectOpen: setIsSelectOpen, onSelectionChange: onSelectionChange, hasSection: hasSection }));
+};
+
+exports.SelectDropdownControlled = SelectDropdownControlled;
+//# sourceMappingURL=SelectDropdownControlled.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectDropdownControlled.cjs","sources":["../../../src/components/SelectDropdown/SelectDropdownControlled.tsx"],"sourcesContent":["import React, { useCallback, useState } from 'react';\nimport { Selection } from 'react-aria-components';\n\nimport { SelectDropdownItem, SelectDropdownControlledProps } from './types';\nimport { SelectDropdown } from './SelectDropdown';\nimport { getSelectedValues } from './utils';\n\nexport const SelectDropdownControlled = ({\n  multiple = false,\n  options,\n  onChange,\n  ...otherProps\n}: SelectDropdownControlledProps) => {\n  const [isSelectOpen, setIsSelectOpen] = useState(false);\n\n  const hasSection = options.flatMap((option) => option).some((item) => 'items' in item);\n\n  const onSelectionChange = useCallback(\n    (keys: Selection) => {\n      const selectedKeys = Array.from(keys);\n      const newSelectedValues = getSelectedValues(options, hasSection, selectedKeys);\n\n      if (multiple) {\n        (onChange as (items: SelectDropdownItem[]) => void)(newSelectedValues);\n      } else {\n        (onChange as (item: SelectDropdownItem) => void)(newSelectedValues[0]);\n        setIsSelectOpen(false);\n      }\n    },\n    [options, hasSection, multiple, onChange],\n  );\n\n  return (\n    <SelectDropdown\n      {...otherProps}\n      multiple={multiple}\n      options={options}\n      isSelectOpen={isSelectOpen}\n      setIsSelectOpen={setIsSelectOpen}\n      onSelectionChange={onSelectionChange}\n      hasSection={hasSection}\n    />\n  );\n};\n"],"names":["useState","useCallback","getSelectedValues","React","SelectDropdown"],"mappings":";;;;;;;;;;AAOa,MAAA,wBAAwB,GAAG,CAAC,EACvC,QAAQ,GAAG,KAAK,EAChB,OAAO,EACP,QAAQ,EACR,GAAG,UAAU,EACiB,KAAI;IAClC,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAGA,cAAQ,CAAC,KAAK,CAAC;IAEvD,MAAM,UAAU,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC,MAAM,KAAK,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,OAAO,IAAI,IAAI,CAAC;AAEtF,IAAA,MAAM,iBAAiB,GAAGC,iBAAW,CACnC,CAAC,IAAe,KAAI;QAClB,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC;QACrC,MAAM,iBAAiB,GAAGC,uBAAiB,CAAC,OAAO,EAAE,UAAU,EAAE,YAAY,CAAC;AAE9E,QAAA,IAAI,QAAQ,EAAE;YACX,QAAkD,CAAC,iBAAiB,CAAC;AACvE;AAAM,aAAA;AACJ,YAAA,QAA+C,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC;YACtE,eAAe,CAAC,KAAK,CAAC;AACvB;KACF,EACD,CAAC,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAC1C;AAED,IAAA,QACEC,sBAAA,CAAA,aAAA,CAACC,6BAAc,EAAA,EAAA,GACT,UAAU,EACd,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,YAAY,EAC1B,eAAe,EAAE,eAAe,EAChC,iBAAiB,EAAE,iBAAiB,EACpC,UAAU,EAAE,UAAU,EAAA,CACtB;AAEN;;;;"}

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { SelectDropdownControlledProps } from './types';
+export declare const SelectDropdownControlled: ({ multiple, options, onChange, ...otherProps }: SelectDropdownControlledProps) => React.JSX.Element;

package/dist/components/SelectDropdown/SelectDropdownControlled.js

@@ -0,0 +1,23 @@
+import React__default, { useState, useCallback } from 'react';
+import { SelectDropdown } from './SelectDropdown.js';
+import { getSelectedValues } from './utils.js';
+
+const SelectDropdownControlled = ({ multiple = false, options, onChange, ...otherProps }) => {
+    const [isSelectOpen, setIsSelectOpen] = useState(false);
+    const hasSection = options.flatMap((option) => option).some((item) => 'items' in item);
+    const onSelectionChange = useCallback((keys) => {
+        const selectedKeys = Array.from(keys);
+        const newSelectedValues = getSelectedValues(options, hasSection, selectedKeys);
+        if (multiple) {
+            onChange(newSelectedValues);
+        }
+        else {
+            onChange(newSelectedValues[0]);
+            setIsSelectOpen(false);
+        }
+    }, [options, hasSection, multiple, onChange]);
+    return (React__default.createElement(SelectDropdown, { ...otherProps, multiple: multiple, options: options, isSelectOpen: isSelectOpen, setIsSelectOpen: setIsSelectOpen, onSelectionChange: onSelectionChange, hasSection: hasSection }));
+};
+
+export { SelectDropdownControlled };
+//# sourceMappingURL=SelectDropdownControlled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectDropdownControlled.js","sources":["../../../src/components/SelectDropdown/SelectDropdownControlled.tsx"],"sourcesContent":["import React, { useCallback, useState } from 'react';\nimport { Selection } from 'react-aria-components';\n\nimport { SelectDropdownItem, SelectDropdownControlledProps } from './types';\nimport { SelectDropdown } from './SelectDropdown';\nimport { getSelectedValues } from './utils';\n\nexport const SelectDropdownControlled = ({\n  multiple = false,\n  options,\n  onChange,\n  ...otherProps\n}: SelectDropdownControlledProps) => {\n  const [isSelectOpen, setIsSelectOpen] = useState(false);\n\n  const hasSection = options.flatMap((option) => option).some((item) => 'items' in item);\n\n  const onSelectionChange = useCallback(\n    (keys: Selection) => {\n      const selectedKeys = Array.from(keys);\n      const newSelectedValues = getSelectedValues(options, hasSection, selectedKeys);\n\n      if (multiple) {\n        (onChange as (items: SelectDropdownItem[]) => void)(newSelectedValues);\n      } else {\n        (onChange as (item: SelectDropdownItem) => void)(newSelectedValues[0]);\n        setIsSelectOpen(false);\n      }\n    },\n    [options, hasSection, multiple, onChange],\n  );\n\n  return (\n    <SelectDropdown\n      {...otherProps}\n      multiple={multiple}\n      options={options}\n      isSelectOpen={isSelectOpen}\n      setIsSelectOpen={setIsSelectOpen}\n      onSelectionChange={onSelectionChange}\n      hasSection={hasSection}\n    />\n  );\n};\n"],"names":["React"],"mappings":";;;;AAOa,MAAA,wBAAwB,GAAG,CAAC,EACvC,QAAQ,GAAG,KAAK,EAChB,OAAO,EACP,QAAQ,EACR,GAAG,UAAU,EACiB,KAAI;IAClC,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IAEvD,MAAM,UAAU,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC,MAAM,KAAK,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,OAAO,IAAI,IAAI,CAAC;AAEtF,IAAA,MAAM,iBAAiB,GAAG,WAAW,CACnC,CAAC,IAAe,KAAI;QAClB,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC;QACrC,MAAM,iBAAiB,GAAG,iBAAiB,CAAC,OAAO,EAAE,UAAU,EAAE,YAAY,CAAC;AAE9E,QAAA,IAAI,QAAQ,EAAE;YACX,QAAkD,CAAC,iBAAiB,CAAC;AACvE;AAAM,aAAA;AACJ,YAAA,QAA+C,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC;YACtE,eAAe,CAAC,KAAK,CAAC;AACvB;KACF,EACD,CAAC,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAC1C;AAED,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,cAAc,EAAA,EAAA,GACT,UAAU,EACd,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,YAAY,EAC1B,eAAe,EAAE,eAAe,EAChC,iBAAiB,EAAE,iBAAiB,EACpC,UAAU,EAAE,UAAU,EAAA,CACtB;AAEN;;;;"}

package/dist/components/SelectDropdown/SelectDropdownUncontrolled.cjs

@@ -0,0 +1,27 @@
+'use strict';
+
+var React = require('react');
+var SelectDropdown = require('./SelectDropdown.cjs');
+var utils = require('./utils.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const SelectDropdownUncontrolled = ({ multiple = false, options, onChange, isSelectOpen, setIsSelectOpen, ...otherProps }) => {
+    const hasSection = options.flatMap((option) => option).some((item) => 'items' in item);
+    const onSelectionChange = React.useCallback((keys) => {
+        const selectedKeys = Array.from(keys);
+        const newSelectedValues = utils.getSelectedValues(options, hasSection, selectedKeys);
+        if (multiple) {
+            onChange(newSelectedValues);
+        }
+        else {
+            onChange(newSelectedValues[0]);
+        }
+    }, [options, hasSection, multiple, onChange]);
+    return (React__default.default.createElement(SelectDropdown.SelectDropdown, { ...otherProps, multiple: multiple, options: options, isSelectOpen: isSelectOpen, setIsSelectOpen: setIsSelectOpen, onSelectionChange: onSelectionChange, hasSection: hasSection }));
+};
+
+exports.SelectDropdownUncontrolled = SelectDropdownUncontrolled;
+//# sourceMappingURL=SelectDropdownUncontrolled.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectDropdownUncontrolled.cjs","sources":["../../../src/components/SelectDropdown/SelectDropdownUncontrolled.tsx"],"sourcesContent":["import React, { useCallback } from 'react';\nimport { Selection } from 'react-aria-components';\n\nimport { SelectDropdownItem, SelectDropdownUncontrolledProps } from './types';\nimport { SelectDropdown } from './SelectDropdown';\nimport { getSelectedValues } from './utils';\n\nexport const SelectDropdownUncontrolled = ({\n  multiple = false,\n  options,\n  onChange,\n  isSelectOpen,\n  setIsSelectOpen,\n  ...otherProps\n}: SelectDropdownUncontrolledProps) => {\n  const hasSection = options.flatMap((option) => option).some((item) => 'items' in item);\n\n  const onSelectionChange = useCallback(\n    (keys: Selection) => {\n      const selectedKeys = Array.from(keys);\n      const newSelectedValues = getSelectedValues(options, hasSection, selectedKeys);\n\n      if (multiple) {\n        (onChange as (items: SelectDropdownItem[]) => void)(newSelectedValues);\n      } else {\n        (onChange as (item: SelectDropdownItem) => void)(newSelectedValues[0]);\n      }\n    },\n    [options, hasSection, multiple, onChange],\n  );\n\n  return (\n    <SelectDropdown\n      {...otherProps}\n      multiple={multiple}\n      options={options}\n      isSelectOpen={isSelectOpen}\n      setIsSelectOpen={setIsSelectOpen}\n      onSelectionChange={onSelectionChange}\n      hasSection={hasSection}\n    />\n  );\n};\n"],"names":["useCallback","getSelectedValues","React","SelectDropdown"],"mappings":";;;;;;;;;;MAOa,0BAA0B,GAAG,CAAC,EACzC,QAAQ,GAAG,KAAK,EAChB,OAAO,EACP,QAAQ,EACR,YAAY,EACZ,eAAe,EACf,GAAG,UAAU,EACmB,KAAI;IACpC,MAAM,UAAU,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC,MAAM,KAAK,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,OAAO,IAAI,IAAI,CAAC;AAEtF,IAAA,MAAM,iBAAiB,GAAGA,iBAAW,CACnC,CAAC,IAAe,KAAI;QAClB,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC;QACrC,MAAM,iBAAiB,GAAGC,uBAAiB,CAAC,OAAO,EAAE,UAAU,EAAE,YAAY,CAAC;AAE9E,QAAA,IAAI,QAAQ,EAAE;YACX,QAAkD,CAAC,iBAAiB,CAAC;AACvE;AAAM,aAAA;AACJ,YAAA,QAA+C,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC;AACvE;KACF,EACD,CAAC,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAC1C;AAED,IAAA,QACEC,sBAAA,CAAA,aAAA,CAACC,6BAAc,EAAA,EAAA,GACT,UAAU,EACd,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,YAAY,EAC1B,eAAe,EAAE,eAAe,EAChC,iBAAiB,EAAE,iBAAiB,EACpC,UAAU,EAAE,UAAU,EAAA,CACtB;AAEN;;;;"}

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { SelectDropdownUncontrolledProps } from './types';
+export declare const SelectDropdownUncontrolled: ({ multiple, options, onChange, isSelectOpen, setIsSelectOpen, ...otherProps }: SelectDropdownUncontrolledProps) => React.JSX.Element;

package/dist/components/SelectDropdown/SelectDropdownUncontrolled.js

@@ -0,0 +1,21 @@
+import React__default, { useCallback } from 'react';
+import { SelectDropdown } from './SelectDropdown.js';
+import { getSelectedValues } from './utils.js';
+
+const SelectDropdownUncontrolled = ({ multiple = false, options, onChange, isSelectOpen, setIsSelectOpen, ...otherProps }) => {
+    const hasSection = options.flatMap((option) => option).some((item) => 'items' in item);
+    const onSelectionChange = useCallback((keys) => {
+        const selectedKeys = Array.from(keys);
+        const newSelectedValues = getSelectedValues(options, hasSection, selectedKeys);
+        if (multiple) {
+            onChange(newSelectedValues);
+        }
+        else {
+            onChange(newSelectedValues[0]);
+        }
+    }, [options, hasSection, multiple, onChange]);
+    return (React__default.createElement(SelectDropdown, { ...otherProps, multiple: multiple, options: options, isSelectOpen: isSelectOpen, setIsSelectOpen: setIsSelectOpen, onSelectionChange: onSelectionChange, hasSection: hasSection }));
+};
+
+export { SelectDropdownUncontrolled };
+//# sourceMappingURL=SelectDropdownUncontrolled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectDropdownUncontrolled.js","sources":["../../../src/components/SelectDropdown/SelectDropdownUncontrolled.tsx"],"sourcesContent":["import React, { useCallback } from 'react';\nimport { Selection } from 'react-aria-components';\n\nimport { SelectDropdownItem, SelectDropdownUncontrolledProps } from './types';\nimport { SelectDropdown } from './SelectDropdown';\nimport { getSelectedValues } from './utils';\n\nexport const SelectDropdownUncontrolled = ({\n  multiple = false,\n  options,\n  onChange,\n  isSelectOpen,\n  setIsSelectOpen,\n  ...otherProps\n}: SelectDropdownUncontrolledProps) => {\n  const hasSection = options.flatMap((option) => option).some((item) => 'items' in item);\n\n  const onSelectionChange = useCallback(\n    (keys: Selection) => {\n      const selectedKeys = Array.from(keys);\n      const newSelectedValues = getSelectedValues(options, hasSection, selectedKeys);\n\n      if (multiple) {\n        (onChange as (items: SelectDropdownItem[]) => void)(newSelectedValues);\n      } else {\n        (onChange as (item: SelectDropdownItem) => void)(newSelectedValues[0]);\n      }\n    },\n    [options, hasSection, multiple, onChange],\n  );\n\n  return (\n    <SelectDropdown\n      {...otherProps}\n      multiple={multiple}\n      options={options}\n      isSelectOpen={isSelectOpen}\n      setIsSelectOpen={setIsSelectOpen}\n      onSelectionChange={onSelectionChange}\n      hasSection={hasSection}\n    />\n  );\n};\n"],"names":["React"],"mappings":";;;;MAOa,0BAA0B,GAAG,CAAC,EACzC,QAAQ,GAAG,KAAK,EAChB,OAAO,EACP,QAAQ,EACR,YAAY,EACZ,eAAe,EACf,GAAG,UAAU,EACmB,KAAI;IACpC,MAAM,UAAU,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC,MAAM,KAAK,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,OAAO,IAAI,IAAI,CAAC;AAEtF,IAAA,MAAM,iBAAiB,GAAG,WAAW,CACnC,CAAC,IAAe,KAAI;QAClB,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC;QACrC,MAAM,iBAAiB,GAAG,iBAAiB,CAAC,OAAO,EAAE,UAAU,EAAE,YAAY,CAAC;AAE9E,QAAA,IAAI,QAAQ,EAAE;YACX,QAAkD,CAAC,iBAAiB,CAAC;AACvE;AAAM,aAAA;AACJ,YAAA,QAA+C,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC;AACvE;KACF,EACD,CAAC,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAC1C;AAED,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,cAAc,EAAA,EAAA,GACT,UAAU,EACd,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,YAAY,EAC1B,eAAe,EAAE,eAAe,EAChC,iBAAiB,EAAE,iBAAiB,EACpC,UAAU,EAAE,UAAU,EAAA,CACtB;AAEN;;;;"}

package/dist/components/SelectDropdown/components/GridItem/GridItem.js

@@ -9,14 +9,14 @@ import 'uid/secure';
 import '../../../../hooks/useFocusVisible.js';
 import { useId } from '../../../../hooks/useId.js';
 import 'lodash.throttle';
-import itemStyles from '../item.module.scss.js';
-import styles from './GridItem.module.scss.js';
+import styles from '../item.module.scss.js';
+import styles$1 from './GridItem.module.scss.js';
 
 function GridItem({ id, label, href, appearance = 'primary', className, onClickRowAction, rowActionAriaLabel, isRowActionDisabled = false, ...props }) {
     const idComputed = useId({ id, prefix: 'grid-item' });
     return (React__default.createElement(GridListItem, { id: idComputed, textValue: label, href: href, className: buildClassnames([
-            itemStyles.item,
-            itemStyles[`appearance-${appearance}`],
+            styles.item,
+            styles[`appearance-${appearance}`],
             className,
         ]), ...props }, ({ selectionMode, allowsDragging, isSelected, isHovered }) => (React__default.createElement(FlexRow, { flexWrap: "nowrap", justifyContent: "space-between" },
         React__default.createElement(ItemContent, { selectionMode: selectionMode, allowsDragging: allowsDragging, isSelected: isSelected, isHovered: isHovered, label: label, isLink: Boolean(href), appearance: appearance, itemType: "grid", ...props }),
@@ -24,7 +24,7 @@ function GridItem({ id, label, href, appearance = 'primary', className, onClickR
         /** onPointerDown event prevents click events from bubbling up to the GridListItem.
          *  onKeyDown event prevents keyboard events from bubbling up to the GridListItem.
          */
-        React__default.createElement(Button, { onClick: onClickRowAction, disabled: isRowActionDisabled, onPointerDown: (event) => event.stopPropagation(), onKeyDown: (event) => event.stopPropagation(), variant: "flat", iconSlot: React__default.createElement(ArrowRightIcon, null), "aria-label": rowActionAriaLabel || `${label} row action`, className: styles.actionButton }))))));
+        React__default.createElement(Button, { onClick: onClickRowAction, disabled: isRowActionDisabled, onPointerDown: (event) => event.stopPropagation(), onKeyDown: (event) => event.stopPropagation(), variant: "flat", iconSlot: React__default.createElement(ArrowRightIcon, null), "aria-label": rowActionAriaLabel || `${label} row action`, className: styles$1.actionButton }))))));
 }
 
 export { GridItem };

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

@@ -1 +1 @@
-{"version":3,"file":"GridItem.js","sources":["../../../../../src/components/SelectDropdown/components/GridItem/GridItem.tsx"],"sourcesContent":["import React from 'react';\nimport { GridListItem, GridListItemRenderProps } from 'react-aria-components';\nimport { FlexRow } from '../../../Flex/FlexRow';\nimport { Button } from '../../../Button';\nimport { ArrowRightIcon } from '../../../../icons';\nimport { ItemContent } from '../ItemContent';\nimport { GridItemProps } from './types';\nimport { buildClassnames } from '../../../../utils';\nimport { useId } from '../../../../hooks';\n\nimport itemStyles from '../item.module.scss';\nimport styles from './GridItem.module.scss';\n\nexport function GridItem({\n  id,\n  label,\n  href,\n  appearance = 'primary',\n  className,\n  onClickRowAction,\n  rowActionAriaLabel,\n  isRowActionDisabled = false,\n  ...props\n}: GridItemProps) {\n  const idComputed = useId({ id, prefix: 'grid-item' });\n\n  return (\n    <GridListItem\n      id={idComputed}\n      textValue={label}\n      href={href}\n      className={buildClassnames([\n        itemStyles.item,\n        itemStyles[`appearance-${appearance}`],\n        className,\n      ])}\n      {...props}\n    >\n      {/* use react aria's render props to add more such as isHovered */}\n      {({ selectionMode, allowsDragging, isSelected, isHovered }: GridListItemRenderProps) => (\n        <FlexRow flexWrap=\"nowrap\" justifyContent=\"space-between\">\n          <ItemContent\n            selectionMode={selectionMode}\n            allowsDragging={allowsDragging}\n            isSelected={isSelected}\n            isHovered={isHovered}\n            label={label}\n            isLink={Boolean(href)}\n            appearance={appearance}\n            itemType=\"grid\"\n            {...props}\n          />\n          {onClickRowAction && (\n            /** onPointerDown event prevents click events from bubbling up to the GridListItem.\n             *  onKeyDown event prevents keyboard events from bubbling up to the GridListItem.\n             */\n            <Button\n              onClick={onClickRowAction}\n              disabled={isRowActionDisabled}\n              onPointerDown={(event) => event.stopPropagation()}\n              onKeyDown={(event) => event.stopPropagation()}\n              variant=\"flat\"\n              iconSlot={<ArrowRightIcon />}\n              aria-label={rowActionAriaLabel || `${label} row action`}\n              className={styles.actionButton}\n            />\n          )}\n        </FlexRow>\n      )}\n    </GridListItem>\n  );\n}\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;AAaM,SAAU,QAAQ,CAAC,EACvB,EAAE,EACF,KAAK,EACL,IAAI,EACJ,UAAU,GAAG,SAAS,EACtB,SAAS,EACT,gBAAgB,EAChB,kBAAkB,EAClB,mBAAmB,GAAG,KAAK,EAC3B,GAAG,KAAK,EACM,EAAA;AACd,IAAA,MAAM,UAAU,GAAG,KAAK,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC;AAErD,IAAA,QACEA,cAAC,CAAA,aAAA,CAAA,YAAY,IACX,EAAE,EAAE,UAAU,EACd,SAAS,EAAE,KAAK,EAChB,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,eAAe,CAAC;AACzB,YAAA,UAAU,CAAC,IAAI;AACf,YAAA,UAAU,CAAC,CAAA,WAAA,EAAc,UAAU,CAAA,CAAE,CAAC;YACtC,SAAS;SACV,CAAC,EAAA,GACE,KAAK,EAAA,EAGR,CAAC,EAAE,aAAa,EAAE,cAAc,EAAE,UAAU,EAAE,SAAS,EAA2B,MACjFA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,QAAQ,EAAC,QAAQ,EAAC,cAAc,EAAC,eAAe,EAAA;AACvD,QAAAA,cAAA,CAAA,aAAA,CAAC,WAAW,EACV,EAAA,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,cAAc,EAC9B,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,OAAO,CAAC,IAAI,CAAC,EACrB,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAC,MAAM,EAAA,GACX,KAAK,EACT,CAAA;AACD,QAAA,gBAAgB;AACf;;AAEG;AACH,QAAAA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EACL,OAAO,EAAE,gBAAgB,EACzB,QAAQ,EAAE,mBAAmB,EAC7B,aAAa,EAAE,CAAC,KAAK,KAAK,KAAK,CAAC,eAAe,EAAE,EACjD,SAAS,EAAE,CAAC,KAAK,KAAK,KAAK,CAAC,eAAe,EAAE,EAC7C,OAAO,EAAC,MAAM,EACd,QAAQ,EAAEA,cAAC,CAAA,aAAA,CAAA,cAAc,EAAG,IAAA,CAAA,EAAA,YAAA,EAChB,kBAAkB,IAAI,CAAG,EAAA,KAAK,CAAa,WAAA,CAAA,EACvD,SAAS,EAAE,MAAM,CAAC,YAAY,EAAA,CAC9B,CACH,CACO,CACX,CACY;AAEnB;;;;"}
+{"version":3,"file":"GridItem.js","sources":["../../../../../src/components/SelectDropdown/components/GridItem/GridItem.tsx"],"sourcesContent":["import React from 'react';\nimport { GridListItem, GridListItemRenderProps } from 'react-aria-components';\nimport { FlexRow } from '../../../Flex/FlexRow';\nimport { Button } from '../../../Button';\nimport { ArrowRightIcon } from '../../../../icons';\nimport { ItemContent } from '../ItemContent';\nimport { GridItemProps } from './types';\nimport { buildClassnames } from '../../../../utils';\nimport { useId } from '../../../../hooks';\n\nimport itemStyles from '../item.module.scss';\nimport styles from './GridItem.module.scss';\n\nexport function GridItem({\n  id,\n  label,\n  href,\n  appearance = 'primary',\n  className,\n  onClickRowAction,\n  rowActionAriaLabel,\n  isRowActionDisabled = false,\n  ...props\n}: GridItemProps) {\n  const idComputed = useId({ id, prefix: 'grid-item' });\n\n  return (\n    <GridListItem\n      id={idComputed}\n      textValue={label}\n      href={href}\n      className={buildClassnames([\n        itemStyles.item,\n        itemStyles[`appearance-${appearance}`],\n        className,\n      ])}\n      {...props}\n    >\n      {/* use react aria's render props to add more such as isHovered */}\n      {({ selectionMode, allowsDragging, isSelected, isHovered }: GridListItemRenderProps) => (\n        <FlexRow flexWrap=\"nowrap\" justifyContent=\"space-between\">\n          <ItemContent\n            selectionMode={selectionMode}\n            allowsDragging={allowsDragging}\n            isSelected={isSelected}\n            isHovered={isHovered}\n            label={label}\n            isLink={Boolean(href)}\n            appearance={appearance}\n            itemType=\"grid\"\n            {...props}\n          />\n          {onClickRowAction && (\n            /** onPointerDown event prevents click events from bubbling up to the GridListItem.\n             *  onKeyDown event prevents keyboard events from bubbling up to the GridListItem.\n             */\n            <Button\n              onClick={onClickRowAction}\n              disabled={isRowActionDisabled}\n              onPointerDown={(event) => event.stopPropagation()}\n              onKeyDown={(event) => event.stopPropagation()}\n              variant=\"flat\"\n              iconSlot={<ArrowRightIcon />}\n              aria-label={rowActionAriaLabel || `${label} row action`}\n              className={styles.actionButton}\n            />\n          )}\n        </FlexRow>\n      )}\n    </GridListItem>\n  );\n}\n"],"names":["React","itemStyles","styles"],"mappings":";;;;;;;;;;;;;;AAaM,SAAU,QAAQ,CAAC,EACvB,EAAE,EACF,KAAK,EACL,IAAI,EACJ,UAAU,GAAG,SAAS,EACtB,SAAS,EACT,gBAAgB,EAChB,kBAAkB,EAClB,mBAAmB,GAAG,KAAK,EAC3B,GAAG,KAAK,EACM,EAAA;AACd,IAAA,MAAM,UAAU,GAAG,KAAK,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC;AAErD,IAAA,QACEA,cAAC,CAAA,aAAA,CAAA,YAAY,IACX,EAAE,EAAE,UAAU,EACd,SAAS,EAAE,KAAK,EAChB,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,eAAe,CAAC;AACzB,YAAAC,MAAU,CAAC,IAAI;AACf,YAAAA,MAAU,CAAC,CAAA,WAAA,EAAc,UAAU,CAAA,CAAE,CAAC;YACtC,SAAS;SACV,CAAC,EAAA,GACE,KAAK,EAAA,EAGR,CAAC,EAAE,aAAa,EAAE,cAAc,EAAE,UAAU,EAAE,SAAS,EAA2B,MACjFD,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,QAAQ,EAAC,QAAQ,EAAC,cAAc,EAAC,eAAe,EAAA;AACvD,QAAAA,cAAA,CAAA,aAAA,CAAC,WAAW,EACV,EAAA,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,cAAc,EAC9B,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,OAAO,CAAC,IAAI,CAAC,EACrB,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAC,MAAM,EAAA,GACX,KAAK,EACT,CAAA;AACD,QAAA,gBAAgB;AACf;;AAEG;AACH,QAAAA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EACL,OAAO,EAAE,gBAAgB,EACzB,QAAQ,EAAE,mBAAmB,EAC7B,aAAa,EAAE,CAAC,KAAK,KAAK,KAAK,CAAC,eAAe,EAAE,EACjD,SAAS,EAAE,CAAC,KAAK,KAAK,KAAK,CAAC,eAAe,EAAE,EAC7C,OAAO,EAAC,MAAM,EACd,QAAQ,EAAEA,cAAC,CAAA,aAAA,CAAA,cAAc,EAAG,IAAA,CAAA,EAAA,YAAA,EAChB,kBAAkB,IAAI,CAAG,EAAA,KAAK,CAAa,WAAA,CAAA,EACvD,SAAS,EAAEE,QAAM,CAAC,YAAY,EAAA,CAC9B,CACH,CACO,CACX,CACY;AAEnB;;;;"}

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

@@ -6,11 +6,11 @@ import 'lodash.throttle';
 import { ItemContent } from '../ItemContent/ItemContent.js';
 import { buildClassnames } from '../../../../utils/buildClassnames.js';
 import 'uid/secure';
-import itemStyles from '../item.module.scss.js';
+import styles from '../item.module.scss.js';
 
 const ListItem = ({ id, label, href, appearance = 'primary', shouldDisableSelectionRender = false, className, ...props }) => {
     const idComputed = useId({ id, prefix: 'list-item' });
-    return (React__default.createElement(ListBoxItem, { id: idComputed, textValue: label, href: href, className: buildClassnames([itemStyles.item, itemStyles[`appearance-${appearance}`], className]), ...props }, ({ selectionMode, allowsDragging, isSelected, isHovered }) => (React__default.createElement(ItemContent, { selectionMode: selectionMode, allowsDragging: allowsDragging, isSelected: isSelected, isHovered: isHovered, label: label, isLink: Boolean(href), appearance: appearance, itemType: "list", shouldDisableSelectionRender: shouldDisableSelectionRender, ...props }))));
+    return (React__default.createElement(ListBoxItem, { id: idComputed, textValue: label, href: href, className: buildClassnames([styles.item, styles[`appearance-${appearance}`], className]), ...props }, ({ selectionMode, allowsDragging, isSelected, isHovered }) => (React__default.createElement(ItemContent, { selectionMode: selectionMode, allowsDragging: allowsDragging, isSelected: isSelected, isHovered: isHovered, label: label, isLink: Boolean(href), appearance: appearance, itemType: "list", shouldDisableSelectionRender: shouldDisableSelectionRender, ...props }))));
 };
 
 export { ListItem };

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

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

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

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