@commercetools/nimbus 2.7.0 → 2.8.0

package/dist/chunks/select-BCclMTCA.es.js

@@ -0,0 +1,775 @@
+import { jsx as m, jsxs as w } from "react/jsx-runtime";
+import S, { useMemo as R, useRef as V, useCallback as _, useState as k, forwardRef as ce, useContext as J, Fragment as fe, createContext as N } from "react";
+import { e as q } from "./extract-style-props-DuSHABTl.es.js";
+import { createSlotRecipeContext as ue, useSlotRecipe as $e, chakra as Q } from "@chakra-ui/react/styled-system";
+import { c as me, d as be } from "./Header-BBMNqseS.es.js";
+import { $ as pe, a as ve, b as ye, c as ge, d as he } from "./ListBox-CAJx8YBh.es.js";
+import { f as xe, g as Se } from "./CollectionBuilder-Bzm4ICAd.es.js";
+import { m as Pe } from "./merge-refs-D-zSwpoh.es.js";
+import { Close as Ce, Loop as Re, KeyboardArrowDown as De } from "@commercetools/nimbus-icons";
+import { $ as Y, a as Fe } from "./Button-B_f19f6I.es.js";
+import { q as Me, e as Ie, h as Ee, r as Ke, $ as Be } from "./Dialog-BrbJce0u.es.js";
+import { $ as Z, d as ee, a as te, b as le, c as we, f as Ve, e as Oe } from "./utils-CiIOoh_a.es.js";
+import { $ as ke } from "./FieldError-CXcEMuBf.es.js";
+import { $ as qe } from "./Form-CXcEMuBf.es.js";
+import { $ as Ae } from "./intlStrings-Cd44R5hT.es.js";
+import { $ as ae } from "./Label-DE_LaM97.es.js";
+import { $ as G } from "./Text-DOcU1ycg.es.js";
+import { $ as Te } from "./Hidden-S64SHphJ.es.js";
+import { a as L, $ as ze, e as Le } from "./mergeProps-Dg8WqJiN.es.js";
+import { $ as W } from "./filterDOMProps-Cxz9cAAv.es.js";
+import { $ as Ne, a as Ge } from "./OverlayArrow-BiIjcsUQ.es.js";
+import { $ as We } from "./context-BfHy4NgG.es.js";
+import { $ as je } from "./useLocalizedStringFormatter-CYDf7GZk.es.js";
+import { a as He, $ as Ue } from "./useFormValidation-B6ieSHzO.es.js";
+import { a as Xe } from "./useListState-CK0Ynhz8.es.js";
+import { $ as _e } from "./useControlledState-3TGZUXux.es.js";
+import { $ as Je } from "./useFocusRing-BUzNZISS.es.js";
+import { $ as Qe, a as Ye } from "./utils-CjZmL8XS.es.js";
+import { l as Ze } from "./SelectionManager-Dwxt3P_U.es.js";
+import { c as et } from "./useFocusVisible-DY8qx7TG.es.js";
+import { $ as tt } from "./useCollator-DKdD8vEj.es.js";
+import { $ as lt } from "./useField-ZuobdMEN.es.js";
+import { $ as at } from "./useFormReset-vR88DCc9.es.js";
+import { a as ot } from "./VisuallyHidden-B6DIvP4_.es.js";
+import { n as B, u as rt } from "./normalize-messages-BN9BAFXe.es.js";
+import { I as it } from "./icon-button-BCeQqBD7.es.js";
+import { l as nt } from "./index-N3LCjK2b.es.js";
+import { $ as st } from "./useObjectRef-CaJ5pgjX.es.js";
+import { F as z } from "./flex-BqxAMF-7.es.js";
+import { B as X } from "./box-DuBoAZvq.es.js";
+function dt(e = {}) {
+  let { locale: t } = We();
+  return R(() => new Intl.ListFormat(t, e), [
+    t,
+    e
+  ]);
+}
+const j = /* @__PURE__ */ new WeakMap();
+function ct(e, t, a) {
+  let { keyboardDelegate: r, isDisabled: l, isRequired: b, name: p, form: o, validationBehavior: s = "aria" } = e, u = tt({
+    usage: "search",
+    sensitivity: "base"
+  }), i = R(() => r || new me(t.collection, t.disabledKeys, a, u), [
+    r,
+    t.collection,
+    t.disabledKeys,
+    u,
+    a
+  ]), { menuTriggerProps: d, menuProps: v } = Me({
+    isDisabled: l,
+    type: "listbox"
+  }, t, a), c = (y) => {
+    if (t.selectionManager.selectionMode !== "multiple")
+      switch (y.key) {
+        case "ArrowLeft": {
+          var M, I;
+          y.preventDefault();
+          let K = t.selectedKey != null ? (M = i.getKeyAbove) === null || M === void 0 ? void 0 : M.call(i, t.selectedKey) : (I = i.getFirstKey) === null || I === void 0 ? void 0 : I.call(i);
+          K && t.setSelectedKey(K);
+          break;
+        }
+        case "ArrowRight": {
+          var A, T;
+          y.preventDefault();
+          let K = t.selectedKey != null ? (A = i.getKeyBelow) === null || A === void 0 ? void 0 : A.call(i, t.selectedKey) : (T = i.getFirstKey) === null || T === void 0 ? void 0 : T.call(i);
+          K && t.setSelectedKey(K);
+          break;
+        }
+      }
+  }, { typeSelectProps: f } = Ze({
+    keyboardDelegate: i,
+    selectionManager: t.selectionManager,
+    onTypeSelect(y) {
+      t.setSelectedKey(y);
+    }
+  }), { isInvalid: g, validationErrors: P, validationDetails: $ } = t.displayValidation, { labelProps: h, fieldProps: C, descriptionProps: n, errorMessageProps: D } = lt({
+    ...e,
+    labelElementType: "span",
+    isInvalid: g,
+    errorMessage: e.errorMessage || P
+  });
+  f.onKeyDown = f.onKeyDownCapture, delete f.onKeyDownCapture, t.selectionManager.selectionMode === "multiple" && (f = {});
+  let F = W(e, {
+    labelable: !0
+  }), x = L(f, d, C), O = ze();
+  return j.set(t, {
+    isDisabled: l,
+    isRequired: b,
+    name: p,
+    form: o,
+    validationBehavior: s
+  }), {
+    labelProps: {
+      ...h,
+      onClick: () => {
+        if (!e.isDisabled) {
+          var y;
+          (y = a.current) === null || y === void 0 || y.focus(), et("keyboard");
+        }
+      }
+    },
+    triggerProps: L(F, {
+      ...x,
+      isDisabled: l,
+      onKeyDown: Le(x.onKeyDown, c, e.onKeyDown),
+      onKeyUp: e.onKeyUp,
+      "aria-labelledby": [
+        O,
+        x["aria-labelledby"],
+        x["aria-label"] && !x["aria-labelledby"] ? x.id : null
+      ].filter(Boolean).join(" "),
+      onFocus(y) {
+        t.isFocused || (e.onFocus && e.onFocus(y), e.onFocusChange && e.onFocusChange(!0), t.setFocused(!0));
+      },
+      onBlur(y) {
+        t.isOpen || (e.onBlur && e.onBlur(y), e.onFocusChange && e.onFocusChange(!1), t.setFocused(!1));
+      }
+    }),
+    valueProps: {
+      id: O
+    },
+    menuProps: {
+      ...v,
+      autoFocus: t.focusStrategy || !0,
+      shouldSelectOnPressUp: !0,
+      shouldFocusOnHover: !0,
+      disallowEmptySelection: !0,
+      linkBehavior: "selection",
+      onBlur: (y) => {
+        Qe(y.currentTarget, y.relatedTarget) || (e.onBlur && e.onBlur(y), e.onFocusChange && e.onFocusChange(!1), t.setFocused(!1));
+      },
+      "aria-labelledby": [
+        C["aria-labelledby"],
+        x["aria-label"] && !C["aria-labelledby"] ? x.id : null
+      ].filter(Boolean).join(" ")
+    },
+    descriptionProps: n,
+    errorMessageProps: D,
+    isInvalid: g,
+    validationErrors: P,
+    validationDetails: $,
+    hiddenSelectProps: {
+      isDisabled: l,
+      name: p,
+      label: e.label,
+      state: t,
+      triggerRef: a,
+      form: o
+    }
+  };
+}
+function ft(e, t, a) {
+  let r = j.get(t) || {}, { autoComplete: l, name: b = r.name, form: p = r.form, isDisabled: o = r.isDisabled } = e, { validationBehavior: s, isRequired: u } = r, { visuallyHiddenProps: i } = ot({
+    style: {
+      // Prevent page scrolling.
+      position: "fixed",
+      top: 0,
+      left: 0
+    }
+  });
+  at(e.selectRef, t.defaultValue, t.setValue), He({
+    validationBehavior: s,
+    focus: () => {
+      var f;
+      return (f = a.current) === null || f === void 0 ? void 0 : f.focus();
+    }
+  }, t, e.selectRef);
+  let d = t.setValue, v = _((f) => {
+    let g = Ye(f);
+    g.multiple ? d(Array.from(g.selectedOptions, (P) => P.value)) : d(f.currentTarget.value);
+  }, [
+    d
+  ]);
+  var c;
+  return {
+    containerProps: {
+      ...i,
+      "aria-hidden": !0,
+      // @ts-ignore
+      "data-react-aria-prevent-focus": !0,
+      // @ts-ignore
+      "data-a11y-ignore": "aria-hidden-focus"
+    },
+    inputProps: {
+      style: {
+        display: "none"
+      }
+    },
+    selectProps: {
+      tabIndex: -1,
+      autoComplete: l,
+      disabled: o,
+      multiple: t.selectionManager.selectionMode === "multiple",
+      required: s === "native" && u,
+      name: b,
+      form: p,
+      value: (c = t.value) !== null && c !== void 0 ? c : "",
+      onChange: v,
+      onInput: v
+    }
+  };
+}
+function ut(e) {
+  let { state: t, triggerRef: a, label: r, name: l, form: b, isDisabled: p } = e, o = V(null), s = V(null), { containerProps: u, selectProps: i } = ft({
+    ...e,
+    selectRef: t.collection.size <= 300 ? o : s
+  }, t, a), d = Array.isArray(t.value) ? t.value : [
+    t.value
+  ];
+  if (t.collection.size <= 300) return /* @__PURE__ */ S.createElement("div", {
+    ...u,
+    "data-testid": "hidden-select-container"
+  }, /* @__PURE__ */ S.createElement("label", null, r, /* @__PURE__ */ S.createElement("select", {
+    ...i,
+    ref: o
+  }, /* @__PURE__ */ S.createElement("option", null), [
+    ...t.collection.getKeys()
+  ].map((v) => {
+    let c = t.collection.getItem(v);
+    if (c && c.type === "item") return /* @__PURE__ */ S.createElement("option", {
+      key: c.key,
+      value: c.key
+    }, c.textValue);
+  }), t.collection.size === 0 && l && d.map((v, c) => /* @__PURE__ */ S.createElement("option", {
+    key: c,
+    value: v ?? ""
+  })))));
+  if (l) {
+    let v = j.get(t) || {}, { validationBehavior: c } = v;
+    d.length === 0 && (d = [
+      null
+    ]);
+    let f = d.map((g, P) => {
+      let $ = {
+        type: "hidden",
+        autoComplete: i.autoComplete,
+        name: l,
+        form: b,
+        disabled: p,
+        value: g ?? ""
+      };
+      return c === "native" ? /* @__PURE__ */ S.createElement("input", {
+        key: P,
+        ...$,
+        ref: P === 0 ? s : null,
+        style: {
+          display: "none"
+        },
+        type: "text",
+        required: P === 0 ? i.required : !1,
+        onChange: () => {
+        }
+      }) : /* @__PURE__ */ S.createElement("input", {
+        key: P,
+        ...$,
+        ref: P === 0 ? s : null
+      });
+    });
+    return /* @__PURE__ */ S.createElement(S.Fragment, null, f);
+  }
+  return null;
+}
+function $t(e) {
+  let { selectionMode: t = "single" } = e, a = Ne(e), [r, l] = k(null), b = R(() => {
+    var n;
+    return e.defaultValue !== void 0 ? e.defaultValue : t === "single" ? (n = e.defaultSelectedKey) !== null && n !== void 0 ? n : null : [];
+  }, [
+    e.defaultValue,
+    e.defaultSelectedKey,
+    t
+  ]), p = R(() => e.value !== void 0 ? e.value : t === "single" ? e.selectedKey : void 0, [
+    e.value,
+    e.selectedKey,
+    t
+  ]), [o, s] = _e(p, b, e.onChange), u = t === "single" && Array.isArray(o) ? o[0] : o, i = (n) => {
+    if (t === "single") {
+      var D, F;
+      let x = Array.isArray(n) ? (F = n[0]) !== null && F !== void 0 ? F : null : n;
+      s(x), x !== u && ((D = e.onSelectionChange) === null || D === void 0 || D.call(e, x));
+    } else {
+      let x = [];
+      Array.isArray(n) ? x = n : n != null && (x = [
+        n
+      ]), s(x);
+    }
+  }, d = Xe({
+    ...e,
+    selectionMode: t,
+    disallowEmptySelection: t === "single",
+    allowDuplicateSelectionEvents: !0,
+    selectedKeys: R(() => mt(u), [
+      u
+    ]),
+    onSelectionChange: (n) => {
+      if (n !== "all") {
+        if (t === "single") {
+          var D;
+          let F = (D = n.values().next().value) !== null && D !== void 0 ? D : null;
+          i(F), a.close();
+        } else i([
+          ...n
+        ]);
+        f.commitValidation();
+      }
+    }
+  }), v = d.selectionManager.firstSelectedKey, c = R(() => [
+    ...d.selectionManager.selectedKeys
+  ].map((n) => d.collection.getItem(n)).filter((n) => n != null), [
+    d.selectionManager.selectedKeys,
+    d.collection
+  ]), f = Ue({
+    ...e,
+    value: Array.isArray(u) && u.length === 0 ? null : u
+  }), [g, P] = k(!1), [$] = k(u);
+  var h, C;
+  return {
+    ...f,
+    ...d,
+    ...a,
+    value: u,
+    defaultValue: b ?? $,
+    setValue: i,
+    selectedKey: v,
+    setSelectedKey: i,
+    selectedItem: (h = c[0]) !== null && h !== void 0 ? h : null,
+    selectedItems: c,
+    defaultSelectedKey: (C = e.defaultSelectedKey) !== null && C !== void 0 ? C : e.selectionMode === "single" ? $ : null,
+    focusStrategy: r,
+    open(n = null) {
+      (d.collection.size !== 0 || e.allowsEmptyCollection) && (l(n), a.open());
+    },
+    toggle(n = null) {
+      (d.collection.size !== 0 || e.allowsEmptyCollection) && (l(n), a.toggle());
+    },
+    isFocused: g,
+    setFocused: P
+  };
+}
+function mt(e) {
+  if (e !== void 0)
+    return e === null ? [] : Array.isArray(e) ? e : [
+      e
+    ];
+}
+function bt(e) {
+  return e && e.__esModule ? e.default : e;
+}
+const H = /* @__PURE__ */ N(null), U = /* @__PURE__ */ N(null), pt = /* @__PURE__ */ ce(function(t, a) {
+  [t, a] = Z(t, a, H);
+  let { children: r, isDisabled: l = !1, isInvalid: b = !1, isRequired: p = !1 } = t, o = R(() => typeof r == "function" ? r({
+    isOpen: !1,
+    isDisabled: l,
+    isInvalid: b,
+    isRequired: p,
+    isFocused: !1,
+    isFocusVisible: !1,
+    defaultChildren: null
+  }) : r, [
+    r,
+    l,
+    b,
+    p
+  ]);
+  return /* @__PURE__ */ S.createElement(xe, {
+    content: o
+  }, (s) => /* @__PURE__ */ S.createElement(yt, {
+    props: t,
+    collection: s,
+    selectRef: a
+  }));
+}), vt = [
+  ae,
+  Y,
+  G
+];
+function yt({ props: e, selectRef: t, collection: a }) {
+  let { validationBehavior: r } = ee(qe) || {};
+  var l, b;
+  let p = (b = (l = e.validationBehavior) !== null && l !== void 0 ? l : r) !== null && b !== void 0 ? b : "native", o = $t({
+    ...e,
+    collection: a,
+    children: void 0,
+    validationBehavior: p
+  }), { isFocusVisible: s, focusProps: u } = Je({
+    within: !0
+  }), i = V(null), [d, v] = we(!e["aria-label"] && !e["aria-labelledby"]), { labelProps: c, triggerProps: f, valueProps: g, menuProps: P, descriptionProps: $, errorMessageProps: h, hiddenSelectProps: C, ...n } = ct({
+    ...Ve(e),
+    label: v,
+    validationBehavior: p
+  }, o, i), [D, F] = k(null), x = _(() => {
+    i.current && F(i.current.offsetWidth + "px");
+  }, [
+    i
+  ]);
+  Ge({
+    ref: i,
+    onResize: x
+  });
+  let O = R(() => ({
+    isOpen: o.isOpen,
+    isFocused: o.isFocused,
+    isFocusVisible: s,
+    isDisabled: e.isDisabled || !1,
+    isInvalid: n.isInvalid || !1,
+    isRequired: e.isRequired || !1
+  }), [
+    o.isOpen,
+    o.isFocused,
+    s,
+    e.isDisabled,
+    n.isInvalid,
+    e.isRequired
+  ]), y = te({
+    ...e,
+    values: O,
+    defaultClassName: "react-aria-Select"
+  }), M = W(e, {
+    global: !0
+  });
+  delete M.id;
+  let I = V(null);
+  return /* @__PURE__ */ S.createElement(Oe, {
+    values: [
+      [
+        H,
+        e
+      ],
+      [
+        U,
+        o
+      ],
+      [
+        oe,
+        g
+      ],
+      [
+        ae,
+        {
+          ...c,
+          ref: d,
+          elementType: "span"
+        }
+      ],
+      [
+        Y,
+        {
+          ...f,
+          ref: i,
+          isPressed: o.isOpen,
+          autoFocus: e.autoFocus
+        }
+      ],
+      [
+        Ie,
+        o
+      ],
+      [
+        Ee,
+        {
+          trigger: "Select",
+          triggerRef: i,
+          scrollRef: I,
+          placement: "bottom start",
+          style: {
+            "--trigger-width": D
+          },
+          "aria-labelledby": P["aria-labelledby"],
+          clearContexts: vt
+        }
+      ],
+      [
+        pe,
+        {
+          ...P,
+          ref: I
+        }
+      ],
+      [
+        ve,
+        o
+      ],
+      [
+        G,
+        {
+          slots: {
+            description: $,
+            errorMessage: h
+          }
+        }
+      ],
+      [
+        ke,
+        n
+      ]
+    ]
+  }, /* @__PURE__ */ S.createElement(le.div, {
+    ...L(M, y, u),
+    ref: t,
+    slot: e.slot || void 0,
+    "data-focused": o.isFocused || void 0,
+    "data-focus-visible": s || void 0,
+    "data-open": o.isOpen || void 0,
+    "data-disabled": e.isDisabled || void 0,
+    "data-invalid": n.isInvalid || void 0,
+    "data-required": e.isRequired || void 0
+  }, y.children, /* @__PURE__ */ S.createElement(ut, {
+    ...C,
+    autoComplete: e.autoComplete
+  })));
+}
+const oe = /* @__PURE__ */ N(null), gt = /* @__PURE__ */ Te(function(t, a) {
+  var r;
+  [t, a] = Z(t, a, oe);
+  let l = J(U), { placeholder: b } = ee(H), p = l.selectedItems.map(($) => {
+    var h;
+    let C = (h = $.props) === null || h === void 0 ? void 0 : h.children;
+    return typeof C == "function" && (C = C({
+      isHovered: !1,
+      isPressed: !1,
+      isSelected: !1,
+      isFocused: !1,
+      isFocusVisible: !1,
+      isDisabled: !1,
+      selectionMode: "single",
+      selectionBehavior: "toggle"
+    })), C;
+  }), o = dt(), s = R(() => l.selectedItems.map(($) => $?.textValue), [
+    l.selectedItems
+  ]), u = l.selectionManager.selectionMode, i = R(() => {
+    var $;
+    return u === "single" ? ($ = s[0]) !== null && $ !== void 0 ? $ : "" : o.format(s);
+  }, [
+    u,
+    o,
+    s
+  ]), d = R(() => {
+    if (u === "single") return p[0];
+    let $ = o.formatToParts(s);
+    if ($.length === 0) return null;
+    let h = 0;
+    return $.map((C) => C.type === "element" ? /* @__PURE__ */ S.createElement(fe, {
+      key: h
+    }, p[h++]) : C.value);
+  }, [
+    u,
+    o,
+    s,
+    p
+  ]), v = je(bt(Ae), "react-aria-components");
+  var c, f;
+  let g = te({
+    ...t,
+    defaultChildren: (c = d ?? b) !== null && c !== void 0 ? c : v.format("selectPlaceholder"),
+    defaultClassName: "react-aria-SelectValue",
+    values: {
+      selectedItem: (f = (r = l.selectedItems[0]) === null || r === void 0 ? void 0 : r.value) !== null && f !== void 0 ? f : null,
+      selectedItems: R(() => l.selectedItems.map(($) => {
+        var h;
+        return (h = $.value) !== null && h !== void 0 ? h : null;
+      }), [
+        l.selectedItems
+      ]),
+      selectedText: i,
+      isPlaceholder: l.selectedItems.length === 0,
+      state: l
+    }
+  }), P = W(t, {
+    global: !0
+  });
+  return /* @__PURE__ */ S.createElement(le.span, {
+    ref: a,
+    ...P,
+    ...g,
+    "data-placeholder": l.selectedItems.length === 0 || void 0
+  }, /* @__PURE__ */ S.createElement(G.Provider, {
+    value: void 0
+  }, g.children));
+}), { withProvider: ht, withContext: E } = /* @__PURE__ */ ue({
+  key: "nimbusSelect"
+}), xt = /* @__PURE__ */ ht(
+  "div",
+  "root"
+), St = /* @__PURE__ */ E("div", "leadingElement"), Pt = /* @__PURE__ */ E("button", "trigger"), Ct = /* @__PURE__ */ E("span", "triggerLabel"), Rt = /* @__PURE__ */ E("div", "options"), Dt = /* @__PURE__ */ E("div", "option"), Ft = /* @__PURE__ */ E("div", "optionGroup"), Mt = { clearSelection: "Clear selection" }, It = { clearSelection: "Auswahl löschen" }, Et = { clearSelection: "Borrar selección" }, Kt = { clearSelection: "Effacer la sélection" }, Bt = { clearSelection: "Limpar seleção" }, wt = {
+  en: /* @__PURE__ */ B(Mt),
+  de: /* @__PURE__ */ B(It),
+  es: /* @__PURE__ */ B(Et),
+  "fr-FR": /* @__PURE__ */ B(Kt),
+  "pt-BR": /* @__PURE__ */ B(Bt)
+}, re = () => {
+  const e = rt(wt), t = J(U);
+  if (!t?.selectedKey)
+    return null;
+  const a = () => {
+    t?.setSelectedKey(null);
+  };
+  return /* @__PURE__ */ m(Ke, { children: /* @__PURE__ */ m(
+    it,
+    {
+      slot: null,
+      pointerEvents: "all",
+      size: "2xs",
+      variant: "ghost",
+      "aria-label": e.format("clearSelection"),
+      "aria-labelledby": "",
+      onPress: a,
+      children: /* @__PURE__ */ m(Ce, {})
+    }
+  ) });
+};
+re.displayName = "Select.ClearButton";
+const ie = function({
+  ref: t,
+  children: a,
+  leadingElement: r,
+  isLoading: l,
+  isDisabled: b,
+  isClearable: p = !0,
+  ...o
+}) {
+  const s = V(null), u = st(Pe(s, t)), i = $e({ recipe: nt }), [d, v] = i.splitVariantProps(o), [c, f] = q(v), g = {
+    ...f,
+    isDisabled: l || b
+  };
+  return /* @__PURE__ */ m(xt, { asChild: !0, ref: u, ...d, ...c, children: /* @__PURE__ */ w(pt, { ...g, children: [
+    /* @__PURE__ */ w(Q.div, { position: "relative", children: [
+      /* @__PURE__ */ m(Pt, { zIndex: 0, asChild: !0, children: /* @__PURE__ */ w(Fe, { children: [
+        r && /* @__PURE__ */ m(St, { asChild: !0, children: r }),
+        /* @__PURE__ */ m(Ct, { asChild: !0, children: /* @__PURE__ */ m(gt, {}) })
+      ] }) }),
+      /* @__PURE__ */ w(
+        z,
+        {
+          position: "absolute",
+          top: "0",
+          bottom: "0",
+          zIndex: 1,
+          right: "400",
+          pointerEvents: "none",
+          children: [
+            p && /* @__PURE__ */ m(z, { width: "600", my: "auto", children: /* @__PURE__ */ m(re, {}) }),
+            /* @__PURE__ */ m(z, { my: "auto", w: "600", h: "600", children: /* @__PURE__ */ m(X, { color: "neutral.9", asChild: !0, m: "auto", w: "400", h: "400", children: l ? /* @__PURE__ */ m(X, { asChild: !0, animation: "spin", animationDuration: "slowest", children: /* @__PURE__ */ m(Re, {}) }) : /* @__PURE__ */ m(De, {}) }) })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ m(Be, { children: a })
+  ] }) });
+};
+ie.displayName = "Select.Root";
+const ne = (e) => {
+  const { ref: t, ...a } = e, [r, l] = q(a);
+  return /* @__PURE__ */ m(Rt, { asChild: !0, ...r, children: /* @__PURE__ */ m(ye, { ref: t, ...l }) });
+};
+ne.displayName = "Select.Options";
+const se = (e) => {
+  const { ref: t, ...a } = e, [r, l] = q(a);
+  return /* @__PURE__ */ m(Dt, { asChild: !0, ...r, children: /* @__PURE__ */ m(ge, { ref: t, ...l }) });
+};
+se.displayName = "Select.Option";
+const de = (e) => {
+  const { ref: t, label: a, items: r, children: l, ...b } = e, [p, o] = q(b);
+  if (r && typeof l != "function")
+    throw new Error(
+      'SelectOptionGroup: When "items" is provided, "children" must be a function'
+    );
+  return /* @__PURE__ */ m(Q.section, { ...p, asChild: !0, children: /* @__PURE__ */ w(he, { ref: t, ...o, children: [
+    /* @__PURE__ */ m(Ft, { asChild: !0, children: /* @__PURE__ */ m(be, { children: a }) }),
+    r ? /* @__PURE__ */ m(Se, { items: r, children: (s) => typeof l == "function" ? l(s) : null }) : l
+  ] }) });
+};
+de.displayName = "Select.OptionGroup";
+const hl = {
+  /**
+   * # Select.Root
+   *
+   * The root component that provides context and state management for the select.
+   * This component must wrap all select parts (Options, Option, etc.) and provides
+   * the select state, variant styling context, and selection management.
+   *
+   * @example
+   * ```tsx
+   * <Select.Root>
+   *   <Select.Options placeholder="Choose...">
+   *     <Select.Option id="apple">Apple</Select.Option>
+   *     <Select.Option id="orange">Orange</Select.Option>
+   *   </Select.Options>
+   * </Select.Root>
+   * ```
+   */
+  Root: ie,
+  /**
+   * # Select.Options
+   *
+   * The trigger button and dropdown container for select options.
+   * Displays the selected value and opens the options list when activated.
+   *
+   * This component handles the visual presentation of the select, including
+   * the trigger button, selected value display, dropdown icon, and the
+   * popover containing options.
+   *
+   * @example
+   * ```tsx
+   * <Select.Root>
+   *   <Select.Options
+   *     placeholder="Select fruit"
+   *     label="Favorite Fruit"
+   *   >
+   *     <Select.Option id="apple">Apple</Select.Option>
+   *     <Select.Option id="banana">Banana</Select.Option>
+   *   </Select.Options>
+   * </Select.Root>
+   * ```
+   */
+  Options: ne,
+  /**
+   * # Select.Option
+   *
+   * An individual selectable option within the select dropdown.
+   * Represents a single choice that can be selected by the user.
+   *
+   * Options automatically handle selection state, keyboard navigation,
+   * and visual feedback for hover and selection states.
+   *
+   * @example
+   * ```tsx
+   * <Select.Options>
+   *   <Select.Option id="red" textValue="Red">
+   *     🔴 Red
+   *   </Select.Option>
+   *   <Select.Option id="blue" textValue="Blue">
+   *     🔵 Blue
+   *   </Select.Option>
+   * </Select.Options>
+   * ```
+   */
+  Option: se,
+  /**
+   * # Select.OptionGroup
+   *
+   * A container for grouping related options with an optional label.
+   * Provides visual separation and semantic grouping of options.
+   *
+   * Option groups help organize large lists of options into logical
+   * categories with proper accessibility support.
+   *
+   * @example
+   * ```tsx
+   * <Select.Options>
+   *   <Select.OptionGroup label="Fruits">
+   *     <Select.Option id="apple">Apple</Select.Option>
+   *     <Select.Option id="banana">Banana</Select.Option>
+   *   </Select.OptionGroup>
+   *   <Select.OptionGroup label="Vegetables">
+   *     <Select.Option id="carrot">Carrot</Select.Option>
+   *     <Select.Option id="broccoli">Broccoli</Select.Option>
+   *   </Select.OptionGroup>
+   * </Select.Options>
+   * ```
+   */
+  OptionGroup: de
+};
+export {
+  hl as S
+};
+//# sourceMappingURL=select-BCclMTCA.es.js.map