@cgi-learning-hub/ui 0.0.1-dev.1706796454 → 0.0.1-dev.1707475587

package/dist/components/BasicButtons/BasicButtons.js

@@ -0,0 +1,1983 @@
+import { jsx as L, jsxs as we } from "react/jsx-runtime";
+import * as p from "react";
+import oe, { Children as Nt, isValidElement as fe, cloneElement as pe } from "react";
+import { P as o, _ as b, g as ye, a as K, d as Vt, i as ct, c as lt, b as W, s as kt, e as Ft, h as qe, r as Ie, f as zt, j as Bt, m as wt, k as Xe, T as ut, l as dt, n as ce, u as Dt } from "../../useTheme-44keg6z0.js";
+import Lt from "@emotion/styled";
+import { keyframes as De } from "@emotion/react";
+function ft(e) {
+  var t, n, r = "";
+  if (typeof e == "string" || typeof e == "number")
+    r += e;
+  else if (typeof e == "object")
+    if (Array.isArray(e)) {
+      var i = e.length;
+      for (t = 0; t < i; t++)
+        e[t] && (n = ft(e[t])) && (r && (r += " "), r += n);
+    } else
+      for (n in e)
+        e[n] && (r && (r += " "), r += n);
+  return r;
+}
+function D() {
+  for (var e, t, n = 0, r = "", i = arguments.length; n < i; n++)
+    (e = arguments[n]) && (t = ft(e)) && (r && (r += " "), r += t);
+  return r;
+}
+function At(e, t) {
+  return process.env.NODE_ENV === "production" ? () => null : function(...r) {
+    return e(...r) || t(...r);
+  };
+}
+function jt(e) {
+  const {
+    prototype: t = {}
+  } = e;
+  return !!t.isReactComponent;
+}
+function Ut(e, t, n, r, i) {
+  const s = e[t], a = i || t;
+  if (s == null || // When server-side rendering React doesn't warn either.
+  // This is not an accurate check for SSR.
+  // This is only in place for emotion compat.
+  // TODO: Revisit once https://github.com/facebook/react/issues/20047 is resolved.
+  typeof window > "u")
+    return null;
+  let d;
+  return typeof s == "function" && !jt(s) && (d = "Did you accidentally provide a plain function component instead?"), d !== void 0 ? new Error(`Invalid ${r} \`${a}\` supplied to \`${n}\`. Expected an element type that can hold a ref. ${d} For more information see https://mui.com/r/caveat-with-refs-guide`) : null;
+}
+const Yt = At(o.elementType, Ut);
+var ke = { exports: {} }, x = {};
+/**
+ * @license React
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var He;
+function Wt() {
+  if (He)
+    return x;
+  He = 1;
+  var e = Symbol.for("react.element"), t = Symbol.for("react.portal"), n = Symbol.for("react.fragment"), r = Symbol.for("react.strict_mode"), i = Symbol.for("react.profiler"), s = Symbol.for("react.provider"), a = Symbol.for("react.context"), d = Symbol.for("react.server_context"), c = Symbol.for("react.forward_ref"), u = Symbol.for("react.suspense"), m = Symbol.for("react.suspense_list"), T = Symbol.for("react.memo"), E = Symbol.for("react.lazy"), M = Symbol.for("react.offscreen"), S;
+  S = Symbol.for("react.module.reference");
+  function g(l) {
+    if (typeof l == "object" && l !== null) {
+      var P = l.$$typeof;
+      switch (P) {
+        case e:
+          switch (l = l.type, l) {
+            case n:
+            case i:
+            case r:
+            case u:
+            case m:
+              return l;
+            default:
+              switch (l = l && l.$$typeof, l) {
+                case d:
+                case a:
+                case c:
+                case E:
+                case T:
+                case s:
+                  return l;
+                default:
+                  return P;
+              }
+          }
+        case t:
+          return P;
+      }
+    }
+  }
+  return x.ContextConsumer = a, x.ContextProvider = s, x.Element = e, x.ForwardRef = c, x.Fragment = n, x.Lazy = E, x.Memo = T, x.Portal = t, x.Profiler = i, x.StrictMode = r, x.Suspense = u, x.SuspenseList = m, x.isAsyncMode = function() {
+    return !1;
+  }, x.isConcurrentMode = function() {
+    return !1;
+  }, x.isContextConsumer = function(l) {
+    return g(l) === a;
+  }, x.isContextProvider = function(l) {
+    return g(l) === s;
+  }, x.isElement = function(l) {
+    return typeof l == "object" && l !== null && l.$$typeof === e;
+  }, x.isForwardRef = function(l) {
+    return g(l) === c;
+  }, x.isFragment = function(l) {
+    return g(l) === n;
+  }, x.isLazy = function(l) {
+    return g(l) === E;
+  }, x.isMemo = function(l) {
+    return g(l) === T;
+  }, x.isPortal = function(l) {
+    return g(l) === t;
+  }, x.isProfiler = function(l) {
+    return g(l) === i;
+  }, x.isStrictMode = function(l) {
+    return g(l) === r;
+  }, x.isSuspense = function(l) {
+    return g(l) === u;
+  }, x.isSuspenseList = function(l) {
+    return g(l) === m;
+  }, x.isValidElementType = function(l) {
+    return typeof l == "string" || typeof l == "function" || l === n || l === i || l === r || l === u || l === m || l === M || typeof l == "object" && l !== null && (l.$$typeof === E || l.$$typeof === T || l.$$typeof === s || l.$$typeof === a || l.$$typeof === c || l.$$typeof === S || l.getModuleId !== void 0);
+  }, x.typeOf = g, x;
+}
+var R = {};
+/**
+ * @license React
+ * react-is.development.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var Ze;
+function Gt() {
+  return Ze || (Ze = 1, process.env.NODE_ENV !== "production" && function() {
+    var e = Symbol.for("react.element"), t = Symbol.for("react.portal"), n = Symbol.for("react.fragment"), r = Symbol.for("react.strict_mode"), i = Symbol.for("react.profiler"), s = Symbol.for("react.provider"), a = Symbol.for("react.context"), d = Symbol.for("react.server_context"), c = Symbol.for("react.forward_ref"), u = Symbol.for("react.suspense"), m = Symbol.for("react.suspense_list"), T = Symbol.for("react.memo"), E = Symbol.for("react.lazy"), M = Symbol.for("react.offscreen"), S = !1, g = !1, l = !1, P = !1, V = !1, N;
+    N = Symbol.for("react.module.reference");
+    function v(f) {
+      return !!(typeof f == "string" || typeof f == "function" || f === n || f === i || V || f === r || f === u || f === m || P || f === M || S || g || l || typeof f == "object" && f !== null && (f.$$typeof === E || f.$$typeof === T || f.$$typeof === s || f.$$typeof === a || f.$$typeof === c || // This needs to include all possible module reference object
+      // types supported by any Flight configuration anywhere since
+      // we don't know which Flight build this will end up being used
+      // with.
+      f.$$typeof === N || f.getModuleId !== void 0));
+    }
+    function h(f) {
+      if (typeof f == "object" && f !== null) {
+        var te = f.$$typeof;
+        switch (te) {
+          case e:
+            var J = f.type;
+            switch (J) {
+              case n:
+              case i:
+              case r:
+              case u:
+              case m:
+                return J;
+              default:
+                var se = J && J.$$typeof;
+                switch (se) {
+                  case d:
+                  case a:
+                  case c:
+                  case E:
+                  case T:
+                  case s:
+                    return se;
+                  default:
+                    return te;
+                }
+            }
+          case t:
+            return te;
+        }
+      }
+    }
+    var C = a, O = s, k = e, A = c, I = n, $ = E, _ = T, F = t, z = i, U = r, w = u, X = m, B = !1, re = !1;
+    function ie(f) {
+      return B || (B = !0, console.warn("The ReactIs.isAsyncMode() alias has been deprecated, and will be removed in React 18+.")), !1;
+    }
+    function xe(f) {
+      return re || (re = !0, console.warn("The ReactIs.isConcurrentMode() alias has been deprecated, and will be removed in React 18+.")), !1;
+    }
+    function Re(f) {
+      return h(f) === a;
+    }
+    function Te(f) {
+      return h(f) === s;
+    }
+    function G(f) {
+      return typeof f == "object" && f !== null && f.$$typeof === e;
+    }
+    function Z(f) {
+      return h(f) === c;
+    }
+    function Q(f) {
+      return h(f) === n;
+    }
+    function Ce(f) {
+      return h(f) === E;
+    }
+    function ee(f) {
+      return h(f) === T;
+    }
+    function Y(f) {
+      return h(f) === t;
+    }
+    function Se(f) {
+      return h(f) === i;
+    }
+    function $e(f) {
+      return h(f) === r;
+    }
+    function _e(f) {
+      return h(f) === u;
+    }
+    function Pe(f) {
+      return h(f) === m;
+    }
+    R.ContextConsumer = C, R.ContextProvider = O, R.Element = k, R.ForwardRef = A, R.Fragment = I, R.Lazy = $, R.Memo = _, R.Portal = F, R.Profiler = z, R.StrictMode = U, R.Suspense = w, R.SuspenseList = X, R.isAsyncMode = ie, R.isConcurrentMode = xe, R.isContextConsumer = Re, R.isContextProvider = Te, R.isElement = G, R.isForwardRef = Z, R.isFragment = Q, R.isLazy = Ce, R.isMemo = ee, R.isPortal = Y, R.isProfiler = Se, R.isStrictMode = $e, R.isSuspense = _e, R.isSuspenseList = Pe, R.isValidElementType = v, R.typeOf = h;
+  }()), R;
+}
+process.env.NODE_ENV === "production" ? ke.exports = Wt() : ke.exports = Gt();
+var Je = ke.exports;
+const Kt = /^\s*function(?:\s|\s*\/\*.*\*\/\s*)+([^(\s/]*)\s*/;
+function qt(e) {
+  const t = `${e}`.match(Kt);
+  return t && t[1] || "";
+}
+function pt(e, t = "") {
+  return e.displayName || e.name || qt(e) || t;
+}
+function Qe(e, t, n) {
+  const r = pt(t);
+  return e.displayName || (r !== "" ? `${n}(${r})` : n);
+}
+function Xt(e) {
+  if (e != null) {
+    if (typeof e == "string")
+      return e;
+    if (typeof e == "function")
+      return pt(e, "Component");
+    if (typeof e == "object")
+      switch (e.$$typeof) {
+        case Je.ForwardRef:
+          return Qe(e, e.render, "ForwardRef");
+        case Je.Memo:
+          return Qe(e, e.type, "memo");
+        default:
+          return;
+      }
+  }
+}
+const Ht = o.oneOfType([o.func, o.object]), Zt = Ht;
+function Jt(e, t) {
+  typeof e == "function" ? e(t) : e && (e.current = t);
+}
+const Qt = typeof window < "u" ? p.useLayoutEffect : p.useEffect;
+function le(e) {
+  const t = p.useRef(e);
+  return Qt(() => {
+    t.current = e;
+  }), p.useRef((...n) => (
+    // @ts-expect-error hide `this`
+    (0, t.current)(...n)
+  )).current;
+}
+function et(...e) {
+  return p.useMemo(() => e.every((t) => t == null) ? null : (t) => {
+    e.forEach((n) => {
+      Jt(n, t);
+    });
+  }, e);
+}
+const tt = {};
+function en(e, t) {
+  const n = p.useRef(tt);
+  return n.current === tt && (n.current = e(t)), n;
+}
+const tn = [];
+function nn(e) {
+  p.useEffect(e, tn);
+}
+class be {
+  constructor() {
+    this.currentId = 0, this.clear = () => {
+      this.currentId !== 0 && (clearTimeout(this.currentId), this.currentId = 0);
+    }, this.disposeEffect = () => this.clear;
+  }
+  static create() {
+    return new be();
+  }
+  /**
+   * Executes `fn` after `delay`, clearing any previously scheduled call.
+   */
+  start(t, n) {
+    this.clear(), this.currentId = setTimeout(() => {
+      this.currentId = 0, n();
+    }, t);
+  }
+}
+function on() {
+  const e = en(be.create).current;
+  return nn(e.disposeEffect), e;
+}
+let ve = !0, Fe = !1;
+const rn = new be(), sn = {
+  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 an(e) {
+  const {
+    type: t,
+    tagName: n
+  } = e;
+  return !!(n === "INPUT" && sn[t] && !e.readOnly || n === "TEXTAREA" && !e.readOnly || e.isContentEditable);
+}
+function cn(e) {
+  e.metaKey || e.altKey || e.ctrlKey || (ve = !0);
+}
+function Ne() {
+  ve = !1;
+}
+function ln() {
+  this.visibilityState === "hidden" && Fe && (ve = !0);
+}
+function un(e) {
+  e.addEventListener("keydown", cn, !0), e.addEventListener("mousedown", Ne, !0), e.addEventListener("pointerdown", Ne, !0), e.addEventListener("touchstart", Ne, !0), e.addEventListener("visibilitychange", ln, !0);
+}
+function dn(e) {
+  const {
+    target: t
+  } = e;
+  try {
+    return t.matches(":focus-visible");
+  } catch {
+  }
+  return ve || an(t);
+}
+function fn() {
+  const e = p.useCallback((i) => {
+    i != null && un(i.ownerDocument);
+  }, []), t = p.useRef(!1);
+  function n() {
+    return t.current ? (Fe = !0, rn.start(100, () => {
+      Fe = !1;
+    }), t.current = !1, !0) : !1;
+  }
+  function r(i) {
+    return dn(i) ? (t.current = !0, !0) : !1;
+  }
+  return {
+    isFocusVisibleRef: t,
+    onFocus: r,
+    onBlur: n,
+    ref: e
+  };
+}
+function Le(e, t) {
+  const n = b({}, t);
+  return Object.keys(e).forEach((r) => {
+    if (r.toString().match(/^(components|slots)$/))
+      n[r] = b({}, e[r], n[r]);
+    else if (r.toString().match(/^(componentsProps|slotProps)$/)) {
+      const i = e[r] || {}, s = t[r];
+      n[r] = {}, !s || !Object.keys(s) ? n[r] = i : !i || !Object.keys(i) ? n[r] = s : (n[r] = b({}, s), Object.keys(i).forEach((a) => {
+        n[r][a] = Le(i[a], s[a]);
+      }));
+    } else
+      n[r] === void 0 && (n[r] = e[r]);
+  }), n;
+}
+function Ae(e, t, n = void 0) {
+  const r = {};
+  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) => {
+      r[i] = e[i].reduce((s, a) => {
+        if (a) {
+          const d = t(a);
+          d !== "" && s.push(d), n && n[a] && s.push(n[a]);
+        }
+        return s;
+      }, []).join(" ");
+    }
+  ), r;
+}
+function je(e, t, n = "Mui") {
+  const r = {};
+  return t.forEach((i) => {
+    r[i] = ye(e, i, n);
+  }), r;
+}
+/**
+ * @mui/styled-engine v5.15.9
+ *
+ * @license MIT
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+function pn(e, t) {
+  const n = Lt(e, t);
+  return process.env.NODE_ENV !== "production" ? (...r) => {
+    const i = typeof e == "string" ? `"${e}"` : "component";
+    return r.length === 0 ? console.error([`MUI: Seems like you called \`styled(${i})()\` without a \`style\` argument.`, 'You must provide a `styles` argument: `styled("div")(styleYouForgotToPass)`.'].join(`
+`)) : r.some((s) => s === void 0) && console.error(`MUI: the styled(${i})(...args) API requires all its args to be defined.`), n(...r);
+  } : n;
+}
+const mn = (e, t) => {
+  Array.isArray(e.__emotion_styles) && (e.__emotion_styles = t(e.__emotion_styles));
+}, hn = ["sx"], yn = (e) => {
+  var t, n;
+  const r = {
+    systemProps: {},
+    otherProps: {}
+  }, i = (t = e == null || (n = e.theme) == null ? void 0 : n.unstable_sxConfig) != null ? t : Vt;
+  return Object.keys(e).forEach((s) => {
+    i[s] ? r.systemProps[s] = e[s] : r.otherProps[s] = e[s];
+  }), r;
+};
+function bn(e) {
+  const {
+    sx: t
+  } = e, n = K(e, hn), {
+    systemProps: r,
+    otherProps: i
+  } = yn(n);
+  let s;
+  return Array.isArray(t) ? s = [r, ...t] : typeof t == "function" ? s = (...a) => {
+    const d = t(...a);
+    return ct(d) ? b({}, r, d) : r;
+  } : s = b({}, r, t), b({}, i, {
+    sx: s
+  });
+}
+const vn = ["ownerState"], gn = ["variants"], En = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
+function xn(e) {
+  return Object.keys(e).length === 0;
+}
+function Rn(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 me(e) {
+  return e !== "ownerState" && e !== "theme" && e !== "sx" && e !== "as";
+}
+const Tn = lt(), nt = (e) => e && e.charAt(0).toLowerCase() + e.slice(1);
+function ue({
+  defaultTheme: e,
+  theme: t,
+  themeId: n
+}) {
+  return xn(t) ? e : t[n] || t;
+}
+function Cn(e) {
+  return e ? (t, n) => n[e] : null;
+}
+function he(e, t) {
+  let {
+    ownerState: n
+  } = t, r = K(t, vn);
+  const i = typeof e == "function" ? e(b({
+    ownerState: n
+  }, r)) : e;
+  if (Array.isArray(i))
+    return i.flatMap((s) => he(s, b({
+      ownerState: n
+    }, r)));
+  if (i && typeof i == "object" && Array.isArray(i.variants)) {
+    const {
+      variants: s = []
+    } = i;
+    let d = K(i, gn);
+    return s.forEach((c) => {
+      let u = !0;
+      typeof c.props == "function" ? u = c.props(b({
+        ownerState: n
+      }, r)) : Object.keys(c.props).forEach((m) => {
+        (n == null ? void 0 : n[m]) !== c.props[m] && r[m] !== c.props[m] && (u = !1);
+      }), u && (Array.isArray(d) || (d = [d]), d.push(typeof c.style == "function" ? c.style(b({
+        ownerState: n
+      }, r)) : c.style));
+    }), d;
+  }
+  return i;
+}
+function mt(e = {}) {
+  const {
+    themeId: t,
+    defaultTheme: n = Tn,
+    rootShouldForwardProp: r = me,
+    slotShouldForwardProp: i = me
+  } = e, s = (a) => kt(b({}, a, {
+    theme: ue(b({}, a, {
+      defaultTheme: n,
+      themeId: t
+    }))
+  }));
+  return s.__mui_systemSx = !0, (a, d = {}) => {
+    mn(a, (h) => h.filter((C) => !(C != null && C.__mui_systemSx)));
+    const {
+      name: c,
+      slot: u,
+      skipVariantsResolver: m,
+      skipSx: T,
+      // TODO v6: remove `lowercaseFirstLetter()` in the next major release
+      // For more details: https://github.com/mui/material-ui/pull/37908
+      overridesResolver: E = Cn(nt(u))
+    } = d, M = K(d, En), S = m !== void 0 ? m : (
+      // 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
+    ), g = T || !1;
+    let l;
+    process.env.NODE_ENV !== "production" && c && (l = `${c}-${nt(u || "Root")}`);
+    let P = me;
+    u === "Root" || u === "root" ? P = r : u ? P = i : Rn(a) && (P = void 0);
+    const V = pn(a, b({
+      shouldForwardProp: P,
+      label: l
+    }, M)), N = (h) => typeof h == "function" && h.__emotion_real !== h || ct(h) ? (C) => he(h, b({}, C, {
+      theme: ue({
+        theme: C.theme,
+        defaultTheme: n,
+        themeId: t
+      })
+    })) : h, v = (h, ...C) => {
+      let O = N(h);
+      const k = C ? C.map(N) : [];
+      c && E && k.push(($) => {
+        const _ = ue(b({}, $, {
+          defaultTheme: n,
+          themeId: t
+        }));
+        if (!_.components || !_.components[c] || !_.components[c].styleOverrides)
+          return null;
+        const F = _.components[c].styleOverrides, z = {};
+        return Object.entries(F).forEach(([U, w]) => {
+          z[U] = he(w, b({}, $, {
+            theme: _
+          }));
+        }), E($, z);
+      }), c && !S && k.push(($) => {
+        var _;
+        const F = ue(b({}, $, {
+          defaultTheme: n,
+          themeId: t
+        })), z = F == null || (_ = F.components) == null || (_ = _[c]) == null ? void 0 : _.variants;
+        return he({
+          variants: z
+        }, b({}, $, {
+          theme: F
+        }));
+      }), g || k.push(s);
+      const A = k.length - C.length;
+      if (Array.isArray(h) && A > 0) {
+        const $ = new Array(A).fill("");
+        O = [...h, ...$], O.raw = [...h.raw, ...$];
+      }
+      const I = V(O, ...k);
+      if (process.env.NODE_ENV !== "production") {
+        let $;
+        c && ($ = `${c}${W(u || "")}`), $ === void 0 && ($ = `Styled(${Xt(a)})`), I.displayName = $;
+      }
+      return a.muiName && (I.muiName = a.muiName), I;
+    };
+    return V.withConfig && (v.withConfig = V.withConfig), v;
+  };
+}
+const Sn = mt();
+function $n(e) {
+  const {
+    theme: t,
+    name: n,
+    props: r
+  } = e;
+  return !t || !t.components || !t.components[n] || !t.components[n].defaultProps ? r : Le(t.components[n].defaultProps, r);
+}
+function ht({
+  props: e,
+  name: t,
+  defaultTheme: n,
+  themeId: r
+}) {
+  let i = Ft(n);
+  return r && (i = i[r] || i), $n({
+    theme: i,
+    name: t,
+    props: e
+  });
+}
+const _n = ["component", "direction", "spacing", "divider", "children", "className", "useFlexGap"], Pn = lt(), Mn = Sn("div", {
+  name: "MuiStack",
+  slot: "Root",
+  overridesResolver: (e, t) => t.root
+});
+function On(e) {
+  return ht({
+    props: e,
+    name: "MuiStack",
+    defaultTheme: Pn
+  });
+}
+function In(e, t) {
+  const n = p.Children.toArray(e).filter(Boolean);
+  return n.reduce((r, i, s) => (r.push(i), s < n.length - 1 && r.push(/* @__PURE__ */ p.cloneElement(t, {
+    key: `separator-${s}`
+  })), r), []);
+}
+const Nn = (e) => ({
+  row: "Left",
+  "row-reverse": "Right",
+  column: "Top",
+  "column-reverse": "Bottom"
+})[e], Vn = ({
+  ownerState: e,
+  theme: t
+}) => {
+  let n = b({
+    display: "flex",
+    flexDirection: "column"
+  }, qe({
+    theme: t
+  }, Ie({
+    values: e.direction,
+    breakpoints: t.breakpoints.values
+  }), (r) => ({
+    flexDirection: r
+  })));
+  if (e.spacing) {
+    const r = zt(t), i = Object.keys(t.breakpoints.values).reduce((c, u) => ((typeof e.spacing == "object" && e.spacing[u] != null || typeof e.direction == "object" && e.direction[u] != null) && (c[u] = !0), c), {}), s = Ie({
+      values: e.direction,
+      base: i
+    }), a = Ie({
+      values: e.spacing,
+      base: i
+    });
+    typeof s == "object" && Object.keys(s).forEach((c, u, m) => {
+      if (!s[c]) {
+        const E = u > 0 ? s[m[u - 1]] : "column";
+        s[c] = E;
+      }
+    }), n = Bt(n, qe({
+      theme: t
+    }, a, (c, u) => e.useFlexGap ? {
+      gap: Xe(r, c)
+    } : {
+      // The useFlexGap={false} implement relies on each child to give up control of the margin.
+      // We need to reset the margin to avoid double spacing.
+      "& > :not(style):not(style)": {
+        margin: 0
+      },
+      "& > :not(style) ~ :not(style)": {
+        [`margin${Nn(u ? s[u] : e.direction)}`]: Xe(r, c)
+      }
+    }));
+  }
+  return n = wt(t.breakpoints, n), n;
+};
+function kn(e = {}) {
+  const {
+    // This will allow adding custom styled fn (for example for custom sx style function)
+    createStyledComponent: t = Mn,
+    useThemeProps: n = On,
+    componentName: r = "MuiStack"
+  } = e, i = () => Ae({
+    root: ["root"]
+  }, (c) => ye(r, c), {}), s = t(Vn), a = /* @__PURE__ */ p.forwardRef(function(c, u) {
+    const m = n(c), T = bn(m), {
+      component: E = "div",
+      direction: M = "column",
+      spacing: S = 0,
+      divider: g,
+      children: l,
+      className: P,
+      useFlexGap: V = !1
+    } = T, N = K(T, _n), v = {
+      direction: M,
+      spacing: S,
+      useFlexGap: V
+    }, h = i();
+    return /* @__PURE__ */ L(s, b({
+      as: E,
+      ownerState: v,
+      ref: u,
+      className: D(h.root, P)
+    }, N, {
+      children: g ? In(l, g) : l
+    }));
+  });
+  return process.env.NODE_ENV !== "production" && (a.propTypes = {
+    children: o.node,
+    direction: o.oneOfType([o.oneOf(["column-reverse", "column", "row-reverse", "row"]), o.arrayOf(o.oneOf(["column-reverse", "column", "row-reverse", "row"])), o.object]),
+    divider: o.node,
+    spacing: o.oneOfType([o.arrayOf(o.oneOfType([o.number, o.string])), o.number, o.object, o.string]),
+    sx: o.oneOfType([o.arrayOf(o.oneOfType([o.func, o.object, o.bool])), o.func, o.object])
+  }), a;
+}
+const yt = (e) => me(e) && e !== "classes", q = mt({
+  themeId: ut,
+  defaultTheme: dt,
+  rootShouldForwardProp: yt
+});
+function ge({
+  props: e,
+  name: t
+}) {
+  return ht({
+    props: e,
+    name: t,
+    defaultTheme: dt,
+    themeId: ut
+  });
+}
+function ze(e, t) {
+  return ze = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(r, i) {
+    return r.__proto__ = i, r;
+  }, ze(e, t);
+}
+function Fn(e, t) {
+  e.prototype = Object.create(t.prototype), e.prototype.constructor = e, ze(e, t);
+}
+const ot = oe.createContext(null);
+function zn(e) {
+  if (e === void 0)
+    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  return e;
+}
+function Ue(e, t) {
+  var n = function(s) {
+    return t && fe(s) ? t(s) : s;
+  }, r = /* @__PURE__ */ Object.create(null);
+  return e && Nt.map(e, function(i) {
+    return i;
+  }).forEach(function(i) {
+    r[i.key] = n(i);
+  }), r;
+}
+function Bn(e, t) {
+  e = e || {}, t = t || {};
+  function n(m) {
+    return m in t ? t[m] : e[m];
+  }
+  var r = /* @__PURE__ */ Object.create(null), i = [];
+  for (var s in e)
+    s in t ? i.length && (r[s] = i, i = []) : i.push(s);
+  var a, d = {};
+  for (var c in t) {
+    if (r[c])
+      for (a = 0; a < r[c].length; a++) {
+        var u = r[c][a];
+        d[r[c][a]] = n(u);
+      }
+    d[c] = n(c);
+  }
+  for (a = 0; a < i.length; a++)
+    d[i[a]] = n(i[a]);
+  return d;
+}
+function H(e, t, n) {
+  return n[t] != null ? n[t] : e.props[t];
+}
+function wn(e, t) {
+  return Ue(e.children, function(n) {
+    return pe(n, {
+      onExited: t.bind(null, n),
+      in: !0,
+      appear: H(n, "appear", e),
+      enter: H(n, "enter", e),
+      exit: H(n, "exit", e)
+    });
+  });
+}
+function Dn(e, t, n) {
+  var r = Ue(e.children), i = Bn(t, r);
+  return Object.keys(i).forEach(function(s) {
+    var a = i[s];
+    if (fe(a)) {
+      var d = s in t, c = s in r, u = t[s], m = fe(u) && !u.props.in;
+      c && (!d || m) ? i[s] = pe(a, {
+        onExited: n.bind(null, a),
+        in: !0,
+        exit: H(a, "exit", e),
+        enter: H(a, "enter", e)
+      }) : !c && d && !m ? i[s] = pe(a, {
+        in: !1
+      }) : c && d && fe(u) && (i[s] = pe(a, {
+        onExited: n.bind(null, a),
+        in: u.props.in,
+        exit: H(a, "exit", e),
+        enter: H(a, "enter", e)
+      }));
+    }
+  }), i;
+}
+var Ln = Object.values || function(e) {
+  return Object.keys(e).map(function(t) {
+    return e[t];
+  });
+}, An = {
+  component: "div",
+  childFactory: function(t) {
+    return t;
+  }
+}, Ye = /* @__PURE__ */ function(e) {
+  Fn(t, e);
+  function t(r, i) {
+    var s;
+    s = e.call(this, r, i) || this;
+    var a = s.handleExited.bind(zn(s));
+    return s.state = {
+      contextValue: {
+        isMounting: !0
+      },
+      handleExited: a,
+      firstRender: !0
+    }, s;
+  }
+  var n = t.prototype;
+  return n.componentDidMount = function() {
+    this.mounted = !0, this.setState({
+      contextValue: {
+        isMounting: !1
+      }
+    });
+  }, n.componentWillUnmount = function() {
+    this.mounted = !1;
+  }, t.getDerivedStateFromProps = function(i, s) {
+    var a = s.children, d = s.handleExited, c = s.firstRender;
+    return {
+      children: c ? wn(i, d) : Dn(i, a, d),
+      firstRender: !1
+    };
+  }, n.handleExited = function(i, s) {
+    var a = Ue(this.props.children);
+    i.key in a || (i.props.onExited && i.props.onExited(s), this.mounted && this.setState(function(d) {
+      var c = b({}, d.children);
+      return delete c[i.key], {
+        children: c
+      };
+    }));
+  }, n.render = function() {
+    var i = this.props, s = i.component, a = i.childFactory, d = K(i, ["component", "childFactory"]), c = this.state.contextValue, u = Ln(this.state.children).map(a);
+    return delete d.appear, delete d.enter, delete d.exit, s === null ? /* @__PURE__ */ oe.createElement(ot.Provider, {
+      value: c
+    }, u) : /* @__PURE__ */ oe.createElement(ot.Provider, {
+      value: c
+    }, /* @__PURE__ */ oe.createElement(s, d, u));
+  }, t;
+}(oe.Component);
+Ye.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * `<TransitionGroup>` renders a `<div>` by default. You can change this
+   * behavior by providing a `component` prop.
+   * If you use React v16+ and would like to avoid a wrapping `<div>` element
+   * you can pass in `component={null}`. This is useful if the wrapping div
+   * borks your css styles.
+   */
+  component: o.any,
+  /**
+   * A set of `<Transition>` components, that are toggled `in` and out as they
+   * leave. the `<TransitionGroup>` will inject specific transition props, so
+   * remember to spread them through if you are wrapping the `<Transition>` as
+   * with our `<Fade>` example.
+   *
+   * While this component is meant for multiple `Transition` or `CSSTransition`
+   * children, sometimes you may want to have a single transition child with
+   * content that you want to be transitioned out and in when you change it
+   * (e.g. routes, images etc.) In that case you can change the `key` prop of
+   * the transition child as you change its content, this will cause
+   * `TransitionGroup` to transition the child out and back in.
+   */
+  children: o.node,
+  /**
+   * A convenience prop that enables or disables appear animations
+   * for all children. Note that specifying this will override any defaults set
+   * on individual children Transitions.
+   */
+  appear: o.bool,
+  /**
+   * A convenience prop that enables or disables enter animations
+   * for all children. Note that specifying this will override any defaults set
+   * on individual children Transitions.
+   */
+  enter: o.bool,
+  /**
+   * A convenience prop that enables or disables exit animations
+   * for all children. Note that specifying this will override any defaults set
+   * on individual children Transitions.
+   */
+  exit: o.bool,
+  /**
+   * You may need to apply reactive updates to a child as it is exiting.
+   * This is generally done by using `cloneElement` however in the case of an exiting
+   * child the element has already been removed and not accessible to the consumer.
+   *
+   * If you do need to update a child as it leaves you can provide a `childFactory`
+   * to wrap every child, even the ones that are leaving.
+   *
+   * @type Function(child: ReactElement) -> ReactElement
+   */
+  childFactory: o.func
+} : {};
+Ye.defaultProps = An;
+const jn = Ye;
+function bt(e) {
+  const {
+    className: t,
+    classes: n,
+    pulsate: r = !1,
+    rippleX: i,
+    rippleY: s,
+    rippleSize: a,
+    in: d,
+    onExited: c,
+    timeout: u
+  } = e, [m, T] = p.useState(!1), E = D(t, n.ripple, n.rippleVisible, r && n.ripplePulsate), M = {
+    width: a,
+    height: a,
+    top: -(a / 2) + s,
+    left: -(a / 2) + i
+  }, S = D(n.child, m && n.childLeaving, r && n.childPulsate);
+  return !d && !m && T(!0), p.useEffect(() => {
+    if (!d && c != null) {
+      const g = setTimeout(c, u);
+      return () => {
+        clearTimeout(g);
+      };
+    }
+  }, [c, d, u]), /* @__PURE__ */ L("span", {
+    className: E,
+    style: M,
+    children: /* @__PURE__ */ L("span", {
+      className: S
+    })
+  });
+}
+process.env.NODE_ENV !== "production" && (bt.propTypes = {
+  /**
+   * Override or extend the styles applied to the component.
+   * See [CSS API](#css) below for more details.
+   */
+  classes: o.object.isRequired,
+  className: o.string,
+  /**
+   * @ignore - injected from TransitionGroup
+   */
+  in: o.bool,
+  /**
+   * @ignore - injected from TransitionGroup
+   */
+  onExited: o.func,
+  /**
+   * If `true`, the ripple pulsates, typically indicating the keyboard focus state of an element.
+   */
+  pulsate: o.bool,
+  /**
+   * Diameter of the ripple.
+   */
+  rippleSize: o.number,
+  /**
+   * Horizontal position of the ripple center.
+   */
+  rippleX: o.number,
+  /**
+   * Vertical position of the ripple center.
+   */
+  rippleY: o.number,
+  /**
+   * exit delay
+   */
+  timeout: o.number.isRequired
+});
+const j = je("MuiTouchRipple", ["root", "ripple", "rippleVisible", "ripplePulsate", "child", "childLeaving", "childPulsate"]), Un = ["center", "classes", "className"];
+let Ee = (e) => e, rt, it, st, at;
+const Be = 550, Yn = 80, Wn = De(rt || (rt = Ee`
+  0% {
+    transform: scale(0);
+    opacity: 0.1;
+  }
+
+  100% {
+    transform: scale(1);
+    opacity: 0.3;
+  }
+`)), Gn = De(it || (it = Ee`
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+`)), Kn = De(st || (st = Ee`
+  0% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(0.92);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+`)), qn = q("span", {
+  name: "MuiTouchRipple",
+  slot: "Root"
+})({
+  overflow: "hidden",
+  pointerEvents: "none",
+  position: "absolute",
+  zIndex: 0,
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  borderRadius: "inherit"
+}), Xn = q(bt, {
+  name: "MuiTouchRipple",
+  slot: "Ripple"
+})(at || (at = Ee`
+  opacity: 0;
+  position: absolute;
+
+  &.${0} {
+    opacity: 0.3;
+    transform: scale(1);
+    animation-name: ${0};
+    animation-duration: ${0}ms;
+    animation-timing-function: ${0};
+  }
+
+  &.${0} {
+    animation-duration: ${0}ms;
+  }
+
+  & .${0} {
+    opacity: 1;
+    display: block;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background-color: currentColor;
+  }
+
+  & .${0} {
+    opacity: 0;
+    animation-name: ${0};
+    animation-duration: ${0}ms;
+    animation-timing-function: ${0};
+  }
+
+  & .${0} {
+    position: absolute;
+    /* @noflip */
+    left: 0px;
+    top: 0;
+    animation-name: ${0};
+    animation-duration: 2500ms;
+    animation-timing-function: ${0};
+    animation-iteration-count: infinite;
+    animation-delay: 200ms;
+  }
+`), j.rippleVisible, Wn, Be, ({
+  theme: e
+}) => e.transitions.easing.easeInOut, j.ripplePulsate, ({
+  theme: e
+}) => e.transitions.duration.shorter, j.child, j.childLeaving, Gn, Be, ({
+  theme: e
+}) => e.transitions.easing.easeInOut, j.childPulsate, Kn, ({
+  theme: e
+}) => e.transitions.easing.easeInOut), vt = /* @__PURE__ */ p.forwardRef(function(t, n) {
+  const r = ge({
+    props: t,
+    name: "MuiTouchRipple"
+  }), {
+    center: i = !1,
+    classes: s = {},
+    className: a
+  } = r, d = K(r, Un), [c, u] = p.useState([]), m = p.useRef(0), T = p.useRef(null);
+  p.useEffect(() => {
+    T.current && (T.current(), T.current = null);
+  }, [c]);
+  const E = p.useRef(!1), M = on(), S = p.useRef(null), g = p.useRef(null), l = p.useCallback((v) => {
+    const {
+      pulsate: h,
+      rippleX: C,
+      rippleY: O,
+      rippleSize: k,
+      cb: A
+    } = v;
+    u((I) => [...I, /* @__PURE__ */ L(Xn, {
+      classes: {
+        ripple: D(s.ripple, j.ripple),
+        rippleVisible: D(s.rippleVisible, j.rippleVisible),
+        ripplePulsate: D(s.ripplePulsate, j.ripplePulsate),
+        child: D(s.child, j.child),
+        childLeaving: D(s.childLeaving, j.childLeaving),
+        childPulsate: D(s.childPulsate, j.childPulsate)
+      },
+      timeout: Be,
+      pulsate: h,
+      rippleX: C,
+      rippleY: O,
+      rippleSize: k
+    }, m.current)]), m.current += 1, T.current = A;
+  }, [s]), P = p.useCallback((v = {}, h = {}, C = () => {
+  }) => {
+    const {
+      pulsate: O = !1,
+      center: k = i || h.pulsate,
+      fakeElement: A = !1
+      // For test purposes
+    } = h;
+    if ((v == null ? void 0 : v.type) === "mousedown" && E.current) {
+      E.current = !1;
+      return;
+    }
+    (v == null ? void 0 : v.type) === "touchstart" && (E.current = !0);
+    const I = A ? null : g.current, $ = I ? I.getBoundingClientRect() : {
+      width: 0,
+      height: 0,
+      left: 0,
+      top: 0
+    };
+    let _, F, z;
+    if (k || v === void 0 || v.clientX === 0 && v.clientY === 0 || !v.clientX && !v.touches)
+      _ = Math.round($.width / 2), F = Math.round($.height / 2);
+    else {
+      const {
+        clientX: U,
+        clientY: w
+      } = v.touches && v.touches.length > 0 ? v.touches[0] : v;
+      _ = Math.round(U - $.left), F = Math.round(w - $.top);
+    }
+    if (k)
+      z = Math.sqrt((2 * $.width ** 2 + $.height ** 2) / 3), z % 2 === 0 && (z += 1);
+    else {
+      const U = Math.max(Math.abs((I ? I.clientWidth : 0) - _), _) * 2 + 2, w = Math.max(Math.abs((I ? I.clientHeight : 0) - F), F) * 2 + 2;
+      z = Math.sqrt(U ** 2 + w ** 2);
+    }
+    v != null && v.touches ? S.current === null && (S.current = () => {
+      l({
+        pulsate: O,
+        rippleX: _,
+        rippleY: F,
+        rippleSize: z,
+        cb: C
+      });
+    }, M.start(Yn, () => {
+      S.current && (S.current(), S.current = null);
+    })) : l({
+      pulsate: O,
+      rippleX: _,
+      rippleY: F,
+      rippleSize: z,
+      cb: C
+    });
+  }, [i, l, M]), V = p.useCallback(() => {
+    P({}, {
+      pulsate: !0
+    });
+  }, [P]), N = p.useCallback((v, h) => {
+    if (M.clear(), (v == null ? void 0 : v.type) === "touchend" && S.current) {
+      S.current(), S.current = null, M.start(0, () => {
+        N(v, h);
+      });
+      return;
+    }
+    S.current = null, u((C) => C.length > 0 ? C.slice(1) : C), T.current = h;
+  }, [M]);
+  return p.useImperativeHandle(n, () => ({
+    pulsate: V,
+    start: P,
+    stop: N
+  }), [V, P, N]), /* @__PURE__ */ L(qn, b({
+    className: D(j.root, s.root, a),
+    ref: g
+  }, d, {
+    children: /* @__PURE__ */ L(jn, {
+      component: null,
+      exit: !0,
+      children: c
+    })
+  }));
+});
+process.env.NODE_ENV !== "production" && (vt.propTypes = {
+  /**
+   * If `true`, the ripple starts at the center of the component
+   * rather than at the point of interaction.
+   */
+  center: o.bool,
+  /**
+   * Override or extend the styles applied to the component.
+   * See [CSS API](#css) below for more details.
+   */
+  classes: o.object,
+  /**
+   * @ignore
+   */
+  className: o.string
+});
+const Hn = vt;
+function Zn(e) {
+  return ye("MuiButtonBase", e);
+}
+const Jn = je("MuiButtonBase", ["root", "disabled", "focusVisible"]), Qn = ["action", "centerRipple", "children", "className", "component", "disabled", "disableRipple", "disableTouchRipple", "focusRipple", "focusVisibleClassName", "LinkComponent", "onBlur", "onClick", "onContextMenu", "onDragLeave", "onFocus", "onFocusVisible", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseLeave", "onMouseUp", "onTouchEnd", "onTouchMove", "onTouchStart", "tabIndex", "TouchRippleProps", "touchRippleRef", "type"], eo = (e) => {
+  const {
+    disabled: t,
+    focusVisible: n,
+    focusVisibleClassName: r,
+    classes: i
+  } = e, a = Ae({
+    root: ["root", t && "disabled", n && "focusVisible"]
+  }, Zn, i);
+  return n && r && (a.root += ` ${r}`), a;
+}, to = q("button", {
+  name: "MuiButtonBase",
+  slot: "Root",
+  overridesResolver: (e, t) => t.root
+})({
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  position: "relative",
+  boxSizing: "border-box",
+  WebkitTapHighlightColor: "transparent",
+  backgroundColor: "transparent",
+  // Reset default value
+  // We disable the focus ring for mouse, touch and keyboard users.
+  outline: 0,
+  border: 0,
+  margin: 0,
+  // Remove the margin in Safari
+  borderRadius: 0,
+  padding: 0,
+  // Remove the padding in Firefox
+  cursor: "pointer",
+  userSelect: "none",
+  verticalAlign: "middle",
+  MozAppearance: "none",
+  // Reset
+  WebkitAppearance: "none",
+  // Reset
+  textDecoration: "none",
+  // So we take precedent over the style of a native <a /> element.
+  color: "inherit",
+  "&::-moz-focus-inner": {
+    borderStyle: "none"
+    // Remove Firefox dotted outline.
+  },
+  [`&.${Jn.disabled}`]: {
+    pointerEvents: "none",
+    // Disable link interactions
+    cursor: "default"
+  },
+  "@media print": {
+    colorAdjust: "exact"
+  }
+}), gt = /* @__PURE__ */ p.forwardRef(function(t, n) {
+  const r = ge({
+    props: t,
+    name: "MuiButtonBase"
+  }), {
+    action: i,
+    centerRipple: s = !1,
+    children: a,
+    className: d,
+    component: c = "button",
+    disabled: u = !1,
+    disableRipple: m = !1,
+    disableTouchRipple: T = !1,
+    focusRipple: E = !1,
+    LinkComponent: M = "a",
+    onBlur: S,
+    onClick: g,
+    onContextMenu: l,
+    onDragLeave: P,
+    onFocus: V,
+    onFocusVisible: N,
+    onKeyDown: v,
+    onKeyUp: h,
+    onMouseDown: C,
+    onMouseLeave: O,
+    onMouseUp: k,
+    onTouchEnd: A,
+    onTouchMove: I,
+    onTouchStart: $,
+    tabIndex: _ = 0,
+    TouchRippleProps: F,
+    touchRippleRef: z,
+    type: U
+  } = r, w = K(r, Qn), X = p.useRef(null), B = p.useRef(null), re = et(B, z), {
+    isFocusVisibleRef: ie,
+    onFocus: xe,
+    onBlur: Re,
+    ref: Te
+  } = fn(), [G, Z] = p.useState(!1);
+  u && G && Z(!1), p.useImperativeHandle(i, () => ({
+    focusVisible: () => {
+      Z(!0), X.current.focus();
+    }
+  }), []);
+  const [Q, Ce] = p.useState(!1);
+  p.useEffect(() => {
+    Ce(!0);
+  }, []);
+  const ee = Q && !m && !u;
+  p.useEffect(() => {
+    G && E && !m && Q && B.current.pulsate();
+  }, [m, E, G, Q]);
+  function Y(y, Ge, It = T) {
+    return le((Ke) => (Ge && Ge(Ke), !It && B.current && B.current[y](Ke), !0));
+  }
+  const Se = Y("start", C), $e = Y("stop", l), _e = Y("stop", P), Pe = Y("stop", k), f = Y("stop", (y) => {
+    G && y.preventDefault(), O && O(y);
+  }), te = Y("start", $), J = Y("stop", A), se = Y("stop", I), St = Y("stop", (y) => {
+    Re(y), ie.current === !1 && Z(!1), S && S(y);
+  }, !1), $t = le((y) => {
+    X.current || (X.current = y.currentTarget), xe(y), ie.current === !0 && (Z(!0), N && N(y)), V && V(y);
+  }), Me = () => {
+    const y = X.current;
+    return c && c !== "button" && !(y.tagName === "A" && y.href);
+  }, Oe = p.useRef(!1), _t = le((y) => {
+    E && !Oe.current && G && B.current && y.key === " " && (Oe.current = !0, B.current.stop(y, () => {
+      B.current.start(y);
+    })), y.target === y.currentTarget && Me() && y.key === " " && y.preventDefault(), v && v(y), y.target === y.currentTarget && Me() && y.key === "Enter" && !u && (y.preventDefault(), g && g(y));
+  }), Pt = le((y) => {
+    E && y.key === " " && B.current && G && !y.defaultPrevented && (Oe.current = !1, B.current.stop(y, () => {
+      B.current.pulsate(y);
+    })), h && h(y), g && y.target === y.currentTarget && Me() && y.key === " " && !y.defaultPrevented && g(y);
+  });
+  let ae = c;
+  ae === "button" && (w.href || w.to) && (ae = M);
+  const ne = {};
+  ae === "button" ? (ne.type = U === void 0 ? "button" : U, ne.disabled = u) : (!w.href && !w.to && (ne.role = "button"), u && (ne["aria-disabled"] = u));
+  const Mt = et(n, Te, X);
+  process.env.NODE_ENV !== "production" && p.useEffect(() => {
+    ee && !B.current && console.error(["MUI: The `component` prop provided to ButtonBase is invalid.", "Please make sure the children prop is rendered in this custom component."].join(`
+`));
+  }, [ee]);
+  const We = b({}, r, {
+    centerRipple: s,
+    component: c,
+    disabled: u,
+    disableRipple: m,
+    disableTouchRipple: T,
+    focusRipple: E,
+    tabIndex: _,
+    focusVisible: G
+  }), Ot = eo(We);
+  return /* @__PURE__ */ we(to, b({
+    as: ae,
+    className: D(Ot.root, d),
+    ownerState: We,
+    onBlur: St,
+    onClick: g,
+    onContextMenu: $e,
+    onFocus: $t,
+    onKeyDown: _t,
+    onKeyUp: Pt,
+    onMouseDown: Se,
+    onMouseLeave: f,
+    onMouseUp: Pe,
+    onDragLeave: _e,
+    onTouchEnd: J,
+    onTouchMove: se,
+    onTouchStart: te,
+    ref: Mt,
+    tabIndex: u ? -1 : _,
+    type: U
+  }, ne, w, {
+    children: [a, ee ? (
+      /* TouchRipple is only needed client-side, x2 boost on the server. */
+      /* @__PURE__ */ L(Hn, b({
+        ref: re,
+        center: s
+      }, F))
+    ) : null]
+  }));
+});
+process.env.NODE_ENV !== "production" && (gt.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * A ref for imperative actions.
+   * It currently only supports `focusVisible()` action.
+   */
+  action: Zt,
+  /**
+   * If `true`, the ripples are centered.
+   * They won't start at the cursor interaction position.
+   * @default false
+   */
+  centerRipple: o.bool,
+  /**
+   * The content of the component.
+   */
+  children: o.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: o.object,
+  /**
+   * @ignore
+   */
+  className: o.string,
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: Yt,
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled: o.bool,
+  /**
+   * If `true`, the ripple effect is disabled.
+   *
+   * ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure
+   * to highlight the element by applying separate styles with the `.Mui-focusVisible` class.
+   * @default false
+   */
+  disableRipple: o.bool,
+  /**
+   * If `true`, the touch ripple effect is disabled.
+   * @default false
+   */
+  disableTouchRipple: o.bool,
+  /**
+   * If `true`, the base button will have a keyboard focus ripple.
+   * @default false
+   */
+  focusRipple: 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,
+  /**
+   * @ignore
+   */
+  href: o.any,
+  /**
+   * The component used to render a link when the `href` prop is provided.
+   * @default 'a'
+   */
+  LinkComponent: o.elementType,
+  /**
+   * @ignore
+   */
+  onBlur: o.func,
+  /**
+   * @ignore
+   */
+  onClick: o.func,
+  /**
+   * @ignore
+   */
+  onContextMenu: o.func,
+  /**
+   * @ignore
+   */
+  onDragLeave: o.func,
+  /**
+   * @ignore
+   */
+  onFocus: o.func,
+  /**
+   * Callback fired when the component is focused with a keyboard.
+   * We trigger a `onFocus` callback too.
+   */
+  onFocusVisible: o.func,
+  /**
+   * @ignore
+   */
+  onKeyDown: o.func,
+  /**
+   * @ignore
+   */
+  onKeyUp: o.func,
+  /**
+   * @ignore
+   */
+  onMouseDown: o.func,
+  /**
+   * @ignore
+   */
+  onMouseLeave: o.func,
+  /**
+   * @ignore
+   */
+  onMouseUp: o.func,
+  /**
+   * @ignore
+   */
+  onTouchEnd: o.func,
+  /**
+   * @ignore
+   */
+  onTouchMove: o.func,
+  /**
+   * @ignore
+   */
+  onTouchStart: o.func,
+  /**
+   * 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,
+  /**
+   * Props applied to the `TouchRipple` element.
+   */
+  TouchRippleProps: o.object,
+  /**
+   * A ref that points to the `TouchRipple` element.
+   */
+  touchRippleRef: o.oneOfType([o.func, o.shape({
+    current: o.shape({
+      pulsate: o.func.isRequired,
+      start: o.func.isRequired,
+      stop: o.func.isRequired
+    })
+  })]),
+  /**
+   * @ignore
+   */
+  type: o.oneOfType([o.oneOf(["button", "reset", "submit"]), o.string])
+});
+const no = gt;
+function oo(e) {
+  return ye("MuiButton", e);
+}
+const ro = je("MuiButton", ["root", "text", "textInherit", "textPrimary", "textSecondary", "textSuccess", "textError", "textInfo", "textWarning", "outlined", "outlinedInherit", "outlinedPrimary", "outlinedSecondary", "outlinedSuccess", "outlinedError", "outlinedInfo", "outlinedWarning", "contained", "containedInherit", "containedPrimary", "containedSecondary", "containedSuccess", "containedError", "containedInfo", "containedWarning", "disableElevation", "focusVisible", "disabled", "colorInherit", "textSizeSmall", "textSizeMedium", "textSizeLarge", "outlinedSizeSmall", "outlinedSizeMedium", "outlinedSizeLarge", "containedSizeSmall", "containedSizeMedium", "containedSizeLarge", "sizeMedium", "sizeSmall", "sizeLarge", "fullWidth", "startIcon", "endIcon", "iconSizeSmall", "iconSizeMedium", "iconSizeLarge"]), de = ro, Et = /* @__PURE__ */ p.createContext({});
+process.env.NODE_ENV !== "production" && (Et.displayName = "ButtonGroupContext");
+const io = Et, xt = /* @__PURE__ */ p.createContext(void 0);
+process.env.NODE_ENV !== "production" && (xt.displayName = "ButtonGroupButtonContext");
+const so = xt, ao = ["children", "color", "component", "className", "disabled", "disableElevation", "disableFocusRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"], co = (e) => {
+  const {
+    color: t,
+    disableElevation: n,
+    fullWidth: r,
+    size: i,
+    variant: s,
+    classes: a
+  } = e, d = {
+    root: ["root", s, `${s}${W(t)}`, `size${W(i)}`, `${s}Size${W(i)}`, t === "inherit" && "colorInherit", n && "disableElevation", r && "fullWidth"],
+    label: ["label"],
+    startIcon: ["startIcon", `iconSize${W(i)}`],
+    endIcon: ["endIcon", `iconSize${W(i)}`]
+  }, c = Ae(d, oo, a);
+  return b({}, a, c);
+}, Rt = (e) => b({}, e.size === "small" && {
+  "& > *:nth-of-type(1)": {
+    fontSize: 18
+  }
+}, e.size === "medium" && {
+  "& > *:nth-of-type(1)": {
+    fontSize: 20
+  }
+}, e.size === "large" && {
+  "& > *:nth-of-type(1)": {
+    fontSize: 22
+  }
+}), lo = q(no, {
+  shouldForwardProp: (e) => yt(e) || e === "classes",
+  name: "MuiButton",
+  slot: "Root",
+  overridesResolver: (e, t) => {
+    const {
+      ownerState: n
+    } = e;
+    return [t.root, t[n.variant], t[`${n.variant}${W(n.color)}`], t[`size${W(n.size)}`], t[`${n.variant}Size${W(n.size)}`], n.color === "inherit" && t.colorInherit, n.disableElevation && t.disableElevation, n.fullWidth && t.fullWidth];
+  }
+})(({
+  theme: e,
+  ownerState: t
+}) => {
+  var n, r;
+  const i = e.palette.mode === "light" ? e.palette.grey[300] : e.palette.grey[800], s = e.palette.mode === "light" ? e.palette.grey.A100 : e.palette.grey[700];
+  return b({}, e.typography.button, {
+    minWidth: 64,
+    padding: "6px 16px",
+    borderRadius: (e.vars || e).shape.borderRadius,
+    transition: e.transitions.create(["background-color", "box-shadow", "border-color", "color"], {
+      duration: e.transitions.duration.short
+    }),
+    "&:hover": b({
+      textDecoration: "none",
+      backgroundColor: e.vars ? `rgba(${e.vars.palette.text.primaryChannel} / ${e.vars.palette.action.hoverOpacity})` : ce(e.palette.text.primary, e.palette.action.hoverOpacity),
+      // Reset on touch devices, it doesn't add specificity
+      "@media (hover: none)": {
+        backgroundColor: "transparent"
+      }
+    }, t.variant === "text" && t.color !== "inherit" && {
+      backgroundColor: e.vars ? `rgba(${e.vars.palette[t.color].mainChannel} / ${e.vars.palette.action.hoverOpacity})` : ce(e.palette[t.color].main, e.palette.action.hoverOpacity),
+      // Reset on touch devices, it doesn't add specificity
+      "@media (hover: none)": {
+        backgroundColor: "transparent"
+      }
+    }, t.variant === "outlined" && t.color !== "inherit" && {
+      border: `1px solid ${(e.vars || e).palette[t.color].main}`,
+      backgroundColor: e.vars ? `rgba(${e.vars.palette[t.color].mainChannel} / ${e.vars.palette.action.hoverOpacity})` : ce(e.palette[t.color].main, e.palette.action.hoverOpacity),
+      // Reset on touch devices, it doesn't add specificity
+      "@media (hover: none)": {
+        backgroundColor: "transparent"
+      }
+    }, t.variant === "contained" && {
+      backgroundColor: e.vars ? e.vars.palette.Button.inheritContainedHoverBg : s,
+      boxShadow: (e.vars || e).shadows[4],
+      // Reset on touch devices, it doesn't add specificity
+      "@media (hover: none)": {
+        boxShadow: (e.vars || e).shadows[2],
+        backgroundColor: (e.vars || e).palette.grey[300]
+      }
+    }, t.variant === "contained" && t.color !== "inherit" && {
+      backgroundColor: (e.vars || e).palette[t.color].dark,
+      // Reset on touch devices, it doesn't add specificity
+      "@media (hover: none)": {
+        backgroundColor: (e.vars || e).palette[t.color].main
+      }
+    }),
+    "&:active": b({}, t.variant === "contained" && {
+      boxShadow: (e.vars || e).shadows[8]
+    }),
+    [`&.${de.focusVisible}`]: b({}, t.variant === "contained" && {
+      boxShadow: (e.vars || e).shadows[6]
+    }),
+    [`&.${de.disabled}`]: b({
+      color: (e.vars || e).palette.action.disabled
+    }, t.variant === "outlined" && {
+      border: `1px solid ${(e.vars || e).palette.action.disabledBackground}`
+    }, t.variant === "contained" && {
+      color: (e.vars || e).palette.action.disabled,
+      boxShadow: (e.vars || e).shadows[0],
+      backgroundColor: (e.vars || e).palette.action.disabledBackground
+    })
+  }, t.variant === "text" && {
+    padding: "6px 8px"
+  }, t.variant === "text" && t.color !== "inherit" && {
+    color: (e.vars || e).palette[t.color].main
+  }, t.variant === "outlined" && {
+    padding: "5px 15px",
+    border: "1px solid currentColor"
+  }, t.variant === "outlined" && t.color !== "inherit" && {
+    color: (e.vars || e).palette[t.color].main,
+    border: e.vars ? `1px solid rgba(${e.vars.palette[t.color].mainChannel} / 0.5)` : `1px solid ${ce(e.palette[t.color].main, 0.5)}`
+  }, t.variant === "contained" && {
+    color: e.vars ? (
+      // this is safe because grey does not change between default light/dark mode
+      e.vars.palette.text.primary
+    ) : (n = (r = e.palette).getContrastText) == null ? void 0 : n.call(r, e.palette.grey[300]),
+    backgroundColor: e.vars ? e.vars.palette.Button.inheritContainedBg : i,
+    boxShadow: (e.vars || e).shadows[2]
+  }, t.variant === "contained" && t.color !== "inherit" && {
+    color: (e.vars || e).palette[t.color].contrastText,
+    backgroundColor: (e.vars || e).palette[t.color].main
+  }, t.color === "inherit" && {
+    color: "inherit",
+    borderColor: "currentColor"
+  }, t.size === "small" && t.variant === "text" && {
+    padding: "4px 5px",
+    fontSize: e.typography.pxToRem(13)
+  }, t.size === "large" && t.variant === "text" && {
+    padding: "8px 11px",
+    fontSize: e.typography.pxToRem(15)
+  }, t.size === "small" && t.variant === "outlined" && {
+    padding: "3px 9px",
+    fontSize: e.typography.pxToRem(13)
+  }, t.size === "large" && t.variant === "outlined" && {
+    padding: "7px 21px",
+    fontSize: e.typography.pxToRem(15)
+  }, t.size === "small" && t.variant === "contained" && {
+    padding: "4px 10px",
+    fontSize: e.typography.pxToRem(13)
+  }, t.size === "large" && t.variant === "contained" && {
+    padding: "8px 22px",
+    fontSize: e.typography.pxToRem(15)
+  }, t.fullWidth && {
+    width: "100%"
+  });
+}, ({
+  ownerState: e
+}) => e.disableElevation && {
+  boxShadow: "none",
+  "&:hover": {
+    boxShadow: "none"
+  },
+  [`&.${de.focusVisible}`]: {
+    boxShadow: "none"
+  },
+  "&:active": {
+    boxShadow: "none"
+  },
+  [`&.${de.disabled}`]: {
+    boxShadow: "none"
+  }
+}), uo = q("span", {
+  name: "MuiButton",
+  slot: "StartIcon",
+  overridesResolver: (e, t) => {
+    const {
+      ownerState: n
+    } = e;
+    return [t.startIcon, t[`iconSize${W(n.size)}`]];
+  }
+})(({
+  ownerState: e
+}) => b({
+  display: "inherit",
+  marginRight: 8,
+  marginLeft: -4
+}, e.size === "small" && {
+  marginLeft: -2
+}, Rt(e))), fo = q("span", {
+  name: "MuiButton",
+  slot: "EndIcon",
+  overridesResolver: (e, t) => {
+    const {
+      ownerState: n
+    } = e;
+    return [t.endIcon, t[`iconSize${W(n.size)}`]];
+  }
+})(({
+  ownerState: e
+}) => b({
+  display: "inherit",
+  marginRight: -4,
+  marginLeft: 8
+}, e.size === "small" && {
+  marginRight: -2
+}, Rt(e))), Tt = /* @__PURE__ */ p.forwardRef(function(t, n) {
+  const r = p.useContext(io), i = p.useContext(so), s = Le(r, t), a = ge({
+    props: s,
+    name: "MuiButton"
+  }), {
+    children: d,
+    color: c = "primary",
+    component: u = "button",
+    className: m,
+    disabled: T = !1,
+    disableElevation: E = !1,
+    disableFocusRipple: M = !1,
+    endIcon: S,
+    focusVisibleClassName: g,
+    fullWidth: l = !1,
+    size: P = "medium",
+    startIcon: V,
+    type: N,
+    variant: v = "text"
+  } = a, h = K(a, ao), C = b({}, a, {
+    color: c,
+    component: u,
+    disabled: T,
+    disableElevation: E,
+    disableFocusRipple: M,
+    fullWidth: l,
+    size: P,
+    type: N,
+    variant: v
+  }), O = co(C), k = V && /* @__PURE__ */ L(uo, {
+    className: O.startIcon,
+    ownerState: C,
+    children: V
+  }), A = S && /* @__PURE__ */ L(fo, {
+    className: O.endIcon,
+    ownerState: C,
+    children: S
+  }), I = i || "";
+  return /* @__PURE__ */ we(lo, b({
+    ownerState: C,
+    className: D(r.className, O.root, m, I),
+    component: u,
+    disabled: T,
+    focusRipple: !M,
+    focusVisibleClassName: D(O.focusVisible, g),
+    ref: n,
+    type: N
+  }, h, {
+    classes: O,
+    children: [k, d, A]
+  }));
+});
+process.env.NODE_ENV !== "production" && (Tt.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The content of the component.
+   */
+  children: o.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: o.object,
+  /**
+   * @ignore
+   */
+  className: o.string,
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
+   * @default 'primary'
+   */
+  color: o.oneOfType([o.oneOf(["inherit", "primary", "secondary", "success", "error", "info", "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,
+  /**
+   * If `true`, no elevation is used.
+   * @default false
+   */
+  disableElevation: o.bool,
+  /**
+   * If `true`, the  keyboard focus ripple is disabled.
+   * @default false
+   */
+  disableFocusRipple: o.bool,
+  /**
+   * If `true`, the ripple effect is disabled.
+   *
+   * ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure
+   * to highlight the element by applying separate styles with the `.Mui-focusVisible` class.
+   * @default false
+   */
+  disableRipple: o.bool,
+  /**
+   * Element placed after the children.
+   */
+  endIcon: o.node,
+  /**
+   * @ignore
+   */
+  focusVisibleClassName: o.string,
+  /**
+   * If `true`, the button will take up the full width of its container.
+   * @default false
+   */
+  fullWidth: o.bool,
+  /**
+   * The URL to link to when the button is clicked.
+   * If defined, an `a` element will be used as the root node.
+   */
+  href: o.string,
+  /**
+   * The size of the component.
+   * `small` is equivalent to the dense button styling.
+   * @default 'medium'
+   */
+  size: o.oneOfType([o.oneOf(["small", "medium", "large"]), o.string]),
+  /**
+   * Element placed before the children.
+   */
+  startIcon: 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]),
+  /**
+   * @ignore
+   */
+  type: o.oneOfType([o.oneOf(["button", "reset", "submit"]), o.string]),
+  /**
+   * The variant to use.
+   * @default 'text'
+   */
+  variant: o.oneOfType([o.oneOf(["contained", "outlined", "text"]), o.string])
+});
+const Ve = Tt, Ct = kn({
+  createStyledComponent: q("div", {
+    name: "MuiStack",
+    slot: "Root",
+    overridesResolver: (e, t) => t.root
+  }),
+  useThemeProps: (e) => ge({
+    props: e,
+    name: "MuiStack"
+  })
+});
+process.env.NODE_ENV !== "production" && (Ct.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The content of the component.
+   */
+  children: o.node,
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: o.elementType,
+  /**
+   * Defines the `flex-direction` style property.
+   * It is applied for all screen sizes.
+   * @default 'column'
+   */
+  direction: o.oneOfType([o.oneOf(["column-reverse", "column", "row-reverse", "row"]), o.arrayOf(o.oneOf(["column-reverse", "column", "row-reverse", "row"])), o.object]),
+  /**
+   * Add an element between each child.
+   */
+  divider: o.node,
+  /**
+   * Defines the space between immediate children.
+   * @default 0
+   */
+  spacing: o.oneOfType([o.arrayOf(o.oneOfType([o.number, o.string])), o.number, o.object, o.string]),
+  /**
+   * The system prop, which 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]),
+  /**
+   * If `true`, the CSS flexbox `gap` is used instead of applying `margin` to children.
+   *
+   * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack/#limitations),
+   * it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag.
+   *
+   * To enable this flag globally, follow the [theme's default props](https://mui.com/material-ui/customization/theme-components/#default-props) configuration.
+   * @default false
+   */
+  useFlexGap: o.bool
+});
+const po = Ct, mo = q("button")(({ theme: e }) => ({
+  backgroundColor: e.palette.primary.main
+})), xo = () => {
+  const e = Dt();
+  return /* @__PURE__ */ we(po, { spacing: 2, direction: "row", children: [
+    /* @__PURE__ */ L(mo, { children: "Styled" }),
+    /* @__PURE__ */ L(
+      Ve,
+      {
+        variant: "text",
+        style: { backgroundColor: e.palette.primary.main },
+        children: "Text"
+      }
+    ),
+    /* @__PURE__ */ L(Ve, { variant: "contained", children: "Contained" }),
+    /* @__PURE__ */ L(Ve, { variant: "outlined", children: "Outlined" })
+  ] });
+};
+export {
+  xo as default
+};