import * as b from "react";
import * as rt from "react-dom";
import { Q as ot, Z as nt, t as Y, $ as at, _ as c, J as U, a0 as ke, a1 as it, a2 as st, a3 as lt, v as ve, a4 as Me, a5 as Le, N as xe, P as o, M as ct, a6 as We, s as ae, r as ie, H as ut, a7 as dt, L as pt } from "./PrizeCard-C2El3VOB.js";
import { jsx as M, jsxs as oe } from "react/jsx-runtime";
var ge = { exports: {} }, k = {};
/**
 * @license React
 * react-is.production.js
 *
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
var Be;
function ft() {
  if (Be) return k;
  Be = 1;
  var e = Symbol.for("react.transitional.element"), t = Symbol.for("react.portal"), n = Symbol.for("react.fragment"), a = Symbol.for("react.strict_mode"), i = Symbol.for("react.profiler"), r = Symbol.for("react.consumer"), l = Symbol.for("react.context"), d = Symbol.for("react.forward_ref"), f = Symbol.for("react.suspense"), u = Symbol.for("react.suspense_list"), h = Symbol.for("react.memo"), v = Symbol.for("react.lazy"), P = Symbol.for("react.view_transition"), S = Symbol.for("react.client.reference");
  function y(s) {
    if (typeof s == "object" && s !== null) {
      var T = s.$$typeof;
      switch (T) {
        case e:
          switch (s = s.type, s) {
            case n:
            case i:
            case a:
            case f:
            case u:
            case P:
              return s;
            default:
              switch (s = s && s.$$typeof, s) {
                case l:
                case d:
                case v:
                case h:
                  return s;
                case r:
                  return s;
                default:
                  return T;
              }
          }
        case t:
          return T;
      }
    }
  }
  return k.ContextConsumer = r, k.ContextProvider = l, k.Element = e, k.ForwardRef = d, k.Fragment = n, k.Lazy = v, k.Memo = h, k.Portal = t, k.Profiler = i, k.StrictMode = a, k.Suspense = f, k.SuspenseList = u, k.isContextConsumer = function(s) {
    return y(s) === r;
  }, k.isContextProvider = function(s) {
    return y(s) === l;
  }, k.isElement = function(s) {
    return typeof s == "object" && s !== null && s.$$typeof === e;
  }, k.isForwardRef = function(s) {
    return y(s) === d;
  }, k.isFragment = function(s) {
    return y(s) === n;
  }, k.isLazy = function(s) {
    return y(s) === v;
  }, k.isMemo = function(s) {
    return y(s) === h;
  }, k.isPortal = function(s) {
    return y(s) === t;
  }, k.isProfiler = function(s) {
    return y(s) === i;
  }, k.isStrictMode = function(s) {
    return y(s) === a;
  }, k.isSuspense = function(s) {
    return y(s) === f;
  }, k.isSuspenseList = function(s) {
    return y(s) === u;
  }, k.isValidElementType = function(s) {
    return typeof s == "string" || typeof s == "function" || s === n || s === i || s === a || s === f || s === u || typeof s == "object" && s !== null && (s.$$typeof === v || s.$$typeof === h || s.$$typeof === l || s.$$typeof === r || s.$$typeof === d || s.$$typeof === S || s.getModuleId !== void 0);
  }, k.typeOf = y, k;
}
var x = {};
/**
 * @license React
 * react-is.development.js
 *
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
var Re;
function vt() {
  return Re || (Re = 1, process.env.NODE_ENV !== "production" && function() {
    function e(s) {
      if (typeof s == "object" && s !== null) {
        var T = s.$$typeof;
        switch (T) {
          case t:
            switch (s = s.type, s) {
              case a:
              case r:
              case i:
              case u:
              case h:
              case S:
                return s;
              default:
                switch (s = s && s.$$typeof, s) {
                  case d:
                  case f:
                  case P:
                  case v:
                    return s;
                  case l:
                    return s;
                  default:
                    return T;
                }
            }
          case n:
            return T;
        }
      }
    }
    var t = Symbol.for("react.transitional.element"), n = Symbol.for("react.portal"), a = Symbol.for("react.fragment"), i = Symbol.for("react.strict_mode"), r = Symbol.for("react.profiler"), l = Symbol.for("react.consumer"), d = Symbol.for("react.context"), f = Symbol.for("react.forward_ref"), u = Symbol.for("react.suspense"), h = Symbol.for("react.suspense_list"), v = Symbol.for("react.memo"), P = Symbol.for("react.lazy"), S = Symbol.for("react.view_transition"), y = Symbol.for("react.client.reference");
    x.ContextConsumer = l, x.ContextProvider = d, x.Element = t, x.ForwardRef = f, x.Fragment = a, x.Lazy = P, x.Memo = v, x.Portal = n, x.Profiler = r, x.StrictMode = i, x.Suspense = u, x.SuspenseList = h, x.isContextConsumer = function(s) {
      return e(s) === l;
    }, x.isContextProvider = function(s) {
      return e(s) === d;
    }, x.isElement = function(s) {
      return typeof s == "object" && s !== null && s.$$typeof === t;
    }, x.isForwardRef = function(s) {
      return e(s) === f;
    }, x.isFragment = function(s) {
      return e(s) === a;
    }, x.isLazy = function(s) {
      return e(s) === P;
    }, x.isMemo = function(s) {
      return e(s) === v;
    }, x.isPortal = function(s) {
      return e(s) === n;
    }, x.isProfiler = function(s) {
      return e(s) === r;
    }, x.isStrictMode = function(s) {
      return e(s) === i;
    }, x.isSuspense = function(s) {
      return e(s) === u;
    }, x.isSuspenseList = function(s) {
      return e(s) === h;
    }, x.isValidElementType = function(s) {
      return typeof s == "string" || typeof s == "function" || s === a || s === r || s === i || s === u || s === h || typeof s == "object" && s !== null && (s.$$typeof === P || s.$$typeof === v || s.$$typeof === d || s.$$typeof === l || s.$$typeof === f || s.$$typeof === y || s.getModuleId !== void 0);
    }, x.typeOf = e;
  }()), x;
}
process.env.NODE_ENV === "production" ? ge.exports = ft() : ge.exports = vt();
var De = ge.exports;
const gt = /^\s*function(?:\s|\s*\/\*.*\*\/\s*)+([^(\s/]*)\s*/;
function mt(e) {
  const t = `${e}`.match(gt);
  return t && t[1] || "";
}
function Ye(e, t = "") {
  return e.displayName || e.name || mt(e) || t;
}
function Ie(e, t, n) {
  const a = Ye(t);
  return e.displayName || (a !== "" ? `${n}(${a})` : n);
}
function ht(e) {
  if (e != null) {
    if (typeof e == "string")
      return e;
    if (typeof e == "function")
      return Ye(e, "Component");
    if (typeof e == "object")
      switch (e.$$typeof) {
        case De.ForwardRef:
          return Ie(e, e.render, "ForwardRef");
        case De.Memo:
          return Ie(e, e.type, "memo");
        default:
          return;
      }
  }
}
const yt = ["ownerState"], bt = ["variants"], $t = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
function Ct(e) {
  return Object.keys(e).length === 0;
}
function Tt(e) {
  return typeof e == "string" && // 96 is one less than the char code
  // for "a" so this is checking that
  // it's a lowercase character
  e.charCodeAt(0) > 96;
}
function pe(e) {
  return e !== "ownerState" && e !== "theme" && e !== "sx" && e !== "as";
}
function Oe(e, t) {
  return t && e && typeof e == "object" && e.styles && !e.styles.startsWith("@layer") && (e.styles = `@layer ${t}{${String(e.styles)}}`), e;
}
const _t = ot(), Ne = (e) => e && e.charAt(0).toLowerCase() + e.slice(1);
function te({
  defaultTheme: e,
  theme: t,
  themeId: n
}) {
  return Ct(t) ? e : t[n] || t;
}
function Et(e) {
  return e ? (t, n) => n[e] : null;
}
function re(e, t, n) {
  let {
    ownerState: a
  } = t, i = Y(t, yt);
  const r = typeof e == "function" ? e(c({
    ownerState: a
  }, i)) : e;
  if (Array.isArray(r))
    return r.flatMap((l) => re(l, c({
      ownerState: a
    }, i), n));
  if (r && typeof r == "object" && Array.isArray(r.variants)) {
    const {
      variants: l = []
    } = r;
    let f = Y(r, bt);
    return l.forEach((u) => {
      let h = !0;
      if (typeof u.props == "function" ? h = u.props(c({
        ownerState: a
      }, i, a)) : Object.keys(u.props).forEach((v) => {
        (a == null ? void 0 : a[v]) !== u.props[v] && i[v] !== u.props[v] && (h = !1);
      }), h) {
        Array.isArray(f) || (f = [f]);
        const v = typeof u.style == "function" ? u.style(c({
          ownerState: a
        }, i, a)) : u.style;
        f.push(n ? Oe(ke(v), n) : v);
      }
    }), f;
  }
  return n ? Oe(ke(r), n) : r;
}
function Pt(e = {}) {
  const {
    themeId: t,
    defaultTheme: n = _t,
    rootShouldForwardProp: a = pe,
    slotShouldForwardProp: i = pe
  } = e, r = (l) => it(c({}, l, {
    theme: te(c({}, l, {
      defaultTheme: n,
      themeId: t
    }))
  }));
  return r.__mui_systemSx = !0, (l, d = {}) => {
    nt(l, (C) => C.filter((g) => !(g != null && g.__mui_systemSx)));
    const {
      name: f,
      slot: u,
      skipVariantsResolver: h,
      skipSx: v,
      // TODO v6: remove `lowercaseFirstLetter()` in the next major release
      // For more details: https://github.com/mui/material-ui/pull/37908
      overridesResolver: P = Et(Ne(u))
    } = d, S = Y(d, $t), y = f && f.startsWith("Mui") || u ? "components" : "custom", s = h !== void 0 ? h : (
      // TODO v6: remove `Root` in the next major release
      // For more details: https://github.com/mui/material-ui/pull/37908
      u && u !== "Root" && u !== "root" || !1
    ), T = v || !1;
    let B;
    process.env.NODE_ENV !== "production" && f && (B = `${f}-${Ne(u || "Root")}`);
    let _ = pe;
    u === "Root" || u === "root" ? _ = a : u ? _ = i : Tt(l) && (_ = void 0);
    const R = at(l, c({
      shouldForwardProp: _,
      label: B
    }, S)), N = (C) => typeof C == "function" && C.__emotion_real !== C || st(C) ? (g) => {
      const O = te({
        theme: g.theme,
        defaultTheme: n,
        themeId: t
      });
      return re(C, c({}, g, {
        theme: O
      }), O.modularCssLayers ? y : void 0);
    } : C, I = (C, ...g) => {
      let O = N(C);
      const z = g ? g.map(N) : [];
      f && P && z.push((D) => {
        const E = te(c({}, D, {
          defaultTheme: n,
          themeId: t
        }));
        if (!E.components || !E.components[f] || !E.components[f].styleOverrides)
          return null;
        const F = E.components[f].styleOverrides, m = {};
        return Object.entries(F).forEach(([p, $]) => {
          m[p] = re($, c({}, D, {
            theme: E
          }), E.modularCssLayers ? "theme" : void 0);
        }), P(D, m);
      }), f && !s && z.push((D) => {
        var E;
        const F = te(c({}, D, {
          defaultTheme: n,
          themeId: t
        })), m = F == null || (E = F.components) == null || (E = E[f]) == null ? void 0 : E.variants;
        return re({
          variants: m
        }, c({}, D, {
          theme: F
        }), F.modularCssLayers ? "theme" : void 0);
      }), T || z.push(r);
      const V = z.length - g.length;
      if (Array.isArray(C) && V > 0) {
        const D = new Array(V).fill("");
        O = [...C, ...D], O.raw = [...C.raw, ...D];
      }
      const H = R(O, ...z);
      if (process.env.NODE_ENV !== "production") {
        let D;
        f && (D = `${f}${U(u || "")}`), D === void 0 && (D = `Styled(${ht(l)})`), H.displayName = D;
      }
      return l.muiName && (H.muiName = l.muiName), H;
    };
    return R.withConfig && (I.withConfig = R.withConfig), I;
  };
}
function Ue(e, t) {
  const n = c({}, t);
  return Object.keys(e).forEach((a) => {
    if (a.toString().match(/^(components|slots)$/))
      n[a] = c({}, e[a], n[a]);
    else if (a.toString().match(/^(componentsProps|slotProps)$/)) {
      const i = e[a] || {}, r = t[a];
      n[a] = {}, !r || !Object.keys(r) ? n[a] = i : !i || !Object.keys(i) ? n[a] = r : (n[a] = c({}, r), Object.keys(i).forEach((l) => {
        n[a][l] = Ue(i[l], r[l]);
      }));
    } else n[a] === void 0 && (n[a] = e[a]);
  }), n;
}
function St(e) {
  const {
    theme: t,
    name: n,
    props: a
  } = e;
  return !t || !t.components || !t.components[n] || !t.components[n].defaultProps ? a : Ue(t.components[n].defaultProps, a);
}
function kt({
  props: e,
  name: t,
  defaultTheme: n,
  themeId: a
}) {
  let i = lt(n);
  return a && (i = i[a] || i), St({
    theme: i,
    name: t,
    props: e
  });
}
function Dr(e, t) {
  return process.env.NODE_ENV === "production" ? () => null : function(...a) {
    return e(...a) || t(...a);
  };
}
function xt(e, t, n, a, i) {
  if (process.env.NODE_ENV === "production")
    return null;
  const r = e[t], l = i || t;
  return r == null ? null : r && r.nodeType !== 1 ? new Error(`Invalid ${a} \`${l}\` supplied to \`${n}\`. Expected an HTMLElement.`) : null;
}
function Bt(e, t) {
  var n, a;
  return /* @__PURE__ */ b.isValidElement(e) && t.indexOf(
    // For server components `muiName` is avaialble in element.type._payload.value.muiName
    // relevant info - https://github.com/facebook/react/blob/2807d781a08db8e9873687fccc25c0f12b4fb3d4/packages/react/src/ReactLazy.js#L45
    // eslint-disable-next-line no-underscore-dangle
    (n = e.type.muiName) != null ? n : (a = e.type) == null || (a = a._payload) == null || (a = a.value) == null ? void 0 : a.muiName
  ) !== -1;
}
function Ir(e) {
  return e && e.ownerDocument || document;
}
function me(e, t) {
  typeof e == "function" ? e(t) : e && (e.current = t);
}
function X(...e) {
  return b.useMemo(() => e.every((t) => t == null) ? null : (t) => {
    e.forEach((n) => {
      me(n, t);
    });
  }, e);
}
const ze = {};
function Rt(e, t) {
  const n = b.useRef(ze);
  return n.current === ze && (n.current = e(t)), n;
}
const Dt = [];
function It(e) {
  b.useEffect(e, Dt);
}
class se {
  constructor() {
    this.currentId = null, this.clear = () => {
      this.currentId !== null && (clearTimeout(this.currentId), this.currentId = null);
    }, this.disposeEffect = () => this.clear;
  }
  static create() {
    return new se();
  }
  /**
   * Executes `fn` after `delay`, clearing any previously scheduled call.
   */
  start(t, n) {
    this.clear(), this.currentId = setTimeout(() => {
      this.currentId = null, n();
    }, t);
  }
}
function Or() {
  const e = Rt(se.create).current;
  return It(e.disposeEffect), e;
}
let le = !0, he = !1;
const Ot = new se(), Nt = {
  text: !0,
  search: !0,
  url: !0,
  tel: !0,
  email: !0,
  password: !0,
  number: !0,
  date: !0,
  month: !0,
  week: !0,
  time: !0,
  datetime: !0,
  "datetime-local": !0
};
function zt(e) {
  const {
    type: t,
    tagName: n
  } = e;
  return !!(n === "INPUT" && Nt[t] && !e.readOnly || n === "TEXTAREA" && !e.readOnly || e.isContentEditable);
}
function At(e) {
  e.metaKey || e.altKey || e.ctrlKey || (le = !0);
}
function fe() {
  le = !1;
}
function Vt() {
  this.visibilityState === "hidden" && he && (le = !0);
}
function Ht(e) {
  e.addEventListener("keydown", At, !0), e.addEventListener("mousedown", fe, !0), e.addEventListener("pointerdown", fe, !0), e.addEventListener("touchstart", fe, !0), e.addEventListener("visibilitychange", Vt, !0);
}
function Ft(e) {
  const {
    target: t
  } = e;
  try {
    return t.matches(":focus-visible");
  } catch {
  }
  return le || zt(t);
}
function Mt() {
  const e = b.useCallback((i) => {
    i != null && Ht(i.ownerDocument);
  }, []), t = b.useRef(!1);
  function n() {
    return t.current ? (he = !0, Ot.start(100, () => {
      he = !1;
    }), t.current = !1, !0) : !1;
  }
  function a(i) {
    return Ft(i) ? (t.current = !0, !0) : !1;
  }
  return {
    isFocusVisibleRef: t,
    onFocus: a,
    onBlur: n,
    ref: e
  };
}
function ce(e, t, n = void 0) {
  const a = {};
  return Object.keys(e).forEach(
    // `Object.keys(slots)` can't be wider than `T` because we infer `T` from `slots`.
    // @ts-expect-error https://github.com/microsoft/TypeScript/pull/12253#issuecomment-263132208
    (i) => {
      a[i] = e[i].reduce((r, l) => {
        if (l) {
          const d = t(l);
          d !== "" && r.push(d), n && n[l] && r.push(n[l]);
        }
        return r;
      }, []).join(" ");
    }
  ), a;
}
function Lt(e) {
  return typeof e == "string";
}
function Wt(e, t, n) {
  return e === void 0 || Lt(e) ? t : c({}, t, {
    ownerState: c({}, t.ownerState, n)
  });
}
function ye(e, t = []) {
  if (e === void 0)
    return {};
  const n = {};
  return Object.keys(e).filter((a) => a.match(/^on[A-Z]/) && typeof e[a] == "function" && !t.includes(a)).forEach((a) => {
    n[a] = e[a];
  }), n;
}
function Ae(e) {
  if (e === void 0)
    return {};
  const t = {};
  return Object.keys(e).filter((n) => !(n.match(/^on[A-Z]/) && typeof e[n] == "function")).forEach((n) => {
    t[n] = e[n];
  }), t;
}
function Yt(e) {
  const {
    getSlotProps: t,
    additionalProps: n,
    externalSlotProps: a,
    externalForwardedProps: i,
    className: r
  } = e;
  if (!t) {
    const S = ve(n == null ? void 0 : n.className, r, i == null ? void 0 : i.className, a == null ? void 0 : a.className), y = c({}, n == null ? void 0 : n.style, i == null ? void 0 : i.style, a == null ? void 0 : a.style), s = c({}, n, i, a);
    return S.length > 0 && (s.className = S), Object.keys(y).length > 0 && (s.style = y), {
      props: s,
      internalRef: void 0
    };
  }
  const l = ye(c({}, i, a)), d = Ae(a), f = Ae(i), u = t(l), h = ve(u == null ? void 0 : u.className, n == null ? void 0 : n.className, r, i == null ? void 0 : i.className, a == null ? void 0 : a.className), v = c({}, u == null ? void 0 : u.style, n == null ? void 0 : n.style, i == null ? void 0 : i.style, a == null ? void 0 : a.style), P = c({}, u, n, f, d);
  return h.length > 0 && (P.className = h), Object.keys(v).length > 0 && (P.style = v), {
    props: P,
    internalRef: u.ref
  };
}
function Ut(e, t, n) {
  return typeof e == "function" ? e(t, n) : e;
}
function wt(e) {
  if (parseInt(b.version, 10) >= 19) {
    var t;
    return (e == null || (t = e.props) == null ? void 0 : t.ref) || null;
  }
  return (e == null ? void 0 : e.ref) || null;
}
const L = Pt({
  defaultTheme: Me,
  themeId: Le
});
function ue({
  props: e,
  name: t
}) {
  return kt({
    props: e,
    name: t,
    defaultTheme: c({}, Me, {
      components: {}
    }),
    themeId: Le
  });
}
function jt(e) {
  const {
    rootElementName: t = "",
    componentName: n
  } = e, [a, i] = b.useState(t.toUpperCase());
  process.env.NODE_ENV !== "production" && b.useEffect(() => {
    t && a !== t.toUpperCase() && console.error(`useRootElementName: the \`rootElementName\` prop of ${n ? `the ${n} component` : "a component"} expected the '${t}' element, but a '${a.toLowerCase()}' was rendered instead`, "This may cause hydration issues in an SSR context, for example in a Next.js app");
  }, [t, a, n]);
  const r = b.useCallback((l) => {
    var d;
    i((d = l == null ? void 0 : l.tagName) != null ? d : "");
  }, []);
  return [a, r];
}
function we(e = {}) {
  const {
    disabled: t = !1,
    focusableWhenDisabled: n,
    href: a,
    rootRef: i,
    tabIndex: r,
    to: l,
    type: d,
    rootElementName: f
  } = e, u = b.useRef(null), [h, v] = b.useState(!1), {
    isFocusVisibleRef: P,
    onFocus: S,
    onBlur: y,
    ref: s
  } = Mt(), [T, B] = b.useState(!1);
  t && !n && T && B(!1), b.useEffect(() => {
    P.current = T;
  }, [T, P]);
  const [_, R] = jt({
    rootElementName: f ?? (a || l ? "a" : void 0),
    componentName: "Button"
  }), N = (m) => (p) => {
    var $;
    T && p.preventDefault(), ($ = m.onMouseLeave) == null || $.call(m, p);
  }, I = (m) => (p) => {
    var $;
    y(p), P.current === !1 && B(!1), ($ = m.onBlur) == null || $.call(m, p);
  }, C = (m) => (p) => {
    var $;
    if (u.current || (u.current = p.currentTarget), S(p), P.current === !0) {
      var A;
      B(!0), (A = m.onFocusVisible) == null || A.call(m, p);
    }
    ($ = m.onFocus) == null || $.call(m, p);
  }, g = () => {
    const m = u.current;
    return _ === "BUTTON" || _ === "INPUT" && ["button", "submit", "reset"].includes(m == null ? void 0 : m.type) || _ === "A" && (m == null ? void 0 : m.href);
  }, O = (m) => (p) => {
    if (!t) {
      var $;
      ($ = m.onClick) == null || $.call(m, p);
    }
  }, z = (m) => (p) => {
    var $;
    t || (v(!0), document.addEventListener("mouseup", () => {
      v(!1);
    }, {
      once: !0
    })), ($ = m.onMouseDown) == null || $.call(m, p);
  }, V = (m) => (p) => {
    var $;
    if (($ = m.onKeyDown) == null || $.call(m, p), !p.defaultMuiPrevented && (p.target === p.currentTarget && !g() && p.key === " " && p.preventDefault(), p.target === p.currentTarget && p.key === " " && !t && v(!0), p.target === p.currentTarget && !g() && p.key === "Enter" && !t)) {
      var A;
      (A = m.onClick) == null || A.call(m, p), p.preventDefault();
    }
  }, H = (m) => (p) => {
    var $;
    if (p.target === p.currentTarget && v(!1), ($ = m.onKeyUp) == null || $.call(m, p), p.target === p.currentTarget && !g() && !t && p.key === " " && !p.defaultMuiPrevented) {
      var A;
      (A = m.onClick) == null || A.call(m, p);
    }
  }, D = X(R, i, s, u), E = {};
  return r !== void 0 && (E.tabIndex = r), _ === "BUTTON" ? (E.type = d ?? "button", n ? E["aria-disabled"] = t : E.disabled = t) : _ === "INPUT" ? d && ["button", "submit", "reset"].includes(d) && (n ? E["aria-disabled"] = t : E.disabled = t) : _ !== "" && (!a && !l && (E.role = "button", E.tabIndex = r ?? 0), t && (E["aria-disabled"] = t, E.tabIndex = n ? r ?? 0 : -1)), {
    getRootProps: (m = {}) => {
      const p = c({}, ye(e), ye(m)), $ = c({
        type: d
      }, p, E, m, {
        onBlur: I(p),
        onClick: O(p),
        onFocus: C(p),
        onKeyDown: V(p),
        onKeyUp: H(p),
        onMouseDown: z(p),
        onMouseLeave: N(p),
        ref: D
      });
      return delete $.onFocusVisible, $;
    },
    focusVisible: T,
    setFocusVisible: B,
    active: h,
    rootRef: D
  };
}
function Jt(e) {
  return typeof e == "function" ? e() : e;
}
const be = /* @__PURE__ */ b.forwardRef(function(t, n) {
  const {
    children: a,
    container: i,
    disablePortal: r = !1
  } = t, [l, d] = b.useState(null), f = X(/* @__PURE__ */ b.isValidElement(a) ? wt(a) : null, n);
  if (xe(() => {
    r || d(Jt(i) || document.body);
  }, [i, r]), xe(() => {
    if (l && !r)
      return me(n, l), () => {
        me(n, null);
      };
  }, [n, l, r]), r) {
    if (/* @__PURE__ */ b.isValidElement(a)) {
      const u = {
        ref: f
      };
      return /* @__PURE__ */ b.cloneElement(a, u);
    }
    return /* @__PURE__ */ M(b.Fragment, {
      children: a
    });
  }
  return /* @__PURE__ */ M(b.Fragment, {
    children: l && /* @__PURE__ */ rt.createPortal(a, l)
  });
});
process.env.NODE_ENV !== "production" && (be.propTypes = {
  // ┌────────────────────────────── Warning ──────────────────────────────┐
  // │ These PropTypes are generated from the TypeScript type definitions. │
  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
  // └─────────────────────────────────────────────────────────────────────┘
  /**
   * The children to render into the `container`.
   */
  children: o.node,
  /**
   * An HTML element or function that returns one.
   * The `container` will have the portal children appended to it.
   *
   * You can also provide a callback, which is called in a React layout effect.
   * This lets you set the container from a ref, and also makes server-side rendering possible.
   *
   * By default, it uses the body of the top-level document object,
   * so it's simply `document.body` most of the time.
   */
  container: o.oneOfType([xt, o.func]),
  /**
   * The `children` will be under the DOM hierarchy of the parent component.
   * @default false
   */
  disablePortal: o.bool
});
process.env.NODE_ENV !== "production" && (be.propTypes = ct(be.propTypes));
const Kt = ["className", "elementType", "ownerState", "externalForwardedProps", "getSlotOwnerState", "internalForwardedProps"], Gt = ["component", "slots", "slotProps"], qt = ["component"];
function W(e, t) {
  const {
    className: n,
    elementType: a,
    ownerState: i,
    externalForwardedProps: r,
    getSlotOwnerState: l,
    internalForwardedProps: d
  } = t, f = Y(t, Kt), {
    component: u,
    slots: h = {
      [e]: void 0
    },
    slotProps: v = {
      [e]: void 0
    }
  } = r, P = Y(r, Gt), S = h[e] || a, y = Ut(v[e], i), s = Yt(c({
    className: n
  }, f, {
    externalForwardedProps: e === "root" ? P : void 0,
    externalSlotProps: y
  })), {
    props: {
      component: T
    },
    internalRef: B
  } = s, _ = Y(s.props, qt), R = X(B, y == null ? void 0 : y.ref, t.ref), N = l ? l(_) : {}, I = c({}, i, N), C = e === "root" ? T || u : T, g = Wt(S, c({}, e === "root" && !u && !h[e] && d, e !== "root" && !h[e] && d, _, C && {
    as: C
  }, {
    ref: R
  }), I);
  return Object.keys(N).forEach((O) => {
    delete g[O];
  }), [S, g];
}
const Nr = ({
  theme: e,
  ownerState: t
}, n) => {
  let a = {};
  function i(r) {
    if (typeof r == "function") {
      const l = r(e);
      i(l);
    } else Array.isArray(r) ? r.forEach((l) => {
      typeof l != "boolean" && i(l);
    }) : typeof r == "object" && (a = c({}, a, r));
  }
  return t.sx && (i(t.sx), n.forEach((r) => {
    const l = a[r];
    if (typeof l == "string" || typeof l == "number")
      if (r === "borderRadius")
        if (typeof l == "number")
          a[r] = `${l}px`;
        else {
          var d;
          a[r] = ((d = e.vars) == null ? void 0 : d.radius[l]) || l;
        }
      else ["p", "padding", "m", "margin"].indexOf(r) !== -1 && typeof l == "number" ? a[r] = e.spacing(l) : a[r] = l;
    else typeof l == "function" ? a[r] = l(e) : a[r] = void 0;
  })), a;
}, Ce = (e) => (t) => `--${e ? `${e}-` : ""}${t.replace(/^--/, "")}`, ne = "data-skip-inverted-colors", je = `& :not([${ne}], [${ne}] *)`, Je = (e) => {
  var t, n, a, i, r, l, d, f, u, h, v, P, S, y, s, T, B, _, R, N, I, C;
  const g = Ce(e.cssVarPrefix);
  return {
    "--variant-plainColor": "var(--variant-plainColor) !important",
    "--variant-plainHoverColor": "var(--variant-plainHoverColor) !important",
    "--variant-plainHoverBg": "var(--variant-plainHoverBg) !important",
    "--variant-plainActiveBg": "var(--variant-plainActiveBg) !important",
    "--variant-plainDisabledColor": "var(--variant-plainDisabledColor) !important",
    "--variant-outlinedColor": "var(--variant-outlinedColor) !important",
    "--variant-outlinedBorder": "var(--variant-outlinedBorder) !important",
    "--variant-outlinedHoverColor": "var(--variant-outlinedHoverColor) !important",
    "--variant-outlinedHoverBorder": "var(--variant-outlinedHoverBorder) !important",
    "--variant-outlinedHoverBg": "var(--variant-outlinedHoverBg) !important",
    "--variant-outlinedActiveBg": "var(--variant-outlinedActiveBg) !important",
    "--variant-outlinedDisabledColor": "var(--variant-outlinedDisabledColor) !important",
    "--variant-outlinedDisabledBorder": "var(--variant-outlinedDisabledBorder) !important",
    "--variant-softColor": "var(--variant-softColor) !important",
    "--variant-softHoverColor": "var(--variant-softHoverColor) !important",
    "--variant-softBg": "var(--variant-softBg) !important",
    "--variant-softHoverBg": "var(--variant-softHoverBg) !important",
    "--variant-softActiveBg": "var(--variant-softActiveBg) !important",
    "--variant-softActiveColor": "var(--variant-softActiveColor) !important",
    "--variant-softDisabledColor": "var(--variant-softDisabledColor) !important",
    "--variant-softDisabledBg": "var(--variant-softDisabledBg) !important",
    "--variant-solidColor": "var(--variant-solidColor) !important",
    "--variant-solidBg": "var(--variant-solidBg) !important",
    "--variant-solidHoverBg": "var(--variant-solidHoverBg) !important",
    "--variant-solidActiveBg": "var(--variant-solidActiveBg) !important",
    "--variant-solidDisabledColor": "var(--variant-solidDisabledColor) !important",
    "--variant-solidDisabledBg": "var(--variant-solidDisabledBg) !important",
    "--Badge-ringColor": "var(--Badge-ringColor) !important",
    colorScheme: "unset",
    [e.getColorSchemeSelector("light")]: {
      [g("--palette-focusVisible")]: `${(t = e.colorSchemes.light) == null ? void 0 : t.palette.focusVisible} !important`,
      [g("--palette-background-body")]: `${(n = e.colorSchemes.light) == null ? void 0 : n.palette.background.body} !important`,
      [g("--palette-background-surface")]: `${(a = e.colorSchemes.light) == null ? void 0 : a.palette.background.surface} !important`,
      [g("--palette-background-popup")]: `${(i = e.colorSchemes.light) == null ? void 0 : i.palette.background.popup} !important`,
      [g("--palette-background-level1")]: `${(r = e.colorSchemes.light) == null ? void 0 : r.palette.background.level1} !important`,
      [g("--palette-background-level2")]: `${(l = e.colorSchemes.light) == null ? void 0 : l.palette.background.level2} !important`,
      [g("--palette-background-level3")]: `${(d = e.colorSchemes.light) == null ? void 0 : d.palette.background.level3} !important`,
      [g("--palette-text-primary")]: `${(f = e.colorSchemes.light) == null ? void 0 : f.palette.text.primary} !important`,
      [g("--palette-text-secondary")]: `${(u = e.colorSchemes.light) == null ? void 0 : u.palette.text.secondary} !important`,
      [g("--palette-text-tertiary")]: `${(h = e.colorSchemes.light) == null ? void 0 : h.palette.text.tertiary} !important`,
      [g("--palette-divider")]: `${(v = e.colorSchemes.light) == null ? void 0 : v.palette.divider} !important`
    },
    [e.getColorSchemeSelector("dark")]: {
      [g("--palette-focusVisible")]: `${(P = e.colorSchemes.dark) == null ? void 0 : P.palette.focusVisible} !important`,
      [g("--palette-background-body")]: `${(S = e.colorSchemes.dark) == null ? void 0 : S.palette.background.body} !important`,
      [g("--palette-background-surface")]: `${(y = e.colorSchemes.dark) == null ? void 0 : y.palette.background.surface} !important`,
      [g("--palette-background-popup")]: `${(s = e.colorSchemes.dark) == null ? void 0 : s.palette.background.popup} !important`,
      [g("--palette-background-level1")]: `${(T = e.colorSchemes.dark) == null ? void 0 : T.palette.background.level1} !important`,
      [g("--palette-background-level2")]: `${(B = e.colorSchemes.dark) == null ? void 0 : B.palette.background.level2} !important`,
      [g("--palette-background-level3")]: `${(_ = e.colorSchemes.dark) == null ? void 0 : _.palette.background.level3} !important`,
      [g("--palette-text-primary")]: `${(R = e.colorSchemes.dark) == null ? void 0 : R.palette.text.primary} !important`,
      [g("--palette-text-secondary")]: `${(N = e.colorSchemes.dark) == null ? void 0 : N.palette.text.secondary} !important`,
      [g("--palette-text-tertiary")]: `${(I = e.colorSchemes.dark) == null ? void 0 : I.palette.text.tertiary} !important`,
      [g("--palette-divider")]: `${(C = e.colorSchemes.dark) == null ? void 0 : C.palette.divider} !important`
    }
  };
};
function Zt(e) {
  return e.theme !== void 0;
}
const zr = (e) => (t) => {
  const n = Zt(t) ? t.theme : t, a = We(n.cssVarPrefix), i = Ce(n.cssVarPrefix), r = (l) => {
    const d = l.split("-");
    return a(l, n.palette[d[1]][d[2]]);
  };
  return {
    [je]: {
      "--Badge-ringColor": r(`palette-${e}-solidBg`),
      "--Icon-color": "currentColor",
      [`${n.getColorSchemeSelector("light")}, ${n.getColorSchemeSelector("dark")}`]: {
        colorScheme: "dark",
        [i("--palette-focusVisible")]: r(`palette-${e}-200`),
        [i("--palette-background-body")]: "rgba(0 0 0 / 0.1)",
        [i("--palette-background-surface")]: "rgba(0 0 0 / 0.06)",
        [i("--palette-background-popup")]: r(`palette-${e}-700`),
        [i("--palette-background-level1")]: `rgba(${r(`palette-${e}-darkChannel`)} / 0.2)`,
        [i("--palette-background-level2")]: `rgba(${r(`palette-${e}-darkChannel`)} / 0.36)`,
        [i("--palette-background-level3")]: `rgba(${r(`palette-${e}-darkChannel`)} / 0.6)`,
        [i("--palette-text-primary")]: r("palette-common-white"),
        [i("--palette-text-secondary")]: r(`palette-${e}-200`),
        [i("--palette-text-tertiary")]: r(`palette-${e}-300`),
        [i("--palette-text-icon")]: r(`palette-${e}-200`),
        [i("--palette-divider")]: `rgba(${r(`palette-${e}-lightChannel`)} / 0.32)`,
        "--variant-plainColor": r(`palette-${e}-50`),
        "--variant-plainHoverColor": "#fff",
        "--variant-plainHoverBg": `rgba(${r(`palette-${e}-lightChannel`)} / 0.12)`,
        "--variant-plainActiveBg": `rgba(${r(`palette-${e}-lightChannel`)} / 0.32)`,
        "--variant-plainDisabledColor": `rgba(${r(`palette-${e}-lightChannel`)} / 0.72)`,
        "--variant-outlinedColor": r(`palette-${e}-50`),
        "--variant-outlinedBorder": `rgba(${r(`palette-${e}-lightChannel`)} / 0.5)`,
        "--variant-outlinedHoverColor": "#fff",
        "--variant-outlinedHoverBorder": r(`palette-${e}-300`),
        "--variant-outlinedHoverBg": `rgba(${r(`palette-${e}-lightChannel`)} / 0.12)`,
        "--variant-outlinedActiveBg": `rgba(${r(`palette-${e}-lightChannel`)} / 0.32)`,
        "--variant-outlinedDisabledColor": `rgba(${r(`palette-${e}-lightChannel`)} / 0.72)`,
        "--variant-outlinedDisabledBorder": "rgba(255 255 255 / 0.2)",
        "--variant-softColor": r("palette-common-white"),
        "--variant-softHoverColor": r("palette-common-white"),
        "--variant-softBg": `rgba(${r(`palette-${e}-lightChannel`)} / 0.24)`,
        "--variant-softHoverBg": `rgba(${r(`palette-${e}-lightChannel`)} / 0.36)`,
        "--variant-softActiveBg": `rgba(${r(`palette-${e}-lightChannel`)} / 0.16)`,
        "--variant-softActiveColor": "#fff",
        "--variant-softDisabledColor": `rgba(${r(`palette-${e}-lightChannel`)} / 0.72)`,
        "--variant-softDisabledBg": `rgba(${r(`palette-${e}-lightChannel`)} / 0.1)`,
        "--variant-solidColor": r(`palette-${e}-${e === "neutral" ? "600" : "500"}`),
        "--variant-solidBg": r("palette-common-white"),
        "--variant-solidHoverBg": r("palette-common-white"),
        "--variant-solidActiveBg": r(`palette-${e}-100`),
        "--variant-solidDisabledColor": `rgba(${r(`palette-${e}-lightChannel`)} / 0.72)`,
        "--variant-solidDisabledBg": `rgba(${r(`palette-${e}-lightChannel`)} / 0.1)`
      }
    },
    [`&, & [${ne}]`]: Je(n)
  };
}, Ar = (e) => (t) => {
  const {
    theme: n = t
  } = t, a = We(n.cssVarPrefix), i = Ce(n.cssVarPrefix), r = (l) => {
    const d = l.split("-");
    return a(l, n.palette[d[1]][d[2]]);
  };
  return {
    [je]: {
      "--Badge-ringColor": r(`palette-${e}-softBg`),
      "--Icon-color": "currentColor",
      [n.getColorSchemeSelector("dark")]: {
        [i("--palette-focusVisible")]: r(`palette-${e}-300`),
        [i("--palette-background-body")]: `rgba(${r(`palette-${e}-mainChannel`)} / 0.1)`,
        [i("--palette-background-surface")]: `rgba(${r(`palette-${e}-mainChannel`)} / 0.08)`,
        [i("--palette-background-level1")]: `rgba(${r(`palette-${e}-mainChannel`)} / 0.2)`,
        [i("--palette-background-level2")]: `rgba(${r(`palette-${e}-mainChannel`)} / 0.4)`,
        [i("--palette-background-level3")]: `rgba(${r(`palette-${e}-mainChannel`)} / 0.6)`,
        [i("--palette-text-primary")]: r(`palette-${e}-100`),
        [i("--palette-text-secondary")]: `rgba(${r(`palette-${e}-lightChannel`)} / 0.72)`,
        [i("--palette-text-tertiary")]: `rgba(${r(`palette-${e}-lightChannel`)} / 0.6)`,
        [i("--palette-text-icon")]: `rgba(${r(`palette-${e}-lightChannel`)} / 0.6)`,
        [i("--palette-divider")]: `rgba(${r(`palette-${e}-lightChannel`)} / 0.2)`,
        "--variant-plainColor": `rgba(${r(`palette-${e}-lightChannel`)} / 1)`,
        "--variant-plainHoverColor": r(`palette-${e}-50`),
        "--variant-plainHoverBg": `rgba(${r(`palette-${e}-mainChannel`)} / 0.16)`,
        "--variant-plainActiveBg": `rgba(${r(`palette-${e}-mainChannel`)} / 0.32)`,
        "--variant-plainDisabledColor": `rgba(${r(`palette-${e}-mainChannel`)} / 0.72)`,
        "--variant-outlinedColor": `rgba(${r(`palette-${e}-lightChannel`)} / 1)`,
        "--variant-outlinedHoverColor": r(`palette-${e}-50`),
        "--variant-outlinedBg": "initial",
        "--variant-outlinedBorder": `rgba(${r(`palette-${e}-mainChannel`)} / 0.4)`,
        "--variant-outlinedHoverBorder": r(`palette-${e}-600`),
        "--variant-outlinedHoverBg": `rgba(${r(`palette-${e}-mainChannel`)} / 0.16)`,
        "--variant-outlinedActiveBg": `rgba(${r(`palette-${e}-mainChannel`)} / 0.32)`,
        "--variant-outlinedDisabledColor": `rgba(${r(`palette-${e}-mainChannel`)} / 0.72)`,
        "--variant-outlinedDisabledBorder": `rgba(${r(`palette-${e}-mainChannel`)} / 0.2)`,
        "--variant-softColor": r(`palette-${e}-200`),
        "--variant-softBg": `rgba(${r(`palette-${e}-mainChannel`)} / 0.24)`,
        "--variant-softHoverColor": "#fff",
        "--variant-softHoverBg": `rgba(${r(`palette-${e}-mainChannel`)} / 0.32)`,
        "--variant-softActiveBg": `rgba(${r(`palette-${e}-mainChannel`)} / 0.48)`,
        "--variant-softDisabledColor": `rgba(${r(`palette-${e}-mainChannel`)} / 0.72)`,
        "--variant-softDisabledBg": `rgba(${r(`palette-${e}-mainChannel`)} / 0.12)`,
        "--variant-solidColor": "#fff",
        "--variant-solidBg": r(`palette-${e}-500`),
        "--variant-solidHoverColor": "#fff",
        "--variant-solidHoverBg": r(`palette-${e}-600`),
        "--variant-solidActiveBg": r(`palette-${e}-600`),
        "--variant-solidDisabledColor": `rgba(${r(`palette-${e}-mainChannel`)} / 0.72)`,
        "--variant-solidDisabledBg": `rgba(${r(`palette-${e}-mainChannel`)} / 0.12)`
      },
      // `light` (default color scheme) should come last in case that `theme.getColorSchemeSelector()` return the same value
      [n.getColorSchemeSelector("light")]: {
        [i("--palette-focusVisible")]: r(`palette-${e}-500`),
        [i("--palette-background-body")]: `rgba(${r(`palette-${e}-mainChannel`)} / 0.1)`,
        [i("--palette-background-surface")]: `rgba(${r(`palette-${e}-mainChannel`)} / 0.08)`,
        [i("--palette-background-level1")]: `rgba(${r(`palette-${e}-mainChannel`)} / 0.2)`,
        [i("--palette-background-level2")]: `rgba(${r(`palette-${e}-mainChannel`)} / 0.32)`,
        [i("--palette-background-level3")]: `rgba(${r(`palette-${e}-mainChannel`)} / 0.48)`,
        [i("--palette-text-primary")]: r(`palette-${e}-700`),
        [i("--palette-text-secondary")]: `rgba(${r(`palette-${e}-darkChannel`)} / 0.8)`,
        [i("--palette-text-tertiary")]: `rgba(${r(`palette-${e}-darkChannel`)} / 0.68)`,
        [i("--palette-text-icon")]: r(`palette-${e}-500`),
        [i("--palette-divider")]: `rgba(${r(`palette-${e}-mainChannel`)} / 0.32)`,
        "--variant-plainColor": `rgba(${r(`palette-${e}-darkChannel`)} / 0.8)`,
        "--variant-plainHoverColor": `rgba(${r(`palette-${e}-darkChannel`)} / 1)`,
        "--variant-plainHoverBg": `rgba(${r(`palette-${e}-mainChannel`)} / 0.12)`,
        "--variant-plainActiveBg": `rgba(${r(`palette-${e}-mainChannel`)} / 0.24)`,
        "--variant-plainDisabledColor": `rgba(${r(`palette-${e}-mainChannel`)} / 0.6)`,
        "--variant-outlinedColor": `rgba(${r(`palette-${e}-mainChannel`)} / 1)`,
        "--variant-outlinedBorder": `rgba(${r(`palette-${e}-mainChannel`)} / 0.4)`,
        "--variant-outlinedHoverColor": r(`palette-${e}-600`),
        "--variant-outlinedHoverBorder": r(`palette-${e}-300`),
        "--variant-outlinedHoverBg": `rgba(${r(`palette-${e}-mainChannel`)} / 0.12)`,
        "--variant-outlinedActiveBg": `rgba(${r(`palette-${e}-mainChannel`)} / 0.24)`,
        "--variant-outlinedDisabledColor": `rgba(${r(`palette-${e}-mainChannel`)} / 0.6)`,
        "--variant-outlinedDisabledBorder": `rgba(${r(`palette-${e}-mainChannel`)} / 0.12)`,
        "--variant-softColor": r(`palette-${e}-600`),
        "--variant-softBg": `rgba(${r(`palette-${e}-lightChannel`)} / 0.8)`,
        "--variant-softHoverColor": r(`palette-${e}-700`),
        "--variant-softHoverBg": r(`palette-${e}-200`),
        "--variant-softActiveBg": r(`palette-${e}-300`),
        "--variant-softDisabledColor": `rgba(${r(`palette-${e}-mainChannel`)} / 0.6)`,
        "--variant-softDisabledBg": `rgba(${r(`palette-${e}-mainChannel`)} / 0.08)`,
        "--variant-solidColor": r("palette-common-white"),
        "--variant-solidBg": r(`palette-${e}-${e === "neutral" ? "700" : "500"}`),
        "--variant-solidHoverColor": r("palette-common-white"),
        "--variant-solidHoverBg": r(`palette-${e}-600`),
        "--variant-solidActiveBg": r(`palette-${e}-600`),
        "--variant-solidDisabledColor": `rgba(${r(`palette-${e}-mainChannel`)} / 0.6)`,
        "--variant-solidDisabledBg": `rgba(${r(`palette-${e}-mainChannel`)} / 0.08)`
      }
    },
    [`&, & [${ne}]`]: Je(n)
  };
};
function Xt(e) {
  return ae("MuiIconButton", e);
}
const Vr = ie("MuiIconButton", ["root", "colorPrimary", "colorNeutral", "colorDanger", "colorSuccess", "colorWarning", "colorContext", "variantPlain", "variantOutlined", "variantSoft", "variantSolid", "focusVisible", "disabled", "sizeSm", "sizeMd", "sizeLg", "loading", "loadingIndicator"]), Te = /* @__PURE__ */ b.createContext({});
process.env.NODE_ENV !== "production" && (Te.displayName = "ButtonGroupContext");
const _e = /* @__PURE__ */ b.createContext(void 0);
process.env.NODE_ENV !== "production" && (_e.displayName = "ToggleButtonGroupContext");
function Qt(e) {
  return ae("MuiCircularProgress", e);
}
ie("MuiCircularProgress", ["root", "determinate", "svg", "track", "progress", "colorPrimary", "colorNeutral", "colorDanger", "colorSuccess", "colorWarning", "colorContext", "sizeSm", "sizeMd", "sizeLg", "variantPlain", "variantOutlined", "variantSoft", "variantSolid"]);
let er = (e) => e, Ve;
const tr = ["color", "backgroundColor"], rr = ["children", "className", "color", "size", "variant", "thickness", "determinate", "value", "component", "slots", "slotProps"], or = ut({
  "0%": {
    // let the progress start at the top of the ring
    transform: "rotate(-90deg)"
  },
  "100%": {
    transform: "rotate(270deg)"
  }
}), nr = (e) => {
  const {
    determinate: t,
    color: n,
    variant: a,
    size: i
  } = e, r = {
    root: ["root", t && "determinate", n && `color${U(n)}`, a && `variant${U(a)}`, i && `size${U(i)}`],
    svg: ["svg"],
    track: ["track"],
    progress: ["progress"]
  };
  return ce(r, Qt, {});
};
function K(e, t) {
  return `var(--CircularProgress-${e}Thickness, var(--CircularProgress-thickness, ${t}))`;
}
const ar = L("span", {
  name: "JoyCircularProgress",
  slot: "Root",
  overridesResolver: (e, t) => t.root
})(({
  ownerState: e,
  theme: t
}) => {
  var n, a, i, r;
  const l = ((n = t.variants[e.variant]) == null ? void 0 : n[e.color]) || {}, {
    color: d,
    backgroundColor: f
  } = l, u = Y(l, tr);
  return c({
    // integration with icon
    "--Icon-fontSize": "calc(0.4 * var(--_root-size))",
    // public variables
    "--CircularProgress-trackColor": f,
    "--CircularProgress-progressColor": d,
    "--CircularProgress-percent": e.value,
    // 0 - 100
    "--CircularProgress-linecap": "round"
  }, e.size === "sm" && {
    "--_root-size": "var(--CircularProgress-size, 24px)",
    // use --_root-size to let other components overrides via --CircularProgress-size
    "--_track-thickness": K("track", "3px"),
    "--_progress-thickness": K("progress", "3px")
  }, e.instanceSize === "sm" && {
    "--CircularProgress-size": "24px"
  }, e.size === "md" && {
    "--_track-thickness": K("track", "6px"),
    "--_progress-thickness": K("progress", "6px"),
    "--_root-size": "var(--CircularProgress-size, 40px)"
  }, e.instanceSize === "md" && {
    "--CircularProgress-size": "40px"
  }, e.size === "lg" && {
    "--_track-thickness": K("track", "8px"),
    "--_progress-thickness": K("progress", "8px"),
    "--_root-size": "var(--CircularProgress-size, 64px)"
  }, e.instanceSize === "lg" && {
    "--CircularProgress-size": "64px"
  }, e.thickness && {
    "--_track-thickness": `${e.thickness}px`,
    "--_progress-thickness": `${e.thickness}px`
  }, {
    // internal variables
    "--_thickness-diff": "calc(var(--_track-thickness) - var(--_progress-thickness))",
    "--_inner-size": "calc(var(--_root-size) - 2 * var(--variant-borderWidth, 0px))",
    "--_outlined-inset": "max(var(--_track-thickness), var(--_progress-thickness))",
    width: "var(--_root-size)",
    height: "var(--_root-size)",
    borderRadius: "var(--_root-size)",
    margin: "var(--CircularProgress-margin)",
    boxSizing: "border-box",
    display: "inline-flex",
    justifyContent: "center",
    alignItems: "center",
    flexShrink: 0,
    // prevent from shrinking when CircularProgress is in a flex container.
    position: "relative",
    color: d
  }, e.children && {
    // only add font related properties when there is a child.
    // so that when there is no child, the size can be controlled by the parent font-size e.g. Link
    fontFamily: t.vars.fontFamily.body,
    fontWeight: t.vars.fontWeight.md,
    fontSize: "calc(0.2 * var(--_root-size))"
  }, u, e.variant === "outlined" && {
    "&::before": c({
      content: '""',
      display: "block",
      position: "absolute",
      borderRadius: "inherit",
      top: "var(--_outlined-inset)",
      left: "var(--_outlined-inset)",
      right: "var(--_outlined-inset)",
      bottom: "var(--_outlined-inset)"
    }, u)
  }, e.variant === "soft" && {
    "--CircularProgress-trackColor": t.variants.soft.neutral.backgroundColor,
    "--CircularProgress-progressColor": (a = t.variants.solid) == null ? void 0 : a[e.color].backgroundColor
  }, e.variant === "solid" && {
    "--CircularProgress-trackColor": (i = t.variants.softHover) == null ? void 0 : i[e.color].backgroundColor,
    "--CircularProgress-progressColor": (r = t.variants.solid) == null ? void 0 : r[e.color].backgroundColor
  });
}), ir = L("svg", {
  name: "JoyCircularProgress",
  slot: "Svg",
  overridesResolver: (e, t) => t.svg
})({
  width: "inherit",
  height: "inherit",
  display: "inherit",
  boxSizing: "inherit",
  position: "absolute",
  top: "calc(-1 * var(--variant-borderWidth, 0px))",
  // centered align
  left: "calc(-1 * var(--variant-borderWidth, 0px))"
  // centered align
}), sr = L("circle", {
  name: "JoyCircularProgress",
  slot: "track",
  overridesResolver: (e, t) => t.track
})({
  cx: "50%",
  cy: "50%",
  r: "calc(var(--_inner-size) / 2 - var(--_track-thickness) / 2 + min(0px, var(--_thickness-diff) / 2))",
  fill: "transparent",
  strokeWidth: "var(--_track-thickness)",
  stroke: "var(--CircularProgress-trackColor)"
}), lr = L("circle", {
  name: "JoyCircularProgress",
  slot: "progress",
  overridesResolver: (e, t) => t.progress
})({
  "--_progress-radius": "calc(var(--_inner-size) / 2 - var(--_progress-thickness) / 2 - max(0px, var(--_thickness-diff) / 2))",
  "--_progress-length": "calc(2 * 3.1415926535 * var(--_progress-radius))",
  // the circumference around the progress
  cx: "50%",
  cy: "50%",
  r: "var(--_progress-radius)",
  fill: "transparent",
  strokeWidth: "var(--_progress-thickness)",
  stroke: "var(--CircularProgress-progressColor)",
  strokeLinecap: "var(--CircularProgress-linecap, round)",
  // can't use CSS variable directly, need to cast type.
  strokeDasharray: "var(--_progress-length)",
  strokeDashoffset: "calc(var(--_progress-length) - var(--CircularProgress-percent) * var(--_progress-length) / 100)",
  transformOrigin: "center",
  transform: "rotate(-90deg)"
  // to initially appear at the top-center of the circle.
}, ({
  ownerState: e
}) => !e.determinate && dt(Ve || (Ve = er`
      animation: var(--CircularProgress-circulation, 0.8s linear 0s infinite normal none running)
        ${0};
    `), or)), Ee = /* @__PURE__ */ b.forwardRef(function(t, n) {
  const a = ue({
    props: t,
    name: "JoyCircularProgress"
  }), {
    children: i,
    className: r,
    color: l = "primary",
    size: d = "md",
    variant: f = "soft",
    thickness: u,
    determinate: h = !1,
    value: v = h ? 0 : 25,
    // `25` is the 1/4 of the circle.
    component: P,
    slots: S = {},
    slotProps: y = {}
  } = a, s = Y(a, rr), T = c({}, a, {
    color: l,
    size: d,
    variant: f,
    thickness: u,
    value: v,
    determinate: h,
    instanceSize: t.size
  }), B = nr(T), _ = c({}, s, {
    component: P,
    slots: S,
    slotProps: y
  }), [R, N] = W("root", {
    ref: n,
    className: ve(B.root, r),
    elementType: ar,
    externalForwardedProps: _,
    ownerState: T,
    additionalProps: c({
      role: "progressbar",
      style: {
        // Setting this CSS variable via inline-style
        // prevents the generation of new CSS every time
        // `value` prop updates
        "--CircularProgress-percent": v
      }
    }, v && h && {
      "aria-valuenow": Math.round(typeof v == "number" ? v : Number(v || 0))
    })
  }), [I, C] = W("svg", {
    className: B.svg,
    elementType: ir,
    externalForwardedProps: _,
    ownerState: T
  }), [g, O] = W("track", {
    className: B.track,
    elementType: sr,
    externalForwardedProps: _,
    ownerState: T
  }), [z, V] = W("progress", {
    className: B.progress,
    elementType: lr,
    externalForwardedProps: _,
    ownerState: T
  });
  return /* @__PURE__ */ oe(R, c({}, N, {
    children: [/* @__PURE__ */ oe(I, c({}, C, {
      children: [/* @__PURE__ */ M(g, c({}, O)), /* @__PURE__ */ M(z, c({}, V))]
    })), i]
  }));
});
process.env.NODE_ENV !== "production" && (Ee.propTypes = {
  // ┌────────────────────────────── Warning ──────────────────────────────┐
  // │ These PropTypes are generated from the TypeScript type definitions. │
  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
  // └─────────────────────────────────────────────────────────────────────┘
  /**
   * @ignore
   */
  children: o.node,
  /**
   * @ignore
   */
  className: o.string,
  /**
   * The color of the component. It supports those theme colors that make sense for this component.
   * @default 'primary'
   */
  color: o.oneOfType([o.oneOf(["danger", "neutral", "primary", "success", "warning"]), o.string]),
  /**
   * The component used for the root node.
   * Either a string to use a HTML element or a component.
   */
  component: o.elementType,
  /**
   * The boolean to select a variant.
   * Use indeterminate when there is no progress value.
   * @default false
   */
  determinate: o.bool,
  /**
   * The size of the component.
   * It accepts theme values between 'sm' and 'lg'.
   * @default 'md'
   */
  size: o.oneOfType([o.oneOf(["sm", "md", "lg"]), o.string]),
  /**
   * The props used for each slot inside.
   * @default {}
   */
  slotProps: o.shape({
    progress: o.oneOfType([o.func, o.object]),
    root: o.oneOfType([o.func, o.object]),
    svg: o.oneOfType([o.func, o.object]),
    track: o.oneOfType([o.func, o.object])
  }),
  /**
   * The components used for each slot inside.
   * @default {}
   */
  slots: o.shape({
    progress: o.elementType,
    root: o.elementType,
    svg: o.elementType,
    track: o.elementType
  }),
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx: o.oneOfType([o.arrayOf(o.oneOfType([o.func, o.object, o.bool])), o.func, o.object]),
  /**
   * The thickness of the circle.
   */
  thickness: o.number,
  /**
   * The value of the progress indicator for the determinate variant.
   * Value between 0 and 100.
   *
   * @default determinate ? 0 : 25
   */
  value: o.number,
  /**
   * The [global variant](https://mui.com/joy-ui/main-features/global-variants/) to use.
   * @default 'soft'
   */
  variant: o.oneOfType([o.oneOf(["outlined", "plain", "soft", "solid"]), o.string])
});
const cr = ["children", "action", "component", "color", "disabled", "variant", "loading", "loadingIndicator", "size", "slots", "slotProps"], ur = (e) => {
  const {
    color: t,
    disabled: n,
    focusVisible: a,
    focusVisibleClassName: i,
    size: r,
    variant: l,
    loading: d
  } = e, f = {
    root: ["root", n && "disabled", a && "focusVisible", l && `variant${U(l)}`, t && `color${U(t)}`, r && `size${U(r)}`, d && "loading"],
    loadingIndicator: ["loadingIndicator"]
  }, u = ce(f, Xt, {});
  return a && i && (u.root += ` ${i}`), u;
}, dr = L("button")(({
  theme: e,
  ownerState: t
}) => {
  var n, a, i, r;
  return [c({
    "--Icon-margin": "initial",
    // reset the icon's margin.
    "--Icon-color": t.color !== "neutral" || t.variant === "solid" ? "currentColor" : e.vars.palette.text.icon
  }, t.instanceSize && {
    "--IconButton-size": {
      sm: "2rem",
      md: "2.25rem",
      lg: "2.75rem"
    }[t.instanceSize]
  }, t.size === "sm" && {
    "--Icon-fontSize": "calc(var(--IconButton-size, 2rem) / 1.6)",
    // 1.25rem by default
    "--CircularProgress-size": "20px",
    "--CircularProgress-thickness": "2px",
    minWidth: "var(--IconButton-size, 2rem)",
    // use min-width instead of height to make the button resilient to its content
    minHeight: "var(--IconButton-size, 2rem)",
    // use min-height instead of height to make the button resilient to its content
    fontSize: e.vars.fontSize.sm,
    paddingInline: "2px"
    // add a gap, in case the content is long, for example multiple icons
  }, t.size === "md" && {
    "--Icon-fontSize": "calc(var(--IconButton-size, 2.25rem) / 1.5)",
    // 1.5rem by default
    "--CircularProgress-size": "20px",
    "--CircularProgress-thickness": "2px",
    minWidth: "var(--IconButton-size, 2.25rem)",
    minHeight: "var(--IconButton-size, 2.25rem)",
    fontSize: e.vars.fontSize.md,
    paddingInline: "0.25rem"
  }, t.size === "lg" && {
    "--Icon-fontSize": "calc(var(--IconButton-size, 2.75rem) / 1.571)",
    // 1.75rem by default
    "--CircularProgress-size": "28px",
    "--CircularProgress-thickness": "4px",
    minWidth: "var(--IconButton-size, 2.75rem)",
    minHeight: "var(--IconButton-size, 2.75rem)",
    fontSize: e.vars.fontSize.lg,
    paddingInline: "0.375rem"
  }, {
    WebkitTapHighlightColor: "transparent",
    paddingBlock: 0,
    fontFamily: e.vars.fontFamily.body,
    fontWeight: e.vars.fontWeight.md,
    margin: "var(--IconButton-margin)",
    // to be controlled by other components, for example Input
    borderRadius: `var(--IconButton-radius, ${e.vars.radius.sm})`,
    // to be controlled by other components, for example Input
    border: "none",
    boxSizing: "border-box",
    backgroundColor: "transparent",
    cursor: "pointer",
    display: "inline-flex",
    alignItems: "center",
    justifyContent: "center",
    position: "relative",
    [e.focus.selector]: c({
      "--Icon-color": "currentColor"
    }, e.focus.default)
  }), c({}, (n = e.variants[t.variant]) == null ? void 0 : n[t.color], {
    "&:hover": {
      "@media (hover: hover)": c({
        "--Icon-color": "currentColor"
      }, (a = e.variants[`${t.variant}Hover`]) == null ? void 0 : a[t.color])
    },
    '&:active, &[aria-pressed="true"]': c({
      "--Icon-color": "currentColor"
    }, (i = e.variants[`${t.variant}Active`]) == null ? void 0 : i[t.color]),
    "&:disabled": (r = e.variants[`${t.variant}Disabled`]) == null ? void 0 : r[t.color]
  })];
}), pr = L(dr, {
  name: "JoyIconButton",
  slot: "Root",
  overridesResolver: (e, t) => t.root
})({}), fr = L("span", {
  name: "JoyIconButton",
  slot: "LoadingIndicator",
  overridesResolver: (e, t) => t.loadingIndicator
})(({
  theme: e,
  ownerState: t
}) => {
  var n, a;
  return c({
    display: "inherit",
    position: "absolute",
    left: "50%",
    transform: "translateX(-50%)",
    color: (n = e.variants[t.variant]) == null || (n = n[t.color]) == null ? void 0 : n.color
  }, t.disabled && {
    color: (a = e.variants[`${t.variant}Disabled`]) == null || (a = a[t.color]) == null ? void 0 : a.color
  });
}), Ke = /* @__PURE__ */ b.forwardRef(function(t, n) {
  var a;
  const i = ue({
    props: t,
    name: "JoyIconButton"
  }), {
    children: r,
    action: l,
    component: d = "button",
    color: f = "neutral",
    disabled: u,
    variant: h = "plain",
    loading: v = !1,
    loadingIndicator: P,
    size: S = "md",
    slots: y = {},
    slotProps: s = {}
  } = i, T = Y(i, cr), B = b.useContext(Te), _ = b.useContext(_e), R = t.variant || B.variant || h, N = t.size || B.size || S, I = t.color || B.color || f, C = (a = t.loading || t.disabled) != null ? a : B.disabled || v || u, g = b.useRef(null), O = X(g, n), {
    focusVisible: z,
    setFocusVisible: V,
    getRootProps: H
  } = we(c({}, i, {
    disabled: C,
    rootRef: O
  })), D = P ?? /* @__PURE__ */ M(Ee, {
    color: I,
    thickness: {
      sm: 2,
      md: 3,
      lg: 4
    }[N] || 3
  });
  b.useImperativeHandle(l, () => ({
    focusVisible: () => {
      var j;
      V(!0), (j = g.current) == null || j.focus();
    }
  }), [V]);
  const E = c({}, i, {
    component: d,
    color: I,
    disabled: C,
    variant: R,
    loading: v,
    size: N,
    focusVisible: z,
    instanceSize: t.size
  }), F = ur(E), m = (j) => {
    var Q;
    let q = i.onClick;
    if (typeof s.root == "function" ? q = s.root(E).onClick : s.root && (q = s.root.onClick), (Q = q) == null || Q(j), _) {
      var ee;
      (ee = _.onClick) == null || ee.call(_, j, i.value);
    }
  };
  let p = i["aria-pressed"];
  typeof s.root == "function" ? p = s.root(E)["aria-pressed"] : s.root && (p = s.root["aria-pressed"]), _ != null && _.value && (Array.isArray(_.value) ? p = _.value.indexOf(i.value) !== -1 : p = _.value === i.value);
  const $ = c({}, T, {
    component: d,
    slots: y,
    slotProps: s
  }), [A, G] = W("root", {
    ref: n,
    className: F.root,
    elementType: pr,
    getSlotProps: H,
    externalForwardedProps: $,
    ownerState: E,
    additionalProps: {
      onClick: m,
      "aria-pressed": p
    }
  }), [w, J] = W("loadingIndicator", {
    className: F.loadingIndicator,
    elementType: fr,
    externalForwardedProps: $,
    ownerState: E
  });
  return /* @__PURE__ */ M(A, c({}, G, {
    children: v ? /* @__PURE__ */ M(w, c({}, J, {
      children: D
    })) : r
  }));
});
process.env.NODE_ENV !== "production" && (Ke.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: o.oneOfType([o.func, o.shape({
    current: o.shape({
      focusVisible: o.func.isRequired
    })
  })]),
  /**
   * @ignore
   */
  children: o.node,
  /**
   * The color of the component. It supports those theme colors that make sense for this component.
   * @default 'neutral'
   */
  color: o.oneOfType([o.oneOf(["danger", "neutral", "primary", "success", "warning"]), o.string]),
  /**
   * The component used for the root node.
   * Either a string to use a HTML element or a component.
   */
  component: o.elementType,
  /**
   * If `true`, the component is disabled.
   * @default false
   */
  disabled: o.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: o.string,
  /**
   * If `true`, the loading indicator is shown and the icon button becomes disabled.
   * @default false
   */
  loading: o.bool,
  /**
   * The node should contain an element with `role="progressbar"` with an accessible name.
   * By default we render a `CircularProgress` that is labelled by the button itself.
   * @default <CircularProgress />
   */
  loadingIndicator: o.node,
  /**
   * @ignore
   */
  onClick: o.func,
  /**
   * The size of the component.
   * @default 'md'
   */
  size: o.oneOfType([o.oneOf(["sm", "md", "lg"]), o.string]),
  /**
   * The props used for each slot inside.
   * @default {}
   */
  slotProps: o.shape({
    loadingIndicator: o.oneOfType([o.func, o.object]),
    root: o.oneOfType([o.func, o.object])
  }),
  /**
   * The components used for each slot inside.
   * @default {}
   */
  slots: o.shape({
    loadingIndicator: o.elementType,
    root: o.elementType
  }),
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx: o.oneOfType([o.arrayOf(o.oneOfType([o.func, o.object, o.bool])), o.func, o.object]),
  /**
   * @default 0
   */
  tabIndex: o.number,
  /**
   * @ignore
   */
  value: o.oneOfType([o.arrayOf(o.string), o.number, o.string]),
  /**
   * The [global variant](https://mui.com/joy-ui/main-features/global-variants/) to use.
   * @default 'plain'
   */
  variant: o.oneOfType([o.oneOf(["outlined", "plain", "soft", "solid"]), o.string])
});
Ke.muiName = "IconButton";
function vr(e) {
  return ae("MuiTypography", e);
}
ie("MuiTypography", ["root", "h1", "h2", "h3", "h4", "title-lg", "title-md", "title-sm", "body-lg", "body-md", "body-sm", "body-xs", "noWrap", "gutterBottom", "startDecorator", "endDecorator", "colorPrimary", "colorNeutral", "colorDanger", "colorSuccess", "colorWarning", "colorContext", "variantPlain", "variantOutlined", "variantSoft", "variantSolid"]);
const gr = ["color", "textColor"], mr = ["component", "gutterBottom", "noWrap", "level", "levelMapping", "children", "endDecorator", "startDecorator", "variant", "slots", "slotProps"], $e = /* @__PURE__ */ b.createContext(!1);
process.env.NODE_ENV !== "production" && ($e.displayName = "TypographyNestedContext");
const Ge = /* @__PURE__ */ b.createContext(!1);
process.env.NODE_ENV !== "production" && (Ge.displayName = "TypographyInheritContext");
const hr = (e) => {
  const {
    gutterBottom: t,
    noWrap: n,
    level: a,
    color: i,
    variant: r
  } = e, l = {
    root: ["root", a, t && "gutterBottom", n && "noWrap", i && `color${U(i)}`, r && `variant${U(r)}`],
    startDecorator: ["startDecorator"],
    endDecorator: ["endDecorator"]
  };
  return ce(l, vr, {});
}, yr = L("span", {
  name: "JoyTypography",
  slot: "StartDecorator",
  overridesResolver: (e, t) => t.startDecorator
})({
  display: "inline-flex",
  marginInlineEnd: "clamp(4px, var(--Typography-gap, 0.375em), 0.75rem)"
}), br = L("span", {
  name: "JoyTypography",
  slot: "endDecorator",
  overridesResolver: (e, t) => t.endDecorator
})({
  display: "inline-flex",
  marginInlineStart: "clamp(4px, var(--Typography-gap, 0.375em), 0.75rem)"
}), $r = L("span", {
  name: "JoyTypography",
  slot: "Root",
  overridesResolver: (e, t) => t.root
})(({
  theme: e,
  ownerState: t
}) => {
  var n, a, i, r, l;
  const d = t.level !== "inherit" ? (n = e.typography[t.level]) == null ? void 0 : n.lineHeight : "1";
  return c({
    "--Icon-fontSize": `calc(1em * ${d})`
  }, t.color && {
    "--Icon-color": "currentColor"
  }, {
    margin: "var(--Typography-margin, 0px)"
  }, t.nesting ? {
    display: "inline"
    // looks better than `inline-block` when using with `variant` prop.
  } : c({
    display: "block"
  }, t.unstable_hasSkeleton && {
    position: "relative"
  }), (t.startDecorator || t.endDecorator) && c({
    display: "flex",
    alignItems: "center"
  }, t.nesting && c({
    display: "inline-flex"
  }, t.startDecorator && {
    verticalAlign: "bottom"
    // to make the text align with the parent's content
  })), t.level && t.level !== "inherit" && e.typography[t.level], {
    fontSize: `var(--Typography-fontSize, ${t.level && t.level !== "inherit" && (a = (i = e.typography[t.level]) == null ? void 0 : i.fontSize) != null ? a : "inherit"})`
  }, t.noWrap && {
    overflow: "hidden",
    textOverflow: "ellipsis",
    whiteSpace: "nowrap"
  }, t.gutterBottom && {
    marginBottom: "0.35em"
  }, t.color && {
    color: `var(--variant-plainColor, rgba(${(r = e.vars.palette[t.color]) == null ? void 0 : r.mainChannel} / 1))`
  }, t.variant && c({
    borderRadius: e.vars.radius.xs,
    paddingBlock: "min(0.1em, 4px)",
    paddingInline: "0.25em"
  }, !t.nesting && {
    marginInline: "-0.25em"
  }, (l = e.variants[t.variant]) == null ? void 0 : l[t.color]));
}), He = {
  h1: "h1",
  h2: "h2",
  h3: "h3",
  h4: "h4",
  "title-lg": "p",
  "title-md": "p",
  "title-sm": "p",
  "body-lg": "p",
  "body-md": "p",
  "body-sm": "p",
  "body-xs": "span",
  inherit: "p"
}, qe = /* @__PURE__ */ b.forwardRef(function(t, n) {
  var a;
  const i = ue({
    props: t,
    name: "JoyTypography"
  }), {
    color: r,
    textColor: l
  } = i, d = Y(i, gr), f = b.useContext($e), u = b.useContext(Ge), h = pt(c({}, d, {
    color: l
  })), {
    component: v,
    gutterBottom: P = !1,
    noWrap: S = !1,
    level: y = "body-md",
    levelMapping: s = He,
    children: T,
    endDecorator: B,
    startDecorator: _,
    variant: R,
    slots: N = {},
    slotProps: I = {}
  } = h, C = Y(h, mr), g = (a = t.color) != null ? a : R ? r ?? "neutral" : r, O = f || u ? t.level || "inherit" : y, z = Bt(T, ["Skeleton"]), V = v || (f ? "span" : s[O] || He[O] || "span"), H = c({}, h, {
    level: O,
    component: V,
    color: g,
    gutterBottom: P,
    noWrap: S,
    nesting: f,
    variant: R,
    unstable_hasSkeleton: z
  }), D = hr(H), E = c({}, C, {
    component: V,
    slots: N,
    slotProps: I
  }), [F, m] = W("root", {
    ref: n,
    className: D.root,
    elementType: $r,
    externalForwardedProps: E,
    ownerState: H
  }), [p, $] = W("startDecorator", {
    className: D.startDecorator,
    elementType: yr,
    externalForwardedProps: E,
    ownerState: H
  }), [A, G] = W("endDecorator", {
    className: D.endDecorator,
    elementType: br,
    externalForwardedProps: E,
    ownerState: H
  });
  return /* @__PURE__ */ M($e.Provider, {
    value: !0,
    children: /* @__PURE__ */ oe(F, c({}, m, {
      children: [_ && /* @__PURE__ */ M(p, c({}, $, {
        children: _
      })), z ? /* @__PURE__ */ b.cloneElement(T, {
        variant: T.props.variant || "inline"
      }) : T, B && /* @__PURE__ */ M(A, c({}, G, {
        children: B
      }))]
    }))
  });
});
process.env.NODE_ENV !== "production" && (qe.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: o.node,
  /**
   * The color of the component. It supports those theme colors that make sense for this component.
   */
  color: o.oneOfType([o.oneOf(["danger", "neutral", "primary", "success", "warning"]), o.string]),
  /**
   * The component used for the root node.
   * Either a string to use a HTML element or a component.
   */
  component: o.elementType,
  /**
   * Element placed after the children.
   */
  endDecorator: o.node,
  /**
   * If `true`, the text will have a bottom margin.
   * @default false
   */
  gutterBottom: o.bool,
  /**
   * Applies the theme typography styles.
   * @default 'body-md'
   */
  level: o.oneOfType([o.oneOf(["h1", "h2", "h3", "h4", "title-lg", "title-md", "title-sm", "body-lg", "body-md", "body-sm", "body-xs", "inherit"]), o.string]),
  /**
   * The component maps the variant prop to a range of different HTML element types.
   * For instance, body1 to `<h6>`.
   * If you wish to change that mapping, you can provide your own.
   * Alternatively, you can use the `component` prop.
   * @default {
   *   h1: 'h1',
   *   h2: 'h2',
   *   h3: 'h3',
   *   h4: 'h4',
   *   'title-lg': 'p',
   *   'title-md': 'p',
   *   'title-sm': 'p',
   *   'body-lg': 'p',
   *   'body-md': 'p',
   *   'body-sm': 'p',
   *   'body-xs': 'span',
   *   inherit: 'p',
   * }
   */
  levelMapping: o.object,
  /**
   * If `true`, the text will not wrap, but instead will truncate with a text overflow ellipsis.
   *
   * Note that text overflow can only happen with block or inline-block level elements
   * (the element needs to have a width in order to overflow).
   * @default false
   */
  noWrap: o.bool,
  /**
   * The props used for each slot inside.
   * @default {}
   */
  slotProps: o.shape({
    endDecorator: o.oneOfType([o.func, o.object]),
    root: o.oneOfType([o.func, o.object]),
    startDecorator: o.oneOfType([o.func, o.object])
  }),
  /**
   * The components used for each slot inside.
   * @default {}
   */
  slots: o.shape({
    endDecorator: o.elementType,
    root: o.elementType,
    startDecorator: o.elementType
  }),
  /**
   * Element placed before the children.
   */
  startDecorator: o.node,
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx: o.oneOfType([o.arrayOf(o.oneOfType([o.func, o.object, o.bool])), o.func, o.object]),
  /**
   * The system color.
   */
  textColor: o.any,
  /**
   * The [global variant](https://mui.com/joy-ui/main-features/global-variants/) to use.
   */
  variant: o.oneOfType([o.oneOf(["outlined", "plain", "soft", "solid"]), o.string])
});
qe.muiName = "Typography";
function Cr(e) {
  return ae("MuiButton", e);
}
const Fe = ie("MuiButton", ["root", "colorPrimary", "colorNeutral", "colorDanger", "colorSuccess", "colorWarning", "colorContext", "variantPlain", "variantOutlined", "variantSoft", "variantSolid", "focusVisible", "disabled", "sizeSm", "sizeMd", "sizeLg", "fullWidth", "startDecorator", "endDecorator", "loading", "loadingIndicatorCenter"]), Tr = ["children", "action", "color", "variant", "size", "fullWidth", "startDecorator", "endDecorator", "loading", "loadingPosition", "loadingIndicator", "disabled", "component", "slots", "slotProps"], _r = (e) => {
  const {
    color: t,
    disabled: n,
    focusVisible: a,
    focusVisibleClassName: i,
    fullWidth: r,
    size: l,
    variant: d,
    loading: f
  } = e, u = {
    root: ["root", n && "disabled", a && "focusVisible", r && "fullWidth", d && `variant${U(d)}`, t && `color${U(t)}`, l && `size${U(l)}`, f && "loading"],
    startDecorator: ["startDecorator"],
    endDecorator: ["endDecorator"],
    loadingIndicatorCenter: ["loadingIndicatorCenter"]
  }, h = ce(u, Cr, {});
  return a && i && (h.root += ` ${i}`), h;
}, Er = L("span", {
  name: "JoyButton",
  slot: "StartDecorator",
  overridesResolver: (e, t) => t.startDecorator
})({
  "--Icon-margin": "0 0 0 calc(var(--Button-gap) / -2)",
  "--CircularProgress-margin": "0 0 0 calc(var(--Button-gap) / -2)",
  display: "inherit",
  marginRight: "var(--Button-gap)"
}), Pr = L("span", {
  name: "JoyButton",
  slot: "EndDecorator",
  overridesResolver: (e, t) => t.endDecorator
})({
  "--Icon-margin": "0 calc(var(--Button-gap) / -2) 0 0",
  "--CircularProgress-margin": "0 calc(var(--Button-gap) / -2) 0 0",
  display: "inherit",
  marginLeft: "var(--Button-gap)"
}), Sr = L("span", {
  name: "JoyButton",
  slot: "LoadingCenter",
  overridesResolver: (e, t) => t.loadingIndicatorCenter
})(({
  theme: e,
  ownerState: t
}) => {
  var n, a;
  return c({
    display: "inherit",
    position: "absolute",
    left: "50%",
    transform: "translateX(-50%)",
    color: (n = e.variants[t.variant]) == null || (n = n[t.color]) == null ? void 0 : n.color
  }, t.disabled && {
    color: (a = e.variants[`${t.variant}Disabled`]) == null || (a = a[t.color]) == null ? void 0 : a.color
  });
}), kr = ({
  theme: e,
  ownerState: t
}) => {
  var n, a, i, r;
  return [c({
    "--Icon-margin": "initial",
    // reset the icon's margin.
    "--Icon-color": t.color !== "neutral" || t.variant === "solid" ? "currentColor" : e.vars.palette.text.icon
  }, t.size === "sm" && {
    "--Icon-fontSize": e.vars.fontSize.lg,
    "--CircularProgress-size": "20px",
    // must be `px` unit, otherwise the CircularProgress is broken in Safari
    "--CircularProgress-thickness": "2px",
    "--Button-gap": "0.375rem",
    minHeight: "var(--Button-minHeight, 2rem)",
    fontSize: e.vars.fontSize.sm,
    paddingBlock: "var(--Button-paddingBlock, 0.25rem)",
    paddingInline: "0.75rem"
  }, t.size === "md" && {
    "--Icon-fontSize": e.vars.fontSize.xl,
    "--CircularProgress-size": "20px",
    // must be `px` unit, otherwise the CircularProgress is broken in Safari
    "--CircularProgress-thickness": "2px",
    "--Button-gap": "0.5rem",
    minHeight: "var(--Button-minHeight, 2.25rem)",
    // use min-height instead of height to make the button resilient to its content
    fontSize: e.vars.fontSize.sm,
    // internal --Button-paddingBlock is used to control the padding-block of the button from the outside, for example as a decorator of an Input
    paddingBlock: "var(--Button-paddingBlock, 0.375rem)",
    // the padding-block act as a minimum spacing between content and root element
    paddingInline: "1rem"
  }, t.size === "lg" && {
    "--Icon-fontSize": e.vars.fontSize.xl2,
    "--CircularProgress-size": "28px",
    // must be `px` unit, otherwise the CircularProgress is broken in Safari
    "--CircularProgress-thickness": "4px",
    "--Button-gap": "0.75rem",
    minHeight: "var(--Button-minHeight, 2.75rem)",
    fontSize: e.vars.fontSize.md,
    paddingBlock: "var(--Button-paddingBlock, 0.5rem)",
    paddingInline: "1.5rem"
  }, {
    WebkitTapHighlightColor: "transparent",
    boxSizing: "border-box",
    borderRadius: `var(--Button-radius, ${e.vars.radius.sm})`,
    // to be controlled by other components, for example Input
    margin: "var(--Button-margin)",
    // to be controlled by other components, for example Input
    border: "none",
    backgroundColor: "transparent",
    cursor: "pointer",
    userSelect: "none",
    display: "inline-flex",
    alignItems: "center",
    justifyContent: "center",
    position: "relative",
    textDecoration: "none",
    // prevent user agent underline when used as anchor
    fontFamily: e.vars.fontFamily.body,
    fontWeight: e.vars.fontWeight.lg,
    lineHeight: e.vars.lineHeight.md
  }, t.fullWidth && {
    width: "100%"
  }, {
    [e.focus.selector]: e.focus.default
  }), c({}, (n = e.variants[t.variant]) == null ? void 0 : n[t.color], {
    "&:hover": {
      "@media (hover: hover)": (a = e.variants[`${t.variant}Hover`]) == null ? void 0 : a[t.color]
    },
    '&:active, &[aria-pressed="true"]': (i = e.variants[`${t.variant}Active`]) == null ? void 0 : i[t.color],
    [`&.${Fe.disabled}`]: (r = e.variants[`${t.variant}Disabled`]) == null ? void 0 : r[t.color]
  }, t.loadingPosition === "center" && {
    // this has to come after the variant styles to take effect.
    [`&.${Fe.loading}`]: {
      color: "transparent"
    }
  })];
}, xr = L("button", {
  name: "JoyButton",
  slot: "Root",
  overridesResolver: (e, t) => t.root
})(kr), Ze = /* @__PURE__ */ b.forwardRef(function(t, n) {
  var a;
  const i = ue({
    props: t,
    name: "JoyButton"
  }), {
    children: r,
    action: l,
    color: d = "primary",
    variant: f = "solid",
    size: u = "md",
    fullWidth: h = !1,
    startDecorator: v,
    endDecorator: P,
    loading: S = !1,
    loadingPosition: y = "center",
    loadingIndicator: s,
    disabled: T,
    component: B,
    slots: _ = {},
    slotProps: R = {}
  } = i, N = Y(i, Tr), I = b.useContext(Te), C = b.useContext(_e), g = t.variant || I.variant || f, O = t.size || I.size || u, z = t.color || I.color || d, V = (a = t.loading || t.disabled) != null ? a : I.disabled || S || T, H = b.useRef(null), D = X(H, n), {
    focusVisible: E,
    setFocusVisible: F,
    getRootProps: m
  } = we(c({}, i, {
    disabled: V,
    rootRef: D
  })), p = s ?? /* @__PURE__ */ M(Ee, {
    color: z,
    thickness: {
      sm: 2,
      md: 3,
      lg: 4
    }[O] || 3
  });
  b.useImperativeHandle(l, () => ({
    focusVisible: () => {
      var Z;
      F(!0), (Z = H.current) == null || Z.focus();
    }
  }), [F]);
  const $ = c({}, i, {
    color: z,
    fullWidth: h,
    variant: g,
    size: O,
    focusVisible: E,
    loading: S,
    loadingPosition: y,
    disabled: V
  }), A = _r($), G = (Z) => {
    var Pe;
    let de = i.onClick;
    if (typeof R.root == "function" ? de = R.root($).onClick : R.root && (de = R.root.onClick), (Pe = de) == null || Pe(Z), C) {
      var Se;
      (Se = C.onClick) == null || Se.call(C, Z, i.value);
    }
  };
  let w = i["aria-pressed"];
  typeof R.root == "function" ? w = R.root($)["aria-pressed"] : R.root && (w = R.root["aria-pressed"]), C != null && C.value && (Array.isArray(C.value) ? w = C.value.indexOf(i.value) !== -1 : w = C.value === i.value);
  const J = c({}, N, {
    component: B,
    slots: _,
    slotProps: R
  }), [j, Q] = W("root", {
    ref: n,
    className: A.root,
    elementType: xr,
    externalForwardedProps: J,
    getSlotProps: m,
    ownerState: $,
    additionalProps: {
      onClick: G,
      "aria-pressed": w
    }
  }), [q, ee] = W("startDecorator", {
    className: A.startDecorator,
    elementType: Er,
    externalForwardedProps: J,
    ownerState: $
  }), [Xe, Qe] = W("endDecorator", {
    className: A.endDecorator,
    elementType: Pr,
    externalForwardedProps: J,
    ownerState: $
  }), [et, tt] = W("loadingIndicatorCenter", {
    className: A.loadingIndicatorCenter,
    elementType: Sr,
    externalForwardedProps: J,
    ownerState: $
  });
  return /* @__PURE__ */ oe(j, c({}, Q, {
    children: [(v || S && y === "start") && /* @__PURE__ */ M(q, c({}, ee, {
      children: S && y === "start" ? p : v
    })), r, S && y === "center" && /* @__PURE__ */ M(et, c({}, tt, {
      children: p
    })), (P || S && y === "end") && /* @__PURE__ */ M(Xe, c({}, Qe, {
      children: S && y === "end" ? p : P
    }))]
  }));
});
process.env.NODE_ENV !== "production" && (Ze.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: o.oneOfType([o.func, o.shape({
    current: o.shape({
      focusVisible: o.func.isRequired
    })
  })]),
  /**
   * @ignore
   */
  children: o.node,
  /**
   * The color of the component. It supports those theme colors that make sense for this component.
   * @default 'primary'
   */
  color: o.oneOfType([o.oneOf(["danger", "neutral", "primary", "success", "warning"]), o.string]),
  /**
   * The component used for the root node.
   * Either a string to use a HTML element or a component.
   */
  component: o.elementType,
  /**
   * If `true`, the component is disabled.
   * @default false
   */
  disabled: o.bool,
  /**
   * Element placed after the children.
   */
  endDecorator: o.node,
  /**
   * @ignore
   */
  focusVisibleClassName: o.string,
  /**
   * If `true`, the button will take up the full width of its container.
   * @default false
   */
  fullWidth: o.bool,
  /**
   * If `true`, the loading indicator is shown and the button becomes disabled.
   * @default false
   */
  loading: o.bool,
  /**
   * The node should contain an element with `role="progressbar"` with an accessible name.
   * By default we render a `CircularProgress` that is labelled by the button itself.
   * @default <CircularProgress />
   */
  loadingIndicator: o.node,
  /**
   * The loading indicator can be positioned on the start, end, or the center of the button.
   * @default 'center'
   */
  loadingPosition: o.oneOf(["center", "end", "start"]),
  /**
   * @ignore
   */
  onClick: o.func,
  /**
   * The size of the component.
   * @default 'md'
   */
  size: o.oneOfType([o.oneOf(["sm", "md", "lg"]), o.string]),
  /**
   * The props used for each slot inside.
   * @default {}
   */
  slotProps: o.shape({
    endDecorator: o.oneOfType([o.func, o.object]),
    loadingIndicatorCenter: o.oneOfType([o.func, o.object]),
    root: o.oneOfType([o.func, o.object]),
    startDecorator: o.oneOfType([o.func, o.object])
  }),
  /**
   * The components used for each slot inside.
   * @default {}
   */
  slots: o.shape({
    endDecorator: o.elementType,
    loadingIndicatorCenter: o.elementType,
    root: o.elementType,
    startDecorator: o.elementType
  }),
  /**
   * Element placed before the children.
   */
  startDecorator: o.node,
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx: o.oneOfType([o.arrayOf(o.oneOfType([o.func, o.object, o.bool])), o.func, o.object]),
  /**
   * @default 0
   */
  tabIndex: o.number,
  /**
   * @ignore
   */
  value: o.oneOfType([o.arrayOf(o.string), o.number, o.string]),
  /**
   * The [global variant](https://mui.com/joy-ui/main-features/global-variants/) to use.
   * @default 'solid'
   */
  variant: o.oneOfType([o.oneOf(["outlined", "plain", "soft", "solid"]), o.string])
});
Ze.muiName = "Button";
export {
  Yt as A,
  Ze as B,
  Ee as C,
  Wt as D,
  xt as H,
  Ke as I,
  be as P,
  dr as S,
  qe as T,
  W as a,
  Fe as b,
  ce as c,
  X as d,
  we as e,
  ye as f,
  me as g,
  Bt as h,
  Vr as i,
  ne as j,
  Dr as k,
  $e as l,
  Ge as m,
  Mt as n,
  Or as o,
  wt as p,
  se as q,
  Nr as r,
  L as s,
  zr as t,
  ue as u,
  Ar as v,
  Ir as w,
  Pt as x,
  kt as y,
  Ut as z
};
