@eightshift/ui-components 5.0.10 → 5.1.1

package/dist/components/select/v2/single-select.js

@@ -1,770 +1,20 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { _ as __ } from "../../../default-i18n-CT_oS1Fy.js";
+import { _ as __ } from "../../../default-i18n-OFa3zAyB.js";
 import { BaseControl } from "../../base-control/base-control.js";
-import { a as $d2b4bc8c273e7be6$export$24d547caef80ccd1, $ as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../../../Button-DH22t_SM.js";
-import { a as $01b77f81d0f07f68$export$75b6ee27786ba447, $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../../Label-JS_ob-kh.js";
-import { b as $eed445e0843c11d0$export$7ff8f37d2d81a48d, c as $eed445e0843c11d0$export$7c5906fe4f1f2af2, $ as $eed445e0843c11d0$export$41f133550aa26f48 } from "../../../ListBox-_nDFq8-H.js";
-import { o as $168583247155ddda$export$dc9c12ed27dd1b49, l as $de32f1b87079253c$export$d2f961adcb0afbe, p as $07b14b47974efb58$export$9b9a0cd73afb7ca4, $ as $07b14b47974efb58$export$5b6b19405a83ff9d } from "../../../Dialog-CmAxaSUv.js";
-import { d as $3ef42575df84b30b$export$9d1611c77c2fe928, e as $bdb11010cef70236$export$f680877a34711e37, p as $ff5963eb1fccf552$export$e08e3b67e392101e, a as $64fa3d84918910a7$export$29f1550f4b0d4415, $ as $64fa3d84918910a7$export$fabf2dc03a41866e, b as $64fa3d84918910a7$export$4d86445c2cf5e3, g as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, h as $64fa3d84918910a7$export$ef03459518577ad4, i as $64fa3d84918910a7$export$2881499e37b75b9a, c as clsx } from "../../../utils-CZt7LCbO.js";
-import { a as $2baaea4c71418dea$export$294aa081a6c6f55d, $ as $ee014567cb39d3f0$export$ff05c3ac10437e03 } from "../../../FieldError-DHrSdE_Q.js";
-import { $ as $d3e0e05bdfcf66bd$export$c24727297075ec6a } from "../../../Form-Cq3fu75_.js";
-import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../../Text-BuJgePCv.js";
-import { o as $fb3050f43d946246$export$e32c88dfddc6e1d8, e as $e1995378a142960e$export$bf788dd355e3a401 } from "../../../Collection-uTAXq9Br.js";
-import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../../filterDOMProps-EDDcM64A.js";
-import { $ as $fc909762b330b746$export$61c6a8c84e605fb6, f as $9daab02d461809db$export$683480f191c0e3ea } from "../../../OverlayArrow-BUfV-5P3.js";
-import React__default, { useMemo, useRef, useState, forwardRef, createContext, useContext, useCallback, cloneElement } from "react";
-import { $ as $fca6afa0e843324b$export$f12b703ca79dfbb1 } from "../../../useLocalizedStringFormatter-C9GO0IDB.js";
-import { a as $e93e671b31057976$export$b8473d3665f3a75a, $ as $e5be200c675c3b3a$export$fc1a364ae1f3ff10 } from "../../../useFormValidation-Dy0PXJg5.js";
-import { $ as $a0d645289fe9b86b$export$e7f05e985daf4b5f } from "../../../useSingleSelectListState-DqhemUIh.js";
-import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../../useFocusRing-Bv0UJQl8.js";
-import { f as $325a3faab7a68acd$export$a16aca283550c30d, g as $2a25aae57d74318e$export$a05409b8bb224a5a } from "../../../Separator-BN3mjL6q.js";
-import { q as $507fabe10e71c6fb$export$8397ddfc504fdb9a } from "../../../useHover-C2SkI1Fn.js";
-import { $ as $99facab73266f662$export$5add1d006293d136 } from "../../../useFormReset-D2YaWRIA.js";
-import { a as $5c3e21d68f1c4674$export$a966af930f325cab } from "../../../VisuallyHidden-BYi0pekx.js";
+import { b as $d2f53cda644affe3$export$2f2b9559550c7bbc, c as $440f4836bcb56932$export$b94867ecbd698f21 } from "../../../Separator-CTQWg_HO.js";
+import { $ as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../../../Button-DH22t_SM.js";
+import { $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../../Input-DfSBLhDx.js";
+import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../../Label-JS_ob-kh.js";
+import { $ as $eed445e0843c11d0$export$41f133550aa26f48 } from "../../../ListBox-BY3gwI8c.js";
+import { e as $07b14b47974efb58$export$5b6b19405a83ff9d } from "../../../Dialog-D6EdDPeu.js";
+import { $ as $82d7e5349645de74$export$ef9b1a59e592288f, a as $82d7e5349645de74$export$e288731fd71264f0, b as $82d7e5349645de74$export$ef445b55be0601bd } from "../../../Select-BebwUgKB.js";
+import { useRef, cloneElement, useContext } from "react";
 import { icons } from "../../../icons/icons.js";
-import "../../../react-jsx-parser.min-DZCiis5V.js";
+import "../../../react-jsx-parser.min-LF707GK8.js";
 import { OptionItemBase } from "./shared.js";
 import { RichLabel } from "../../rich-label/rich-label.js";
-const $58aed456727eb0f3$export$703601b7e90536f8 = /* @__PURE__ */ new WeakMap();
-function $58aed456727eb0f3$export$e64b2f635402ca43(props, state, ref) {
-  let { keyboardDelegate, isDisabled, isRequired, name, validationBehavior = "aria" } = props;
-  let collator = $325a3faab7a68acd$export$a16aca283550c30d({
-    usage: "search",
-    sensitivity: "base"
-  });
-  let delegate = useMemo(() => keyboardDelegate || new $2a25aae57d74318e$export$a05409b8bb224a5a(state.collection, state.disabledKeys, ref, collator), [
-    keyboardDelegate,
-    state.collection,
-    state.disabledKeys,
-    collator,
-    ref
-  ]);
-  let { menuTriggerProps, menuProps } = $168583247155ddda$export$dc9c12ed27dd1b49({
-    isDisabled,
-    type: "listbox"
-  }, state, ref);
-  let onKeyDown = (e) => {
-    switch (e.key) {
-      case "ArrowLeft": {
-        var _delegate_getKeyAbove, _delegate_getFirstKey;
-        e.preventDefault();
-        let key = state.selectedKey != null ? (_delegate_getKeyAbove = delegate.getKeyAbove) === null || _delegate_getKeyAbove === void 0 ? void 0 : _delegate_getKeyAbove.call(delegate, state.selectedKey) : (_delegate_getFirstKey = delegate.getFirstKey) === null || _delegate_getFirstKey === void 0 ? void 0 : _delegate_getFirstKey.call(delegate);
-        if (key) state.setSelectedKey(key);
-        break;
-      }
-      case "ArrowRight": {
-        var _delegate_getKeyBelow, _delegate_getFirstKey1;
-        e.preventDefault();
-        let key = state.selectedKey != null ? (_delegate_getKeyBelow = delegate.getKeyBelow) === null || _delegate_getKeyBelow === void 0 ? void 0 : _delegate_getKeyBelow.call(delegate, state.selectedKey) : (_delegate_getFirstKey1 = delegate.getFirstKey) === null || _delegate_getFirstKey1 === void 0 ? void 0 : _delegate_getFirstKey1.call(delegate);
-        if (key) state.setSelectedKey(key);
-        break;
-      }
-    }
-  };
-  let { typeSelectProps } = $fb3050f43d946246$export$e32c88dfddc6e1d8({
-    keyboardDelegate: delegate,
-    selectionManager: state.selectionManager,
-    onTypeSelect(key) {
-      state.setSelectedKey(key);
-    }
-  });
-  let { isInvalid, validationErrors, validationDetails } = state.displayValidation;
-  let { labelProps, fieldProps, descriptionProps, errorMessageProps } = $2baaea4c71418dea$export$294aa081a6c6f55d({
-    ...props,
-    labelElementType: "span",
-    isInvalid,
-    errorMessage: props.errorMessage || validationErrors
-  });
-  typeSelectProps.onKeyDown = typeSelectProps.onKeyDownCapture;
-  delete typeSelectProps.onKeyDownCapture;
-  let domProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
-    labelable: true
-  });
-  let triggerProps = $3ef42575df84b30b$export$9d1611c77c2fe928(typeSelectProps, menuTriggerProps, fieldProps);
-  let valueId = $bdb11010cef70236$export$f680877a34711e37();
-  $58aed456727eb0f3$export$703601b7e90536f8.set(state, {
-    isDisabled,
-    isRequired,
-    name,
-    validationBehavior
-  });
-  return {
-    labelProps: {
-      ...labelProps,
-      onClick: () => {
-        if (!props.isDisabled) {
-          var _ref_current;
-          (_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.focus();
-          $507fabe10e71c6fb$export$8397ddfc504fdb9a("keyboard");
-        }
-      }
-    },
-    triggerProps: $3ef42575df84b30b$export$9d1611c77c2fe928(domProps, {
-      ...triggerProps,
-      isDisabled,
-      onKeyDown: $ff5963eb1fccf552$export$e08e3b67e392101e(triggerProps.onKeyDown, onKeyDown, props.onKeyDown),
-      onKeyUp: props.onKeyUp,
-      "aria-labelledby": [
-        valueId,
-        triggerProps["aria-labelledby"],
-        triggerProps["aria-label"] && !triggerProps["aria-labelledby"] ? triggerProps.id : null
-      ].filter(Boolean).join(" "),
-      onFocus(e) {
-        if (state.isFocused) return;
-        if (props.onFocus) props.onFocus(e);
-        if (props.onFocusChange) props.onFocusChange(true);
-        state.setFocused(true);
-      },
-      onBlur(e) {
-        if (state.isOpen) return;
-        if (props.onBlur) props.onBlur(e);
-        if (props.onFocusChange) props.onFocusChange(false);
-        state.setFocused(false);
-      }
-    }),
-    valueProps: {
-      id: valueId
-    },
-    menuProps: {
-      ...menuProps,
-      autoFocus: state.focusStrategy || true,
-      shouldSelectOnPressUp: true,
-      shouldFocusOnHover: true,
-      disallowEmptySelection: true,
-      linkBehavior: "selection",
-      onBlur: (e) => {
-        if (e.currentTarget.contains(e.relatedTarget)) return;
-        if (props.onBlur) props.onBlur(e);
-        if (props.onFocusChange) props.onFocusChange(false);
-        state.setFocused(false);
-      },
-      "aria-labelledby": [
-        fieldProps["aria-labelledby"],
-        triggerProps["aria-label"] && !fieldProps["aria-labelledby"] ? triggerProps.id : null
-      ].filter(Boolean).join(" ")
-    },
-    descriptionProps,
-    errorMessageProps,
-    isInvalid,
-    validationErrors,
-    validationDetails
-  };
-}
-function $bdd25dc72710631f$export$f809e80f58e251d1(props, state, triggerRef) {
-  let data = $58aed456727eb0f3$export$703601b7e90536f8.get(state) || {};
-  let { autoComplete, name = data.name, isDisabled = data.isDisabled } = props;
-  let { validationBehavior, isRequired } = data;
-  let { visuallyHiddenProps } = $5c3e21d68f1c4674$export$a966af930f325cab();
-  $99facab73266f662$export$5add1d006293d136(props.selectRef, state.selectedKey, state.setSelectedKey);
-  $e93e671b31057976$export$b8473d3665f3a75a({
-    validationBehavior,
-    focus: () => {
-      var _triggerRef_current;
-      return (_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.focus();
-    }
-  }, state, props.selectRef);
-  var _state_selectedKey;
-  return {
-    containerProps: {
-      ...visuallyHiddenProps,
-      "aria-hidden": true,
-      // @ts-ignore
-      ["data-react-aria-prevent-focus"]: true,
-      // @ts-ignore
-      ["data-a11y-ignore"]: "aria-hidden-focus"
-    },
-    inputProps: {
-      style: {
-        display: "none"
-      }
-    },
-    selectProps: {
-      tabIndex: -1,
-      autoComplete,
-      disabled: isDisabled,
-      required: validationBehavior === "native" && isRequired,
-      name,
-      value: (_state_selectedKey = state.selectedKey) !== null && _state_selectedKey !== void 0 ? _state_selectedKey : void 0,
-      onChange: (e) => state.setSelectedKey(e.target.value)
-    }
-  };
-}
-function $bdd25dc72710631f$export$cbd84cdb2e668835(props) {
-  let { state, triggerRef, label, name, isDisabled } = props;
-  let selectRef = useRef(null);
-  let { containerProps, selectProps } = $bdd25dc72710631f$export$f809e80f58e251d1({
-    ...props,
-    selectRef
-  }, state, triggerRef);
-  var _state_selectedKey;
-  if (state.collection.size <= 300) return /* @__PURE__ */ React__default.createElement("div", {
-    ...containerProps,
-    "data-testid": "hidden-select-container"
-  }, /* @__PURE__ */ React__default.createElement("label", null, label, /* @__PURE__ */ React__default.createElement("select", {
-    ...selectProps,
-    ref: selectRef
-  }, /* @__PURE__ */ React__default.createElement("option", null), [
-    ...state.collection.getKeys()
-  ].map((key) => {
-    let item = state.collection.getItem(key);
-    if (item && item.type === "item") return /* @__PURE__ */ React__default.createElement("option", {
-      key: item.key,
-      value: item.key
-    }, item.textValue);
-  }))));
-  else if (name) return /* @__PURE__ */ React__default.createElement("input", {
-    type: "hidden",
-    autoComplete: selectProps.autoComplete,
-    name,
-    disabled: isDisabled,
-    value: (_state_selectedKey = state.selectedKey) !== null && _state_selectedKey !== void 0 ? _state_selectedKey : ""
-  });
-  return null;
-}
-function $2bc3a590c5373a4e$export$5159ec8b34d4ec12(props) {
-  let triggerState = $fc909762b330b746$export$61c6a8c84e605fb6(props);
-  let [focusStrategy, setFocusStrategy] = useState(null);
-  let listState = $a0d645289fe9b86b$export$e7f05e985daf4b5f({
-    ...props,
-    onSelectionChange: (key) => {
-      if (props.onSelectionChange != null) props.onSelectionChange(key);
-      triggerState.close();
-      validationState.commitValidation();
-    }
-  });
-  let validationState = $e5be200c675c3b3a$export$fc1a364ae1f3ff10({
-    ...props,
-    value: listState.selectedKey
-  });
-  let [isFocused, setFocused] = useState(false);
-  let isEmpty = useMemo(() => {
-    var _listState_collection_getItem;
-    return listState.collection.size === 0 || listState.collection.size === 1 && ((_listState_collection_getItem = listState.collection.getItem(listState.collection.getFirstKey())) === null || _listState_collection_getItem === void 0 ? void 0 : _listState_collection_getItem.type) === "loader";
-  }, [
-    listState.collection
-  ]);
-  return {
-    ...validationState,
-    ...listState,
-    ...triggerState,
-    focusStrategy,
-    open(focusStrategy2 = null) {
-      if (!isEmpty) {
-        setFocusStrategy(focusStrategy2);
-        triggerState.open();
-      }
-    },
-    toggle(focusStrategy2 = null) {
-      if (!isEmpty) {
-        setFocusStrategy(focusStrategy2);
-        triggerState.toggle();
-      }
-    },
-    isFocused,
-    setFocused
-  };
-}
-var $e038a7e7a6d81989$exports = {};
-$e038a7e7a6d81989$exports = {
-  "colorSwatchPicker": `تغييرات الألوان`,
-  "dropzoneLabel": `DropZone`,
-  "selectPlaceholder": `حدد عنصرًا`,
-  "tableResizer": `أداة تغيير الحجم`
-};
-var $0ec14741b0133644$exports = {};
-$0ec14741b0133644$exports = {
-  "colorSwatchPicker": `Цветови мостри`,
-  "dropzoneLabel": `DropZone`,
-  "selectPlaceholder": `Изберете предмет`,
-  "tableResizer": `Преоразмерител`
-};
-var $642f7badf2405784$exports = {};
-$642f7badf2405784$exports = {
-  "colorSwatchPicker": `Vzorky barev`,
-  "dropzoneLabel": `Místo pro přetažení`,
-  "selectPlaceholder": `Vyberte položku`,
-  "tableResizer": `Změna velikosti`
-};
-var $30cee8d2535734ec$exports = {};
-$30cee8d2535734ec$exports = {
-  "colorSwatchPicker": `Farveprøver`,
-  "dropzoneLabel": `DropZone`,
-  "selectPlaceholder": `Vælg et element`,
-  "tableResizer": `Størrelsesændring`
-};
-var $c302d0504fca332a$exports = {};
-$c302d0504fca332a$exports = {
-  "colorSwatchPicker": `Farbfelder`,
-  "dropzoneLabel": `Ablegebereich`,
-  "selectPlaceholder": `Element wählen`,
-  "tableResizer": `Größenanpassung`
-};
-var $0d0703f2bd7e421c$exports = {};
-$0d0703f2bd7e421c$exports = {
-  "colorSwatchPicker": `Χρωματικά δείγματα`,
-  "dropzoneLabel": `DropZone`,
-  "selectPlaceholder": `Επιλέξτε ένα αντικείμενο`,
-  "tableResizer": `Αλλαγή μεγέθους`
-};
-var $cafa55beb2fc5ef3$exports = {};
-$cafa55beb2fc5ef3$exports = {
-  "selectPlaceholder": `Select an item`,
-  "tableResizer": `Resizer`,
-  "dropzoneLabel": `DropZone`,
-  "colorSwatchPicker": `Color swatches`
-};
-var $18ac2ceede598103$exports = {};
-$18ac2ceede598103$exports = {
-  "colorSwatchPicker": `Muestras de colores`,
-  "dropzoneLabel": `DropZone`,
-  "selectPlaceholder": `Seleccionar un artículo`,
-  "tableResizer": `Cambiador de tamaño`
-};
-var $718705a15b8a633a$exports = {};
-$718705a15b8a633a$exports = {
-  "colorSwatchPicker": `Värvinäidised`,
-  "dropzoneLabel": `DropZone`,
-  "selectPlaceholder": `Valige üksus`,
-  "tableResizer": `Suuruse muutja`
-};
-var $bf36dae9ecc81ce0$exports = {};
-$bf36dae9ecc81ce0$exports = {
-  "colorSwatchPicker": `Värimallit`,
-  "dropzoneLabel": `DropZone`,
-  "selectPlaceholder": `Valitse kohde`,
-  "tableResizer": `Koon muuttaja`
-};
-var $0b4828edb010b855$exports = {};
-$0b4828edb010b855$exports = {
-  "colorSwatchPicker": `Échantillons de couleurs`,
-  "dropzoneLabel": `DropZone`,
-  "selectPlaceholder": `Sélectionner un élément`,
-  "tableResizer": `Redimensionneur`
-};
-var $0030f210b040e540$exports = {};
-$0030f210b040e540$exports = {
-  "colorSwatchPicker": `דוגמיות צבע`,
-  "dropzoneLabel": `DropZone`,
-  "selectPlaceholder": `בחר פריט`,
-  "tableResizer": `שינוי גודל`
-};
-var $1f0ebacf5a0c0fa1$exports = {};
-$1f0ebacf5a0c0fa1$exports = {
-  "colorSwatchPicker": `Uzorci boja`,
-  "dropzoneLabel": `Zona spuštanja`,
-  "selectPlaceholder": `Odaberite stavku`,
-  "tableResizer": `Promjena veličine`
-};
-var $3a706ba61f3d6bba$exports = {};
-$3a706ba61f3d6bba$exports = {
-  "colorSwatchPicker": `Színtárak`,
-  "dropzoneLabel": `DropZone`,
-  "selectPlaceholder": `Válasszon ki egy elemet`,
-  "tableResizer": `Átméretező`
-};
-var $0d17809e74607796$exports = {};
-$0d17809e74607796$exports = {
-  "colorSwatchPicker": `Campioni di colore`,
-  "dropzoneLabel": `Zona di rilascio`,
-  "selectPlaceholder": `Seleziona un elemento`,
-  "tableResizer": `Ridimensionamento`
-};
-var $65a71f9a56f1398f$exports = {};
-$65a71f9a56f1398f$exports = {
-  "colorSwatchPicker": `カラースウォッチ`,
-  "dropzoneLabel": `ドロップゾーン`,
-  "selectPlaceholder": `項目を選択`,
-  "tableResizer": `サイズ変更ツール`
-};
-var $e5efad074a74abef$exports = {};
-$e5efad074a74abef$exports = {
-  "colorSwatchPicker": `색상 견본`,
-  "dropzoneLabel": `드롭 영역`,
-  "selectPlaceholder": `항목 선택`,
-  "tableResizer": `크기 조정기`
-};
-var $d70c2a849e55c607$exports = {};
-$d70c2a849e55c607$exports = {
-  "colorSwatchPicker": `Spalvų pavyzdžiai`,
-  "dropzoneLabel": `„DropZone“`,
-  "selectPlaceholder": `Pasirinkite elementą`,
-  "tableResizer": `Dydžio keitiklis`
-};
-var $009bbbb440d0e907$exports = {};
-$009bbbb440d0e907$exports = {
-  "colorSwatchPicker": `Krāsu paraugi`,
-  "dropzoneLabel": `DropZone`,
-  "selectPlaceholder": `Izvēlēties vienumu`,
-  "tableResizer": `Izmēra mainītājs`
-};
-var $9366fe642464ee83$exports = {};
-$9366fe642464ee83$exports = {
-  "colorSwatchPicker": `Fargekart`,
-  "dropzoneLabel": `Droppsone`,
-  "selectPlaceholder": `Velg et element`,
-  "tableResizer": `Størrelsesendrer`
-};
-var $62f9bc1f98ea21de$exports = {};
-$62f9bc1f98ea21de$exports = {
-  "colorSwatchPicker": `kleurstalen`,
-  "dropzoneLabel": `DropZone`,
-  "selectPlaceholder": `Selecteer een item`,
-  "tableResizer": `Resizer`
-};
-var $4ec2e5b6623b1b76$exports = {};
-$4ec2e5b6623b1b76$exports = {
-  "colorSwatchPicker": `Próbki kolorów`,
-  "dropzoneLabel": `Strefa upuszczania`,
-  "selectPlaceholder": `Wybierz element`,
-  "tableResizer": `Zmiana rozmiaru`
-};
-var $e25098e26647cc04$exports = {};
-$e25098e26647cc04$exports = {
-  "colorSwatchPicker": `Amostras de cores`,
-  "dropzoneLabel": `DropZone`,
-  "selectPlaceholder": `Selecione um item`,
-  "tableResizer": `Redimensionador`
-};
-var $dd39c57d242c8156$exports = {};
-$dd39c57d242c8156$exports = {
-  "colorSwatchPicker": `Amostras de cores`,
-  "dropzoneLabel": `DropZone`,
-  "selectPlaceholder": `Selecione um item`,
-  "tableResizer": `Redimensionador`
-};
-var $3b4c1ba5afd57b35$exports = {};
-$3b4c1ba5afd57b35$exports = {
-  "colorSwatchPicker": `Specimene de culoare`,
-  "dropzoneLabel": `Zonă de plasare`,
-  "selectPlaceholder": `Selectați un element`,
-  "tableResizer": `Instrument de redimensionare`
-};
-var $a455b2cda79eb746$exports = {};
-$a455b2cda79eb746$exports = {
-  "colorSwatchPicker": `Цветовые образцы`,
-  "dropzoneLabel": `DropZone`,
-  "selectPlaceholder": `Выберите элемент`,
-  "tableResizer": `Средство изменения размера`
-};
-var $b983ca1383d5b960$exports = {};
-$b983ca1383d5b960$exports = {
-  "colorSwatchPicker": `Vzorkovníky farieb`,
-  "dropzoneLabel": `DropZone`,
-  "selectPlaceholder": `Vyberte položku`,
-  "tableResizer": `Nástroj na zmenu veľkosti`
-};
-var $32a515ef673b0655$exports = {};
-$32a515ef673b0655$exports = {
-  "colorSwatchPicker": `Barvne palete`,
-  "dropzoneLabel": `DropZone`,
-  "selectPlaceholder": `Izberite element`,
-  "tableResizer": `Spreminjanje velikosti`
-};
-var $89434176ab35446b$exports = {};
-$89434176ab35446b$exports = {
-  "colorSwatchPicker": `Uzorci boje`,
-  "dropzoneLabel": `DropZone`,
-  "selectPlaceholder": `Izaberite stavku`,
-  "tableResizer": `Promena veličine`
-};
-var $727da781aca847f9$exports = {};
-$727da781aca847f9$exports = {
-  "colorSwatchPicker": `Färgrutor`,
-  "dropzoneLabel": `DropZone`,
-  "selectPlaceholder": `Välj en artikel`,
-  "tableResizer": `Storleksändrare`
-};
-var $fcd2d84b9a2d489c$exports = {};
-$fcd2d84b9a2d489c$exports = {
-  "colorSwatchPicker": `Renk örnekleri`,
-  "dropzoneLabel": `Bırakma Bölgesi`,
-  "selectPlaceholder": `Bir öğe seçin`,
-  "tableResizer": `Yeniden boyutlandırıcı`
-};
-var $2422ac328687ee23$exports = {};
-$2422ac328687ee23$exports = {
-  "colorSwatchPicker": `Зразки кольорів`,
-  "dropzoneLabel": `DropZone`,
-  "selectPlaceholder": `Виберіть елемент`,
-  "tableResizer": `Засіб змінення розміру`
-};
-var $c9a532d1c973af61$exports = {};
-$c9a532d1c973af61$exports = {
-  "colorSwatchPicker": `颜色色板`,
-  "dropzoneLabel": `放置区域`,
-  "selectPlaceholder": `选择一个项目`,
-  "tableResizer": `尺寸调整器`
-};
-var $34de119f14549a4b$exports = {};
-$34de119f14549a4b$exports = {
-  "colorSwatchPicker": `色票`,
-  "dropzoneLabel": `放置區`,
-  "selectPlaceholder": `選取項目`,
-  "tableResizer": `大小調整器`
-};
-var $df39c1238ae2b5f3$exports = {};
-$df39c1238ae2b5f3$exports = {
-  "ar-AE": $e038a7e7a6d81989$exports,
-  "bg-BG": $0ec14741b0133644$exports,
-  "cs-CZ": $642f7badf2405784$exports,
-  "da-DK": $30cee8d2535734ec$exports,
-  "de-DE": $c302d0504fca332a$exports,
-  "el-GR": $0d0703f2bd7e421c$exports,
-  "en-US": $cafa55beb2fc5ef3$exports,
-  "es-ES": $18ac2ceede598103$exports,
-  "et-EE": $718705a15b8a633a$exports,
-  "fi-FI": $bf36dae9ecc81ce0$exports,
-  "fr-FR": $0b4828edb010b855$exports,
-  "he-IL": $0030f210b040e540$exports,
-  "hr-HR": $1f0ebacf5a0c0fa1$exports,
-  "hu-HU": $3a706ba61f3d6bba$exports,
-  "it-IT": $0d17809e74607796$exports,
-  "ja-JP": $65a71f9a56f1398f$exports,
-  "ko-KR": $e5efad074a74abef$exports,
-  "lt-LT": $d70c2a849e55c607$exports,
-  "lv-LV": $009bbbb440d0e907$exports,
-  "nb-NO": $9366fe642464ee83$exports,
-  "nl-NL": $62f9bc1f98ea21de$exports,
-  "pl-PL": $4ec2e5b6623b1b76$exports,
-  "pt-BR": $e25098e26647cc04$exports,
-  "pt-PT": $dd39c57d242c8156$exports,
-  "ro-RO": $3b4c1ba5afd57b35$exports,
-  "ru-RU": $a455b2cda79eb746$exports,
-  "sk-SK": $b983ca1383d5b960$exports,
-  "sl-SI": $32a515ef673b0655$exports,
-  "sr-SP": $89434176ab35446b$exports,
-  "sv-SE": $727da781aca847f9$exports,
-  "tr-TR": $fcd2d84b9a2d489c$exports,
-  "uk-UA": $2422ac328687ee23$exports,
-  "zh-CN": $c9a532d1c973af61$exports,
-  "zh-TW": $34de119f14549a4b$exports
-};
-function $parcel$interopDefault(a) {
-  return a && a.__esModule ? a.default : a;
-}
-const $82d7e5349645de74$export$7540cee5be7dc19b = /* @__PURE__ */ createContext(null);
-const $82d7e5349645de74$export$ef445b55be0601bd = /* @__PURE__ */ createContext(null);
-const $82d7e5349645de74$export$ef9b1a59e592288f = /* @__PURE__ */ forwardRef(function Select(props, ref) {
-  [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $82d7e5349645de74$export$7540cee5be7dc19b);
-  let { children, isDisabled = false, isInvalid = false, isRequired = false } = props;
-  let content = useMemo(() => typeof children === "function" ? children({
-    isOpen: false,
-    isDisabled,
-    isInvalid,
-    isRequired,
-    isFocused: false,
-    isFocusVisible: false,
-    defaultChildren: null
-  }) : children, [
-    children,
-    isDisabled,
-    isInvalid,
-    isRequired
-  ]);
-  return /* @__PURE__ */ React__default.createElement($e1995378a142960e$export$bf788dd355e3a401, {
-    content
-  }, (collection) => /* @__PURE__ */ React__default.createElement($82d7e5349645de74$var$SelectInner, {
-    props,
-    collection,
-    selectRef: ref
-  }));
-});
-const $82d7e5349645de74$var$CLEAR_CONTEXTS = [
-  $01b77f81d0f07f68$export$75b6ee27786ba447,
-  $d2b4bc8c273e7be6$export$24d547caef80ccd1,
-  $514c0188e459b4c0$export$9afb8bc826b033ea
-];
-function $82d7e5349645de74$var$SelectInner({ props, selectRef: ref, collection }) {
-  let { validationBehavior: formValidationBehavior } = $64fa3d84918910a7$export$fabf2dc03a41866e($d3e0e05bdfcf66bd$export$c24727297075ec6a) || {};
-  var _props_validationBehavior, _ref;
-  let validationBehavior = (_ref = (_props_validationBehavior = props.validationBehavior) !== null && _props_validationBehavior !== void 0 ? _props_validationBehavior : formValidationBehavior) !== null && _ref !== void 0 ? _ref : "native";
-  let state = $2bc3a590c5373a4e$export$5159ec8b34d4ec12({
-    ...props,
-    collection,
-    children: void 0,
-    validationBehavior
-  });
-  let { isFocusVisible, focusProps } = $f7dceffc5ad7768b$export$4e328f61c538687f({
-    within: true
-  });
-  let buttonRef = useRef(null);
-  let [labelRef, label] = $64fa3d84918910a7$export$9d4c57ee4c6ffdd8(!props["aria-label"] && !props["aria-labelledby"]);
-  let { labelProps, triggerProps, valueProps, menuProps, descriptionProps, errorMessageProps, ...validation } = $58aed456727eb0f3$export$e64b2f635402ca43({
-    ...$64fa3d84918910a7$export$ef03459518577ad4(props),
-    label,
-    validationBehavior
-  }, state, buttonRef);
-  let [buttonWidth, setButtonWidth] = useState(null);
-  let onResize = useCallback(() => {
-    if (buttonRef.current) setButtonWidth(buttonRef.current.offsetWidth + "px");
-  }, [
-    buttonRef
-  ]);
-  $9daab02d461809db$export$683480f191c0e3ea({
-    ref: buttonRef,
-    onResize
-  });
-  let renderPropsState = useMemo(() => ({
-    isOpen: state.isOpen,
-    isFocused: state.isFocused,
-    isFocusVisible,
-    isDisabled: props.isDisabled || false,
-    isInvalid: validation.isInvalid || false,
-    isRequired: props.isRequired || false
-  }), [
-    state.isOpen,
-    state.isFocused,
-    isFocusVisible,
-    props.isDisabled,
-    validation.isInvalid,
-    props.isRequired
-  ]);
-  let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
-    ...props,
-    values: renderPropsState,
-    defaultClassName: "react-aria-Select"
-  });
-  let DOMProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props);
-  delete DOMProps.id;
-  let scrollRef = useRef(null);
-  return /* @__PURE__ */ React__default.createElement($64fa3d84918910a7$export$2881499e37b75b9a, {
-    values: [
-      [
-        $82d7e5349645de74$export$7540cee5be7dc19b,
-        props
-      ],
-      [
-        $82d7e5349645de74$export$ef445b55be0601bd,
-        state
-      ],
-      [
-        $82d7e5349645de74$export$f8f745c04421623f,
-        valueProps
-      ],
-      [
-        $01b77f81d0f07f68$export$75b6ee27786ba447,
-        {
-          ...labelProps,
-          ref: labelRef,
-          elementType: "span"
-        }
-      ],
-      [
-        $d2b4bc8c273e7be6$export$24d547caef80ccd1,
-        {
-          ...triggerProps,
-          ref: buttonRef,
-          isPressed: state.isOpen,
-          autoFocus: props.autoFocus
-        }
-      ],
-      [
-        $de32f1b87079253c$export$d2f961adcb0afbe,
-        state
-      ],
-      [
-        $07b14b47974efb58$export$9b9a0cd73afb7ca4,
-        {
-          trigger: "Select",
-          triggerRef: buttonRef,
-          scrollRef,
-          placement: "bottom start",
-          style: {
-            "--trigger-width": buttonWidth
-          },
-          "aria-labelledby": menuProps["aria-labelledby"],
-          clearContexts: $82d7e5349645de74$var$CLEAR_CONTEXTS
-        }
-      ],
-      [
-        $eed445e0843c11d0$export$7ff8f37d2d81a48d,
-        {
-          ...menuProps,
-          ref: scrollRef
-        }
-      ],
-      [
-        $eed445e0843c11d0$export$7c5906fe4f1f2af2,
-        state
-      ],
-      [
-        $514c0188e459b4c0$export$9afb8bc826b033ea,
-        {
-          slots: {
-            description: descriptionProps,
-            errorMessage: errorMessageProps
-          }
-        }
-      ],
-      [
-        $ee014567cb39d3f0$export$ff05c3ac10437e03,
-        validation
-      ]
-    ]
-  }, /* @__PURE__ */ React__default.createElement("div", {
-    ...DOMProps,
-    ...renderProps,
-    ...focusProps,
-    ref,
-    slot: props.slot || void 0,
-    "data-focused": state.isFocused || void 0,
-    "data-focus-visible": isFocusVisible || void 0,
-    "data-open": state.isOpen || void 0,
-    "data-disabled": props.isDisabled || void 0,
-    "data-invalid": validation.isInvalid || void 0,
-    "data-required": props.isRequired || void 0
-  }), /* @__PURE__ */ React__default.createElement($bdd25dc72710631f$export$cbd84cdb2e668835, {
-    autoComplete: props.autoComplete,
-    state,
-    triggerRef: buttonRef,
-    label,
-    name: props.name,
-    isDisabled: props.isDisabled
-  }));
-}
-const $82d7e5349645de74$export$f8f745c04421623f = /* @__PURE__ */ createContext(null);
-const $82d7e5349645de74$export$e288731fd71264f0 = /* @__PURE__ */ forwardRef(function SelectValue(props, ref) {
-  var _state_selectedItem, _state_selectedItem1;
-  [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $82d7e5349645de74$export$f8f745c04421623f);
-  let state = useContext($82d7e5349645de74$export$ef445b55be0601bd);
-  let { placeholder } = $64fa3d84918910a7$export$fabf2dc03a41866e($82d7e5349645de74$export$7540cee5be7dc19b);
-  let selectedItem = state.selectedKey != null ? state.collection.getItem(state.selectedKey) : null;
-  let rendered = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.props.children;
-  if (typeof rendered === "function") {
-    let fn = rendered;
-    rendered = fn({
-      isHovered: false,
-      isPressed: false,
-      isSelected: false,
-      isFocused: false,
-      isFocusVisible: false,
-      isDisabled: false,
-      selectionMode: "single",
-      selectionBehavior: "toggle"
-    });
-  }
-  let stringFormatter = $fca6afa0e843324b$export$f12b703ca79dfbb1($parcel$interopDefault($df39c1238ae2b5f3$exports), "react-aria-components");
-  var _ref, _state_selectedItem_value, _state_selectedItem_textValue;
-  let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
-    ...props,
-    defaultChildren: (_ref = rendered !== null && rendered !== void 0 ? rendered : placeholder) !== null && _ref !== void 0 ? _ref : stringFormatter.format("selectPlaceholder"),
-    defaultClassName: "react-aria-SelectValue",
-    values: {
-      selectedItem: (_state_selectedItem_value = (_state_selectedItem = state.selectedItem) === null || _state_selectedItem === void 0 ? void 0 : _state_selectedItem.value) !== null && _state_selectedItem_value !== void 0 ? _state_selectedItem_value : null,
-      selectedText: (_state_selectedItem_textValue = (_state_selectedItem1 = state.selectedItem) === null || _state_selectedItem1 === void 0 ? void 0 : _state_selectedItem1.textValue) !== null && _state_selectedItem_textValue !== void 0 ? _state_selectedItem_textValue : null,
-      isPlaceholder: !selectedItem
-    }
-  });
-  let DOMProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props);
-  return /* @__PURE__ */ React__default.createElement("span", {
-    ref,
-    ...DOMProps,
-    ...renderProps,
-    "data-placeholder": !selectedItem || void 0
-  }, /* @__PURE__ */ React__default.createElement($514c0188e459b4c0$export$9afb8bc826b033ea.Provider, {
-    value: void 0
-  }, renderProps.children));
-});
+import { c as clsx } from "../../../utils-CZt7LCbO.js";
+import { $ as $bb77f239b46e8c72$export$3274cf84b703fff } from "../../../useFilter-BR5z1A4Q.js";
 /**
  * Select menu.
  *
@@ -785,10 +35,12 @@ const $82d7e5349645de74$export$e288731fd71264f0 = /* @__PURE__ */ forwardRef(fun
  * @param {string} [props.placeholder] - Placeholder text to show when no value is selected.
  * @param {JSX.Element} [props.customMenuOption] - If provided, replaces the default item in the dropdown menu (react-select's `components.Option`).
  * @param {JSX.Element} [props.customValueDisplay] - If provided, replaces the default current value display of each selected item (react-select's `components.MultiValue`).
+ * @param {JSX.Element} [props.customDropdownArrow] - If provided, replaces the default dropdown arrow indicator.
  * @param {string} [props.className] - Classes to pass to the select menu.
+ * @param {boolean} [props.noMinWidth=false] - If `true`, the select menu will not have a minimum width.
  * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
  *
- * @returns {JSX.Element} The __ExperimentalSelect component.
+ * @returns {JSX.Element} The SelectNext component.
  *
  * @example
  * const [value, setValue] = useState(null);
@@ -799,7 +51,7 @@ const $82d7e5349645de74$export$e288731fd71264f0 = /* @__PURE__ */ forwardRef(fun
  * 	{ label: 'Option 3', value: 'option-3' },
  * ];
  *
- * <__ExperimentalSelect
+ * <SelectNext
  * 	label='Select items'
  * 	options={loadOptions}
  * 	value={value}
@@ -808,7 +60,7 @@ const $82d7e5349645de74$export$e288731fd71264f0 = /* @__PURE__ */ forwardRef(fun
  *
  * @preserve
  */
-const __ExperimentalSelect = (props) => {
+const SelectNext = (props) => {
   const {
     icon,
     help,
@@ -822,17 +74,22 @@ const __ExperimentalSelect = (props) => {
     simpleValue = false,
     disabled = false,
     clearable = false,
-    placeholder,
+    placeholder = __("Select...", "eightshift-ui-components"),
     customMenuOption,
     customValueDisplay,
+    customDropdownArrow,
     className,
-    hidden
+    noMinWidth = false,
+    searchable,
+    hidden,
+    ...rest
   } = props;
   const ref = useRef();
+  const currentValue = simpleValue ? value ?? null : value?.value ?? null;
+  const { contains } = $bb77f239b46e8c72$export$3274cf84b703fff({ sensitivity: "base" });
   if (hidden) {
     return null;
   }
-  const currentValue = (value == null ? void 0 : value.value) ?? value ?? null;
   return /* @__PURE__ */ jsx(
     $82d7e5349645de74$export$ef9b1a59e592288f,
     {
@@ -857,6 +114,7 @@ const __ExperimentalSelect = (props) => {
         onChange(item);
       },
       placeholder,
+      ...rest,
       children: /* @__PURE__ */ jsxs(
         BaseControl,
         {
@@ -872,108 +130,202 @@ const __ExperimentalSelect = (props) => {
               "div",
               {
                 className: clsx(
-                  "es:relative es:flex es:max-w-80 es:items-center es:gap-1 es:p-1 es:focus-visible:outline-hidden es:focus-visible:ring-2 es:focus-visible:ring-accent-500/50",
+                  "es:relative es:flex es:items-center es:gap-1 es:px-1.5 es:focus-visible:outline-hidden es:focus-visible:ring-2 es:focus-visible:ring-accent-500/50",
                   "es:h-9 es:rounded-10 es:border es:border-secondary-300 es:bg-white es:text-sm es:shadow-sm es:transition",
+                  "es:inset-ring es:inset-ring-secondary-100",
                   "es:any-focus:outline-hidden",
+                  !noMinWidth && "es:min-w-48",
                   !inline && "es:w-full",
-                  disabled && "es:select-none",
-                  "es:has-[[aria-haspopup=listbox][data-focus-visible=true],[aria-autocomplete=list][data-focus-visible=true]]:border-accent-500 es:has-[[aria-haspopup=listbox][data-focus-visible=true],[aria-autocomplete=list][data-focus-visible=true]]:ring-2 es:has-[[aria-haspopup=listbox][data-focus-visible=true],[aria-autocomplete=list][data-focus-visible=true]]:ring-accent-500/50"
+                  disabled && "es:select-none es:shadow-none!",
+                  "es:has-[[aria-haspopup=listbox][data-focus-visible=true],[aria-autocomplete=list][data-focus-visible=true]]:border-accent-500 es:has-[[aria-haspopup=listbox][data-focus-visible=true],[aria-autocomplete=list][data-focus-visible=true]]:ring-2 es:has-[[aria-haspopup=listbox][data-focus-visible=true],[aria-autocomplete=list][data-focus-visible=true]]:ring-accent-500/50",
+                  className
                 ),
                 ref,
                 children: [
-                  /* @__PURE__ */ jsxs(
-                    $d2b4bc8c273e7be6$export$353f5b6fc5456de1,
-                    {
-                      className: clsx(
-                        "es:group es:h-6 es:w-full es:rounded-sm es:p-1 es:text-sm es:transition",
-                        "es:flex es:grow es:items-center",
-                        "es:any-focus:outline-hidden",
-                        disabled && "es:bg-transparent es:text-secondary-400 es:selection:bg-transparent es:selection:text-transparent",
-                        currentValue && !clearable && "es:pr-6",
-                        !currentValue && "es:text-secondary-400"
-                      ),
-                      children: [
-                        /* @__PURE__ */ jsx($82d7e5349645de74$export$e288731fd71264f0, { children: ({ defaultChildren, isPlaceholder, selectedItem }) => {
-                          var _a;
-                          if (!isPlaceholder && currentValue && customValueDisplay) {
-                            return customValueDisplay(selectedItem);
-                          }
-                          if (!isPlaceholder && currentValue && customMenuOption) {
-                            let icon2 = (selectedItem == null ? void 0 : selectedItem.icon) ?? null;
-                            if (typeof (selectedItem == null ? void 0 : selectedItem.icon) === "string") {
-                              icon2 = ((_a = icons) == null ? void 0 : _a[selectedItem.icon]) ?? null;
+                  /* @__PURE__ */ jsxs($d2b4bc8c273e7be6$export$353f5b6fc5456de1, { className: "es:any-focus:outline-hidden es:text-start es:size-full es:inline-block es:group es:overflow-x-clip", children: [
+                    /* @__PURE__ */ jsx($82d7e5349645de74$export$e288731fd71264f0, { children: ({ isPlaceholder, selectedItem }) => {
+                      if (!isPlaceholder && currentValue && customValueDisplay) {
+                        return customValueDisplay(selectedItem);
+                      }
+                      if (!currentValue) {
+                        return /* @__PURE__ */ jsx("span", { className: "es:pointer-events-none es:pr-6 es:text-sm es:text-secondary-500", children: placeholder });
+                      }
+                      let icon2 = selectedItem?.icon ?? null;
+                      if (typeof selectedItem?.icon === "string") {
+                        icon2 = icons?.[selectedItem.icon] ?? null;
+                      }
+                      return /* @__PURE__ */ jsx(
+                        RichLabel,
+                        {
+                          icon: icon2,
+                          label: selectedItem?.label,
+                          subtitle: selectedItem.subtitle,
+                          className: clsx("es:pr-6 es:grow es:w-full", disabled && "es:grayscale es:pointer-events-none"),
+                          iconClassName: "es:pointer-events-none es:select-none"
+                        }
+                      );
+                    } }),
+                    /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        className: clsx("es:absolute es:bottom-0 es:right-1 es:top-0 es:my-auto es:flex es:items-center", disabled ? "es:text-secondary-300" : "es:text-secondary-500"),
+                        "aria-hidden": "true",
+                        children: [
+                          !customDropdownArrow && cloneElement(icons.dropdownCaretAlt, {
+                            className: "es:w-4 es:group-aria-expanded:-scale-y-100 es:transition-transform es:duration-200"
+                          }),
+                          customDropdownArrow && /* @__PURE__ */ jsx(
+                            "div",
+                            {
+                              "aria-hidden": "true",
+                              className: "es:group-aria-expanded:-scale-y-100 es:transition-transform es:duration-200",
+                              children: customDropdownArrow
                             }
-                            return /* @__PURE__ */ jsx(
-                              RichLabel,
-                              {
-                                icon: icon2,
-                                label: selectedItem == null ? void 0 : selectedItem.label,
-                                subtitle: selectedItem.subtitle
-                              }
-                            );
-                          }
-                          return defaultChildren;
-                        } }),
-                        /* @__PURE__ */ jsx(
-                          "div",
-                          {
-                            className: clsx("es:absolute es:bottom-0 es:right-1 es:top-0 es:my-auto es:flex es:items-center", disabled ? "es:text-secondary-300" : "es:text-secondary-500"),
-                            "aria-hidden": "true",
-                            children: cloneElement(icons.dropdownCaretAlt, {
-                              className: "es:w-5.5 es:group-aria-expanded:-scale-y-100 es:transition-transform es:duration-200"
-                            })
-                          }
-                        )
-                      ]
-                    }
-                  ),
+                          )
+                        ]
+                      }
+                    )
+                  ] }),
                   clearable && /* @__PURE__ */ jsx(SelectClearButton, {})
                 ]
               }
             ),
-            /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsxs(
               $07b14b47974efb58$export$5b6b19405a83ff9d,
               {
                 className: ({ isEntering, isExiting }) => clsx(
-                  "es:flex es:min-w-9 es:max-w-80 es:flex-col es:overflow-x-hidden es:rounded-lg es:border es:border-secondary-200 es:bg-white es:text-sm es:shadow-lg",
+                  "es:flex es:w-76 es:min-w-9 es:max-w-76 es:flex-col es:-hidden es:rounded-2xl es:border es:border-secondary-200 es:bg-white es:text-sm es:shadow-xl es:inset-ring es:inset-ring-secondary-100",
                   "es:any-focus:outline-hidden",
-                  isEntering && "es:motion-safe:motion-preset-slide-down-sm es:motion-safe:motion-duration-300 es:motion-reduce:motion-preset-fade-md",
-                  isExiting && "es:not-motion-reduce:motion-translate-y-out-[-2.5%] es:motion-opacity-out-0 es:motion-duration-200"
+                  "es:motion-safe:motion-duration-200 es:motion-safe:motion-ease-spring-bouncy",
+                  "es:placement-bottom:origin-top-left es:placement-top:origin-bottom-left",
+                  "es:placement-left:origin-right es:placement-right:origin-left",
+                  isEntering && "es:motion-safe:motion-scale-in-95 es:motion-opacity-in-0",
+                  isEntering && "es:motion-safe:placement-top:motion-translate-y-in-[5%] es:motion-safe:placement-bottom:motion-translate-y-in-[-5%] es:motion-safe:placement-left:motion-translate-x-in-[5%] es:motion-safe:placement-right:motion-translate-x-in-[-5%]",
+                  isExiting && "es:motion-safe:motion-scale-out-95 es:motion-opacity-out-0",
+                  isExiting && "es:motion-safe:placement-top:motion-translate-y-out-[5%] es:motion-safe:placement-bottom:motion-translate-y-out-[-5%] es:motion-safe:placement-left:motion-translate-x-out-[5%] es:motion-safe:placement-right:motion-translate-x-out-[-5%]"
                 ),
                 placement: "bottom left",
+                maxHeight: 300,
                 triggerRef: ref,
-                children: /* @__PURE__ */ jsx(
-                  $eed445e0843c11d0$export$41f133550aa26f48,
-                  {
-                    className: "es:space-y-0.5 es:p-1 es:any-focus:outline-hidden",
-                    items: options,
-                    children: (item) => {
-                      var _a;
-                      let icon2 = (item == null ? void 0 : item.icon) ?? null;
-                      if (typeof (item == null ? void 0 : item.icon) === "string") {
-                        icon2 = ((_a = icons) == null ? void 0 : _a[item.icon]) ?? null;
+                children: [
+                  searchable && /* @__PURE__ */ jsxs($d2f53cda644affe3$export$2f2b9559550c7bbc, { filter: contains, children: [
+                    /* @__PURE__ */ jsxs(
+                      $440f4836bcb56932$export$b94867ecbd698f21,
+                      {
+                        "aria-label": __("Search", "eightshift-ui-components"),
+                        className: "es:flex es:items-center es:bg-secondary-100 es:m-2 es:rounded-lg es:relative es:placeholder:text-secondary-500",
+                        autoFocus: true,
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            $3985021b0ad6602f$export$f5b8910cec6cf069,
+                            {
+                              placeholder: __("Search...", "eightshift-ui-components"),
+                              className: "es:peer es:size-full es:h-9 es:outline-hidden es:px-2.5 es:shadow-none es:text-sm es:py-0 es:[&::-webkit-search-cancel-button]:hidden"
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            $d2b4bc8c273e7be6$export$353f5b6fc5456de1,
+                            {
+                              "aria-label": __("Clear", "eightshift-ui-components"),
+                              className: clsx(
+                                "es:absolute es:right-2 es:top-0 es:bottom-0 es:my-auto",
+                                "es:flex es:size-6 es:items-center es:justify-center es:rounded es:text-sm es:text-secondary-600 es:transition es:hover:bg-red-50 es:hover:text-red-900 es:any-focus:outline-hidden es:focus:ring-2 es:focus:ring-accent-500/50 es:disabled:text-secondary-300 es:cursor-pointer",
+                                "es:peer-placeholder-shown:opacity-0"
+                              ),
+                              children: icons.clearAlt
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("div", { className: "es:w-full es:h-px es:bg-secondary-200 es:shrink-0" }),
+                    /* @__PURE__ */ jsx(
+                      $eed445e0843c11d0$export$41f133550aa26f48,
+                      {
+                        className: clsx("es:space-y-0.5 es:p-1 es:any-focus:outline-hidden es:min-h-16", options?.length > 0 && "es:overflow-y-auto"),
+                        items: options,
+                        renderEmptyState: () => /* @__PURE__ */ jsx(
+                          RichLabel,
+                          {
+                            icon: icons.searchEmpty,
+                            label: __("No results", "eightshift-ui-components"),
+                            subtitle: __("Try a different search term", "eightshift-ui-components"),
+                            className: "es:min-h-14 es:p-2 es:w-fit es:mx-auto es:motion-preset-slide-up es:motion-ease-spring-bouncy es:motion-duration-200 es:shrink-0",
+                            iconClassName: "es:text-accent-700 es:icon:size-7!",
+                            noColor: true
+                          }
+                        ),
+                        children: (item) => {
+                          let icon2 = item?.icon ?? null;
+                          if (typeof item?.icon === "string") {
+                            icon2 = icons?.[item.icon] ?? null;
+                          }
+                          return /* @__PURE__ */ jsxs(
+                            OptionItemBase,
+                            {
+                              id: item.value,
+                              className: item?.className,
+                              children: [
+                                customMenuOption && customMenuOption(item),
+                                !customMenuOption && /* @__PURE__ */ jsx(
+                                  RichLabel,
+                                  {
+                                    icon: icon2,
+                                    label: item?.label,
+                                    subtitle: item.subtitle
+                                  }
+                                )
+                              ]
+                            }
+                          );
+                        }
                       }
-                      return /* @__PURE__ */ jsxs(
-                        OptionItemBase,
+                    )
+                  ] }),
+                  !searchable && /* @__PURE__ */ jsx(
+                    $eed445e0843c11d0$export$41f133550aa26f48,
+                    {
+                      className: "es:space-y-0.5 es:p-1 es:any-focus:outline-hidden",
+                      items: options,
+                      renderEmptyState: () => /* @__PURE__ */ jsx(
+                        RichLabel,
                         {
-                          id: item.value,
-                          className: item == null ? void 0 : item.className,
-                          children: [
-                            customMenuOption && customMenuOption(item),
-                            !customMenuOption && /* @__PURE__ */ jsx(
-                              RichLabel,
-                              {
-                                icon: icon2,
-                                label: item == null ? void 0 : item.label,
-                                subtitle: item.subtitle
-                              }
-                            )
-                          ]
+                          icon: icons.searchEmpty,
+                          label: __("No results", "eightshift-ui-components"),
+                          subtitle: __("Try a different search term", "eightshift-ui-components"),
+                          className: "es:min-h-14 es:p-2 es:w-fit es:mx-auto es:motion-preset-slide-up es:motion-ease-spring-bouncy es:motion-duration-200",
+                          iconClassName: "es:text-accent-700 es:icon:size-7!",
+                          noColor: true
                         }
-                      );
+                      ),
+                      children: (item) => {
+                        let icon2 = item?.icon ?? null;
+                        if (typeof item?.icon === "string") {
+                          icon2 = icons?.[item.icon] ?? null;
+                        }
+                        return /* @__PURE__ */ jsxs(
+                          OptionItemBase,
+                          {
+                            id: item.value,
+                            className: item?.className,
+                            children: [
+                              customMenuOption && customMenuOption(item),
+                              !customMenuOption && /* @__PURE__ */ jsx(
+                                RichLabel,
+                                {
+                                  icon: icon2,
+                                  label: item?.label,
+                                  subtitle: item.subtitle,
+                                  noColor: true
+                                }
+                              )
+                            ]
+                          }
+                        );
+                      }
                     }
-                  }
-                )
+                  )
+                ]
               }
             )
           ]
@@ -984,7 +336,7 @@ const __ExperimentalSelect = (props) => {
 };
 const SelectClearButton = () => {
   const state = useContext($82d7e5349645de74$export$ef445b55be0601bd);
-  const isEmpty = (state == null ? void 0 : state.selectedKey) === null;
+  const isEmpty = state?.selectedKey === null;
   return /* @__PURE__ */ jsx(
     $d2b4bc8c273e7be6$export$353f5b6fc5456de1,
     {
@@ -993,12 +345,12 @@ const SelectClearButton = () => {
         "es:mr-6 es:flex es:h-6 es:w-8 es:items-center es:justify-center es:rounded es:text-sm es:text-secondary-600 es:transition es:hover:bg-red-50 es:hover:text-red-900 es:any-focus:outline-hidden es:focus:ring-2 es:focus:ring-accent-500/50 es:disabled:text-secondary-300 es:cursor-pointer",
         isEmpty ? "es:hidden" : "es:flex"
       ),
-      onPress: () => state == null ? void 0 : state.setSelectedKey(null),
+      onPress: () => state?.setSelectedKey(null),
       slot: null,
       children: icons.clearAlt
     }
   );
 };
 export {
-  __ExperimentalSelect
+  SelectNext
 };