jcicl 0.0.112 → 0.0.116

package/AppHeader/AppHeader.d.ts

@@ -1,9 +1,17 @@
+export interface CustomLogoProps {
+    logoSrc: string;
+    logoWidth: number;
+    logoHeight: number;
+}
 export interface AppHeaderProps {
     loggedIn?: boolean;
     hamburgerMenu?: boolean;
     onLogin?: () => void;
+    onLogout?: () => void;
     onUserMenuClick?: () => void;
     onHamburgerMenuClick?: () => void;
+    logoProps: CustomLogoProps;
+    iconColor: string;
 }
 declare const AppHeader: React.FC<AppHeaderProps>;
 export default AppHeader;

package/AppHeader/AppHeader.js

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

package/AppHeader/index.d.ts

@@ -1 +1 @@
-export { default, type AppHeaderProps } from './AppHeader';
+export { default, type AppHeaderProps, type CustomLogoProps } from './AppHeader';

package/Button/Button.d.ts

@@ -1,7 +1,9 @@
 import { ButtonProps as MuiButtonProps } from '@mui/material/Button/Button';
-export interface ButtonProps extends Omit<MuiButtonProps, 'variant' | 'size'> {
+export interface ButtonProps extends Omit<MuiButtonProps, 'variant' | 'size' | 'color'> {
     variant?: 1 | 2 | 'unstyled' | 'icon';
     size?: number;
+    color?: string;
+    highlightColor?: string;
 }
 export declare const Button: React.FC<ButtonProps & {
     children: React.ReactNode;

package/Button/Button.js

@@ -1,34 +1,34 @@
-import { jsxs as F, jsx as s } from "react/jsx-runtime";
-import * as g from "react";
-import { g as U, a as _, s as l, r as H, c as i, f as A, u as q, b as h, P as t, d as J, e as b } from "../.chunks/DefaultPropsProvider.js";
+import { jsxs as F, 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 e from "../theme.js";
+import s from "../theme.js";
 function Y(o) {
   return U("MuiButton", o);
 }
-const c = _("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"]), I = /* @__PURE__ */ g.createContext({});
-process.env.NODE_ENV !== "production" && (I.displayName = "ButtonGroupContext");
-const O = /* @__PURE__ */ g.createContext(void 0);
+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 {
     color: n,
     disableElevation: a,
     fullWidth: r,
-    size: d,
-    variant: p,
-    classes: u
+    size: e,
+    variant: l,
+    classes: p
   } = o, f = {
-    root: ["root", p, `${p}${i(n)}`, `size${i(d)}`, `${p}Size${i(d)}`, `color${i(n)}`, a && "disableElevation", r && "fullWidth"],
+    root: ["root", l, `${l}${i(n)}`, `size${i(e)}`, `${l}Size${i(e)}`, `color${i(n)}`, a && "disableElevation", r && "fullWidth"],
     label: ["label"],
-    startIcon: ["icon", "startIcon", `iconSize${i(d)}`],
-    endIcon: ["icon", "endIcon", `iconSize${i(d)}`]
-  }, y = J(f, Y, u);
+    startIcon: ["icon", "startIcon", `iconSize${i(e)}`],
+    endIcon: ["icon", "endIcon", `iconSize${i(e)}`]
+  }, y = J(f, Y, p);
   return {
-    ...u,
+    ...p,
     // forward the focused, disabled, etc. classes to the ButtonBase
     ...y
   };
@@ -59,7 +59,7 @@ const Z = (o) => {
       fontSize: 22
     }
   }
-}], oo = l(S, {
+}], oo = c(S, {
   shouldForwardProp: (o) => H(o) || o === "classes",
   name: "MuiButton",
   slot: "Root",
@@ -85,7 +85,7 @@ const Z = (o) => {
     "&:hover": {
       textDecoration: "none"
     },
-    [`&.${c.disabled}`]: {
+    [`&.${u.disabled}`]: {
       color: (o.vars || o).palette.action.disabled
     },
     variants: [{
@@ -106,10 +106,10 @@ const Z = (o) => {
         "&:active": {
           boxShadow: (o.vars || o).shadows[8]
         },
-        [`&.${c.focusVisible}`]: {
+        [`&.${u.focusVisible}`]: {
           boxShadow: (o.vars || o).shadows[6]
         },
-        [`&.${c.disabled}`]: {
+        [`&.${u.disabled}`]: {
           color: (o.vars || o).palette.action.disabled,
           boxShadow: (o.vars || o).shadows[0],
           backgroundColor: (o.vars || o).palette.action.disabledBackground
@@ -125,7 +125,7 @@ const Z = (o) => {
         borderColor: "var(--variant-outlinedBorder, currentColor)",
         backgroundColor: "var(--variant-outlinedBg)",
         color: "var(--variant-outlinedColor)",
-        [`&.${c.disabled}`]: {
+        [`&.${u.disabled}`]: {
           border: `1px solid ${(o.vars || o).palette.action.disabledBackground}`
         }
       }
@@ -236,13 +236,13 @@ const Z = (o) => {
         "&:hover": {
           boxShadow: "none"
         },
-        [`&.${c.focusVisible}`]: {
+        [`&.${u.focusVisible}`]: {
           boxShadow: "none"
         },
         "&:active": {
           boxShadow: "none"
         },
-        [`&.${c.disabled}`]: {
+        [`&.${u.disabled}`]: {
           boxShadow: "none"
         }
       }
@@ -255,7 +255,7 @@ const Z = (o) => {
       }
     }]
   };
-})), to = l("span", {
+})), to = c("span", {
   name: "MuiButton",
   slot: "StartIcon",
   overridesResolver: (o, n) => {
@@ -276,7 +276,7 @@ const Z = (o) => {
       marginLeft: -2
     }
   }, ...R]
-}), ao = l("span", {
+}), ao = c("span", {
   name: "MuiButton",
   slot: "EndIcon",
   overridesResolver: (o, n) => {
@@ -297,9 +297,9 @@ const Z = (o) => {
       marginRight: -2
     }
   }, ...R]
-}), k = /* @__PURE__ */ g.forwardRef(function(n, a) {
-  const r = g.useContext(I), d = g.useContext(O), p = A(r, n), u = q({
-    props: p,
+}), k = /* @__PURE__ */ x.forwardRef(function(n, a) {
+  const r = x.useContext(h), e = x.useContext(O), l = A(r, n), p = q({
+    props: l,
     name: "MuiButton"
   }), {
     children: f,
@@ -317,8 +317,8 @@ const Z = (o) => {
     type: w,
     variant: V = "text",
     ...j
-  } = u, x = {
-    ...u,
+  } = p, g = {
+    ...p,
     color: y,
     component: B,
     disabled: z,
@@ -328,22 +328,22 @@ const Z = (o) => {
     size: M,
     type: w,
     variant: V
-  }, v = Z(x), G = m && /* @__PURE__ */ s(to, {
+  }, v = Z(g), G = m && /* @__PURE__ */ d(to, {
     className: v.startIcon,
-    ownerState: x,
+    ownerState: g,
     children: m
-  }), L = C && /* @__PURE__ */ s(ao, {
+  }), L = C && /* @__PURE__ */ d(ao, {
     className: v.endIcon,
-    ownerState: x,
+    ownerState: g,
     children: C
-  }), D = d || "";
+  }), D = e || "";
   return /* @__PURE__ */ F(oo, {
-    ownerState: x,
-    className: h(r.className, v.root, N, D),
+    ownerState: g,
+    className: I(r.className, v.root, N, D),
     component: B,
     disabled: z,
     focusRipple: !$,
-    focusVisibleClassName: h(v.focusVisible, P),
+    focusVisibleClassName: I(v.focusVisible, P),
     ref: a,
     type: w,
     ...j,
@@ -445,71 +445,75 @@ process.env.NODE_ENV !== "production" && (k.propTypes = {
    */
   variant: t.oneOfType([t.oneOf(["contained", "outlined", "text"]), t.string])
 });
-const E = l(k)`
+const E = c(k)`
   text-transform: none;
   &:disabled {
     opacity: 0.5;
-    color: ${e.colors.black};
+    color: ${s.colors.black};
     display: flex;
     justify-content: center;
     align-items: center;
   }
-`, no = l(E)`
-  background-color: ${e.colors.green};
+`, no = c(E)`
+  background-color: ${s.colors.green};
   border-radius: 0;
   height: 2.5rem;
   border: 2px solid transparent;
-  color: ${e.colors.white};
+  color: ${s.colors.white};
   transition: 313ms all ease-in;
   border-radius: 32px;
   font-weight: 400;
   padding: 0.75rem 2rem;
   font-size: 1rem;
-  box-shadow: ${e.boxShadow.gray63};
+  box-shadow: ${s.boxShadow.gray63};
   &:hover,
   :focus-visible {
-    background-color: ${e.colors.darkGreen};
-    box-shadow: ${e.boxShadow.black63};
+    background-color: ${s.colors.darkGreen};
+    box-shadow: ${s.boxShadow.black63};
   }
   &:disabled {
-    background-color: ${e.colors.darkGreen};
+    background-color: ${s.colors.darkGreen};
   }
-`, ro = l(E)`
-  color: ${e.colors.black};
-  border: 3px solid ${e.colors.blue};
+`, ro = c(E)`
+  color: ${s.colors.black};
+  border: 3px solid ${s.colors.blue};
   padding: 0.5rem 2rem;
-`, eo = l(S)`
+`, eo = c(S)`
   border-radius: 8px;
-`, io = l(S)(({ size: o }) => ({
-  ...X`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: transparent;
-    transition: 313ms all ease-in-out;
+`, 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 ${e.colors.dandelion}) drop-shadow(0 0 6px ${e.colors.dandelion})
-          drop-shadow(0 0 6px ${e.colors.dandelion}) drop-shadow(0 0 6px ${e.colors.dandelion});
+      &: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});
+        }
       }
-    }
 
-    svg {
-      transition: 313ms all ease-in-out;
-      fill: ${e.colors.darkGreen};
-      width: ${o}px;
-      height: ${o}px;
-    }
-  `
-})), go = ({
+      svg {
+        transition: 313ms all ease-in-out;
+        fill: ${n};
+        width: ${o}px;
+        height: ${o}px;
+      }
+    `
+  })
+), xo = ({
   variant: o = 1,
   size: n = 50,
-  children: a,
-  ...r
-}) => o === "unstyled" ? /* @__PURE__ */ s(eo, { ...r, children: a }) : o === 2 ? /* @__PURE__ */ s(ro, { ...r, children: /* @__PURE__ */ s("span", { children: a }) }) : o === "icon" ? /* @__PURE__ */ s(io, { ...{ size: n }, ...r, children: a }) : /* @__PURE__ */ s(no, { ...r, children: /* @__PURE__ */ s("span", { children: a }) });
+  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 }) });
 export {
-  go as Button,
-  go as default
+  xo as Button,
+  xo as default
 };

package/Nav/Nav.d.ts

@@ -1,3 +1,14 @@
+export interface TemplateThemeProps {
+    backgroundPrimary: string;
+    backgroundSecondary: string;
+    backgroundTertiary: string;
+    borderPrimary: string;
+    iconPrimary: string;
+    highlightPrimary: string;
+    highlightSecondary: string;
+    highlightTertiary: string;
+    shadowPrimary: string;
+}
 export interface NavItemProps {
     label?: string;
     icon?: React.ReactNode;
@@ -10,6 +21,7 @@ export interface NavProps {
     activeRoute?: string;
     navWidth?: string;
     isTablet?: boolean;
+    themeColors: Pick<TemplateThemeProps, 'highlightPrimary' | 'highlightTertiary' | 'iconPrimary'>;
 }
 export declare const Nav: React.FC<NavProps>;
 export default Nav;