jcicl 0.0.36 → 0.0.38

package/base/ScrollContainer/index.d.ts

@@ -0,0 +1 @@
+export { default, type ScrollContainerProps } from './ScrollContainer';

package/base/ScrollContainer/index.js

@@ -0,0 +1,4 @@
+import { default as o } from "./ScrollContainer.js";
+export {
+  o as default
+};

package/composite/List/List.js

@@ -1,7 +1,7 @@
 import { jsx as s } from "react/jsx-runtime";
 import { n as i } from "../../.chunks/emotion-styled.browser.esm.js";
 import n from "../../theme.js";
-const p = i("div")(
+const f = i("div")(
   ({ width: o, borderColor: t, bordered: r, backgroundColor: e }) => ({
     display: "flex",
     flexDirection: "column",
@@ -13,7 +13,7 @@ const p = i("div")(
       width: o
     }
   })
-), f = i("div")(
+), x = i("div")(
   ({ padding: o, borderColor: t, bordered: r }) => ({
     padding: o,
     ...r && {
@@ -23,7 +23,7 @@ const p = i("div")(
       }
     }
   })
-), b = ({
+), y = ({
   bordered: o = !1,
   width: t,
   padding: r = "0",
@@ -32,8 +32,8 @@ const p = i("div")(
   children: m
 }) => {
   const a = { width: t, borderColor: e, bordered: o, backgroundColor: l }, c = { padding: r, borderColor: e, bordered: o };
-  return /* @__PURE__ */ s(p, { ...a, children: m.map((d) => /* @__PURE__ */ s(f, { ...c, children: d })) });
+  return /* @__PURE__ */ s(f, { ...a, children: m.map((d, p) => /* @__PURE__ */ s(x, { ...c, children: d }, p)) });
 };
 export {
-  b as default
+  y as default
 };

package/composite/LogoLoop/LogoLoop.js

@@ -41,7 +41,7 @@ const i = t("img")({
     }
 
     @media (prefers-reduced-motion: no-preference) {
-      animation: logo-left infinite 9s linear;
+      animation: logo-left infinite 9s cubic-bezier(0.3, 0.4, 0.7, 0.6);
     }
   `
 }), l = t("img")({
@@ -81,7 +81,7 @@ const i = t("img")({
     }
 
     @media (prefers-reduced-motion: no-preference) {
-      animation: logo-right infinite 9s linear;
+      animation: logo-right infinite 9s cubic-bezier(0.3, 0.4, 0.7, 0.6);
     }
   `
 }), p = () => /* @__PURE__ */ n(s, { children: [

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jcicl",
   "private": false,
-  "version": "0.0.36",
+  "version": "0.0.38",
   "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",
@@ -18,6 +18,7 @@
     "@fontsource/material-icons": "^5.1.0",
     "@fontsource/roboto": "^5.1.0",
     "@mui/icons-material": "^6.1.3",
-    "@mui/material": "^6.1.1"
+    "@mui/material": "^6.1.1",
+    "overlayscrollbars-react": "^0.5.6"
   }
 }

package/supercomposite/AppHeader/AppHeader.js

@@ -1,8 +1,8 @@
 import { jsxs as i, jsx as t } from "react/jsx-runtime";
-import { useState as s } from "react";
+import { useState as a } from "react";
 import { n } from "../../.chunks/emotion-styled.browser.esm.js";
 import e from "../../theme.js";
-import { l as a } from "../../.chunks/jocologo.js";
+import { l as s } from "../../.chunks/jocologo.js";
 import { Input as m } from "../../base/Input/Input.js";
 import { Button as c } from "../../base/Button/Button.js";
 import d from "../../base/Avatar/Avatar.js";
@@ -13,15 +13,15 @@ const l = n("div")({
   backgroundColor: "transparent",
   alignItems: "center",
   justifyContent: "space-between",
-  gridTemplateColumns: `minmax(${e.constants.navWidth + e.constants.actionsPaneWidth}px, 1fr) 2fr 1fr`
+  gridTemplateColumns: `minmax(${e.constants.navDefaultWidth + e.constants.actionsPaneWidth}px, 1fr) 2fr 1fr`
 }), p = n("img")({
   width: "36px"
 }), f = n("div")({}), g = n("div")({
   justifySelf: "end"
 }), y = () => {
-  const [r, o] = s(!1);
+  const [r, o] = a(!1);
   return /* @__PURE__ */ i(l, { children: [
-    /* @__PURE__ */ t(f, { children: /* @__PURE__ */ t(p, { src: a }) }),
+    /* @__PURE__ */ t(f, { children: /* @__PURE__ */ t(p, { src: s }) }),
     /* @__PURE__ */ t(m, { placeholder: "Search..." }),
     /* @__PURE__ */ t(g, { children: r ? /* @__PURE__ */ t(d, { onClick: () => o(!1) }) : /* @__PURE__ */ t(c, { onClick: () => o(!0), children: "Log In" }) })
   ] });

package/supercomposite/Nav/Nav.d.ts

@@ -8,6 +8,7 @@ export interface NavItemProps {
 export interface NavProps {
     navItems: NavItemProps[];
     activeRoute?: string;
+    navWidth?: string;
 }
 export declare const Nav: React.FC<NavProps>;
 export default Nav;

package/supercomposite/Nav/Nav.js

@@ -1,28 +1,29 @@
-import { jsx as i, jsxs as u } from "react/jsx-runtime";
-import { useState as m } from "react";
-import { n as s, i as f } from "../../.chunks/emotion-styled.browser.esm.js";
-import e from "../../theme.js";
-import { B as x } from "../../.chunks/ButtonBase.js";
-const g = s(x, {
-  shouldForwardProp: (o) => f(o)
-})(({ active: o }) => ({
+import { jsx as r, jsxs as u } from "react/jsx-runtime";
+import { useState as x } from "react";
+import { n as s, i as h } from "../../.chunks/emotion-styled.browser.esm.js";
+import o from "../../theme.js";
+import g from "../../base/ScrollContainer/ScrollContainer.js";
+import { B as v } from "../../.chunks/ButtonBase.js";
+const C = s(v, {
+  shouldForwardProp: (t) => h(t)
+})(({ active: t }) => ({
   display: "flex",
   flexDirection: "column",
   alignItems: "center",
   justifyContent: "center",
   padding: "0 8px 8px 8px",
   transition: "313ms all ease-in-out",
-  backgroundColor: o ? e.colors.sunlight : "transparent",
-  boxShadow: o ? e.boxShadow.darkGreen : "none",
+  backgroundColor: t ? o.colors.sunlight : "transparent",
+  boxShadow: t ? o.boxShadow.darkGreen : "none",
   "&:hover, :focus-visible": {
     svg: {
-      backgroundColor: e.colors.sunlight
+      backgroundColor: o.colors.sunlight
     }
   },
   svg: {
     fontSize: "2.1rem",
-    fill: e.colors.darkGreen,
-    backgroundColor: o ? e.colors.sunlight : "transparent",
+    fill: o.colors.darkGreen,
+    backgroundColor: t ? o.colors.sunlight : "transparent",
     borderRadius: "50%",
     padding: "8px",
     display: "flex",
@@ -34,10 +35,10 @@ const g = s(x, {
     fontFamily: "Roboto, sans-serif",
     fontSize: "12px",
     fontWeight: "bold",
-    color: e.colors.darkGreen,
+    color: o.colors.darkGreen,
     textAlign: "center"
   }
-})), h = s("div")({
+})), k = s("div")(({ navWidth: t }) => ({
   display: "flex",
   flexDirection: "column",
   backgroundColor: "transparent",
@@ -45,41 +46,23 @@ const g = s(x, {
   justifyContent: "flex-start",
   maxHeight: "100%",
   flexShrink: 0,
-  overflowX: "hidden",
-  overflowY: "auto",
   gap: "1rem",
-  transition: "313ms all ease-in-out",
-  "@media screen and (-webkit-min-device-pixel-ratio:0)": {
-    backgroundColor: "transparent",
-    "-webkit-background-clip": "text",
-    transition: "313ms all ease-in-out",
-    "::-webkit-scrollbar": {
-      width: "6px",
-      height: "6px",
-      overflow: "visible"
-    },
-    "::-webkit-scrollbar-track": {
-      display: "none"
-    },
-    "::-webkit-scrollbar-thumb": {
-      backgroundColor: "inherit",
-      borderRadius: "6px"
-    },
-    "&:hover": {
-      backgroundColor: e.colors.darkGreenO99
-    }
-  }
-}), S = ({ navItems: o, activeRoute: n }) => {
-  const [a, l] = m(""), c = (t, r) => {
-    l(t), r();
-  };
-  return /* @__PURE__ */ i(h, { children: o.map(({ icon: t, label: r = "", onClick: d = () => {
-  }, ...p }) => /* @__PURE__ */ u(g, { ...p, active: n ? n === r : a === r, onClick: () => c(r, d), children: [
-    t,
-    /* @__PURE__ */ i("span", { children: r })
-  ] }, r)) });
+  width: t
+})), H = ({
+  navItems: t,
+  activeRoute: i,
+  navWidth: a = `${o.constants.navDefaultWidth}px`
+}) => {
+  const [l, c] = x(""), d = (e, n) => {
+    c(e), n();
+  }, p = { navWidth: a };
+  return /* @__PURE__ */ r(g, { style: { maxHeight: `calc(100vh - ${o.constants.appHeaderHeight}px)` }, children: /* @__PURE__ */ r(k, { ...p, children: t.map(({ icon: e, label: n = "", onClick: m = () => {
+  }, ...f }) => /* @__PURE__ */ u(C, { ...f, active: i ? i === n : l === n, onClick: () => d(n, m), children: [
+    e,
+    /* @__PURE__ */ r("span", { children: n })
+  ] }, n)) }) });
 };
 export {
-  S as Nav,
-  S as default
+  H as Nav,
+  H as default
 };

package/theme.d.ts

@@ -1,21 +1,25 @@
 export interface ThemeColors {
     black: string;
     blue: string;
+    burgundy: string;
     charcoal: string;
     darkBlue: string;
+    darkerGreen: string;
     darkGreen: string;
     darkGreenO22: string;
     darkGreenO99: string;
     darkRed: string;
     gold: string;
     gray: string;
-    veryLightGray: string;
-    veryLightGrayO33: string;
     grayO44: string;
     green: string;
+    indigo: string;
     midnight: string;
     mint: string;
     sunlight: string;
+    purple: string;
+    veryLightGray: string;
+    veryLightGrayO33: string;
     white: string;
     whiteGreen: string;
     whiteGreenA: string;
@@ -26,16 +30,15 @@ export interface ThemeBoxShadows extends Partial<ThemeColors> {
     gray63?: string;
     greenThick?: string;
 }
+export interface ThemeConstants {
+    actionsPaneWidth: number;
+    appHeaderHeight: number;
+    navDefaultWidth: number;
+}
 export interface Theme {
     boxShadow: ThemeBoxShadows;
     colors: ThemeColors;
-    constants: {
-        actionsPaneWidth: number;
-        appHeaderHeight: number;
-        navWidth: number;
-        oldAppBarHeight: number;
-        oldNavBarWidth: number;
-    };
+    constants: ThemeConstants;
 }
 declare const theme: Theme;
 export default theme;

package/theme.js

@@ -3,8 +3,10 @@ const e = {
   colors: {
     black: "black",
     blue: "#1976d2",
+    burgundy: "#920920",
     charcoal: "#404040",
     darkBlue: "#10517c",
+    darkerGreen: "#124000",
     darkGreen: "#005c00",
     darkGreenO22: "#005c0022",
     darkGreenO99: "#005c0099",
@@ -13,21 +15,21 @@ const e = {
     gray: "#727272",
     grayO44: "#72727244",
     green: "#009200",
+    indigo: "#4105c1",
     midnight: "#131313",
     mint: "#a4edb4",
+    purple: "#920092",
     sunlight: "#faf9e8",
+    veryLightGray: "#fafafa",
+    veryLightGrayO33: "#fafafa33",
     white: "white",
     whiteGreen: "#f2fcf5",
-    whiteGreenA: "#dae8de",
-    veryLightGray: "#fafafa",
-    veryLightGrayO33: "#fafafa33"
+    whiteGreenA: "#dae8de"
   },
   constants: {
     appHeaderHeight: 54,
     actionsPaneWidth: 201,
-    navWidth: 75,
-    oldAppBarHeight: 92,
-    oldNavBarWidth: 290
+    navDefaultWidth: 75
   }
 };
 e.boxShadow = {