jcicl 0.0.279 → 0.0.283

package/AppContainer/AppContainer.d.ts

@@ -11,6 +11,7 @@ interface UserInfo {
 }
 export interface AppContainerProps {
     navProps: Omit<NavProps, 'themeColors'>;
+    activeSubnavRoute?: string;
     appHeaderProps?: ReducedAppHeaderProps;
     actionsPanelContent?: React.ReactNode;
     navWidth?: number;

package/AppContainer/AppContainer.js

@@ -1,145 +1,145 @@
-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 { jsx as i, jsxs as $, Fragment as xe } from "react/jsx-runtime";
+import * as z from "react";
+import { useState as q } from "react";
+import { c as le } from "../.chunks/createSvgIcon.js";
+import { n as f, i as G } from "../.chunks/emotion-styled.browser.esm.js";
+import { c as M } from "../.chunks/emotion-react.browser.esm.js";
+import je from "../AppHeader/AppHeader.js";
+import { Nav as L } from "../Nav/Nav.js";
+import Q from "../ScrollContainer/ScrollContainer.js";
+import { Button as Z } 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;
+import { l as Ue } from "../.chunks/jocologo.js";
+import { X as We } from "../.chunks/Close.js";
+import { P as r, g as Ve, a as Xe, s as ce, r as Ge, c as ee, u as Ye, b as J, d as _e } from "../.chunks/DefaultPropsProvider.js";
+import { u as qe } from "../.chunks/index.js";
+import { a as Pe } from "../.chunks/useTheme.js";
+import { m as Re } from "../.chunks/memoTheme.js";
+import { o as Me, d as Qe, M as Je } from "../.chunks/TextField.js";
+import { P as Ke } from "../.chunks/Paper.js";
+import { i as Ze } from "../.chunks/integerPropType.js";
+import { e as eo, H as oo, g as ro, T as to, r as no, a as ve } from "../.chunks/Portal.js";
+import { c as io } from "../.chunks/chainPropTypes.js";
+import { a as ao } from "../.chunks/TransitionGroupContext.js";
+import { u as we } from "../.chunks/useMediaQuery.js";
+function so(e, o, s) {
+  const n = o.getBoundingClientRect(), l = s && s.getBoundingClientRect(), H = Me(o);
+  let c;
   if (o.fakeTransform)
-    f = o.fakeTransform;
+    c = o.fakeTransform;
   else {
-    const h = u.getComputedStyle(o);
-    f = h.getPropertyValue("-webkit-transform") || h.getPropertyValue("transform");
+    const d = H.getComputedStyle(o);
+    c = d.getPropertyValue("-webkit-transform") || d.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);
+  let m = 0, w = 0;
+  if (c && c !== "none" && typeof c == "string") {
+    const d = c.split("(")[1].split(")")[0].split(",");
+    m = parseInt(d[4], 10), w = parseInt(d[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)`;
+  return e === "left" ? l ? `translateX(${l.right + m - n.left}px)` : `translateX(${H.innerWidth + m - n.left}px)` : e === "right" ? l ? `translateX(-${n.right - l.left - m}px)` : `translateX(-${n.left + n.width - m}px)` : e === "up" ? l ? `translateY(${l.bottom + w - n.top}px)` : `translateY(${H.innerHeight + w - n.top}px)` : l ? `translateY(-${n.top - l.top + n.height - w}px)` : `translateY(-${n.top + n.height - w}px)`;
 }
-function Pe(e) {
+function He(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);
+function K(e, o, s) {
+  const n = He(s), l = so(e, o, n);
+  l && (o.style.webkitTransform = l, o.style.transform = l);
 }
-const Te = /* @__PURE__ */ D.forwardRef(function(o, a) {
-  const n = ye(), c = {
+const Ee = /* @__PURE__ */ z.forwardRef(function(o, s) {
+  const n = Pe(), l = {
     enter: n.transitions.easing.easeOut,
     exit: n.transitions.easing.sharp
-  }, u = {
+  }, H = {
     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,
+    addEndListener: c,
+    appear: m = !0,
+    children: w,
+    container: d,
+    direction: g = "down",
+    easing: O = l,
+    in: T,
+    onEnter: F,
+    onEntered: W,
+    onEntering: E,
+    onExit: N,
+    onExited: D,
+    onExiting: j,
+    style: y,
+    timeout: S = H,
     // 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
+    TransitionComponent: P = to,
+    ...I
+  } = o, u = z.useRef(null), b = ao(ro(w), u, s), h = (a) => (p) => {
+    a && (p === void 0 ? a(u.current) : a(u.current, p));
+  }, C = h((a, p) => {
+    K(g, a, d), no(a), F && F(a, p);
+  }), x = h((a, p) => {
+    const B = ve({
+      timeout: S,
+      style: y,
+      easing: O
     }, {
       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
+    a.style.webkitTransition = n.transitions.create("-webkit-transform", {
+      ...B
+    }), a.style.transition = n.transitions.create("transform", {
+      ...B
+    }), a.style.webkitTransform = "none", a.style.transform = "none", E && E(a, p);
+  }), v = h(W), R = h(j), oe = h((a) => {
+    const p = ve({
+      timeout: S,
+      style: y,
+      easing: O
     }, {
       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")
+    a.style.webkitTransition = n.transitions.create("-webkit-transform", p), a.style.transition = n.transitions.create("transform", p), K(g, a, d), N && N(a);
+  }), re = h((a) => {
+    a.style.webkitTransition = "", a.style.transition = "", D && D(a);
+  }), te = (a) => {
+    c && c(u.current, a);
+  }, Y = z.useCallback(() => {
+    u.current && K(g, u.current, d);
+  }, [g, d]);
+  return z.useEffect(() => {
+    if (T || g === "down" || g === "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);
+    const a = Qe(() => {
+      u.current && K(g, u.current, d);
+    }), p = Me(u.current);
+    return p.addEventListener("resize", a), () => {
+      a.clear(), p.removeEventListener("resize", a);
     };
-  }, [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,
+  }, [g, T, d]), z.useEffect(() => {
+    T || Y();
+  }, [T, Y]), /* @__PURE__ */ i(P, {
+    nodeRef: u,
+    onEnter: C,
+    onEntered: v,
+    onEntering: x,
+    onExit: oe,
+    onExited: re,
+    onExiting: R,
+    addEndListener: te,
+    appear: m,
+    in: T,
+    timeout: S,
+    ...I,
+    children: (a, p) => /* @__PURE__ */ z.cloneElement(w, {
+      ref: b,
       style: {
-        visibility: s === "exited" && !$ ? "hidden" : void 0,
-        ...N,
-        ...b.props.style
+        visibility: a === "exited" && !T ? "hidden" : void 0,
+        ...y,
+        ...w.props.style
       },
-      ...d
+      ...p
     })
   });
 });
-process.env.NODE_ENV !== "production" && (Te.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`.     │
@@ -159,17 +159,17 @@ process.env.NODE_ENV !== "production" && (Te.propTypes = {
   /**
    * A single child content element.
    */
-  children: Qe.isRequired,
+  children: eo.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) => {
+  container: io(r.oneOfType([oo, r.func]), (e) => {
     if (e.open) {
-      const o = Pe(e.container);
+      const o = He(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)
+        const s = o.getBoundingClientRect();
+        if (process.env.NODE_ENV !== "test" && s.top === 0 && s.left === 0 && s.right === 0 && s.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)
@@ -241,53 +241,53 @@ process.env.NODE_ENV !== "production" && (Te.propTypes = {
     exit: r.number
   })])
 });
-function no(e) {
-  return je("MuiDrawer", e);
+function lo(e) {
+  return Ve("MuiDrawer", e);
 }
-Fe("MuiDrawer", ["root", "docked", "paper", "paperAnchorLeft", "paperAnchorRight", "paperAnchorTop", "paperAnchorBottom", "paperAnchorDockedLeft", "paperAnchorDockedRight", "paperAnchorDockedTop", "paperAnchorDockedBottom", "modal"]);
-const Me = (e, o) => {
+Xe("MuiDrawer", ["root", "docked", "paper", "paperAnchorLeft", "paperAnchorRight", "paperAnchorTop", "paperAnchorBottom", "paperAnchorDockedLeft", "paperAnchorDockedRight", "paperAnchorDockedTop", "paperAnchorDockedBottom", "modal"]);
+const De = (e, o) => {
   const {
-    ownerState: a
+    ownerState: s
   } = e;
-  return [o.root, (a.variant === "permanent" || a.variant === "persistent") && o.docked, o.modal];
-}, io = (e) => {
+  return [o.root, (s.variant === "permanent" || s.variant === "persistent") && o.docked, o.modal];
+}, co = (e) => {
   const {
     classes: o,
-    anchor: a,
+    anchor: s,
     variant: n
-  } = e, c = {
+  } = e, l = {
     root: ["root"],
     docked: [(n === "permanent" || n === "persistent") && "docked"],
     modal: ["modal"],
-    paper: ["paper", `paperAnchor${K(a)}`, n !== "temporary" && `paperAnchorDocked${K(a)}`]
+    paper: ["paper", `paperAnchor${ee(s)}`, n !== "temporary" && `paperAnchorDocked${ee(s)}`]
   };
-  return Ve(c, no, o);
-}, ao = le(Ye, {
+  return _e(l, lo, o);
+}, po = ce(Je, {
   name: "MuiDrawer",
   slot: "Root",
-  overridesResolver: Me
-})(Ce(({
+  overridesResolver: De
+})(Re(({
   theme: e
 }) => ({
   zIndex: (e.vars || e).zIndex.drawer
-}))), be = le("div", {
-  shouldForwardProp: Ue,
+}))), ke = ce("div", {
+  shouldForwardProp: Ge,
   name: "MuiDrawer",
   slot: "Docked",
   skipVariantsResolver: !1,
-  overridesResolver: Me
+  overridesResolver: De
 })({
   flex: "0 0 auto"
-}), so = le(_e, {
+}), ho = ce(Ke, {
   name: "MuiDrawer",
   slot: "Paper",
   overridesResolver: (e, o) => {
     const {
-      ownerState: a
+      ownerState: s
     } = e;
-    return [o.paper, o[`paperAnchor${K(a.anchor)}`], a.variant !== "temporary" && o[`paperAnchorDocked${K(a.anchor)}`]];
+    return [o.paper, o[`paperAnchor${ee(s.anchor)}`], s.variant !== "temporary" && o[`paperAnchorDocked${ee(s.anchor)}`]];
   }
-})(Ce(({
+})(Re(({
   theme: e
 }) => ({
   overflowY: "auto",
@@ -371,108 +371,108 @@ const Me = (e, o) => {
       borderTop: `1px solid ${(e.vars || e).palette.divider}`
     }
   }]
-}))), He = {
+}))), Se = {
   left: "right",
   right: "left",
   top: "down",
   bottom: "up"
 };
-function lo(e) {
+function uo(e) {
   return ["left", "right"].includes(e);
 }
-function co({
+function fo({
   direction: e
 }, o) {
-  return e === "rtl" && lo(o) ? He[o] : o;
+  return e === "rtl" && uo(o) ? Se[o] : o;
 }
-const W = /* @__PURE__ */ D.forwardRef(function(o, a) {
-  const n = We({
+const U = /* @__PURE__ */ z.forwardRef(function(o, s) {
+  const n = Ye({
     props: o,
     name: "MuiDrawer"
-  }), c = ye(), u = Xe(), f = {
-    enter: c.transitions.duration.enteringScreen,
-    exit: c.transitions.duration.leavingScreen
+  }), l = Pe(), H = qe(), c = {
+    enter: l.transitions.duration.enteringScreen,
+    exit: l.transitions.duration.leavingScreen
   }, {
-    anchor: x = "left",
-    BackdropProps: b,
-    children: h,
-    className: m,
-    elevation: I = 16,
-    hideBackdrop: $ = !1,
+    anchor: m = "left",
+    BackdropProps: w,
+    children: d,
+    className: g,
+    elevation: O = 16,
+    hideBackdrop: T = !1,
     ModalProps: {
-      BackdropProps: L,
-      ...z
+      BackdropProps: F,
+      ...W
     } = {},
-    onClose: j,
-    open: P = !1,
-    PaperProps: S = {},
-    SlideProps: T,
+    onClose: E,
+    open: N = !1,
+    PaperProps: D = {},
+    SlideProps: j,
     // 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;
+    TransitionComponent: y = Ee,
+    transitionDuration: S = c,
+    variant: P = "temporary",
+    ...I
+  } = n, u = z.useRef(!1);
+  z.useEffect(() => {
+    u.current = !0;
   }, []);
-  const v = co({
-    direction: u ? "rtl" : "ltr"
-  }, x), w = {
+  const b = fo({
+    direction: H ? "rtl" : "ltr"
+  }, m), C = {
     ...n,
-    anchor: x,
-    elevation: I,
-    open: P,
-    variant: O,
-    ...B
-  }, p = io(w), R = /* @__PURE__ */ i(so, {
-    elevation: O === "temporary" ? I : 0,
+    anchor: m,
+    elevation: O,
+    open: N,
+    variant: P,
+    ...I
+  }, x = co(C), v = /* @__PURE__ */ i(ho, {
+    elevation: P === "temporary" ? O : 0,
     square: !0,
-    ...S,
-    className: q(p.paper, S.className),
-    ownerState: w,
-    children: h
+    ...D,
+    className: J(x.paper, D.className),
+    ownerState: C,
+    children: d
   });
-  if (O === "permanent")
-    return /* @__PURE__ */ i(be, {
-      className: q(p.root, p.docked, m),
-      ownerState: w,
-      ref: a,
-      ...B,
-      children: R
+  if (P === "permanent")
+    return /* @__PURE__ */ i(ke, {
+      className: J(x.root, x.docked, g),
+      ownerState: C,
+      ref: s,
+      ...I,
+      children: v
     });
-  const F = /* @__PURE__ */ i(N, {
-    in: P,
-    direction: He[v],
-    timeout: M,
-    appear: l.current,
-    ...T,
-    children: R
+  const R = /* @__PURE__ */ i(y, {
+    in: N,
+    direction: Se[b],
+    timeout: S,
+    appear: u.current,
+    ...j,
+    children: v
   });
-  return O === "persistent" ? /* @__PURE__ */ i(be, {
-    className: q(p.root, p.docked, m),
-    ownerState: w,
-    ref: a,
-    ...B,
-    children: F
-  }) : /* @__PURE__ */ i(ao, {
+  return P === "persistent" ? /* @__PURE__ */ i(ke, {
+    className: J(x.root, x.docked, g),
+    ownerState: C,
+    ref: s,
+    ...I,
+    children: R
+  }) : /* @__PURE__ */ i(po, {
     BackdropProps: {
-      ...b,
-      ...L,
-      transitionDuration: M
+      ...w,
+      ...F,
+      transitionDuration: S
     },
-    className: q(p.root, p.modal, m),
-    open: P,
-    ownerState: w,
-    onClose: j,
-    hideBackdrop: $,
-    ref: a,
-    ...B,
-    ...z,
-    children: F
+    className: J(x.root, x.modal, g),
+    open: N,
+    ownerState: C,
+    onClose: E,
+    hideBackdrop: T,
+    ref: s,
+    ...I,
+    ...W,
+    children: R
   });
 });
-process.env.NODE_ENV !== "production" && (W.propTypes = {
+process.env.NODE_ENV !== "production" && (U.propTypes = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
@@ -502,7 +502,7 @@ process.env.NODE_ENV !== "production" && (W.propTypes = {
    * The elevation of the drawer.
    * @default 16
    */
-  elevation: qe,
+  elevation: Ze,
   /**
    * If `true`, the backdrop is not rendered.
    * @default false
@@ -558,14 +558,14 @@ process.env.NODE_ENV !== "production" && (W.propTypes = {
    */
   variant: r.oneOf(["permanent", "persistent", "temporary"])
 });
-const xe = se(/* @__PURE__ */ i("path", {
+const ye = le(/* @__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", {
+}), "ArrowForward"), Ce = le(/* @__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", {
+}), "Cancel"), mo = le(/* @__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)
+}), "MoreHoriz"), go = f("div", {
+  shouldForwardProp: (e) => G(e)
 })(({ backgroundColor: e }) => ({
   display: "flex",
   flexDirection: "column",
@@ -575,7 +575,7 @@ const xe = se(/* @__PURE__ */ i("path", {
   height: "100vh",
   fontFamily: "Roboto, sans-serif",
   overflow: "hidden"
-})), uo = g("div")(
+})), bo = f("div")(
   ({ tabletPadding: e, mobile: o }) => ({
     display: "flex",
     flexDirection: o ? "column-reverse" : "row",
@@ -587,13 +587,13 @@ const xe = se(/* @__PURE__ */ i("path", {
     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 }) => ({
+), xo = f("div", {
+  shouldForwardProp: (e) => G(e)
+})(({ withActionsPanel: e, tablet: o, borderColor: s, backgroundColor: n }) => ({
   display: "flex",
   flexDirection: "column",
   opacity: e ? 1 : 0,
-  border: `1px solid ${a}`,
+  border: `1px solid ${s}`,
   borderRight: 0,
   borderRadius: "4px",
   borderTopRightRadius: 0,
@@ -608,9 +608,29 @@ const xe = se(/* @__PURE__ */ i("path", {
   ...!e && {
     border: "none"
   }
-})), mo = g(W)(
+})), vo = f("div", {
+  shouldForwardProp: (e) => G(e)
+})(({ show: e, width: o = t.constants.navDefaultWidth, borderColor: s, backgroundColor: n }) => ({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  opacity: e ? 1 : 0,
+  border: `1px solid ${s}`,
+  borderRight: 0,
+  borderRadius: "4px",
+  borderTopRightRadius: 0,
+  borderBottomRightRadius: 0,
+  height: e ? "calc(100% + 2px)" : "100%",
+  boxSizing: "border-box",
+  backgroundColor: n,
+  width: e ? `${o}px` : 0,
+  transition: "313ms all ease-in-out",
+  ...!e && {
+    border: "none"
+  }
+})), wo = f(U)(
   ({ shadowColor: e, backgroundColor: o }) => ({
-    ...H`
+    ...M`
       top: ${t.constants.appHeaderHeight}px;
       font-family: 'Roboto';
 
@@ -632,8 +652,8 @@ const xe = se(/* @__PURE__ */ i("path", {
       }
     `
   })
-), we = g(J)(({ iconColor: e, highlight1: o, highlight2: a, rightDrawer: n = !1 }) => ({
-  ...H`
+), $e = f(Z)(({ iconColor: e, highlight1: o, highlight2: s, rightDrawer: n = !1 }) => ({
+  ...M`
     position: absolute;
     top: -0.5rem;
     ${!n && { right: "-0.5rem" }};
@@ -651,17 +671,17 @@ const xe = se(/* @__PURE__ */ i("path", {
     :focus-visible {
       svg {
         filter: unset;
-        background-color: ${a};
+        background-color: ${s};
         fill: ${e};
       }
     }
   `
-})), go = g("div", {
-  shouldForwardProp: (e) => Z(e)
-})(({ withActionsPanel: e, borderColor: o, backgroundColor: a, mobileScreen: n }) => ({
+})), ko = f("div", {
+  shouldForwardProp: (e) => G(e)
+})(({ withActionsPanel: e, borderColor: o, backgroundColor: s, mobileScreen: n }) => ({
   display: "flex",
   overflow: "hidden",
-  backgroundColor: a,
+  backgroundColor: s,
   borderRadius: "4px",
   borderBottomLeftRadius: e ? 0 : "4px",
   borderTopLeftRadius: e ? 0 : "4px",
@@ -679,10 +699,10 @@ const xe = se(/* @__PURE__ */ i("path", {
     borderBottomLeftRadius: 0,
     borderTopLeftRadius: 0
   }
-})), bo = g(W, {
+})), yo = f(U, {
   shouldForwardProp: (e) => !["backgroundColor", "shadowColor"].includes(e)
 })(({ backgroundColor: e, shadowColor: o }) => ({
-  ...H`
+  ...M`
     z-index: 1327;
 
     .MuiDrawer-paper {
@@ -697,10 +717,10 @@ const xe = se(/* @__PURE__ */ i("path", {
       background-color: transparent;
     }
   `
-})), xo = g(W, {
+})), Co = f(U, {
   shouldForwardProp: (e) => e != "backgroundColor"
 })(({ backgroundColor: e }) => ({
-  ...H`
+  ...M`
     z-index: 1300;
 
     .MuiDrawer-paper {
@@ -719,10 +739,10 @@ const xe = se(/* @__PURE__ */ i("path", {
       background-color: transparent;
     }
   `
-})), vo = g("div", {
-  shouldForwardProp: (e) => Z(e)
+})), $o = f("div", {
+  shouldForwardProp: (e) => G(e)
 })(({ backgroundColor: e, open: o }) => ({
-  ...H`
+  ...M`
     position: fixed;
     transition: height 201ms cubic-bezier(0, 0, 0.2, 1);
     z-index: 1300;
@@ -734,15 +754,15 @@ const xe = se(/* @__PURE__ */ i("path", {
     box-sizing: border-box;
     padding: ${o ? "16px" : 0};
   `
-})), wo = g("h1")(({ color: e }) => ({
-  ...H`
+})), To = f("h1")(({ color: e }) => ({
+  ...M`
     margin: 0;
     font-size: 2.1rem;
     font-family: 'Roboto';
     color: ${e};
   `
-})), ko = g(W)(({ backgroundQuaternary: e }) => ({
-  ...H`
+})), Po = f(U)(({ backgroundQuaternary: e }) => ({
+  ...M`
     top: ${t.constants.appHeaderHeight}px;
     font-family: 'Roboto';
     z-index: 1336;
@@ -761,21 +781,21 @@ const xe = se(/* @__PURE__ */ i("path", {
       background-color: transparent;
     }
   `
-})), yo = g("img")(({ width: e, height: o }) => ({
-  ...H`
+})), Ro = f("img")(({ width: e, height: o }) => ({
+  ...M`
     width: ${e}px;
     height: ${o}px;
   `
-})), ke = g("div")(({ justifyStart: e }) => ({
-  ...H`
+})), Te = f("div")(({ justifyStart: e }) => ({
+  ...M`
     display: flex;
     flex-direction: row;
     align-items: flex-start;
     justify-content: ${e ? "start" : "space-between"};
     padding: 8px 16px 8px 24px;
   `
-})), Co = g(W)(() => ({
-  ...H`
+})), Mo = f(U)(() => ({
+  ...M`
     top: ${t.constants.appHeaderHeight}px;
     font-family: 'Roboto';
 
@@ -796,197 +816,203 @@ const xe = se(/* @__PURE__ */ i("path", {
       background-color: transparent;
     }
   `
-})), _o = ({
+})), Zo = ({
   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: $
+  activeSubnavRoute: o,
+  appHeaderProps: s = {},
+  userInfo: n,
+  userSettingsEnabled: l = !0,
+  userProfileMenuItems: H = [],
+  actionsPanelContent: c,
+  navWidth: m = t.constants.navDefaultWidth,
+  breakpoints: w = { mobile: t.screenSizes.mobile, tablet: t.screenSizes.tablet },
+  children: d,
+  themeColors: g = {},
+  logoProps: O = {},
+  loggedIn: T,
+  mobileActionsPanelOpen: F
 }) => {
-  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,
+  var be;
+  const [W, E] = q(!1), [N, D] = q(!1), [j, y] = q(!1), [S, P] = q(!1), { mobile: I = t.screenSizes.mobile, tablet: u = t.screenSizes.tablet } = w, b = we(`(max-width: ${I})`), h = we(`(max-width: ${u})`) && !b, C = !b && !h, {
+    backgroundPrimary: x = t.colors.whiteGreen,
+    backgroundSecondary: v = 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,
+    highlightPrimary: oe = t.colors.sunlight,
+    backgroundQuaternary: re = t.colors.moss,
+    highlightSecondary: te = t.colors.dandelion,
+    highlightTertiary: Y = `${t.colors.dandelion}99`,
+    iconPrimary: a = t.colors.darkGreen,
+    shadowPrimary: p = t.colors.darkGreenO99,
+    shadowSecondary: B = t.boxShadows.darkGreen,
+    shadowTertiary: pe = t.boxShadows.darkGreenThick,
+    borderPrimary: V = 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,
+    iconColors: ze
+  } = g, { logoSrc: de = Ue, logoWidth: he = 36, logoHeight: ue = 50 } = O, fe = {
+    backgroundPrimary: x,
+    backgroundSecondary: v,
     backgroundTertiary: R,
-    highlightPrimary: F,
-    highlightSecondary: oe,
-    highlightTertiary: re,
-    borderPrimary: G,
-    iconPrimary: E,
-    shadowPrimary: s,
-    shadowSecondary: d,
-    shadowTertiary: V,
+    highlightPrimary: oe,
+    highlightSecondary: te,
+    highlightTertiary: Y,
+    borderPrimary: V,
+    iconPrimary: a,
+    shadowPrimary: p,
+    shadowSecondary: B,
+    shadowTertiary: pe,
     scrollColor: A
-  }, De = { logoSrc: ce, logoWidth: pe, logoHeight: de }, te = u != null, ze = { ...o, navWidth: f, loggedIn: I }, X = { ...e, themeColors: Ee }, Se = {
+  }, Ne = { logoSrc: de, logoWidth: he, logoHeight: ue }, ne = c != null, Ie = { ...s, navWidth: m, loggedIn: T }, X = { ...e, themeColors: fe }, Oe = {
     ...X,
-    navWidth: `${f}px`,
-    isMobile: l
-  }, he = [
+    navWidth: `${m}px`,
+    isMobile: b
+  }, { navItems: _ } = e, ie = ((be = _.find((k) => k.label === (e == null ? void 0 : e.activeRoute))) == null ? void 0 : be.subnavItems) || [], Be = {
+    themeColors: fe,
+    activeRoute: o,
+    navItems: ie
+  }, me = [
     // { label: 'Log Out', icon: <LogoutIcon />, onClick: onLogout },
-    ...c
-  ].map((y) => ({
-    ...y,
+    ...H
+  ].map((k) => ({
+    ...k,
     onClick: () => {
-      y.onClick && y.onClick(), T(!1);
+      k.onClick && k.onClick(), y(!1);
     }
-  })), { navItems: ne } = e, Ne = ne.map((y) => ({
-    ...y,
+  })), Ae = _.map((k) => ({
+    ...k,
     onClick: () => {
-      y.onClick && y.onClick(), z(!1);
+      k.onClick && k.onClick(), E(!1);
     }
-  })), ie = {
+  })), ae = {
     ...X,
     navWidth: "100%",
     isTablet: !0,
-    navItems: Ne
+    navItems: Ae
   };
-  let ae = ne.map((y) => ({
-    ...y,
+  let se = _.map((k) => ({
+    ...k,
     onClick: () => {
-      y.onClick && y.onClick(), M(!1);
+      k.onClick && k.onClick(), P(!1);
     }
-  })), ue = [];
-  ne.length > 4 && l && (ue = ae.splice(3), ae.push({
+  })), ge = [];
+  _.length > 4 && b && (ge = se.splice(3), se.push({
     label: "More",
-    icon: /* @__PURE__ */ i(po, {}),
-    onClick: () => M(!0)
+    icon: /* @__PURE__ */ i(mo, {}),
+    onClick: () => P(!0)
   }));
-  const Oe = {
+  const Le = {
     ...X,
     navWidth: "100%",
-    navItems: ae,
+    navItems: se,
     isMobile: !0,
-    activeRoute: N ? "More" : X.activeRoute
-  }, Be = {
+    activeRoute: S ? "More" : X.activeRoute
+  }, Fe = {
     ...X,
     navWidth: "100%",
-    navItems: ue,
+    navItems: ge,
     isTablet: !0
   };
-  return /* @__PURE__ */ C(ho, { backgroundColor: p, children: [
+  return /* @__PURE__ */ $(go, { backgroundColor: v, children: [
     /* @__PURE__ */ i(
-      Ie,
+      je,
       {
-        ...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
+        ...Ie,
+        hamburgerMenu: h,
+        onHamburgerMenuClick: () => E(!0),
+        onUserMenuClick: () => y(!0),
+        logoProps: Ne,
+        iconColor: a,
+        isMobile: b,
+        themeProps: { shadowSecondary: B, shadowTertiary: pe, iconPrimary: a, borderPrimary: V },
+        iconColors: ze,
+        userName: n == null ? void 0 : n.name,
+        userSettingsEnabled: l
       }
     ),
-    /* @__PURE__ */ C(uo, { tabletPadding: v, mobile: l, children: [
-      k && /* @__PURE__ */ i(U, { ...Se }),
-      l && /* @__PURE__ */ C(fe, { children: [
-        /* @__PURE__ */ i(U, { ...Oe }),
+    /* @__PURE__ */ $(bo, { tabletPadding: h, mobile: b, children: [
+      C && /* @__PURE__ */ i(L, { ...Oe }),
+      b && /* @__PURE__ */ $(xe, { children: [
+        /* @__PURE__ */ i(L, { ...Le }),
         /* @__PURE__ */ i(
-          xo,
+          Co,
           {
-            open: N,
-            onClose: () => M(!1),
-            backgroundColor: p,
+            open: S,
+            onClose: () => P(!1),
+            backgroundColor: v,
             anchor: "right",
-            children: /* @__PURE__ */ i(U, { ...Be })
+            children: /* @__PURE__ */ i(L, { ...Fe })
           }
         )
       ] }),
-      v && /* @__PURE__ */ C(
-        bo,
+      h && /* @__PURE__ */ $(
+        yo,
         {
-          open: L,
-          onClose: () => z(!1),
-          backgroundColor: p,
-          shadowColor: s,
+          open: W,
+          onClose: () => E(!1),
+          backgroundColor: v,
+          shadowColor: p,
           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__ */ $(Te, { children: [
+              /* @__PURE__ */ i(Ro, { src: de, alt: "logo", width: he, height: ue }),
+              /* @__PURE__ */ i(Z, { variant: "icon", size: 36, onClick: () => E(!1), color: a, children: /* @__PURE__ */ i(We, {}) })
             ] }),
-            /* @__PURE__ */ i(U, { ...ie })
+            /* @__PURE__ */ i(L, { ...ae })
           ]
         }
       ),
-      v && /* @__PURE__ */ C(
-        mo,
+      h && /* @__PURE__ */ $(
+        wo,
         {
-          open: j && te,
-          onClose: () => P(!1),
-          shadowColor: s,
+          open: N && ne,
+          onClose: () => D(!1),
+          shadowColor: p,
           backgroundColor: R,
           children: [
             /* @__PURE__ */ i(
-              we,
+              $e,
               {
                 variant: "icon",
                 size: 24,
-                onClick: () => P(!1),
-                iconColor: E,
-                highlight1: p,
-                highlight2: p,
-                children: /* @__PURE__ */ i(ve, {})
+                onClick: () => D(!1),
+                iconColor: a,
+                highlight1: v,
+                highlight2: v,
+                children: /* @__PURE__ */ i(Ce, {})
               }
             ),
-            /* @__PURE__ */ i(_, { scrollColor: A, direction: "vertical", children: u && u })
+            /* @__PURE__ */ i(Q, { scrollColor: A, direction: "vertical", children: c && c })
           ]
         }
       ),
-      (v || k) && /* @__PURE__ */ C(
-        Co,
+      (h || C) && /* @__PURE__ */ $(
+        Mo,
         {
           anchor: "right",
-          open: S,
-          onClose: () => T(!1),
+          open: j,
+          onClose: () => y(!1),
           children: [
             /* @__PURE__ */ i(
-              we,
+              $e,
               {
                 variant: "icon",
                 size: 24,
-                onClick: () => T(!1),
+                onClick: () => y(!1),
                 iconColor: t.colors.midnight,
                 highlight1: t.colors.white,
-                highlight2: p,
+                highlight2: v,
                 rightDrawer: !0,
-                children: /* @__PURE__ */ i(ve, {})
+                children: /* @__PURE__ */ i(Ce, {})
               }
             ),
             /* @__PURE__ */ i(
-              U,
+              L,
               {
-                ...ie,
-                navItems: he,
+                ...ae,
+                navItems: me,
                 themeColors: {
                   iconPrimary: t.colors.midnight,
-                  highlightPrimary: w,
-                  highlightTertiary: p,
-                  shadowSecondary: d,
+                  highlightPrimary: x,
+                  highlightTertiary: v,
+                  shadowSecondary: B,
                   scrollColor: A
                 }
               }
@@ -994,38 +1020,38 @@ const xe = se(/* @__PURE__ */ i("path", {
           ]
         }
       ),
-      l && /* @__PURE__ */ C(fe, { children: [
-        /* @__PURE__ */ C(
-          ko,
+      b && /* @__PURE__ */ $(xe, { children: [
+        /* @__PURE__ */ $(
+          Po,
           {
             anchor: "right",
-            open: S,
-            onClose: () => T(!1),
-            backgroundQuaternary: ee,
+            open: j,
+            onClose: () => y(!1),
+            backgroundQuaternary: re,
             children: [
-              /* @__PURE__ */ C(ke, { children: [
-                /* @__PURE__ */ i(wo, { color: t.colors.midnight, children: "Settings" }),
+              /* @__PURE__ */ $(Te, { children: [
+                /* @__PURE__ */ i(To, { color: t.colors.midnight, children: "Settings" }),
                 /* @__PURE__ */ i(
-                  J,
+                  Z,
                   {
                     variant: "icon",
                     size: 36,
-                    onClick: () => T(!1),
+                    onClick: () => y(!1),
                     color: t.colors.midnight,
-                    children: /* @__PURE__ */ i(xe, {})
+                    children: /* @__PURE__ */ i(ye, {})
                   }
                 )
               ] }),
               /* @__PURE__ */ i(
-                U,
+                L,
                 {
-                  ...ie,
-                  navItems: he,
+                  ...ae,
+                  navItems: me,
                   themeColors: {
                     iconPrimary: t.colors.midnight,
-                    highlightPrimary: w,
-                    highlightTertiary: p,
-                    shadowSecondary: d,
+                    highlightPrimary: x,
+                    highlightTertiary: v,
+                    shadowSecondary: B,
                     scrollColor: A
                   }
                 }
@@ -1033,43 +1059,53 @@ const xe = se(/* @__PURE__ */ i("path", {
             ]
           }
         ),
-        /* @__PURE__ */ i(vo, { backgroundColor: R, open: $, children: /* @__PURE__ */ i(_, { scrollColor: A, direction: "vertical", children: u }) })
+        /* @__PURE__ */ i($o, { backgroundColor: R, open: F, children: /* @__PURE__ */ i(Q, { scrollColor: A, direction: "vertical", children: c }) })
       ] }),
-      !l && /* @__PURE__ */ C(
-        fo,
+      !b && /* @__PURE__ */ $(
+        xo,
         {
-          withActionsPanel: te,
-          tablet: v,
-          borderColor: G,
+          withActionsPanel: ne,
+          tablet: h,
+          borderColor: V,
           backgroundColor: R,
           children: [
-            k && /* @__PURE__ */ i(_, { scrollColor: A, direction: "vertical", children: u && u }),
-            v && /* @__PURE__ */ i(
-              J,
+            C && /* @__PURE__ */ i(Q, { scrollColor: A, direction: "vertical", children: c && c }),
+            h && /* @__PURE__ */ i(
+              Z,
               {
                 variant: "icon",
                 size: 36,
-                onClick: () => P(!0),
-                color: E,
-                children: /* @__PURE__ */ i(xe, {})
+                onClick: () => D(!0),
+                color: a,
+                children: /* @__PURE__ */ i(ye, {})
               }
             )
           ]
         }
       ),
+      !C && /* @__PURE__ */ i(
+        vo,
+        {
+          show: ie && ie.length > 0,
+          borderColor: V,
+          backgroundColor: R,
+          width: m,
+          children: /* @__PURE__ */ i(L, { ...Be })
+        }
+      ),
       /* @__PURE__ */ i(
-        go,
+        ko,
         {
-          withActionsPanel: te,
-          borderColor: G,
-          backgroundColor: w,
-          mobileScreen: l,
-          children: /* @__PURE__ */ i(_, { scrollColor: A, children: b })
+          withActionsPanel: ne,
+          borderColor: V,
+          backgroundColor: x,
+          mobileScreen: b,
+          children: /* @__PURE__ */ i(Q, { scrollColor: A, children: d })
         }
       )
     ] })
   ] });
 };
 export {
-  _o as default
+  Zo as default
 };

package/Nav/Nav.d.ts

@@ -4,8 +4,10 @@ export interface NavItemProps {
     icon?: React.ReactNode;
     onClick?: () => void;
     active?: boolean;
+    url?: string;
     /** This is defined only to enable type safe external management of the AppContainer actions panel */
     actionsPanelContent?: React.ReactNode;
+    subnavItems?: NavItemProps[];
 }
 export interface NavProps {
     navItems: NavItemProps[];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jcicl",
   "private": false,
-  "version": "0.0.279",
+  "version": "0.0.283",
   "description": "Component library for the websites of Johnson County Iowa",
   "license": "MIT",
   "homepage": "https://devops.jc.net/JCIT/Business%20Solutions%20Delivery/_git/JCComponentLibrary?path=%2FREADME.md&version=GBmaster",