jcicl 0.0.112 → 0.0.114

package/AppHeader/AppHeader.d.ts

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

package/AppHeader/AppHeader.js

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

package/Button/Button.d.ts

@@ -1,7 +1,8 @@
 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;
 }
 export declare const Button: React.FC<ButtonProps & {
     children: React.ReactNode;

package/Button/Button.js

@@ -1,6 +1,6 @@
-import { jsxs as F, jsx as s } from "react/jsx-runtime";
+import { jsxs as F, jsx as l } 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 { g as U, a as _, s as d, r as H, c as s, f as A, u as q, b as h, 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";
@@ -9,23 +9,23 @@ import e 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({});
+const p = _("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);
 process.env.NODE_ENV !== "production" && (O.displayName = "ButtonGroupButtonContext");
 const Z = (o) => {
   const {
-    color: n,
-    disableElevation: a,
-    fullWidth: r,
-    size: d,
-    variant: p,
+    color: a,
+    disableElevation: r,
+    fullWidth: n,
+    size: i,
+    variant: c,
     classes: u
   } = o, f = {
-    root: ["root", p, `${p}${i(n)}`, `size${i(d)}`, `${p}Size${i(d)}`, `color${i(n)}`, a && "disableElevation", r && "fullWidth"],
+    root: ["root", c, `${c}${s(a)}`, `size${s(i)}`, `${c}Size${s(i)}`, `color${s(a)}`, r && "disableElevation", n && "fullWidth"],
     label: ["label"],
-    startIcon: ["icon", "startIcon", `iconSize${i(d)}`],
-    endIcon: ["icon", "endIcon", `iconSize${i(d)}`]
+    startIcon: ["icon", "startIcon", `iconSize${s(i)}`],
+    endIcon: ["icon", "endIcon", `iconSize${s(i)}`]
   }, y = J(f, Y, u);
   return {
     ...u,
@@ -59,20 +59,20 @@ const Z = (o) => {
       fontSize: 22
     }
   }
-}], oo = l(S, {
+}], oo = d(S, {
   shouldForwardProp: (o) => H(o) || o === "classes",
   name: "MuiButton",
   slot: "Root",
-  overridesResolver: (o, n) => {
+  overridesResolver: (o, a) => {
     const {
-      ownerState: a
+      ownerState: r
     } = o;
-    return [n.root, n[a.variant], n[`${a.variant}${i(a.color)}`], n[`size${i(a.size)}`], n[`${a.variant}Size${i(a.size)}`], a.color === "inherit" && n.colorInherit, a.disableElevation && n.disableElevation, a.fullWidth && n.fullWidth];
+    return [a.root, a[r.variant], a[`${r.variant}${s(r.color)}`], a[`size${s(r.size)}`], a[`${r.variant}Size${s(r.size)}`], r.color === "inherit" && a.colorInherit, r.disableElevation && a.disableElevation, r.fullWidth && a.fullWidth];
   }
 })(K(({
   theme: o
 }) => {
-  const n = o.palette.mode === "light" ? o.palette.grey[300] : o.palette.grey[800], a = o.palette.mode === "light" ? o.palette.grey.A100 : o.palette.grey[700];
+  const a = o.palette.mode === "light" ? o.palette.grey[300] : o.palette.grey[800], r = o.palette.mode === "light" ? o.palette.grey.A100 : o.palette.grey[700];
   return {
     ...o.typography.button,
     minWidth: 64,
@@ -85,7 +85,7 @@ const Z = (o) => {
     "&:hover": {
       textDecoration: "none"
     },
-    [`&.${c.disabled}`]: {
+    [`&.${p.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}`]: {
+        [`&.${p.focusVisible}`]: {
           boxShadow: (o.vars || o).shadows[6]
         },
-        [`&.${c.disabled}`]: {
+        [`&.${p.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}`]: {
+        [`&.${p.disabled}`]: {
           border: `1px solid ${(o.vars || o).palette.action.disabledBackground}`
         }
       }
@@ -138,22 +138,22 @@ const Z = (o) => {
         color: "var(--variant-textColor)",
         backgroundColor: "var(--variant-textBg)"
       }
-    }, ...Object.entries(o.palette).filter(Q()).map(([r]) => ({
+    }, ...Object.entries(o.palette).filter(Q()).map(([n]) => ({
       props: {
-        color: r
+        color: n
       },
       style: {
-        "--variant-textColor": (o.vars || o).palette[r].main,
-        "--variant-outlinedColor": (o.vars || o).palette[r].main,
-        "--variant-outlinedBorder": o.vars ? `rgba(${o.vars.palette[r].mainChannel} / 0.5)` : b(o.palette[r].main, 0.5),
-        "--variant-containedColor": (o.vars || o).palette[r].contrastText,
-        "--variant-containedBg": (o.vars || o).palette[r].main,
+        "--variant-textColor": (o.vars || o).palette[n].main,
+        "--variant-outlinedColor": (o.vars || o).palette[n].main,
+        "--variant-outlinedBorder": o.vars ? `rgba(${o.vars.palette[n].mainChannel} / 0.5)` : b(o.palette[n].main, 0.5),
+        "--variant-containedColor": (o.vars || o).palette[n].contrastText,
+        "--variant-containedBg": (o.vars || o).palette[n].main,
         "@media (hover: hover)": {
           "&:hover": {
-            "--variant-containedBg": (o.vars || o).palette[r].dark,
-            "--variant-textBg": o.vars ? `rgba(${o.vars.palette[r].mainChannel} / ${o.vars.palette.action.hoverOpacity})` : b(o.palette[r].main, o.palette.action.hoverOpacity),
-            "--variant-outlinedBorder": (o.vars || o).palette[r].main,
-            "--variant-outlinedBg": o.vars ? `rgba(${o.vars.palette[r].mainChannel} / ${o.vars.palette.action.hoverOpacity})` : b(o.palette[r].main, o.palette.action.hoverOpacity)
+            "--variant-containedBg": (o.vars || o).palette[n].dark,
+            "--variant-textBg": o.vars ? `rgba(${o.vars.palette[n].mainChannel} / ${o.vars.palette.action.hoverOpacity})` : b(o.palette[n].main, o.palette.action.hoverOpacity),
+            "--variant-outlinedBorder": (o.vars || o).palette[n].main,
+            "--variant-outlinedBg": o.vars ? `rgba(${o.vars.palette[n].mainChannel} / ${o.vars.palette.action.hoverOpacity})` : b(o.palette[n].main, o.palette.action.hoverOpacity)
           }
         }
       }
@@ -164,10 +164,10 @@ const Z = (o) => {
       style: {
         color: "inherit",
         borderColor: "currentColor",
-        "--variant-containedBg": o.vars ? o.vars.palette.Button.inheritContainedBg : n,
+        "--variant-containedBg": o.vars ? o.vars.palette.Button.inheritContainedBg : a,
         "@media (hover: hover)": {
           "&:hover": {
-            "--variant-containedBg": o.vars ? o.vars.palette.Button.inheritContainedHoverBg : a,
+            "--variant-containedBg": o.vars ? o.vars.palette.Button.inheritContainedHoverBg : r,
             "--variant-textBg": o.vars ? `rgba(${o.vars.palette.text.primaryChannel} / ${o.vars.palette.action.hoverOpacity})` : b(o.palette.text.primary, o.palette.action.hoverOpacity),
             "--variant-outlinedBg": o.vars ? `rgba(${o.vars.palette.text.primaryChannel} / ${o.vars.palette.action.hoverOpacity})` : b(o.palette.text.primary, o.palette.action.hoverOpacity)
           }
@@ -236,13 +236,13 @@ const Z = (o) => {
         "&:hover": {
           boxShadow: "none"
         },
-        [`&.${c.focusVisible}`]: {
+        [`&.${p.focusVisible}`]: {
           boxShadow: "none"
         },
         "&:active": {
           boxShadow: "none"
         },
-        [`&.${c.disabled}`]: {
+        [`&.${p.disabled}`]: {
           boxShadow: "none"
         }
       }
@@ -255,14 +255,14 @@ const Z = (o) => {
       }
     }]
   };
-})), to = l("span", {
+})), to = d("span", {
   name: "MuiButton",
   slot: "StartIcon",
-  overridesResolver: (o, n) => {
+  overridesResolver: (o, a) => {
     const {
-      ownerState: a
+      ownerState: r
     } = o;
-    return [n.startIcon, n[`iconSize${i(a.size)}`]];
+    return [a.startIcon, a[`iconSize${s(r.size)}`]];
   }
 })({
   display: "inherit",
@@ -276,14 +276,14 @@ const Z = (o) => {
       marginLeft: -2
     }
   }, ...R]
-}), ao = l("span", {
+}), ao = d("span", {
   name: "MuiButton",
   slot: "EndIcon",
-  overridesResolver: (o, n) => {
+  overridesResolver: (o, a) => {
     const {
-      ownerState: a
+      ownerState: r
     } = o;
-    return [n.endIcon, n[`iconSize${i(a.size)}`]];
+    return [a.endIcon, a[`iconSize${s(r.size)}`]];
   }
 })({
   display: "inherit",
@@ -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__ */ g.forwardRef(function(a, r) {
+  const n = g.useContext(I), i = g.useContext(O), c = A(n, a), u = q({
+    props: c,
     name: "MuiButton"
   }), {
     children: f,
@@ -316,7 +316,7 @@ const Z = (o) => {
     startIcon: m,
     type: w,
     variant: V = "text",
-    ...j
+    ...G
   } = u, x = {
     ...u,
     color: y,
@@ -328,27 +328,27 @@ const Z = (o) => {
     size: M,
     type: w,
     variant: V
-  }, v = Z(x), G = m && /* @__PURE__ */ s(to, {
+  }, v = Z(x), j = m && /* @__PURE__ */ l(to, {
     className: v.startIcon,
     ownerState: x,
     children: m
-  }), L = C && /* @__PURE__ */ s(ao, {
+  }), L = C && /* @__PURE__ */ l(ao, {
     className: v.endIcon,
     ownerState: x,
     children: C
-  }), D = d || "";
+  }), D = i || "";
   return /* @__PURE__ */ F(oo, {
     ownerState: x,
-    className: h(r.className, v.root, N, D),
+    className: h(n.className, v.root, N, D),
     component: B,
     disabled: z,
     focusRipple: !$,
     focusVisibleClassName: h(v.focusVisible, P),
-    ref: a,
+    ref: r,
     type: w,
-    ...j,
+    ...G,
     classes: v,
-    children: [G, f, L]
+    children: [j, f, L]
   });
 });
 process.env.NODE_ENV !== "production" && (k.propTypes = {
@@ -445,7 +445,7 @@ process.env.NODE_ENV !== "production" && (k.propTypes = {
    */
   variant: t.oneOfType([t.oneOf(["contained", "outlined", "text"]), t.string])
 });
-const E = l(k)`
+const E = d(k)`
   text-transform: none;
   &:disabled {
     opacity: 0.5;
@@ -454,7 +454,7 @@ const E = l(k)`
     justify-content: center;
     align-items: center;
   }
-`, no = l(E)`
+`, no = d(E)`
   background-color: ${e.colors.green};
   border-radius: 0;
   height: 2.5rem;
@@ -474,41 +474,44 @@ const E = l(k)`
   &:disabled {
     background-color: ${e.colors.darkGreen};
   }
-`, ro = l(E)`
+`, ro = d(E)`
   color: ${e.colors.black};
   border: 3px solid ${e.colors.blue};
   padding: 0.5rem 2rem;
-`, eo = l(S)`
+`, eo = d(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 = d(S)(
+  ({ size: o, color: a = e.colors.darkGreen }) => ({
+    ...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 ${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});
+        }
       }
-    }
 
-    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: ${a};
+        width: ${o}px;
+        height: ${o}px;
+      }
+    `
+  })
+), go = ({
   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 }) });
+  size: a = 50,
+  color: r = e.colors.darkGreen,
+  children: n,
+  ...i
+}) => o === "unstyled" ? /* @__PURE__ */ l(eo, { ...i, children: n }) : o === 2 ? /* @__PURE__ */ l(ro, { ...i, children: /* @__PURE__ */ l("span", { children: n }) }) : o === "icon" ? /* @__PURE__ */ l(io, { ...{ size: a, color: r }, ...i, children: n }) : /* @__PURE__ */ l(no, { ...i, children: /* @__PURE__ */ l("span", { children: n }) });
 export {
   go as Button,
   go 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: TemplateThemeProps;
 }
 export declare const Nav: React.FC<NavProps>;
 export default Nav;