import { _ as d, N as it, I as lt, r as Se, s as Le, P as i, t as De, v as je, J as te } from "./PrizeCard-C2El3VOB.js";
import * as l from "react";
import { d as ce, f as me, e as Je, s as K, r as at, u as Ne, a as ee, c as ze } from "./Button-DPGn5NZd.js";
import { jsx as L, jsxs as et } from "react/jsx-runtime";
import { c as Lt, F as Rt } from "./CheckCircle-DSloUas8.js";
import { P as Ot } from "./Popper-DlJYI9q0.js";
const Pt = {
  border: 0,
  clip: "rect(0 0 0 0)",
  height: "1px",
  margin: "-1px",
  overflow: "hidden",
  padding: 0,
  position: "absolute",
  whiteSpace: "nowrap",
  width: "1px"
};
function tt(t, e, o = (n, r) => n === r) {
  return t.length === e.length && t.every((n, r) => o(n, e[r]));
}
function Vt(t, e) {
  return t === e;
}
const Fe = {}, nt = () => {
};
function Ue(t, e) {
  const o = d({}, t);
  return Object.keys(e).forEach((n) => {
    e[n] !== void 0 && (o[n] = e[n]);
  }), o;
}
function kt(t) {
  const {
    nextState: e,
    initialState: o,
    stateComparers: n,
    onStateChange: r,
    controlledProps: s,
    lastActionRef: a
  } = t, c = l.useRef(o);
  l.useEffect(() => {
    if (a.current === null)
      return;
    const u = Ue(c.current, s);
    Object.keys(e).forEach((h) => {
      var y;
      const g = (y = n[h]) != null ? y : Vt, b = e[h], v = u[h];
      if (v == null && b != null || v != null && b == null || v != null && b != null && !g(b, v)) {
        var m, C;
        r == null || r((m = a.current.event) != null ? m : null, h, b, (C = a.current.type) != null ? C : "", e);
      }
    }), c.current = e, a.current = null;
  }, [c, e, a, r, n, s]);
}
function Dt(t) {
  const e = l.useRef(null), {
    reducer: o,
    initialState: n,
    controlledProps: r = Fe,
    stateComparers: s = Fe,
    onStateChange: a = nt,
    actionContext: c,
    componentName: u = ""
  } = t, h = l.useRef(r);
  process.env.NODE_ENV !== "production" && l.useEffect(() => {
    Object.keys(r).forEach((m) => {
      h.current[m] !== void 0 && r[m] === void 0 && console.error(`useControllableReducer: ${u ? `The ${u} component` : "A component"} is changing a controlled prop to be uncontrolled: ${m}`), h.current[m] === void 0 && r[m] !== void 0 && console.error(`useControllableReducer: ${u ? `The ${u} component` : "A component"} is changing an uncontrolled prop to be controlled: ${m}`);
    });
  }, [r, u]);
  const y = l.useCallback((m, C) => {
    e.current = C;
    const P = Ue(m, r);
    return o(P, C);
  }, [r, o]), [g, b] = l.useReducer(y, n), v = l.useCallback((m) => {
    b(d({}, m, {
      context: c
    }));
  }, [c]);
  return kt({
    nextState: g,
    initialState: n,
    stateComparers: s ?? Fe,
    onStateChange: a ?? nt,
    controlledProps: r,
    lastActionRef: e
  }), [Ue(g, r), v];
}
const k = {
  blur: "list:blur",
  focus: "list:focus",
  itemClick: "list:itemClick",
  itemHover: "list:itemHover",
  itemsChange: "list:itemsChange",
  keyDown: "list:keyDown",
  resetHighlight: "list:resetHighlight",
  highlightLast: "list:highlightLast",
  textNavigation: "list:textNavigation",
  clearSelection: "list:clearSelection"
};
function Nt(t, e, o, n, r, s) {
  if (o.length === 0 || !n && o.every((c, u) => r(c, u)))
    return -1;
  let a = t;
  for (; ; ) {
    if (!s && e === "next" && a === o.length || !s && e === "previous" && a === -1)
      return -1;
    if (n ? !1 : r(o[a], a))
      a += e === "next" ? 1 : -1, s && (a = (a + o.length) % o.length);
    else
      return a;
  }
}
function A(t, e, o) {
  var n;
  const {
    items: r,
    isItemDisabled: s,
    disableListWrap: a,
    disabledItemsFocusable: c,
    itemComparer: u,
    focusManagement: h
  } = o, y = h === "DOM" ? 0 : -1, g = r.length - 1, b = t == null ? -1 : r.findIndex((V) => u(V, t));
  let v, m, C = !a;
  switch (e) {
    case "reset":
      if (y === -1)
        return null;
      v = 0, m = "next", C = !1;
      break;
    case "start":
      v = 0, m = "next", C = !1;
      break;
    case "end":
      v = g, m = "previous", C = !1;
      break;
    default: {
      const V = b + e;
      V < 0 ? !C && b !== -1 || Math.abs(e) > 1 ? (v = 0, m = "next") : (v = g, m = "previous") : V > g ? !C || Math.abs(e) > 1 ? (v = g, m = "previous") : (v = 0, m = "next") : (v = V, m = e >= 0 ? "next" : "previous");
    }
  }
  const P = Nt(v, m, r, c, s, C);
  return P === -1 && t !== null && !s(t, b) ? t : (n = r[P]) != null ? n : null;
}
function zt(t, e, o, n) {
  return o === "none" ? [] : o === "single" ? n(e[0], t) ? e : [t] : e.some((r) => n(r, t)) ? e.filter((r) => !n(r, t)) : [...e, t];
}
function qe(t, e, o) {
  const {
    itemComparer: n,
    isItemDisabled: r,
    selectionMode: s,
    items: a
  } = o, {
    selectedValues: c
  } = e, u = a.findIndex((y) => n(t, y));
  if (r(t, u))
    return e;
  const h = zt(t, c, s, n);
  return d({}, e, {
    selectedValues: h,
    highlightedValue: t
  });
}
function Et(t, e, o) {
  const n = e.highlightedValue, {
    orientation: r,
    pageSize: s
  } = o;
  switch (t) {
    case "Home":
      return d({}, e, {
        highlightedValue: A(n, "start", o)
      });
    case "End":
      return d({}, e, {
        highlightedValue: A(n, "end", o)
      });
    case "PageUp":
      return d({}, e, {
        highlightedValue: A(n, -s, o)
      });
    case "PageDown":
      return d({}, e, {
        highlightedValue: A(n, s, o)
      });
    case "ArrowUp":
      if (r !== "vertical")
        break;
      return d({}, e, {
        highlightedValue: A(n, -1, o)
      });
    case "ArrowDown":
      if (r !== "vertical")
        break;
      return d({}, e, {
        highlightedValue: A(n, 1, o)
      });
    case "ArrowLeft": {
      if (r === "vertical")
        break;
      return d({}, e, {
        highlightedValue: A(n, r === "horizontal-ltr" ? -1 : 1, o)
      });
    }
    case "ArrowRight": {
      if (r === "vertical")
        break;
      return d({}, e, {
        highlightedValue: A(n, r === "horizontal-ltr" ? 1 : -1, o)
      });
    }
    case "Enter":
    case " ":
      return e.highlightedValue === null ? e : qe(e.highlightedValue, e, o);
  }
  return e;
}
function Tt(t, e) {
  return e.focusManagement === "DOM" ? t : d({}, t, {
    highlightedValue: null
  });
}
function $t(t, e, o) {
  var n;
  const r = (n = o(t)) == null ? void 0 : n.trim().toLowerCase();
  return !r || r.length === 0 ? !1 : r.indexOf(e) === 0;
}
function _t(t, e, o) {
  const {
    items: n,
    isItemDisabled: r,
    disabledItemsFocusable: s,
    getItemAsString: a
  } = o, c = e.length > 1;
  let u = c ? t.highlightedValue : A(t.highlightedValue, 1, o);
  for (let h = 0; h < n.length; h += 1) {
    if (!u || !c && t.highlightedValue === u)
      return t;
    if ($t(u, e, a) && (!r(u, n.indexOf(u)) || s))
      return d({}, t, {
        highlightedValue: u
      });
    u = A(u, 1, o);
  }
  return t;
}
function wt(t, e, o, n) {
  var r;
  const {
    itemComparer: s,
    focusManagement: a
  } = n;
  let c = null;
  if (o.highlightedValue != null) {
    var u;
    c = (u = t.find((g) => s(g, o.highlightedValue))) != null ? u : null;
  } else a === "DOM" && e.length === 0 && (c = A(null, "reset", n));
  const y = ((r = o.selectedValues) != null ? r : []).filter((g) => t.some((b) => s(b, g)));
  return d({}, o, {
    highlightedValue: c,
    selectedValues: y
  });
}
function Ht(t, e) {
  return d({}, t, {
    highlightedValue: A(null, "reset", e)
  });
}
function Mt(t, e) {
  return d({}, t, {
    highlightedValue: A(null, "end", e)
  });
}
function Bt(t, e) {
  return d({}, t, {
    selectedValues: [],
    highlightedValue: A(null, "reset", e)
  });
}
function st(t, e) {
  const {
    type: o,
    context: n
  } = e;
  switch (o) {
    case k.keyDown:
      return Et(e.key, t, n);
    case k.itemClick:
      return qe(e.item, t, n);
    case k.blur:
      return Tt(t, n);
    case k.textNavigation:
      return _t(t, e.searchString, n);
    case k.itemsChange:
      return wt(e.items, e.previousItems, t, n);
    case k.resetHighlight:
      return Ht(t, n);
    case k.highlightLast:
      return Mt(t, n);
    case k.clearSelection:
      return Bt(t, n);
    default:
      return t;
  }
}
const At = 500;
function Wt(t) {
  const e = l.useRef({
    searchString: "",
    lastTime: null
  });
  return l.useCallback((o) => {
    if (o.key.length === 1 && o.key !== " ") {
      const n = e.current, r = o.key.toLowerCase(), s = performance.now();
      n.searchString.length > 0 && n.lastTime && s - n.lastTime > At ? n.searchString = r : (n.searchString.length !== 1 || r !== n.searchString) && (n.searchString += r), n.lastTime = s, t(n.searchString, o);
    }
  }, [t]);
}
const ot = {}, Ft = () => {
}, Ut = (t, e) => t === e, jt = () => !1, Jt = (t) => typeof t == "string" ? t : String(t), qt = () => ({
  highlightedValue: null,
  selectedValues: []
});
function Kt(t) {
  const {
    controlledProps: e = ot,
    disabledItemsFocusable: o = !1,
    disableListWrap: n = !1,
    focusManagement: r = "activeDescendant",
    getInitialState: s = qt,
    getItemDomElement: a,
    getItemId: c,
    isItemDisabled: u = jt,
    rootRef: h,
    onStateChange: y = Ft,
    items: g,
    itemComparer: b = Ut,
    getItemAsString: v = Jt,
    onChange: m,
    onHighlightChange: C,
    onItemsChange: P,
    orientation: V = "vertical",
    pageSize: R = 5,
    reducerActionContext: D = ot,
    selectionMode: N = "single",
    stateReducer: _,
    componentName: T = "useList"
  } = t;
  if (process.env.NODE_ENV !== "production") {
    if (r === "DOM" && a == null)
      throw new Error("useList: The `getItemDomElement` prop is required when using the `DOM` focus management.");
    if (r === "activeDescendant" && c == null)
      throw new Error("useList: The `getItemId` prop is required when using the `activeDescendant` focus management.");
  }
  const w = l.useRef(null), H = ce(h, w), M = l.useCallback((x, S, O) => {
    if (C == null || C(x, S, O), r === "DOM" && S != null && (O === k.itemClick || O === k.keyDown || O === k.textNavigation)) {
      var z;
      a == null || (z = a(S)) == null || z.focus();
    }
  }, [a, C, r]), $ = l.useMemo(() => ({
    highlightedValue: b,
    selectedValues: (x, S) => tt(x, S, b)
  }), [b]), J = l.useCallback((x, S, O, z, G) => {
    switch (y == null || y(x, S, O, z, G), S) {
      case "highlightedValue":
        M(x, O, z);
        break;
      case "selectedValues":
        m == null || m(x, O, z);
        break;
    }
  }, [M, m, y]), W = l.useMemo(() => ({
    disabledItemsFocusable: o,
    disableListWrap: n,
    focusManagement: r,
    isItemDisabled: u,
    itemComparer: b,
    items: g,
    getItemAsString: v,
    onHighlightChange: M,
    orientation: V,
    pageSize: R,
    selectionMode: N,
    stateComparers: $
  }), [o, n, r, u, b, g, v, M, V, R, N, $]), Y = s(), ie = _ ?? st, ue = l.useMemo(() => d({}, D, W), [D, W]), [ne, U] = Dt({
    reducer: ie,
    actionContext: ue,
    initialState: Y,
    controlledProps: e,
    stateComparers: $,
    onStateChange: J,
    componentName: T
  }), {
    highlightedValue: j,
    selectedValues: F
  } = ne, de = Wt((x, S) => U({
    type: k.textNavigation,
    event: S,
    searchString: x
  })), oe = l.useRef([]);
  l.useEffect(() => {
    tt(oe.current, g, b) || (U({
      type: k.itemsChange,
      event: null,
      items: g,
      previousItems: oe.current
    }), oe.current = g, P == null || P(g));
  }, [g, b, U, P]);
  const pe = (x) => (S) => {
    var O;
    if ((O = x.onKeyDown) == null || O.call(x, S), S.defaultMuiPrevented)
      return;
    const z = ["Home", "End", "PageUp", "PageDown"];
    V === "vertical" ? z.push("ArrowUp", "ArrowDown") : z.push("ArrowLeft", "ArrowRight"), r === "activeDescendant" && z.push(" ", "Enter"), z.includes(S.key) && S.preventDefault(), U({
      type: k.keyDown,
      key: S.key,
      event: S
    }), de(S);
  }, le = (x) => (S) => {
    var O, z;
    (O = x.onBlur) == null || O.call(x, S), !S.defaultMuiPrevented && ((z = w.current) != null && z.contains(S.relatedTarget) || U({
      type: k.blur,
      event: S
    }));
  }, ve = (x = {}) => {
    const S = me(x);
    return d({}, x, {
      "aria-activedescendant": r === "activeDescendant" && j != null ? c(j) : void 0,
      tabIndex: r === "DOM" ? -1 : 0,
      ref: H
    }, S, {
      onBlur: le(S),
      onKeyDown: pe(S)
    });
  }, fe = l.useCallback((x) => {
    const S = (F ?? []).some((G) => G != null && b(x, G)), O = j != null && b(x, j);
    return {
      focusable: r === "DOM",
      highlighted: O,
      selected: S
    };
  }, [b, F, j, r]), be = l.useMemo(() => ({
    dispatch: U,
    getItemState: fe
  }), [U, fe]);
  return l.useDebugValue({
    state: ne
  }), {
    contextValue: be,
    dispatch: U,
    getRootProps: ve,
    rootRef: H,
    state: ne
  };
}
const Re = /* @__PURE__ */ l.createContext(null);
process.env.NODE_ENV !== "production" && (Re.displayName = "ListContext");
function Gt(t) {
  const {
    handlePointerOverEvents: e = !1,
    item: o
  } = t, n = l.useContext(Re);
  if (!n)
    throw new Error("useListItem must be used within a ListProvider");
  const {
    dispatch: r,
    getItemState: s
  } = n, {
    highlighted: a,
    selected: c,
    focusable: u
  } = s(o), h = l.useCallback((v) => (m) => {
    var C;
    if ((C = v.onClick) == null || C.call(v, m), !m.defaultPrevented) {
      if (process.env.NODE_ENV !== "production" && o === void 0)
        throw new Error(["MUI: The `item` provided to useListItem() is undefined.", "This should happen only during server-side rendering under React 17."].join(`
`));
      r({
        type: k.itemClick,
        item: o,
        event: m
      });
    }
  }, [r, o]), y = l.useCallback((v) => (m) => {
    var C;
    if ((C = v.onMouseOver) == null || C.call(v, m), !m.defaultPrevented) {
      if (process.env.NODE_ENV !== "production" && o === void 0)
        throw new Error(["MUI: The `item` provided to useListItem() is undefined.", "This should happen only during server-side rendering under React 17."].join(`
`));
      r({
        type: k.itemHover,
        item: o,
        event: m
      });
    }
  }, [r, o]);
  let g;
  return u && (g = a ? 0 : -1), {
    getRootProps: (v = {}) => {
      const m = me(v);
      return d({}, v, {
        onClick: h(m),
        onPointerOver: e ? y(m) : void 0,
        tabIndex: g
      });
    },
    highlighted: a,
    selected: c
  };
}
const Ke = /* @__PURE__ */ l.createContext(null);
process.env.NODE_ENV !== "production" && (Ke.displayName = "CompoundComponentContext");
function Xt(t) {
  const e = Array.from(t.keys()).map((o) => {
    const n = t.get(o);
    return {
      key: o,
      subitem: n
    };
  });
  return e.sort((o, n) => {
    const r = o.subitem.ref.current, s = n.subitem.ref.current;
    return r === null || s === null || r === s ? 0 : r.compareDocumentPosition(s) & Node.DOCUMENT_POSITION_PRECEDING ? 1 : -1;
  }), new Map(e.map((o) => [o.key, o.subitem]));
}
function Yt() {
  const [t, e] = l.useState(/* @__PURE__ */ new Map()), o = l.useRef(/* @__PURE__ */ new Set()), n = l.useCallback(function(h) {
    o.current.delete(h), e((y) => {
      const g = new Map(y);
      return g.delete(h), g;
    });
  }, []), r = l.useCallback(function(h, y) {
    let g;
    return typeof h == "function" ? g = h(o.current) : g = h, o.current.add(g), e((b) => {
      const v = new Map(b);
      return v.set(g, y), v;
    }), {
      id: g,
      deregister: () => n(g)
    };
  }, [n]), s = l.useMemo(() => Xt(t), [t]), a = l.useCallback(function(h) {
    return Array.from(s.keys()).indexOf(h);
  }, [s]);
  return {
    contextValue: l.useMemo(() => ({
      getItemIndex: a,
      registerItem: r,
      totalSubitemCount: t.size
    }), [a, r, t.size]),
    subitems: s
  };
}
function Qt(t, e) {
  const o = l.useContext(Ke);
  if (o === null)
    throw new Error("useCompoundItem must be used within a useCompoundParent");
  const {
    registerItem: n
  } = o, [r, s] = l.useState(typeof t == "function" ? void 0 : t);
  return it(() => {
    const {
      id: a,
      deregister: c
    } = n(t, e);
    return s(a), c;
  }, [n, e, t]), {
    id: r,
    index: r !== void 0 ? o.getItemIndex(r) : -1,
    totalItemCount: o.totalSubitemCount
  };
}
function Ve(t, e) {
  return function(n = {}) {
    const r = d({}, n, t(n));
    return d({}, r, e(r));
  };
}
function Zt(t) {
  const {
    value: e,
    label: o,
    disabled: n,
    rootRef: r,
    id: s
  } = t, {
    getRootProps: a,
    highlighted: c,
    selected: u
  } = Gt({
    item: e
  }), {
    getRootProps: h,
    rootRef: y
  } = Je({
    disabled: n,
    focusableWhenDisabled: !0
  }), g = lt(s), b = l.useRef(null), v = l.useMemo(() => ({
    disabled: n,
    label: o,
    value: e,
    ref: b,
    id: g
  }), [n, o, e, g]), {
    index: m
  } = Qt(e, v), C = ce(r, b, y), P = (R) => (D) => {
    var N;
    (N = R.onKeyDown) == null || N.call(R, D), !D.defaultMuiPrevented && [" ", "Enter"].includes(D.key) && (D.defaultMuiPrevented = !0);
  }, V = (R = {}) => ({
    onKeyDown: P(R)
  });
  return {
    getRootProps: (R = {}) => {
      const D = me(R), N = Ve(a, Ve(h, V));
      return d({}, R, D, N(D), {
        id: g,
        ref: C,
        role: "option",
        "aria-selected": u
      });
    },
    highlighted: c,
    index: m,
    selected: u,
    rootRef: C
  };
}
function en(t) {
  const e = l.useContext(Re);
  if (!e)
    throw new Error("Option: ListContext was not found.");
  const {
    getItemState: o,
    dispatch: n
  } = e, {
    highlighted: r,
    selected: s,
    focusable: a
  } = o(t), c = l.useCallback((h) => {
    if (h !== t)
      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: s,
      focusable: a
    };
  }, [r, s, a, t]);
  return {
    contextValue: l.useMemo(() => ({
      dispatch: n,
      getItemState: c
    }), [n, c])
  };
}
const ke = {
  buttonClick: "buttonClick",
  browserAutoFill: "browserAutoFill"
}, tn = (t) => {
  const {
    label: e,
    value: o
  } = t;
  return typeof e == "string" ? e : typeof o == "string" ? o : String(t);
};
function nn(t, e) {
  const {
    open: o
  } = t, {
    context: {
      selectionMode: n
    }
  } = e;
  if (e.type === ke.buttonClick) {
    var r;
    const u = (r = t.selectedValues[0]) != null ? r : A(null, "start", e.context);
    return d({}, t, {
      open: !o,
      highlightedValue: o ? null : u
    });
  }
  if (e.type === ke.browserAutoFill)
    return qe(e.item, t, e.context);
  const s = st(t, e);
  switch (e.type) {
    case k.keyDown:
      if (t.open) {
        if (e.event.key === "Escape")
          return d({}, s, {
            open: !1
          });
      } else {
        if (e.event.key === "ArrowDown") {
          var a;
          return d({}, t, {
            open: !0,
            highlightedValue: (a = t.selectedValues[0]) != null ? a : A(null, "start", e.context)
          });
        }
        if (e.event.key === "ArrowUp") {
          var c;
          return d({}, t, {
            open: !0,
            highlightedValue: (c = t.selectedValues[0]) != null ? c : A(null, "end", e.context)
          });
        }
      }
      break;
    case k.itemClick:
      if (n === "single")
        return d({}, s, {
          open: !1
        });
      break;
    case k.blur:
      return d({}, s, {
        open: !1
      });
    default:
      return s;
  }
  return s;
}
function on(t) {
  return Array.isArray(t) ? t.length === 0 ? "" : JSON.stringify(t.map((e) => e.value)) : (t == null ? void 0 : t.value) == null ? "" : typeof t.value == "string" || typeof t.value == "number" ? t.value : JSON.stringify(t.value);
}
function rn(t) {
  const {
    areOptionsEqual: e,
    buttonRef: o,
    defaultOpen: n = !1,
    defaultValue: r,
    disabled: s = !1,
    listboxId: a,
    listboxRef: c,
    multiple: u = !1,
    name: h,
    required: y,
    onChange: g,
    onHighlightChange: b,
    onOpenChange: v,
    open: m,
    options: C,
    getOptionAsString: P = tn,
    getSerializedValue: V = on,
    value: R,
    componentName: D = "useSelect"
  } = t, N = l.useRef(null), _ = ce(o, N), T = l.useRef(null), w = lt(a);
  let H;
  R === void 0 && r === void 0 ? H = [] : r !== void 0 && (u ? H = r : H = r == null ? [] : [r]);
  const M = l.useMemo(() => {
    if (R !== void 0)
      return u ? R : R == null ? [] : [R];
  }, [R, u]), {
    subitems: $,
    contextValue: J
  } = Yt(), W = l.useMemo(() => C != null ? new Map(C.map((p, f) => [p.value, {
    value: p.value,
    label: p.label,
    disabled: p.disabled,
    ref: /* @__PURE__ */ l.createRef(),
    id: `${w}_${f}`
  }])) : $, [C, $, w]), Y = ce(c, T), {
    getRootProps: ie,
    active: ue,
    focusVisible: ne,
    rootRef: U
  } = Je({
    disabled: s,
    rootRef: _
  }), j = l.useMemo(() => Array.from(W.keys()), [W]), F = l.useCallback((p) => {
    if (e !== void 0) {
      const f = j.find((I) => e(I, p));
      return W.get(f);
    }
    return W.get(p);
  }, [W, e, j]), de = l.useCallback((p) => {
    var f;
    const I = F(p);
    return (f = I == null ? void 0 : I.disabled) != null ? f : !1;
  }, [F]), oe = l.useCallback((p) => {
    const f = F(p);
    return f ? P(f) : "";
  }, [F, P]), pe = l.useMemo(() => ({
    selectedValues: M,
    open: m
  }), [M, m]), le = l.useCallback((p) => {
    var f;
    return (f = W.get(p)) == null ? void 0 : f.id;
  }, [W]), ve = l.useCallback((p, f) => {
    if (u)
      g == null || g(p, f);
    else {
      var I;
      g == null || g(p, (I = f[0]) != null ? I : null);
    }
  }, [u, g]), fe = l.useCallback((p, f) => {
    b == null || b(p, f ?? null);
  }, [b]), be = l.useCallback((p, f, I) => {
    if (f === "open" && (v == null || v(I), I === !1 && (p == null ? void 0 : p.type) !== "blur")) {
      var B;
      (B = N.current) == null || B.focus();
    }
  }, [v]), x = l.useCallback((p) => {
    var f, I;
    return p == null ? null : (f = (I = $.get(p)) == null ? void 0 : I.ref.current) != null ? f : null;
  }, [$]), S = {
    getInitialState: () => {
      var p;
      return {
        highlightedValue: null,
        selectedValues: (p = H) != null ? p : [],
        open: n
      };
    },
    getItemId: le,
    controlledProps: pe,
    focusManagement: "DOM",
    getItemDomElement: x,
    itemComparer: e,
    isItemDisabled: de,
    rootRef: Y,
    onChange: ve,
    onHighlightChange: fe,
    onStateChange: be,
    reducerActionContext: l.useMemo(() => ({
      multiple: u
    }), [u]),
    items: j,
    getItemAsString: oe,
    selectionMode: u ? "multiple" : "single",
    stateReducer: nn,
    componentName: D
  }, {
    dispatch: O,
    getRootProps: z,
    contextValue: G,
    state: {
      open: Q,
      highlightedValue: ae,
      selectedValues: se
    },
    rootRef: xe
  } = Kt(S), Te = l.useRef(Q);
  it(() => {
    if (Q && ae !== null) {
      var p;
      const f = (p = F(ae)) == null ? void 0 : p.ref;
      if (!T.current || !(f != null && f.current))
        return;
      Te.current || f.current.focus({
        preventScroll: !0
      });
      const I = T.current.getBoundingClientRect(), B = f.current.getBoundingClientRect();
      B.top < I.top ? T.current.scrollTop -= I.top - B.top : B.bottom > I.bottom && (T.current.scrollTop += B.bottom - I.bottom);
    }
  }, [Q, ae, F]);
  const Ce = l.useCallback((p) => F(p), [F]), $e = (p) => (f) => {
    var I;
    if (p == null || (I = p.onClick) == null || I.call(p, f), !f.defaultMuiPrevented) {
      const B = {
        type: ke.buttonClick,
        event: f
      };
      O(B);
    }
  }, _e = (p) => (f) => {
    var I;
    (I = p.onKeyDown) == null || I.call(p, f), !f.defaultMuiPrevented && (f.key === "ArrowDown" || f.key === "ArrowUp") && (f.preventDefault(), O({
      type: k.keyDown,
      key: f.key,
      event: f
    }));
  }, we = (p = {}) => ({
    onClick: $e(p),
    onKeyDown: _e(p)
  }), He = (p = {}) => d({}, p, we(p), {
    role: "combobox",
    "aria-expanded": Q,
    "aria-controls": w
  }), Me = (p = {}) => {
    const f = me(p), I = Ve(He, ie);
    return d({}, p, I(f));
  }, Be = (p) => (f) => {
    var I, B;
    (I = p.onBlur) == null || I.call(p, f), !f.defaultMuiPrevented && ((B = T.current) != null && B.contains(f.relatedTarget) || f.relatedTarget === N.current) && (f.defaultMuiPrevented = !0);
  }, Ae = (p = {}) => ({
    onBlur: Be(p)
  }), Ie = (p = {}) => {
    const f = me(p), I = Ve(Ae, z);
    return d({
      id: w,
      role: "listbox",
      "aria-multiselectable": u ? "true" : void 0
    }, p, I(f));
  };
  l.useDebugValue({
    selectedOptions: se,
    highlightedOption: ae,
    open: Q
  });
  const Oe = l.useMemo(() => d({}, G, J), [G, J]);
  let X;
  t.multiple ? X = se : X = se.length > 0 ? se[0] : null;
  let q;
  if (u)
    q = X.map((p) => Ce(p)).filter((p) => p !== void 0);
  else {
    var Z;
    q = (Z = Ce(X)) != null ? Z : null;
  }
  const re = (p) => (f) => {
    var I;
    if (p == null || (I = p.onChange) == null || I.call(p, f), f.defaultMuiPrevented)
      return;
    const B = W.get(f.target.value);
    f.target.value === "" ? O({
      type: k.clearSelection
    }) : B !== void 0 && O({
      type: ke.browserAutoFill,
      item: B.value,
      event: f
    });
  };
  return {
    buttonActive: ue,
    buttonFocusVisible: ne,
    buttonRef: U,
    contextValue: Oe,
    disabled: s,
    dispatch: O,
    getButtonProps: Me,
    getHiddenInputProps: (p = {}) => {
      const f = me(p);
      return d({
        name: h,
        tabIndex: -1,
        "aria-hidden": !0,
        required: y ? !0 : void 0,
        value: V(q),
        style: Pt
      }, p, {
        onChange: re(f)
      });
    },
    getListboxProps: Ie,
    getOptionMetadata: Ce,
    listboxRef: xe,
    open: Q,
    options: j,
    value: X,
    highlightedOption: ae
  };
}
function ln(t) {
  const {
    value: e,
    children: o
  } = t, {
    dispatch: n,
    getItemIndex: r,
    getItemState: s,
    registerItem: a,
    totalSubitemCount: c
  } = e, u = l.useMemo(() => ({
    dispatch: n,
    getItemState: s,
    getItemIndex: r
  }), [n, r, s]), h = l.useMemo(() => ({
    getItemIndex: r,
    registerItem: a,
    totalSubitemCount: c
  }), [a, r, c]);
  return /* @__PURE__ */ L(Ke.Provider, {
    value: h,
    children: /* @__PURE__ */ L(Re.Provider, {
      value: u,
      children: o
    })
  });
}
function qn(t) {
  return Le("MuiListItem", t);
}
const an = Se("MuiListItem", ["root", "startAction", "endAction", "nested", "nesting", "sticky", "colorPrimary", "colorNeutral", "colorDanger", "colorSuccess", "colorWarning", "colorContext", "variantPlain", "variantSoft", "variantOutlined", "variantSolid"]), Ge = /* @__PURE__ */ l.createContext(!1);
process.env.NODE_ENV !== "production" && (Ge.displayName = "NestedListContext");
const Ee = /* @__PURE__ */ l.createContext(!1);
process.env.NODE_ENV !== "production" && (Ee.displayName = "RowListContext");
const ct = /* @__PURE__ */ l.createContext(!1);
process.env.NODE_ENV !== "production" && (ct.displayName = "WrapListContext");
const ut = /* @__PURE__ */ l.createContext(void 0);
process.env.NODE_ENV !== "production" && (ut.displayName = "ComponentListContext");
const Xe = /* @__PURE__ */ l.createContext(void 0);
process.env.NODE_ENV !== "production" && (Xe.displayName = "GroupListContext");
const sn = {
  "--NestedList-marginRight": "0px",
  "--NestedList-marginLeft": "0px",
  "--NestedListItem-paddingLeft": "var(--ListItem-paddingX)",
  // reset ListItem, ListItemButton negative margin (caused by NestedListItem)
  "--ListItemButton-marginBlock": "0px",
  "--ListItemButton-marginInline": "0px",
  "--ListItem-marginBlock": "0px",
  "--ListItem-marginInline": "0px"
};
function dt(t) {
  const {
    children: e,
    nested: o,
    row: n = !1,
    wrap: r = !1
  } = t, s = /* @__PURE__ */ L(Ee.Provider, {
    value: n,
    children: /* @__PURE__ */ L(ct.Provider, {
      value: r,
      children: l.Children.map(e, (a, c) => /* @__PURE__ */ l.isValidElement(a) ? /* @__PURE__ */ l.cloneElement(a, d({}, c === 0 && {
        "data-first-child": ""
      }, c === l.Children.count(e) - 1 && {
        "data-last-child": ""
      })) : a)
    })
  });
  return o === void 0 ? s : /* @__PURE__ */ L(Ge.Provider, {
    value: o,
    children: s
  });
}
function cn(t) {
  return Le("MuiList", t);
}
const Kn = Se("MuiList", ["root", "nesting", "scoped", "sizeSm", "sizeMd", "sizeLg", "colorPrimary", "colorNeutral", "colorDanger", "colorSuccess", "colorWarning", "colorContext", "variantPlain", "variantOutlined", "variantSoft", "variantSolid", "horizontal", "vertical"]), pt = /* @__PURE__ */ l.createContext(void 0);
process.env.NODE_ENV !== "production" && (pt.displayName = "RadioGroupContext");
const un = ["component", "className", "children", "size", "orientation", "wrap", "variant", "color", "role", "slots", "slotProps"], dn = (t) => {
  const {
    variant: e,
    color: o,
    size: n,
    nesting: r,
    orientation: s,
    instanceSize: a
  } = t, c = {
    root: ["root", s, e && `variant${te(e)}`, o && `color${te(o)}`, !a && !r && n && `size${te(n)}`, a && `size${te(a)}`, r && "nesting"]
  };
  return ze(c, cn, {});
}, ft = K("ul")(({
  theme: t,
  ownerState: e
}) => {
  var o;
  const {
    p: n,
    padding: r,
    borderRadius: s
  } = at({
    theme: t,
    ownerState: e
  }, ["p", "padding", "borderRadius"]);
  function a(c) {
    return c === "sm" ? {
      "--ListDivider-gap": "0.25rem",
      "--ListItem-minHeight": "2rem",
      "--ListItem-paddingY": "3px",
      "--ListItem-paddingX": e.marker ? "3px" : "0.5rem",
      "--ListItem-gap": "0.5rem",
      "--ListItemDecorator-size": e.orientation === "horizontal" ? "1.5rem" : "2rem",
      "--Icon-fontSize": t.vars.fontSize.lg
    } : c === "md" ? {
      "--ListDivider-gap": "0.375rem",
      "--ListItem-minHeight": "2.25rem",
      "--ListItem-paddingY": "0.25rem",
      "--ListItem-paddingX": e.marker ? "0.25rem" : "0.75rem",
      "--ListItem-gap": "0.625rem",
      "--ListItemDecorator-size": e.orientation === "horizontal" ? "1.75rem" : "2.5rem",
      "--Icon-fontSize": t.vars.fontSize.xl
    } : c === "lg" ? {
      "--ListDivider-gap": "0.5rem",
      "--ListItem-minHeight": "2.75rem",
      "--ListItem-paddingY": "0.375rem",
      "--ListItem-paddingX": e.marker ? "0.5rem" : "1rem",
      "--ListItem-gap": "0.75rem",
      "--ListItemDecorator-size": e.orientation === "horizontal" ? "2.25rem" : "3rem",
      "--Icon-fontSize": t.vars.fontSize.xl2
    } : {};
  }
  return [e.nesting && d({}, a(e.instanceSize), {
    "--ListItem-paddingRight": "var(--ListItem-paddingX)",
    "--ListItem-paddingLeft": "var(--NestedListItem-paddingLeft)",
    // reset ListItem, ListItemButton negative margin (caused by NestedListItem)
    "--ListItemButton-marginBlock": "0px",
    "--ListItemButton-marginInline": "0px",
    "--ListItem-marginBlock": "0px",
    "--ListItem-marginInline": "0px",
    padding: 0
  }, e.marker && {
    paddingInlineStart: "calc(3ch - var(--_List-markerDeduct, 0px))"
    // the width of the marker
  }, {
    marginInlineStart: "var(--NestedList-marginLeft)",
    marginInlineEnd: "var(--NestedList-marginRight)",
    marginBlockStart: "var(--List-gap)",
    marginBlockEnd: "initial"
    // reset user agent stylesheet.
  }), !e.nesting && d({}, a(e.size), {
    "--List-gap": "0px",
    "--List-nestedInsetStart": "0px",
    "--ListItem-paddingLeft": "var(--ListItem-paddingX)",
    "--ListItem-paddingRight": "var(--ListItem-paddingX)"
  }, e.marker && {
    "--_List-markerDeduct": "1ch"
  }, {
    // Automatic radius adjustment kicks in only if '--List-padding' and '--List-radius' are provided.
    "--unstable_List-childRadius": "calc(max(var(--List-radius) - var(--List-padding), min(var(--List-padding) / 2, var(--List-radius) / 2)) - var(--variant-borderWidth, 0px))",
    "--ListItem-radius": "var(--unstable_List-childRadius)",
    // by default, The ListItem & ListItemButton use automatic radius adjustment based on the parent List.
    "--ListItem-startActionTranslateX": "calc(0.5 * var(--ListItem-paddingLeft))",
    "--ListItem-endActionTranslateX": "calc(-0.5 * var(--ListItem-paddingRight))",
    margin: "initial"
  }, t.typography[`body-${e.size}`], e.orientation === "horizontal" ? d({}, e.wrap ? {
    padding: "var(--List-padding)",
    // Fallback is not needed for row-wrap List
    marginInlineStart: "calc(-1 * var(--List-gap))",
    marginBlockStart: "calc(-1 * var(--List-gap))"
  } : {
    paddingInline: "var(--List-padding, var(--ListDivider-gap))",
    paddingBlock: "var(--List-padding)"
  }) : {
    paddingBlock: "var(--List-padding, var(--ListDivider-gap))",
    paddingInline: "var(--List-padding)"
  }, e.marker && {
    paddingInlineStart: "3ch"
    // the width of the marker
  }), d({
    boxSizing: "border-box",
    borderRadius: "var(--List-radius)",
    listStyle: "none",
    display: "flex",
    flexDirection: e.orientation === "horizontal" ? "row" : "column"
  }, e.wrap && {
    flexWrap: "wrap"
  }, e.marker && {
    "--_List-markerDisplay": "list-item",
    "--_List-markerType": e.marker,
    lineHeight: "calc(var(--ListItem-minHeight) - 2 * var(--ListItem-paddingY))"
  }, {
    flexGrow: 1,
    position: "relative"
  }, (o = t.variants[e.variant]) == null ? void 0 : o[e.color], {
    "--unstable_List-borderWidth": "var(--variant-borderWidth, 0px)"
  }, s !== void 0 && {
    "--List-radius": s
  }, n !== void 0 && {
    "--List-padding": n
  }, r !== void 0 && {
    "--List-padding": r
  })];
}), pn = K(ft, {
  name: "JoyList",
  slot: "Root",
  overridesResolver: (t, e) => e.root
})({}), fn = /* @__PURE__ */ l.forwardRef(function(e, o) {
  var n;
  const r = l.useContext(Ge), s = l.useContext(Xe), a = l.useContext(pt), c = Ne({
    props: e,
    name: "JoyList"
  }), {
    component: u,
    className: h,
    children: y,
    size: g,
    orientation: b = "vertical",
    wrap: v = !1,
    variant: m = "plain",
    color: C = "neutral",
    role: P,
    slots: V = {},
    slotProps: R = {}
  } = c, D = De(c, un), N = g || ((n = e.size) != null ? n : "md");
  let _;
  s && (_ = "group"), a && (_ = "presentation"), P && (_ = P);
  const T = d({}, c, {
    instanceSize: e.size,
    size: N,
    nesting: r,
    orientation: b,
    wrap: v,
    variant: m,
    color: C,
    role: _
  }), w = dn(T), H = d({}, D, {
    component: u,
    slots: V,
    slotProps: R
  }), [M, $] = ee("root", {
    ref: o,
    className: je(w.root, h),
    elementType: pn,
    externalForwardedProps: H,
    ownerState: T,
    additionalProps: {
      as: u,
      role: _,
      "aria-labelledby": typeof r == "string" ? r : void 0
    }
  });
  return /* @__PURE__ */ L(M, d({}, $, {
    children: /* @__PURE__ */ L(ut.Provider, {
      value: `${typeof u == "string" ? u : ""}:${_ || ""}`,
      children: /* @__PURE__ */ L(dt, {
        row: b === "horizontal",
        wrap: v,
        children: y
      })
    })
  }));
});
process.env.NODE_ENV !== "production" && (fn.propTypes = {
  // ┌────────────────────────────── Warning ──────────────────────────────┐
  // │ These PropTypes are generated from the TypeScript type definitions. │
  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
  // └─────────────────────────────────────────────────────────────────────┘
  /**
   * The content of the component.
   */
  children: i.node,
  /**
   * @ignore
   */
  className: i.string,
  /**
   * The color of the component. It supports those theme colors that make sense for this component.
   * @default 'neutral'
   */
  color: i.oneOfType([i.oneOf(["danger", "neutral", "primary", "success", "warning"]), i.string]),
  /**
   * The component used for the root node.
   * Either a string to use a HTML element or a component.
   */
  component: i.elementType,
  /**
   * The marker (such as a disc, character, or custom counter style) of the list items.
   * When this prop is specified, the List Item changes the CSS display to `list-item` in order to apply the marker.
   *
   * To see all available options, check out the [MDN list-style-type page](https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type).
   */
  marker: i.string,
  /**
   * The component orientation.
   * @default 'vertical'
   */
  orientation: i.oneOf(["horizontal", "vertical"]),
  /**
   * @ignore
   */
  role: i.string,
  /**
   * The size of the component (affect other nested list* components).
   * @default 'md'
   */
  size: i.oneOfType([i.oneOf(["sm", "md", "lg"]), i.string]),
  /**
   * The props used for each slot inside.
   * @default {}
   */
  slotProps: i.shape({
    root: i.oneOfType([i.func, i.object])
  }),
  /**
   * The components used for each slot inside.
   * @default {}
   */
  slots: i.shape({
    root: i.elementType
  }),
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx: i.oneOfType([i.arrayOf(i.oneOfType([i.func, i.object, i.bool])), i.func, i.object]),
  /**
   * The [global variant](https://mui.com/joy-ui/main-features/global-variants/) to use.
   * @default 'plain'
   */
  variant: i.oneOfType([i.oneOf(["outlined", "plain", "soft", "solid"]), i.string]),
  /**
   * Only for horizontal list.
   * If `true`, the list sets the flex-wrap to "wrap" and adjust margin to have gap-like behavior (will move to `gap` in the future).
   *
   * @default false
   */
  wrap: i.bool
});
function gn(t) {
  return Le("MuiListItemButton", t);
}
const Pe = Se("MuiListItemButton", ["root", "horizontal", "vertical", "colorPrimary", "colorNeutral", "colorDanger", "colorSuccess", "colorWarning", "colorContext", "focusVisible", "disabled", "selected", "variantPlain", "variantSoft", "variantOutlined", "variantSolid"]), gt = /* @__PURE__ */ l.createContext("horizontal");
process.env.NODE_ENV !== "production" && (gt.displayName = "ListItemButtonOrientationContext");
const mn = ["children", "className", "action", "component", "orientation", "role", "selected", "color", "variant", "slots", "slotProps"], hn = (t) => {
  const {
    color: e,
    disabled: o,
    focusVisible: n,
    focusVisibleClassName: r,
    selected: s,
    variant: a
  } = t, c = {
    root: ["root", o && "disabled", n && "focusVisible", e && `color${te(e)}`, s && "selected", a && `variant${te(a)}`]
  }, u = ze(c, gn, {});
  return n && r && (u.root += ` ${r}`), u;
}, mt = K("div")(({
  theme: t,
  ownerState: e
}) => {
  var o, n, r, s, a, c;
  return d({
    "--Icon-margin": "initial",
    // reset the icon's margin.
    "--Icon-color": e.color !== "neutral" || e.variant === "solid" ? "currentColor" : t.vars.palette.text.icon,
    WebkitTapHighlightColor: "transparent",
    boxSizing: "border-box",
    position: "relative",
    font: "inherit",
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    alignSelf: "stretch",
    // always stretch itself to fill the parent (List|ListItem)
    gap: "var(--ListItem-gap)"
  }, e.orientation === "vertical" && {
    flexDirection: "column",
    justifyContent: "center"
  }, {
    textAlign: "initial",
    textDecoration: "initial",
    // reset native anchor tag
    backgroundColor: "initial",
    // reset button background
    cursor: "pointer",
    // In some cases, ListItemButton is a child of ListItem so the margin needs to be controlled by the ListItem. The value is negative to account for the ListItem's padding
    marginInline: "var(--ListItemButton-marginInline)",
    marginBlock: "var(--ListItemButton-marginBlock)"
  }, e["data-first-child"] === void 0 && {
    marginInlineStart: e.row ? "var(--List-gap)" : void 0,
    marginBlockStart: e.row ? void 0 : "var(--List-gap)"
  }, {
    // account for the border width, so that all of the ListItemButtons content aligned horizontally
    paddingBlock: "calc(var(--ListItem-paddingY) - var(--variant-borderWidth, 0px))",
    // account for the border width, so that all of the ListItemButtons content aligned vertically
    paddingInlineStart: "calc(var(--ListItem-paddingLeft) + var(--ListItem-startActionWidth, var(--unstable_startActionWidth, 0px)))",
    // --internal variable makes it possible to customize the actionWidth from the top List
    paddingInlineEnd: "calc(var(--ListItem-paddingRight) + var(--ListItem-endActionWidth, var(--unstable_endActionWidth, 0px)))",
    // --internal variable makes it possible to customize the actionWidth from the top List
    minBlockSize: "var(--ListItem-minHeight)",
    border: "1px solid transparent",
    // use `transparent` as a placeholder to prevent the button from jumping when switching to `outlined` variant
    borderRadius: "var(--ListItem-radius)",
    flex: "var(--unstable_ListItem-flex, none)",
    // prevent children from shrinking when the List's height is limited.
    fontSize: "inherit",
    // prevent user agent style when component="button"
    lineHeight: "inherit",
    // prevent user agent style when component="button"
    minInlineSize: 0,
    [t.focus.selector]: d({}, t.focus.default, {
      zIndex: 1
      // to be above of the next element. For example, the first Tab item should be above the second so that the outline is above the second Tab.
    })
  }, (o = t.variants[e.variant]) == null ? void 0 : o[e.color], {
    "&:active": (n = t.variants[`${e.variant}Active`]) == null ? void 0 : n[e.color],
    [`.${an.root} > &`]: {
      "--unstable_ListItem-flex": "1 0 0%"
      // grow to fill the available space of ListItem
    },
    [`&.${Pe.selected}`]: d({}, (r = t.variants[`${e.variant}Active`]) == null ? void 0 : r[e.color], {
      "--Icon-color": "currentColor"
    }),
    [`&:not(.${Pe.selected}, [aria-selected="true"])`]: {
      "&:hover": (s = t.variants[`${e.variant}Hover`]) == null ? void 0 : s[e.color],
      "&:active": (a = t.variants[`${e.variant}Active`]) == null ? void 0 : a[e.color]
    },
    [`&.${Pe.disabled}`]: d({}, (c = t.variants[`${e.variant}Disabled`]) == null ? void 0 : c[e.color])
  });
}), vn = K(mt, {
  name: "JoyListItemButton",
  slot: "Root",
  overridesResolver: (t, e) => e.root
})(({
  ownerState: t,
  theme: e
}) => d({}, !t.row && {
  [`&.${Pe.selected}`]: {
    fontWeight: e.vars.fontWeight.md
  }
})), bn = /* @__PURE__ */ l.forwardRef(function(e, o) {
  const n = Ne({
    props: e,
    name: "JoyListItemButton"
  }), r = l.useContext(Ee), {
    children: s,
    className: a,
    action: c,
    component: u = "div",
    orientation: h = "horizontal",
    role: y,
    selected: g = !1,
    color: b = "neutral",
    variant: v = "plain",
    slots: m = {},
    slotProps: C = {}
  } = n, P = De(n, mn), V = l.useRef(null), R = ce(V, o), {
    focusVisible: D,
    setFocusVisible: N,
    getRootProps: _
  } = Je(d({}, n, {
    rootRef: R
  }));
  l.useImperativeHandle(c, () => ({
    focusVisible: () => {
      var J;
      N(!0), (J = V.current) == null || J.focus();
    }
  }), [N]);
  const T = d({}, n, {
    component: u,
    color: b,
    focusVisible: D,
    orientation: h,
    row: r,
    selected: g,
    variant: v
  }), w = hn(T), H = d({}, P, {
    component: u,
    slots: m,
    slotProps: C
  }), [M, $] = ee("root", {
    ref: o,
    className: je(w.root, a),
    elementType: vn,
    externalForwardedProps: H,
    ownerState: T,
    getSlotProps: _
  });
  return /* @__PURE__ */ L(gt.Provider, {
    value: h,
    children: /* @__PURE__ */ L(M, d({}, $, {
      role: y ?? $.role,
      children: s
    }))
  });
});
process.env.NODE_ENV !== "production" && (bn.propTypes = {
  // ┌────────────────────────────── Warning ──────────────────────────────┐
  // │ These PropTypes are generated from the TypeScript type definitions. │
  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
  // └─────────────────────────────────────────────────────────────────────┘
  /**
   * A ref for imperative actions. It currently only supports `focusVisible()` action.
   */
  action: i.oneOfType([i.func, i.shape({
    current: i.shape({
      focusVisible: i.func.isRequired
    })
  })]),
  /**
   * If `true`, the list item is focused during the first mount.
   * Focus will also be triggered if the value changes from false to true.
   * @default false
   */
  autoFocus: i.bool,
  /**
   * The content of the component.
   */
  children: i.node,
  /**
   * @ignore
   */
  className: i.string,
  /**
   * The color of the component. It supports those theme colors that make sense for this component.
   * @default 'neutral'
   */
  color: i.oneOfType([i.oneOf(["danger", "neutral", "primary", "success", "warning"]), i.string]),
  /**
   * The component used for the root node.
   * Either a string to use a HTML element or a component.
   */
  component: i.elementType,
  /**
   * If `true`, the component is disabled.
   * @default false
   */
  disabled: i.bool,
  /**
   * This prop can help identify which element has keyboard focus.
   * The class name will be applied when the element gains the focus through keyboard interaction.
   * It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).
   * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/HEAD/explainer.md).
   * A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components
   * if needed.
   */
  focusVisibleClassName: i.string,
  /**
   * The content direction flow.
   * @default 'horizontal'
   */
  orientation: i.oneOf(["horizontal", "vertical"]),
  /**
   * @ignore
   */
  role: i.string,
  /**
   * If `true`, the component is selected.
   * @default false
   */
  selected: i.bool,
  /**
   * The props used for each slot inside.
   * @default {}
   */
  slotProps: i.shape({
    root: i.oneOfType([i.func, i.object])
  }),
  /**
   * The components used for each slot inside.
   * @default {}
   */
  slots: i.shape({
    root: i.elementType
  }),
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx: i.oneOfType([i.arrayOf(i.oneOfType([i.func, i.object, i.bool])), i.func, i.object]),
  /**
   * @default 0
   */
  tabIndex: i.number,
  /**
   * The [global variant](https://mui.com/joy-ui/main-features/global-variants/) to use.
   * @default 'plain'
   */
  variant: i.oneOfType([i.oneOf(["outlined", "plain", "soft", "solid"]), i.string])
});
const Ye = /* @__PURE__ */ l.createContext(void 0);
process.env.NODE_ENV !== "production" && (Ye.displayName = "VariantColorContext");
function xn(t, e) {
  let o = e, n = t;
  return t === "outlined" && (o = "neutral", n = "plain"), t === "plain" && (o = "neutral"), {
    variant: n,
    color: o
  };
}
function Cn(t, e, o = !1) {
  const n = l.useContext(Ye), [r, s] = typeof n == "string" ? n.split(":") : [], a = xn(r || void 0, s || void 0);
  return a.variant = t || a.variant, a.color = e || (o ? s : a.color), a;
}
function In({
  children: t,
  color: e,
  variant: o
}) {
  return /* @__PURE__ */ L(Ye.Provider, {
    value: `${o || ""}:${e || ""}`,
    children: t
  });
}
function yn(t) {
  return Le("MuiOption", t);
}
const Sn = Se("MuiOption", ["root", "colorPrimary", "colorNeutral", "colorDanger", "colorSuccess", "colorWarning", "colorContext", "focusVisible", "disabled", "selected", "highlighted", "variantPlain", "variantSoft", "variantOutlined", "variantSolid"]), Ln = ["component", "children", "disabled", "value", "label", "variant", "color", "slots", "slotProps"], Rn = (t) => {
  const {
    disabled: e,
    highlighted: o,
    selected: n
  } = t;
  return ze({
    root: ["root", e && "disabled", o && "highlighted", n && "selected"]
  }, yn, {});
}, On = K(mt, {
  name: "JoyOption",
  slot: "Root",
  overridesResolver: (t, e) => e.root
})(({
  theme: t,
  ownerState: e
}) => {
  var o;
  const n = (o = t.variants[`${e.variant}Hover`]) == null ? void 0 : o[e.color];
  return {
    [`&.${Sn.highlighted}:not([aria-selected="true"])`]: {
      backgroundColor: n == null ? void 0 : n.backgroundColor
    }
  };
}), Pn = /* @__PURE__ */ l.memo(/* @__PURE__ */ l.forwardRef(function(e, o) {
  var n;
  const r = Ne({
    props: e,
    name: "JoyOption"
  }), {
    component: s = "li",
    children: a,
    disabled: c = !1,
    value: u,
    label: h,
    variant: y = "plain",
    color: g = "neutral",
    slots: b = {},
    slotProps: v = {}
  } = r, m = De(r, Ln), C = l.useContext(Ee), {
    variant: P = y,
    color: V = g
  } = Cn(e.variant, e.color), R = l.useRef(null), D = ce(R, o), N = h ?? (typeof a == "string" ? a : (n = R.current) == null ? void 0 : n.innerText), {
    getRootProps: _,
    selected: T,
    highlighted: w,
    index: H
  } = Zt({
    disabled: c,
    label: N,
    value: u,
    rootRef: D
  }), M = d({}, r, {
    disabled: c,
    selected: T,
    highlighted: w,
    index: H,
    component: s,
    variant: P,
    color: V,
    row: C
  }), $ = Rn(M), J = d({}, m, {
    component: s,
    slots: b,
    slotProps: v
  }), [W, Y] = ee("root", {
    ref: o,
    getSlotProps: _,
    elementType: On,
    externalForwardedProps: J,
    className: $.root,
    ownerState: M
  });
  return /* @__PURE__ */ L(W, d({}, Y, {
    children: a
  }));
})), Vn = /* @__PURE__ */ l.forwardRef(function(e, o) {
  const {
    contextValue: n
  } = en(e.value);
  return /* @__PURE__ */ L(Re.Provider, {
    value: n,
    children: /* @__PURE__ */ L(Pn, d({}, e, {
      ref: o
    }))
  });
});
process.env.NODE_ENV !== "production" && (Vn.propTypes = {
  // ┌────────────────────────────── Warning ──────────────────────────────┐
  // │ These PropTypes are generated from the TypeScript type definitions. │
  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
  // └─────────────────────────────────────────────────────────────────────┘
  /**
   * The content of the component.
   */
  children: i.node,
  /**
   * The color of the component. It supports those theme colors that make sense for this component.
   * @default 'neutral'
   */
  color: i.oneOfType([i.oneOf(["danger", "neutral", "primary", "success", "warning"]), i.string]),
  /**
   * If `true`, the component is disabled.
   * @default false
   */
  disabled: i.bool,
  /**
   * A text representation of the option's content.
   * Used for keyboard text navigation matching.
   */
  label: i.oneOfType([i.element, i.string]),
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx: i.oneOfType([i.arrayOf(i.oneOfType([i.func, i.object, i.bool])), i.func, i.object]),
  /**
   * The option value.
   */
  value: i.any.isRequired,
  /**
   * The [global variant](https://mui.com/joy-ui/main-features/global-variants/) to use.
   * @default 'plain'
   */
  variant: i.oneOfType([i.oneOf(["outlined", "plain", "soft", "solid"]), i.string])
});
const kn = Lt(/* @__PURE__ */ L("path", {
  d: "m12 5.83 2.46 2.46c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L12.7 3.7a.9959.9959 0 0 0-1.41 0L8.12 6.88c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 5.83zm0 12.34-2.46-2.46a.9959.9959 0 0 0-1.41 0c-.39.39-.39 1.02 0 1.41l3.17 3.18c.39.39 1.02.39 1.41 0l3.17-3.17c.39-.39.39-1.02 0-1.41a.9959.9959 0 0 0-1.41 0L12 18.17z"
}), "Unfold");
function Dn(t) {
  return Le("MuiSelect", t);
}
const he = Se("MuiSelect", ["root", "button", "indicator", "startDecorator", "endDecorator", "popper", "listbox", "colorPrimary", "colorNeutral", "colorDanger", "colorSuccess", "colorWarning", "colorContext", "variantPlain", "variantOutlined", "variantSoft", "variantSolid", "sizeSm", "sizeMd", "sizeLg", "focusVisible", "disabled", "expanded", "multiple"]);
var rt;
const Nn = ["action", "autoFocus", "children", "defaultValue", "defaultListboxOpen", "disabled", "getSerializedValue", "placeholder", "listboxId", "listboxOpen", "onChange", "onListboxOpenChange", "onClose", "renderValue", "required", "value", "size", "variant", "color", "startDecorator", "endDecorator", "indicator", "aria-describedby", "aria-label", "aria-labelledby", "id", "name", "multiple", "slots", "slotProps"];
function zn(t) {
  var e;
  return Array.isArray(t) ? /* @__PURE__ */ L(l.Fragment, {
    children: t.map((o) => o.label).join(", ")
  }) : (e = t == null ? void 0 : t.label) != null ? e : "";
}
const En = [{
  name: "offset",
  options: {
    offset: [0, 4]
  }
}, {
  // popper will have the same width as root element when open
  name: "equalWidth",
  enabled: !0,
  phase: "beforeWrite",
  requires: ["computeStyles"],
  fn: ({
    state: t
  }) => {
    t.styles.popper.width = `${t.rects.reference.width}px`;
  }
}], Tn = (t) => {
  const {
    color: e,
    disabled: o,
    focusVisible: n,
    size: r,
    variant: s,
    open: a,
    multiple: c
  } = t, u = {
    root: ["root", o && "disabled", n && "focusVisible", a && "expanded", s && `variant${te(s)}`, e && `color${te(e)}`, r && `size${te(r)}`, c && "multiple"],
    button: ["button"],
    startDecorator: ["startDecorator"],
    endDecorator: ["endDecorator"],
    indicator: ["indicator", a && "expanded"],
    listbox: ["listbox", a && "expanded", o && "disabled"]
  };
  return ze(u, Dn, {});
}, $n = K("div", {
  name: "JoySelect",
  slot: "Root",
  overridesResolver: (t, e) => e.root
})(({
  theme: t,
  ownerState: e
}) => {
  var o, n, r, s, a;
  const c = (o = t.variants[`${e.variant}`]) == null ? void 0 : o[e.color], {
    borderRadius: u
  } = at({
    theme: t,
    ownerState: e
  }, ["borderRadius"]);
  return [d({
    "--Select-radius": t.vars.radius.sm,
    "--Select-gap": "0.5rem",
    "--Select-placeholderOpacity": 0.64,
    "--Select-decoratorColor": t.vars.palette.text.icon,
    "--Select-focusedThickness": t.vars.focus.thickness,
    "--Select-focusedHighlight": (n = t.vars.palette[e.color === "neutral" ? "primary" : e.color]) == null ? void 0 : n[500],
    '&:not([data-inverted-colors="false"])': d({}, e.instanceColor && {
      "--_Select-focusedHighlight": (r = t.vars.palette[e.instanceColor === "neutral" ? "primary" : e.instanceColor]) == null ? void 0 : r[500]
    }, {
      "--Select-focusedHighlight": t.vars.palette.focusVisible
    }),
    "--Select-indicatorColor": c != null && c.backgroundColor ? c == null ? void 0 : c.color : t.vars.palette.text.tertiary
  }, e.size === "sm" && {
    "--Select-minHeight": "2rem",
    "--Select-paddingInline": "0.5rem",
    "--Select-decoratorChildHeight": "min(1.5rem, var(--Select-minHeight))",
    "--Icon-fontSize": t.vars.fontSize.xl
  }, e.size === "md" && {
    "--Select-minHeight": "2.25rem",
    "--Select-paddingInline": "0.75rem",
    "--Select-decoratorChildHeight": "min(1.75rem, var(--Select-minHeight))",
    "--Icon-fontSize": t.vars.fontSize.xl2
  }, e.size === "lg" && {
    "--Select-minHeight": "2.75rem",
    "--Select-paddingInline": "1rem",
    "--Select-decoratorChildHeight": "min(2.375rem, var(--Select-minHeight))",
    "--Icon-fontSize": t.vars.fontSize.xl2
  }, {
    // variables for controlling child components
    "--Select-decoratorChildOffset": "min(calc(var(--Select-paddingInline) - (var(--Select-minHeight) - 2 * var(--variant-borderWidth, 0px) - var(--Select-decoratorChildHeight)) / 2), var(--Select-paddingInline))",
    "--_Select-paddingBlock": "max((var(--Select-minHeight) - 2 * var(--variant-borderWidth, 0px) - var(--Select-decoratorChildHeight)) / 2, 0px)",
    "--Select-decoratorChildRadius": "max(var(--Select-radius) - var(--variant-borderWidth, 0px) - var(--_Select-paddingBlock), min(var(--_Select-paddingBlock) + var(--variant-borderWidth, 0px), var(--Select-radius) / 2))",
    "--Button-minHeight": "var(--Select-decoratorChildHeight)",
    "--Button-paddingBlock": "0px",
    // to ensure that the height of the button is equal to --Button-minHeight
    "--IconButton-size": "var(--Select-decoratorChildHeight)",
    "--Button-radius": "var(--Select-decoratorChildRadius)",
    "--IconButton-radius": "var(--Select-decoratorChildRadius)",
    boxSizing: "border-box"
  }, e.variant !== "plain" && {
    boxShadow: t.shadow.xs
  }, {
    minWidth: 0,
    minHeight: "var(--Select-minHeight)",
    position: "relative",
    display: "flex",
    alignItems: "center",
    borderRadius: "var(--Select-radius)",
    cursor: "pointer"
  }, !(c != null && c.backgroundColor) && {
    backgroundColor: t.vars.palette.background.surface
  }, e.size && {
    paddingBlock: {
      sm: 2,
      md: 3,
      lg: 4
    }[e.size]
    // the padding-block act as a minimum spacing between content and root element
  }, {
    paddingInline: "var(--Select-paddingInline)"
  }, t.typography[`body-${e.size}`], c, {
    "&::before": {
      boxSizing: "border-box",
      content: '""',
      display: "block",
      position: "absolute",
      pointerEvents: "none",
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      zIndex: 1,
      borderRadius: "inherit",
      margin: "calc(var(--variant-borderWidth, 0px) * -1)"
      // for outlined variant
    },
    [`&.${he.focusVisible}`]: {
      "--Select-indicatorColor": c == null ? void 0 : c.color,
      "&::before": {
        boxShadow: "inset 0 0 0 var(--Select-focusedThickness) var(--Select-focusedHighlight)"
      }
    },
    [`&.${he.disabled}`]: {
      "--Select-indicatorColor": "inherit"
    }
  }), {
    "&:hover": (s = t.variants[`${e.variant}Hover`]) == null ? void 0 : s[e.color],
    [`&.${he.disabled}`]: (a = t.variants[`${e.variant}Disabled`]) == null ? void 0 : a[e.color]
  }, u !== void 0 && {
    "--Select-radius": u
  }];
}), _n = K("button", {
  name: "JoySelect",
  slot: "Button",
  overridesResolver: (t, e) => e.button
})(({
  ownerState: t
}) => d({
  // reset user-agent button style
  border: 0,
  outline: 0,
  background: "none",
  padding: 0,
  fontSize: "inherit",
  color: "inherit",
  alignSelf: "stretch",
  // make children horizontally aligned
  display: "flex",
  alignItems: "center",
  flex: 1,
  fontFamily: "inherit",
  cursor: "pointer",
  whiteSpace: "nowrap",
  overflow: "hidden"
}, (t.value === null || t.value === void 0) && {
  opacity: "var(--Select-placeholderOpacity)"
}, {
  "&::before": {
    content: '""',
    display: "block",
    position: "absolute",
    // TODO: use https://caniuse.com/?search=inset when ~94%
    top: "calc(-1 * var(--variant-borderWidth, 0px))",
    left: "calc(-1 * var(--variant-borderWidth, 0px))",
    right: "calc(-1 * var(--variant-borderWidth, 0px))",
    bottom: "calc(-1 * var(--variant-borderWidth, 0px))",
    borderRadius: "var(--Select-radius)"
  }
})), wn = K(ft, {
  name: "JoySelect",
  slot: "Listbox",
  overridesResolver: (t, e) => e.listbox
})(({
  theme: t,
  ownerState: e
}) => {
  var o;
  const n = (o = t.variants[e.variant]) == null ? void 0 : o[e.color];
  return d({
    "--focus-outline-offset": `calc(${t.vars.focus.thickness} * -1)`,
    // to prevent the focus outline from being cut by overflow
    "--ListItem-stickyBackground": (n == null ? void 0 : n.backgroundColor) || (n == null ? void 0 : n.background) || t.vars.palette.background.popup,
    "--ListItem-stickyTop": "calc(var(--List-padding, var(--ListDivider-gap)) * -1)"
  }, sn, {
    minWidth: "max-content",
    // prevent options from shrinking if some of them is wider than the Select's root.
    maxHeight: "44vh",
    // the best value from what I tried so far which does not cause screen flicker when listbox is open.
    overflow: "auto",
    outline: 0,
    boxShadow: t.shadow.md,
    borderRadius: `var(--List-radius, ${t.vars.radius.sm})`,
    // `unstable_popup-zIndex` is a private variable that lets other component, for example Modal, to override the z-index so that the listbox can be displayed above the Modal.
    zIndex: `var(--unstable_popup-zIndex, ${t.vars.zIndex.popup})`
  }, !(n != null && n.backgroundColor) && {
    backgroundColor: t.vars.palette.background.popup
  });
}), Hn = K("span", {
  name: "JoySelect",
  slot: "StartDecorator",
  overridesResolver: (t, e) => e.startDecorator
})({
  "--Button-margin": "0 0 0 calc(var(--Select-decoratorChildOffset) * -1)",
  "--IconButton-margin": "0 0 0 calc(var(--Select-decoratorChildOffset) * -1)",
  "--Icon-margin": "0 0 0 calc(var(--Select-paddingInline) / -4)",
  display: "inherit",
  alignItems: "center",
  color: "var(--Select-decoratorColor)",
  marginInlineEnd: "var(--Select-gap)"
}), Mn = K("span", {
  name: "JoySelect",
  slot: "EndDecorator",
  overridesResolver: (t, e) => e.endDecorator
})({
  "--Button-margin": "0 calc(var(--Select-decoratorChildOffset) * -1) 0 0",
  "--IconButton-margin": "0 calc(var(--Select-decoratorChildOffset) * -1) 0 0",
  "--Icon-margin": "0 calc(var(--Select-paddingInline) / -4) 0 0",
  display: "inherit",
  alignItems: "center",
  color: "var(--Select-decoratorColor)",
  marginInlineStart: "var(--Select-gap)"
}), Bn = K("span", {
  name: "JoySelect",
  slot: "Indicator"
})(({
  ownerState: t,
  theme: e
}) => d({}, t.size === "sm" && {
  "--Icon-fontSize": e.vars.fontSize.lg
}, t.size === "md" && {
  "--Icon-fontSize": e.vars.fontSize.xl
}, t.size === "lg" && {
  "--Icon-fontSize": e.vars.fontSize.xl2
}, {
  "--Icon-color": t.color !== "neutral" || t.variant === "solid" ? "currentColor" : e.vars.palette.text.icon,
  display: "inherit",
  alignItems: "center",
  marginInlineStart: "var(--Select-gap)",
  marginInlineEnd: "calc(var(--Select-paddingInline) / -4)",
  [`.${he.endDecorator} + &`]: {
    marginInlineStart: "calc(var(--Select-gap) / 2)"
  },
  [`&.${he.expanded}, .${he.disabled} > &`]: {
    "--Icon-color": "currentColor"
  }
})), An = /* @__PURE__ */ l.forwardRef(function(e, o) {
  var n, r, s, a, c, u, h;
  const y = Ne({
    props: e,
    name: "JoySelect"
  }), g = y, {
    action: b,
    autoFocus: v,
    children: m,
    defaultValue: C,
    defaultListboxOpen: P = !1,
    disabled: V,
    getSerializedValue: R,
    placeholder: D,
    listboxId: N,
    listboxOpen: _,
    onChange: T,
    onListboxOpenChange: w,
    onClose: H,
    renderValue: M,
    required: $ = !1,
    value: J,
    size: W = "md",
    variant: Y = "outlined",
    color: ie = "neutral",
    startDecorator: ue,
    endDecorator: ne,
    indicator: U = rt || (rt = /* @__PURE__ */ L(kn, {})),
    // props to forward to the button (all handlers should go through slotProps.button)
    "aria-describedby": j,
    "aria-label": F,
    "aria-labelledby": de,
    id: oe,
    name: pe,
    multiple: le = !1,
    slots: ve = {},
    slotProps: fe = {}
  } = g, be = De(g, Nn), x = l.useContext(Rt);
  if (process.env.NODE_ENV !== "production") {
    const E = x == null ? void 0 : x.registerEffect;
    l.useEffect(() => {
      if (E)
        return E();
    }, [E]);
  }
  const S = (n = (r = e.disabled) != null ? r : x == null ? void 0 : x.disabled) != null ? n : V, O = (s = (a = e.size) != null ? a : x == null ? void 0 : x.size) != null ? s : W, z = (c = e.color) != null ? c : x != null && x.error ? "danger" : (u = x == null ? void 0 : x.color) != null ? u : ie, G = M ?? zn, [Q, ae] = l.useState(null), se = l.useRef(null), xe = l.useRef(null), Te = ce(o, se);
  l.useImperativeHandle(b, () => ({
    focusVisible: () => {
      var E;
      (E = xe.current) == null || E.focus();
    }
  }), []), l.useEffect(() => {
    ae(se.current);
  }, []), l.useEffect(() => {
    v && xe.current.focus();
  }, [v]);
  const Ce = l.useCallback((E) => {
    w == null || w(E), E || H == null || H();
  }, [H, w]), {
    buttonActive: $e,
    buttonFocusVisible: _e,
    contextValue: we,
    disabled: He,
    getButtonProps: Me,
    getListboxProps: Be,
    getHiddenInputProps: Ae,
    getOptionMetadata: Ie,
    open: Oe,
    value: X
  } = rn({
    buttonRef: xe,
    defaultOpen: P,
    defaultValue: C,
    disabled: S,
    getSerializedValue: R,
    listboxId: N,
    multiple: le,
    name: pe,
    required: $,
    onChange: T,
    onOpenChange: Ce,
    open: _,
    value: J
  }), q = d({}, y, {
    active: $e,
    defaultListboxOpen: P,
    disabled: He,
    focusVisible: _e,
    open: Oe,
    renderValue: G,
    value: X,
    size: O,
    variant: Y,
    color: z
  }), Z = Tn(q), re = d({}, be, {
    slots: ve,
    slotProps: fe
  }), ge = l.useMemo(() => {
    let E;
    if (le)
      E = X.map((We) => Ie(We)).filter((We) => We !== void 0);
    else {
      var Ze;
      E = (Ze = Ie(X)) != null ? Ze : null;
    }
    return E;
  }, [Ie, X, le]), [p, f] = ee("root", {
    ref: Te,
    className: Z.root,
    elementType: $n,
    externalForwardedProps: re,
    ownerState: q
  }), [I, B] = ee("button", {
    additionalProps: {
      "aria-describedby": j ?? (x == null ? void 0 : x["aria-describedby"]),
      "aria-label": F,
      "aria-labelledby": de ?? (x == null ? void 0 : x.labelId),
      "aria-required": $ ? "true" : void 0,
      id: oe ?? (x == null ? void 0 : x.htmlFor),
      name: pe
    },
    className: Z.button,
    elementType: _n,
    externalForwardedProps: re,
    getSlotProps: Me,
    ownerState: q
  }), [ht, ye] = ee("listbox", {
    additionalProps: {
      anchorEl: Q,
      open: Oe,
      placement: "bottom",
      keepMounted: !0
    },
    className: Z.listbox,
    elementType: wn,
    externalForwardedProps: re,
    getSlotProps: Be,
    ownerState: d({}, q, {
      nesting: !1,
      row: !1,
      wrap: !1
    }),
    getSlotOwnerState: (E) => ({
      size: E.size || O,
      variant: E.variant || Y,
      color: E.color || (E.disablePortal ? z : ie),
      disableColorInversion: !E.disablePortal
    })
  }), [vt, bt] = ee("startDecorator", {
    className: Z.startDecorator,
    elementType: Hn,
    externalForwardedProps: re,
    ownerState: q
  }), [xt, Ct] = ee("endDecorator", {
    className: Z.endDecorator,
    elementType: Mn,
    externalForwardedProps: re,
    ownerState: q
  }), [It, yt] = ee("indicator", {
    className: Z.indicator,
    elementType: Bn,
    externalForwardedProps: re,
    ownerState: q
  }), St = l.useMemo(() => [...En, ...ye.modifiers || []], [ye.modifiers]);
  let Qe = D;
  return (Array.isArray(ge) && ge.length > 0 || !Array.isArray(ge) && ge) && (Qe = G(ge)), /* @__PURE__ */ et(l.Fragment, {
    children: [/* @__PURE__ */ et(p, d({}, f, {
      children: [ue && /* @__PURE__ */ L(vt, d({}, bt, {
        children: ue
      })), /* @__PURE__ */ L(I, d({}, B, {
        children: Qe
      })), ne && /* @__PURE__ */ L(xt, d({}, Ct, {
        children: ne
      })), U && /* @__PURE__ */ L(It, d({}, yt, {
        children: U
      })), /* @__PURE__ */ L("input", d({}, Ae()))]
    })), Q && /* @__PURE__ */ L(ht, d({}, ye, {
      className: je(ye.className),
      modifiers: St
    }, !((h = y.slots) != null && h.listbox) && {
      as: Ot,
      slots: {
        root: ye.as || "ul"
      }
    }, {
      children: /* @__PURE__ */ L(ln, {
        value: we,
        children: /* @__PURE__ */ L(In, {
          variant: Y,
          color: ie,
          children: /* @__PURE__ */ L(Xe.Provider, {
            value: "select",
            children: /* @__PURE__ */ L(dt, {
              nested: !0,
              children: m
            })
          })
        })
      })
    }))]
  });
});
process.env.NODE_ENV !== "production" && (An.propTypes = {
  // ┌────────────────────────────── Warning ──────────────────────────────┐
  // │ These PropTypes are generated from the TypeScript type definitions. │
  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
  // └─────────────────────────────────────────────────────────────────────┘
  /**
   * A ref for imperative actions. It currently only supports `focusVisible()` action.
   */
  action: i.oneOfType([i.func, i.shape({
    current: i.shape({
      focusVisible: i.func.isRequired
    })
  })]),
  /**
   * If `true`, the select element is focused during the first mount
   * @default false
   */
  autoFocus: i.bool,
  /**
   * @ignore
   */
  children: i.node,
  /**
   * @ignore
   */
  className: i.string,
  /**
   * The color of the component. It supports those theme colors that make sense for this component.
   * @default 'neutral'
   */
  color: i.oneOfType([i.oneOf(["danger", "neutral", "primary", "success", "warning"]), i.string]),
  /**
   * The component used for the root node.
   * Either a string to use a HTML element or a component.
   */
  component: i.elementType,
  /**
   * If `true`, the select will be initially open.
   * @default false
   */
  defaultListboxOpen: i.bool,
  /**
   * The default selected value. Use when the component is not controlled.
   */
  defaultValue: i.any,
  /**
   * If `true`, the component is disabled.
   * @default false
   */
  disabled: i.bool,
  /**
   * Trailing adornment for the select.
   */
  endDecorator: i.node,
  /**
   * 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: i.func,
  /**
   * The indicator(*) for the select.
   *    ________________
   *   [ value        * ]
   *    ‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾
   */
  indicator: i.node,
  /**
   * `id` attribute of the listbox element.
   * Also used to derive the `id` attributes of options.
   */
  listboxId: i.string,
  /**
   * Controls the open state of the select's listbox.
   * @default undefined
   */
  listboxOpen: i.bool,
  /**
   * If `true`, selecting multiple values is allowed.
   * This affects the type of the `value`, `defaultValue`, and `onChange` props.
   */
  multiple: i.bool,
  /**
   * Name of the element. For example used by the server to identify the fields in form submits.
   */
  name: i.string,
  /**
   * Callback fired when an option is selected.
   */
  onChange: i.func,
  /**
   * Triggered when focus leaves the menu and the menu should close.
   */
  onClose: i.func,
  /**
   * Callback fired when the component requests to be opened.
   * Use in controlled mode (see listboxOpen).
   */
  onListboxOpenChange: i.func,
  /**
   * Text to show when there is no selected value.
   */
  placeholder: i.node,
  /**
   * Function that customizes the rendering of the selected value.
   */
  renderValue: i.func,
  /**
   * If `true`, the Select cannot be empty when submitting form.
   * @default false
   */
  required: i.bool,
  /**
   * The size of the component.
   */
  size: i.oneOfType([i.oneOf(["sm", "md", "lg"]), i.string]),
  /**
   * The components used for each slot inside.
   * @default {}
   */
  slots: i.shape({
    button: i.elementType,
    endDecorator: i.elementType,
    indicator: i.elementType,
    listbox: i.elementType,
    root: i.elementType,
    startDecorator: i.elementType
  }),
  /**
   * Leading adornment for the select.
   */
  startDecorator: i.node,
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx: i.oneOfType([i.arrayOf(i.oneOfType([i.func, i.object, i.bool])), i.func, i.object]),
  /**
   * The selected value.
   * Set to `null` to deselect all options.
   */
  value: i.any,
  /**
   * The [global variant](https://mui.com/joy-ui/main-features/global-variants/) to use.
   * @default 'outlined'
   */
  variant: i.oneOfType([i.oneOf(["outlined", "plain", "soft", "solid"]), i.string])
});
export {
  Ke as C,
  Xe as G,
  k as L,
  Ge as N,
  Ee as R,
  An as S,
  In as V,
  ct as W,
  Vn as a,
  Qt as b,
  Kt as c,
  Re as d,
  Gt as e,
  Ve as f,
  mt as g,
  gt as h,
  ft as i,
  dt as j,
  an as k,
  st as l,
  A as m,
  ut as n,
  qn as o,
  Cn as p,
  Kn as q,
  xn as r,
  sn as s,
  fn as t,
  Yt as u,
  pt as v
};
