jcicl 0.0.215 → 0.0.219

package/.chunks/AppContainer.js

@@ -0,0 +1,1132 @@
+import { jsx as a, jsxs as T, Fragment as fe } from "react/jsx-runtime";
+import * as x from "react";
+import { useState as G } from "react";
+import { c as se } from "./createSvgIcon.js";
+import { n as v, i as q } from "./emotion-styled.browser.esm.js";
+import { c as R } from "./emotion-react.browser.esm.js";
+import Ie from "../AppHeader/AppHeader.js";
+import { Nav as F } from "../Nav/Nav.js";
+import Y from "../ScrollContainer/ScrollContainer.js";
+import { Button as K } from "../Button/Button.js";
+import i from "../theme.js";
+import { l as Ae } from "./jocologo.js";
+import { X as je } from "./Close.js";
+import { P as t, g as Ue, a as Fe, s as ce, r as Ve, c as Z, u as We, b as _, d as Qe } from "./DefaultPropsProvider.js";
+import { u as Xe } from "./index.js";
+import { b as Ge, e as Ye, H as _e, u as ke, g as Je, T as Ke, r as Ze, c as me } from "./Portal.js";
+import { m as Ce } from "./memoTheme.js";
+import { g as qe, o as Te, d as eo, M as oo, P as ro } from "./TextField.js";
+import { i as to } from "./useSlot.js";
+import { c as no } from "./chainPropTypes.js";
+import { c as io, u as ao } from "./TransitionGroupContext.js";
+function so(e, o, r, n, c) {
+  const [l, u] = x.useState(() => c && r ? r(e).matches : n ? n(e).matches : o);
+  return io(() => {
+    if (!r)
+      return;
+    const f = r(e), p = () => {
+      u(f.matches);
+    };
+    return p(), f.addEventListener("change", p), () => {
+      f.removeEventListener("change", p);
+    };
+  }, [e, r]), l;
+}
+const co = {
+  ...x
+}, Pe = co.useSyncExternalStore;
+function lo(e, o, r, n, c) {
+  const l = x.useCallback(() => o, [o]), u = x.useMemo(() => {
+    if (c && r)
+      return () => r(e).matches;
+    if (n !== null) {
+      const {
+        matches: h
+      } = n(e);
+      return () => h;
+    }
+    return l;
+  }, [l, e, n, c, r]), [f, p] = x.useMemo(() => {
+    if (r === null)
+      return [l, () => () => {
+      }];
+    const h = r(e);
+    return [() => h.matches, (P) => (h.addEventListener("change", P), () => {
+      h.removeEventListener("change", P);
+    })];
+  }, [l, r, e]);
+  return Pe(p, f, u);
+}
+function ge(e, o = {}) {
+  const r = Ge(), n = typeof window < "u" && typeof window.matchMedia < "u", {
+    defaultMatches: c = !1,
+    matchMedia: l = n ? window.matchMedia : null,
+    ssrMatchMedia: u = null,
+    noSsr: f = !1
+  } = qe({
+    name: "MuiUseMediaQuery",
+    props: o,
+    theme: r
+  });
+  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(`
+`));
+  let p = typeof e == "function" ? e(r) : e;
+  p = p.replace(/^@media( ?)/m, "");
+  const h = (Pe !== void 0 ? lo : so)(p, c, l, u, f);
+  return process.env.NODE_ENV !== "production" && x.useDebugValue({
+    query: p,
+    match: h
+  }), h;
+}
+function po(e, o, r) {
+  const n = o.getBoundingClientRect(), c = r && r.getBoundingClientRect(), l = Te(o);
+  let u;
+  if (o.fakeTransform)
+    u = o.fakeTransform;
+  else {
+    const b = l.getComputedStyle(o);
+    u = b.getPropertyValue("-webkit-transform") || b.getPropertyValue("transform");
+  }
+  let f = 0, p = 0;
+  if (u && u !== "none" && typeof u == "string") {
+    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 + 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 $e(e) {
+  return typeof e == "function" ? e() : e;
+}
+function J(e, o, r) {
+  const n = $e(r), c = po(e, o, n);
+  c && (o.style.webkitTransform = c, o.style.transform = c);
+}
+const Ee = /* @__PURE__ */ x.forwardRef(function(o, r) {
+  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: f = !0,
+    children: p,
+    container: b,
+    direction: h = "down",
+    easing: P = c,
+    in: $,
+    onEnter: A,
+    onEntered: z,
+    onEntering: j,
+    onExit: E,
+    onExited: N,
+    onExiting: M,
+    style: O,
+    timeout: H = l,
+    // eslint-disable-next-line react/prop-types
+    TransitionComponent: L = Ke,
+    ...B
+  } = o, d = x.useRef(null), w = ao(Je(p), d, r), k = (s) => (g) => {
+    s && (g === void 0 ? s(d.current) : s(d.current, g));
+  }, y = k((s, g) => {
+    J(h, s, b), Ze(s), A && A(s, g);
+  }), m = k((s, g) => {
+    const W = me({
+      timeout: H,
+      style: O,
+      easing: P
+    }, {
+      mode: "enter"
+    });
+    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), ee = k((s) => {
+    const g = me({
+      timeout: H,
+      style: O,
+      easing: P
+    }, {
+      mode: "exit"
+    });
+    s.style.webkitTransition = n.transitions.create("-webkit-transform", g), s.style.transition = n.transitions.create("transform", g), J(h, s, b), E && E(s);
+  }), oe = k((s) => {
+    s.style.webkitTransition = "", s.style.transition = "", N && N(s);
+  }), re = (s) => {
+    u && u(d.current, s);
+  }, D = x.useCallback(() => {
+    d.current && J(h, d.current, b);
+  }, [h, b]);
+  return x.useEffect(() => {
+    if ($ || h === "down" || h === "right")
+      return;
+    const s = eo(() => {
+      d.current && J(h, d.current, b);
+    }), g = Te(d.current);
+    return g.addEventListener("resize", s), () => {
+      s.clear(), g.removeEventListener("resize", s);
+    };
+  }, [h, $, b]), x.useEffect(() => {
+    $ || D();
+  }, [$, D]), /* @__PURE__ */ a(L, {
+    nodeRef: d,
+    onEnter: y,
+    onEntered: S,
+    onEntering: m,
+    onExit: ee,
+    onExited: oe,
+    onExiting: U,
+    addEndListener: re,
+    appear: f,
+    in: $,
+    timeout: H,
+    ...B,
+    children: (s, g) => /* @__PURE__ */ x.cloneElement(p, {
+      ref: w,
+      style: {
+        visibility: s === "exited" && !$ ? "hidden" : void 0,
+        ...O,
+        ...p.props.style
+      },
+      ...g
+    })
+  });
+});
+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`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * Add a custom transition end trigger. Called with the transitioning DOM
+   * node and a done callback. Allows for more fine grained transition end
+   * logic. Note: Timeouts are still used as a fallback if provided.
+   */
+  addEndListener: t.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: t.bool,
+  /**
+   * A single child content element.
+   */
+  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: no(t.oneOfType([_e, t.func]), (e) => {
+    if (e.open) {
+      const o = $e(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)
+          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)
+        return new Error(["MUI: The `container` prop provided to the component is invalid.", "It should be an HTML element instance."].join(`
+`));
+    }
+    return null;
+  }),
+  /**
+   * Direction the child node will enter from.
+   * @default 'down'
+   */
+  direction: t.oneOf(["down", "left", "right", "up"]),
+  /**
+   * The transition timing function.
+   * You may specify a single easing or a object containing enter and exit values.
+   * @default {
+   *   enter: theme.transitions.easing.easeOut,
+   *   exit: theme.transitions.easing.sharp,
+   * }
+   */
+  easing: t.oneOfType([t.shape({
+    enter: t.string,
+    exit: t.string
+  }), t.string]),
+  /**
+   * If `true`, the component will transition in.
+   */
+  in: t.bool,
+  /**
+   * @ignore
+   */
+  onEnter: t.func,
+  /**
+   * @ignore
+   */
+  onEntered: t.func,
+  /**
+   * @ignore
+   */
+  onEntering: t.func,
+  /**
+   * @ignore
+   */
+  onExit: t.func,
+  /**
+   * @ignore
+   */
+  onExited: t.func,
+  /**
+   * @ignore
+   */
+  onExiting: t.func,
+  /**
+   * @ignore
+   */
+  style: t.object,
+  /**
+   * The duration for the transition, in milliseconds.
+   * You may specify a single timeout for all transitions, or individually with an object.
+   * @default {
+   *   enter: theme.transitions.duration.enteringScreen,
+   *   exit: theme.transitions.duration.leavingScreen,
+   * }
+   */
+  timeout: t.oneOfType([t.number, t.shape({
+    appear: t.number,
+    enter: t.number,
+    exit: t.number
+  })])
+});
+function ho(e) {
+  return Ue("MuiDrawer", e);
+}
+Fe("MuiDrawer", ["root", "docked", "paper", "paperAnchorLeft", "paperAnchorRight", "paperAnchorTop", "paperAnchorBottom", "paperAnchorDockedLeft", "paperAnchorDockedRight", "paperAnchorDockedTop", "paperAnchorDockedBottom", "modal"]);
+const Me = (e, o) => {
+  const {
+    ownerState: r
+  } = e;
+  return [o.root, (r.variant === "permanent" || r.variant === "persistent") && o.docked, o.modal];
+}, uo = (e) => {
+  const {
+    classes: o,
+    anchor: r,
+    variant: n
+  } = e, c = {
+    root: ["root"],
+    docked: [(n === "permanent" || n === "persistent") && "docked"],
+    modal: ["modal"],
+    paper: ["paper", `paperAnchor${Z(r)}`, n !== "temporary" && `paperAnchorDocked${Z(r)}`]
+  };
+  return Qe(c, ho, o);
+}, fo = ce(oo, {
+  name: "MuiDrawer",
+  slot: "Root",
+  overridesResolver: Me
+})(Ce(({
+  theme: e
+}) => ({
+  zIndex: (e.vars || e).zIndex.drawer
+}))), be = ce("div", {
+  shouldForwardProp: Ve,
+  name: "MuiDrawer",
+  slot: "Docked",
+  skipVariantsResolver: !1,
+  overridesResolver: Me
+})({
+  flex: "0 0 auto"
+}), mo = ce(ro, {
+  name: "MuiDrawer",
+  slot: "Paper",
+  overridesResolver: (e, o) => {
+    const {
+      ownerState: r
+    } = e;
+    return [o.paper, o[`paperAnchor${Z(r.anchor)}`], r.variant !== "temporary" && o[`paperAnchorDocked${Z(r.anchor)}`]];
+  }
+})(Ce(({
+  theme: e
+}) => ({
+  overflowY: "auto",
+  display: "flex",
+  flexDirection: "column",
+  height: "100%",
+  flex: "1 0 auto",
+  zIndex: (e.vars || e).zIndex.drawer,
+  // Add iOS momentum scrolling for iOS < 13.0
+  WebkitOverflowScrolling: "touch",
+  // temporary style
+  position: "fixed",
+  top: 0,
+  // We disable the focus ring for mouse, touch and keyboard users.
+  // At some point, it would be better to keep it for keyboard users.
+  // :focus-ring CSS pseudo-class will help.
+  outline: 0,
+  variants: [{
+    props: {
+      anchor: "left"
+    },
+    style: {
+      left: 0
+    }
+  }, {
+    props: {
+      anchor: "top"
+    },
+    style: {
+      top: 0,
+      left: 0,
+      right: 0,
+      height: "auto",
+      maxHeight: "100%"
+    }
+  }, {
+    props: {
+      anchor: "right"
+    },
+    style: {
+      right: 0
+    }
+  }, {
+    props: {
+      anchor: "bottom"
+    },
+    style: {
+      top: "auto",
+      left: 0,
+      bottom: 0,
+      right: 0,
+      height: "auto",
+      maxHeight: "100%"
+    }
+  }, {
+    props: ({
+      ownerState: o
+    }) => o.anchor === "left" && o.variant !== "temporary",
+    style: {
+      borderRight: `1px solid ${(e.vars || e).palette.divider}`
+    }
+  }, {
+    props: ({
+      ownerState: o
+    }) => o.anchor === "top" && o.variant !== "temporary",
+    style: {
+      borderBottom: `1px solid ${(e.vars || e).palette.divider}`
+    }
+  }, {
+    props: ({
+      ownerState: o
+    }) => o.anchor === "right" && o.variant !== "temporary",
+    style: {
+      borderLeft: `1px solid ${(e.vars || e).palette.divider}`
+    }
+  }, {
+    props: ({
+      ownerState: o
+    }) => o.anchor === "bottom" && o.variant !== "temporary",
+    style: {
+      borderTop: `1px solid ${(e.vars || e).palette.divider}`
+    }
+  }]
+}))), He = {
+  left: "right",
+  right: "left",
+  top: "down",
+  bottom: "up"
+};
+function go(e) {
+  return ["left", "right"].includes(e);
+}
+function bo({
+  direction: e
+}, o) {
+  return e === "rtl" && go(o) ? He[o] : o;
+}
+const V = /* @__PURE__ */ x.forwardRef(function(o, r) {
+  const n = We({
+    props: o,
+    name: "MuiDrawer"
+  }), c = ke(), l = Xe(), u = {
+    enter: c.transitions.duration.enteringScreen,
+    exit: c.transitions.duration.leavingScreen
+  }, {
+    anchor: f = "left",
+    BackdropProps: p,
+    children: b,
+    className: h,
+    elevation: P = 16,
+    hideBackdrop: $ = !1,
+    ModalProps: {
+      BackdropProps: A,
+      ...z
+    } = {},
+    onClose: j,
+    open: E = !1,
+    PaperProps: N = {},
+    SlideProps: M,
+    // eslint-disable-next-line react/prop-types
+    TransitionComponent: O = Ee,
+    transitionDuration: H = u,
+    variant: L = "temporary",
+    ...B
+  } = n, d = x.useRef(!1);
+  x.useEffect(() => {
+    d.current = !0;
+  }, []);
+  const w = bo({
+    direction: l ? "rtl" : "ltr"
+  }, f), y = {
+    ...n,
+    anchor: f,
+    elevation: P,
+    open: E,
+    variant: L,
+    ...B
+  }, m = uo(y), S = /* @__PURE__ */ a(mo, {
+    elevation: L === "temporary" ? P : 0,
+    square: !0,
+    ...N,
+    className: _(m.paper, N.className),
+    ownerState: y,
+    children: b
+  });
+  if (L === "permanent")
+    return /* @__PURE__ */ a(be, {
+      className: _(m.root, m.docked, h),
+      ownerState: y,
+      ref: r,
+      ...B,
+      children: S
+    });
+  const U = /* @__PURE__ */ a(O, {
+    in: E,
+    direction: He[w],
+    timeout: H,
+    appear: d.current,
+    ...M,
+    children: S
+  });
+  return L === "persistent" ? /* @__PURE__ */ a(be, {
+    className: _(m.root, m.docked, h),
+    ownerState: y,
+    ref: r,
+    ...B,
+    children: U
+  }) : /* @__PURE__ */ a(fo, {
+    BackdropProps: {
+      ...p,
+      ...A,
+      transitionDuration: H
+    },
+    className: _(m.root, m.modal, h),
+    open: E,
+    ownerState: y,
+    onClose: j,
+    hideBackdrop: $,
+    ref: r,
+    ...B,
+    ...z,
+    children: U
+  });
+});
+process.env.NODE_ENV !== "production" && (V.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * Side from which the drawer will appear.
+   * @default 'left'
+   */
+  anchor: t.oneOf(["bottom", "left", "right", "top"]),
+  /**
+   * @ignore
+   */
+  BackdropProps: t.object,
+  /**
+   * The content of the component.
+   */
+  children: t.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: t.object,
+  /**
+   * @ignore
+   */
+  className: t.string,
+  /**
+   * The elevation of the drawer.
+   * @default 16
+   */
+  elevation: to,
+  /**
+   * If `true`, the backdrop is not rendered.
+   * @default false
+   */
+  hideBackdrop: t.bool,
+  /**
+   * Props applied to the [`Modal`](https://mui.com/material-ui/api/modal/) element.
+   * @default {}
+   */
+  ModalProps: t.object,
+  /**
+   * Callback fired when the component requests to be closed.
+   * The `reason` parameter can optionally be used to control the response to `onClose`.
+   *
+   * @param {object} event The event source of the callback.
+   * @param {string} reason Can be: `"escapeKeyDown"`, `"backdropClick"`.
+   */
+  onClose: t.func,
+  /**
+   * If `true`, the component is shown.
+   * @default false
+   */
+  open: t.bool,
+  /**
+   * Props applied to the [`Paper`](https://mui.com/material-ui/api/paper/) element.
+   * @default {}
+   */
+  PaperProps: t.object,
+  /**
+   * Props applied to the [`Slide`](https://mui.com/material-ui/api/slide/) element.
+   */
+  SlideProps: t.object,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: t.oneOfType([t.arrayOf(t.oneOfType([t.func, t.object, t.bool])), t.func, t.object]),
+  /**
+   * The duration for the transition, in milliseconds.
+   * You may specify a single timeout for all transitions, or individually with an object.
+   * @default {
+   *   enter: theme.transitions.duration.enteringScreen,
+   *   exit: theme.transitions.duration.leavingScreen,
+   * }
+   */
+  transitionDuration: t.oneOfType([t.number, t.shape({
+    appear: t.number,
+    enter: t.number,
+    exit: t.number
+  })]),
+  /**
+   * The variant to use.
+   * @default 'temporary'
+   */
+  variant: t.oneOf(["permanent", "persistent", "temporary"])
+});
+const xe = se(/* @__PURE__ */ a("path", {
+  d: "m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"
+}), "ArrowForward"), ve = se(/* @__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"), xo = se(/* @__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"), vo = v("div", {
+  shouldForwardProp: (e) => q(e)
+})(({ backgroundColor: e }) => ({
+  display: "flex",
+  flexDirection: "column",
+  width: "100vw",
+  position: "relative",
+  backgroundColor: e,
+  height: "100vh",
+  fontFamily: "Roboto, sans-serif",
+  overflow: "hidden"
+})), wo = v("div")(
+  ({ tabletPadding: e, mobile: o }) => ({
+    display: "flex",
+    flexDirection: o ? "column-reverse" : "row",
+    justifyContent: "flex-start",
+    alignItems: "flex-start",
+    width: "100%",
+    padding: o ? 0 : "0 2px 4px",
+    paddingLeft: e ? "2px" : 0,
+    boxSizing: "border-box",
+    minHeight: `calc(100% - ${i.constants.appHeaderHeight}px)`
+  })
+), yo = v("div", {
+  shouldForwardProp: (e) => q(e)
+})(({ withActionsPanel: e, tablet: o, borderColor: r, backgroundColor: n }) => ({
+  display: "flex",
+  flexDirection: "column",
+  opacity: e ? 1 : 0,
+  border: `1px solid ${r}`,
+  borderRight: 0,
+  borderRadius: "4px",
+  borderTopRightRadius: 0,
+  borderBottomRightRadius: 0,
+  height: e ? "calc(100% + 2px)" : "100%",
+  boxSizing: "border-box",
+  padding: e ? o ? "2px" : "1rem" : 0,
+  backgroundColor: n,
+  width: e ? o ? "66px" : "400px" : 0,
+  maxWidth: o ? "100%" : "25%",
+  transition: "313ms all ease-in-out",
+  ...!e && {
+    border: "none"
+  }
+})), ko = v(V)(
+  ({ shadowColor: e, backgroundColor: o }) => ({
+    ...R`
+      top: ${i.constants.appHeaderHeight}px;
+      font-family: 'Roboto';
+
+      .MuiDrawer-paper {
+        width: 360px;
+        max-width: 100vw;
+        box-sizing: border-box;
+        top: ${i.constants.appHeaderHeight}px;
+        height: calc(100vh - ${i.constants.appHeaderHeight}px);
+        background-color: ${o};
+        box-shadow: 0 3px 6px 3px ${e};
+        padding: 1rem;
+        overflow: visible;
+      }
+
+      .MuiBackdrop-root {
+        top: ${i.constants.appHeaderHeight}px;
+        background-color: transparent;
+      }
+    `
+  })
+), we = v(K)(({ iconColor: e, highlight1: o, highlight2: r, rightDrawer: n = !1 }) => ({
+  ...R`
+    position: absolute;
+    top: -0.5rem;
+    ${!n && { right: "-0.5rem" }};
+    ${n && { left: "-0.5rem" }};
+    z-index: 1;
+    border-radius: 50%;
+
+    svg {
+      background-color: ${e};
+      fill: ${o};
+      border-radius: 50%;
+    }
+
+    &:hover,
+    :focus-visible {
+      svg {
+        filter: unset;
+        background-color: ${r};
+        fill: ${e};
+      }
+    }
+  `
+})), Co = v("div", {
+  shouldForwardProp: (e) => q(e)
+})(({ withActionsPanel: e, borderColor: o, backgroundColor: r, mobileScreen: n }) => ({
+  display: "flex",
+  overflow: "hidden",
+  backgroundColor: r,
+  borderRadius: "4px",
+  borderBottomLeftRadius: e ? 0 : "4px",
+  borderTopLeftRadius: e ? 0 : "4px",
+  border: `1px solid ${o}`,
+  width: "100%",
+  height: "calc(100% + 2px)",
+  boxSizing: "border-box",
+  padding: "1rem",
+  h1: {
+    margin: 0
+  },
+  ...n && {
+    border: "none",
+    borderRadius: 0,
+    borderBottomLeftRadius: 0,
+    borderTopLeftRadius: 0
+  }
+})), To = v(V, {
+  shouldForwardProp: (e) => !["backgroundColor", "shadowColor"].includes(e)
+})(({ backgroundColor: e, shadowColor: o }) => ({
+  ...R`
+    z-index: 1327;
+
+    .MuiDrawer-paper {
+      width: 360px;
+      max-width: 100vw;
+      height: 100vh;
+      background-color: ${e};
+      box-shadow: 0 0px 6px 3px ${o};
+    }
+
+    .MuiBackdrop-root {
+      background-color: transparent;
+    }
+  `
+})), Po = v(V, {
+  shouldForwardProp: (e) => e != "backgroundColor"
+})(({ backgroundColor: e }) => ({
+  ...R`
+    z-index: 1300;
+
+    .MuiDrawer-paper {
+      z-index: 1300;
+      width: 100vw;
+      top: ${i.constants.appHeaderHeight}px;
+      height: calc(100vh - ${i.constants.appHeaderHeight}px - 72px);
+      background-color: ${e};
+      box-shadow: none;
+    }
+
+    .MuiBackdrop-root {
+      z-index: 1300;
+      top: ${i.constants.appHeaderHeight}px;
+      height: calc(100vh - ${i.constants.appHeaderHeight}px);
+      background-color: transparent;
+    }
+  `
+})), $o = v("div", {
+  shouldForwardProp: (e) => q(e)
+})(({ backgroundColor: e, open: o }) => ({
+  ...R`
+    position: fixed;
+    transition: height 201ms cubic-bezier(0, 0, 0.2, 1);
+    z-index: 1300;
+    bottom: 72px;
+    width: 100vw;
+    height: ${o ? `calc(100vh - ${i.constants.appHeaderHeight}px - 72px)` : 0};
+    overflow: hidden;
+    background-color: ${e};
+    box-sizing: border-box;
+    padding: ${o ? "16px" : 0};
+  `
+})), Eo = v("h1")(({ color: e }) => ({
+  ...R`
+    margin: 0;
+    font-size: 2.1rem;
+    font-family: 'Roboto';
+    color: ${e};
+  `
+})), Mo = v(V)(({ backgroundQuaternary: e }) => ({
+  ...R`
+    top: ${i.constants.appHeaderHeight}px;
+    font-family: 'Roboto';
+    z-index: 1336;
+
+    .MuiDrawer-paper {
+      width: 100vw;
+      box-sizing: border-box;
+      top: ${i.constants.appHeaderHeight}px;
+      height: calc(100vh - ${i.constants.appHeaderHeight}px);
+      background-image: linear-gradient(to bottom right, ${i.colors.oldPaper}, ${e});
+      padding: 0;
+    }
+
+    .MuiBackdrop-root {
+      top: ${i.constants.appHeaderHeight}px;
+      background-color: transparent;
+    }
+  `
+})), Ho = v("img")(({ width: e, height: o }) => ({
+  ...R`
+    width: ${e}px;
+    height: ${o}px;
+  `
+})), 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;
+  `
+})), Ro = v(V)(() => ({
+  ...R`
+    top: ${i.constants.appHeaderHeight}px;
+    font-family: 'Roboto';
+
+    .MuiDrawer-paper {
+      width: 360px;
+      max-width: 100vw;
+      box-sizing: border-box;
+      top: ${i.constants.appHeaderHeight}px;
+      height: calc(100vh - ${i.constants.appHeaderHeight}px);
+      background-color: ${i.colors.white};
+      box-shadow: 0 3px 6px 3px ${i.colors.gray};
+      padding: 0;
+      overflow: visible;
+    }
+
+    .MuiBackdrop-root {
+      top: ${i.constants.appHeaderHeight}px;
+      background-color: transparent;
+    }
+  `
+})), Zo = ({
+  navProps: e,
+  appHeaderProps: o = {},
+  userInfo: r,
+  userSettingsEnabled: n = !0,
+  userProfileMenuItems: c = [],
+  actionsPanelContent: l,
+  navWidth: u = i.constants.navDefaultWidth,
+  breakpoints: f = { mobile: i.screenSizes.mobile, tablet: i.screenSizes.tablet },
+  children: p,
+  themeColors: b = {},
+  logoProps: h = {},
+  loggedIn: P,
+  mobileActionsPanelOpen: $
+}) => {
+  const [A, z] = G(!1), [j, E] = G(!1), [N, M] = G(!1), [O, H] = G(!1), { mobile: L = i.screenSizes.mobile, tablet: B = i.screenSizes.tablet } = f, d = ge(`(max-width: ${L})`), 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: ee = i.colors.moss,
+    highlightSecondary: oe = 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: X = i.colors.green,
+    scrollColor: I = i.colors.darkGreenO99,
+    iconColors: Re
+  } = b, { logoSrc: le = Ae, logoWidth: pe = 36, logoHeight: de = 50 } = h, Se = {
+    backgroundPrimary: y,
+    backgroundSecondary: m,
+    backgroundTertiary: S,
+    highlightPrimary: U,
+    highlightSecondary: oe,
+    highlightTertiary: re,
+    borderPrimary: X,
+    iconPrimary: D,
+    shadowPrimary: s,
+    shadowSecondary: g,
+    shadowTertiary: W,
+    scrollColor: I
+  }, De = { logoSrc: le, logoWidth: pe, logoHeight: de }, te = l != null, ze = { ...o, navWidth: u, loggedIn: P }, Q = { ...e, themeColors: Se }, Ne = {
+    ...Q,
+    navWidth: `${u}px`,
+    isMobile: d
+  }, he = [
+    // { label: 'Log Out', icon: <LogoutIcon />, onClick: onLogout },
+    ...c
+  ].map((C) => ({
+    ...C,
+    onClick: () => {
+      C.onClick && C.onClick(), M(!1);
+    }
+  })), { navItems: ne } = e, Oe = ne.map((C) => ({
+    ...C,
+    onClick: () => {
+      C.onClick && C.onClick(), z(!1);
+    }
+  })), ie = {
+    ...Q,
+    navWidth: "100%",
+    isTablet: !0,
+    navItems: Oe
+  };
+  let ae = ne.map((C) => ({
+    ...C,
+    onClick: () => {
+      C.onClick && C.onClick(), H(!1);
+    }
+  })), ue = [];
+  ne.length > 4 && d && (ue = ae.splice(3), ae.push({
+    label: "More",
+    icon: /* @__PURE__ */ a(xo, {}),
+    onClick: () => H(!0)
+  }));
+  const Le = {
+    ...Q,
+    navWidth: "100%",
+    navItems: ae,
+    isMobile: !0,
+    activeRoute: O ? "More" : Q.activeRoute
+  }, Be = {
+    ...Q,
+    navWidth: "100%",
+    navItems: ue,
+    isTablet: !0
+  };
+  return /* @__PURE__ */ T(vo, { backgroundColor: m, children: [
+    /* @__PURE__ */ a(
+      Ie,
+      {
+        ...ze,
+        hamburgerMenu: w,
+        onHamburgerMenuClick: () => z(!0),
+        onUserMenuClick: () => M(!0),
+        logoProps: De,
+        iconColor: D,
+        isMobile: d,
+        themeProps: { shadowSecondary: g, shadowTertiary: W, iconPrimary: D, borderPrimary: X },
+        iconColors: Re,
+        userName: r == null ? void 0 : r.name,
+        userSettingsEnabled: n
+      }
+    ),
+    /* @__PURE__ */ T(wo, { tabletPadding: w, mobile: d, children: [
+      k && /* @__PURE__ */ a(F, { ...Ne }),
+      d && /* @__PURE__ */ T(fe, { children: [
+        /* @__PURE__ */ a(F, { ...Le }),
+        /* @__PURE__ */ a(
+          Po,
+          {
+            open: O,
+            onClose: () => H(!1),
+            backgroundColor: m,
+            anchor: "right",
+            children: /* @__PURE__ */ a(F, { ...Be })
+          }
+        )
+      ] }),
+      w && /* @__PURE__ */ T(
+        To,
+        {
+          open: A,
+          onClose: () => z(!1),
+          backgroundColor: m,
+          shadowColor: s,
+          children: [
+            /* @__PURE__ */ T(ye, { children: [
+              /* @__PURE__ */ a(Ho, { src: le, alt: "logo", width: pe, height: de }),
+              /* @__PURE__ */ a(K, { variant: "icon", size: 36, onClick: () => z(!1), color: D, children: /* @__PURE__ */ a(je, {}) })
+            ] }),
+            /* @__PURE__ */ a(F, { ...ie })
+          ]
+        }
+      ),
+      w && /* @__PURE__ */ T(
+        ko,
+        {
+          open: j && te,
+          onClose: () => E(!1),
+          shadowColor: s,
+          backgroundColor: S,
+          children: [
+            /* @__PURE__ */ a(
+              we,
+              {
+                variant: "icon",
+                size: 24,
+                onClick: () => E(!1),
+                iconColor: D,
+                highlight1: m,
+                highlight2: m,
+                children: /* @__PURE__ */ a(ve, {})
+              }
+            ),
+            /* @__PURE__ */ a(Y, { scrollColor: I, direction: "vertical", children: l && l })
+          ]
+        }
+      ),
+      (w || k) && /* @__PURE__ */ T(
+        Ro,
+        {
+          anchor: "right",
+          open: N,
+          onClose: () => M(!1),
+          children: [
+            /* @__PURE__ */ a(
+              we,
+              {
+                variant: "icon",
+                size: 24,
+                onClick: () => M(!1),
+                iconColor: i.colors.midnight,
+                highlight1: i.colors.white,
+                highlight2: m,
+                rightDrawer: !0,
+                children: /* @__PURE__ */ a(ve, {})
+              }
+            ),
+            /* @__PURE__ */ a(
+              F,
+              {
+                ...ie,
+                navItems: he,
+                themeColors: {
+                  iconPrimary: i.colors.midnight,
+                  highlightPrimary: y,
+                  highlightTertiary: m,
+                  shadowSecondary: g,
+                  scrollColor: I
+                }
+              }
+            )
+          ]
+        }
+      ),
+      d && /* @__PURE__ */ T(fe, { children: [
+        /* @__PURE__ */ T(
+          Mo,
+          {
+            anchor: "right",
+            open: N,
+            onClose: () => M(!1),
+            backgroundQuaternary: ee,
+            children: [
+              /* @__PURE__ */ T(ye, { children: [
+                /* @__PURE__ */ a(Eo, { color: i.colors.midnight, children: "Settings" }),
+                /* @__PURE__ */ a(
+                  K,
+                  {
+                    variant: "icon",
+                    size: 36,
+                    onClick: () => M(!1),
+                    color: i.colors.midnight,
+                    children: /* @__PURE__ */ a(xe, {})
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ a(
+                F,
+                {
+                  ...ie,
+                  navItems: he,
+                  themeColors: {
+                    iconPrimary: i.colors.midnight,
+                    highlightPrimary: y,
+                    highlightTertiary: m,
+                    shadowSecondary: g,
+                    scrollColor: I
+                  }
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ a($o, { backgroundColor: S, open: $, children: /* @__PURE__ */ a(Y, { scrollColor: I, direction: "vertical", children: l }) })
+      ] }),
+      !d && /* @__PURE__ */ T(
+        yo,
+        {
+          withActionsPanel: te,
+          tablet: w,
+          borderColor: X,
+          backgroundColor: S,
+          children: [
+            k && /* @__PURE__ */ a(Y, { scrollColor: I, direction: "vertical", children: l && l }),
+            w && /* @__PURE__ */ a(
+              K,
+              {
+                variant: "icon",
+                size: 36,
+                onClick: () => E(!0),
+                color: D,
+                children: /* @__PURE__ */ a(xe, {})
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ a(
+        Co,
+        {
+          withActionsPanel: te,
+          borderColor: X,
+          backgroundColor: y,
+          mobileScreen: d,
+          children: /* @__PURE__ */ a(Y, { scrollColor: I, children: p })
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  Zo as A,
+  ge as u
+};