jcicl 0.0.118 → 0.0.122

package/AppHeader/AppHeader.d.ts

@@ -1,3 +1,5 @@
+import { AvatarProps } from '../../../../../../../../../src/components/base/Avatar';
+import { TemplateThemeProps } from '../../../../../../../../../src/components/theme';
 export interface CustomLogoProps {
     logoSrc: string;
     logoWidth: number;
@@ -12,6 +14,9 @@ export interface AppHeaderProps {
     onHamburgerMenuClick?: () => void;
     logoProps: CustomLogoProps;
     iconColor: string;
+    isMobile?: boolean;
+    themeProps: Pick<TemplateThemeProps, 'shadowSecondary' | 'iconPrimary' | 'borderPrimary' | 'shadowTertiary'>;
+    avatarColors?: AvatarProps;
 }
 declare const AppHeader: React.FC<AppHeaderProps>;
 export default AppHeader;

package/AppHeader/AppHeader.js

@@ -1,113 +1,117 @@
-import { jsx as u, jsxs as b } from "react/jsx-runtime";
-import * as w from "react";
-import E, { useState as v, useLayoutEffect as M } from "react";
-import { n as f } from "../.chunks/emotion-styled.browser.esm.js";
-import { c as m } from "../.chunks/emotion-react.browser.esm.js";
-import { I as y } from "../.chunks/Input.js";
-import { Button as C } from "../Button/Button.js";
-import O from "../Avatar/Avatar.js";
-import I from "../WithLabel/WithLabel.js";
-import { c as L } from "../.chunks/createSvgIcon.js";
-const R = E[typeof document < "u" && document.createElement !== void 0 ? "useLayoutEffect" : "useEffect"], _ = (e) => {
-  const c = w.useRef(e);
-  return w.useEffect(() => {
-    c.current = e;
-  }), c;
+import { jsx as n, jsxs as x } from "react/jsx-runtime";
+import * as S 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";
+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 = V[typeof document < "u" && document.createElement !== void 0 ? "useLayoutEffect" : "useEffect"], G = (e) => {
+  const t = S.useRef(e);
+  return S.useEffect(() => {
+    t.current = e;
+  }), t;
 };
-function A() {
+function J() {
 }
-function H(e, c, s = {}) {
-  const r = U(s.polyfill), a = _(c);
-  return R(() => {
-    let o = !1;
-    const l = e && "current" in e ? e.current : e;
-    if (!l) return A;
-    function n(i, t) {
-      o || a.current(i, t);
+function K(e, t, l = {}) {
+  const c = Q(l.polyfill), a = G(t);
+  return D(() => {
+    let i = !1;
+    const d = e && "current" in e ? e.current : e;
+    if (!d) return J;
+    function r(o, s) {
+      i || a.current(o, s);
     }
-    return r.subscribe(l, n), () => {
-      o = !0, r.unsubscribe(l, n);
+    return c.subscribe(d, r), () => {
+      i = !0, c.unsubscribe(d, r);
     };
-  }, [e, r, a]), r.observer;
+  }, [e, c, a]), c.observer;
 }
-function j(e) {
-  let c = !1, s = [];
-  const r = /* @__PURE__ */ new Map(), a = new (e || window.ResizeObserver)((o, l) => {
-    s = s.concat(o);
-    function n() {
-      const i = /* @__PURE__ */ new Set();
-      for (let t = 0; t < s.length; t++) {
-        if (i.has(s[t].target)) continue;
-        i.add(s[t].target);
-        const h = r.get(s[t].target);
-        h == null || h.forEach((d) => d(s[t], l));
+function N(e) {
+  let t = !1, l = [];
+  const c = /* @__PURE__ */ new Map(), a = new (e || window.ResizeObserver)((i, d) => {
+    l = l.concat(i);
+    function r() {
+      const o = /* @__PURE__ */ new Set();
+      for (let s = 0; s < l.length; s++) {
+        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], d));
       }
-      s = [], c = !1;
+      l = [], t = !1;
     }
-    c || window.requestAnimationFrame(n), c = !0;
+    t || window.requestAnimationFrame(r), t = !0;
   });
   return {
     observer: a,
-    subscribe(o, l) {
-      var n;
-      a.observe(o);
-      const i = (n = r.get(o)) !== null && n !== void 0 ? n : [];
-      i.push(l), r.set(o, i);
+    subscribe(i, d) {
+      var r;
+      a.observe(i);
+      const o = (r = c.get(i)) !== null && r !== void 0 ? r : [];
+      o.push(d), c.set(i, o);
     },
-    unsubscribe(o, l) {
-      var n;
-      const i = (n = r.get(o)) !== null && n !== void 0 ? n : [];
-      if (i.length === 1) {
-        a.unobserve(o), r.delete(o);
+    unsubscribe(i, d) {
+      var r;
+      const o = (r = c.get(i)) !== null && r !== void 0 ? r : [];
+      if (o.length === 1) {
+        a.unobserve(i), c.delete(i);
         return;
       }
-      const t = i.indexOf(l);
-      t !== -1 && i.splice(t, 1), r.set(o, i);
+      const s = o.indexOf(d);
+      s !== -1 && o.splice(s, 1), c.set(i, o);
     }
   };
 }
-let g;
-const U = (e) => g || (g = j(e)), V = L(/* @__PURE__ */ u("path", {
+let C;
+const Q = (e) => C || (C = N(e)), X = T(/* @__PURE__ */ n("path", {
   d: "M3 18h18v-2H3zm0-5h18v-2H3zm0-7v2h18V6z"
-}), "Menu"), B = f("div")(() => ({
-  ...m`
-    display: flex;
-    flex-direction: row;
-    padding: 4px 16px;
-    background-color: transparent;
-    align-items: center;
-    justify-content: space-between;
-    gap: 1.5rem;
-  `
-})), F = f("img")(({ width: e }) => ({
+}), "Menu"), M = h("div")(
+  ({ mobile: e, shadowSecondary: t }) => ({
+    ...b`
+      z-index: 1313;
+      display: flex;
+      flex-direction: row;
+      padding: 4px 16px;
+      background-color: transparent;
+      align-items: center;
+      justify-content: space-between;
+      gap: ${e ? "8px" : "1.5rem"};
+      box-shadow: ${e && t};
+    `
+  })
+), O = h("img")(({ width: e }) => ({
   width: `${e}px`
-})), q = f("div")(({ height: e }) => ({
-  ...m`
+})), I = h("div")(({ height: e }) => ({
+  ...b`
     display: flex;
     gap: 1rem;
     height: ${e}px;
   `
-})), P = f("div")(({ width: e, loggedIn: c }) => ({
-  ...m`
+})), Y = h("div")(({ width: e, loggedIn: t }) => ({
+  ...b`
     width: ${e}px;
     display: flex;
     justify-content: center;
     align-items: flex-end;
-    flex-direction: ${c ? "column" : "column-reverse"};
+    flex-direction: ${t ? "column" : "column-reverse"};
     flex-shrink: 0;
     * {
       white-space: nowrap;
     }
   `
-})), W = f("div")(({ visible: e }) => ({
-  ...m`
+})), L = h("div")(({ visible: e }) => ({
+  ...b`
     z-index: ${e ? 1 : 0};
     opacity: ${e ? 1 : 0};
     pointer-events: ${e ? "auto" : "none"};
     position: ${e ? "relative" : "absolute"};
   `
-})), D = f("div")(() => ({
-  ...m`
+})), R = h("div")(() => ({
+  ...b`
     display: flex;
     width: 1360px;
     max-width: 100%;
@@ -115,41 +119,48 @@ const U = (e) => g || (g = j(e)), V = L(/* @__PURE__ */ u("path", {
       width: 100%;
     }
   `
-})), ee = ({
-  loggedIn: e,
-  logoProps: c,
-  iconColor: s,
-  hamburgerMenu: r,
-  onHamburgerMenuClick: a,
+})), le = ({
+  isMobile: e,
+  loggedIn: t,
+  logoProps: l,
+  iconColor: c,
+  themeProps: a,
+  hamburgerMenu: i,
+  avatarColors: d,
+  onHamburgerMenuClick: r,
   onUserMenuClick: o,
-  onLogin: l
+  onLogin: s
 }) => {
-  const [n, i] = v(0), [t, h] = v(null), [d, z] = v(null), { logoSrc: $, logoWidth: k, logoHeight: x } = c;
-  M(() => {
-    t && t.clientWidth > n && i(t.clientWidth), d && d.clientWidth > n && i(d.clientWidth);
-  }, [t, d]);
-  const S = (p) => {
-    p != null && p.clientWidth && p.clientWidth > n && i(p.clientWidth);
+  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 U = (m) => {
+    m != null && m.clientWidth && m.clientWidth > u && p(m.clientWidth);
   };
-  return H(t, () => S(t)), /* @__PURE__ */ b(B, { children: [
-    /* @__PURE__ */ b(q, { height: x, children: [
-      /* @__PURE__ */ u(F, { src: $, height: `${x}px`, width: k }),
-      r && /* @__PURE__ */ u(C, { variant: "icon", onClick: a, color: s, children: /* @__PURE__ */ u(V, {}) })
+  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, { ...d, onClick: o })
+  ] }) : /* @__PURE__ */ x(M, { children: [
+    /* @__PURE__ */ x(I, { height: g, children: [
+      /* @__PURE__ */ n(O, { src: $, height: `${g}px`, width: y }),
+      i && /* @__PURE__ */ n(k, { variant: "icon", onClick: r, color: c, children: /* @__PURE__ */ n(X, {}) })
     ] }),
-    /* @__PURE__ */ u(D, { children: /* @__PURE__ */ u(y, { placeholder: "Search..." }) }),
-    /* @__PURE__ */ b(P, { width: n, loggedIn: !!e, children: [
-      /* @__PURE__ */ u(W, { visible: !!e, ref: h, children: /* @__PURE__ */ u(
-        I,
+    /* @__PURE__ */ n(R, { children: /* @__PURE__ */ n(W, { ...z, placeholder: "Search..." }) }),
+    /* @__PURE__ */ x(Y, { width: u, loggedIn: !!t, children: [
+      /* @__PURE__ */ n(L, { visible: !!t, ref: _, children: /* @__PURE__ */ n(
+        q,
         {
           id: "accountMenuContainer",
-          component: /* @__PURE__ */ u(O, { onClick: o }),
+          component: /* @__PURE__ */ n(E, { ...d, onClick: o }),
           label: "Welcome, User"
         }
       ) }),
-      /* @__PURE__ */ u(W, { visible: !e, ref: z, children: /* @__PURE__ */ u(C, { id: "loginButtonContainer", onClick: l, children: "Log In" }) })
+      /* @__PURE__ */ n(L, { visible: !t, ref: A, children: /* @__PURE__ */ n(k, { id: "loginButtonContainer", onClick: s, children: "Log In" }) })
     ] })
   ] });
 };
 export {
-  ee as default
+  le as default
 };

package/Avatar/index.d.ts

@@ -1 +1 @@
-export { default } from './Avatar';
+export { default, type AvatarProps } from './Avatar';

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/Input/Input.d.ts

@@ -1,6 +1,9 @@
 import { TextFieldProps as MuiTextFieldProps } from '@mui/material/TextField';
 export type InputProps = Omit<MuiTextFieldProps, 'variant'> & {
     variant?: 'outlined' | 'simple';
+    shadowTertiary?: string;
+    borderColor?: string;
+    borderFocusColor?: string;
 };
 export declare const Input: React.FC<InputProps>;
 export default Input;

package/Nav/Nav.d.ts

@@ -1,19 +1,10 @@
-export interface TemplateThemeProps {
-    backgroundPrimary: string;
-    backgroundSecondary: string;
-    backgroundTertiary: string;
-    borderPrimary: string;
-    iconPrimary: string;
-    highlightPrimary: string;
-    highlightSecondary: string;
-    highlightTertiary: string;
-    shadowPrimary: string;
-}
+import { TemplateThemeProps } from '../../../../../../../../../src/components/theme';
 export interface NavItemProps {
     label?: string;
     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 {
@@ -21,7 +12,8 @@ export interface NavProps {
     activeRoute?: string;
     navWidth?: string;
     isTablet?: boolean;
-    themeColors: Pick<TemplateThemeProps, 'highlightPrimary' | 'highlightTertiary' | 'iconPrimary'>;
+    isMobile?: boolean;
+    themeColors: Pick<TemplateThemeProps, 'highlightPrimary' | 'highlightTertiary' | 'iconPrimary' | 'shadowSecondary' | 'scrollColor'>;
 }
 export declare const Nav: React.FC<NavProps>;
 export default Nav;