jcicl 0.0.112 → 0.0.116

package/Nav/Nav.js

@@ -1,38 +1,38 @@
-import { jsx as s, jsxs as x } from "react/jsx-runtime";
-import { useState as u } from "react";
-import { n as c, i as h } from "../.chunks/emotion-styled.browser.esm.js";
-import r from "../theme.js";
-import g from "../ScrollContainer/ScrollContainer.js";
+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 C = c(k, {
-  shouldForwardProp: (n) => h(n)
-})(({ active: n, isTablet: o }) => ({
+const w = c(k, {
+  shouldForwardProp: (o) => C(o)
+})(({ active: o, isTablet: t, highlight1: r, highlight3: i, iconColor: e }) => ({
   display: "flex",
-  flexDirection: o ? "row" : "column",
+  flexDirection: t ? "row" : "column",
   alignItems: "center",
-  justifyContent: o ? "flex-start" : "center",
+  justifyContent: t ? "flex-start" : "center",
   width: "100%",
-  padding: o ? "16px" : "0 8px 8px 8px",
+  padding: t ? "16px" : "0 8px 8px 8px",
   transition: "313ms all ease-in-out",
-  backgroundColor: n ? r.colors.sunlight : "transparent",
-  boxShadow: n ? r.boxShadow.darkGreen : "none",
-  ...o && {
+  backgroundColor: o ? r : "transparent",
+  boxShadow: o ? e : "none",
+  ...t && {
     gap: "0.5rem"
   },
   "&:hover, :focus-visible": {
     svg: {
-      ...!o && {
-        backgroundColor: r.colors.sunlight
+      ...!t && {
+        backgroundColor: r
       }
     },
-    ...o && {
-      boxShadow: r.boxShadow.darkGreen,
-      backgroundColor: `${r.colors.dandelion}99`
+    ...t && {
+      boxShadow: d.boxShadow.darkGreen,
+      backgroundColor: i
     }
   },
   svg: {
     fontSize: "2.1rem",
-    fill: r.colors.darkGreen,
+    fill: e,
     backgroundColor: "transparent",
     borderRadius: "50%",
     padding: "8px",
@@ -45,14 +45,14 @@ const C = c(k, {
     fontFamily: "Roboto, sans-serif",
     fontSize: "12px",
     fontWeight: "bold",
-    color: r.colors.darkGreen,
+    color: e,
     textAlign: "center",
-    ...o && {
+    ...t && {
       fontSize: "1.5rem",
       fontWeight: "500"
     }
   }
-})), v = c("div")(({ navWidth: n, isTablet: o }) => ({
+})), P = c("div")(({ navWidth: o, isTablet: t }) => ({
   display: "flex",
   flexDirection: "column",
   backgroundColor: "transparent",
@@ -60,34 +60,38 @@ const C = c(k, {
   justifyContent: "flex-start",
   maxHeight: "100%",
   flexShrink: 0,
-  gap: o ? 0 : "1rem",
-  width: n
-})), z = ({
-  navItems: n,
-  activeRoute: o,
-  navWidth: e = `${r.constants.navDefaultWidth}px`,
-  isTablet: a
+  gap: t ? 0 : "1rem",
+  width: o
+})), W = ({
+  navItems: o,
+  activeRoute: t,
+  navWidth: r = `${d.constants.navDefaultWidth}px`,
+  isTablet: i,
+  themeColors: e
 }) => {
-  const [d, l] = u(""), p = (i, t) => {
-    l(i), t();
-  };
-  return /* @__PURE__ */ s(g, { direction: "vertical", width: e, styles: { minWidth: e }, children: /* @__PURE__ */ s(v, { ...{ navWidth: e, isTablet: a }, children: n.map(({ icon: i, label: t = "", onClick: f = () => {
-  }, ...m }) => /* @__PURE__ */ x(
-    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,
     {
-      ...m,
-      active: o ? o === t : d === t,
-      onClick: () => p(t, f),
-      isTablet: a,
+      ...u,
+      active: t ? t === n : l === n,
+      onClick: () => m(n, x),
+      isTablet: i,
+      highlight1: f,
+      highlight3: h,
+      iconColor: g,
       children: [
-        i,
-        /* @__PURE__ */ s("span", { children: t })
+        s,
+        /* @__PURE__ */ a("span", { children: n })
       ]
     },
-    t
+    n
   )) }) });
 };
 export {
-  z as Nav,
-  z as default
+  W as Nav,
+  W as default
 };

package/Nav/index.d.ts

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jcicl",
   "private": false,
-  "version": "0.0.112",
+  "version": "0.0.116",
   "description": "Component library for the websites of Johnson County Iowa",
   "license": "MIT",
   "homepage": "https://devops.jc.net/JCIT/Business%20Solutions%20Delivery/_git/JCComponentLibrary?path=%2FREADME.md&version=GBmaster",

package/theme.d.ts

@@ -3,6 +3,8 @@ export interface ThemeColors {
     blue: string;
     burgundy: string;
     charcoal: string;
+    cobalt: string;
+    cornflower: string;
     dandelion: string;
     darkBlue: string;
     darkerGreen: string;
@@ -13,16 +15,20 @@ export interface ThemeColors {
     gold: string;
     gold2: string;
     gray: string;
+    gray2: string;
     grayO44: string;
     green: string;
     indigo: string;
     lighterRed: string;
     lightRed: string;
+    lovemist: string;
     maroon: string;
     midnight: string;
     mint: string;
+    ocean: string;
     purple: string;
     sage: string;
+    sky: string;
     sunlight: string;
     veryLightGray: string;
     veryLightGrayO33: string;

package/theme.js

@@ -5,6 +5,8 @@ const e = {
     blue: "#1976d2",
     burgundy: "#920920",
     charcoal: "#404040",
+    cobalt: "#022961",
+    cornflower: "#6aa7fc",
     dandelion: "#fffacd",
     darkBlue: "#10517c",
     darkerGreen: "#124000",
@@ -15,16 +17,20 @@ const e = {
     gold: "#fab62d",
     gold2: "#fcba03",
     gray: "#727272",
+    gray2: "#dddddd",
     grayO44: "#72727244",
     green: "#009200",
     indigo: "#4105c1",
     lighterRed: "#ffcccc",
     lightRed: "#eda4a4",
+    lovemist: "#90c5f7",
     maroon: "#5c0000",
     midnight: "#131313",
     mint: "#a4edb4",
+    ocean: "#279fcf",
     purple: "#920092",
     sage: "#bdd5c1",
+    sky: "#b3e0f2",
     sunlight: "#faf9e8",
     veryLightGray: "#fafafa",
     veryLightGrayO33: "#fafafa33",