jcicl 0.0.34 → 0.0.37

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

@@ -1,19 +1,20 @@
-import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import { n as r } from "../../.chunks/emotion-styled.browser.esm.js";
+import { jsxs as n, jsx as o } from "react/jsx-runtime";
+import { n as t } from "../../.chunks/emotion-styled.browser.esm.js";
 import { c as a } from "../../.chunks/emotion-react.browser.esm.js";
-import o from "../../theme.js";
-import { l as n } from "../../.chunks/jocologo.js";
-const s = r("img")({
+import e from "../../theme.js";
+import { l as r } from "../../.chunks/jocologo.js";
+import s from "../../animation/ZoomEntrance/ZoomEntrance.js";
+const i = t("img")({
   ...a`
     height: 6em;
     padding: 1.5em;
     will-change: filter;
     transition: filter 300ms;
     position: relative;
-    filter: drop-shadow(0 0 2em ${o.colors.gold}aa);
+    filter: drop-shadow(0 0 2em ${e.colors.gold}aa);
 
     :hover {
-      filter: drop-shadow(0 0 2em ${o.colors.gold});
+      filter: drop-shadow(0 0 2em ${e.colors.gold});
     }
 
     @keyframes logo-left {
@@ -40,20 +41,20 @@ const s = r("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);
     }
   `
-}), i = r("img")({
+}), l = t("img")({
   ...a`
     height: 6em;
     padding: 1.5em;
     will-change: filter;
     transition: filter 300ms;
     position: relative;
-    filter: drop-shadow(0 0 2em ${o.colors.green}aa);
+    filter: drop-shadow(0 0 2em ${e.colors.green}aa);
 
     :hover {
-      filter: drop-shadow(0 0 2em ${o.colors.green});
+      filter: drop-shadow(0 0 2em ${e.colors.green});
     }
 
     @keyframes logo-right {
@@ -80,30 +81,13 @@ const s = r("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);
     }
   `
-}), l = r("div")({
-  ...a`
-    @keyframes open {
-      0% {
-        transform: scale(0);
-        border-radius: 100%;
-      }
-      100% {
-        transform: scale(1);
-        border-radius: 0;
-      }
-    }
-
-    @media (prefers-reduced-motion: no-preference) {
-      animation: open 1.3s ease-in-out;
-    }
-  `
-}), h = () => /* @__PURE__ */ t(l, { children: [
-  /* @__PURE__ */ e("a", { href: "https://int.johnsoncountyiowa.gov/home", target: "_blank", children: /* @__PURE__ */ e(s, { src: n, className: "logo logo-left", alt: "Johnson County, Iowa logo" }) }),
-  /* @__PURE__ */ e("a", { href: "https://int.johnsoncountyiowa.gov/home", target: "_blank", children: /* @__PURE__ */ e(i, { src: n, className: "logo logo-right", alt: "Johnson County, Iowa logo" }) })
+}), p = () => /* @__PURE__ */ n(s, { children: [
+  /* @__PURE__ */ o("a", { href: "https://int.johnsoncountyiowa.gov/home", target: "_blank", children: /* @__PURE__ */ o(i, { src: r, className: "logo logo-left", alt: "Johnson County, Iowa logo" }) }),
+  /* @__PURE__ */ o("a", { href: "https://int.johnsoncountyiowa.gov/home", target: "_blank", children: /* @__PURE__ */ o(l, { src: r, className: "logo logo-right", alt: "Johnson County, Iowa logo" }) })
 ] });
 export {
-  h as default
+  p as default
 };

package/index.d.ts

@@ -1,3 +1,4 @@
+export { ZoomEntrance } from './animation';
 export { Avatar, AvatarWithImage, Button, Divider, Flex, Grid, ListButton } from './base';
 export { List, LogoLoop, WithLabel } from './composite';
 export { AppHeader, Nav } from './supercomposite';

package/index.js

@@ -1,29 +1,31 @@
-import { default as e } from "./base/Avatar/Avatar.js";
-import { AvatarWithImage as f } from "./base/AvatarWithImage/AvatarWithImage.js";
-import { Button as m } from "./base/Button/Button.js";
-import { Divider as d } from "./base/Divider/Divider.js";
-import { default as s } from "./base/Flex/Flex.js";
-import { Grid as i } from "./base/Grid/Grid.js";
+import { default as e } from "./animation/ZoomEntrance/ZoomEntrance.js";
+import { default as f } from "./base/Avatar/Avatar.js";
+import { AvatarWithImage as m } from "./base/AvatarWithImage/AvatarWithImage.js";
+import { Button as d } from "./base/Button/Button.js";
+import { Divider as s } from "./base/Divider/Divider.js";
+import { default as i } from "./base/Flex/Flex.js";
+import { Grid as L } from "./base/Grid/Grid.js";
 import "./base/Input/Input.js";
-import { default as n } from "./base/ListButton/ListButton.js";
-import { default as A } from "./composite/List/List.js";
-import { default as h } from "./composite/LogoLoop/LogoLoop.js";
-import { default as W } from "./composite/WithLabel/WithLabel.js";
-import { default as C } from "./supercomposite/AppHeader/AppHeader.js";
+import { default as A } from "./base/ListButton/ListButton.js";
+import { default as h } from "./composite/List/List.js";
+import { default as W } from "./composite/LogoLoop/LogoLoop.js";
+import { default as c } from "./composite/WithLabel/WithLabel.js";
+import { default as D } from "./supercomposite/AppHeader/AppHeader.js";
 import { Nav as F } from "./supercomposite/Nav/Nav.js";
 import { default as H } from "./templates/AppContainer/AppContainer.js";
 export {
   H as AppContainer,
-  C as AppHeader,
-  e as Avatar,
-  f as AvatarWithImage,
-  m as Button,
-  d as Divider,
-  s as Flex,
-  i as Grid,
-  A as List,
-  n as ListButton,
-  h as LogoLoop,
+  D as AppHeader,
+  f as Avatar,
+  m as AvatarWithImage,
+  d as Button,
+  s as Divider,
+  i as Flex,
+  L as Grid,
+  h as List,
+  A as ListButton,
+  W as LogoLoop,
   F as Nav,
-  W as WithLabel
+  c as WithLabel,
+  e as ZoomEntrance
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jcicl",
   "private": false,
-  "version": "0.0.34",
+  "version": "0.0.37",
   "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 = {