jcicl 0.0.118 → 0.0.120

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 B, { useState as w, useLayoutEffect as F } 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 = B[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), d = G(t);
+  return D(() => {
+    let i = !1;
+    const a = e && "current" in e ? e.current : e;
+    if (!a) return J;
+    function r(o, s) {
+      i || d.current(o, s);
     }
-    return r.subscribe(l, n), () => {
-      o = !0, r.unsubscribe(l, n);
+    return c.subscribe(a, r), () => {
+      i = !0, c.unsubscribe(a, r);
     };
-  }, [e, r, a]), r.observer;
+  }, [e, c, d]), 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(), d = new (e || window.ResizeObserver)((i, a) => {
+    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], a));
       }
-      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);
+    observer: d,
+    subscribe(i, a) {
+      var r;
+      d.observe(i);
+      const o = (r = c.get(i)) !== null && r !== void 0 ? r : [];
+      o.push(a), 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, a) {
+      var r;
+      const o = (r = c.get(i)) !== null && r !== void 0 ? r : [];
+      if (o.length === 1) {
+        d.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(a);
+      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 $;
+const Q = (e) => $ || ($ = 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: d,
+  hamburgerMenu: i,
+  avatarColors: a,
+  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: C, logoWidth: y, logoHeight: g } = l, { shadowSecondary: H, shadowTertiary: j, iconPrimary: P, borderPrimary: U } = d, z = { shadowTertiary: j, borderColor: U, iconPrimary: P };
+  F(() => {
+    f && f.clientWidth > u && p(f.clientWidth), v && v.clientWidth > u && p(v.clientWidth);
+  }, [f, v]);
+  const V = (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, () => 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 }) }),
+    /* @__PURE__ */ n(R, { children: /* @__PURE__ */ n(W, { ...z, placeholder: "Search..." }) }),
+    /* @__PURE__ */ n(E, { ...a, onClick: o })
+  ] }) : /* @__PURE__ */ x(M, { children: [
+    /* @__PURE__ */ x(I, { height: g, children: [
+      /* @__PURE__ */ n(O, { src: C, 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, { ...a, 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/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,14 +1,4 @@
-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;
@@ -21,7 +11,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;

package/Nav/Nav.js

@@ -1,32 +1,35 @@
-import { jsx as a, jsxs as y } from "react/jsx-runtime";
-import { useState as v } from "react";
-import { n as c, i as C } from "../.chunks/emotion-styled.browser.esm.js";
-import d from "../theme.js";
-import S from "../ScrollContainer/ScrollContainer.js";
-import { B as k } from "../.chunks/ButtonBase.js";
-const w = c(k, {
-  shouldForwardProp: (o) => C(o)
-})(({ active: o, isTablet: t, highlight1: r, highlight3: i, iconColor: e }) => ({
+import { jsx as a, 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 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 }) => ({
   display: "flex",
-  flexDirection: t ? "row" : "column",
+  flexDirection: n ? "row" : "column",
   alignItems: "center",
-  justifyContent: t ? "flex-start" : "center",
+  justifyContent: n ? "flex-start" : "center",
   width: "100%",
-  padding: t ? "16px" : "0 8px 8px 8px",
+  padding: n ? "16px" : "0 8px 8px 8px",
   transition: "313ms all ease-in-out",
-  backgroundColor: o ? r : "transparent",
-  boxShadow: o ? e : "none",
-  ...t && {
+  backgroundColor: r && !c ? t : "transparent",
+  boxShadow: r ? e : "none",
+  ...n && {
     gap: "0.5rem"
   },
+  ...c && {
+    padding: 0
+  },
   "&:hover, :focus-visible": {
     svg: {
-      ...!t && {
-        backgroundColor: r
+      ...!n && {
+        backgroundColor: t
       }
     },
-    ...t && {
-      boxShadow: d.boxShadows.darkGreen,
+    ...n && {
+      boxShadow: d,
       backgroundColor: i
     }
   },
@@ -47,51 +50,89 @@ const w = c(k, {
     fontWeight: "bold",
     color: e,
     textAlign: "center",
-    ...t && {
+    ...n && {
       fontSize: "1.5rem",
       fontWeight: "500"
     }
   }
-})), P = c("div")(({ navWidth: o, isTablet: t }) => ({
+})), v = y("div")(({ navWidth: r, isTablet: n, isMobile: t, shadowSecondary: i }) => ({
   display: "flex",
-  flexDirection: "column",
+  flexDirection: t ? "row" : "column",
   backgroundColor: "transparent",
   alignItems: "center",
-  justifyContent: "flex-start",
+  justifyContent: t ? "space-between" : "flex-start",
   maxHeight: "100%",
   flexShrink: 0,
-  gap: t ? 0 : "1rem",
-  width: o
-})), W = ({
-  navItems: o,
-  activeRoute: t,
-  navWidth: r = `${d.constants.navDefaultWidth}px`,
+  gap: n ? 0 : "1rem",
+  width: r,
+  boxSizing: "border-box",
+  ...t && {
+    boxShadow: i,
+    zIndex: 1313
+  },
+  ...t && {
+    padding: "4px 8px"
+  }
+})), $ = ({
+  navItems: r,
+  activeRoute: n,
+  navWidth: t = `${P.constants.navDefaultWidth}px`,
   isTablet: i,
-  themeColors: e
+  isMobile: e,
+  themeColors: c
 }) => {
-  const [l, p] = v(""), m = (s, n) => {
-    p(s), n();
-  }, { highlightPrimary: f, highlightTertiary: h, iconPrimary: g } = e;
-  return /* @__PURE__ */ a(S, { direction: "vertical", width: r, styles: { minWidth: r }, children: /* @__PURE__ */ a(P, { ...{ navWidth: r, isTablet: i }, children: o.map(({ icon: s, label: n = "", onClick: x = () => {
-  }, ...u }) => /* @__PURE__ */ y(
-    w,
+  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(
+    C,
     {
-      ...u,
-      active: t ? t === n : l === n,
-      onClick: () => m(n, x),
+      ...l,
+      active: n ? n === o : d === o,
+      onClick: () => g(o, p),
       isTablet: i,
       highlight1: f,
-      highlight3: h,
-      iconColor: g,
+      highlight3: m,
+      iconColor: x,
+      shadowSecondary: h,
+      isMobile: !0,
       children: [
         s,
-        /* @__PURE__ */ a("span", { children: n })
+        /* @__PURE__ */ a("span", { children: o })
       ]
     },
-    n
-  )) }) });
+    o
+  )) }) : /* @__PURE__ */ a(
+    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(
+        C,
+        {
+          ...l,
+          active: n ? n === o : d === o,
+          onClick: () => g(o, p),
+          isTablet: i,
+          highlight1: f,
+          highlight3: m,
+          iconColor: x,
+          shadowSecondary: h,
+          children: [
+            s,
+            /* @__PURE__ */ a("span", { children: o })
+          ]
+        },
+        o
+      )) })
+    }
+  );
 };
 export {
-  W as Nav,
-  W as default
+  $ as Nav,
+  $ as default
 };

package/Nav/index.d.ts

@@ -1 +1 @@
-export { default, type NavProps, type NavItemProps, type TemplateThemeProps } from './Nav';
+export { default, type NavProps, type NavItemProps } from './Nav';

package/ScrollContainer/ScrollContainer.d.ts

@@ -4,6 +4,7 @@ export interface ScrollContainerProps {
     /** Defines which direction scrolling is enabled for */
     direction?: 'vertical' | 'horizontal' | 'all' | 'none';
     styles?: React.CSSProperties;
+    scrollColor?: string;
 }
 declare const ScrollContainer: React.FC<ScrollContainerProps & {
     children: React.ReactNode;