@ukpc-lib/react 0.7.5 → 0.7.7

package/dist/components/index.js

@@ -1,13 +1,13 @@
 import { jsxs as N, Fragment as ke, jsx as c } from "react/jsx-runtime";
 import * as j from "react";
-import we, { useState as F, useContext as Oe, useEffect as Q, useCallback as Ye, useRef as ue, useLayoutEffect as Io, createElement as St, forwardRef as Mo, PureComponent as $o } from "react";
-import { c as Ce, a as Pe, C as $e, p as Ar, u as Ao, _ as ln, S as Pr, b as Po, L as Ro, d as Fn, e as Do, Q as Rr, f as vt, g as zo, m as Fo, h as it, R as Lo, I as jo, i as Vo, j as Ho, s as Bo, k as gn, l as Wo, n as bt, o as L, q as Te, P as I, r as xe, t as Uo, v as Yo, w as qo, x as Go, y as Ln, z as Ko, A as Zo, B as jn, D as Jo, E as Dr, F as zr, G as Xo, H as Qo, J as Me, K as ei, M as xt } from "../index.module-38bd66dc.js";
-import { N as l1, T as c1, O as d1 } from "../index.module-38bd66dc.js";
+import we, { useState as L, useContext as Oe, useEffect as Q, useCallback as Ye, useRef as ue, useLayoutEffect as Io, createElement as St, forwardRef as Mo, PureComponent as $o } from "react";
+import { c as Ce, a as Pe, C as $e, p as Ar, u as Ao, S as Pr, b as Po, L as Ro, d as zn, e as Do, Q as Rr, f as vt, g as zo, m as Fo, h as it, I as Lo, i as jo, j as Vo, k as Ho, s as Bo, l as pn, n as Wo, o as bt, _ as F, q as Te, P as I, r as xe, t as Uo, v as Yo, w as qo, x as Go, y as Fn, z as Ln, A as Ko, B as Zo, D as jn, E as Jo, F as Dr, G as zr, H as Xo, J as Qo, K as Me, M as ei, N as xt } from "../index.module-6b3abe9f.js";
+import { O as l1, T as c1, R as d1 } from "../index.module-6b3abe9f.js";
 import J from "moment";
 import { Stack as oe, Dialog as ti, DialogTitle as ni, Typography as Se, DialogContent as ri, DialogActions as oi, Button as Mt, Box as ii, Tooltip as Vn, ClickAwayListener as ai, TextField as Fr, IconButton as si, CircularProgress as li, Fade as ci, Paper as di, Checkbox as ui } from "@mui/material";
 import "@r2wc/react-to-web-component";
 import "axios";
-import { useParams as fi, Link as yn, useLocation as hi } from "react-router-dom";
+import { useParams as fi, Link as gn, useLocation as hi } from "react-router-dom";
 import "react-query";
 import { createPortal as mi } from "react-dom";
 const pi = (e) => {
@@ -75,7 +75,7 @@ const pi = (e) => {
       /* @__PURE__ */ c("div", { className: "tab-content", children: t.map((i, a) => /* @__PURE__ */ c("div", { children: e.currentTab === `${i.id}` && /* @__PURE__ */ c("div", { children: i.children }) }, a)) })
     ] })
   ] });
-}, vn = ({
+}, yn = ({
   baseUrl: e,
   notiPath: t,
   setNotiData: n
@@ -89,7 +89,7 @@ const pi = (e) => {
         notificationFilterType: "all"
       }
     }
-  })).data) == null ? void 0 : u.rows, d = s == null ? void 0 : s.filter((f) => f.isRead === !1);
+  })).data) == null ? void 0 : u.rows, d = s == null ? void 0 : s.filter((h) => h.isRead === !1);
   n({
     all: { rows: s ?? [], total: (s == null ? void 0 : s.length) ?? 0 },
     unread: {
@@ -105,13 +105,13 @@ const pi = (e) => {
   brandColors: o
 }) => {
   var b;
-  const [i, a] = F(!1), [s, d] = F({
+  const [i, a] = L(!1), [s, d] = L({
     id: e.id,
     isRead: e.isRead
-  }), u = s.isRead === !1 ? "unread" : "read", f = {
+  }), u = s.isRead === !1 ? "unread" : "read", h = {
     borderColor: s.isRead ? "#c5c5c5" : (o == null ? void 0 : o.primary500) || Ce.primary500,
     backgroundColor: s.isRead ? "#c5c5c5" : (o == null ? void 0 : o.primary500) || Ce.primary500
-  }, { setNotiData: h } = Oe($e), p = vn({ baseUrl: t, notiPath: n, setNotiData: h }), v = async (_, x) => {
+  }, { setNotiData: m } = Oe($e), p = yn({ baseUrl: t, notiPath: n, setNotiData: m }), v = async (_, x) => {
     try {
       const S = n || `/notification-management/api/v1/notifications/${_}`, g = t + S;
       await Pe.put(g, { isRead: x });
@@ -141,7 +141,7 @@ const pi = (e) => {
   }, [r, e.id, e.isRead]);
   const l = () => {
     a(!i);
-  }, m = (_) => {
+  }, f = (_) => {
     const x = J(), S = J(_), g = x.diff(S, "days"), w = x.diff(S, "minutes"), C = x.diff(S, "months"), T = x.diff(S, "years");
     if (console.log("diffInMonths", C), w < 1)
       return "Just now";
@@ -195,13 +195,13 @@ const pi = (e) => {
             }
           )
         ] }),
-        /* @__PURE__ */ c("div", { className: "notification-item__time", children: /* @__PURE__ */ c("p", { children: m(e.createdAt) }) }),
+        /* @__PURE__ */ c("div", { className: "notification-item__time", children: /* @__PURE__ */ c("p", { children: f(e.createdAt) }) }),
         /* @__PURE__ */ c(
           "button",
           {
             className: `${u} notification-item__read-at`,
             "aria-label": "Mark as read",
-            style: f,
+            style: h,
             onClick: () => y(e.id, e.isRead)
           }
         )
@@ -248,32 +248,32 @@ const pi = (e) => {
   brandColors: r,
   notiUnreadNumber: o
 }) => {
-  const [i, a] = F(!1);
+  const [i, a] = L(!1);
   console.log(i);
-  const { setNotiData: s } = Oe($e), d = vn({ baseUrl: t, notiPath: n, setNotiData: s }), u = async () => {
+  const { setNotiData: s } = Oe($e), d = yn({ baseUrl: t, notiPath: n, setNotiData: s }), u = async () => {
     try {
       const p = t + (n || "/notification-management/api/v1/notifications");
       await Pe.put(p);
-    } catch (h) {
-      console.log(h);
+    } catch (m) {
+      console.log(m);
     }
     await d(), a(!1);
-  }, f = () => {
+  }, h = () => {
     a(!0), u();
   };
   return console.log("notiUnreadNumber", o), /* @__PURE__ */ N("div", { children: [
     /* @__PURE__ */ c("div", { className: "mark-all-read", children: /* @__PURE__ */ c(
       "button",
       {
-        onClick: f,
+        onClick: h,
         style: { visibility: o === 0 ? "hidden" : "visible" },
         children: "Mark all as read"
       }
     ) }),
-    /* @__PURE__ */ c("div", { className: "notification-items__wrapper", children: /* @__PURE__ */ c("div", { className: "notification-items__content", children: Object.values(e).map((h, p) => /* @__PURE__ */ c(
+    /* @__PURE__ */ c("div", { className: "notification-items__wrapper", children: /* @__PURE__ */ c("div", { className: "notification-items__content", children: Object.values(e).map((m, p) => /* @__PURE__ */ c(
       gi,
       {
-        notification: h,
+        notification: m,
         baseUrl: t,
         notiPath: n,
         markAllAsReadState: i,
@@ -287,10 +287,10 @@ const pi = (e) => {
   notiPath: t,
   brandColors: n
 }) => {
-  var d, u, f, h;
+  var d, u, h, m;
   const { setShowModalFalse: r } = Oe($e), { notidata: o } = Oe($e);
   console.log(o);
-  const [i, a] = F("all"), s = [
+  const [i, a] = L("all"), s = [
     {
       id: "all",
       tabTitle: `All (${((d = o == null ? void 0 : o.all) == null ? void 0 : d.total) || 0})`,
@@ -307,11 +307,11 @@ const pi = (e) => {
     },
     {
       id: "unread",
-      tabTitle: `Unread (${((f = o == null ? void 0 : o.unread) == null ? void 0 : f.total) || 0})`,
+      tabTitle: `Unread (${((h = o == null ? void 0 : o.unread) == null ? void 0 : h.total) || 0})`,
       children: /* @__PURE__ */ c(
         Hn,
         {
-          notidata: ((h = o == null ? void 0 : o.unread) == null ? void 0 : h.rows) || [],
+          notidata: ((m = o == null ? void 0 : o.unread) == null ? void 0 : m.rows) || [],
           baseUrl: e,
           notiPath: t,
           brandColors: n,
@@ -391,7 +391,7 @@ const pi = (e) => {
     }
   ) });
 };
-function bn({
+function vn({
   childrenClass: e,
   action: t,
   childrenOpenClass: n
@@ -399,12 +399,12 @@ function bn({
   const r = document.querySelector("#topbar-wrapper"), o = r == null ? void 0 : r.shadowRoot, i = o == null ? void 0 : o.querySelector(`.${e}`), a = o == null ? void 0 : o.querySelector(
     `.${n}`
   ), s = o == null ? void 0 : o.querySelector("nav"), d = (u) => {
-    s == null || s.addEventListener("click", function(f) {
-      if (n && a && a.contains(f.target)) {
-        if (i && !i.contains(f.target))
+    s == null || s.addEventListener("click", function(h) {
+      if (n && a && a.contains(h.target)) {
+        if (i && !i.contains(h.target))
           return;
       } else
-        i && !i.contains(f.target) && t();
+        i && !i.contains(h.target) && t();
     }), r && !r.contains(u.target) && t();
   };
   document.addEventListener("click", d, !0);
@@ -415,8 +415,8 @@ function bi({
   notiPath: n,
   brandColors: r
 }) {
-  var h, p;
-  const { isOpen: o, toggleOpen: i, setShowModalFalse: a } = Oe($e), { notidata: s, setNotiData: d } = Oe($e), u = vn({ baseUrl: t, notiPath: n, setNotiData: d }), f = async () => {
+  var m, p;
+  const { isOpen: o, toggleOpen: i, setShowModalFalse: a } = Oe($e), { notidata: s, setNotiData: d } = Oe($e), u = yn({ baseUrl: t, notiPath: n, setNotiData: d }), h = async () => {
     var v, y;
     try {
       await u();
@@ -427,9 +427,9 @@ function bi({
     }
   };
   return Q(() => {
-    f();
+    h();
   }, [o]), Q(() => {
-    bn({
+    vn({
       childrenClass: "noti-container",
       childrenOpenClass: "noti-list-container",
       action() {
@@ -493,7 +493,7 @@ function bi({
             backgroundColor: Ce.danger
           },
           className: "notification-badge",
-          children: ((h = s == null ? void 0 : s.unread) == null ? void 0 : h.total) > 9 ? "9+" : `${(p = s == null ? void 0 : s.unread) == null ? void 0 : p.total}`
+          children: ((m = s == null ? void 0 : s.unread) == null ? void 0 : m.total) > 9 ? "9+" : `${(p = s == null ? void 0 : s.unread) == null ? void 0 : p.total}`
         }
       )
     ] }),
@@ -624,12 +624,12 @@ function Oi({ baseColor: e, highlightColor: t, width: n, height: r, borderRadius
   return a === "rtl" && (u["--animation-direction"] = "reverse"), typeof s == "number" && (u["--animation-duration"] = `${s}s`), d || (u["--pseudo-element-display"] = "none"), (typeof n == "string" || typeof n == "number") && (u.width = n), (typeof r == "string" || typeof r == "number") && (u.height = r), (typeof o == "string" || typeof o == "number") && (u.borderRadius = o), i && (u.borderRadius = "50%"), typeof e < "u" && (u["--base-color"] = e), typeof t < "u" && (u["--highlight-color"] = t), u;
 }
 function Ti({ count: e = 1, wrapper: t, className: n, containerClassName: r, containerTestId: o, circle: i = !1, style: a, ...s }) {
-  var d, u, f;
-  const h = we.useContext(Ni), p = { ...s };
+  var d, u, h;
+  const m = we.useContext(Ni), p = { ...s };
   for (const [x, S] of Object.entries(s))
     typeof S > "u" && delete p[x];
   const v = {
-    ...h,
+    ...m,
     ...p,
     circle: i
   }, y = {
@@ -638,7 +638,7 @@ function Ti({ count: e = 1, wrapper: t, className: n, containerClassName: r, con
   };
   let l = "react-loading-skeleton";
   n && (l += ` ${n}`);
-  const m = (d = v.inline) !== null && d !== void 0 ? d : !1, b = [], _ = Math.ceil(e);
+  const f = (d = v.inline) !== null && d !== void 0 ? d : !1, b = [], _ = Math.ceil(e);
   for (let x = 0; x < _; x++) {
     let S = y;
     if (_ > e && x === _ - 1) {
@@ -646,21 +646,21 @@ function Ti({ count: e = 1, wrapper: t, className: n, containerClassName: r, con
       S = { ...S, width: T };
     }
     const g = we.createElement("span", { className: l, style: S, key: x }, "‌");
-    m ? b.push(g) : b.push(we.createElement(
+    f ? b.push(g) : b.push(we.createElement(
       we.Fragment,
       { key: x },
       g,
       we.createElement("br", null)
     ));
   }
-  return we.createElement("span", { className: r, "data-testid": o, "aria-live": "polite", "aria-busy": (f = v.enableAnimation) !== null && f !== void 0 ? f : Lr }, t ? b.map((x, S) => we.createElement(t, { key: S }, x)) : b);
+  return we.createElement("span", { className: r, "data-testid": o, "aria-live": "polite", "aria-busy": (h = v.enableAnimation) !== null && h !== void 0 ? h : Lr }, t ? b.map((x, S) => we.createElement(t, { key: S }, x)) : b);
 }
 const Ii = `@keyframes react-loading-skeleton{to{transform:translate(100%)}}.react-loading-skeleton{--base-color: #ebebeb;--highlight-color: #f5f5f5;--animation-duration: 1.5s;--animation-direction: normal;--pseudo-element-display: block;background-color:var(--base-color);width:100%;border-radius:.25rem;display:inline-flex;line-height:1;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden}.react-loading-skeleton:after{content:" ";display:var(--pseudo-element-display);position:absolute;top:0;left:0;right:0;height:100%;background-repeat:no-repeat;background-image:linear-gradient(90deg,var(--base-color),var(--highlight-color),var(--base-color));transform:translate(-100%);animation-name:react-loading-skeleton;animation-direction:var(--animation-direction);animation-duration:var(--animation-duration);animation-timing-function:ease-in-out;animation-iteration-count:infinite}@media (prefers-reduced-motion){.react-loading-skeleton{--pseudo-element-display: none}}
 `, Mi = ({
   baseUrl: e,
   searchPath: t
 }) => {
-  const [n, r] = F(!1);
+  const [n, r] = L(!1);
   console.log("hasPermission state", n);
   const o = async () => {
     const a = e + (t || "/user-management/api/v1/users/my-account/access-stella-search");
@@ -696,21 +696,18 @@ function Ai({ classNames: e = "", ...t }) {
     customColors: s,
     notiprops: d,
     isBrand: u,
-    logout: f
-  } = t, h = n || "https://ukpcsaprod.blob.core.windows.net/lib/images/logo-header.png", p = {
+    logout: h
+  } = t, m = n || "https://ukpcsaprod.blob.core.windows.net/lib/images/logo-header.png", p = {
     ...a,
     color: (s == null ? void 0 : s.headerTextColor) || "white",
     backgroundColor: (s == null ? void 0 : s.headerBgColor) || "black"
-  }, [v, y] = F(!1), l = ue(null), { term: m } = fi();
-  console.log("term", m);
-  const [b, _] = F(m || ""), x = Mi({ baseUrl: o });
+  }, [v, y] = L(!1), l = ue(null), { Term: f } = fi();
+  console.log("term", f);
+  const [b, _] = L(f || ""), x = Mi({ baseUrl: o });
   console.log("searchPermission", x.hasPermission);
-  const S = $i(o, b), g = Ye(
-    ln.debounce((w) => {
-      _(w);
-    }, 500),
-    []
-  );
+  const S = $i(o, b), g = Ye((w) => {
+    _(w);
+  }, []);
   return /* @__PURE__ */ N(
     Pr,
     {
@@ -731,7 +728,7 @@ function Ai({ classNames: e = "", ...t }) {
             className: `navbar ${e}`,
             style: s ? p : a,
             children: /* @__PURE__ */ N("div", { className: "navbar-container", children: [
-              /* @__PURE__ */ c("div", { className: "logo-container", children: /* @__PURE__ */ c("img", { src: h, alt: "logo-header", style: { height: "40px" } }) }),
+              /* @__PURE__ */ c("div", { className: "logo-container", children: /* @__PURE__ */ c("img", { src: m, alt: "logo-header", style: { height: "40px" } }) }),
               /* @__PURE__ */ N("div", { className: "right-side-container", children: [
                 u && x.hasPermission ? /* @__PURE__ */ c("span", { children: /* @__PURE__ */ N(
                   "label",
@@ -826,7 +823,7 @@ function Ai({ classNames: e = "", ...t }) {
           {
             isOpen: v,
             onClose: () => y(!1),
-            onConfirm: f
+            onConfirm: h
           }
         )
       ]
@@ -837,20 +834,20 @@ function Pi() {
   var a;
   const e = [
     {
-      value: Fn.en,
+      value: zn.en,
       element: /* @__PURE__ */ c(Ei, {})
     },
     {
-      value: Fn.de,
+      value: zn.de,
       element: /* @__PURE__ */ c(ki, {})
     }
-  ], [t, n] = F(!1);
-  F(
+  ], [t, n] = L(!1);
+  L(
     new Array(e.length).fill(!1)
   );
   const { language: r, setLanguage: o } = Do();
   Q(() => {
-    bn({
+    vn({
       childrenClass: "languageDropdown",
       action() {
         n(!1);
@@ -880,9 +877,9 @@ function Ri({
   avatarUrl: e,
   userName: t
 }) {
-  const [n, r] = F(!1), o = ue(null);
-  return ue(null), F(!1), F(!1), Q(() => {
-    bn({
+  const [n, r] = L(!1), o = ue(null);
+  return ue(null), L(!1), L(!1), Q(() => {
+    vn({
       childrenClass: "userAvatar",
       action() {
         r(!1);
@@ -1282,7 +1279,7 @@ function Di() {
 var zi = typeof vt == "object" && vt && vt.Object === Object && vt, Fi = typeof self == "object" && self && self.Object === Object && self;
 zi || Fi || Function("return this")();
 function Li(e) {
-  const [t, n] = F(!!e), r = Ye(() => {
+  const [t, n] = L(!!e), r = Ye(() => {
     n(!0);
   }, []), o = Ye(() => {
     n(!1);
@@ -1370,7 +1367,7 @@ function Zc({ rootPath: e }) {
         /* @__PURE__ */ c("h1", { children: "404 - Not Found" }),
         /* @__PURE__ */ c("p", { children: "Sorry, the page you are looking for does not exist." }),
         /* @__PURE__ */ c(ii, { height: "16px" }),
-        /* @__PURE__ */ c(yn, { to: e, children: /* @__PURE__ */ c(Mt, { variant: "contained", color: "primary", children: "Go to Home" }) })
+        /* @__PURE__ */ c(gn, { to: e, children: /* @__PURE__ */ c(Mt, { variant: "contained", color: "primary", children: "Go to Home" }) })
       ]
     }
   );
@@ -1396,17 +1393,17 @@ function ji(e) {
   );
 }
 function Vi(e) {
-  const { renderChildren: t, parentRef: n, onlyChild: r, dropdownLevel: o } = e, [i, a] = F({ top: 0, left: 0 }), s = ue(null), [d, u] = F("auto");
+  const { renderChildren: t, parentRef: n, onlyChild: r, dropdownLevel: o } = e, [i, a] = L({ top: 0, left: 0 }), s = ue(null), [d, u] = L("auto");
   return Io(() => {
     if (n.current && s.current) {
-      const f = n.current.getBoundingClientRect(), h = s.current.getBoundingClientRect();
+      const h = n.current.getBoundingClientRect(), m = s.current.getBoundingClientRect();
       let p, v;
       if (o === 1)
-        p = f.bottom, v = f.left, h.height + p > window.innerHeight ? (console.log("overbottom"), u(window.innerHeight - p - 50), p = f.bottom - h.height) : p = f.bottom;
+        p = h.bottom, v = h.left, m.height + p > window.innerHeight ? (console.log("overbottom"), u(window.innerHeight - p - 50), p = h.bottom - m.height) : p = h.bottom;
       else if (o > 1) {
-        p = f.top, v = f.left + f.width;
-        const y = h.height + (window.innerHeight - f.top) > window.innerHeight;
-        y && (console.log("overtop"), u(window.innerHeight - f.top - 50)), f.top + h.height > window.innerHeight && !y && (p = f.top - h.height + f.height);
+        p = h.top, v = h.left + h.width;
+        const y = m.height + (window.innerHeight - h.top) > window.innerHeight;
+        y && (console.log("overtop"), u(window.innerHeight - h.top - 50)), h.top + m.height > window.innerHeight && !y && (p = h.top - m.height + h.height);
       }
       a({
         top: p,
@@ -1432,9 +1429,9 @@ function Vi(e) {
 }
 function jr({ ...e }) {
   var V, z, H, G, re;
-  const t = e.item, n = e.level || 0, r = !!((V = e.item.children) != null && V.length), { isActive: o } = e, i = `level-${n}`, a = o(t.id) ? "active" : "", s = (K, te = i) => `${K} ${te} ${a}`, [d, u] = F(!1), [f, h] = F(t.isFavorite || !1), p = ue(), v = ue();
+  const t = e.item, n = e.level || 0, r = !!((V = e.item.children) != null && V.length), { isActive: o } = e, i = `level-${n}`, a = o(t.id) ? "active" : "", s = (K, te = i) => `${K} ${te} ${a}`, [d, u] = L(!1), [h, m] = L(t.isFavorite || !1), p = ue(), v = ue();
   v != null && v.current && ((z = v == null ? void 0 : v.current) == null ? void 0 : z.scrollWidth) > ((H = v == null ? void 0 : v.current) == null ? void 0 : H.clientWidth);
-  const y = window.location.origin, l = t.path && t.path.includes("http") ? new URL(t.path) : { origin: "", pathname: "" }, m = window.location.pathname.split("/")[1], b = l.pathname.split("/")[1], _ = e.ssr || !y.includes("local") && y !== l.origin || b !== m, x = r || n === 0 ? "div" : _ ? "a" : yn, S = t.path || "#", g = n + 1, w = r && d && n > 0, C = () => {
+  const y = window.location.origin, l = t.path && t.path.includes("http") ? new URL(t.path) : { origin: "", pathname: "" }, f = window.location.pathname.split("/")[1], b = l.pathname.split("/")[1], _ = e.ssr || !y.includes("local") && y !== l.origin || b !== f, x = r || n === 0 ? "div" : _ ? "a" : gn, S = t.path || "#", g = n + 1, w = r && d && n > 0, C = () => {
     u(!0);
   }, T = () => {
     u(!1);
@@ -1493,7 +1490,7 @@ function jr({ ...e }) {
                   menuLevel: n,
                   hasChildren: r,
                   isHovered: d,
-                  isFavorite: f,
+                  isFavorite: h,
                   onClick: (K) => {
                     const te = {
                       menuConfigId: t.id,
@@ -1501,7 +1498,7 @@ function jr({ ...e }) {
                     }, me = e.baseUrl + O;
                     Pe.post(me, te).then((se) => {
                       var le;
-                      h(K), zo("Set favorite menu item successfully"), (le = e.onSetFavoriteSuccess) == null || le.call(e, e.item.id, K);
+                      m(K), zo("Set favorite menu item successfully"), (le = e.onSetFavoriteSuccess) == null || le.call(e, e.item.id, K);
                     }).catch((se) => {
                       var le, ge;
                       Ar(
@@ -1553,43 +1550,7 @@ function jr({ ...e }) {
   );
 }
 function Hi({ item: e, cls: t }) {
-  var a, s;
-  const [n, r] = F(!e.icon), o = () => {
-    r(!0);
-  }, i = (a = e.icon) == null ? void 0 : a.endsWith(".svg");
-  return /* @__PURE__ */ c("div", { className: t("menu-item__icon"), children: n ? /* @__PURE__ */ c(
-    "div",
-    {
-      style: {
-        width: 24,
-        height: 24,
-        backgroundColor: "#dadada",
-        borderRadius: "5px",
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center"
-      },
-      children: (s = e.name.trim().at(0)) == null ? void 0 : s.toUpperCase()
-    }
-  ) : i ? /* @__PURE__ */ c(
-    Lo,
-    {
-      src: e.icon,
-      beforeInjection: (d) => {
-        d.setAttribute("style", "margin: 0 auto;"), d.querySelectorAll("path").forEach((f) => {
-          f.hasAttribute("fill") && f.setAttribute("fill", "currentColor"), f.hasAttribute("stroke") && f.setAttribute("stroke", "currentColor");
-        });
-      }
-    }
-  ) : /* @__PURE__ */ c(
-    "img",
-    {
-      src: e.icon || "/",
-      alt: " ",
-      style: { height: 24, maxHeight: 24 },
-      onError: o
-    }
-  ) });
+  return /* @__PURE__ */ c("div", { className: t("menu-item__icon"), children: /* @__PURE__ */ c(Lo, { item: e }) });
 }
 function Bi(e) {
   const t = {
@@ -1644,39 +1605,51 @@ function Yi(e) {
   window.dispatchEvent(t);
 }
 function qi(e) {
-  const t = hi(), [n, r] = F([]), [o, i] = F(window.location.href);
+  const t = hi(), [n, r] = L([]), [o, i] = L(window.location.href);
   Q(() => {
     i(window.location.href);
   }, [t]);
-  const a = (h) => `${h}`;
-  function s(h, p) {
-    const v = n.find((y) => y.id === h);
-    console.log("updatedMenuItem:", v), v.isFavorite = p, Yi(v);
+  const a = (p) => `${p}`;
+  function s(p, v) {
+    for (const y of p) {
+      if (y.id === v)
+        return y;
+      if (y.children) {
+        const l = s(y.children, v);
+        if (l)
+          return l;
+      }
+    }
+    return null;
   }
-  const d = (h) => {
-    console.log("Favorite menus changed", h), r(h.detail.favoriteMenus || []);
+  function d(p, v) {
+    const y = s(n, p);
+    console.log("updatedMenuItem:", y), y ? (y.isFavorite = v, Yi(y)) : console.error(`Item with id ${p} not found`);
+  }
+  const u = (p) => {
+    console.log("Favorite menus changed", p), r(p.detail.favoriteMenus || []);
   };
-  Q(() => (window.addEventListener("favoriteMenusChange", d), () => {
+  Q(() => (window.addEventListener("favoriteMenusChange", u), () => {
     window.removeEventListener(
       "favoriteMenusChange",
-      d
+      u
     );
   }), []), console.log("favoriteItems", n);
-  function u(h, p) {
-    return !p || n.indexOf(p) === -1 ? 1 : u(
-      p,
-      n.find((y) => y.id === p.parentKey)
+  function h(p, v) {
+    return !v || n.indexOf(v) === -1 ? 1 : h(
+      v,
+      n.find((l) => l.id === v.parentKey)
     ) + 1;
   }
-  const f = (h, p, v) => /* @__PURE__ */ c(
+  const m = (p, v, y) => /* @__PURE__ */ c(
     jr,
     {
-      isActive: (l) => v.some((m) => m.id === l),
+      isActive: (f) => y.some((b) => b.id === f),
       brandColors: e.brandColors,
       baseUrl: e.baseUrl,
-      item: h,
-      level: p,
-      onSetFavoriteSuccess: s
+      item: p,
+      level: v,
+      onSetFavoriteSuccess: d
     }
   );
   return /* @__PURE__ */ c(ke, { children: n.length ? /* @__PURE__ */ c("div", { className: a("side-bar"), children: /* @__PURE__ */ c(
@@ -1694,7 +1667,7 @@ function qi(e) {
         scrollbarWidth: "thin"
       },
       children: n.map(
-        (h) => /* @__PURE__ */ c("div", { children: f(h, u(), []) }, h.id)
+        (p) => /* @__PURE__ */ c("div", { children: m(p, h(), []) }, p.id)
       )
     }
   ) }) : "" });
@@ -1709,7 +1682,7 @@ function Jc(e) {
   ) });
 }
 function Xc() {
-  const { colors: e } = gn();
+  const { colors: e } = pn();
   return /* @__PURE__ */ c(
     "div",
     {
@@ -1847,7 +1820,7 @@ function Vr(e) {
 function ve(e, t, n = {
   clone: !0
 }) {
-  const r = n.clone ? L({}, e) : e;
+  const r = n.clone ? F({}, e) : e;
   return Ne(e) && Ne(t) && Object.keys(t).forEach((o) => {
     o !== "__proto__" && (Ne(t[o]) && o in e && Ne(e[o]) ? r[o] = ve(e[o], t[o], n) : n.clone ? r[o] = Ne(t[o]) ? Vr(t[o]) : t[o] : r[o] = t[o]);
   }), r;
@@ -1867,7 +1840,7 @@ const Zi = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   default: st
 }, Symbol.toStringTag, { value: "Module" }));
-var cn = { exports: {} }, A = {};
+var ln = { exports: {} }, A = {};
 /**
  * @license React
  * react-is.production.min.js
@@ -1882,29 +1855,29 @@ function Ji() {
   if (Bn)
     return A;
   Bn = 1;
-  var e = Symbol.for("react.element"), t = Symbol.for("react.portal"), n = Symbol.for("react.fragment"), r = Symbol.for("react.strict_mode"), o = Symbol.for("react.profiler"), i = Symbol.for("react.provider"), a = Symbol.for("react.context"), s = Symbol.for("react.server_context"), d = Symbol.for("react.forward_ref"), u = Symbol.for("react.suspense"), f = Symbol.for("react.suspense_list"), h = Symbol.for("react.memo"), p = Symbol.for("react.lazy"), v = Symbol.for("react.offscreen"), y;
+  var e = Symbol.for("react.element"), t = Symbol.for("react.portal"), n = Symbol.for("react.fragment"), r = Symbol.for("react.strict_mode"), o = Symbol.for("react.profiler"), i = Symbol.for("react.provider"), a = Symbol.for("react.context"), s = Symbol.for("react.server_context"), d = Symbol.for("react.forward_ref"), u = Symbol.for("react.suspense"), h = Symbol.for("react.suspense_list"), m = Symbol.for("react.memo"), p = Symbol.for("react.lazy"), v = Symbol.for("react.offscreen"), y;
   y = Symbol.for("react.module.reference");
-  function l(m) {
-    if (typeof m == "object" && m !== null) {
-      var b = m.$$typeof;
+  function l(f) {
+    if (typeof f == "object" && f !== null) {
+      var b = f.$$typeof;
       switch (b) {
         case e:
-          switch (m = m.type, m) {
+          switch (f = f.type, f) {
             case n:
             case o:
             case r:
             case u:
-            case f:
-              return m;
+            case h:
+              return f;
             default:
-              switch (m = m && m.$$typeof, m) {
+              switch (f = f && f.$$typeof, f) {
                 case s:
                 case a:
                 case d:
                 case p:
-                case h:
+                case m:
                 case i:
-                  return m;
+                  return f;
                 default:
                   return b;
               }
@@ -1914,36 +1887,36 @@ function Ji() {
       }
     }
   }
-  return A.ContextConsumer = a, A.ContextProvider = i, A.Element = e, A.ForwardRef = d, A.Fragment = n, A.Lazy = p, A.Memo = h, A.Portal = t, A.Profiler = o, A.StrictMode = r, A.Suspense = u, A.SuspenseList = f, A.isAsyncMode = function() {
+  return A.ContextConsumer = a, A.ContextProvider = i, A.Element = e, A.ForwardRef = d, A.Fragment = n, A.Lazy = p, A.Memo = m, A.Portal = t, A.Profiler = o, A.StrictMode = r, A.Suspense = u, A.SuspenseList = h, A.isAsyncMode = function() {
     return !1;
   }, A.isConcurrentMode = function() {
     return !1;
-  }, A.isContextConsumer = function(m) {
-    return l(m) === a;
-  }, A.isContextProvider = function(m) {
-    return l(m) === i;
-  }, A.isElement = function(m) {
-    return typeof m == "object" && m !== null && m.$$typeof === e;
-  }, A.isForwardRef = function(m) {
-    return l(m) === d;
-  }, A.isFragment = function(m) {
-    return l(m) === n;
-  }, A.isLazy = function(m) {
-    return l(m) === p;
-  }, A.isMemo = function(m) {
-    return l(m) === h;
-  }, A.isPortal = function(m) {
-    return l(m) === t;
-  }, A.isProfiler = function(m) {
-    return l(m) === o;
-  }, A.isStrictMode = function(m) {
-    return l(m) === r;
-  }, A.isSuspense = function(m) {
-    return l(m) === u;
-  }, A.isSuspenseList = function(m) {
-    return l(m) === f;
-  }, A.isValidElementType = function(m) {
-    return typeof m == "string" || typeof m == "function" || m === n || m === o || m === r || m === u || m === f || m === v || typeof m == "object" && m !== null && (m.$$typeof === p || m.$$typeof === h || m.$$typeof === i || m.$$typeof === a || m.$$typeof === d || m.$$typeof === y || m.getModuleId !== void 0);
+  }, A.isContextConsumer = function(f) {
+    return l(f) === a;
+  }, A.isContextProvider = function(f) {
+    return l(f) === i;
+  }, A.isElement = function(f) {
+    return typeof f == "object" && f !== null && f.$$typeof === e;
+  }, A.isForwardRef = function(f) {
+    return l(f) === d;
+  }, A.isFragment = function(f) {
+    return l(f) === n;
+  }, A.isLazy = function(f) {
+    return l(f) === p;
+  }, A.isMemo = function(f) {
+    return l(f) === m;
+  }, A.isPortal = function(f) {
+    return l(f) === t;
+  }, A.isProfiler = function(f) {
+    return l(f) === o;
+  }, A.isStrictMode = function(f) {
+    return l(f) === r;
+  }, A.isSuspense = function(f) {
+    return l(f) === u;
+  }, A.isSuspenseList = function(f) {
+    return l(f) === h;
+  }, A.isValidElementType = function(f) {
+    return typeof f == "string" || typeof f == "function" || f === n || f === o || f === r || f === u || f === h || f === v || typeof f == "object" && f !== null && (f.$$typeof === p || f.$$typeof === m || f.$$typeof === i || f.$$typeof === a || f.$$typeof === d || f.$$typeof === y || f.getModuleId !== void 0);
   }, A.typeOf = l, A;
 }
 var P = {};
@@ -1959,10 +1932,10 @@ var P = {};
 var Wn;
 function Xi() {
   return Wn || (Wn = 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"), o = Symbol.for("react.profiler"), i = Symbol.for("react.provider"), a = Symbol.for("react.context"), s = Symbol.for("react.server_context"), d = Symbol.for("react.forward_ref"), u = Symbol.for("react.suspense"), f = Symbol.for("react.suspense_list"), h = Symbol.for("react.memo"), p = Symbol.for("react.lazy"), v = Symbol.for("react.offscreen"), y = !1, l = !1, m = !1, b = !1, _ = !1, x;
+    var e = Symbol.for("react.element"), t = Symbol.for("react.portal"), n = Symbol.for("react.fragment"), r = Symbol.for("react.strict_mode"), o = Symbol.for("react.profiler"), i = Symbol.for("react.provider"), a = Symbol.for("react.context"), s = Symbol.for("react.server_context"), d = Symbol.for("react.forward_ref"), u = Symbol.for("react.suspense"), h = Symbol.for("react.suspense_list"), m = Symbol.for("react.memo"), p = Symbol.for("react.lazy"), v = Symbol.for("react.offscreen"), y = !1, l = !1, f = !1, b = !1, _ = !1, x;
     x = Symbol.for("react.module.reference");
     function S(k) {
-      return !!(typeof k == "string" || typeof k == "function" || k === n || k === o || _ || k === r || k === u || k === f || b || k === v || y || l || m || typeof k == "object" && k !== null && (k.$$typeof === p || k.$$typeof === h || k.$$typeof === i || k.$$typeof === a || k.$$typeof === d || // This needs to include all possible module reference object
+      return !!(typeof k == "string" || typeof k == "function" || k === n || k === o || _ || k === r || k === u || k === h || b || k === v || y || l || f || typeof k == "object" && k !== null && (k.$$typeof === p || k.$$typeof === m || k.$$typeof === i || k.$$typeof === a || k.$$typeof === d || // 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.
@@ -1979,18 +1952,18 @@ function Xi() {
               case o:
               case r:
               case u:
-              case f:
+              case h:
                 return yt;
               default:
-                var zn = yt && yt.$$typeof;
-                switch (zn) {
+                var Dn = yt && yt.$$typeof;
+                switch (Dn) {
                   case s:
                   case a:
                   case d:
                   case p:
-                  case h:
+                  case m:
                   case i:
-                    return zn;
+                    return Dn;
                   default:
                     return Fe;
                 }
@@ -2000,7 +1973,7 @@ function Xi() {
         }
       }
     }
-    var w = a, C = i, T = e, O = d, V = n, z = p, H = h, G = t, re = o, K = r, te = u, me = f, se = !1, le = !1;
+    var w = a, C = i, T = e, O = d, V = n, z = p, H = m, G = t, re = o, K = r, te = u, me = h, se = !1, le = !1;
     function ge(k) {
       return se || (se = !0, console.warn("The ReactIs.isAsyncMode() alias has been deprecated, and will be removed in React 18+.")), !1;
     }
@@ -2026,7 +1999,7 @@ function Xi() {
       return g(k) === p;
     }
     function Qt(k) {
-      return g(k) === h;
+      return g(k) === m;
     }
     function en(k) {
       return g(k) === t;
@@ -2041,13 +2014,13 @@ function Xi() {
       return g(k) === u;
     }
     function nt(k) {
-      return g(k) === f;
+      return g(k) === h;
     }
     P.ContextConsumer = w, P.ContextProvider = C, P.Element = T, P.ForwardRef = O, P.Fragment = V, P.Lazy = z, P.Memo = H, P.Portal = G, P.Profiler = re, P.StrictMode = K, P.Suspense = te, P.SuspenseList = me, P.isAsyncMode = ge, P.isConcurrentMode = et, P.isContextConsumer = tt, P.isContextProvider = De, P.isElement = _e, P.isForwardRef = ze, P.isFragment = Jt, P.isLazy = Xt, P.isMemo = Qt, P.isPortal = en, P.isProfiler = tn, P.isStrictMode = nn, P.isSuspense = E, P.isSuspenseList = nt, P.isValidElementType = S, P.typeOf = g;
   }()), P;
 }
-process.env.NODE_ENV === "production" ? cn.exports = Ji() : cn.exports = Xi();
-var Un = cn.exports;
+process.env.NODE_ENV === "production" ? ln.exports = Ji() : ln.exports = Xi();
+var Un = ln.exports;
 const Qi = /^\s*function(?:\s|\s*\/\*.*\*\/\s*)+([^(\s/]*)\s*/;
 function Hr(e) {
   const t = `${e}`.match(Qi);
@@ -2092,13 +2065,13 @@ const na = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   default: Ae
 }, Symbol.toStringTag, { value: "Module" }));
 function Wr(e, t) {
-  const n = L({}, t);
+  const n = F({}, t);
   return Object.keys(e).forEach((r) => {
     if (r.toString().match(/^(components|slots)$/))
-      n[r] = L({}, e[r], n[r]);
+      n[r] = F({}, e[r], n[r]);
     else if (r.toString().match(/^(componentsProps|slotProps)$/)) {
       const o = e[r] || {}, i = t[r];
-      n[r] = {}, !i || !Object.keys(i) ? n[r] = o : !o || !Object.keys(o) ? n[r] = i : (n[r] = L({}, i), Object.keys(o).forEach((a) => {
+      n[r] = {}, !i || !Object.keys(i) ? n[r] = o : !o || !Object.keys(o) ? n[r] = i : (n[r] = F({}, i), Object.keys(o).forEach((a) => {
         n[r][a] = Wr(o[a], i[a]);
       }));
     } else
@@ -2148,14 +2121,14 @@ const qn = (e) => e, oa = () => {
   required: "required",
   selected: "selected"
 };
-function xn(e, t, n = "Mui") {
+function bn(e, t, n = "Mui") {
   const r = sa[t];
   return r ? `${n}-${r}` : `${aa.generate(e)}-${t}`;
 }
 function la(e, t, n = "Mui") {
   const r = {};
   return t.forEach((o) => {
-    r[o] = xn(e, o, n);
+    r[o] = bn(e, o, n);
   }), r;
 }
 function ca(e, t = Number.MIN_SAFE_INTEGER, n = Number.MAX_SAFE_INTEGER) {
@@ -2178,7 +2151,7 @@ const fa = ["values", "unit", "step"], ha = (e) => {
     key: n,
     val: e[n]
   })) || [];
-  return t.sort((n, r) => n.val - r.val), t.reduce((n, r) => L({}, n, {
+  return t.sort((n, r) => n.val - r.val), t.reduce((n, r) => F({}, n, {
     [r.key]: r.val
   }), {});
 };
@@ -2211,21 +2184,21 @@ function Ur(e) {
     const y = a.indexOf(v);
     return `@media (min-width:${typeof t[p] == "number" ? t[p] : p}${n}) and (max-width:${(y !== -1 && typeof t[a[y]] == "number" ? t[a[y]] : v) - r / 100}${n})`;
   }
-  function f(p) {
+  function h(p) {
     return a.indexOf(p) + 1 < a.length ? u(p, a[a.indexOf(p) + 1]) : s(p);
   }
-  function h(p) {
+  function m(p) {
     const v = a.indexOf(p);
     return v === 0 ? s(a[1]) : v === a.length - 1 ? d(a[v]) : u(p, a[a.indexOf(p) + 1]).replace("@media", "@media not all and");
   }
-  return L({
+  return F({
     keys: a,
     values: i,
     up: s,
     down: d,
     between: u,
-    only: f,
-    not: h,
+    only: h,
+    not: m,
     unit: n
   }, o);
 }
@@ -2238,7 +2211,7 @@ function at(e, t) {
     // No need to clone deep, it's way faster.
   }) : e;
 }
-const _n = {
+const xn = {
   xs: 0,
   // phone
   sm: 600,
@@ -2253,7 +2226,7 @@ const _n = {
   // Sorted ASC by size. That's important.
   // It can't be configured as it's used statically for propTypes.
   keys: ["xs", "sm", "md", "lg", "xl"],
-  up: (e) => `@media (min-width:${_n[e]}px)`
+  up: (e) => `@media (min-width:${xn[e]}px)`
 };
 function Ee(e, t, n) {
   const r = e.theme || {};
@@ -2264,7 +2237,7 @@ function Ee(e, t, n) {
   if (typeof t == "object") {
     const i = r.breakpoints || Gn;
     return Object.keys(t).reduce((a, s) => {
-      if (Object.keys(i.values || _n).indexOf(s) !== -1) {
+      if (Object.keys(i.values || xn).indexOf(s) !== -1) {
         const d = i.up(s);
         a[d] = n(t[s], s);
       } else {
@@ -2313,9 +2286,9 @@ function Y(e) {
     if (a[t] == null)
       return null;
     const s = a[t], d = a.theme, u = zt(d, r) || {};
-    return Ee(a, s, (h) => {
-      let p = $t(u, o, h);
-      return h === p && typeof h == "string" && (p = $t(u, o, `${t}${h === "default" ? "" : Ae(h)}`, h)), n === !1 ? p : {
+    return Ee(a, s, (m) => {
+      let p = $t(u, o, m);
+      return m === p && typeof m == "string" && (p = $t(u, o, `${t}${m === "default" ? "" : Ae(m)}`, m)), n === !1 ? p : {
         [n]: p
       };
     });
@@ -2518,11 +2491,11 @@ function ie(e) {
 const Ja = Y({
   prop: "width",
   transform: ie
-}), wn = (e) => {
+}), _n = (e) => {
   if (e.maxWidth !== void 0 && e.maxWidth !== null) {
     const t = (n) => {
       var r, o;
-      const i = ((r = e.theme) == null || (r = r.breakpoints) == null || (r = r.values) == null ? void 0 : r[n]) || _n[n];
+      const i = ((r = e.theme) == null || (r = r.breakpoints) == null || (r = r.values) == null ? void 0 : r[n]) || xn[n];
       return i ? ((o = e.theme) == null || (o = o.breakpoints) == null ? void 0 : o.unit) !== "px" ? {
         maxWidth: `${i}${e.theme.breakpoints.unit}`
       } : {
@@ -2535,7 +2508,7 @@ const Ja = Y({
   }
   return null;
 };
-wn.filterProps = ["maxWidth"];
+_n.filterProps = ["maxWidth"];
 const Xa = Y({
   prop: "minWidth",
   transform: ie
@@ -2562,7 +2535,7 @@ Y({
 const ns = Y({
   prop: "boxSizing"
 });
-jt(Ja, wn, Xa, Qa, es, ts, ns);
+jt(Ja, _n, Xa, Qa, es, ts, ns);
 const rs = {
   // borders
   border: {
@@ -2811,7 +2784,7 @@ const rs = {
     transform: ie
   },
   maxWidth: {
-    style: wn
+    style: _n
   },
   minWidth: {
     transform: ie
@@ -2868,8 +2841,8 @@ function Gr() {
     const {
       cssProperty: d = n,
       themeKey: u,
-      transform: f,
-      style: h
+      transform: h,
+      style: m
     } = s;
     if (r == null)
       return null;
@@ -2878,9 +2851,9 @@ function Gr() {
         [n]: r
       };
     const p = zt(o, u) || {};
-    return h ? h(a) : Ee(a, r, (y) => {
-      let l = $t(p, f, y);
-      return y === l && typeof y == "string" && (l = $t(p, f, `${n}${y === "default" ? "" : Ae(y)}`, y)), d === !1 ? l : {
+    return m ? m(a) : Ee(a, r, (y) => {
+      let l = $t(p, h, y);
+      return y === l && typeof y == "string" && (l = $t(p, h, `${n}${y === "default" ? "" : Ae(y)}`, y)), d === !1 ? l : {
         [d]: l
       };
     });
@@ -2902,8 +2875,8 @@ function Gr() {
         return d;
       if (!u)
         return null;
-      const f = ya(i.breakpoints), h = Object.keys(f);
-      let p = f;
+      const h = ya(i.breakpoints), m = Object.keys(h);
+      let p = h;
       return Object.keys(u).forEach((v) => {
         const y = is(u[v], i);
         if (y != null)
@@ -2913,8 +2886,8 @@ function Gr() {
             else {
               const l = Ee({
                 theme: i
-              }, y, (m) => ({
-                [v]: m
+              }, y, (f) => ({
+                [v]: f
               }));
               os(l, y) ? p[v] = t({
                 sx: y,
@@ -2923,7 +2896,7 @@ function Gr() {
             }
           else
             p = at(p, e(v, y, i, a));
-      }), va(h, p);
+      }), va(m, p);
     }
     return Array.isArray(o) ? o.map(s) : s(o);
   }
@@ -2931,7 +2904,7 @@ function Gr() {
 }
 const Kr = Gr();
 Kr.filterProps = ["sx"];
-const Sn = Kr;
+const wn = Kr;
 function Zr(e, t) {
   const n = this;
   return n.vars && typeof n.getColorSchemeSelector == "function" ? {
@@ -2939,7 +2912,7 @@ function Zr(e, t) {
   } : n.palette.mode === e ? t : {};
 }
 const as = ["breakpoints", "palette", "spacing", "shape"];
-function Cn(e = {}, ...t) {
+function Sn(e = {}, ...t) {
   const {
     breakpoints: n = {},
     palette: r = {},
@@ -2951,22 +2924,22 @@ function Cn(e = {}, ...t) {
     direction: "ltr",
     components: {},
     // Inject component definitions.
-    palette: L({
+    palette: F({
       mode: "light"
     }, r),
     spacing: d,
-    shape: L({}, pa, i)
+    shape: F({}, pa, i)
   }, a);
-  return u.applyStyles = Zr, u = t.reduce((f, h) => ve(f, h), u), u.unstable_sxConfig = L({}, mt, a == null ? void 0 : a.unstable_sxConfig), u.unstable_sx = function(h) {
-    return Sn({
-      sx: h,
+  return u.applyStyles = Zr, u = t.reduce((h, m) => ve(h, m), u), u.unstable_sxConfig = F({}, mt, a == null ? void 0 : a.unstable_sxConfig), u.unstable_sx = function(m) {
+    return wn({
+      sx: m,
       theme: this
     });
   }, u;
 }
 const ss = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  default: Cn,
+  default: Sn,
   private_createBreakpoints: Ur,
   unstable_applyStyles: Zr
 }, Symbol.toStringTag, { value: "Module" }));
@@ -3027,7 +3000,7 @@ var fs = /* @__PURE__ */ function() {
       return r.parentNode && r.parentNode.removeChild(r);
     }), this.tags = [], this.ctr = 0, process.env.NODE_ENV !== "production" && (this._alreadyInsertedOrderInsensitiveRule = !1);
   }, e;
-}(), ee = "-ms-", At = "-moz-", M = "-webkit-", En = "comm", kn = "rule", Nn = "decl", hs = "@import", Xr = "@keyframes", ms = "@layer", ps = Math.abs, Ut = String.fromCharCode, gs = Object.assign;
+}(), ee = "-ms-", At = "-moz-", M = "-webkit-", Cn = "comm", En = "rule", kn = "decl", hs = "@import", Xr = "@keyframes", ms = "@layer", ps = Math.abs, Ut = String.fromCharCode, gs = Object.assign;
 function ys(e, t) {
   return X(e, 0) ^ 45 ? (((t << 2 ^ X(e, 0)) << 2 ^ X(e, 1)) << 2 ^ X(e, 2)) << 2 ^ X(e, 3) : 0;
 }
@@ -3040,7 +3013,7 @@ function vs(e, t) {
 function $(e, t, n) {
   return e.replace(t, n);
 }
-function dn(e, t) {
+function cn(e, t) {
   return e.indexOf(t);
 }
 function X(e, t) {
@@ -3052,7 +3025,7 @@ function lt(e, t, n) {
 function ye(e) {
   return e.length;
 }
-function On(e) {
+function Nn(e) {
   return e.length;
 }
 function _t(e, t) {
@@ -3125,7 +3098,7 @@ function no(e) {
   return Je = "", e;
 }
 function Et(e) {
-  return Qr(pt(ne - 1, un(e === 91 ? e + 2 : e === 40 ? e + 1 : e)));
+  return Qr(pt(ne - 1, dn(e === 91 ? e + 2 : e === 40 ? e + 1 : e)));
 }
 function ws(e) {
   for (; (Z = be()) && Z < 33; )
@@ -3137,17 +3110,17 @@ function Ss(e, t) {
     ;
   return pt(e, Ct() + (t < 6 && be() == 32 && ae() == 32));
 }
-function un(e) {
+function dn(e) {
   for (; ae(); )
     switch (Z) {
       case e:
         return ne;
       case 34:
       case 39:
-        e !== 34 && e !== 39 && un(Z);
+        e !== 34 && e !== 39 && dn(Z);
         break;
       case 40:
-        e === 41 && un(e);
+        e === 41 && dn(e);
         break;
       case 92:
         ae();
@@ -3170,11 +3143,11 @@ function ks(e) {
   return no(kt("", null, null, null, [""], e = to(e), 0, [0], e));
 }
 function kt(e, t, n, r, o, i, a, s, d) {
-  for (var u = 0, f = 0, h = a, p = 0, v = 0, y = 0, l = 1, m = 1, b = 1, _ = 0, x = "", S = o, g = i, w = r, C = x; m; )
+  for (var u = 0, h = 0, m = a, p = 0, v = 0, y = 0, l = 1, f = 1, b = 1, _ = 0, x = "", S = o, g = i, w = r, C = x; f; )
     switch (y = _, _ = ae()) {
       case 40:
-        if (y != 108 && X(C, h - 1) == 58) {
-          dn(C += $(Et(_), "&", "&\f"), "&\f") != -1 && (b = -1);
+        if (y != 108 && X(C, m - 1) == 58) {
+          cn(C += $(Et(_), "&", "&\f"), "&\f") != -1 && (b = -1);
           break;
         }
       case 34:
@@ -3209,32 +3182,32 @@ function kt(e, t, n, r, o, i, a, s, d) {
         switch (_) {
           case 0:
           case 125:
-            m = 0;
-          case 59 + f:
-            b == -1 && (C = $(C, /\f/g, "")), v > 0 && ye(C) - h && _t(v > 32 ? Jn(C + ";", r, n, h - 1) : Jn($(C, " ", "") + ";", r, n, h - 2), d);
+            f = 0;
+          case 59 + h:
+            b == -1 && (C = $(C, /\f/g, "")), v > 0 && ye(C) - m && _t(v > 32 ? Jn(C + ";", r, n, m - 1) : Jn($(C, " ", "") + ";", r, n, m - 2), d);
             break;
           case 59:
             C += ";";
           default:
-            if (_t(w = Zn(C, t, n, u, f, o, s, x, S = [], g = [], h), i), _ === 123)
-              if (f === 0)
-                kt(C, t, w, w, S, i, h, s, g);
+            if (_t(w = Zn(C, t, n, u, h, o, s, x, S = [], g = [], m), i), _ === 123)
+              if (h === 0)
+                kt(C, t, w, w, S, i, m, s, g);
               else
                 switch (p === 99 && X(C, 3) === 110 ? 100 : p) {
                   case 100:
                   case 108:
                   case 109:
                   case 115:
-                    kt(e, w, w, r && _t(Zn(e, w, w, 0, 0, o, s, x, o, S = [], h), g), o, g, h, s, r ? S : g);
+                    kt(e, w, w, r && _t(Zn(e, w, w, 0, 0, o, s, x, o, S = [], m), g), o, g, m, s, r ? S : g);
                     break;
                   default:
                     kt(C, w, w, w, [""], g, 0, s, g);
                 }
         }
-        u = f = v = 0, l = b = 1, x = C = "", h = a;
+        u = h = v = 0, l = b = 1, x = C = "", m = a;
         break;
       case 58:
-        h = 1 + ye(C), v = y;
+        m = 1 + ye(C), v = y;
       default:
         if (l < 1) {
           if (_ == 123)
@@ -3244,13 +3217,13 @@ function kt(e, t, n, r, o, i, a, s, d) {
         }
         switch (C += Ut(_), _ * l) {
           case 38:
-            b = f > 0 ? 1 : (C += "\f", -1);
+            b = h > 0 ? 1 : (C += "\f", -1);
             break;
           case 44:
             s[u++] = (ye(C) - 1) * b, b = 1;
             break;
           case 64:
-            be() === 45 && (C += Et(ae())), p = be(), f = h = ye(x = C += Es(Ct())), _++;
+            be() === 45 && (C += Et(ae())), p = be(), h = m = ye(x = C += Es(Ct())), _++;
             break;
           case 45:
             y === 45 && ye(C) == 2 && (l = 0);
@@ -3258,20 +3231,20 @@ function kt(e, t, n, r, o, i, a, s, d) {
     }
   return i;
 }
-function Zn(e, t, n, r, o, i, a, s, d, u, f) {
-  for (var h = o - 1, p = o === 0 ? i : [""], v = On(p), y = 0, l = 0, m = 0; y < r; ++y)
-    for (var b = 0, _ = lt(e, h + 1, h = ps(l = a[y])), x = e; b < v; ++b)
-      (x = Qr(l > 0 ? p[b] + " " + _ : $(_, /&\f/g, p[b]))) && (d[m++] = x);
-  return qt(e, t, n, o === 0 ? kn : s, d, u, f);
+function Zn(e, t, n, r, o, i, a, s, d, u, h) {
+  for (var m = o - 1, p = o === 0 ? i : [""], v = Nn(p), y = 0, l = 0, f = 0; y < r; ++y)
+    for (var b = 0, _ = lt(e, m + 1, m = ps(l = a[y])), x = e; b < v; ++b)
+      (x = Qr(l > 0 ? p[b] + " " + _ : $(_, /&\f/g, p[b]))) && (d[f++] = x);
+  return qt(e, t, n, o === 0 ? En : s, d, u, h);
 }
 function Ns(e, t, n) {
-  return qt(e, t, n, En, Ut(xs()), lt(e, 2, -2), 0);
+  return qt(e, t, n, Cn, Ut(xs()), lt(e, 2, -2), 0);
 }
 function Jn(e, t, n, r) {
-  return qt(e, t, n, Nn, lt(e, 0, r), lt(e, r + 1, -1), r);
+  return qt(e, t, n, kn, lt(e, 0, r), lt(e, r + 1, -1), r);
 }
 function Ge(e, t) {
-  for (var n = "", r = On(e), o = 0; o < r; o++)
+  for (var n = "", r = Nn(e), o = 0; o < r; o++)
     n += t(e[o], o, e, t) || "";
   return n;
 }
@@ -3281,19 +3254,19 @@ function Os(e, t, n, r) {
       if (e.children.length)
         break;
     case hs:
-    case Nn:
+    case kn:
       return e.return = e.return || e.value;
-    case En:
+    case Cn:
       return "";
     case Xr:
       return e.return = e.value + "{" + Ge(e.children, r) + "}";
-    case kn:
+    case En:
       e.value = e.props.join(",");
   }
   return ye(n = Ge(e.children, r)) ? e.return = e.value + "{" + n + "}" : "";
 }
 function Ts(e) {
-  var t = On(e);
+  var t = Nn(e);
   return function(n, r, o, i) {
     for (var a = "", s = 0; s < t; s++)
       a += e[s](n, r, o, i) || "";
@@ -3341,8 +3314,8 @@ var Ms = function(t, n, r) {
     if (!(t.props.length === 1 && n.charCodeAt(0) !== 58 && !Xn.get(r)) && !o) {
       Xn.set(t, !0);
       for (var i = [], a = As(n, i), s = r.props, d = 0, u = 0; d < a.length; d++)
-        for (var f = 0; f < s.length; f++, u++)
-          t.props[u] = i[d] ? a[d].replace(/&\f/g, s[f]) : s[f] + " " + a[d];
+        for (var h = 0; h < s.length; h++, u++)
+          t.props[u] = i[d] ? a[d].replace(/&\f/g, s[h]) : s[h] + " " + a[d];
     }
   }
 }, Rs = function(t) {
@@ -3372,8 +3345,8 @@ var Ms = function(t, n, r) {
             break;
           }
         }
-        i.forEach(function(f) {
-          console.error('The pseudo class "' + f + '" is potentially unsafe when doing server-side rendering. Try changing it to "' + f.split("-child")[0] + '-of-type".');
+        i.forEach(function(h) {
+          console.error('The pseudo class "' + h + '" is potentially unsafe when doing server-side rendering. Try changing it to "' + h.split("-child")[0] + '-of-type".');
         });
       }
     }
@@ -3477,14 +3450,14 @@ function oo(e, t) {
           case 102:
             return $(e, /(.+:)(.+)-([^]+)/, "$1" + M + "$2-$3$1" + At + (X(e, t + 3) == 108 ? "$3" : "$2-$3")) + e;
           case 115:
-            return ~dn(e, "stretch") ? oo($(e, "stretch", "fill-available"), t) + e : e;
+            return ~cn(e, "stretch") ? oo($(e, "stretch", "fill-available"), t) + e : e;
         }
       break;
     case 4949:
       if (X(e, t + 1) !== 115)
         break;
     case 6444:
-      switch (X(e, ye(e) - 3 - (~dn(e, "!important") && 10))) {
+      switch (X(e, ye(e) - 3 - (~cn(e, "!important") && 10))) {
         case 107:
           return $(e, ":", ":" + M) + e;
         case 101:
@@ -3507,14 +3480,14 @@ function oo(e, t) {
 var Vs = function(t, n, r, o) {
   if (t.length > -1 && !t.return)
     switch (t.type) {
-      case Nn:
+      case kn:
         t.return = oo(t.value, t.length);
         break;
       case Xr:
         return Ge([rt(t, {
           value: $(t.value, "@", "@" + M)
         })], o);
-      case kn:
+      case En:
         if (t.length)
           return bs(t.props, function(i) {
             switch (vs(i, /(::plac\w+|:read-\w+)/)) {
@@ -3543,8 +3516,8 @@ If multiple caches share the same key they might "fight" for each other's style
   if (n === "css") {
     var r = document.querySelectorAll("style[data-emotion]:not([data-s])");
     Array.prototype.forEach.call(r, function(l) {
-      var m = l.getAttribute("data-emotion");
-      m.indexOf(" ") !== -1 && (document.head.appendChild(l), l.setAttribute("data-s", ""));
+      var f = l.getAttribute("data-emotion");
+      f.indexOf(" ") !== -1 && (document.head.appendChild(l), l.setAttribute("data-s", ""));
     });
   }
   var o = t.stylisPlugins || Hs;
@@ -3556,8 +3529,8 @@ If multiple caches share the same key they might "fight" for each other's style
     // means that the style elements we're looking at are only Emotion 11 server-rendered style elements
     document.querySelectorAll('style[data-emotion^="' + n + ' "]'),
     function(l) {
-      for (var m = l.getAttribute("data-emotion").split(" "), b = 1; b < m.length; b++)
-        i[m[b]] = !0;
+      for (var f = l.getAttribute("data-emotion").split(" "), b = 1; b < f.length; b++)
+        i[f[b]] = !0;
       s.push(l);
     }
   );
@@ -3568,19 +3541,19 @@ If multiple caches share the same key they might "fight" for each other's style
     }
   }), js);
   {
-    var f, h = [Os, process.env.NODE_ENV !== "production" ? function(l) {
-      l.root || (l.return ? f.insert(l.return) : l.value && l.type !== En && f.insert(l.value + "{}"));
+    var h, m = [Os, process.env.NODE_ENV !== "production" ? function(l) {
+      l.root || (l.return ? h.insert(l.return) : l.value && l.type !== Cn && h.insert(l.value + "{}"));
     } : Is(function(l) {
-      f.insert(l);
-    })], p = Ts(u.concat(o, h)), v = function(m) {
-      return Ge(ks(m), p);
+      h.insert(l);
+    })], p = Ts(u.concat(o, m)), v = function(f) {
+      return Ge(ks(f), p);
     };
-    d = function(m, b, _, x) {
-      f = _, process.env.NODE_ENV !== "production" && b.map !== void 0 && (f = {
+    d = function(f, b, _, x) {
+      h = _, process.env.NODE_ENV !== "production" && b.map !== void 0 && (h = {
         insert: function(g) {
           _.insert(g + b.map);
         }
-      }), v(m ? m + "{" + b.styles + "}" : b.styles), x && (y.inserted[b.name] = !0);
+      }), v(f ? f + "{" + b.styles + "}" : b.styles), x && (y.inserted[b.name] = !0);
     };
   }
   var y = {
@@ -3599,7 +3572,7 @@ If multiple caches share the same key they might "fight" for each other's style
     insert: d
   };
   return y.sheet.hydrate(s), y;
-}, fn = { exports: {} }, R = {};
+}, un = { exports: {} }, R = {};
 /** @license React v16.13.1
  * react-is.production.min.js
  *
@@ -3613,7 +3586,7 @@ function Bs() {
   if (er)
     return R;
   er = 1;
-  var e = typeof Symbol == "function" && Symbol.for, t = e ? Symbol.for("react.element") : 60103, n = e ? Symbol.for("react.portal") : 60106, r = e ? Symbol.for("react.fragment") : 60107, o = e ? Symbol.for("react.strict_mode") : 60108, i = e ? Symbol.for("react.profiler") : 60114, a = e ? Symbol.for("react.provider") : 60109, s = e ? Symbol.for("react.context") : 60110, d = e ? Symbol.for("react.async_mode") : 60111, u = e ? Symbol.for("react.concurrent_mode") : 60111, f = e ? Symbol.for("react.forward_ref") : 60112, h = e ? Symbol.for("react.suspense") : 60113, p = e ? Symbol.for("react.suspense_list") : 60120, v = e ? Symbol.for("react.memo") : 60115, y = e ? Symbol.for("react.lazy") : 60116, l = e ? Symbol.for("react.block") : 60121, m = e ? Symbol.for("react.fundamental") : 60117, b = e ? Symbol.for("react.responder") : 60118, _ = e ? Symbol.for("react.scope") : 60119;
+  var e = typeof Symbol == "function" && Symbol.for, t = e ? Symbol.for("react.element") : 60103, n = e ? Symbol.for("react.portal") : 60106, r = e ? Symbol.for("react.fragment") : 60107, o = e ? Symbol.for("react.strict_mode") : 60108, i = e ? Symbol.for("react.profiler") : 60114, a = e ? Symbol.for("react.provider") : 60109, s = e ? Symbol.for("react.context") : 60110, d = e ? Symbol.for("react.async_mode") : 60111, u = e ? Symbol.for("react.concurrent_mode") : 60111, h = e ? Symbol.for("react.forward_ref") : 60112, m = e ? Symbol.for("react.suspense") : 60113, p = e ? Symbol.for("react.suspense_list") : 60120, v = e ? Symbol.for("react.memo") : 60115, y = e ? Symbol.for("react.lazy") : 60116, l = e ? Symbol.for("react.block") : 60121, f = e ? Symbol.for("react.fundamental") : 60117, b = e ? Symbol.for("react.responder") : 60118, _ = e ? Symbol.for("react.scope") : 60119;
   function x(g) {
     if (typeof g == "object" && g !== null) {
       var w = g.$$typeof;
@@ -3625,12 +3598,12 @@ function Bs() {
             case r:
             case i:
             case o:
-            case h:
+            case m:
               return g;
             default:
               switch (g = g && g.$$typeof, g) {
                 case s:
-                case f:
+                case h:
                 case y:
                 case v:
                 case a:
@@ -3647,7 +3620,7 @@ function Bs() {
   function S(g) {
     return x(g) === u;
   }
-  return R.AsyncMode = d, R.ConcurrentMode = u, R.ContextConsumer = s, R.ContextProvider = a, R.Element = t, R.ForwardRef = f, R.Fragment = r, R.Lazy = y, R.Memo = v, R.Portal = n, R.Profiler = i, R.StrictMode = o, R.Suspense = h, R.isAsyncMode = function(g) {
+  return R.AsyncMode = d, R.ConcurrentMode = u, R.ContextConsumer = s, R.ContextProvider = a, R.Element = t, R.ForwardRef = h, R.Fragment = r, R.Lazy = y, R.Memo = v, R.Portal = n, R.Profiler = i, R.StrictMode = o, R.Suspense = m, R.isAsyncMode = function(g) {
     return S(g) || x(g) === d;
   }, R.isConcurrentMode = S, R.isContextConsumer = function(g) {
     return x(g) === s;
@@ -3656,7 +3629,7 @@ function Bs() {
   }, R.isElement = function(g) {
     return typeof g == "object" && g !== null && g.$$typeof === t;
   }, R.isForwardRef = function(g) {
-    return x(g) === f;
+    return x(g) === h;
   }, R.isFragment = function(g) {
     return x(g) === r;
   }, R.isLazy = function(g) {
@@ -3670,9 +3643,9 @@ function Bs() {
   }, R.isStrictMode = function(g) {
     return x(g) === o;
   }, R.isSuspense = function(g) {
-    return x(g) === h;
+    return x(g) === m;
   }, R.isValidElementType = function(g) {
-    return typeof g == "string" || typeof g == "function" || g === r || g === u || g === i || g === o || g === h || g === p || typeof g == "object" && g !== null && (g.$$typeof === y || g.$$typeof === v || g.$$typeof === a || g.$$typeof === s || g.$$typeof === f || g.$$typeof === m || g.$$typeof === b || g.$$typeof === _ || g.$$typeof === l);
+    return typeof g == "string" || typeof g == "function" || g === r || g === u || g === i || g === o || g === m || g === p || typeof g == "object" && g !== null && (g.$$typeof === y || g.$$typeof === v || g.$$typeof === a || g.$$typeof === s || g.$$typeof === h || g.$$typeof === f || g.$$typeof === b || g.$$typeof === _ || g.$$typeof === l);
   }, R.typeOf = x, R;
 }
 var D = {};
@@ -3687,10 +3660,10 @@ var D = {};
 var tr;
 function Ws() {
   return tr || (tr = 1, process.env.NODE_ENV !== "production" && function() {
-    var e = typeof Symbol == "function" && Symbol.for, t = e ? Symbol.for("react.element") : 60103, n = e ? Symbol.for("react.portal") : 60106, r = e ? Symbol.for("react.fragment") : 60107, o = e ? Symbol.for("react.strict_mode") : 60108, i = e ? Symbol.for("react.profiler") : 60114, a = e ? Symbol.for("react.provider") : 60109, s = e ? Symbol.for("react.context") : 60110, d = e ? Symbol.for("react.async_mode") : 60111, u = e ? Symbol.for("react.concurrent_mode") : 60111, f = e ? Symbol.for("react.forward_ref") : 60112, h = e ? Symbol.for("react.suspense") : 60113, p = e ? Symbol.for("react.suspense_list") : 60120, v = e ? Symbol.for("react.memo") : 60115, y = e ? Symbol.for("react.lazy") : 60116, l = e ? Symbol.for("react.block") : 60121, m = e ? Symbol.for("react.fundamental") : 60117, b = e ? Symbol.for("react.responder") : 60118, _ = e ? Symbol.for("react.scope") : 60119;
+    var e = typeof Symbol == "function" && Symbol.for, t = e ? Symbol.for("react.element") : 60103, n = e ? Symbol.for("react.portal") : 60106, r = e ? Symbol.for("react.fragment") : 60107, o = e ? Symbol.for("react.strict_mode") : 60108, i = e ? Symbol.for("react.profiler") : 60114, a = e ? Symbol.for("react.provider") : 60109, s = e ? Symbol.for("react.context") : 60110, d = e ? Symbol.for("react.async_mode") : 60111, u = e ? Symbol.for("react.concurrent_mode") : 60111, h = e ? Symbol.for("react.forward_ref") : 60112, m = e ? Symbol.for("react.suspense") : 60113, p = e ? Symbol.for("react.suspense_list") : 60120, v = e ? Symbol.for("react.memo") : 60115, y = e ? Symbol.for("react.lazy") : 60116, l = e ? Symbol.for("react.block") : 60121, f = e ? Symbol.for("react.fundamental") : 60117, b = e ? Symbol.for("react.responder") : 60118, _ = e ? Symbol.for("react.scope") : 60119;
     function x(E) {
       return typeof E == "string" || typeof E == "function" || // Note: its typeof might be other than 'symbol' or 'number' if it's a polyfill.
-      E === r || E === u || E === i || E === o || E === h || E === p || typeof E == "object" && E !== null && (E.$$typeof === y || E.$$typeof === v || E.$$typeof === a || E.$$typeof === s || E.$$typeof === f || E.$$typeof === m || E.$$typeof === b || E.$$typeof === _ || E.$$typeof === l);
+      E === r || E === u || E === i || E === o || E === m || E === p || typeof E == "object" && E !== null && (E.$$typeof === y || E.$$typeof === v || E.$$typeof === a || E.$$typeof === s || E.$$typeof === h || E.$$typeof === f || E.$$typeof === b || E.$$typeof === _ || E.$$typeof === l);
     }
     function S(E) {
       if (typeof E == "object" && E !== null) {
@@ -3704,13 +3677,13 @@ function Ws() {
               case r:
               case i:
               case o:
-              case h:
+              case m:
                 return k;
               default:
                 var Fe = k && k.$$typeof;
                 switch (Fe) {
                   case s:
-                  case f:
+                  case h:
                   case y:
                   case v:
                   case a:
@@ -3724,7 +3697,7 @@ function Ws() {
         }
       }
     }
-    var g = d, w = u, C = s, T = a, O = t, V = f, z = r, H = y, G = v, re = n, K = i, te = o, me = h, se = !1;
+    var g = d, w = u, C = s, T = a, O = t, V = h, z = r, H = y, G = v, re = n, K = i, te = o, me = m, se = !1;
     function le(E) {
       return se || (se = !0, console.warn("The ReactIs.isAsyncMode() alias has been deprecated, and will be removed in React 17+. Update your code to use ReactIs.isConcurrentMode() instead. It has the exact same API.")), ge(E) || S(E) === d;
     }
@@ -3741,7 +3714,7 @@ function Ws() {
       return typeof E == "object" && E !== null && E.$$typeof === t;
     }
     function _e(E) {
-      return S(E) === f;
+      return S(E) === h;
     }
     function ze(E) {
       return S(E) === r;
@@ -3762,13 +3735,13 @@ function Ws() {
       return S(E) === o;
     }
     function nn(E) {
-      return S(E) === h;
+      return S(E) === m;
     }
     D.AsyncMode = g, D.ConcurrentMode = w, D.ContextConsumer = C, D.ContextProvider = T, D.Element = O, D.ForwardRef = V, D.Fragment = z, D.Lazy = H, D.Memo = G, D.Portal = re, D.Profiler = K, D.StrictMode = te, D.Suspense = me, D.isAsyncMode = le, D.isConcurrentMode = ge, D.isContextConsumer = et, D.isContextProvider = tt, D.isElement = De, D.isForwardRef = _e, D.isFragment = ze, D.isLazy = Jt, D.isMemo = Xt, D.isPortal = Qt, D.isProfiler = en, D.isStrictMode = tn, D.isSuspense = nn, D.isValidElementType = x, D.typeOf = S;
   }()), D;
 }
-process.env.NODE_ENV === "production" ? fn.exports = Bs() : fn.exports = Ws();
-var Us = fn.exports, ao = Us, Ys = {
+process.env.NODE_ENV === "production" ? un.exports = Bs() : un.exports = Ws();
+var Us = un.exports, ao = Us, Ys = {
   $$typeof: !0,
   render: !0,
   defaultProps: !0,
@@ -3785,7 +3758,7 @@ var Us = fn.exports, ao = Us, Ys = {
 so[ao.ForwardRef] = Ys;
 so[ao.Memo] = qs;
 var Gs = !0;
-function Tn(e, t, n) {
+function On(e, t, n) {
   var r = "";
   return n.split(" ").forEach(function(o) {
     e[o] !== void 0 ? t.push(e[o] + ";") : r += o + " ";
@@ -3883,12 +3856,12 @@ var Zs = {
 }, nr = `You have illegal escape sequence in your template literal, most likely inside content's property value.
 Because you write your CSS inside a JavaScript string you actually have to do double escaping, so for example "content: '\\00d7';" should become "content: '\\\\00d7';".
 You can read more about this here:
-https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences`, Js = "You have passed in falsy value as style object's key (can happen when in example you pass unexported component as computed key).", Xs = /[A-Z]|^ms/g, lo = /_EMO_([^_]+?)_([^]*?)_EMO_/g, In = function(t) {
+https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences`, Js = "You have passed in falsy value as style object's key (can happen when in example you pass unexported component as computed key).", Xs = /[A-Z]|^ms/g, lo = /_EMO_([^_]+?)_([^]*?)_EMO_/g, Tn = function(t) {
   return t.charCodeAt(1) === 45;
 }, rr = function(t) {
   return t != null && typeof t != "boolean";
 }, rn = /* @__PURE__ */ Jr(function(e) {
-  return In(e) ? e : e.replace(Xs, "-$&").toLowerCase();
+  return Tn(e) ? e : e.replace(Xs, "-$&").toLowerCase();
 }), Pt = function(t, n) {
   switch (t) {
     case "animation":
@@ -3902,7 +3875,7 @@ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_liter
           }, o;
         });
   }
-  return Zs[t] !== 1 && !In(t) && typeof n == "number" && n !== 0 ? n + "px" : n;
+  return Zs[t] !== 1 && !Tn(t) && typeof n == "number" && n !== 0 ? n + "px" : n;
 };
 if (process.env.NODE_ENV !== "production") {
   var Qs = /(var|attr|counters?|url|element|(((repeating-)?(linear|radial))|conic)-gradient)\(|(no-)?(open|close)-quote/, el = ["normal", "none", "initial", "inherit", "unset"], tl = Pt, nl = /^-ms-/, rl = /-(.)/g, or = {};
@@ -3910,7 +3883,7 @@ if (process.env.NODE_ENV !== "production") {
     if (t === "content" && (typeof n != "string" || el.indexOf(n) === -1 && !Qs.test(n) && (n.charAt(0) !== n.charAt(n.length - 1) || n.charAt(0) !== '"' && n.charAt(0) !== "'")))
       throw new Error("You seem to be using a value for 'content' without quotes, try replacing it with `content: '\"" + n + "\"'`");
     var r = tl(t, n);
-    return r !== "" && !In(t) && t.indexOf("-") !== -1 && or[t] === void 0 && (or[t] = !0, console.error("Using kebab-case for css properties in objects is not supported. Did you mean " + t.replace(nl, "ms-").replace(rl, function(o, i) {
+    return r !== "" && !Tn(t) && t.indexOf("-") !== -1 && or[t] === void 0 && (or[t] = !0, console.error("Using kebab-case for css properties in objects is not supported. Did you mean " + t.replace(nl, "ms-").replace(rl, function(o, i) {
       return i.toUpperCase();
     }) + "?")), r;
   };
@@ -3958,7 +3931,7 @@ function dt(e, t, n) {
     }
     case "string":
       if (process.env.NODE_ENV !== "production") {
-        var s = [], d = n.replace(lo, function(f, h, p) {
+        var s = [], d = n.replace(lo, function(h, m, p) {
           var v = "animation" + s.length;
           return s.push("const " + v + " = keyframes`" + p.replace(/^@keyframes animation-\w+/, "") + "`"), "${" + v + "}";
         });
@@ -4023,12 +3996,12 @@ var pe, Ze = function(t, n, r) {
   process.env.NODE_ENV !== "production" && (i = i.replace(uo, function(p) {
     return d = p, "";
   })), ir.lastIndex = 0;
-  for (var u = "", f; (f = ir.exec(i)) !== null; )
+  for (var u = "", h; (h = ir.exec(i)) !== null; )
     u += "-" + // $FlowFixMe we know it's not null
-    f[1];
-  var h = Ks(i) + u;
+    h[1];
+  var m = Ks(i) + u;
   return process.env.NODE_ENV !== "production" ? {
-    name: h,
+    name: m,
     styles: i,
     map: d,
     next: pe,
@@ -4036,13 +4009,13 @@ var pe, Ze = function(t, n, r) {
       return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
     }
   } : {
-    name: h,
+    name: m,
     styles: i,
     next: pe
   };
 }, il = function(t) {
   return t();
-}, fo = j["useInsertionEffect"] ? j["useInsertionEffect"] : !1, Mn = fo || il, ar = fo || j.useLayoutEffect, al = {}.hasOwnProperty, $n = /* @__PURE__ */ j.createContext(
+}, fo = j["useInsertionEffect"] ? j["useInsertionEffect"] : !1, In = fo || il, ar = fo || j.useLayoutEffect, al = {}.hasOwnProperty, Mn = /* @__PURE__ */ j.createContext(
   // we're doing this to avoid preconstruct's dead code elimination in this one case
   // because this module is primarily intended for the browser and node
   // but it's also required in react native and similar environments sometimes
@@ -4053,24 +4026,24 @@ var pe, Ze = function(t, n, r) {
     key: "css"
   }) : null
 );
-process.env.NODE_ENV !== "production" && ($n.displayName = "EmotionCacheContext");
-var sl = $n.Provider, Zt = function(t) {
+process.env.NODE_ENV !== "production" && (Mn.displayName = "EmotionCacheContext");
+var sl = Mn.Provider, Zt = function(t) {
   return /* @__PURE__ */ Mo(function(n, r) {
-    var o = Oe($n);
+    var o = Oe(Mn);
     return t(n, o, r);
   });
 }, Re = /* @__PURE__ */ j.createContext({});
 process.env.NODE_ENV !== "production" && (Re.displayName = "EmotionThemeContext");
 var sr = "__EMOTION_TYPE_PLEASE_DO_NOT_USE__", lr = "__EMOTION_LABEL_PLEASE_DO_NOT_USE__", ll = function(t) {
   var n = t.cache, r = t.serialized, o = t.isStringTag;
-  return Gt(n, r, o), Mn(function() {
+  return Gt(n, r, o), In(function() {
     return Kt(n, r, o);
   }), null;
 }, cl = /* @__PURE__ */ Zt(function(e, t, n) {
   var r = e.css;
   typeof r == "string" && t.registered[r] !== void 0 && (r = t.registered[r]);
   var o = e[sr], i = [r], a = "";
-  typeof e.className == "string" ? a = Tn(t.registered, i, e.className) : e.className != null && (a = e.className + " ");
+  typeof e.className == "string" ? a = On(t.registered, i, e.className) : e.className != null && (a = e.className + " ");
   var s = Ze(i, void 0, j.useContext(Re));
   if (process.env.NODE_ENV !== "production" && s.name.indexOf("-") === -1) {
     var d = e[lr];
@@ -4078,8 +4051,8 @@ var sr = "__EMOTION_TYPE_PLEASE_DO_NOT_USE__", lr = "__EMOTION_LABEL_PLEASE_DO_N
   }
   a += t.key + "-" + s.name;
   var u = {};
-  for (var f in e)
-    al.call(e, f) && f !== "css" && f !== sr && (process.env.NODE_ENV === "production" || f !== lr) && (u[f] = e[f]);
+  for (var h in e)
+    al.call(e, h) && h !== "css" && h !== sr && (process.env.NODE_ENV === "production" || h !== lr) && (u[h] = e[h]);
   return u.ref = n, u.className = a, /* @__PURE__ */ j.createElement(j.Fragment, null, /* @__PURE__ */ j.createElement(ll, {
     cache: t,
     serialized: s,
@@ -4290,12 +4263,12 @@ var ul = function() {
   return o;
 };
 function hl(e, t, n) {
-  var r = [], o = Tn(e, r, n);
+  var r = [], o = On(e, r, n);
   return r.length < 2 ? n : o + t(r);
 }
 var ml = function(t) {
   var n = t.cache, r = t.serializedArr;
-  return Mn(function() {
+  return In(function() {
     for (var o = 0; o < r.length; o++)
       Kt(n, r[o], !1);
   }), null;
@@ -4303,16 +4276,16 @@ var ml = function(t) {
   var n = !1, r = [], o = function() {
     if (n && process.env.NODE_ENV !== "production")
       throw new Error("css can only be used during render");
-    for (var u = arguments.length, f = new Array(u), h = 0; h < u; h++)
-      f[h] = arguments[h];
-    var p = Ze(f, t.registered);
+    for (var u = arguments.length, h = new Array(u), m = 0; m < u; m++)
+      h[m] = arguments[m];
+    var p = Ze(h, t.registered);
     return r.push(p), Gt(t, p, !1), t.key + "-" + p.name;
   }, i = function() {
     if (n && process.env.NODE_ENV !== "production")
       throw new Error("cx can only be used during render");
-    for (var u = arguments.length, f = new Array(u), h = 0; h < u; h++)
-      f[h] = arguments[h];
-    return hl(t.registered, o, fl(f));
+    for (var u = arguments.length, h = new Array(u), m = 0; m < u; m++)
+      h[m] = arguments[m];
+    return hl(t.registered, o, fl(h));
   }, a = {
     css: o,
     cx: i,
@@ -4355,7 +4328,7 @@ Because you write your CSS inside a JavaScript string you actually have to do do
 You can read more about this here:
 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences`, bl = function(t) {
   var n = t.cache, r = t.serialized, o = t.isStringTag;
-  return Gt(n, r, o), Mn(function() {
+  return Gt(n, r, o), In(function() {
     return Kt(n, r, o);
   }), null;
 }, xl = function e(t, n) {
@@ -4366,15 +4339,15 @@ You may have forgotten to import it.`);
   n !== void 0 && (i = n.label, a = n.target);
   var s = mr(t, n, r), d = s || hr(o), u = !d("as");
   return function() {
-    var f = arguments, h = r && t.__emotion_styles !== void 0 ? t.__emotion_styles.slice(0) : [];
-    if (i !== void 0 && h.push("label:" + i + ";"), f[0] == null || f[0].raw === void 0)
-      h.push.apply(h, f);
+    var h = arguments, m = r && t.__emotion_styles !== void 0 ? t.__emotion_styles.slice(0) : [];
+    if (i !== void 0 && m.push("label:" + i + ";"), h[0] == null || h[0].raw === void 0)
+      m.push.apply(m, h);
     else {
-      process.env.NODE_ENV !== "production" && f[0][0] === void 0 && console.error(pr), h.push(f[0][0]);
-      for (var p = f.length, v = 1; v < p; v++)
-        process.env.NODE_ENV !== "production" && f[0][v] === void 0 && console.error(pr), h.push(f[v], f[0][v]);
+      process.env.NODE_ENV !== "production" && h[0][0] === void 0 && console.error(pr), m.push(h[0][0]);
+      for (var p = h.length, v = 1; v < p; v++)
+        process.env.NODE_ENV !== "production" && h[0][v] === void 0 && console.error(pr), m.push(h[v], h[0][v]);
     }
-    var y = Zt(function(l, m, b) {
+    var y = Zt(function(l, f, b) {
       var _ = u && l.as || o, x = "", S = [], g = l;
       if (l.theme == null) {
         g = {};
@@ -4382,27 +4355,27 @@ You may have forgotten to import it.`);
           g[w] = l[w];
         g.theme = j.useContext(Re);
       }
-      typeof l.className == "string" ? x = Tn(m.registered, S, l.className) : l.className != null && (x = l.className + " ");
-      var C = Ze(h.concat(S), m.registered, g);
-      x += m.key + "-" + C.name, a !== void 0 && (x += " " + a);
+      typeof l.className == "string" ? x = On(f.registered, S, l.className) : l.className != null && (x = l.className + " ");
+      var C = Ze(m.concat(S), f.registered, g);
+      x += f.key + "-" + C.name, a !== void 0 && (x += " " + a);
       var T = u && s === void 0 ? hr(_) : d, O = {};
       for (var V in l)
         u && V === "as" || // $FlowFixMe
         T(V) && (O[V] = l[V]);
       return O.className = x, O.ref = b, /* @__PURE__ */ j.createElement(j.Fragment, null, /* @__PURE__ */ j.createElement(bl, {
-        cache: m,
+        cache: f,
         serialized: C,
         isStringTag: typeof _ == "string"
       }), /* @__PURE__ */ j.createElement(_, O));
     });
-    return y.displayName = i !== void 0 ? i : "Styled(" + (typeof o == "string" ? o : o.displayName || o.name || "Component") + ")", y.defaultProps = t.defaultProps, y.__emotion_real = y, y.__emotion_base = o, y.__emotion_styles = h, y.__emotion_forwardProp = s, Object.defineProperty(y, "toString", {
+    return y.displayName = i !== void 0 ? i : "Styled(" + (typeof o == "string" ? o : o.displayName || o.name || "Component") + ")", y.defaultProps = t.defaultProps, y.__emotion_real = y, y.__emotion_base = o, y.__emotion_styles = m, y.__emotion_forwardProp = s, Object.defineProperty(y, "toString", {
       value: function() {
         return a === void 0 && process.env.NODE_ENV !== "production" ? "NO_COMPONENT_SELECTOR" : "." + a;
       }
-    }), y.withComponent = function(l, m) {
-      return e(l, L({}, n, m, {
-        shouldForwardProp: mr(y, m, !0)
-      })).apply(void 0, h);
+    }), y.withComponent = function(l, f) {
+      return e(l, F({}, n, f, {
+        shouldForwardProp: mr(y, f, !0)
+      })).apply(void 0, m);
     }, y;
   };
 }, _l = [
@@ -4541,12 +4514,12 @@ You may have forgotten to import it.`);
   "svg",
   "text",
   "tspan"
-], hn = xl.bind();
+], fn = xl.bind();
 _l.forEach(function(e) {
-  hn[e] = hn(e);
+  fn[e] = fn(e);
 });
-let mn;
-typeof document == "object" && (mn = io({
+let hn;
+typeof document == "object" && (hn = io({
   key: "css",
   prepend: !0
 }));
@@ -4555,8 +4528,8 @@ function po(e) {
     injectFirst: t,
     children: n
   } = e;
-  return t && mn ? /* @__PURE__ */ c(sl, {
-    value: mn,
+  return t && hn ? /* @__PURE__ */ c(sl, {
+    value: hn,
     children: n
   }) : n;
 }
@@ -4596,7 +4569,7 @@ process.env.NODE_ENV !== "production" && (go.propTypes = {
  * LICENSE file in the root directory of this source tree.
  */
 function Sl(e, t) {
-  const n = hn(e, t);
+  const n = fn(e, t);
   return process.env.NODE_ENV !== "production" ? (...r) => {
     const o = typeof e == "string" ? `"${e}"` : "component";
     return r.length === 0 ? console.error([`MUI: Seems like you called \`styled(${o})()\` without a \`style\` argument.`, 'You must provide a `styles` argument: `styled("div")(styleYouForgotToPass)`.'].join(`
@@ -4622,7 +4595,7 @@ function Nl(e = null) {
   const t = j.useContext(Re);
   return !t || kl(t) ? e : t;
 }
-const Ol = Cn();
+const Ol = Sn();
 function Tl(e = Ol) {
   return Nl(e);
 }
@@ -4659,20 +4632,20 @@ function Al(e) {
   let i;
   return Array.isArray(t) ? i = [r, ...t] : typeof t == "function" ? i = (...a) => {
     const s = t(...a);
-    return Ne(s) ? L({}, r, s) : r;
-  } : i = L({}, r, t), L({}, o, {
+    return Ne(s) ? F({}, r, s) : r;
+  } : i = F({}, r, t), F({}, o, {
     sx: i
   });
 }
 const Pl = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  default: Sn,
+  default: wn,
   extendSxProp: Al,
   unstable_createStyleFunctionSx: Gr,
   unstable_defaultSxConfig: mt
 }, Symbol.toStringTag, { value: "Module" }));
 function Rl(e, t) {
-  return L({
+  return F({
     toolbar: {
       minHeight: 56,
       [e.up("xs")]: {
@@ -4704,14 +4677,14 @@ Object.defineProperty(q, "__esModule", {
 q.alpha = So;
 q.blend = Kl;
 q.colorChannel = void 0;
-var Fl = q.darken = Pn;
+var Fl = q.darken = An;
 q.decomposeColor = fe;
 q.emphasize = Gl;
 var gr = q.getContrastRatio = Wl;
 q.getLuminance = Rt;
 q.hexToRgb = xo;
 q.hslToRgb = wo;
-var Ll = q.lighten = Rn;
+var Ll = q.lighten = Pn;
 q.private_safeAlpha = Ul;
 q.private_safeColorChannel = void 0;
 q.private_safeDarken = Yl;
@@ -4720,7 +4693,7 @@ q.private_safeLighten = ql;
 q.recomposeColor = Xe;
 q.rgbToHex = Bl;
 var yr = bo(Dl), jl = bo(zl);
-function An(e, t = 0, n = 1) {
+function $n(e, t = 0, n = 1) {
   return process.env.NODE_ENV !== "production" && (e < t || e > n) && console.error(`MUI: The value provided ${e} is out of range [${t}, ${n}].`), (0, jl.default)(e, t, n);
 }
 function xo(e) {
@@ -4790,7 +4763,7 @@ function wo(e) {
   e = fe(e);
   const {
     values: t
-  } = e, n = t[0], r = t[1] / 100, o = t[2] / 100, i = r * Math.min(o, 1 - o), a = (u, f = (u + n / 30) % 12) => o - i * Math.max(Math.min(f - 3, 9 - f, 1), -1);
+  } = e, n = t[0], r = t[1] / 100, o = t[2] / 100, i = r * Math.min(o, 1 - o), a = (u, h = (u + n / 30) % 12) => o - i * Math.max(Math.min(h - 3, 9 - h, 1), -1);
   let s = "rgb";
   const d = [Math.round(a(0) * 255), Math.round(a(8) * 255), Math.round(a(4) * 255)];
   return e.type === "hsla" && (s += "a", d.push(t[3])), Xe({
@@ -4808,7 +4781,7 @@ function Wl(e, t) {
   return (Math.max(n, r) + 0.05) / (Math.min(n, r) + 0.05);
 }
 function So(e, t) {
-  return e = fe(e), t = An(t), (e.type === "rgb" || e.type === "hsl") && (e.type += "a"), e.type === "color" ? e.values[3] = `/${t}` : e.values[3] = t, Xe(e);
+  return e = fe(e), t = $n(t), (e.type === "rgb" || e.type === "hsl") && (e.type += "a"), e.type === "color" ? e.values[3] = `/${t}` : e.values[3] = t, Xe(e);
 }
 function Ul(e, t, n) {
   try {
@@ -4817,8 +4790,8 @@ function Ul(e, t, n) {
     return n && process.env.NODE_ENV !== "production" && console.warn(n), e;
   }
 }
-function Pn(e, t) {
-  if (e = fe(e), t = An(t), e.type.indexOf("hsl") !== -1)
+function An(e, t) {
+  if (e = fe(e), t = $n(t), e.type.indexOf("hsl") !== -1)
     e.values[2] *= 1 - t;
   else if (e.type.indexOf("rgb") !== -1 || e.type.indexOf("color") !== -1)
     for (let n = 0; n < 3; n += 1)
@@ -4827,13 +4800,13 @@ function Pn(e, t) {
 }
 function Yl(e, t, n) {
   try {
-    return Pn(e, t);
+    return An(e, t);
   } catch {
     return n && process.env.NODE_ENV !== "production" && console.warn(n), e;
   }
 }
-function Rn(e, t) {
-  if (e = fe(e), t = An(t), e.type.indexOf("hsl") !== -1)
+function Pn(e, t) {
+  if (e = fe(e), t = $n(t), e.type.indexOf("hsl") !== -1)
     e.values[2] += (100 - e.values[2]) * t;
   else if (e.type.indexOf("rgb") !== -1)
     for (let n = 0; n < 3; n += 1)
@@ -4845,13 +4818,13 @@ function Rn(e, t) {
 }
 function ql(e, t, n) {
   try {
-    return Rn(e, t);
+    return Pn(e, t);
   } catch {
     return n && process.env.NODE_ENV !== "production" && console.warn(n), e;
   }
 }
 function Gl(e, t = 0.15) {
-  return Rt(e) > 0.5 ? Pn(e, t) : Rn(e, t);
+  return Rt(e) > 0.5 ? An(e, t) : Pn(e, t);
 }
 function Co(e, t, n) {
   try {
@@ -5114,28 +5087,28 @@ function f0(e) {
     mode: t = "light",
     contrastThreshold: n = 3,
     tonalOffset: r = 0.2
-  } = e, o = Te(e, i0), i = e.primary || a0(t), a = e.secondary || s0(t), s = e.error || l0(t), d = e.info || c0(t), u = e.success || d0(t), f = e.warning || u0(t);
-  function h(l) {
-    const m = gr(l, on.text.primary) >= n ? on.text.primary : vr.text.primary;
+  } = e, o = Te(e, i0), i = e.primary || a0(t), a = e.secondary || s0(t), s = e.error || l0(t), d = e.info || c0(t), u = e.success || d0(t), h = e.warning || u0(t);
+  function m(l) {
+    const f = gr(l, on.text.primary) >= n ? on.text.primary : vr.text.primary;
     if (process.env.NODE_ENV !== "production") {
-      const b = gr(l, m);
-      b < 3 && console.error([`MUI: The contrast ratio of ${b}:1 for ${m} on ${l}`, "falls below the WCAG recommended absolute minimum contrast ratio of 3:1.", "https://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-contrast"].join(`
+      const b = gr(l, f);
+      b < 3 && console.error([`MUI: The contrast ratio of ${b}:1 for ${f} on ${l}`, "falls below the WCAG recommended absolute minimum contrast ratio of 3:1.", "https://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-contrast"].join(`
 `));
     }
-    return m;
+    return f;
   }
   const p = ({
     color: l,
-    name: m,
+    name: f,
     mainShade: b = 500,
     lightShade: _ = 300,
     darkShade: x = 700
   }) => {
-    if (l = L({}, l), !l.main && l[b] && (l.main = l[b]), !l.hasOwnProperty("main"))
-      throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The color${m ? ` (${m})` : ""} provided to augmentColor(color) is invalid.
-The color object needs to have a \`main\` property or a \`${b}\` property.` : st(11, m ? ` (${m})` : "", b));
+    if (l = F({}, l), !l.main && l[b] && (l.main = l[b]), !l.hasOwnProperty("main"))
+      throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The color${f ? ` (${f})` : ""} provided to augmentColor(color) is invalid.
+The color object needs to have a \`main\` property or a \`${b}\` property.` : st(11, f ? ` (${f})` : "", b));
     if (typeof l.main != "string")
-      throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The color${m ? ` (${m})` : ""} provided to augmentColor(color) is invalid.
+      throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The color${f ? ` (${f})` : ""} provided to augmentColor(color) is invalid.
 \`color.main\` should be a string, but \`${JSON.stringify(l.main)}\` was provided instead.
 
 Did you intend to use one of the following approaches?
@@ -5148,15 +5121,15 @@ const theme1 = createTheme({ palette: {
 
 const theme2 = createTheme({ palette: {
   primary: { main: green[500] },
-} });` : st(12, m ? ` (${m})` : "", JSON.stringify(l.main)));
-    return br(l, "light", _, r), br(l, "dark", x, r), l.contrastText || (l.contrastText = h(l.main)), l;
+} });` : st(12, f ? ` (${f})` : "", JSON.stringify(l.main)));
+    return br(l, "light", _, r), br(l, "dark", x, r), l.contrastText || (l.contrastText = m(l.main)), l;
   }, v = {
     dark: on,
     light: vr
   };
-  return process.env.NODE_ENV !== "production" && (v[t] || console.error(`MUI: The palette mode \`${t}\` is not supported.`)), ve(L({
+  return process.env.NODE_ENV !== "production" && (v[t] || console.error(`MUI: The palette mode \`${t}\` is not supported.`)), ve(F({
     // A collection of common colors.
-    common: L({}, ut),
+    common: F({}, ut),
     // prevent mutable object.
     // The palette mode, can be light or dark.
     mode: t,
@@ -5180,7 +5153,7 @@ const theme2 = createTheme({ palette: {
     }),
     // The colors used to represent potentially dangerous actions or important messages.
     warning: p({
-      color: f,
+      color: h,
       name: "warning"
     }),
     // The colors used to present information to the user that is neutral and not necessarily important.
@@ -5199,7 +5172,7 @@ const theme2 = createTheme({ palette: {
     // the background and the text.
     contrastThreshold: n,
     // Takes a background color and returns the text color that maximizes the contrast.
-    getContrastText: h,
+    getContrastText: m,
     // Generate a rich color object.
     augmentColor: p,
     // Used by the functions below to shift a color's luminance by approximately
@@ -5229,11 +5202,11 @@ function p0(e, t) {
     // 16px is the default font-size used by browsers.
     htmlFontSize: u = 16,
     // Apply the CSS properties to all the variants.
-    allVariants: f,
-    pxToRem: h
+    allVariants: h,
+    pxToRem: m
   } = n, p = Te(n, h0);
   process.env.NODE_ENV !== "production" && (typeof o != "number" && console.error("MUI: `fontSize` is required to be a number."), typeof u != "number" && console.error("MUI: `htmlFontSize` is required to be a number."));
-  const v = o / 14, y = h || ((b) => `${b / u * v}rem`), l = (b, _, x, S, g) => L({
+  const v = o / 14, y = m || ((b) => `${b / u * v}rem`), l = (b, _, x, S, g) => F({
     fontFamily: r,
     fontWeight: b,
     fontSize: y(_),
@@ -5241,7 +5214,7 @@ function p0(e, t) {
     lineHeight: x
   }, r === _r ? {
     letterSpacing: `${m0(S / _)}em`
-  } : {}, g, f), m = {
+  } : {}, g, h), f = {
     h1: l(i, 96, 1.167, -1.5),
     h2: l(i, 60, 1.2, -0.5),
     h3: l(a, 48, 1.167, 0),
@@ -5264,7 +5237,7 @@ function p0(e, t) {
       letterSpacing: "inherit"
     }
   };
-  return ve(L({
+  return ve(F({
     htmlFontSize: u,
     pxToRem: y,
     fontFamily: r,
@@ -5273,7 +5246,7 @@ function p0(e, t) {
     fontWeightRegular: a,
     fontWeightMedium: s,
     fontWeightBold: d
-  }, m), p, {
+  }, f), p, {
     clone: !1
     // No need to clone deep
   });
@@ -5315,8 +5288,8 @@ function C0(e) {
   return Math.round((4 + 15 * t ** 0.25 + t / 5) * 10);
 }
 function E0(e) {
-  const t = L({}, w0, e.easing), n = L({}, S0, e.duration);
-  return L({
+  const t = F({}, w0, e.easing), n = F({}, S0, e.duration);
+  return F({
     getAutoHeightDuration: C0,
     create: (o = ["all"], i = {}) => {
       const {
@@ -5325,11 +5298,11 @@ function E0(e) {
         delay: d = 0
       } = i, u = Te(i, _0);
       if (process.env.NODE_ENV !== "production") {
-        const f = (p) => typeof p == "string", h = (p) => !isNaN(parseFloat(p));
-        !f(o) && !Array.isArray(o) && console.error('MUI: Argument "props" must be a string or Array.'), !h(a) && !f(a) && console.error(`MUI: Argument "duration" must be a number or a string but found ${a}.`), f(s) || console.error('MUI: Argument "easing" must be a string.'), !h(d) && !f(d) && console.error('MUI: Argument "delay" must be a number or a string.'), typeof i != "object" && console.error(["MUI: Secong argument of transition.create must be an object.", "Arguments should be either `create('prop1', options)` or `create(['prop1', 'prop2'], options)`"].join(`
+        const h = (p) => typeof p == "string", m = (p) => !isNaN(parseFloat(p));
+        !h(o) && !Array.isArray(o) && console.error('MUI: Argument "props" must be a string or Array.'), !m(a) && !h(a) && console.error(`MUI: Argument "duration" must be a number or a string but found ${a}.`), h(s) || console.error('MUI: Argument "easing" must be a string.'), !m(d) && !h(d) && console.error('MUI: Argument "delay" must be a number or a string.'), typeof i != "object" && console.error(["MUI: Secong argument of transition.create must be an object.", "Arguments should be either `create('prop1', options)` or `create(['prop1', 'prop2'], options)`"].join(`
 `)), Object.keys(u).length !== 0 && console.error(`MUI: Unrecognized argument(s) [${Object.keys(u).join(",")}].`);
       }
-      return (Array.isArray(o) ? o : [o]).map((f) => `${f} ${typeof a == "string" ? a : wr(a)} ${s} ${typeof d == "string" ? d : wr(d)}`).join(",");
+      return (Array.isArray(o) ? o : [o]).map((h) => `${h} ${typeof a == "string" ? a : wr(a)} ${s} ${typeof d == "string" ? d : wr(d)}`).join(",");
     }
   }, e, {
     easing: t,
@@ -5355,7 +5328,7 @@ function T0(e = {}, ...t) {
   } = e, a = Te(e, O0);
   if (e.vars)
     throw new Error(process.env.NODE_ENV !== "production" ? "MUI: `vars` is a private field used for CSS variables support.\nPlease use another name." : st(18));
-  const s = f0(r), d = Cn(e);
+  const s = f0(r), d = Sn(e);
   let u = ve(d, {
     mixins: Rl(d.breakpoints, n),
     palette: s,
@@ -5363,19 +5336,19 @@ function T0(e = {}, ...t) {
     shadows: x0.slice(),
     typography: p0(s, i),
     transitions: E0(o),
-    zIndex: L({}, N0)
+    zIndex: F({}, N0)
   });
-  if (u = ve(u, a), u = t.reduce((f, h) => ve(f, h), u), process.env.NODE_ENV !== "production") {
-    const f = ["active", "checked", "completed", "disabled", "error", "expanded", "focused", "focusVisible", "required", "selected"], h = (p, v) => {
+  if (u = ve(u, a), u = t.reduce((h, m) => ve(h, m), u), process.env.NODE_ENV !== "production") {
+    const h = ["active", "checked", "completed", "disabled", "error", "expanded", "focused", "focusVisible", "required", "selected"], m = (p, v) => {
       let y;
       for (y in p) {
         const l = p[y];
-        if (f.indexOf(y) !== -1 && Object.keys(l).length > 0) {
+        if (h.indexOf(y) !== -1 && Object.keys(l).length > 0) {
           if (process.env.NODE_ENV !== "production") {
-            const m = xn("", y);
-            console.error([`MUI: The \`${v}\` component increases the CSS specificity of the \`${y}\` internal state.`, "You can not override it like this: ", JSON.stringify(p, null, 2), "", `Instead, you need to use the '&.${m}' syntax:`, JSON.stringify({
+            const f = bn("", y);
+            console.error([`MUI: The \`${v}\` component increases the CSS specificity of the \`${y}\` internal state.`, "You can not override it like this: ", JSON.stringify(p, null, 2), "", `Instead, you need to use the '&.${f}' syntax:`, JSON.stringify({
               root: {
-                [`&.${m}`]: l
+                [`&.${f}`]: l
               }
             }, null, 2), "", "https://mui.com/r/state-classes-guide"].join(`
 `));
@@ -5386,12 +5359,12 @@ function T0(e = {}, ...t) {
     };
     Object.keys(u.components).forEach((p) => {
       const v = u.components[p].styleOverrides;
-      v && p.indexOf("Mui") === 0 && h(v, p);
+      v && p.indexOf("Mui") === 0 && m(v, p);
     });
   }
-  return u.unstable_sxConfig = L({}, mt, a == null ? void 0 : a.unstable_sxConfig), u.unstable_sx = function(h) {
-    return Sn({
-      sx: h,
+  return u.unstable_sxConfig = F({}, mt, a == null ? void 0 : a.unstable_sxConfig), u.unstable_sx = function(m) {
+    return wn({
+      sx: m,
       theme: this
     });
   }, u;
@@ -5416,7 +5389,7 @@ Object.defineProperty(gt, "__esModule", {
 });
 var j0 = gt.default = tc, V0 = gt.shouldForwardProp = Nt;
 gt.systemDefaultTheme = void 0;
-var ce = Qe($0), pn = Qe(A0), Sr = Z0(P0), H0 = R0, B0 = Qe(D0), W0 = Qe(z0), U0 = Qe(F0), Y0 = Qe(L0);
+var ce = Qe($0), mn = Qe(A0), Sr = Z0(P0), H0 = R0, B0 = Qe(D0), W0 = Qe(z0), U0 = Qe(F0), Y0 = Qe(L0);
 const q0 = ["ownerState"], G0 = ["variants"], K0 = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
 function No(e) {
   if (typeof WeakMap != "function")
@@ -5468,7 +5441,7 @@ function ec(e) {
 function Ot(e, t) {
   let {
     ownerState: n
-  } = t, r = (0, pn.default)(t, q0);
+  } = t, r = (0, mn.default)(t, q0);
   const o = typeof e == "function" ? e((0, ce.default)({
     ownerState: n
   }, r)) : e;
@@ -5480,13 +5453,13 @@ function Ot(e, t) {
     const {
       variants: i = []
     } = o;
-    let s = (0, pn.default)(o, G0);
+    let s = (0, mn.default)(o, G0);
     return i.forEach((d) => {
       let u = !0;
       typeof d.props == "function" ? u = d.props((0, ce.default)({
         ownerState: n
-      }, r, n)) : Object.keys(d.props).forEach((f) => {
-        (n == null ? void 0 : n[f]) !== d.props[f] && r[f] !== d.props[f] && (u = !1);
+      }, r, n)) : Object.keys(d.props).forEach((h) => {
+        (n == null ? void 0 : n[h]) !== d.props[h] && r[h] !== d.props[h] && (u = !1);
       }), u && (Array.isArray(s) || (s = [s]), s.push(typeof d.style == "function" ? d.style((0, ce.default)({
         ownerState: n
       }, r, n)) : d.style));
@@ -5511,23 +5484,23 @@ function tc(e = {}) {
     const {
       name: d,
       slot: u,
-      skipVariantsResolver: f,
-      skipSx: h,
+      skipVariantsResolver: h,
+      skipSx: m,
       // TODO v6: remove `lowercaseFirstLetter()` in the next major release
       // For more details: https://github.com/mui/material-ui/pull/37908
       overridesResolver: p = ec(Cr(u))
-    } = s, v = (0, pn.default)(s, K0), y = f !== void 0 ? f : (
+    } = s, v = (0, mn.default)(s, K0), y = 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
-    ), l = h || !1;
-    let m;
-    process.env.NODE_ENV !== "production" && d && (m = `${d}-${Cr(u || "Root")}`);
+    ), l = m || !1;
+    let f;
+    process.env.NODE_ENV !== "production" && d && (f = `${d}-${Cr(u || "Root")}`);
     let b = Nt;
     u === "Root" || u === "root" ? b = r : u ? b = o : X0(a) && (b = void 0);
     const _ = (0, Sr.default)(a, (0, ce.default)({
       shouldForwardProp: b,
-      label: m
+      label: f
     }, v)), x = (g) => typeof g == "function" && g.__emotion_real !== g || (0, H0.isPlainObject)(g) ? (w) => Ot(g, (0, ce.default)({}, w, {
       theme: wt({
         theme: w.theme,
@@ -5583,7 +5556,7 @@ const nc = (e) => V0(e) && e !== "classes", rc = j0({
   rootShouldForwardProp: nc
 }), oc = rc;
 function ic(e) {
-  return xn("MuiSvgIcon", e);
+  return bn("MuiSvgIcon", e);
 }
 la("MuiSvgIcon", ["root", "colorPrimary", "colorSecondary", "colorAction", "colorError", "colorDisabled", "fontSizeInherit", "fontSizeSmall", "fontSizeMedium", "fontSizeLarge"]);
 const ac = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"], sc = (e) => {
@@ -5608,7 +5581,7 @@ const ac = ["children", "className", "color", "component", "fontSize", "htmlColo
   theme: e,
   ownerState: t
 }) => {
-  var n, r, o, i, a, s, d, u, f, h, p, v, y;
+  var n, r, o, i, a, s, d, u, h, m, p, v, y;
   return {
     userSelect: "none",
     width: "1em",
@@ -5625,16 +5598,16 @@ const ac = ["children", "className", "color", "component", "fontSize", "htmlColo
       inherit: "inherit",
       small: ((i = e.typography) == null || (a = i.pxToRem) == null ? void 0 : a.call(i, 20)) || "1.25rem",
       medium: ((s = e.typography) == null || (d = s.pxToRem) == null ? void 0 : d.call(s, 24)) || "1.5rem",
-      large: ((u = e.typography) == null || (f = u.pxToRem) == null ? void 0 : f.call(u, 35)) || "2.1875rem"
+      large: ((u = e.typography) == null || (h = u.pxToRem) == null ? void 0 : h.call(u, 35)) || "2.1875rem"
     }[t.fontSize],
     // TODO v5 deprecate, v6 remove for sx
-    color: (h = (p = (e.vars || e).palette) == null || (p = p[t.color]) == null ? void 0 : p.main) != null ? h : {
+    color: (m = (p = (e.vars || e).palette) == null || (p = p[t.color]) == null ? void 0 : p.main) != null ? m : {
       action: (v = (e.vars || e).palette) == null || (v = v.action) == null ? void 0 : v.active,
       disabled: (y = (e.vars || e).palette) == null || (y = y.action) == null ? void 0 : y.disabled,
       inherit: void 0
     }[t.color]
   };
-}), Dn = /* @__PURE__ */ j.forwardRef(function(t, n) {
+}), Rn = /* @__PURE__ */ j.forwardRef(function(t, n) {
   const r = M0({
     props: t,
     name: "MuiSvgIcon"
@@ -5645,36 +5618,36 @@ const ac = ["children", "className", "color", "component", "fontSize", "htmlColo
     component: s = "svg",
     fontSize: d = "medium",
     htmlColor: u,
-    inheritViewBox: f = !1,
-    titleAccess: h,
+    inheritViewBox: h = !1,
+    titleAccess: m,
     viewBox: p = "0 0 24 24"
-  } = r, v = Te(r, ac), y = /* @__PURE__ */ j.isValidElement(o) && o.type === "svg", l = L({}, r, {
+  } = r, v = Te(r, ac), y = /* @__PURE__ */ j.isValidElement(o) && o.type === "svg", l = F({}, r, {
     color: a,
     component: s,
     fontSize: d,
     instanceFontSize: t.fontSize,
-    inheritViewBox: f,
+    inheritViewBox: h,
     viewBox: p,
     hasSvgAsChild: y
-  }), m = {};
-  f || (m.viewBox = p);
+  }), f = {};
+  h || (f.viewBox = p);
   const b = sc(l);
-  return /* @__PURE__ */ N(lc, L({
+  return /* @__PURE__ */ N(lc, F({
     as: s,
     className: qo(b.root, i),
     focusable: "false",
     color: u,
-    "aria-hidden": h ? void 0 : !0,
-    role: h ? "img" : void 0,
+    "aria-hidden": m ? void 0 : !0,
+    role: m ? "img" : void 0,
     ref: n
-  }, m, v, y && o.props, {
+  }, f, v, y && o.props, {
     ownerState: l,
-    children: [y ? o.props.children : o, h ? /* @__PURE__ */ c("title", {
-      children: h
+    children: [y ? o.props.children : o, m ? /* @__PURE__ */ c("title", {
+      children: m
     }) : null]
   }));
 });
-process.env.NODE_ENV !== "production" && (Dn.propTypes = {
+process.env.NODE_ENV !== "production" && (Rn.propTypes = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
@@ -5746,11 +5719,11 @@ process.env.NODE_ENV !== "production" && (Dn.propTypes = {
    */
   viewBox: I.string
 });
-Dn.muiName = "SvgIcon";
-const Er = Dn;
+Rn.muiName = "SvgIcon";
+const Er = Rn;
 function cc(e, t) {
   function n(r, o) {
-    return /* @__PURE__ */ c(Er, L({
+    return /* @__PURE__ */ c(Er, F({
       "data-testid": `${t}Icon`,
       ref: o
     }, r, {
@@ -5828,37 +5801,37 @@ var pc = 150, gc = function(t, n) {
 }, Tt = null, It = null;
 process.env.NODE_ENV !== "production" && typeof window < "u" && typeof window.WeakSet < "u" && (Tt = /* @__PURE__ */ new WeakSet(), It = /* @__PURE__ */ new WeakSet());
 function yc(e) {
-  var t, n = e.getItemOffset, r = e.getEstimatedTotalSize, o = e.getItemSize, i = e.getOffsetForIndexAndAlignment, a = e.getStartIndexForOffset, s = e.getStopIndexForStartIndex, d = e.initInstanceProps, u = e.shouldResetStyleCacheOnItemSizeChange, f = e.validateProps;
-  return t = /* @__PURE__ */ function(h) {
-    Go(p, h);
+  var t, n = e.getItemOffset, r = e.getEstimatedTotalSize, o = e.getItemSize, i = e.getOffsetForIndexAndAlignment, a = e.getStartIndexForOffset, s = e.getStopIndexForStartIndex, d = e.initInstanceProps, u = e.shouldResetStyleCacheOnItemSizeChange, h = e.validateProps;
+  return t = /* @__PURE__ */ function(m) {
+    Go(p, m);
     function p(y) {
       var l;
-      return l = h.call(this, y) || this, l._instanceProps = d(l.props, Ln(l)), l._outerRef = void 0, l._resetIsScrollingTimeoutId = null, l.state = {
-        instance: Ln(l),
+      return l = m.call(this, y) || this, l._instanceProps = d(l.props, Fn(l)), l._outerRef = void 0, l._resetIsScrollingTimeoutId = null, l.state = {
+        instance: Fn(l),
         isScrolling: !1,
         scrollDirection: "forward",
         scrollOffset: typeof l.props.initialScrollOffset == "number" ? l.props.initialScrollOffset : 0,
         scrollUpdateWasRequested: !1
-      }, l._callOnItemsRendered = void 0, l._callOnItemsRendered = an(function(m, b, _, x) {
+      }, l._callOnItemsRendered = void 0, l._callOnItemsRendered = an(function(f, b, _, x) {
         return l.props.onItemsRendered({
-          overscanStartIndex: m,
+          overscanStartIndex: f,
           overscanStopIndex: b,
           visibleStartIndex: _,
           visibleStopIndex: x
         });
-      }), l._callOnScroll = void 0, l._callOnScroll = an(function(m, b, _) {
+      }), l._callOnScroll = void 0, l._callOnScroll = an(function(f, b, _) {
         return l.props.onScroll({
-          scrollDirection: m,
+          scrollDirection: f,
           scrollOffset: b,
           scrollUpdateWasRequested: _
         });
-      }), l._getItemStyle = void 0, l._getItemStyle = function(m) {
+      }), l._getItemStyle = void 0, l._getItemStyle = function(f) {
         var b = l.props, _ = b.direction, x = b.itemSize, S = b.layout, g = l._getItemStyleCache(u && x, u && S, u && _), w;
-        if (g.hasOwnProperty(m))
-          w = g[m];
+        if (g.hasOwnProperty(f))
+          w = g[f];
         else {
-          var C = n(l.props, m, l._instanceProps), T = o(l.props, m, l._instanceProps), O = _ === "horizontal" || S === "horizontal", V = _ === "rtl", z = O ? C : 0;
-          g[m] = w = {
+          var C = n(l.props, f, l._instanceProps), T = o(l.props, f, l._instanceProps), O = _ === "horizontal" || S === "horizontal", V = _ === "rtl", z = O ? C : 0;
+          g[f] = w = {
             position: "absolute",
             left: V ? void 0 : z,
             right: V ? z : void 0,
@@ -5868,10 +5841,10 @@ function yc(e) {
           };
         }
         return w;
-      }, l._getItemStyleCache = void 0, l._getItemStyleCache = an(function(m, b, _) {
+      }, l._getItemStyleCache = void 0, l._getItemStyleCache = an(function(f, b, _) {
         return {};
-      }), l._onScrollHorizontal = function(m) {
-        var b = m.currentTarget, _ = b.clientWidth, x = b.scrollLeft, S = b.scrollWidth;
+      }), l._onScrollHorizontal = function(f) {
+        var b = f.currentTarget, _ = b.clientWidth, x = b.scrollLeft, S = b.scrollWidth;
         l.setState(function(g) {
           if (g.scrollOffset === x)
             return null;
@@ -5892,8 +5865,8 @@ function yc(e) {
             scrollUpdateWasRequested: !1
           };
         }, l._resetIsScrollingDebounced);
-      }, l._onScrollVertical = function(m) {
-        var b = m.currentTarget, _ = b.clientHeight, x = b.scrollHeight, S = b.scrollTop;
+      }, l._onScrollVertical = function(f) {
+        var b = f.currentTarget, _ = b.clientHeight, x = b.scrollHeight, S = b.scrollTop;
         l.setState(function(g) {
           if (g.scrollOffset === S)
             return null;
@@ -5905,9 +5878,9 @@ function yc(e) {
             scrollUpdateWasRequested: !1
           };
         }, l._resetIsScrollingDebounced);
-      }, l._outerRefSetter = function(m) {
+      }, l._outerRefSetter = function(f) {
         var b = l.props.outerRef;
-        l._outerRef = m, typeof b == "function" ? b(m) : b != null && typeof b == "object" && b.hasOwnProperty("current") && (b.current = m);
+        l._outerRef = f, typeof b == "function" ? b(f) : b != null && typeof b == "object" && b.hasOwnProperty("current") && (b.current = f);
       }, l._resetIsScrollingDebounced = function() {
         l._resetIsScrollingTimeoutId !== null && Or(l._resetIsScrollingTimeoutId), l._resetIsScrollingTimeoutId = mc(l._resetIsScrolling, pc);
       }, l._resetIsScrolling = function() {
@@ -5918,20 +5891,20 @@ function yc(e) {
         });
       }, l;
     }
-    p.getDerivedStateFromProps = function(l, m) {
-      return vc(l, m), f(l), null;
+    p.getDerivedStateFromProps = function(l, f) {
+      return vc(l, f), h(l), null;
     };
     var v = p.prototype;
     return v.scrollTo = function(l) {
-      l = Math.max(0, l), this.setState(function(m) {
-        return m.scrollOffset === l ? null : {
-          scrollDirection: m.scrollOffset < l ? "forward" : "backward",
+      l = Math.max(0, l), this.setState(function(f) {
+        return f.scrollOffset === l ? null : {
+          scrollDirection: f.scrollOffset < l ? "forward" : "backward",
           scrollOffset: l,
           scrollUpdateWasRequested: !0
         };
       }, this._resetIsScrollingDebounced);
-    }, v.scrollToItem = function(l, m) {
-      m === void 0 && (m = "auto");
+    }, v.scrollToItem = function(l, f) {
+      f === void 0 && (f = "auto");
       var b = this.props, _ = b.itemCount, x = b.layout, S = this.state.scrollOffset;
       l = Math.max(0, Math.min(l, _ - 1));
       var g = 0;
@@ -5939,20 +5912,20 @@ function yc(e) {
         var w = this._outerRef;
         x === "vertical" ? g = w.scrollWidth > w.clientWidth ? Tr() : 0 : g = w.scrollHeight > w.clientHeight ? Tr() : 0;
       }
-      this.scrollTo(i(this.props, l, m, S, this._instanceProps, g));
+      this.scrollTo(i(this.props, l, f, S, this._instanceProps, g));
     }, v.componentDidMount = function() {
-      var l = this.props, m = l.direction, b = l.initialScrollOffset, _ = l.layout;
+      var l = this.props, f = l.direction, b = l.initialScrollOffset, _ = l.layout;
       if (typeof b == "number" && this._outerRef != null) {
         var x = this._outerRef;
-        m === "horizontal" || _ === "horizontal" ? x.scrollLeft = b : x.scrollTop = b;
+        f === "horizontal" || _ === "horizontal" ? x.scrollLeft = b : x.scrollTop = b;
       }
       this._callPropsCallbacks();
     }, v.componentDidUpdate = function() {
-      var l = this.props, m = l.direction, b = l.layout, _ = this.state, x = _.scrollOffset, S = _.scrollUpdateWasRequested;
+      var l = this.props, f = l.direction, b = l.layout, _ = this.state, x = _.scrollOffset, S = _.scrollUpdateWasRequested;
       if (S && this._outerRef != null) {
         var g = this._outerRef;
-        if (m === "horizontal" || b === "horizontal")
-          if (m === "rtl")
+        if (f === "horizontal" || b === "horizontal")
+          if (f === "rtl")
             switch (Ir()) {
               case "negative":
                 g.scrollLeft = -x;
@@ -5974,10 +5947,10 @@ function yc(e) {
     }, v.componentWillUnmount = function() {
       this._resetIsScrollingTimeoutId !== null && Or(this._resetIsScrollingTimeoutId);
     }, v.render = function() {
-      var l = this.props, m = l.children, b = l.className, _ = l.direction, x = l.height, S = l.innerRef, g = l.innerElementType, w = l.innerTagName, C = l.itemCount, T = l.itemData, O = l.itemKey, V = O === void 0 ? gc : O, z = l.layout, H = l.outerElementType, G = l.outerTagName, re = l.style, K = l.useIsScrolling, te = l.width, me = this.state.isScrolling, se = _ === "horizontal" || z === "horizontal", le = se ? this._onScrollHorizontal : this._onScrollVertical, ge = this._getRangeToRender(), et = ge[0], tt = ge[1], De = [];
+      var l = this.props, f = l.children, b = l.className, _ = l.direction, x = l.height, S = l.innerRef, g = l.innerElementType, w = l.innerTagName, C = l.itemCount, T = l.itemData, O = l.itemKey, V = O === void 0 ? gc : O, z = l.layout, H = l.outerElementType, G = l.outerTagName, re = l.style, K = l.useIsScrolling, te = l.width, me = this.state.isScrolling, se = _ === "horizontal" || z === "horizontal", le = se ? this._onScrollHorizontal : this._onScrollVertical, ge = this._getRangeToRender(), et = ge[0], tt = ge[1], De = [];
       if (C > 0)
         for (var _e = et; _e <= tt; _e++)
-          De.push(St(m, {
+          De.push(St(f, {
             data: T,
             key: V(_e, T),
             index: _e,
@@ -5989,7 +5962,7 @@ function yc(e) {
         className: b,
         onScroll: le,
         ref: this._outerRefSetter,
-        style: L({
+        style: F({
           position: "relative",
           height: x,
           width: te,
@@ -6011,7 +5984,7 @@ function yc(e) {
       if (typeof this.props.onItemsRendered == "function") {
         var l = this.props.itemCount;
         if (l > 0) {
-          var m = this._getRangeToRender(), b = m[0], _ = m[1], x = m[2], S = m[3];
+          var f = this._getRangeToRender(), b = f[0], _ = f[1], x = f[2], S = f[3];
           this._callOnItemsRendered(b, _, x, S);
         }
       }
@@ -6020,11 +5993,11 @@ function yc(e) {
         this._callOnScroll(w, C, T);
       }
     }, v._getRangeToRender = function() {
-      var l = this.props, m = l.itemCount, b = l.overscanCount, _ = this.state, x = _.isScrolling, S = _.scrollDirection, g = _.scrollOffset;
-      if (m === 0)
+      var l = this.props, f = l.itemCount, b = l.overscanCount, _ = this.state, x = _.isScrolling, S = _.scrollDirection, g = _.scrollOffset;
+      if (f === 0)
         return [0, 0, 0, 0];
       var w = a(this.props, g, this._instanceProps), C = s(this.props, w, g, this._instanceProps), T = !x || S === "backward" ? Math.max(1, b) : 1, O = !x || S === "forward" ? Math.max(1, b) : 1;
-      return [Math.max(0, w - T), Math.max(0, Math.min(m - 1, C + O)), w, C];
+      return [Math.max(0, w - T), Math.max(0, Math.min(f - 1, C + O)), w, C];
     }, p;
   }($o), t.defaultProps = {
     direction: "ltr",
@@ -6035,14 +6008,14 @@ function yc(e) {
   }, t;
 }
 var vc = function(t, n) {
-  var r = t.children, o = t.direction, i = t.height, a = t.layout, s = t.innerTagName, d = t.outerTagName, u = t.width, f = n.instance;
+  var r = t.children, o = t.direction, i = t.height, a = t.layout, s = t.innerTagName, d = t.outerTagName, u = t.width, h = n.instance;
   if (process.env.NODE_ENV !== "production") {
-    (s != null || d != null) && It && !It.has(f) && (It.add(f), console.warn("The innerTagName and outerTagName props have been deprecated. Please use the innerElementType and outerElementType props instead."));
-    var h = o === "horizontal" || a === "horizontal";
+    (s != null || d != null) && It && !It.has(h) && (It.add(h), console.warn("The innerTagName and outerTagName props have been deprecated. Please use the innerElementType and outerElementType props instead."));
+    var m = o === "horizontal" || a === "horizontal";
     switch (o) {
       case "horizontal":
       case "vertical":
-        Tt && !Tt.has(f) && (Tt.add(f), console.warn('The direction prop should be either "ltr" (default) or "rtl". Please use the layout prop to specify "vertical" (default) or "horizontal" orientation.'));
+        Tt && !Tt.has(h) && (Tt.add(h), console.warn('The direction prop should be either "ltr" (default) or "rtl". Please use the layout prop to specify "vertical" (default) or "horizontal" orientation.'));
         break;
       case "ltr":
       case "rtl":
@@ -6059,9 +6032,9 @@ var vc = function(t, n) {
     }
     if (r == null)
       throw Error('An invalid "children" prop has been specified. Value should be a React component. ' + ('"' + (r === null ? "null" : typeof r) + '" was specified.'));
-    if (h && typeof u != "number")
+    if (m && typeof u != "number")
       throw Error('An invalid "width" prop has been specified. Horizontal lists must specify a number for width. ' + ('"' + (u === null ? "null" : typeof u) + '" was specified.'));
-    if (!h && typeof i != "number")
+    if (!m && typeof i != "number")
       throw Error('An invalid "height" prop has been specified. Vertical lists must specify a number for height. ' + ('"' + (i === null ? "null" : typeof i) + '" was specified.'));
   }
 }, bc = 50, Ue = function(t, n, r) {
@@ -6072,12 +6045,12 @@ var vc = function(t, n) {
       var u = a[s];
       d = u.offset + u.size;
     }
-    for (var f = s + 1; f <= n; f++) {
-      var h = i(f);
-      a[f] = {
+    for (var h = s + 1; h <= n; h++) {
+      var m = i(h);
+      a[h] = {
         offset: d,
-        size: h
-      }, d += h;
+        size: m
+      }, d += m;
     }
     r.lastMeasuredIndex = n;
   }
@@ -6103,8 +6076,8 @@ var vc = function(t, n) {
     var d = o[a];
     s = d.offset + d.size;
   }
-  var u = r - a - 1, f = u * i;
-  return s + f;
+  var u = r - a - 1, h = u * i;
+  return s + h;
 }, wc = /* @__PURE__ */ yc({
   getItemOffset: function(t, n, r) {
     return Ue(t, n, r).offset;
@@ -6114,24 +6087,24 @@ var vc = function(t, n) {
   },
   getEstimatedTotalSize: Mr,
   getOffsetForIndexAndAlignment: function(t, n, r, o, i, a) {
-    var s = t.direction, d = t.height, u = t.layout, f = t.width, h = s === "horizontal" || u === "horizontal", p = h ? f : d, v = Ue(t, n, i), y = Mr(t, i), l = Math.max(0, Math.min(y - p, v.offset)), m = Math.max(0, v.offset - p + v.size + a);
-    switch (r === "smart" && (o >= m - p && o <= l + p ? r = "auto" : r = "center"), r) {
+    var s = t.direction, d = t.height, u = t.layout, h = t.width, m = s === "horizontal" || u === "horizontal", p = m ? h : d, v = Ue(t, n, i), y = Mr(t, i), l = Math.max(0, Math.min(y - p, v.offset)), f = Math.max(0, v.offset - p + v.size + a);
+    switch (r === "smart" && (o >= f - p && o <= l + p ? r = "auto" : r = "center"), r) {
       case "start":
         return l;
       case "end":
-        return m;
+        return f;
       case "center":
-        return Math.round(m + (l - m) / 2);
+        return Math.round(f + (l - f) / 2);
       case "auto":
       default:
-        return o >= m && o <= l ? o : o < m ? m : l;
+        return o >= f && o <= l ? o : o < f ? f : l;
     }
   },
   getStartIndexForOffset: function(t, n, r) {
     return xc(t, r, n);
   },
   getStopIndexForStartIndex: function(t, n, r, o) {
-    for (var i = t.direction, a = t.height, s = t.itemCount, d = t.layout, u = t.width, f = i === "horizontal" || d === "horizontal", h = f ? u : a, p = Ue(t, n, o), v = r + h, y = p.offset + p.size, l = n; l < s - 1 && y < v; )
+    for (var i = t.direction, a = t.height, s = t.itemCount, d = t.layout, u = t.width, h = i === "horizontal" || d === "horizontal", m = h ? u : a, p = Ue(t, n, o), v = r + m, y = p.offset + p.size, l = n; l < s - 1 && y < v; )
       l++, y += Ue(t, l, o).size;
     return l;
   },
@@ -6153,7 +6126,7 @@ var vc = function(t, n) {
   }
 });
 function $r(e) {
-  const { colors: t } = gn();
+  const { colors: t } = pn();
   return /* @__PURE__ */ c(
     oe,
     {
@@ -6191,16 +6164,16 @@ const Dt = 37, Sc = (e, t) => {
   return document.body.removeChild(a), s > 21 ? Dt + 21 : Dt;
 };
 function e1(e) {
-  const [t, n] = F(!1), [r, o] = F(""), [i, a] = F(""), [s, d] = F(!1), { isRequired: u = !1 } = e, f = Ye(
-    ln.debounce((w) => {
+  const [t, n] = L(!1), [r, o] = L(""), [i, a] = L(""), [s, d] = L(!1), { isRequired: u = !1 } = e, h = Ye(
+    Ln.debounce((w) => {
       var C;
       (C = e.handleChangeSearch) == null || C.call(e, w);
     }, 300),
     [e.handleChangeSearch]
-  ), h = () => {
+  ), m = () => {
     n(!t);
   }, p = () => {
-    n(!1), a(""), f("");
+    n(!1), a(""), h("");
   };
   Q(() => {
     o(e.value ? e.getOptionLabel(e.value) : "");
@@ -6209,8 +6182,8 @@ function e1(e) {
   }, [t]), Q(() => {
     d(e.searchLoading);
   }, [e.paging.rows, e.searchLoading]);
-  const v = e.paging.rows, { hasNextPage: y } = e, l = y ? v.length + 1 : v.length, m = () => e.isNextPageLoading ? void 0 : e.loadNextPage(i), b = (w) => !y || w < v.length, _ = (w) => {
-    o(w.target.value), t && (a(w.target.value), f(w.target.value), d(!0));
+  const v = e.paging.rows, { hasNextPage: y } = e, l = y ? v.length + 1 : v.length, f = () => e.isNextPageLoading ? void 0 : e.loadNextPage(i), b = (w) => !y || w < v.length, _ = (w) => {
+    o(w.target.value), t && (a(w.target.value), h(w.target.value), d(!0));
   }, x = ue(null), S = ue(null), g = ue(null);
   return Q(() => {
     var w, C, T, O;
@@ -6269,7 +6242,7 @@ function e1(e) {
                       },
                       onClick: (w) => {
                         var C;
-                        w.preventDefault(), w.stopPropagation(), h(), (C = x.current) == null || C.focus();
+                        w.preventDefault(), w.stopPropagation(), m(), (C = x.current) == null || C.focus();
                       },
                       disabled: e.loading || e.disabled || e.readOnly,
                       children: e.loading ? /* @__PURE__ */ c(li, { size: "16px" }) : /* @__PURE__ */ c(
@@ -6325,7 +6298,7 @@ function e1(e) {
                     {
                       isItemLoaded: b,
                       itemCount: l,
-                      loadMoreItems: m,
+                      loadMoreItems: f,
                       threshold: 5,
                       children: ({ onItemsRendered: w, ref: C }) => /* @__PURE__ */ c(
                         wc,
@@ -6370,7 +6343,7 @@ function e1(e) {
                                   var G;
                                   p(), (G = e.onChange) == null || G.call(e, H);
                                 },
-                                select: ((z = e.isEqual) == null ? void 0 : z.call(e, V, e.value)) ?? ln.isEqual(V, e.value)
+                                select: ((z = e.isEqual) == null ? void 0 : z.call(e, V, e.value)) ?? Ln.isEqual(V, e.value)
                               }
                             ) : /* @__PURE__ */ c(
                               oe,
@@ -6425,25 +6398,25 @@ function e1(e) {
   );
 }
 function t1(e) {
-  var f;
-  const { listProps: t } = e, [n, r] = F({
+  var h;
+  const { listProps: t } = e, [n, r] = L({
     initLoading: !e.disabled,
     searchLoading: !1,
     hasNextPage: !1,
     isNextPageLoading: !1,
     paging: {
       page: 1,
-      pageSize: ((f = e.listProps) == null ? void 0 : f.pageSize) || 20,
+      pageSize: ((h = e.listProps) == null ? void 0 : h.pageSize) || 20,
       rows: [],
       total: 0,
       totalPages: 1
     }
-  }), o = async (h, p) => {
+  }), o = async (m, p) => {
     var v, y;
     if (e.list)
       r(() => {
         var b;
-        const l = ((b = h == null ? void 0 : h.search) == null ? void 0 : b.content) || "";
+        const l = ((b = m == null ? void 0 : m.search) == null ? void 0 : b.content) || "";
         return {
           hasNextPage: !1,
           isNextPageLoading: !1,
@@ -6468,43 +6441,43 @@ function t1(e) {
           pageSize: 20,
           filter: {
             ...t == null ? void 0 : t.filter,
-            ...h == null ? void 0 : h.filter
+            ...m == null ? void 0 : m.filter
           },
           ...jn.omit(t, "filter"),
-          ...jn.omit(h, "filter"),
+          ...jn.omit(m, "filter"),
           search: {
             fields: ((v = t == null ? void 0 : t.search) == null ? void 0 : v.fields) ?? [],
-            content: ((y = h == null ? void 0 : h.search) == null ? void 0 : y.content) ?? ""
+            content: ((y = m == null ? void 0 : m.search) == null ? void 0 : y.content) ?? ""
           }
         };
         p && (l.filter = {}, l.search && (l.search.content = ""), l.page = 1);
-        const m = await e.getList(l);
+        const f = await e.getList(l);
         r((b) => ({
           initLoading: !1,
           searchLoading: !1,
           isNextPageLoading: !1,
           paging: {
-            ...m,
-            rows: (h == null ? void 0 : h.page) === 1 ? m.rows : b.paging.rows.concat(m.rows)
+            ...f,
+            rows: (m == null ? void 0 : m.page) === 1 ? f.rows : b.paging.rows.concat(f.rows)
           },
-          hasNextPage: m.page < m.totalPages
+          hasNextPage: f.page < f.totalPages
         }));
       } catch {
       }
     }
-  }, i = () => (r((h) => ({ ...h, initLoading: !0 })), o(void 0, !0)), a = (h) => (r((p) => ({ ...p, initLoading: !0 })), o(h)), s = (h) => {
+  }, i = () => (r((m) => ({ ...m, initLoading: !0 })), o(void 0, !0)), a = (m) => (r((p) => ({ ...p, initLoading: !0 })), o(m)), s = (m) => {
     o({
       page: n.paging.page + 1,
-      search: { content: h }
+      search: { content: m }
     });
-  }, d = (h) => {
-    r((p) => ({ ...p, searchLoading: !0 })), o({ page: 1, search: { content: h } });
+  }, d = (m) => {
+    r((p) => ({ ...p, searchLoading: !0 })), o({ page: 1, search: { content: m } });
   };
   Q(() => {
-    e.disabled || (r((h) => ({ ...h, initLoading: !0 })), o({ page: 1 }));
+    e.disabled || (r((m) => ({ ...m, initLoading: !0 })), o({ page: 1 }));
   }, [...e.dependencyList || []]);
   const u = () => {
-    r((h) => ({ ...h, initLoading: !h.initLoading }));
+    r((m) => ({ ...m, initLoading: !m.initLoading }));
   };
   return {
     ...e,
@@ -6597,7 +6570,7 @@ function Cc(e) {
 const Ec = "Reset date";
 function n1(e) {
   var s, d;
-  const [t, n] = F(e.value), r = !(t != null && t.startDate) || !(t != null && t.endDate) ? "" : J(t == null ? void 0 : t.startDate).format("DD/MM/YYYY") + " ~ " + J(t == null ? void 0 : t.endDate).format("DD/MM/YYYY");
+  const [t, n] = L(e.value), r = !(t != null && t.startDate) || !(t != null && t.endDate) ? "" : J(t == null ? void 0 : t.startDate).format("DD/MM/YYYY") + " ~ " + J(t == null ? void 0 : t.endDate).format("DD/MM/YYYY");
   Q(() => {
     n(e.value);
   }, [e.value]);
@@ -6632,9 +6605,9 @@ function n1(e) {
         maxDate: J(),
         ...e.initialSettings
       },
-      onApply: (u, f) => {
-        var m, b, _;
-        const h = f.chosenLabel === Ec, { startDate: p, endDate: v } = f, y = h ? ((m = e.dateReset) == null ? void 0 : m.startDate) ?? void 0 : p.toDate(), l = h ? ((b = e.dateReset) == null ? void 0 : b.endDate) ?? void 0 : v.toDate();
+      onApply: (u, h) => {
+        var f, b, _;
+        const m = h.chosenLabel === Ec, { startDate: p, endDate: v } = h, y = m ? ((f = e.dateReset) == null ? void 0 : f.startDate) ?? void 0 : p.toDate(), l = m ? ((b = e.dateReset) == null ? void 0 : b.endDate) ?? void 0 : v.toDate();
         n({ startDate: y, endDate: l }), (_ = e.onChange) == null || _.call(e, { startDate: y, endDate: l });
       },
       children: /* @__PURE__ */ c(
@@ -6818,7 +6791,7 @@ const To = (e) => {
     console.log("payload", r), t(r);
   });
 }), Ic = ["granted", "denied"], Mc = (e) => {
-  const [t, n] = F(!1), r = () => {
+  const [t, n] = L(!1), r = () => {
     Notification.requestPermission(function(i) {
       i === "granted" && To(e), Ic.includes(i) && n(!0);
     });
@@ -6841,7 +6814,7 @@ const To = (e) => {
     ] })
   ] }) }) });
 }, $c = (e) => {
-  const [t, n] = F({
+  const [t, n] = L({
     actorName: "",
     message: "",
     context: "",
@@ -6888,13 +6861,13 @@ const To = (e) => {
       message: (s = i == null ? void 0 : i.data) == null ? void 0 : s.message,
       context: (d = i == null ? void 0 : i.data) == null ? void 0 : d.context,
       contextUrl: (u = i == null ? void 0 : i.data) == null ? void 0 : u.contextUrl
-    }), r((f) => {
-      var h;
+    }), r((h) => {
+      var m;
       return {
-        ...f,
+        ...h,
         unread: {
-          ...f.unread,
-          total: ((h = f.unread) == null ? void 0 : h.total) + 1
+          ...h.unread,
+          total: ((m = h.unread) == null ? void 0 : m.total) + 1
         }
       };
     });
@@ -6903,7 +6876,7 @@ const To = (e) => {
   children: e,
   providers: t
 }) => /* @__PURE__ */ c(ke, { children: t.reduceRight(Ac, e) }), i1 = ({ rootPath: e }) => {
-  const { colors: t } = gn();
+  const { colors: t } = pn();
   return /* @__PURE__ */ N(oe, { py: 2, gap: 2, style: { alignItems: "center" }, children: [
     /* @__PURE__ */ c(
       "img",
@@ -6922,7 +6895,7 @@ const To = (e) => {
         "Please go back to the home page"
       ] }),
       /* @__PURE__ */ c(
-        yn,
+        gn,
         {
           to: e,
           style: {