@pismo/marola 0.0.1-alpha.1 → 0.0.1-alpha.12

package/dist/components/Select/Select.js

@@ -0,0 +1,860 @@
+import { jsx as h, jsxs as Oe } from "react/jsx-runtime";
+import { c as Se } from "../../clsx-DB4S2d7J.js";
+import { Typography as Ke } from "../Typography/Typography.js";
+import { s as I, B as ze } from "../../SelectButton-DWtqAiwt.js";
+import { a as g, _ as Ve } from "../../objectWithoutPropertiesLoose-D7Cp0Pg_.js";
+import * as s from "react";
+import { g as we, a as ke, u as X, e as ne, P as l, b as le, c as Ie, d as Me } from "../../index-CqjC7P5Y.js";
+import { u as Je, c as se, a as ye, L as Q } from "../../combineHooksSlotProps-BHqhiBfc.js";
+import { u as Ne } from "../../useButton-Bc8IAgyk.js";
+import { u as Te, a as We, b as Ge, C as Qe } from "../../useCompoundItem-D1iRfg8D.js";
+import { P as Xe } from "../../Popup-DFJQc_jn.js";
+import { m as ve, h as Ye, l as Ze, u as et } from "../../useList-ByMguSS_.js";
+import { u as tt } from "../../useEnhancedEffect-CJGo-L3B.js";
+const ot = {
+  border: 0,
+  clip: "rect(0 0 0 0)",
+  height: "1px",
+  margin: "-1px",
+  overflow: "hidden",
+  padding: 0,
+  position: "absolute",
+  whiteSpace: "nowrap",
+  width: "1px"
+}, Ae = "Option";
+function nt(n) {
+  return we(Ae, n);
+}
+ke(Ae, ["root", "disabled", "selected", "highlighted"]);
+function lt(n) {
+  const {
+    value: o,
+    label: i,
+    disabled: a,
+    rootRef: r,
+    id: c
+  } = n, {
+    getRootProps: p,
+    highlighted: f,
+    selected: d
+  } = Je({
+    item: o
+  }), {
+    getRootProps: v,
+    rootRef: M
+  } = Ne({
+    disabled: a,
+    focusableWhenDisabled: !0
+  }), x = Te(c), y = s.useRef(null), R = s.useMemo(() => ({
+    disabled: a,
+    label: i,
+    value: o,
+    ref: y,
+    id: x
+  }), [a, i, o, x]), {
+    index: N
+  } = We(o, R), O = X(r, y, M), T = (b) => (C) => {
+    var P;
+    (P = b.onKeyDown) == null || P.call(b, C), !C.defaultMuiPrevented && [" ", "Enter"].includes(C.key) && (C.defaultMuiPrevented = !0);
+  }, B = (b = {}) => ({
+    onKeyDown: T(b)
+  });
+  return {
+    getRootProps: (b = {}) => {
+      const C = ne(b), P = se(p, se(v, B));
+      return g({}, b, C, P(C), {
+        id: x,
+        ref: O,
+        role: "option",
+        "aria-selected": d
+      });
+    },
+    highlighted: f,
+    index: N,
+    selected: d,
+    rootRef: O
+  };
+}
+function st(n) {
+  const o = s.useContext(ye);
+  if (!o)
+    throw new Error("Option: ListContext was not found.");
+  const {
+    getItemState: i,
+    dispatch: a
+  } = o, {
+    highlighted: r,
+    selected: c,
+    focusable: p
+  } = i(n), f = s.useCallback((v) => {
+    if (v !== n)
+      throw new Error(["Base UI Option: Tried to access the state of another Option.", "This is unsupported when the Option uses the OptionContextStabilizer as a performance optimization."].join("/n"));
+    return {
+      highlighted: r,
+      selected: c,
+      focusable: p
+    };
+  }, [r, c, p, n]);
+  return {
+    contextValue: s.useMemo(() => ({
+      dispatch: a,
+      getItemState: f
+    }), [a, f])
+  };
+}
+const rt = ["children", "disabled", "label", "slotProps", "slots", "value"];
+function it(n) {
+  const {
+    disabled: o,
+    highlighted: i,
+    selected: a
+  } = n;
+  return Ie({
+    root: ["root", o && "disabled", i && "highlighted", a && "selected"]
+  }, Me(nt));
+}
+const ut = /* @__PURE__ */ s.memo(/* @__PURE__ */ s.forwardRef(function(o, i) {
+  var a, r;
+  const {
+    children: c,
+    disabled: p = !1,
+    label: f,
+    slotProps: d = {},
+    slots: v = {},
+    value: M
+  } = o, x = Ve(o, rt), y = (a = v.root) != null ? a : "li", R = s.useRef(null), N = X(R, i), O = f ?? (typeof c == "string" ? c : (r = R.current) == null || (r = r.textContent) == null ? void 0 : r.trim()), {
+    getRootProps: T,
+    selected: B,
+    highlighted: b,
+    index: C
+  } = lt({
+    disabled: p,
+    label: O,
+    rootRef: N,
+    value: M
+  }), P = g({}, o, {
+    disabled: p,
+    highlighted: b,
+    index: C,
+    selected: B
+  }), j = it(P), S = le({
+    getSlotProps: T,
+    elementType: y,
+    externalSlotProps: d.root,
+    externalForwardedProps: x,
+    className: j.root,
+    ownerState: P
+  });
+  return /* @__PURE__ */ h(y, g({}, S, {
+    children: c
+  }));
+})), Le = /* @__PURE__ */ s.forwardRef(function(o, i) {
+  const {
+    value: a
+  } = o, {
+    contextValue: r
+  } = st(a);
+  return /* @__PURE__ */ h(ye.Provider, {
+    value: r,
+    children: /* @__PURE__ */ h(ut, g({}, o, {
+      ref: i
+    }))
+  });
+});
+process.env.NODE_ENV !== "production" && (Le.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * @ignore
+   */
+  children: l.node,
+  /**
+   * @ignore
+   */
+  className: l.string,
+  /**
+   * If `true`, the option will be disabled.
+   * @default false
+   */
+  disabled: l.bool,
+  /**
+   * A text representation of the option's content.
+   * Used for keyboard text navigation matching.
+   */
+  label: l.string,
+  /**
+   * The props used for each slot inside the Option.
+   * @default {}
+   */
+  slotProps: l.shape({
+    root: l.oneOfType([l.func, l.object])
+  }),
+  /**
+   * The components used for each slot inside the Option.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  slots: l.shape({
+    root: l.elementType
+  }),
+  /**
+   * The value of the option.
+   */
+  value: l.any.isRequired
+});
+const re = {
+  buttonClick: "buttonClick",
+  browserAutoFill: "browserAutoFill"
+}, Be = (n) => {
+  const {
+    label: o,
+    value: i
+  } = n;
+  return typeof o == "string" ? o : typeof i == "string" ? i : String(n);
+};
+function at(n, o) {
+  const {
+    open: i
+  } = n, {
+    context: {
+      selectionMode: a
+    }
+  } = o;
+  if (o.type === re.buttonClick) {
+    var r;
+    const d = (r = n.selectedValues[0]) != null ? r : ve(null, "start", o.context);
+    return g({}, n, {
+      open: !i,
+      highlightedValue: i ? null : d
+    });
+  }
+  if (o.type === re.browserAutoFill)
+    return Ye(o.item, n, o.context);
+  const c = Ze(n, o);
+  switch (o.type) {
+    case Q.keyDown:
+      if (n.open) {
+        if (o.event.key === "Escape")
+          return g({}, c, {
+            open: !1
+          });
+      } else {
+        if (o.event.key === "ArrowDown") {
+          var p;
+          return g({}, n, {
+            open: !0,
+            highlightedValue: (p = n.selectedValues[0]) != null ? p : ve(null, "start", o.context)
+          });
+        }
+        if (o.event.key === "ArrowUp") {
+          var f;
+          return g({}, n, {
+            open: !0,
+            highlightedValue: (f = n.selectedValues[0]) != null ? f : ve(null, "end", o.context)
+          });
+        }
+      }
+      break;
+    case Q.itemClick:
+      if (a === "single")
+        return g({}, c, {
+          open: !1
+        });
+      break;
+    case Q.blur:
+      return g({}, c, {
+        open: !1
+      });
+    default:
+      return c;
+  }
+  return c;
+}
+function ct(n) {
+  return Array.isArray(n) ? n.length === 0 ? "" : JSON.stringify(n.map((o) => o.value)) : (n == null ? void 0 : n.value) == null ? "" : typeof n.value == "string" || typeof n.value == "number" ? n.value : JSON.stringify(n.value);
+}
+function dt(n) {
+  const {
+    areOptionsEqual: o,
+    buttonRef: i,
+    defaultOpen: a = !1,
+    defaultValue: r,
+    disabled: c = !1,
+    listboxId: p,
+    listboxRef: f,
+    multiple: d = !1,
+    name: v,
+    required: M,
+    onChange: x,
+    onHighlightChange: y,
+    onOpenChange: R,
+    open: N,
+    options: O,
+    getOptionAsString: T = Be,
+    getSerializedValue: B = ct,
+    value: b,
+    componentName: C = "useSelect"
+  } = n, P = s.useRef(null), j = X(i, P), S = s.useRef(null), $ = Te(p);
+  let E;
+  b === void 0 && r === void 0 ? E = [] : r !== void 0 && (d ? E = r : E = r == null ? [] : [r]);
+  const Y = s.useMemo(() => {
+    if (b !== void 0)
+      return d ? b : b == null ? [] : [b];
+  }, [b, d]), {
+    subitems: A,
+    contextValue: F
+  } = Ge(), V = s.useMemo(() => O != null ? new Map(O.map((e, t) => [e.value, {
+    value: e.value,
+    label: e.label,
+    disabled: e.disabled,
+    ref: /* @__PURE__ */ s.createRef(),
+    id: `${$}_${t}`
+  }])) : A, [O, A, $]), ie = X(f, S), {
+    getRootProps: Z,
+    active: ue,
+    focusVisible: ae,
+    rootRef: U
+  } = Ne({
+    disabled: c,
+    rootRef: j
+  }), q = s.useMemo(() => Array.from(V.keys()), [V]), _ = s.useCallback((e) => {
+    if (o !== void 0) {
+      const t = q.find((u) => o(u, e));
+      return V.get(t);
+    }
+    return V.get(e);
+  }, [V, o, q]), ee = s.useCallback((e) => {
+    var t;
+    const u = _(e);
+    return (t = u == null ? void 0 : u.disabled) != null ? t : !1;
+  }, [_]), te = s.useCallback((e) => {
+    const t = _(e);
+    return t ? T(t) : "";
+  }, [_, T]), ce = s.useMemo(() => ({
+    selectedValues: Y,
+    open: N
+  }), [Y, N]), de = s.useCallback((e) => {
+    var t;
+    return (t = V.get(e)) == null ? void 0 : t.id;
+  }, [V]), pe = s.useCallback((e, t) => {
+    if (d)
+      x == null || x(e, t);
+    else {
+      var u;
+      x == null || x(e, (u = t[0]) != null ? u : null);
+    }
+  }, [d, x]), fe = s.useCallback((e, t) => {
+    y == null || y(e, t ?? null);
+  }, [y]), be = s.useCallback((e, t, u) => {
+    if (t === "open" && (R == null || R(u), u === !1 && (e == null ? void 0 : e.type) !== "blur")) {
+      var m;
+      (m = P.current) == null || m.focus();
+    }
+  }, [R]), ge = s.useCallback((e) => {
+    var t, u;
+    return e == null ? null : (t = (u = A.get(e)) == null ? void 0 : u.ref.current) != null ? t : null;
+  }, [A]), me = {
+    getInitialState: () => {
+      var e;
+      return {
+        highlightedValue: null,
+        selectedValues: (e = E) != null ? e : [],
+        open: a
+      };
+    },
+    getItemId: de,
+    controlledProps: ce,
+    focusManagement: "DOM",
+    getItemDomElement: ge,
+    itemComparer: o,
+    isItemDisabled: ee,
+    rootRef: ie,
+    onChange: pe,
+    onHighlightChange: fe,
+    onStateChange: be,
+    reducerActionContext: s.useMemo(() => ({
+      multiple: d
+    }), [d]),
+    items: q,
+    getItemAsString: te,
+    selectionMode: d ? "multiple" : "single",
+    stateReducer: at,
+    componentName: C
+  }, {
+    dispatch: D,
+    getRootProps: he,
+    contextValue: K,
+    state: {
+      open: w,
+      highlightedValue: L,
+      selectedValues: k
+    },
+    rootRef: z
+  } = et(me), xe = s.useRef(w);
+  tt(() => {
+    if (w && L !== null) {
+      var e;
+      const t = (e = _(L)) == null ? void 0 : e.ref;
+      if (!S.current || !(t != null && t.current))
+        return;
+      xe.current || t.current.focus({
+        preventScroll: !0
+      });
+      const u = S.current.getBoundingClientRect(), m = t.current.getBoundingClientRect();
+      m.top < u.top ? S.current.scrollTop -= u.top - m.top : m.bottom > u.bottom && (S.current.scrollTop += m.bottom - u.bottom);
+    }
+  }, [w, L, _]);
+  const J = s.useCallback((e) => _(e), [_]), Ce = (e) => (t) => {
+    var u;
+    if (e == null || (u = e.onClick) == null || u.call(e, t), !t.defaultMuiPrevented) {
+      const m = {
+        type: re.buttonClick,
+        event: t
+      };
+      D(m);
+    }
+  }, W = (e) => (t) => {
+    var u;
+    (u = e.onKeyDown) == null || u.call(e, t), !t.defaultMuiPrevented && (t.key === "ArrowDown" || t.key === "ArrowUp") && (t.preventDefault(), D({
+      type: Q.keyDown,
+      key: t.key,
+      event: t
+    }));
+  }, oe = (e = {}) => ({
+    onClick: Ce(e),
+    onKeyDown: W(e)
+  }), H = (e = {}) => g({}, e, oe(e), {
+    role: "combobox",
+    "aria-expanded": w,
+    "aria-controls": $
+  }), He = (e = {}) => {
+    const t = ne(e), u = se(H, Z);
+    return g({}, e, u(t));
+  }, $e = (e) => (t) => {
+    var u, m;
+    (u = e.onBlur) == null || u.call(e, t), !t.defaultMuiPrevented && ((m = S.current) != null && m.contains(t.relatedTarget) || t.relatedTarget === P.current) && (t.defaultMuiPrevented = !0);
+  }, Fe = (e = {}) => ({
+    onBlur: $e(e)
+  }), qe = (e = {}) => {
+    const t = ne(e), u = se(Fe, he);
+    return g({
+      id: $,
+      role: "listbox",
+      "aria-multiselectable": d ? "true" : void 0
+    }, e, u(t));
+  };
+  s.useDebugValue({
+    selectedOptions: k,
+    highlightedOption: L,
+    open: w
+  });
+  const je = s.useMemo(() => g({}, K, F), [K, F]);
+  let G;
+  n.multiple ? G = k : G = k.length > 0 ? k[0] : null;
+  let Pe;
+  if (d)
+    Pe = G.map((e) => J(e)).filter((e) => e !== void 0);
+  else {
+    var Re;
+    Pe = (Re = J(G)) != null ? Re : null;
+  }
+  const Ue = (e) => (t) => {
+    var u;
+    if (e == null || (u = e.onChange) == null || u.call(e, t), t.defaultMuiPrevented)
+      return;
+    const m = V.get(t.target.value);
+    t.target.value === "" ? D({
+      type: Q.clearSelection
+    }) : m !== void 0 && D({
+      type: re.browserAutoFill,
+      item: m.value,
+      event: t
+    });
+  };
+  return {
+    buttonActive: ue,
+    buttonFocusVisible: ae,
+    buttonRef: U,
+    contextValue: je,
+    disabled: c,
+    dispatch: D,
+    getButtonProps: He,
+    getHiddenInputProps: (e = {}) => {
+      const t = ne(e);
+      return g({
+        name: v,
+        tabIndex: -1,
+        "aria-hidden": !0,
+        required: M ? !0 : void 0,
+        value: B(Pe),
+        style: ot
+      }, e, {
+        onChange: Ue(t)
+      });
+    },
+    getListboxProps: qe,
+    getOptionMetadata: J,
+    listboxRef: z,
+    open: w,
+    options: q,
+    value: G,
+    highlightedOption: L
+  };
+}
+function pt(n) {
+  const {
+    value: o,
+    children: i
+  } = n, {
+    dispatch: a,
+    getItemIndex: r,
+    getItemState: c,
+    registerItem: p,
+    totalSubitemCount: f
+  } = o, d = s.useMemo(() => ({
+    dispatch: a,
+    getItemState: c,
+    getItemIndex: r
+  }), [a, r, c]), v = s.useMemo(() => ({
+    getItemIndex: r,
+    registerItem: p,
+    totalSubitemCount: f
+  }), [p, r, f]);
+  return /* @__PURE__ */ h(Qe.Provider, {
+    value: v,
+    children: /* @__PURE__ */ h(ye.Provider, {
+      value: d,
+      children: i
+    })
+  });
+}
+const Ee = "Select";
+function ft(n) {
+  return we(Ee, n);
+}
+ke(Ee, ["root", "button", "listbox", "popup", "active", "expanded", "disabled", "focusVisible"]);
+var _e;
+const bt = ["areOptionsEqual", "autoComplete", "autoFocus", "children", "defaultValue", "defaultListboxOpen", "disabled", "getSerializedValue", "listboxId", "listboxOpen", "multiple", "name", "required", "onChange", "onListboxOpenChange", "getOptionAsString", "renderValue", "placeholder", "slotProps", "slots", "value"];
+function gt(n) {
+  var o;
+  return Array.isArray(n) ? /* @__PURE__ */ h(s.Fragment, {
+    children: n.map((i) => i.label).join(", ")
+  }) : (o = n == null ? void 0 : n.label) != null ? o : null;
+}
+function mt(n) {
+  const {
+    active: o,
+    disabled: i,
+    open: a,
+    focusVisible: r
+  } = n;
+  return Ie({
+    root: ["root", i && "disabled", r && "focusVisible", o && "active", a && "expanded"],
+    listbox: ["listbox", i && "disabled"],
+    popup: ["popup"]
+  }, Me(ft));
+}
+const De = /* @__PURE__ */ s.forwardRef(function(o, i) {
+  var a, r, c, p, f;
+  const {
+    areOptionsEqual: d,
+    autoComplete: v,
+    autoFocus: M,
+    children: x,
+    defaultValue: y,
+    defaultListboxOpen: R = !1,
+    disabled: N,
+    getSerializedValue: O,
+    listboxId: T,
+    listboxOpen: B,
+    multiple: b = !1,
+    name: C,
+    required: P = !1,
+    onChange: j,
+    onListboxOpenChange: S,
+    getOptionAsString: $ = Be,
+    renderValue: E,
+    placeholder: Y,
+    slotProps: A = {},
+    slots: F = {},
+    value: V
+  } = o, ie = Ve(o, bt), Z = E ?? gt, [ue, ae] = s.useState(!1), U = s.useRef(null), q = s.useRef(null), _ = (a = F.root) != null ? a : "button", ee = (r = F.listbox) != null ? r : "ul", te = (c = F.popup) != null ? c : "div", ce = s.useCallback((H) => {
+    ae(H != null);
+  }, []), de = X(i, U, ce);
+  s.useEffect(() => {
+    M && U.current.focus();
+  }, [M]);
+  const {
+    buttonActive: pe,
+    buttonFocusVisible: fe,
+    contextValue: be,
+    disabled: ge,
+    getButtonProps: me,
+    getListboxProps: D,
+    getHiddenInputProps: he,
+    getOptionMetadata: K,
+    value: w,
+    open: L
+  } = dt({
+    name: C,
+    required: P,
+    getSerializedValue: O,
+    areOptionsEqual: d,
+    buttonRef: de,
+    defaultOpen: R,
+    defaultValue: y,
+    disabled: N,
+    listboxId: T,
+    multiple: b,
+    open: B,
+    onChange: j,
+    onOpenChange: S,
+    getOptionAsString: $,
+    value: V,
+    componentName: "Select"
+  }), k = g({}, o, {
+    active: pe,
+    defaultListboxOpen: R,
+    disabled: ge,
+    focusVisible: fe,
+    open: L,
+    multiple: b,
+    renderValue: Z,
+    value: w
+  }), z = mt(k), xe = le({
+    elementType: _,
+    getSlotProps: me,
+    externalSlotProps: A.root,
+    externalForwardedProps: ie,
+    ownerState: k,
+    className: z.root
+  }), J = le({
+    elementType: ee,
+    getSlotProps: D,
+    externalSlotProps: A.listbox,
+    additionalProps: {
+      ref: q
+    },
+    ownerState: k,
+    className: z.listbox
+  }), Ce = le({
+    elementType: te,
+    externalSlotProps: A.popup,
+    additionalProps: {
+      anchor: U.current,
+      keepMounted: !0,
+      open: L,
+      placement: "bottom-start",
+      role: void 0
+    },
+    ownerState: k,
+    className: z.popup
+  });
+  let W;
+  if (b)
+    W = w.map((H) => K(H)).filter((H) => H !== void 0);
+  else {
+    var oe;
+    W = (oe = K(w)) != null ? oe : null;
+  }
+  return /* @__PURE__ */ Oe(s.Fragment, {
+    children: [/* @__PURE__ */ h(_, g({}, xe, {
+      children: (p = (f = Z(W)) != null ? f : Y) != null ? p : (
+        // fall back to a zero-width space to prevent layout shift
+        // from https://github.com/mui/material-ui/pull/24563
+        _e || (_e = /* @__PURE__ */ h("span", {
+          className: "notranslate",
+          children: "​"
+        }))
+      )
+    })), ue && /* @__PURE__ */ h(Xe, g({
+      slots: {
+        root: te
+      }
+    }, Ce, {
+      children: /* @__PURE__ */ h(ee, g({}, J, {
+        children: /* @__PURE__ */ h(pt, {
+          value: be,
+          children: x
+        })
+      }))
+    })), /* @__PURE__ */ h("input", g({}, he(), {
+      autoComplete: v
+    }))]
+  });
+});
+process.env.NODE_ENV !== "production" && (De.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * A function used to determine if two options' values are equal.
+   * By default, reference equality is used.
+   *
+   * There is a performance impact when using the `areOptionsEqual` prop (proportional to the number of options).
+   * Therefore, it's recommented to use the default reference equality comparison whenever possible.
+   */
+  areOptionsEqual: l.func,
+  /**
+   * This prop helps users to fill forms faster, especially on mobile devices.
+   * The name can be confusing, as it's more like an autofill.
+   * You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).
+   */
+  autoComplete: l.string,
+  /**
+   * If `true`, the select element is focused during the first mount
+   * @default false
+   */
+  autoFocus: l.bool,
+  /**
+   * @ignore
+   */
+  children: l.node,
+  /**
+   * @ignore
+   */
+  className: l.string,
+  /**
+   * If `true`, the select will be initially open.
+   * @default false
+   */
+  defaultListboxOpen: l.bool,
+  /**
+   * The default selected value. Use when the component is not controlled.
+   */
+  defaultValue: l.any,
+  /**
+   * If `true`, the select is disabled.
+   * @default false
+   */
+  disabled: l.bool,
+  /**
+   * A function used to convert the option label to a string.
+   * It's useful when labels are elements and need to be converted to plain text
+   * to enable navigation using character keys on a keyboard.
+   *
+   * @default defaultOptionStringifier
+   */
+  getOptionAsString: l.func,
+  /**
+   * A function to convert the currently selected value to a string.
+   * Used to set a value of a hidden input associated with the select,
+   * so that the selected value can be posted with a form.
+   */
+  getSerializedValue: l.func,
+  /**
+   * `id` attribute of the listbox element.
+   */
+  listboxId: l.string,
+  /**
+   * Controls the open state of the select's listbox.
+   * @default undefined
+   */
+  listboxOpen: l.bool,
+  /**
+   * If `true`, selecting multiple values is allowed.
+   * This affects the type of the `value`, `defaultValue`, and `onChange` props.
+   *
+   * @default false
+   */
+  multiple: l.bool,
+  /**
+   * Name of the element. For example used by the server to identify the fields in form submits.
+   */
+  name: l.string,
+  /**
+   * Callback fired when an option is selected.
+   */
+  onChange: l.func,
+  /**
+   * Callback fired when the component requests to be opened.
+   * Use in controlled mode (see listboxOpen).
+   */
+  onListboxOpenChange: l.func,
+  /**
+   * Text to show when there is no selected value.
+   */
+  placeholder: l.node,
+  /**
+   * Function that customizes the rendering of the selected value.
+   */
+  renderValue: l.func,
+  /**
+   * If `true`, the Select cannot be empty when submitting form.
+   * @default false
+   */
+  required: l.bool,
+  /**
+   * The props used for each slot inside the Input.
+   * @default {}
+   */
+  slotProps: l.shape({
+    listbox: l.oneOfType([l.func, l.object]),
+    popup: l.oneOfType([l.func, l.object]),
+    root: l.oneOfType([l.func, l.object])
+  }),
+  /**
+   * The components used for each slot inside the Select.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  slots: l.shape({
+    listbox: l.elementType,
+    popup: l.elementType,
+    root: l.elementType
+  }),
+  /**
+   * The selected value.
+   * Set to `null` to deselect all options.
+   */
+  value: l.any
+});
+const ht = (n) => {
+  const { children: o, icon: i, ...a } = n;
+  return /* @__PURE__ */ Oe(
+    Le,
+    {
+      ...a,
+      slotProps: {
+        root: (r) => ({
+          className: Se(I.select__listbox__option, {
+            [I["select__listbox__option--disabled"]]: r.disabled,
+            [I["select__listbox__option--selected"]]: r.selected,
+            [I["select__listbox__option--highlighted"]]: r.highlighted
+          })
+        })
+      },
+      children: [
+        i ? /* @__PURE__ */ h("span", { className: I.select__listbox__option__icon, children: i }) : "",
+        /* @__PURE__ */ h(Ke, { element: "span", variant: "body-small", className: I.select__listbox__option__text, children: o })
+      ]
+    }
+  );
+}, xt = (n) => {
+  const { children: o, onChange: i, ariaLabelledby: a, ...r } = n;
+  return /* @__PURE__ */ h(
+    De,
+    {
+      ...r,
+      onChange: (p, f) => {
+        i == null || i(f, p);
+      },
+      className: Se(I.select),
+      slots: { root: ze },
+      slotProps: {
+        listbox: { className: I.select__listbox },
+        popup: { className: I.select__popup }
+      },
+      "aria-labelledby": a,
+      children: o
+    }
+  );
+};
+xt.Option = ht;
+export {
+  ht as Option,
+  xt as Select
+};