jcicl 0.0.265 → 0.0.269

package/AppContainer/AppContainer.js

@@ -1,15 +1,1075 @@
-import "react/jsx-runtime";
-import "react";
-import { A as x } from "../.chunks/AppContainer.js";
-import "../.chunks/emotion-styled.browser.esm.js";
-import "../.chunks/emotion-react.browser.esm.js";
-import "../AppHeader/AppHeader.js";
-import "../Nav/Nav.js";
-import "../ScrollContainer/ScrollContainer.js";
-import "../Button/Button.js";
-import "../theme.js";
-import "../.chunks/jocologo.js";
-import "../.chunks/Close.js";
+import { jsx as i, jsxs as C, Fragment as fe } from "react/jsx-runtime";
+import * as D from "react";
+import { useState as Y } from "react";
+import { c as se } from "../.chunks/createSvgIcon.js";
+import { n as g, i as Z } from "../.chunks/emotion-styled.browser.esm.js";
+import { c as H } from "../.chunks/emotion-react.browser.esm.js";
+import Ie from "../AppHeader/AppHeader.js";
+import { Nav as U } from "../Nav/Nav.js";
+import _ from "../ScrollContainer/ScrollContainer.js";
+import { Button as J } from "../Button/Button.js";
+import t from "../theme.js";
+import { l as Ae } from "../.chunks/jocologo.js";
+import { X as Le } from "../.chunks/Close.js";
+import { P as r, g as je, a as Fe, s as le, r as Ue, c as K, u as We, b as q, d as Ve } from "../.chunks/DefaultPropsProvider.js";
+import { u as Xe } from "../.chunks/index.js";
+import { a as ye } from "../.chunks/useTheme.js";
+import { m as Ce } from "../.chunks/memoTheme.js";
+import { o as $e, d as Ge, M as Ye } from "../.chunks/TextField.js";
+import { P as _e } from "../.chunks/Paper.js";
+import { i as qe } from "../.chunks/integerPropType.js";
+import { e as Qe, H as Je, g as Ke, T as Ze, r as eo, a as me } from "../.chunks/Portal.js";
+import { c as oo } from "../.chunks/chainPropTypes.js";
+import { a as ro } from "../.chunks/TransitionGroupContext.js";
+import { u as ge } from "../.chunks/useMediaQuery.js";
+function to(e, o, a) {
+  const n = o.getBoundingClientRect(), c = a && a.getBoundingClientRect(), u = $e(o);
+  let f;
+  if (o.fakeTransform)
+    f = o.fakeTransform;
+  else {
+    const h = u.getComputedStyle(o);
+    f = h.getPropertyValue("-webkit-transform") || h.getPropertyValue("transform");
+  }
+  let x = 0, b = 0;
+  if (f && f !== "none" && typeof f == "string") {
+    const h = f.split("(")[1].split(")")[0].split(",");
+    x = parseInt(h[4], 10), b = parseInt(h[5], 10);
+  }
+  return e === "left" ? c ? `translateX(${c.right + x - n.left}px)` : `translateX(${u.innerWidth + x - n.left}px)` : e === "right" ? c ? `translateX(-${n.right - c.left - x}px)` : `translateX(-${n.left + n.width - x}px)` : e === "up" ? c ? `translateY(${c.bottom + b - n.top}px)` : `translateY(${u.innerHeight + b - n.top}px)` : c ? `translateY(-${n.top - c.top + n.height - b}px)` : `translateY(-${n.top + n.height - b}px)`;
+}
+function Pe(e) {
+  return typeof e == "function" ? e() : e;
+}
+function Q(e, o, a) {
+  const n = Pe(a), c = to(e, o, n);
+  c && (o.style.webkitTransform = c, o.style.transform = c);
+}
+const Te = /* @__PURE__ */ D.forwardRef(function(o, a) {
+  const n = ye(), c = {
+    enter: n.transitions.easing.easeOut,
+    exit: n.transitions.easing.sharp
+  }, u = {
+    enter: n.transitions.duration.enteringScreen,
+    exit: n.transitions.duration.leavingScreen
+  }, {
+    addEndListener: f,
+    appear: x = !0,
+    children: b,
+    container: h,
+    direction: m = "down",
+    easing: I = c,
+    in: $,
+    onEnter: L,
+    onEntered: z,
+    onEntering: j,
+    onExit: P,
+    onExited: S,
+    onExiting: T,
+    style: N,
+    timeout: M = u,
+    // eslint-disable-next-line react/prop-types
+    TransitionComponent: O = Ze,
+    ...B
+  } = o, l = D.useRef(null), v = ro(Ke(b), l, a), k = (s) => (d) => {
+    s && (d === void 0 ? s(l.current) : s(l.current, d));
+  }, w = k((s, d) => {
+    Q(m, s, h), eo(s), L && L(s, d);
+  }), p = k((s, d) => {
+    const V = me({
+      timeout: M,
+      style: N,
+      easing: I
+    }, {
+      mode: "enter"
+    });
+    s.style.webkitTransition = n.transitions.create("-webkit-transform", {
+      ...V
+    }), s.style.transition = n.transitions.create("transform", {
+      ...V
+    }), s.style.webkitTransform = "none", s.style.transform = "none", j && j(s, d);
+  }), R = k(z), F = k(T), ee = k((s) => {
+    const d = me({
+      timeout: M,
+      style: N,
+      easing: I
+    }, {
+      mode: "exit"
+    });
+    s.style.webkitTransition = n.transitions.create("-webkit-transform", d), s.style.transition = n.transitions.create("transform", d), Q(m, s, h), P && P(s);
+  }), oe = k((s) => {
+    s.style.webkitTransition = "", s.style.transition = "", S && S(s);
+  }), re = (s) => {
+    f && f(l.current, s);
+  }, E = D.useCallback(() => {
+    l.current && Q(m, l.current, h);
+  }, [m, h]);
+  return D.useEffect(() => {
+    if ($ || m === "down" || m === "right")
+      return;
+    const s = Ge(() => {
+      l.current && Q(m, l.current, h);
+    }), d = $e(l.current);
+    return d.addEventListener("resize", s), () => {
+      s.clear(), d.removeEventListener("resize", s);
+    };
+  }, [m, $, h]), D.useEffect(() => {
+    $ || E();
+  }, [$, E]), /* @__PURE__ */ i(O, {
+    nodeRef: l,
+    onEnter: w,
+    onEntered: R,
+    onEntering: p,
+    onExit: ee,
+    onExited: oe,
+    onExiting: F,
+    addEndListener: re,
+    appear: x,
+    in: $,
+    timeout: M,
+    ...B,
+    children: (s, d) => /* @__PURE__ */ D.cloneElement(b, {
+      ref: v,
+      style: {
+        visibility: s === "exited" && !$ ? "hidden" : void 0,
+        ...N,
+        ...b.props.style
+      },
+      ...d
+    })
+  });
+});
+process.env.NODE_ENV !== "production" && (Te.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: 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: r.bool,
+  /**
+   * A single child content element.
+   */
+  children: Qe.isRequired,
+  /**
+   * An HTML element, or a function that returns one.
+   * It's used to set the container the Slide is transitioning from.
+   */
+  container: oo(r.oneOfType([Je, r.func]), (e) => {
+    if (e.open) {
+      const o = Pe(e.container);
+      if (o && o.nodeType === 1) {
+        const a = o.getBoundingClientRect();
+        if (process.env.NODE_ENV !== "test" && a.top === 0 && a.left === 0 && a.right === 0 && a.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: r.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: r.oneOfType([r.shape({
+    enter: r.string,
+    exit: r.string
+  }), r.string]),
+  /**
+   * If `true`, the component will transition in.
+   */
+  in: r.bool,
+  /**
+   * @ignore
+   */
+  onEnter: r.func,
+  /**
+   * @ignore
+   */
+  onEntered: r.func,
+  /**
+   * @ignore
+   */
+  onEntering: r.func,
+  /**
+   * @ignore
+   */
+  onExit: r.func,
+  /**
+   * @ignore
+   */
+  onExited: r.func,
+  /**
+   * @ignore
+   */
+  onExiting: r.func,
+  /**
+   * @ignore
+   */
+  style: r.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: r.oneOfType([r.number, r.shape({
+    appear: r.number,
+    enter: r.number,
+    exit: r.number
+  })])
+});
+function no(e) {
+  return je("MuiDrawer", e);
+}
+Fe("MuiDrawer", ["root", "docked", "paper", "paperAnchorLeft", "paperAnchorRight", "paperAnchorTop", "paperAnchorBottom", "paperAnchorDockedLeft", "paperAnchorDockedRight", "paperAnchorDockedTop", "paperAnchorDockedBottom", "modal"]);
+const Me = (e, o) => {
+  const {
+    ownerState: a
+  } = e;
+  return [o.root, (a.variant === "permanent" || a.variant === "persistent") && o.docked, o.modal];
+}, io = (e) => {
+  const {
+    classes: o,
+    anchor: a,
+    variant: n
+  } = e, c = {
+    root: ["root"],
+    docked: [(n === "permanent" || n === "persistent") && "docked"],
+    modal: ["modal"],
+    paper: ["paper", `paperAnchor${K(a)}`, n !== "temporary" && `paperAnchorDocked${K(a)}`]
+  };
+  return Ve(c, no, o);
+}, ao = le(Ye, {
+  name: "MuiDrawer",
+  slot: "Root",
+  overridesResolver: Me
+})(Ce(({
+  theme: e
+}) => ({
+  zIndex: (e.vars || e).zIndex.drawer
+}))), be = le("div", {
+  shouldForwardProp: Ue,
+  name: "MuiDrawer",
+  slot: "Docked",
+  skipVariantsResolver: !1,
+  overridesResolver: Me
+})({
+  flex: "0 0 auto"
+}), so = le(_e, {
+  name: "MuiDrawer",
+  slot: "Paper",
+  overridesResolver: (e, o) => {
+    const {
+      ownerState: a
+    } = e;
+    return [o.paper, o[`paperAnchor${K(a.anchor)}`], a.variant !== "temporary" && o[`paperAnchorDocked${K(a.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 lo(e) {
+  return ["left", "right"].includes(e);
+}
+function co({
+  direction: e
+}, o) {
+  return e === "rtl" && lo(o) ? He[o] : o;
+}
+const W = /* @__PURE__ */ D.forwardRef(function(o, a) {
+  const n = We({
+    props: o,
+    name: "MuiDrawer"
+  }), c = ye(), u = Xe(), f = {
+    enter: c.transitions.duration.enteringScreen,
+    exit: c.transitions.duration.leavingScreen
+  }, {
+    anchor: x = "left",
+    BackdropProps: b,
+    children: h,
+    className: m,
+    elevation: I = 16,
+    hideBackdrop: $ = !1,
+    ModalProps: {
+      BackdropProps: L,
+      ...z
+    } = {},
+    onClose: j,
+    open: P = !1,
+    PaperProps: S = {},
+    SlideProps: T,
+    // eslint-disable-next-line react/prop-types
+    TransitionComponent: N = Te,
+    transitionDuration: M = f,
+    variant: O = "temporary",
+    ...B
+  } = n, l = D.useRef(!1);
+  D.useEffect(() => {
+    l.current = !0;
+  }, []);
+  const v = co({
+    direction: u ? "rtl" : "ltr"
+  }, x), w = {
+    ...n,
+    anchor: x,
+    elevation: I,
+    open: P,
+    variant: O,
+    ...B
+  }, p = io(w), R = /* @__PURE__ */ i(so, {
+    elevation: O === "temporary" ? I : 0,
+    square: !0,
+    ...S,
+    className: q(p.paper, S.className),
+    ownerState: w,
+    children: h
+  });
+  if (O === "permanent")
+    return /* @__PURE__ */ i(be, {
+      className: q(p.root, p.docked, m),
+      ownerState: w,
+      ref: a,
+      ...B,
+      children: R
+    });
+  const F = /* @__PURE__ */ i(N, {
+    in: P,
+    direction: He[v],
+    timeout: M,
+    appear: l.current,
+    ...T,
+    children: R
+  });
+  return O === "persistent" ? /* @__PURE__ */ i(be, {
+    className: q(p.root, p.docked, m),
+    ownerState: w,
+    ref: a,
+    ...B,
+    children: F
+  }) : /* @__PURE__ */ i(ao, {
+    BackdropProps: {
+      ...b,
+      ...L,
+      transitionDuration: M
+    },
+    className: q(p.root, p.modal, m),
+    open: P,
+    ownerState: w,
+    onClose: j,
+    hideBackdrop: $,
+    ref: a,
+    ...B,
+    ...z,
+    children: F
+  });
+});
+process.env.NODE_ENV !== "production" && (W.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: r.oneOf(["bottom", "left", "right", "top"]),
+  /**
+   * @ignore
+   */
+  BackdropProps: r.object,
+  /**
+   * The content of the component.
+   */
+  children: r.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: r.object,
+  /**
+   * @ignore
+   */
+  className: r.string,
+  /**
+   * The elevation of the drawer.
+   * @default 16
+   */
+  elevation: qe,
+  /**
+   * If `true`, the backdrop is not rendered.
+   * @default false
+   */
+  hideBackdrop: r.bool,
+  /**
+   * Props applied to the [`Modal`](https://mui.com/material-ui/api/modal/) element.
+   * @default {}
+   */
+  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`.
+   *
+   * @param {object} event The event source of the callback.
+   * @param {string} reason Can be: `"escapeKeyDown"`, `"backdropClick"`.
+   */
+  onClose: r.func,
+  /**
+   * If `true`, the component is shown.
+   * @default false
+   */
+  open: r.bool,
+  /**
+   * Props applied to the [`Paper`](https://mui.com/material-ui/api/paper/) element.
+   * @default {}
+   */
+  PaperProps: r.object,
+  /**
+   * Props applied to the [`Slide`](https://mui.com/material-ui/api/slide/) element.
+   */
+  SlideProps: r.object,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  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.
+   * @default {
+   *   enter: theme.transitions.duration.enteringScreen,
+   *   exit: theme.transitions.duration.leavingScreen,
+   * }
+   */
+  transitionDuration: r.oneOfType([r.number, r.shape({
+    appear: r.number,
+    enter: r.number,
+    exit: r.number
+  })]),
+  /**
+   * The variant to use.
+   * @default 'temporary'
+   */
+  variant: r.oneOf(["permanent", "persistent", "temporary"])
+});
+const xe = se(/* @__PURE__ */ i("path", {
+  d: "m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"
+}), "ArrowForward"), ve = se(/* @__PURE__ */ i("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"), po = se(/* @__PURE__ */ i("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"), ho = g("div", {
+  shouldForwardProp: (e) => Z(e)
+})(({ backgroundColor: e }) => ({
+  display: "flex",
+  flexDirection: "column",
+  width: "100vw",
+  position: "relative",
+  backgroundColor: e,
+  height: "100vh",
+  fontFamily: "Roboto, sans-serif",
+  overflow: "hidden"
+})), uo = g("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% - ${t.constants.appHeaderHeight}px)`
+  })
+), fo = g("div", {
+  shouldForwardProp: (e) => Z(e)
+})(({ withActionsPanel: e, tablet: o, borderColor: a, backgroundColor: n }) => ({
+  display: "flex",
+  flexDirection: "column",
+  opacity: e ? 1 : 0,
+  border: `1px solid ${a}`,
+  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"
+  }
+})), mo = g(W)(
+  ({ shadowColor: e, backgroundColor: o }) => ({
+    ...H`
+      top: ${t.constants.appHeaderHeight}px;
+      font-family: 'Roboto';
+
+      .MuiDrawer-paper {
+        width: 360px;
+        max-width: 100vw;
+        box-sizing: border-box;
+        top: ${t.constants.appHeaderHeight}px;
+        height: calc(100vh - ${t.constants.appHeaderHeight}px);
+        background-color: ${o};
+        box-shadow: 0 3px 6px 3px ${e};
+        padding: 13px;
+        overflow: visible;
+      }
+
+      .MuiBackdrop-root {
+        top: ${t.constants.appHeaderHeight}px;
+        background-color: transparent;
+      }
+    `
+  })
+), we = g(J)(({ iconColor: e, highlight1: o, highlight2: a, rightDrawer: n = !1 }) => ({
+  ...H`
+    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: ${a};
+        fill: ${e};
+      }
+    }
+  `
+})), go = g("div", {
+  shouldForwardProp: (e) => Z(e)
+})(({ withActionsPanel: e, borderColor: o, backgroundColor: a, mobileScreen: n }) => ({
+  display: "flex",
+  overflow: "hidden",
+  backgroundColor: a,
+  borderRadius: "4px",
+  borderBottomLeftRadius: e ? 0 : "4px",
+  borderTopLeftRadius: e ? 0 : "4px",
+  border: `1px solid ${o}`,
+  width: "100%",
+  height: "calc(100% + 2px)",
+  boxSizing: "border-box",
+  padding: "0 9px",
+  h1: {
+    margin: 0
+  },
+  ...n && {
+    border: "none",
+    borderRadius: 0,
+    borderBottomLeftRadius: 0,
+    borderTopLeftRadius: 0
+  }
+})), bo = g(W, {
+  shouldForwardProp: (e) => !["backgroundColor", "shadowColor"].includes(e)
+})(({ backgroundColor: e, shadowColor: o }) => ({
+  ...H`
+    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;
+    }
+  `
+})), xo = g(W, {
+  shouldForwardProp: (e) => e != "backgroundColor"
+})(({ backgroundColor: e }) => ({
+  ...H`
+    z-index: 1300;
+
+    .MuiDrawer-paper {
+      z-index: 1300;
+      width: 100vw;
+      top: ${t.constants.appHeaderHeight}px;
+      height: calc(100vh - ${t.constants.appHeaderHeight}px - 72px);
+      background-color: ${e};
+      box-shadow: none;
+    }
+
+    .MuiBackdrop-root {
+      z-index: 1300;
+      top: ${t.constants.appHeaderHeight}px;
+      height: calc(100vh - ${t.constants.appHeaderHeight}px);
+      background-color: transparent;
+    }
+  `
+})), vo = g("div", {
+  shouldForwardProp: (e) => Z(e)
+})(({ backgroundColor: e, open: o }) => ({
+  ...H`
+    position: fixed;
+    transition: height 201ms cubic-bezier(0, 0, 0.2, 1);
+    z-index: 1300;
+    bottom: 72px;
+    width: 100vw;
+    height: ${o ? `calc(100vh - ${t.constants.appHeaderHeight}px - 72px)` : 0};
+    overflow: hidden;
+    background-color: ${e};
+    box-sizing: border-box;
+    padding: ${o ? "16px" : 0};
+  `
+})), wo = g("h1")(({ color: e }) => ({
+  ...H`
+    margin: 0;
+    font-size: 2.1rem;
+    font-family: 'Roboto';
+    color: ${e};
+  `
+})), ko = g(W)(({ backgroundQuaternary: e }) => ({
+  ...H`
+    top: ${t.constants.appHeaderHeight}px;
+    font-family: 'Roboto';
+    z-index: 1336;
+
+    .MuiDrawer-paper {
+      width: 100vw;
+      box-sizing: border-box;
+      top: ${t.constants.appHeaderHeight}px;
+      height: calc(100vh - ${t.constants.appHeaderHeight}px);
+      background-image: linear-gradient(to bottom right, ${t.colors.oldPaper}, ${e});
+      padding: 0;
+    }
+
+    .MuiBackdrop-root {
+      top: ${t.constants.appHeaderHeight}px;
+      background-color: transparent;
+    }
+  `
+})), yo = g("img")(({ width: e, height: o }) => ({
+  ...H`
+    width: ${e}px;
+    height: ${o}px;
+  `
+})), ke = g("div")(({ justifyStart: e }) => ({
+  ...H`
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: ${e ? "start" : "space-between"};
+    padding: 8px 16px 8px 24px;
+  `
+})), Co = g(W)(() => ({
+  ...H`
+    top: ${t.constants.appHeaderHeight}px;
+    font-family: 'Roboto';
+
+    .MuiDrawer-paper {
+      width: 360px;
+      max-width: 100vw;
+      box-sizing: border-box;
+      top: ${t.constants.appHeaderHeight}px;
+      height: calc(100vh - ${t.constants.appHeaderHeight}px);
+      background-color: ${t.colors.white};
+      box-shadow: 0 3px 6px 3px ${t.colors.gray};
+      padding: 0;
+      overflow: visible;
+    }
+
+    .MuiBackdrop-root {
+      top: ${t.constants.appHeaderHeight}px;
+      background-color: transparent;
+    }
+  `
+})), _o = ({
+  navProps: e,
+  appHeaderProps: o = {},
+  userInfo: a,
+  userSettingsEnabled: n = !0,
+  userProfileMenuItems: c = [],
+  actionsPanelContent: u,
+  navWidth: f = t.constants.navDefaultWidth,
+  breakpoints: x = { mobile: t.screenSizes.mobile, tablet: t.screenSizes.tablet },
+  children: b,
+  themeColors: h = {},
+  logoProps: m = {},
+  loggedIn: I,
+  mobileActionsPanelOpen: $
+}) => {
+  const [L, z] = Y(!1), [j, P] = Y(!1), [S, T] = Y(!1), [N, M] = Y(!1), { mobile: O = t.screenSizes.mobile, tablet: B = t.screenSizes.tablet } = x, l = ge(`(max-width: ${O})`), v = ge(`(max-width: ${B})`) && !l, k = !l && !v, {
+    backgroundPrimary: w = t.colors.whiteGreen,
+    backgroundSecondary: p = t.colors.whiteGreenA,
+    backgroundTertiary: R = t.colors.sage,
+    highlightPrimary: F = t.colors.sunlight,
+    backgroundQuaternary: ee = t.colors.moss,
+    highlightSecondary: oe = t.colors.dandelion,
+    highlightTertiary: re = `${t.colors.dandelion}99`,
+    iconPrimary: E = t.colors.darkGreen,
+    shadowPrimary: s = t.colors.darkGreenO99,
+    shadowSecondary: d = t.boxShadows.darkGreen,
+    shadowTertiary: V = t.boxShadows.darkGreenThick,
+    borderPrimary: G = t.colors.green,
+    scrollColor: A = t.colors.darkGreenO99,
+    iconColors: Re
+  } = h, { logoSrc: ce = Ae, logoWidth: pe = 36, logoHeight: de = 50 } = m, Ee = {
+    backgroundPrimary: w,
+    backgroundSecondary: p,
+    backgroundTertiary: R,
+    highlightPrimary: F,
+    highlightSecondary: oe,
+    highlightTertiary: re,
+    borderPrimary: G,
+    iconPrimary: E,
+    shadowPrimary: s,
+    shadowSecondary: d,
+    shadowTertiary: V,
+    scrollColor: A
+  }, De = { logoSrc: ce, logoWidth: pe, logoHeight: de }, te = u != null, ze = { ...o, navWidth: f, loggedIn: I }, X = { ...e, themeColors: Ee }, Se = {
+    ...X,
+    navWidth: `${f}px`,
+    isMobile: l
+  }, he = [
+    // { label: 'Log Out', icon: <LogoutIcon />, onClick: onLogout },
+    ...c
+  ].map((y) => ({
+    ...y,
+    onClick: () => {
+      y.onClick && y.onClick(), T(!1);
+    }
+  })), { navItems: ne } = e, Ne = ne.map((y) => ({
+    ...y,
+    onClick: () => {
+      y.onClick && y.onClick(), z(!1);
+    }
+  })), ie = {
+    ...X,
+    navWidth: "100%",
+    isTablet: !0,
+    navItems: Ne
+  };
+  let ae = ne.map((y) => ({
+    ...y,
+    onClick: () => {
+      y.onClick && y.onClick(), M(!1);
+    }
+  })), ue = [];
+  ne.length > 4 && l && (ue = ae.splice(3), ae.push({
+    label: "More",
+    icon: /* @__PURE__ */ i(po, {}),
+    onClick: () => M(!0)
+  }));
+  const Oe = {
+    ...X,
+    navWidth: "100%",
+    navItems: ae,
+    isMobile: !0,
+    activeRoute: N ? "More" : X.activeRoute
+  }, Be = {
+    ...X,
+    navWidth: "100%",
+    navItems: ue,
+    isTablet: !0
+  };
+  return /* @__PURE__ */ C(ho, { backgroundColor: p, children: [
+    /* @__PURE__ */ i(
+      Ie,
+      {
+        ...ze,
+        hamburgerMenu: v,
+        onHamburgerMenuClick: () => z(!0),
+        onUserMenuClick: () => T(!0),
+        logoProps: De,
+        iconColor: E,
+        isMobile: l,
+        themeProps: { shadowSecondary: d, shadowTertiary: V, iconPrimary: E, borderPrimary: G },
+        iconColors: Re,
+        userName: a == null ? void 0 : a.name,
+        userSettingsEnabled: n
+      }
+    ),
+    /* @__PURE__ */ C(uo, { tabletPadding: v, mobile: l, children: [
+      k && /* @__PURE__ */ i(U, { ...Se }),
+      l && /* @__PURE__ */ C(fe, { children: [
+        /* @__PURE__ */ i(U, { ...Oe }),
+        /* @__PURE__ */ i(
+          xo,
+          {
+            open: N,
+            onClose: () => M(!1),
+            backgroundColor: p,
+            anchor: "right",
+            children: /* @__PURE__ */ i(U, { ...Be })
+          }
+        )
+      ] }),
+      v && /* @__PURE__ */ C(
+        bo,
+        {
+          open: L,
+          onClose: () => z(!1),
+          backgroundColor: p,
+          shadowColor: s,
+          children: [
+            /* @__PURE__ */ C(ke, { children: [
+              /* @__PURE__ */ i(yo, { src: ce, alt: "logo", width: pe, height: de }),
+              /* @__PURE__ */ i(J, { variant: "icon", size: 36, onClick: () => z(!1), color: E, children: /* @__PURE__ */ i(Le, {}) })
+            ] }),
+            /* @__PURE__ */ i(U, { ...ie })
+          ]
+        }
+      ),
+      v && /* @__PURE__ */ C(
+        mo,
+        {
+          open: j && te,
+          onClose: () => P(!1),
+          shadowColor: s,
+          backgroundColor: R,
+          children: [
+            /* @__PURE__ */ i(
+              we,
+              {
+                variant: "icon",
+                size: 24,
+                onClick: () => P(!1),
+                iconColor: E,
+                highlight1: p,
+                highlight2: p,
+                children: /* @__PURE__ */ i(ve, {})
+              }
+            ),
+            /* @__PURE__ */ i(_, { scrollColor: A, direction: "vertical", children: u && u })
+          ]
+        }
+      ),
+      (v || k) && /* @__PURE__ */ C(
+        Co,
+        {
+          anchor: "right",
+          open: S,
+          onClose: () => T(!1),
+          children: [
+            /* @__PURE__ */ i(
+              we,
+              {
+                variant: "icon",
+                size: 24,
+                onClick: () => T(!1),
+                iconColor: t.colors.midnight,
+                highlight1: t.colors.white,
+                highlight2: p,
+                rightDrawer: !0,
+                children: /* @__PURE__ */ i(ve, {})
+              }
+            ),
+            /* @__PURE__ */ i(
+              U,
+              {
+                ...ie,
+                navItems: he,
+                themeColors: {
+                  iconPrimary: t.colors.midnight,
+                  highlightPrimary: w,
+                  highlightTertiary: p,
+                  shadowSecondary: d,
+                  scrollColor: A
+                }
+              }
+            )
+          ]
+        }
+      ),
+      l && /* @__PURE__ */ C(fe, { children: [
+        /* @__PURE__ */ C(
+          ko,
+          {
+            anchor: "right",
+            open: S,
+            onClose: () => T(!1),
+            backgroundQuaternary: ee,
+            children: [
+              /* @__PURE__ */ C(ke, { children: [
+                /* @__PURE__ */ i(wo, { color: t.colors.midnight, children: "Settings" }),
+                /* @__PURE__ */ i(
+                  J,
+                  {
+                    variant: "icon",
+                    size: 36,
+                    onClick: () => T(!1),
+                    color: t.colors.midnight,
+                    children: /* @__PURE__ */ i(xe, {})
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ i(
+                U,
+                {
+                  ...ie,
+                  navItems: he,
+                  themeColors: {
+                    iconPrimary: t.colors.midnight,
+                    highlightPrimary: w,
+                    highlightTertiary: p,
+                    shadowSecondary: d,
+                    scrollColor: A
+                  }
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ i(vo, { backgroundColor: R, open: $, children: /* @__PURE__ */ i(_, { scrollColor: A, direction: "vertical", children: u }) })
+      ] }),
+      !l && /* @__PURE__ */ C(
+        fo,
+        {
+          withActionsPanel: te,
+          tablet: v,
+          borderColor: G,
+          backgroundColor: R,
+          children: [
+            k && /* @__PURE__ */ i(_, { scrollColor: A, direction: "vertical", children: u && u }),
+            v && /* @__PURE__ */ i(
+              J,
+              {
+                variant: "icon",
+                size: 36,
+                onClick: () => P(!0),
+                color: E,
+                children: /* @__PURE__ */ i(xe, {})
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ i(
+        go,
+        {
+          withActionsPanel: te,
+          borderColor: G,
+          backgroundColor: w,
+          mobileScreen: l,
+          children: /* @__PURE__ */ i(_, { scrollColor: A, children: b })
+        }
+      )
+    ] })
+  ] });
+};
 export {
-  x as default
+  _o as default
 };