jcicl 0.0.120 → 0.0.124

package/AppHeader/AppHeader.js

@@ -1,6 +1,6 @@
 import { jsx as n, jsxs as x } from "react/jsx-runtime";
 import * as S from "react";
-import B, { useState as w, useLayoutEffect as F } from "react";
+import V, { useState as w, useLayoutEffect as B } from "react";
 import { n as h } from "../.chunks/emotion-styled.browser.esm.js";
 import { c as b } from "../.chunks/emotion-react.browser.esm.js";
 import { I as W } from "../.chunks/Input.js";
@@ -8,7 +8,7 @@ import { Button as k } from "../Button/Button.js";
 import E from "../Avatar/Avatar.js";
 import q from "../WithLabel/WithLabel.js";
 import { c as T } from "../.chunks/createSvgIcon.js";
-const D = B[typeof document < "u" && document.createElement !== void 0 ? "useLayoutEffect" : "useEffect"], G = (e) => {
+const D = V[typeof document < "u" && document.createElement !== void 0 ? "useLayoutEffect" : "useEffect"], G = (e) => {
   const t = S.useRef(e);
   return S.useEffect(() => {
     t.current = e;
@@ -17,22 +17,22 @@ const D = B[typeof document < "u" && document.createElement !== void 0 ? "useLay
 function J() {
 }
 function K(e, t, l = {}) {
-  const c = Q(l.polyfill), d = G(t);
+  const c = Q(l.polyfill), a = G(t);
   return D(() => {
     let i = !1;
-    const a = e && "current" in e ? e.current : e;
-    if (!a) return J;
+    const d = e && "current" in e ? e.current : e;
+    if (!d) return J;
     function r(o, s) {
-      i || d.current(o, s);
+      i || a.current(o, s);
     }
-    return c.subscribe(a, r), () => {
-      i = !0, c.unsubscribe(a, r);
+    return c.subscribe(d, r), () => {
+      i = !0, c.unsubscribe(d, r);
     };
-  }, [e, c, d]), c.observer;
+  }, [e, c, a]), c.observer;
 }
 function N(e) {
   let t = !1, l = [];
-  const c = /* @__PURE__ */ new Map(), d = new (e || window.ResizeObserver)((i, a) => {
+  const c = /* @__PURE__ */ new Map(), a = new (e || window.ResizeObserver)((i, d) => {
     l = l.concat(i);
     function r() {
       const o = /* @__PURE__ */ new Set();
@@ -40,34 +40,34 @@ function N(e) {
         if (o.has(l[s].target)) continue;
         o.add(l[s].target);
         const u = c.get(l[s].target);
-        u == null || u.forEach((p) => p(l[s], a));
+        u == null || u.forEach((p) => p(l[s], d));
       }
       l = [], t = !1;
     }
     t || window.requestAnimationFrame(r), t = !0;
   });
   return {
-    observer: d,
-    subscribe(i, a) {
+    observer: a,
+    subscribe(i, d) {
       var r;
-      d.observe(i);
+      a.observe(i);
       const o = (r = c.get(i)) !== null && r !== void 0 ? r : [];
-      o.push(a), c.set(i, o);
+      o.push(d), c.set(i, o);
     },
-    unsubscribe(i, a) {
+    unsubscribe(i, d) {
       var r;
       const o = (r = c.get(i)) !== null && r !== void 0 ? r : [];
       if (o.length === 1) {
-        d.unobserve(i), c.delete(i);
+        a.unobserve(i), c.delete(i);
         return;
       }
-      const s = o.indexOf(a);
+      const s = o.indexOf(d);
       s !== -1 && o.splice(s, 1), c.set(i, o);
     }
   };
 }
-let $;
-const Q = (e) => $ || ($ = N(e)), X = T(/* @__PURE__ */ n("path", {
+let C;
+const Q = (e) => C || (C = N(e)), X = T(/* @__PURE__ */ n("path", {
   d: "M3 18h18v-2H3zm0-5h18v-2H3zm0-7v2h18V6z"
 }), "Menu"), M = h("div")(
   ({ mobile: e, shadowSecondary: t }) => ({
@@ -124,27 +124,27 @@ const Q = (e) => $ || ($ = N(e)), X = T(/* @__PURE__ */ n("path", {
   loggedIn: t,
   logoProps: l,
   iconColor: c,
-  themeProps: d,
+  themeProps: a,
   hamburgerMenu: i,
-  avatarColors: a,
+  avatarColors: d,
   onHamburgerMenuClick: r,
   onUserMenuClick: o,
   onLogin: s
 }) => {
-  const [u, p] = w(0), [f, _] = w(null), [v, A] = w(null), { logoSrc: C, logoWidth: y, logoHeight: g } = l, { shadowSecondary: H, shadowTertiary: j, iconPrimary: P, borderPrimary: U } = d, z = { shadowTertiary: j, borderColor: U, iconPrimary: P };
-  F(() => {
+  const [u, p] = w(0), [f, _] = w(null), [v, A] = w(null), { logoSrc: $, logoWidth: y, logoHeight: g } = l, { shadowSecondary: H, shadowTertiary: j, iconPrimary: P, borderPrimary: F } = a, z = { shadowTertiary: j, borderColor: F, borderFocusColor: P };
+  B(() => {
     f && f.clientWidth > u && p(f.clientWidth), v && v.clientWidth > u && p(v.clientWidth);
   }, [f, v]);
-  const V = (m) => {
+  const U = (m) => {
     m != null && m.clientWidth && m.clientWidth > u && p(m.clientWidth);
   };
-  return K(f, () => V(f)), e ? /* @__PURE__ */ x(M, { mobile: !0, shadowSecondary: H, children: [
-    /* @__PURE__ */ n(I, { height: g, children: /* @__PURE__ */ n(O, { src: C, height: `${g}px`, width: y }) }),
+  return K(f, () => U(f)), e ? /* @__PURE__ */ x(M, { mobile: !0, shadowSecondary: H, children: [
+    /* @__PURE__ */ n(I, { height: g, children: /* @__PURE__ */ n(O, { src: $, height: `${g}px`, width: y }) }),
     /* @__PURE__ */ n(R, { children: /* @__PURE__ */ n(W, { ...z, placeholder: "Search..." }) }),
-    /* @__PURE__ */ n(E, { ...a, onClick: o })
+    /* @__PURE__ */ n(E, { ...d, onClick: o })
   ] }) : /* @__PURE__ */ x(M, { children: [
     /* @__PURE__ */ x(I, { height: g, children: [
-      /* @__PURE__ */ n(O, { src: C, height: `${g}px`, width: y }),
+      /* @__PURE__ */ n(O, { src: $, height: `${g}px`, width: y }),
       i && /* @__PURE__ */ n(k, { variant: "icon", onClick: r, color: c, children: /* @__PURE__ */ n(X, {}) })
     ] }),
     /* @__PURE__ */ n(R, { children: /* @__PURE__ */ n(W, { ...z, placeholder: "Search..." }) }),
@@ -153,7 +153,7 @@ const Q = (e) => $ || ($ = N(e)), X = T(/* @__PURE__ */ n("path", {
         q,
         {
           id: "accountMenuContainer",
-          component: /* @__PURE__ */ n(E, { ...a, onClick: o }),
+          component: /* @__PURE__ */ n(E, { ...d, onClick: o }),
           label: "Welcome, User"
         }
       ) }),

package/Button/Button.js

@@ -1,19 +1,20 @@
-import { jsxs as F, jsx as d } from "react/jsx-runtime";
+import { jsxs as D, jsx as d } from "react/jsx-runtime";
 import * as x from "react";
 import { g as U, a as _, s as c, r as H, c as i, f as A, u as q, b as I, P as t, d as J, e as b } from "../.chunks/DefaultPropsProvider.js";
 import { m as K } from "../.chunks/memoTheme.js";
 import { c as Q } from "../.chunks/createSimplePaletteValueFilter.js";
 import { B as S } from "../.chunks/ButtonBase.js";
-import { c as X } from "../.chunks/emotion-react.browser.esm.js";
+import { i as X } from "../.chunks/emotion-styled.browser.esm.js";
+import { c as Y } from "../.chunks/emotion-react.browser.esm.js";
 import s from "../theme.js";
-function Y(o) {
+function Z(o) {
   return U("MuiButton", o);
 }
 const u = _("MuiButton", ["root", "text", "textInherit", "textPrimary", "textSecondary", "textSuccess", "textError", "textInfo", "textWarning", "outlined", "outlinedInherit", "outlinedPrimary", "outlinedSecondary", "outlinedSuccess", "outlinedError", "outlinedInfo", "outlinedWarning", "contained", "containedInherit", "containedPrimary", "containedSecondary", "containedSuccess", "containedError", "containedInfo", "containedWarning", "disableElevation", "focusVisible", "disabled", "colorInherit", "colorPrimary", "colorSecondary", "colorSuccess", "colorError", "colorInfo", "colorWarning", "textSizeSmall", "textSizeMedium", "textSizeLarge", "outlinedSizeSmall", "outlinedSizeMedium", "outlinedSizeLarge", "containedSizeSmall", "containedSizeMedium", "containedSizeLarge", "sizeMedium", "sizeSmall", "sizeLarge", "fullWidth", "startIcon", "endIcon", "icon", "iconSizeSmall", "iconSizeMedium", "iconSizeLarge"]), h = /* @__PURE__ */ x.createContext({});
 process.env.NODE_ENV !== "production" && (h.displayName = "ButtonGroupContext");
 const O = /* @__PURE__ */ x.createContext(void 0);
 process.env.NODE_ENV !== "production" && (O.displayName = "ButtonGroupButtonContext");
-const Z = (o) => {
+const oo = (o) => {
   const {
     color: n,
     disableElevation: a,
@@ -26,7 +27,7 @@ const Z = (o) => {
     label: ["label"],
     startIcon: ["icon", "startIcon", `iconSize${i(e)}`],
     endIcon: ["icon", "endIcon", `iconSize${i(e)}`]
-  }, y = J(f, Y, p);
+  }, y = J(f, Z, p);
   return {
     ...p,
     // forward the focused, disabled, etc. classes to the ButtonBase
@@ -59,7 +60,7 @@ const Z = (o) => {
       fontSize: 22
     }
   }
-}], oo = c(S, {
+}], to = c(S, {
   shouldForwardProp: (o) => H(o) || o === "classes",
   name: "MuiButton",
   slot: "Root",
@@ -255,7 +256,7 @@ const Z = (o) => {
       }
     }]
   };
-})), to = c("span", {
+})), ao = c("span", {
   name: "MuiButton",
   slot: "StartIcon",
   overridesResolver: (o, n) => {
@@ -276,7 +277,7 @@ const Z = (o) => {
       marginLeft: -2
     }
   }, ...R]
-}), ao = c("span", {
+}), no = c("span", {
   name: "MuiButton",
   slot: "EndIcon",
   overridesResolver: (o, n) => {
@@ -307,43 +308,43 @@ const Z = (o) => {
     component: B = "button",
     className: N,
     disabled: z = !1,
-    disableElevation: T = !1,
+    disableElevation: P = !1,
     disableFocusRipple: $ = !1,
-    endIcon: C,
-    focusVisibleClassName: P,
+    endIcon: m,
+    focusVisibleClassName: T,
     fullWidth: W = !1,
-    size: M = "medium",
-    startIcon: m,
+    size: V = "medium",
+    startIcon: C,
     type: w,
-    variant: V = "text",
+    variant: M = "text",
     ...j
   } = p, g = {
     ...p,
     color: y,
     component: B,
     disabled: z,
-    disableElevation: T,
+    disableElevation: P,
     disableFocusRipple: $,
     fullWidth: W,
-    size: M,
+    size: V,
     type: w,
-    variant: V
-  }, v = Z(g), G = m && /* @__PURE__ */ d(to, {
+    variant: M
+  }, v = oo(g), G = C && /* @__PURE__ */ d(ao, {
     className: v.startIcon,
     ownerState: g,
-    children: m
-  }), L = C && /* @__PURE__ */ d(ao, {
+    children: C
+  }), L = m && /* @__PURE__ */ d(no, {
     className: v.endIcon,
     ownerState: g,
-    children: C
-  }), D = e || "";
-  return /* @__PURE__ */ F(oo, {
+    children: m
+  }), F = e || "";
+  return /* @__PURE__ */ D(to, {
     ownerState: g,
-    className: I(r.className, v.root, N, D),
+    className: I(r.className, v.root, N, F),
     component: B,
     disabled: z,
     focusRipple: !$,
-    focusVisibleClassName: I(v.focusVisible, P),
+    focusVisibleClassName: I(v.focusVisible, T),
     ref: a,
     type: w,
     ...j,
@@ -454,7 +455,7 @@ const E = c(k)`
     justify-content: center;
     align-items: center;
   }
-`, no = c(E)`
+`, ro = c(E)`
   background-color: ${s.colors.green};
   border-radius: 0;
   height: 2.5rem;
@@ -474,46 +475,46 @@ const E = c(k)`
   &:disabled {
     background-color: ${s.colors.darkGreen};
   }
-`, ro = c(E)`
+`, eo = c(E)`
   color: ${s.colors.black};
   border: 3px solid ${s.colors.blue};
   padding: 0.5rem 2rem;
-`, eo = c(S)`
+`, io = c(S)`
   border-radius: 8px;
-`, io = c(S)(
-  ({ size: o, color: n, highlightColor: a }) => ({
-    ...X`
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background-color: transparent;
-      transition: 313ms all ease-in-out;
-
-      &:hover,
-      :focus-visible {
-        svg {
-          filter: drop-shadow(0 0 6px ${a}) drop-shadow(0 0 6px ${a})
-            drop-shadow(0 0 6px ${a}) drop-shadow(0 0 6px ${a});
-        }
-      }
+`, so = c(S, {
+  shouldForwardProp: (o) => typeof o == "string" && X(o)
+})(({ size: o, color: n, highlightColor: a }) => ({
+  ...Y`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: transparent;
+    transition: 313ms all ease-in-out;
 
+    &:hover,
+    :focus-visible {
       svg {
-        transition: 313ms all ease-in-out;
-        fill: ${n};
-        width: ${o}px;
-        height: ${o}px;
+        filter: drop-shadow(0 0 6px ${a}) drop-shadow(0 0 6px ${a})
+          drop-shadow(0 0 6px ${a}) drop-shadow(0 0 6px ${a});
       }
-    `
-  })
-), xo = ({
+    }
+
+    svg {
+      transition: 313ms all ease-in-out;
+      fill: ${n};
+      width: ${o}px;
+      height: ${o}px;
+    }
+  `
+})), fo = ({
   variant: o = 1,
   size: n = 50,
   color: a = s.colors.darkGreen,
   highlightColor: r = s.colors.dandelion,
   children: e,
   ...l
-}) => o === "unstyled" ? /* @__PURE__ */ d(eo, { ...l, children: e }) : o === 2 ? /* @__PURE__ */ d(ro, { ...l, children: /* @__PURE__ */ d("span", { children: e }) }) : o === "icon" ? /* @__PURE__ */ d(io, { ...{ size: n, color: a, highlightColor: r }, ...l, children: e }) : /* @__PURE__ */ d(no, { ...l, children: /* @__PURE__ */ d("span", { children: e }) });
+}) => o === "unstyled" ? /* @__PURE__ */ d(io, { ...l, children: e }) : o === 2 ? /* @__PURE__ */ d(eo, { ...l, children: /* @__PURE__ */ d("span", { children: e }) }) : o === "icon" ? /* @__PURE__ */ d(so, { ...{ size: n, color: a, highlightColor: r }, ...l, children: e }) : /* @__PURE__ */ d(ro, { ...l, children: /* @__PURE__ */ d("span", { children: e }) });
 export {
-  xo as Button,
-  xo as default
+  fo as Button,
+  fo as default
 };

package/Flex/Flex.d.ts

@@ -2,7 +2,7 @@ import { default as React, CSSProperties } from 'react';
 export interface FlexProps {
     children: React.ReactNode;
     alignItems?: 'flex-start' | 'center' | 'stretch' | 'flex-end';
-    justifyContent?: 'start' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
+    justifyContent?: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';
     placeContent?: string;
     column?: boolean;
     width?: string;

package/Nav/Nav.d.ts

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

package/Nav/Nav.js

@@ -1,12 +1,12 @@
-import { jsx as a, jsxs as u } from "react/jsx-runtime";
+import { jsx as c, jsxs as u } from "react/jsx-runtime";
 import { useState as j } from "react";
-import { n as y, i as z } from "../.chunks/emotion-styled.browser.esm.js";
+import { n as v, i as z } from "../.chunks/emotion-styled.browser.esm.js";
 import P from "../theme.js";
 import B from "../ScrollContainer/ScrollContainer.js";
 import { B as D } from "../.chunks/ButtonBase.js";
-const C = y(D, {
-  shouldForwardProp: (r) => z(r)
-})(({ active: r, isTablet: n, highlight1: t, highlight3: i, iconColor: e, isMobile: c, shadowSecondary: d }) => ({
+const C = v(D, {
+  shouldForwardProp: (t) => z(t)
+})(({ active: t, isTablet: n, highlight1: r, highlight3: i, iconColor: e, isMobile: s, shadowSecondary: d }) => ({
   display: "flex",
   flexDirection: n ? "row" : "column",
   alignItems: "center",
@@ -14,18 +14,18 @@ const C = y(D, {
   width: "100%",
   padding: n ? "16px" : "0 8px 8px 8px",
   transition: "313ms all ease-in-out",
-  backgroundColor: r && !c ? t : "transparent",
-  boxShadow: r ? e : "none",
+  backgroundColor: t && !s ? r : "transparent",
+  boxShadow: t ? e : "none",
   ...n && {
     gap: "0.5rem"
   },
-  ...c && {
+  ...s && {
     padding: 0
   },
   "&:hover, :focus-visible": {
     svg: {
       ...!n && {
-        backgroundColor: t
+        backgroundColor: r
       }
     },
     ...n && {
@@ -42,7 +42,10 @@ const C = y(D, {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    transition: "313ms all ease-in-out"
+    transition: "313ms all ease-in-out",
+    ...s && t && {
+      backgroundColor: r
+    }
   },
   span: {
     fontFamily: "Roboto, sans-serif",
@@ -55,76 +58,74 @@ const C = y(D, {
       fontWeight: "500"
     }
   }
-})), v = y("div")(({ navWidth: r, isTablet: n, isMobile: t, shadowSecondary: i }) => ({
+})), y = v("div")(({ navWidth: t, isTablet: n, isMobile: r, shadowSecondary: i }) => ({
   display: "flex",
-  flexDirection: t ? "row" : "column",
+  flexDirection: r ? "row" : "column",
   backgroundColor: "transparent",
   alignItems: "center",
-  justifyContent: t ? "space-between" : "flex-start",
+  justifyContent: r ? "space-between" : "flex-start",
   maxHeight: "100%",
   flexShrink: 0,
   gap: n ? 0 : "1rem",
-  width: r,
+  width: t,
   boxSizing: "border-box",
-  ...t && {
+  ...r && {
     boxShadow: i,
-    zIndex: 1313
-  },
-  ...t && {
+    zIndex: 1313,
     padding: "4px 8px"
   }
 })), $ = ({
-  navItems: r,
+  navItems: t,
   activeRoute: n,
-  navWidth: t = `${P.constants.navDefaultWidth}px`,
+  navWidth: r = `${P.constants.navDefaultWidth}px`,
   isTablet: i,
   isMobile: e,
-  themeColors: c
+  themeColors: s
 }) => {
-  const [d, w] = j(""), g = (s, o) => {
-    w(s), o();
-  }, { highlightPrimary: f, highlightTertiary: m, iconPrimary: x, shadowSecondary: h, scrollColor: S } = c, k = { navWidth: t, isTablet: i, shadowSecondary: h };
-  return e ? /* @__PURE__ */ a(v, { isTablet: !1, navWidth: "100%", isMobile: !0, shadowSecondary: h, children: r.map(({ icon: s, label: o = "", onClick: p = () => {
-  }, ...l }) => /* @__PURE__ */ u(
+  const [d, w] = j(""), f = (a, o) => {
+    w(a), o();
+  }, { highlightPrimary: g, highlightTertiary: m, iconPrimary: x, shadowSecondary: p, scrollColor: S } = s, k = { navWidth: r, isTablet: i, shadowSecondary: p };
+  return e ? /* @__PURE__ */ c(y, { isTablet: !1, navWidth: "100%", isMobile: !0, shadowSecondary: p, children: t.map(({ icon: a, label: o = "", onClick: l = () => {
+  }, ...h }) => /* @__PURE__ */ u(
     C,
     {
-      ...l,
+      ...h,
       active: n ? n === o : d === o,
-      onClick: () => g(o, p),
+      onClick: () => f(o, l),
       isTablet: i,
-      highlight1: f,
+      highlight1: g,
       highlight3: m,
       iconColor: x,
-      shadowSecondary: h,
+      shadowSecondary: p,
       isMobile: !0,
       children: [
-        s,
-        /* @__PURE__ */ a("span", { children: o })
+        a,
+        /* @__PURE__ */ c("span", { children: o })
       ]
     },
     o
-  )) }) : /* @__PURE__ */ a(
+  )) }) : /* @__PURE__ */ c(
     B,
     {
       scrollColor: S,
       direction: "vertical",
-      width: t,
-      styles: { minWidth: t },
-      children: /* @__PURE__ */ a(v, { ...k, children: r.map(({ icon: s, label: o = "", onClick: p = () => {
-      }, ...l }) => /* @__PURE__ */ u(
+      width: r,
+      styles: { minWidth: r },
+      children: /* @__PURE__ */ c(y, { ...k, children: t.map(({ icon: a, label: o = "", onClick: l = () => {
+      }, ...h }) => /* @__PURE__ */ u(
         C,
         {
-          ...l,
+          ...h,
           active: n ? n === o : d === o,
-          onClick: () => g(o, p),
+          onClick: () => f(o, l),
           isTablet: i,
-          highlight1: f,
+          highlight1: g,
           highlight3: m,
           iconColor: x,
-          shadowSecondary: h,
+          shadowSecondary: p,
           children: [
-            s,
-            /* @__PURE__ */ a("span", { children: o })
+            a,
+            /* @__PURE__ */ c("span", { children: o })
           ]
         },
         o