@eightshift/ui-components 5.0.0 → 5.0.2

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

@@ -0,0 +1,1004 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { _ as __ } from "../../../default-i18n-CT_oS1Fy.js";
+import { BaseControl } from "../../base-control/base-control.js";
+import { a as $d2b4bc8c273e7be6$export$24d547caef80ccd1, $ as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../../../Button-BpwTmkAe.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-BTxlCGcc.js";
+import { o as $168583247155ddda$export$dc9c12ed27dd1b49, l as $de32f1b87079253c$export$d2f961adcb0afbe, p as $07b14b47974efb58$export$9b9a0cd73afb7ca4, $ as $07b14b47974efb58$export$5b6b19405a83ff9d } from "../../../Dialog-O9uw63D7.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-n5d0zIgb.js";
+import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../../filterDOMProps-EDDcM64A.js";
+import { $ as $fc909762b330b746$export$61c6a8c84e605fb6, g as $9daab02d461809db$export$683480f191c0e3ea } from "../../../OverlayArrow-5aDgmImj.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-C4sorv2p.js";
+import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../../useFocusRing-Bv0UJQl8.js";
+import { f as $325a3faab7a68acd$export$a16aca283550c30d, g as $2a25aae57d74318e$export$a05409b8bb224a5a } from "../../../Separator-CaTBkETC.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 { icons } from "../../../icons/icons.js";
+import "../../../react-jsx-parser.min-DZCiis5V.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));
+});
+/**
+ * Select menu.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {string} [props.icon] - Icon of the component.
+ * @param {string} [props.help] - Help text of the component.
+ * @param {string} [props.label] - Label of the component.
+ * @param {boolean} [props.inline] - Whether the Select menu is displayed inline with the label, to the right.
+ * @param {JSX.Element|JSX.Element[]} [props.actions] - Actions to show to the right of the label.
+ * @param {string} [props.subtitle] - Subtitle of the component.
+ * @param {{label: string, value: string, metadata: Object<string, any>?}[]} props.options - Options to display in the select. `[{ label: string, value: string }]`.
+ * @param {string|{label: string, value: string, metadata: Object<string, any>?}} props.value - Current value of the select.
+ * @param {Function} props.onChange - Function to call when the value changes.
+ * @param {boolean} [props.simpleValue=false] - If `true`, instead of using a `{label: '', value: ''}` value type, a string is used (just the value).
+ * @param {boolean} [props.clearable] - Whether the select is clearable.
+ * @param {boolean} [props.disabled] - Whether the select is disabled.
+ * @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 {string} [props.className] - Classes to pass to the select menu.
+ * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
+ *
+ * @returns {JSX.Element} The __ExperimentalSelect component.
+ *
+ * @example
+ * const [value, setValue] = useState(null);
+ *
+ * const options = [
+ * 	{ label: 'Option 1', value: 'option-1' },
+ * 	{ label: 'Option 2', value: 'option-2' },
+ * 	{ label: 'Option 3', value: 'option-3' },
+ * ];
+ *
+ * <__ExperimentalSelect
+ * 	label='Select items'
+ * 	options={loadOptions}
+ * 	value={value}
+ * 	onChange={setValue}
+ * />
+ *
+ * @preserve
+ */
+const __ExperimentalSelect = (props) => {
+  const {
+    icon,
+    help,
+    label,
+    inline,
+    actions,
+    subtitle,
+    value,
+    onChange,
+    options,
+    simpleValue = false,
+    disabled = false,
+    clearable = false,
+    placeholder,
+    customMenuOption,
+    customValueDisplay,
+    className,
+    hidden
+  } = props;
+  const ref = useRef();
+  if (hidden) {
+    return null;
+  }
+  const currentValue = (value == null ? void 0 : value.value) ?? value ?? null;
+  return /* @__PURE__ */ jsx(
+    $82d7e5349645de74$export$ef9b1a59e592288f,
+    {
+      selectedKey: currentValue,
+      onSelectionChange: (selected) => {
+        if (selected === null || selected === void 0) {
+          onChange(null);
+          return;
+        }
+        if (simpleValue) {
+          onChange(selected);
+          return;
+        }
+        const item = options.find((item2) => item2.value === selected);
+        if (!item) {
+          onChange(null);
+          return;
+        }
+        if (item && "id" in item) {
+          delete item.id;
+        }
+        onChange(item);
+      },
+      placeholder,
+      children: /* @__PURE__ */ jsxs(
+        BaseControl,
+        {
+          label,
+          icon,
+          subtitle,
+          actions,
+          help,
+          inline,
+          labelAs: $01b77f81d0f07f68$export$b04be29aa201d4f5,
+          children: [
+            /* @__PURE__ */ jsxs(
+              "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:h-9 es:rounded-lg es:border es:border-secondary-300 es:bg-white es:text-sm es:shadow-xs es:transition",
+                  "es:any-focus:outline-hidden",
+                  !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"
+                ),
+                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;
+                            }
+                            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(
+              $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: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"
+                ),
+                placement: "bottom left",
+                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;
+                      }
+                      return /* @__PURE__ */ jsxs(
+                        OptionItemBase,
+                        {
+                          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
+                              }
+                            )
+                          ]
+                        }
+                      );
+                    }
+                  }
+                )
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+const SelectClearButton = () => {
+  const state = useContext($82d7e5349645de74$export$ef445b55be0601bd);
+  const isEmpty = (state == null ? void 0 : state.selectedKey) === null;
+  return /* @__PURE__ */ jsx(
+    $d2b4bc8c273e7be6$export$353f5b6fc5456de1,
+    {
+      "aria-label": __("Clear value", "eightshift-ui-components"),
+      className: clsx(
+        "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),
+      slot: null,
+      children: icons.clearAlt
+    }
+  );
+};
+export {
+  __ExperimentalSelect
+};