jcicl 0.0.128 → 0.0.132

package/AppContainer/AppContainer.js

@@ -1,199 +1,199 @@
-import { jsx as a, jsxs as E, Fragment as he } from "react/jsx-runtime";
-import * as w from "react";
+import { jsx as a, jsxs as T, Fragment as fe } from "react/jsx-runtime";
+import * as x from "react";
 import { useState as Y } from "react";
 import { c as ee } from "../.chunks/createSvgIcon.js";
-import { n as y, i as oe } from "../.chunks/emotion-styled.browser.esm.js";
-import { c as H } from "../.chunks/emotion-react.browser.esm.js";
-import Oe from "../AppHeader/AppHeader.js";
+import { n as v, i as oe } from "../.chunks/emotion-styled.browser.esm.js";
+import { c as R } from "../.chunks/emotion-react.browser.esm.js";
+import Ae from "../AppHeader/AppHeader.js";
 import { Nav as F } from "../Nav/Nav.js";
 import _ from "../ScrollContainer/ScrollContainer.js";
 import { Button as Z } from "../Button/Button.js";
 import i from "../theme.js";
-import { l as Ie } from "../.chunks/jocologo.js";
-import { X as Be } from "../.chunks/Close.js";
-import { P as n, g as Ae, a as je, s as ae, r as Ue, c as q, u as Fe, b as J, d as Ve } from "../.chunks/DefaultPropsProvider.js";
-import { u as We, e as Xe, H as Ge, a as we, g as Qe, T as Ye, r as _e, b as ue, c as Je } from "../.chunks/Portal.js";
-import { m as ye } from "../.chunks/memoTheme.js";
-import { g as Ke, o as ke, d as Ze, M as qe, P as eo, i as oo } from "../.chunks/Input.js";
-import { c as to } from "../.chunks/chainPropTypes.js";
-import { u as ro, a as no } from "../.chunks/TransitionGroupContext.js";
-function io(e, o, r, t, c) {
-  const [f, u] = w.useState(() => c && r ? r(e).matches : t ? t(e).matches : o);
-  return ro(() => {
-    if (!r)
+import { l as je } from "../.chunks/jocologo.js";
+import { X as Ue } from "../.chunks/Close.js";
+import { P as r, g as Fe, a as Ve, s as ce, r as We, c as q, u as Qe, b as J, d as Xe } from "../.chunks/DefaultPropsProvider.js";
+import { u as Ge, e as Ye, H as _e, a as ke, g as Je, T as Ke, r as Ze, b as me, c as qe } from "../.chunks/Portal.js";
+import { m as Ce } from "../.chunks/memoTheme.js";
+import { g as eo, o as Te, d as oo, M as to, P as ro, i as no } from "../.chunks/TextField.js";
+import { c as io } from "../.chunks/chainPropTypes.js";
+import { u as ao, a as so } from "../.chunks/TransitionGroupContext.js";
+function co(e, o, t, n, c) {
+  const [l, u] = x.useState(() => c && t ? t(e).matches : n ? n(e).matches : o);
+  return ao(() => {
+    if (!t)
       return;
-    const h = r(e), l = () => {
-      u(h.matches);
+    const f = t(e), p = () => {
+      u(f.matches);
     };
-    return l(), h.addEventListener("change", l), () => {
-      h.removeEventListener("change", l);
+    return p(), f.addEventListener("change", p), () => {
+      f.removeEventListener("change", p);
     };
-  }, [e, r]), f;
+  }, [e, t]), l;
 }
-const ao = {
-  ...w
-}, Ce = ao.useSyncExternalStore;
-function so(e, o, r, t, c) {
-  const f = w.useCallback(() => o, [o]), u = w.useMemo(() => {
-    if (c && r)
-      return () => r(e).matches;
-    if (t !== null) {
+const lo = {
+  ...x
+}, $e = lo.useSyncExternalStore;
+function po(e, o, t, n, c) {
+  const l = x.useCallback(() => o, [o]), u = x.useMemo(() => {
+    if (c && t)
+      return () => t(e).matches;
+    if (n !== null) {
       const {
-        matches: p
-      } = t(e);
-      return () => p;
+        matches: h
+      } = n(e);
+      return () => h;
     }
-    return f;
-  }, [f, e, t, c, r]), [h, l] = w.useMemo(() => {
-    if (r === null)
-      return [f, () => () => {
+    return l;
+  }, [l, e, n, c, t]), [f, p] = x.useMemo(() => {
+    if (t === null)
+      return [l, () => () => {
       }];
-    const p = r(e);
-    return [() => p.matches, (M) => (p.addEventListener("change", M), () => {
-      p.removeEventListener("change", M);
+    const h = t(e);
+    return [() => h.matches, ($) => (h.addEventListener("change", $), () => {
+      h.removeEventListener("change", $);
     })];
-  }, [f, r, e]);
-  return Ce(l, h, u);
+  }, [l, t, e]);
+  return $e(p, f, u);
 }
-function fe(e, o = {}) {
-  const r = We(), t = typeof window < "u" && typeof window.matchMedia < "u", {
+function ge(e, o = {}) {
+  const t = Ge(), n = typeof window < "u" && typeof window.matchMedia < "u", {
     defaultMatches: c = !1,
-    matchMedia: f = t ? window.matchMedia : null,
+    matchMedia: l = n ? window.matchMedia : null,
     ssrMatchMedia: u = null,
-    noSsr: h = !1
-  } = Ke({
+    noSsr: f = !1
+  } = eo({
     name: "MuiUseMediaQuery",
     props: o,
-    theme: r
+    theme: t
   });
-  process.env.NODE_ENV !== "production" && typeof e == "function" && r === null && console.error(["MUI: The `query` argument provided is invalid.", "You are providing a function without a theme in the context.", "One of the parent elements needs to use a ThemeProvider."].join(`
+  process.env.NODE_ENV !== "production" && typeof e == "function" && t === null && console.error(["MUI: The `query` argument provided is invalid.", "You are providing a function without a theme in the context.", "One of the parent elements needs to use a ThemeProvider."].join(`
 `));
-  let l = typeof e == "function" ? e(r) : e;
-  l = l.replace(/^@media( ?)/m, "");
-  const p = (Ce !== void 0 ? so : io)(l, c, f, u, h);
-  return process.env.NODE_ENV !== "production" && w.useDebugValue({
-    query: l,
-    match: p
-  }), p;
+  let p = typeof e == "function" ? e(t) : e;
+  p = p.replace(/^@media( ?)/m, "");
+  const h = ($e !== void 0 ? po : co)(p, c, l, u, f);
+  return process.env.NODE_ENV !== "production" && x.useDebugValue({
+    query: p,
+    match: h
+  }), h;
 }
-function co(e, o, r) {
-  const t = o.getBoundingClientRect(), c = r && r.getBoundingClientRect(), f = ke(o);
+function ho(e, o, t) {
+  const n = o.getBoundingClientRect(), c = t && t.getBoundingClientRect(), l = Te(o);
   let u;
   if (o.fakeTransform)
     u = o.fakeTransform;
   else {
-    const m = f.getComputedStyle(o);
-    u = m.getPropertyValue("-webkit-transform") || m.getPropertyValue("transform");
+    const b = l.getComputedStyle(o);
+    u = b.getPropertyValue("-webkit-transform") || b.getPropertyValue("transform");
   }
-  let h = 0, l = 0;
+  let f = 0, p = 0;
   if (u && u !== "none" && typeof u == "string") {
-    const m = u.split("(")[1].split(")")[0].split(",");
-    h = parseInt(m[4], 10), l = parseInt(m[5], 10);
+    const b = u.split("(")[1].split(")")[0].split(",");
+    f = parseInt(b[4], 10), p = parseInt(b[5], 10);
   }
-  return e === "left" ? c ? `translateX(${c.right + h - t.left}px)` : `translateX(${f.innerWidth + h - t.left}px)` : e === "right" ? c ? `translateX(-${t.right - c.left - h}px)` : `translateX(-${t.left + t.width - h}px)` : e === "up" ? c ? `translateY(${c.bottom + l - t.top}px)` : `translateY(${f.innerHeight + l - t.top}px)` : c ? `translateY(-${t.top - c.top + t.height - l}px)` : `translateY(-${t.top + t.height - l}px)`;
+  return e === "left" ? c ? `translateX(${c.right + f - n.left}px)` : `translateX(${l.innerWidth + f - n.left}px)` : e === "right" ? c ? `translateX(-${n.right - c.left - f}px)` : `translateX(-${n.left + n.width - f}px)` : e === "up" ? c ? `translateY(${c.bottom + p - n.top}px)` : `translateY(${l.innerHeight + p - n.top}px)` : c ? `translateY(-${n.top - c.top + n.height - p}px)` : `translateY(-${n.top + n.height - p}px)`;
 }
-function Te(e) {
+function Pe(e) {
   return typeof e == "function" ? e() : e;
 }
-function K(e, o, r) {
-  const t = Te(r), c = co(e, o, t);
+function K(e, o, t) {
+  const n = Pe(t), c = ho(e, o, n);
   c && (o.style.webkitTransform = c, o.style.transform = c);
 }
-const $e = /* @__PURE__ */ w.forwardRef(function(o, r) {
-  const t = we(), c = {
-    enter: t.transitions.easing.easeOut,
-    exit: t.transitions.easing.sharp
-  }, f = {
-    enter: t.transitions.duration.enteringScreen,
-    exit: t.transitions.duration.leavingScreen
+const Ee = /* @__PURE__ */ x.forwardRef(function(o, t) {
+  const n = ke(), c = {
+    enter: n.transitions.easing.easeOut,
+    exit: n.transitions.easing.sharp
+  }, l = {
+    enter: n.transitions.duration.enteringScreen,
+    exit: n.transitions.duration.leavingScreen
   }, {
     addEndListener: u,
-    appear: h = !0,
-    children: l,
-    container: m,
-    direction: p = "down",
-    easing: M = c,
-    in: k,
-    onEnter: B,
-    onEntered: L,
-    onEntering: N,
-    onExit: C,
-    onExited: R,
-    onExiting: O,
-    style: I,
-    timeout: S = f,
+    appear: f = !0,
+    children: p,
+    container: b,
+    direction: h = "down",
+    easing: $ = c,
+    in: P,
+    onEnter: A,
+    onEntered: z,
+    onEntering: j,
+    onExit: E,
+    onExited: N,
+    onExiting: M,
+    style: L,
+    timeout: H = l,
     // eslint-disable-next-line react/prop-types
-    TransitionComponent: g = Ye,
-    ...v
-  } = o, b = w.useRef(null), D = no(Qe(l), b, r), x = (s) => (d) => {
-    s && (d === void 0 ? s(b.current) : s(b.current, d));
-  }, T = x((s, d) => {
-    K(p, s, m), _e(s), B && B(s, d);
-  }), $ = x((s, d) => {
-    const Q = ue({
-      timeout: S,
-      style: I,
-      easing: M
+    TransitionComponent: O = Ke,
+    ...B
+  } = o, d = x.useRef(null), w = so(Je(p), d, t), k = (s) => (g) => {
+    s && (g === void 0 ? s(d.current) : s(d.current, g));
+  }, y = k((s, g) => {
+    K(h, s, b), Ze(s), A && A(s, g);
+  }), m = k((s, g) => {
+    const W = me({
+      timeout: H,
+      style: L,
+      easing: $
     }, {
       mode: "enter"
     });
-    s.style.webkitTransition = t.transitions.create("-webkit-transform", {
-      ...Q
-    }), s.style.transition = t.transitions.create("transform", {
-      ...Q
-    }), s.style.webkitTransform = "none", s.style.transform = "none", N && N(s, d);
-  }), A = x(L), j = x(O), z = x((s) => {
-    const d = ue({
-      timeout: S,
-      style: I,
-      easing: M
+    s.style.webkitTransition = n.transitions.create("-webkit-transform", {
+      ...W
+    }), s.style.transition = n.transitions.create("transform", {
+      ...W
+    }), s.style.webkitTransform = "none", s.style.transform = "none", j && j(s, g);
+  }), S = k(z), U = k(M), X = k((s) => {
+    const g = me({
+      timeout: H,
+      style: L,
+      easing: $
     }, {
       mode: "exit"
     });
-    s.style.webkitTransition = t.transitions.create("-webkit-transform", d), s.style.transition = t.transitions.create("transform", d), K(p, s, m), C && C(s);
-  }), W = x((s) => {
-    s.style.webkitTransition = "", s.style.transition = "", R && R(s);
-  }), U = (s) => {
-    u && u(b.current, s);
-  }, X = w.useCallback(() => {
-    b.current && K(p, b.current, m);
-  }, [p, m]);
-  return w.useEffect(() => {
-    if (k || p === "down" || p === "right")
+    s.style.webkitTransition = n.transitions.create("-webkit-transform", g), s.style.transition = n.transitions.create("transform", g), K(h, s, b), E && E(s);
+  }), te = k((s) => {
+    s.style.webkitTransition = "", s.style.transition = "", N && N(s);
+  }), re = (s) => {
+    u && u(d.current, s);
+  }, D = x.useCallback(() => {
+    d.current && K(h, d.current, b);
+  }, [h, b]);
+  return x.useEffect(() => {
+    if (P || h === "down" || h === "right")
       return;
-    const s = Ze(() => {
-      b.current && K(p, b.current, m);
-    }), d = ke(b.current);
-    return d.addEventListener("resize", s), () => {
-      s.clear(), d.removeEventListener("resize", s);
+    const s = oo(() => {
+      d.current && K(h, d.current, b);
+    }), g = Te(d.current);
+    return g.addEventListener("resize", s), () => {
+      s.clear(), g.removeEventListener("resize", s);
     };
-  }, [p, k, m]), w.useEffect(() => {
-    k || X();
-  }, [k, X]), /* @__PURE__ */ a(g, {
-    nodeRef: b,
-    onEnter: T,
-    onEntered: A,
-    onEntering: $,
-    onExit: z,
-    onExited: W,
-    onExiting: j,
-    addEndListener: U,
-    appear: h,
-    in: k,
-    timeout: S,
-    ...v,
-    children: (s, d) => /* @__PURE__ */ w.cloneElement(l, {
-      ref: D,
+  }, [h, P, b]), x.useEffect(() => {
+    P || D();
+  }, [P, D]), /* @__PURE__ */ a(O, {
+    nodeRef: d,
+    onEnter: y,
+    onEntered: S,
+    onEntering: m,
+    onExit: X,
+    onExited: te,
+    onExiting: U,
+    addEndListener: re,
+    appear: f,
+    in: P,
+    timeout: H,
+    ...B,
+    children: (s, g) => /* @__PURE__ */ x.cloneElement(p, {
+      ref: w,
       style: {
-        visibility: s === "exited" && !k ? "hidden" : void 0,
-        ...I,
-        ...l.props.style
+        visibility: s === "exited" && !P ? "hidden" : void 0,
+        ...L,
+        ...p.props.style
       },
-      ...d
+      ...g
     })
   });
 });
-process.env.NODE_ENV !== "production" && ($e.propTypes = {
+process.env.NODE_ENV !== "production" && (Ee.propTypes = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
@@ -203,27 +203,27 @@ process.env.NODE_ENV !== "production" && ($e.propTypes = {
    * node and a done callback. Allows for more fine grained transition end
    * logic. Note: Timeouts are still used as a fallback if provided.
    */
-  addEndListener: n.func,
+  addEndListener: r.func,
   /**
    * Perform the enter transition when it first mounts if `in` is also `true`.
    * Set this to `false` to disable this behavior.
    * @default true
    */
-  appear: n.bool,
+  appear: r.bool,
   /**
    * A single child content element.
    */
-  children: Xe.isRequired,
+  children: Ye.isRequired,
   /**
    * An HTML element, or a function that returns one.
    * It's used to set the container the Slide is transitioning from.
    */
-  container: to(n.oneOfType([Ge, n.func]), (e) => {
+  container: io(r.oneOfType([_e, r.func]), (e) => {
     if (e.open) {
-      const o = Te(e.container);
+      const o = Pe(e.container);
       if (o && o.nodeType === 1) {
-        const r = o.getBoundingClientRect();
-        if (process.env.NODE_ENV !== "test" && r.top === 0 && r.left === 0 && r.right === 0 && r.bottom === 0)
+        const t = o.getBoundingClientRect();
+        if (process.env.NODE_ENV !== "test" && t.top === 0 && t.left === 0 && t.right === 0 && t.bottom === 0)
           return new Error(["MUI: The `container` prop provided to the component is invalid.", "The anchor element should be part of the document layout.", "Make sure the element is present in the document or that it's not display none."].join(`
 `));
       } else if (!o || typeof o.getBoundingClientRect != "function" || o.contextElement != null && o.contextElement.nodeType !== 1)
@@ -236,7 +236,7 @@ process.env.NODE_ENV !== "production" && ($e.propTypes = {
    * Direction the child node will enter from.
    * @default 'down'
    */
-  direction: n.oneOf(["down", "left", "right", "up"]),
+  direction: r.oneOf(["down", "left", "right", "up"]),
   /**
    * The transition timing function.
    * You may specify a single easing or a object containing enter and exit values.
@@ -245,42 +245,42 @@ process.env.NODE_ENV !== "production" && ($e.propTypes = {
    *   exit: theme.transitions.easing.sharp,
    * }
    */
-  easing: n.oneOfType([n.shape({
-    enter: n.string,
-    exit: n.string
-  }), n.string]),
+  easing: r.oneOfType([r.shape({
+    enter: r.string,
+    exit: r.string
+  }), r.string]),
   /**
    * If `true`, the component will transition in.
    */
-  in: n.bool,
+  in: r.bool,
   /**
    * @ignore
    */
-  onEnter: n.func,
+  onEnter: r.func,
   /**
    * @ignore
    */
-  onEntered: n.func,
+  onEntered: r.func,
   /**
    * @ignore
    */
-  onEntering: n.func,
+  onEntering: r.func,
   /**
    * @ignore
    */
-  onExit: n.func,
+  onExit: r.func,
   /**
    * @ignore
    */
-  onExited: n.func,
+  onExited: r.func,
   /**
    * @ignore
    */
-  onExiting: n.func,
+  onExiting: r.func,
   /**
    * @ignore
    */
-  style: n.object,
+  style: r.object,
   /**
    * The duration for the transition, in milliseconds.
    * You may specify a single timeout for all transitions, or individually with an object.
@@ -289,59 +289,59 @@ process.env.NODE_ENV !== "production" && ($e.propTypes = {
    *   exit: theme.transitions.duration.leavingScreen,
    * }
    */
-  timeout: n.oneOfType([n.number, n.shape({
-    appear: n.number,
-    enter: n.number,
-    exit: n.number
+  timeout: r.oneOfType([r.number, r.shape({
+    appear: r.number,
+    enter: r.number,
+    exit: r.number
   })])
 });
-function lo(e) {
-  return Ae("MuiDrawer", e);
+function uo(e) {
+  return Fe("MuiDrawer", e);
 }
-je("MuiDrawer", ["root", "docked", "paper", "paperAnchorLeft", "paperAnchorRight", "paperAnchorTop", "paperAnchorBottom", "paperAnchorDockedLeft", "paperAnchorDockedRight", "paperAnchorDockedTop", "paperAnchorDockedBottom", "modal"]);
-const Pe = (e, o) => {
+Ve("MuiDrawer", ["root", "docked", "paper", "paperAnchorLeft", "paperAnchorRight", "paperAnchorTop", "paperAnchorBottom", "paperAnchorDockedLeft", "paperAnchorDockedRight", "paperAnchorDockedTop", "paperAnchorDockedBottom", "modal"]);
+const Me = (e, o) => {
   const {
-    ownerState: r
+    ownerState: t
   } = e;
-  return [o.root, (r.variant === "permanent" || r.variant === "persistent") && o.docked, o.modal];
-}, po = (e) => {
+  return [o.root, (t.variant === "permanent" || t.variant === "persistent") && o.docked, o.modal];
+}, fo = (e) => {
   const {
     classes: o,
-    anchor: r,
-    variant: t
+    anchor: t,
+    variant: n
   } = e, c = {
     root: ["root"],
-    docked: [(t === "permanent" || t === "persistent") && "docked"],
+    docked: [(n === "permanent" || n === "persistent") && "docked"],
     modal: ["modal"],
-    paper: ["paper", `paperAnchor${q(r)}`, t !== "temporary" && `paperAnchorDocked${q(r)}`]
+    paper: ["paper", `paperAnchor${q(t)}`, n !== "temporary" && `paperAnchorDocked${q(t)}`]
   };
-  return Ve(c, lo, o);
-}, ho = ae(qe, {
+  return Xe(c, uo, o);
+}, mo = ce(to, {
   name: "MuiDrawer",
   slot: "Root",
-  overridesResolver: Pe
-})(ye(({
+  overridesResolver: Me
+})(Ce(({
   theme: e
 }) => ({
   zIndex: (e.vars || e).zIndex.drawer
-}))), me = ae("div", {
-  shouldForwardProp: Ue,
+}))), be = ce("div", {
+  shouldForwardProp: We,
   name: "MuiDrawer",
   slot: "Docked",
   skipVariantsResolver: !1,
-  overridesResolver: Pe
+  overridesResolver: Me
 })({
   flex: "0 0 auto"
-}), uo = ae(eo, {
+}), go = ce(ro, {
   name: "MuiDrawer",
   slot: "Paper",
   overridesResolver: (e, o) => {
     const {
-      ownerState: r
+      ownerState: t
     } = e;
-    return [o.paper, o[`paperAnchor${q(r.anchor)}`], r.variant !== "temporary" && o[`paperAnchorDocked${q(r.anchor)}`]];
+    return [o.paper, o[`paperAnchor${q(t.anchor)}`], t.variant !== "temporary" && o[`paperAnchorDocked${q(t.anchor)}`]];
   }
-})(ye(({
+})(Ce(({
   theme: e
 }) => ({
   overflowY: "auto",
@@ -425,105 +425,105 @@ const Pe = (e, o) => {
       borderTop: `1px solid ${(e.vars || e).palette.divider}`
     }
   }]
-}))), Ee = {
+}))), He = {
   left: "right",
   right: "left",
   top: "down",
   bottom: "up"
 };
-function fo(e) {
+function bo(e) {
   return ["left", "right"].includes(e);
 }
-function mo({
+function xo({
   direction: e
 }, o) {
-  return e === "rtl" && fo(o) ? Ee[o] : o;
+  return e === "rtl" && bo(o) ? He[o] : o;
 }
-const V = /* @__PURE__ */ w.forwardRef(function(o, r) {
-  const t = Fe({
+const V = /* @__PURE__ */ x.forwardRef(function(o, t) {
+  const n = Qe({
     props: o,
     name: "MuiDrawer"
-  }), c = we(), f = Je(), u = {
+  }), c = ke(), l = qe(), u = {
     enter: c.transitions.duration.enteringScreen,
     exit: c.transitions.duration.leavingScreen
   }, {
-    anchor: h = "left",
-    BackdropProps: l,
-    children: m,
-    className: p,
-    elevation: M = 16,
-    hideBackdrop: k = !1,
+    anchor: f = "left",
+    BackdropProps: p,
+    children: b,
+    className: h,
+    elevation: $ = 16,
+    hideBackdrop: P = !1,
     ModalProps: {
-      BackdropProps: B,
-      ...L
+      BackdropProps: A,
+      ...z
     } = {},
-    onClose: N,
-    open: C = !1,
-    PaperProps: R = {},
-    SlideProps: O,
+    onClose: j,
+    open: E = !1,
+    PaperProps: N = {},
+    SlideProps: M,
     // eslint-disable-next-line react/prop-types
-    TransitionComponent: I = $e,
-    transitionDuration: S = u,
-    variant: g = "temporary",
-    ...v
-  } = t, b = w.useRef(!1);
-  w.useEffect(() => {
-    b.current = !0;
+    TransitionComponent: L = Ee,
+    transitionDuration: H = u,
+    variant: O = "temporary",
+    ...B
+  } = n, d = x.useRef(!1);
+  x.useEffect(() => {
+    d.current = !0;
   }, []);
-  const D = mo({
-    direction: f ? "rtl" : "ltr"
-  }, h), T = {
-    ...t,
-    anchor: h,
-    elevation: M,
-    open: C,
-    variant: g,
-    ...v
-  }, $ = po(T), A = /* @__PURE__ */ a(uo, {
-    elevation: g === "temporary" ? M : 0,
+  const w = xo({
+    direction: l ? "rtl" : "ltr"
+  }, f), y = {
+    ...n,
+    anchor: f,
+    elevation: $,
+    open: E,
+    variant: O,
+    ...B
+  }, m = fo(y), S = /* @__PURE__ */ a(go, {
+    elevation: O === "temporary" ? $ : 0,
     square: !0,
-    ...R,
-    className: J($.paper, R.className),
-    ownerState: T,
-    children: m
+    ...N,
+    className: J(m.paper, N.className),
+    ownerState: y,
+    children: b
   });
-  if (g === "permanent")
-    return /* @__PURE__ */ a(me, {
-      className: J($.root, $.docked, p),
-      ownerState: T,
-      ref: r,
-      ...v,
-      children: A
+  if (O === "permanent")
+    return /* @__PURE__ */ a(be, {
+      className: J(m.root, m.docked, h),
+      ownerState: y,
+      ref: t,
+      ...B,
+      children: S
     });
-  const j = /* @__PURE__ */ a(I, {
-    in: C,
-    direction: Ee[D],
-    timeout: S,
-    appear: b.current,
-    ...O,
-    children: A
+  const U = /* @__PURE__ */ a(L, {
+    in: E,
+    direction: He[w],
+    timeout: H,
+    appear: d.current,
+    ...M,
+    children: S
   });
-  return g === "persistent" ? /* @__PURE__ */ a(me, {
-    className: J($.root, $.docked, p),
-    ownerState: T,
-    ref: r,
-    ...v,
-    children: j
-  }) : /* @__PURE__ */ a(ho, {
+  return O === "persistent" ? /* @__PURE__ */ a(be, {
+    className: J(m.root, m.docked, h),
+    ownerState: y,
+    ref: t,
+    ...B,
+    children: U
+  }) : /* @__PURE__ */ a(mo, {
     BackdropProps: {
-      ...l,
-      ...B,
-      transitionDuration: S
+      ...p,
+      ...A,
+      transitionDuration: H
     },
-    className: J($.root, $.modal, p),
-    open: C,
-    ownerState: T,
-    onClose: N,
-    hideBackdrop: k,
-    ref: r,
-    ...v,
-    ...L,
-    children: j
+    className: J(m.root, m.modal, h),
+    open: E,
+    ownerState: y,
+    onClose: j,
+    hideBackdrop: P,
+    ref: t,
+    ...B,
+    ...z,
+    children: U
   });
 });
 process.env.NODE_ENV !== "production" && (V.propTypes = {
@@ -535,38 +535,38 @@ process.env.NODE_ENV !== "production" && (V.propTypes = {
    * Side from which the drawer will appear.
    * @default 'left'
    */
-  anchor: n.oneOf(["bottom", "left", "right", "top"]),
+  anchor: r.oneOf(["bottom", "left", "right", "top"]),
   /**
    * @ignore
    */
-  BackdropProps: n.object,
+  BackdropProps: r.object,
   /**
    * The content of the component.
    */
-  children: n.node,
+  children: r.node,
   /**
    * Override or extend the styles applied to the component.
    */
-  classes: n.object,
+  classes: r.object,
   /**
    * @ignore
    */
-  className: n.string,
+  className: r.string,
   /**
    * The elevation of the drawer.
    * @default 16
    */
-  elevation: oo,
+  elevation: no,
   /**
    * If `true`, the backdrop is not rendered.
    * @default false
    */
-  hideBackdrop: n.bool,
+  hideBackdrop: r.bool,
   /**
    * Props applied to the [`Modal`](https://mui.com/material-ui/api/modal/) element.
    * @default {}
    */
-  ModalProps: n.object,
+  ModalProps: r.object,
   /**
    * Callback fired when the component requests to be closed.
    * The `reason` parameter can optionally be used to control the response to `onClose`.
@@ -574,25 +574,25 @@ process.env.NODE_ENV !== "production" && (V.propTypes = {
    * @param {object} event The event source of the callback.
    * @param {string} reason Can be: `"escapeKeyDown"`, `"backdropClick"`.
    */
-  onClose: n.func,
+  onClose: r.func,
   /**
    * If `true`, the component is shown.
    * @default false
    */
-  open: n.bool,
+  open: r.bool,
   /**
    * Props applied to the [`Paper`](https://mui.com/material-ui/api/paper/) element.
    * @default {}
    */
-  PaperProps: n.object,
+  PaperProps: r.object,
   /**
    * Props applied to the [`Slide`](https://mui.com/material-ui/api/slide/) element.
    */
-  SlideProps: n.object,
+  SlideProps: r.object,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: n.oneOfType([n.arrayOf(n.oneOfType([n.func, n.object, n.bool])), n.func, n.object]),
+  sx: r.oneOfType([r.arrayOf(r.oneOfType([r.func, r.object, r.bool])), r.func, r.object]),
   /**
    * The duration for the transition, in milliseconds.
    * You may specify a single timeout for all transitions, or individually with an object.
@@ -601,26 +601,26 @@ process.env.NODE_ENV !== "production" && (V.propTypes = {
    *   exit: theme.transitions.duration.leavingScreen,
    * }
    */
-  transitionDuration: n.oneOfType([n.number, n.shape({
-    appear: n.number,
-    enter: n.number,
-    exit: n.number
+  transitionDuration: r.oneOfType([r.number, r.shape({
+    appear: r.number,
+    enter: r.number,
+    exit: r.number
   })]),
   /**
    * The variant to use.
    * @default 'temporary'
    */
-  variant: n.oneOf(["permanent", "persistent", "temporary"])
+  variant: r.oneOf(["permanent", "persistent", "temporary"])
 });
-const ge = ee(/* @__PURE__ */ a("path", {
+const xe = ee(/* @__PURE__ */ a("path", {
   d: "m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"
-}), "ArrowForward"), go = ee(/* @__PURE__ */ a("path", {
+}), "ArrowForward"), vo = ee(/* @__PURE__ */ a("path", {
   d: "m17 7-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5zM4 5h8V3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8v-2H4z"
-}), "Logout"), be = ee(/* @__PURE__ */ a("path", {
+}), "Logout"), ve = ee(/* @__PURE__ */ a("path", {
   d: "M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2m5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12z"
-}), "Cancel"), bo = ee(/* @__PURE__ */ a("path", {
+}), "Cancel"), wo = ee(/* @__PURE__ */ a("path", {
   d: "M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2"
-}), "MoreHoriz"), xo = y("div", {
+}), "MoreHoriz"), yo = v("div", {
   shouldForwardProp: (e) => oe(e)
 })(({ backgroundColor: e }) => ({
   display: "flex",
@@ -631,7 +631,7 @@ const ge = ee(/* @__PURE__ */ a("path", {
   height: "100vh",
   fontFamily: "Roboto, sans-serif",
   overflow: "hidden"
-})), vo = y("div")(
+})), ko = v("div")(
   ({ tabletPadding: e, mobile: o }) => ({
     display: "flex",
     flexDirection: o ? "column-reverse" : "row",
@@ -643,13 +643,13 @@ const ge = ee(/* @__PURE__ */ a("path", {
     boxSizing: "border-box",
     minHeight: `calc(100% - ${i.constants.appHeaderHeight}px)`
   })
-), wo = y("div", {
+), Co = v("div", {
   shouldForwardProp: (e) => oe(e)
-})(({ withActionsPanel: e, tablet: o, borderColor: r, backgroundColor: t }) => ({
+})(({ withActionsPanel: e, tablet: o, borderColor: t, backgroundColor: n }) => ({
   display: "flex",
   flexDirection: "column",
   opacity: e ? 1 : 0,
-  border: `1px solid ${r}`,
+  border: `1px solid ${t}`,
   borderRight: 0,
   borderRadius: "4px",
   borderTopRightRadius: 0,
@@ -657,16 +657,16 @@ const ge = ee(/* @__PURE__ */ a("path", {
   height: e ? "calc(100% + 2px)" : "100%",
   boxSizing: "border-box",
   padding: e ? o ? "2px" : "1rem" : 0,
-  backgroundColor: t,
+  backgroundColor: n,
   width: e ? o ? "66px" : "400px" : 0,
   maxWidth: o ? "100%" : "25%",
   transition: "313ms all ease-in-out",
   ...!e && {
     border: "none"
   }
-})), yo = y(V)(
+})), To = v(V)(
   ({ shadowColor: e, backgroundColor: o }) => ({
-    ...H`
+    ...R`
       top: ${i.constants.appHeaderHeight}px;
       font-family: 'Roboto';
 
@@ -688,12 +688,12 @@ const ge = ee(/* @__PURE__ */ a("path", {
       }
     `
   })
-), xe = y(Z)(({ iconColor: e, highlight1: o, highlight2: r, rightDrawer: t = !1 }) => ({
-  ...H`
+), we = v(Z)(({ iconColor: e, highlight1: o, highlight2: t, rightDrawer: n = !1 }) => ({
+  ...R`
     position: absolute;
     top: -0.5rem;
-    ${!t && { right: "-0.5rem" }};
-    ${t && { left: "-0.5rem" }};
+    ${!n && { right: "-0.5rem" }};
+    ${n && { left: "-0.5rem" }};
     z-index: 1;
     border-radius: 50%;
 
@@ -707,17 +707,17 @@ const ge = ee(/* @__PURE__ */ a("path", {
     :focus-visible {
       svg {
         filter: unset;
-        background-color: ${r};
+        background-color: ${t};
         fill: ${e};
       }
     }
   `
-})), ko = y("div", {
+})), $o = v("div", {
   shouldForwardProp: (e) => oe(e)
-})(({ withActionsPanel: e, borderColor: o, backgroundColor: r, mobileScreen: t }) => ({
+})(({ withActionsPanel: e, borderColor: o, backgroundColor: t, mobileScreen: n }) => ({
   display: "flex",
   overflow: "hidden",
-  backgroundColor: r,
+  backgroundColor: t,
   borderRadius: "4px",
   borderBottomLeftRadius: e ? 0 : "4px",
   borderTopLeftRadius: e ? 0 : "4px",
@@ -729,16 +729,16 @@ const ge = ee(/* @__PURE__ */ a("path", {
   h1: {
     margin: 0
   },
-  ...t && {
+  ...n && {
     border: "none",
     borderRadius: 0,
     borderBottomLeftRadius: 0,
     borderTopLeftRadius: 0
   }
-})), Co = y(V, {
+})), Po = v(V, {
   shouldForwardProp: (e) => !["backgroundColor", "shadowColor"].includes(e)
 })(({ backgroundColor: e, shadowColor: o }) => ({
-  ...H`
+  ...R`
     z-index: 1327;
 
     .MuiDrawer-paper {
@@ -753,10 +753,10 @@ const ge = ee(/* @__PURE__ */ a("path", {
       background-color: transparent;
     }
   `
-})), To = y(V, {
+})), Eo = v(V, {
   shouldForwardProp: (e) => e != "backgroundColor"
 })(({ backgroundColor: e }) => ({
-  ...H`
+  ...R`
     z-index: 1300;
 
     .MuiDrawer-paper {
@@ -775,10 +775,10 @@ const ge = ee(/* @__PURE__ */ a("path", {
       background-color: transparent;
     }
   `
-})), $o = y("div", {
+})), Mo = v("div", {
   shouldForwardProp: (e) => oe(e)
 })(({ backgroundColor: e, open: o }) => ({
-  ...H`
+  ...R`
     position: fixed;
     transition: height 201ms cubic-bezier(0, 0, 0.2, 1);
     z-index: 1300;
@@ -790,15 +790,15 @@ const ge = ee(/* @__PURE__ */ a("path", {
     box-sizing: border-box;
     padding: ${o ? "16px" : 0};
   `
-})), Po = y("h1")(({ color: e }) => ({
-  ...H`
+})), Ho = v("h1")(({ color: e }) => ({
+  ...R`
     margin: 0;
     font-size: 2.1rem;
     font-family: 'Roboto';
     color: ${e};
   `
-})), Eo = y(V)(() => ({
-  ...H`
+})), Ro = v(V)(({ backgroundQuaternary: e }) => ({
+  ...R`
     top: ${i.constants.appHeaderHeight}px;
     font-family: 'Roboto';
     z-index: 1336;
@@ -808,7 +808,7 @@ const ge = ee(/* @__PURE__ */ a("path", {
       box-sizing: border-box;
       top: ${i.constants.appHeaderHeight}px;
       height: calc(100vh - ${i.constants.appHeaderHeight}px);
-      background-color: ${i.colors.white};
+      background-image: linear-gradient(to bottom right, ${i.colors.oldPaper}, ${e});
       padding: 0;
     }
 
@@ -817,21 +817,21 @@ const ge = ee(/* @__PURE__ */ a("path", {
       background-color: transparent;
     }
   `
-})), Mo = y("img")(({ width: e, height: o }) => ({
-  ...H`
+})), So = v("img")(({ width: e, height: o }) => ({
+  ...R`
     width: ${e}px;
     height: ${o}px;
   `
-})), ve = y("div")(({ justifyStart: e }) => ({
-  ...H`
+})), ye = v("div")(({ justifyStart: e }) => ({
+  ...R`
     display: flex;
     flex-direction: row;
     align-items: flex-start;
     justify-content: ${e ? "start" : "space-between"};
     padding: 8px 16px 8px 24px;
   `
-})), Ho = y(V)(() => ({
-  ...H`
+})), Do = v(V)(({ backgroundQuaternary: e }) => ({
+  ...R`
     top: ${i.constants.appHeaderHeight}px;
     font-family: 'Roboto';
 
@@ -841,7 +841,7 @@ const ge = ee(/* @__PURE__ */ a("path", {
       box-sizing: border-box;
       top: ${i.constants.appHeaderHeight}px;
       height: calc(100vh - ${i.constants.appHeaderHeight}px);
-      background-color: ${i.colors.white};
+      background-image: linear-gradient(to bottom right, ${i.colors.oldPaper}, ${e});
       box-shadow: 0 3px 6px 3px ${i.colors.gray};
       padding: 0;
       overflow: visible;
@@ -852,275 +852,282 @@ const ge = ee(/* @__PURE__ */ a("path", {
       background-color: transparent;
     }
   `
-})), _o = ({
+})), Zo = ({
   navProps: e,
   appHeaderProps: o = {},
-  userProfileMenuItems: r = [],
-  actionsPanelContent: t,
-  navWidth: c = i.constants.navDefaultWidth,
+  userInfo: t,
+  userSettingsEnabled: n = !0,
+  userProfileMenuItems: c = [],
+  actionsPanelContent: l,
+  navWidth: u = i.constants.navDefaultWidth,
   breakpoints: f = { mobile: i.screenSizes.mobile, tablet: i.screenSizes.tablet },
-  children: u,
-  themeColors: h = {},
-  logoProps: l = {},
-  loggedIn: m,
-  mobileActionsPanelOpen: p
+  children: p,
+  themeColors: b = {},
+  logoProps: h = {},
+  loggedIn: $,
+  mobileActionsPanelOpen: P
 }) => {
-  const [M, k] = Y(!1), [B, L] = Y(!1), [N, C] = Y(!1), [R, O] = Y(!1), { mobile: I = i.screenSizes.mobile, tablet: S = i.screenSizes.tablet } = f, g = fe(`(max-width: ${I})`), v = fe(`(max-width: ${S})`) && !g, b = !g && !v, {
-    backgroundPrimary: D = i.colors.whiteGreen,
-    backgroundSecondary: x = i.colors.whiteGreenA,
-    backgroundTertiary: T = i.colors.sage,
-    highlightPrimary: $ = i.colors.sunlight,
-    highlightSecondary: A = i.colors.dandelion,
-    highlightTertiary: j = `${i.colors.dandelion}99`,
-    iconPrimary: z = i.colors.darkGreen,
-    shadowPrimary: W = i.colors.darkGreenO99,
-    shadowSecondary: U = i.boxShadows.darkGreen,
-    shadowTertiary: X = i.boxShadows.darkGreenThick,
-    borderPrimary: s = i.colors.green,
-    scrollColor: d = i.colors.darkGreenO99,
-    avatarColors: Q
-  } = h, { logoSrc: se = Ie, logoWidth: ce = 36, logoHeight: le = 50 } = l, Me = {
-    backgroundPrimary: D,
-    backgroundSecondary: x,
-    backgroundTertiary: T,
-    highlightPrimary: $,
-    highlightSecondary: A,
-    highlightTertiary: j,
-    borderPrimary: s,
-    iconPrimary: z,
-    shadowPrimary: W,
-    shadowSecondary: U,
-    shadowTertiary: X,
-    scrollColor: d
-  }, He = { logoSrc: se, logoWidth: ce, logoHeight: le }, te = t != null, Re = { ...o, navWidth: c, loggedIn: m }, { onLogout: Se = () => {
-  } } = o, G = { ...e, themeColors: Me }, De = {
-    ...G,
-    navWidth: `${c}px`,
-    isMobile: g
-  }, pe = [
-    { label: "Log Out", icon: /* @__PURE__ */ a(go, {}), onClick: Se },
-    ...r
-  ].map((P) => ({
-    ...P,
+  const [A, z] = Y(!1), [j, E] = Y(!1), [N, M] = Y(!1), [L, H] = Y(!1), { mobile: O = i.screenSizes.mobile, tablet: B = i.screenSizes.tablet } = f, d = ge(`(max-width: ${O})`), w = ge(`(max-width: ${B})`) && !d, k = !d && !w, {
+    backgroundPrimary: y = i.colors.whiteGreen,
+    backgroundSecondary: m = i.colors.whiteGreenA,
+    backgroundTertiary: S = i.colors.sage,
+    highlightPrimary: U = i.colors.sunlight,
+    backgroundQuaternary: X = i.colors.moss,
+    highlightSecondary: te = i.colors.dandelion,
+    highlightTertiary: re = `${i.colors.dandelion}99`,
+    iconPrimary: D = i.colors.darkGreen,
+    shadowPrimary: s = i.colors.darkGreenO99,
+    shadowSecondary: g = i.boxShadows.darkGreen,
+    shadowTertiary: W = i.boxShadows.darkGreenThick,
+    borderPrimary: G = i.colors.green,
+    scrollColor: I = i.colors.darkGreenO99,
+    iconColors: Re
+  } = b, { logoSrc: le = je, logoWidth: pe = 36, logoHeight: de = 50 } = h, Se = {
+    backgroundPrimary: y,
+    backgroundSecondary: m,
+    backgroundTertiary: S,
+    highlightPrimary: U,
+    highlightSecondary: te,
+    highlightTertiary: re,
+    borderPrimary: G,
+    iconPrimary: D,
+    shadowPrimary: s,
+    shadowSecondary: g,
+    shadowTertiary: W,
+    scrollColor: I
+  }, De = { logoSrc: le, logoWidth: pe, logoHeight: de }, ne = l != null, ze = { ...o, navWidth: u, loggedIn: $ }, { onLogout: Ne = () => {
+  } } = o, Q = { ...e, themeColors: Se }, Le = {
+    ...Q,
+    navWidth: `${u}px`,
+    isMobile: d
+  }, he = [
+    { label: "Log Out", icon: /* @__PURE__ */ a(vo, {}), onClick: Ne },
+    ...c
+  ].map((C) => ({
+    ...C,
     onClick: () => {
-      P.onClick && P.onClick(), C(!1);
+      C.onClick && C.onClick(), M(!1);
     }
-  })), { navItems: re } = e, ze = re.map((P) => ({
-    ...P,
+  })), { navItems: ie } = e, Oe = ie.map((C) => ({
+    ...C,
     onClick: () => {
-      P.onClick && P.onClick(), k(!1);
+      C.onClick && C.onClick(), z(!1);
     }
-  })), ne = {
-    ...G,
+  })), ae = {
+    ...Q,
     navWidth: "100%",
     isTablet: !0,
-    navItems: ze
+    navItems: Oe
   };
-  let ie = re.map((P) => ({
-    ...P,
+  let se = ie.map((C) => ({
+    ...C,
     onClick: () => {
-      P.onClick && P.onClick(), O(!1);
+      C.onClick && C.onClick(), H(!1);
     }
-  })), de = [];
-  re.length > 4 && g && (de = ie.splice(3), ie.push({
+  })), ue = [];
+  ie.length > 4 && d && (ue = se.splice(3), se.push({
     label: "More",
-    icon: /* @__PURE__ */ a(bo, {}),
-    onClick: () => O(!0)
+    icon: /* @__PURE__ */ a(wo, {}),
+    onClick: () => H(!0)
   }));
-  const Le = {
-    ...G,
+  const Be = {
+    ...Q,
     navWidth: "100%",
-    navItems: ie,
+    navItems: se,
     isMobile: !0,
-    activeRoute: R ? "More" : G.activeRoute
-  }, Ne = {
-    ...G,
+    activeRoute: L ? "More" : Q.activeRoute
+  }, Ie = {
+    ...Q,
     navWidth: "100%",
-    navItems: de,
+    navItems: ue,
     isTablet: !0
   };
-  return /* @__PURE__ */ E(xo, { backgroundColor: x, children: [
+  return /* @__PURE__ */ T(yo, { backgroundColor: m, children: [
     /* @__PURE__ */ a(
-      Oe,
+      Ae,
       {
-        ...Re,
-        hamburgerMenu: v,
-        onHamburgerMenuClick: () => k(!0),
-        onUserMenuClick: () => C(!0),
-        logoProps: He,
-        iconColor: z,
-        isMobile: g,
-        themeProps: { shadowSecondary: U, shadowTertiary: X, iconPrimary: z, borderPrimary: s },
-        avatarColors: Q
+        ...ze,
+        hamburgerMenu: w,
+        onHamburgerMenuClick: () => z(!0),
+        onUserMenuClick: () => M(!0),
+        logoProps: De,
+        iconColor: D,
+        isMobile: d,
+        themeProps: { shadowSecondary: g, shadowTertiary: W, iconPrimary: D, borderPrimary: G },
+        iconColors: Re,
+        userName: t == null ? void 0 : t.name,
+        userSettingsEnabled: n
       }
     ),
-    /* @__PURE__ */ E(vo, { tabletPadding: v, mobile: g, children: [
-      b && /* @__PURE__ */ a(F, { ...De }),
-      g && /* @__PURE__ */ E(he, { children: [
-        /* @__PURE__ */ a(F, { ...Le }),
+    /* @__PURE__ */ T(ko, { tabletPadding: w, mobile: d, children: [
+      k && /* @__PURE__ */ a(F, { ...Le }),
+      d && /* @__PURE__ */ T(fe, { children: [
+        /* @__PURE__ */ a(F, { ...Be }),
         /* @__PURE__ */ a(
-          To,
+          Eo,
           {
-            open: R,
-            onClose: () => O(!1),
-            backgroundColor: x,
+            open: L,
+            onClose: () => H(!1),
+            backgroundColor: m,
             anchor: "right",
-            children: /* @__PURE__ */ a(F, { ...Ne })
+            children: /* @__PURE__ */ a(F, { ...Ie })
           }
         )
       ] }),
-      v && /* @__PURE__ */ E(
-        Co,
+      w && /* @__PURE__ */ T(
+        Po,
         {
-          open: M,
-          onClose: () => k(!1),
-          backgroundColor: x,
-          shadowColor: W,
+          open: A,
+          onClose: () => z(!1),
+          backgroundColor: m,
+          shadowColor: s,
           children: [
-            /* @__PURE__ */ E(ve, { children: [
-              /* @__PURE__ */ a(Mo, { src: se, alt: "logo", width: ce, height: le }),
-              /* @__PURE__ */ a(Z, { variant: "icon", size: 36, onClick: () => k(!1), color: z, children: /* @__PURE__ */ a(Be, {}) })
+            /* @__PURE__ */ T(ye, { children: [
+              /* @__PURE__ */ a(So, { src: le, alt: "logo", width: pe, height: de }),
+              /* @__PURE__ */ a(Z, { variant: "icon", size: 36, onClick: () => z(!1), color: D, children: /* @__PURE__ */ a(Ue, {}) })
             ] }),
-            /* @__PURE__ */ a(F, { ...ne })
+            /* @__PURE__ */ a(F, { ...ae })
           ]
         }
       ),
-      v && /* @__PURE__ */ E(
-        yo,
+      w && /* @__PURE__ */ T(
+        To,
         {
-          open: B && te,
-          onClose: () => L(!1),
-          shadowColor: W,
-          backgroundColor: T,
+          open: j && ne,
+          onClose: () => E(!1),
+          shadowColor: s,
+          backgroundColor: S,
           children: [
             /* @__PURE__ */ a(
-              xe,
+              we,
               {
                 variant: "icon",
                 size: 24,
-                onClick: () => L(!1),
-                iconColor: z,
-                highlight1: x,
-                highlight2: x,
-                children: /* @__PURE__ */ a(be, {})
+                onClick: () => E(!1),
+                iconColor: D,
+                highlight1: m,
+                highlight2: m,
+                children: /* @__PURE__ */ a(ve, {})
               }
             ),
-            /* @__PURE__ */ a(_, { scrollColor: d, direction: "vertical", children: t && t })
+            /* @__PURE__ */ a(_, { scrollColor: I, direction: "vertical", children: l && l })
           ]
         }
       ),
-      (v || b) && /* @__PURE__ */ E(
-        Ho,
+      (w || k) && /* @__PURE__ */ T(
+        Do,
         {
           anchor: "right",
           open: N,
-          onClose: () => C(!1),
+          onClose: () => M(!1),
+          backgroundQuaternary: X,
           children: [
             /* @__PURE__ */ a(
-              xe,
+              we,
               {
                 variant: "icon",
                 size: 24,
-                onClick: () => C(!1),
+                onClick: () => M(!1),
                 iconColor: i.colors.midnight,
-                highlight1: i.colors.white,
-                highlight2: x,
+                highlight1: i.colors.sunlight,
+                highlight2: m,
                 rightDrawer: !0,
-                children: /* @__PURE__ */ a(be, {})
+                children: /* @__PURE__ */ a(ve, {})
               }
             ),
             /* @__PURE__ */ a(
               F,
               {
-                ...ne,
-                navItems: pe,
+                ...ae,
+                navItems: he,
                 themeColors: {
                   iconPrimary: i.colors.midnight,
-                  highlightPrimary: D,
-                  highlightTertiary: x,
-                  shadowSecondary: U,
-                  scrollColor: d
+                  highlightPrimary: y,
+                  highlightTertiary: m,
+                  shadowSecondary: g,
+                  scrollColor: I
                 }
               }
             )
           ]
         }
       ),
-      g && /* @__PURE__ */ E(he, { children: [
-        /* @__PURE__ */ E(
-          Eo,
+      d && /* @__PURE__ */ T(fe, { children: [
+        /* @__PURE__ */ T(
+          Ro,
           {
             anchor: "right",
             open: N,
-            onClose: () => C(!1),
+            onClose: () => M(!1),
+            backgroundQuaternary: X,
             children: [
-              /* @__PURE__ */ E(ve, { children: [
-                /* @__PURE__ */ a(Po, { color: i.colors.midnight, children: "Settings" }),
+              /* @__PURE__ */ T(ye, { children: [
+                /* @__PURE__ */ a(Ho, { color: i.colors.midnight, children: "Settings" }),
                 /* @__PURE__ */ a(
                   Z,
                   {
                     variant: "icon",
                     size: 36,
-                    onClick: () => C(!1),
+                    onClick: () => M(!1),
                     color: i.colors.midnight,
-                    children: /* @__PURE__ */ a(ge, {})
+                    children: /* @__PURE__ */ a(xe, {})
                   }
                 )
               ] }),
               /* @__PURE__ */ a(
                 F,
                 {
-                  ...ne,
-                  navItems: pe,
+                  ...ae,
+                  navItems: he,
                   themeColors: {
                     iconPrimary: i.colors.midnight,
-                    highlightPrimary: D,
-                    highlightTertiary: x,
-                    shadowSecondary: U,
-                    scrollColor: d
+                    highlightPrimary: y,
+                    highlightTertiary: m,
+                    shadowSecondary: g,
+                    scrollColor: I
                   }
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ a($o, { backgroundColor: T, open: p, children: /* @__PURE__ */ a(_, { scrollColor: d, direction: "vertical", children: t }) })
+        /* @__PURE__ */ a(Mo, { backgroundColor: S, open: P, children: /* @__PURE__ */ a(_, { scrollColor: I, direction: "vertical", children: l }) })
       ] }),
-      !g && /* @__PURE__ */ E(
-        wo,
+      !d && /* @__PURE__ */ T(
+        Co,
         {
-          withActionsPanel: te,
-          tablet: v,
-          borderColor: s,
-          backgroundColor: T,
+          withActionsPanel: ne,
+          tablet: w,
+          borderColor: G,
+          backgroundColor: S,
           children: [
-            b && /* @__PURE__ */ a(_, { scrollColor: d, direction: "vertical", children: t && t }),
-            v && /* @__PURE__ */ a(
+            k && /* @__PURE__ */ a(_, { scrollColor: I, direction: "vertical", children: l && l }),
+            w && /* @__PURE__ */ a(
               Z,
               {
                 variant: "icon",
                 size: 36,
-                onClick: () => L(!0),
-                color: z,
-                children: /* @__PURE__ */ a(ge, {})
+                onClick: () => E(!0),
+                color: D,
+                children: /* @__PURE__ */ a(xe, {})
               }
             )
           ]
         }
       ),
       /* @__PURE__ */ a(
-        ko,
+        $o,
         {
-          withActionsPanel: te,
-          borderColor: s,
-          backgroundColor: D,
-          mobileScreen: g,
-          children: /* @__PURE__ */ a(_, { scrollColor: d, children: u })
+          withActionsPanel: ne,
+          borderColor: G,
+          backgroundColor: y,
+          mobileScreen: d,
+          children: /* @__PURE__ */ a(_, { scrollColor: I, children: p })
         }
       )
     ] })
   ] });
 };
 export {
-  _o as default
+  Zo as default
 };