jcicl 0.0.132 → 0.0.133

package/AppContainer/AppContainer.d.ts

@@ -3,7 +3,7 @@ import { AppHeaderProps, CustomLogoProps } from '../../../../../../../../../src/
 import { NavProps, NavItemProps } from '../../../../../../../../../src/components/supercomposite/Nav/Nav';
 import { IconProps } from '../../../../../../../../../src/components/base/Icon';
 import { TemplateThemeProps } from '../../../../../../../../../src/components/theme';
-type ReducedAppHeaderProps = Omit<AppHeaderProps, 'logoProps' | 'iconColor | loggedIn'>;
+type ReducedAppHeaderProps = Omit<AppHeaderProps, 'logoProps' | 'iconColor' | 'loggedIn' | 'themeProps'>;
 interface UserInfo {
     name: string;
     email: string;

package/AppHeader/AppHeader.d.ts

@@ -1,3 +1,4 @@
+import { SearchFilterProps } from '../../../../../../../../../src/components/composite/Search';
 import { IconProps } from '../../../../../../../../../src/components/base/Icon';
 import { TemplateThemeProps } from '../../../../../../../../../src/components/theme';
 export interface CustomLogoProps {
@@ -20,6 +21,7 @@ export interface AppHeaderProps {
     iconColors?: IconProps;
     userName?: string;
     userSettingsEnabled?: boolean;
+    searchFilters?: SearchFilterProps[];
 }
 declare const AppHeader: React.FC<AppHeaderProps>;
 export default AppHeader;

package/AppHeader/AppHeader.js

@@ -1,56 +1,56 @@
-import { jsx as t, jsxs as x } from "react/jsx-runtime";
-import * as k from "react";
-import G, { useState as $, useLayoutEffect as J } from "react";
-import { n as h } from "../.chunks/emotion-styled.browser.esm.js";
+import { jsx as t, jsxs as w } from "react/jsx-runtime";
+import * as W from "react";
+import J, { useState as $, useLayoutEffect as K } 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 { Search as M } from "../Search/Search.js";
-import { Button as E } from "../Button/Button.js";
-import H from "../Icon/Icon.js";
-import K from "../WithLabel/WithLabel.js";
-import { c as j } from "../.chunks/createSvgIcon.js";
-const N = G[typeof document < "u" && document.createElement !== void 0 ? "useLayoutEffect" : "useEffect"], Q = (e) => {
-  const n = k.useRef(e);
-  return k.useEffect(() => {
+import { Search as k } from "../Search/Search.js";
+import { Button as M } from "../Button/Button.js";
+import E from "../Icon/Icon.js";
+import N from "../WithLabel/WithLabel.js";
+import { c as A } from "../.chunks/createSvgIcon.js";
+const Q = J[typeof document < "u" && document.createElement !== void 0 ? "useLayoutEffect" : "useEffect"], X = (e) => {
+  const n = W.useRef(e);
+  return W.useEffect(() => {
     n.current = e;
   }), n;
 };
-function X() {
+function Y() {
 }
-function Y(e, n, l = {}) {
-  const c = ee(l.polyfill), u = Q(n);
-  return N(() => {
+function Z(e, n, l = {}) {
+  const c = te(l.polyfill), a = X(n);
+  return Q(() => {
     let i = !1;
     const d = e && "current" in e ? e.current : e;
-    if (!d) return X;
+    if (!d) return Y;
     function r(o, s) {
-      i || u.current(o, s);
+      i || a.current(o, s);
     }
     return c.subscribe(d, r), () => {
       i = !0, c.unsubscribe(d, r);
     };
-  }, [e, c, u]), c.observer;
+  }, [e, c, a]), c.observer;
 }
-function Z(e) {
+function ee(e) {
   let n = !1, l = [];
-  const c = /* @__PURE__ */ new Map(), u = new (e || window.ResizeObserver)((i, d) => {
+  const c = /* @__PURE__ */ new Map(), a = new (e || window.ResizeObserver)((i, d) => {
     l = l.concat(i);
     function r() {
       const o = /* @__PURE__ */ new Set();
       for (let s = 0; s < l.length; s++) {
         if (o.has(l[s].target)) continue;
         o.add(l[s].target);
-        const a = c.get(l[s].target);
-        a == null || a.forEach((w) => w(l[s], d));
+        const h = c.get(l[s].target);
+        h == null || h.forEach((b) => b(l[s], d));
       }
       l = [], n = !1;
     }
     n || window.requestAnimationFrame(r), n = !0;
   });
   return {
-    observer: u,
+    observer: a,
     subscribe(i, d) {
       var r;
-      u.observe(i);
+      a.observe(i);
       const o = (r = c.get(i)) !== null && r !== void 0 ? r : [];
       o.push(d), c.set(i, o);
     },
@@ -58,7 +58,7 @@ function Z(e) {
       var r;
       const o = (r = c.get(i)) !== null && r !== void 0 ? r : [];
       if (o.length === 1) {
-        u.unobserve(i), c.delete(i);
+        a.unobserve(i), c.delete(i);
         return;
       }
       const s = o.indexOf(d);
@@ -67,11 +67,11 @@ function Z(e) {
   };
 }
 let y;
-const ee = (e) => y || (y = Z(e)), te = j(/* @__PURE__ */ t("path", {
+const te = (e) => y || (y = ee(e)), ne = A(/* @__PURE__ */ t("path", {
   d: "M3 18h18v-2H3zm0-5h18v-2H3zm0-7v2h18V6z"
-}), "Menu"), I = j(/* @__PURE__ */ t("path", {
+}), "Menu"), H = A(/* @__PURE__ */ t("path", {
   d: "M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-2.1 2.1S9.9 9.16 9.9 8s.94-2.1 2.1-2.1m0 9c2.97 0 6.1 1.46 6.1 2.1v1.1H5.9V17c0-.64 3.13-2.1 6.1-2.1M12 4C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4m0 9c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4"
-}), "PersonOutlineOutlined"), L = h("div")(
+}), "PersonOutlineOutlined"), I = f("div")(
   ({ mobile: e, shadowSecondary: n }) => ({
     ...m`
       z-index: 1313;
@@ -85,15 +85,15 @@ const ee = (e) => y || (y = Z(e)), te = j(/* @__PURE__ */ t("path", {
       box-shadow: ${e && n};
     `
   })
-), R = h("img")(({ width: e }) => ({
+), L = f("img")(({ width: e }) => ({
   width: `${e}px`
-})), _ = h("div")(({ height: e }) => ({
+})), R = f("div")(({ height: e }) => ({
   ...m`
     display: flex;
     gap: 1rem;
     height: ${e}px;
   `
-})), ne = h("div")(({ width: e, loggedIn: n }) => ({
+})), ie = f("div")(({ width: e, loggedIn: n }) => ({
   ...m`
     width: ${e}px;
     display: flex;
@@ -105,14 +105,14 @@ const ee = (e) => y || (y = Z(e)), te = j(/* @__PURE__ */ t("path", {
       white-space: nowrap;
     }
   `
-})), P = h("div")(({ visible: e }) => ({
+})), _ = f("div")(({ visible: e }) => ({
   ...m`
     z-index: ${e ? 1 : 0};
     opacity: ${e ? 1 : 0};
     pointer-events: ${e ? "auto" : "none"};
     position: ${e ? "relative" : "absolute"};
   `
-})), A = h("div")(() => ({
+})), P = f("div")(() => ({
   ...m`
     display: flex;
     width: 1360px;
@@ -121,66 +121,74 @@ const ee = (e) => y || (y = Z(e)), te = j(/* @__PURE__ */ t("path", {
       width: 100%;
     }
   `
-})), fe = ({
+})), he = ({
   isMobile: e,
   loggedIn: n,
   logoProps: l,
   iconColor: c,
-  themeProps: u,
+  themeProps: a,
   hamburgerMenu: i,
   iconColors: d,
   userName: r = "User",
   userSettingsEnabled: o,
-  onHamburgerMenuClick: s,
-  onUserMenuClick: a,
-  onLogin: w,
-  onSearch: z = () => {
+  searchFilters: s,
+  onHamburgerMenuClick: h,
+  onUserMenuClick: b,
+  onLogin: j,
+  onSearch: V = () => {
   }
 }) => {
-  const [b, C] = $(0), [f, V] = $(null), [v, F] = $(null), { logoSrc: O, logoWidth: S, logoHeight: g } = l, { shadowSecondary: U, shadowTertiary: B, iconPrimary: q, borderPrimary: T } = u, W = { shadowTertiary: B, borderColor: T, borderFocusColor: q };
-  J(() => {
-    f && f.clientWidth > b && C(f.clientWidth), v && v.clientWidth > b && C(v.clientWidth);
-  }, [f, v]);
-  const D = (p) => {
-    p != null && p.clientWidth && p.clientWidth > b && C(p.clientWidth);
+  const [v, C] = $(0), [u, F] = $(null), [g, U] = $(null), { logoSrc: z, logoWidth: O, logoHeight: x } = l, { shadowSecondary: B, shadowTertiary: q, iconPrimary: T, borderPrimary: D } = a, S = {
+    shadowTertiary: q,
+    borderColor: D,
+    borderFocusColor: T,
+    filters: s,
+    onSearch: V,
+    placeholder: "Search..."
   };
-  return Y(f, () => D(f)), e ? /* @__PURE__ */ x(L, { mobile: !0, shadowSecondary: U, children: [
-    /* @__PURE__ */ t(_, { height: g, children: /* @__PURE__ */ t(R, { src: O, height: `${g}px`, width: S }) }),
-    /* @__PURE__ */ t(A, { children: /* @__PURE__ */ t(M, { onSearch: z, ...W, placeholder: "Search..." }) }),
+  K(() => {
+    u && u.clientWidth > v && C(u.clientWidth), g && g.clientWidth > v && C(g.clientWidth);
+  }, [u, g]);
+  const G = (p) => {
+    p != null && p.clientWidth && p.clientWidth > v && C(p.clientWidth);
+  };
+  return Z(u, () => G(u)), e ? /* @__PURE__ */ w(I, { mobile: !0, shadowSecondary: B, children: [
+    /* @__PURE__ */ t(R, { height: x, children: /* @__PURE__ */ t(L, { src: z, height: `${x}px`, width: O }) }),
+    /* @__PURE__ */ t(P, { children: /* @__PURE__ */ t(k, { ...S }) }),
     /* @__PURE__ */ t(
-      H,
+      E,
       {
-        icon: /* @__PURE__ */ t(I, {}),
+        icon: /* @__PURE__ */ t(H, {}),
         ...d,
-        onClick: o ? a : void 0
+        onClick: o ? b : void 0
       }
     )
-  ] }) : /* @__PURE__ */ x(L, { children: [
-    /* @__PURE__ */ x(_, { height: g, children: [
-      /* @__PURE__ */ t(R, { src: O, height: `${g}px`, width: S }),
-      i && /* @__PURE__ */ t(E, { variant: "icon", onClick: s, color: c, children: /* @__PURE__ */ t(te, {}) })
+  ] }) : /* @__PURE__ */ w(I, { children: [
+    /* @__PURE__ */ w(R, { height: x, children: [
+      /* @__PURE__ */ t(L, { src: z, height: `${x}px`, width: O }),
+      i && /* @__PURE__ */ t(M, { variant: "icon", onClick: h, color: c, children: /* @__PURE__ */ t(ne, {}) })
     ] }),
-    /* @__PURE__ */ t(A, { children: /* @__PURE__ */ t(M, { onSearch: z, ...W, placeholder: "Search..." }) }),
-    /* @__PURE__ */ x(ne, { width: b, loggedIn: !!n, children: [
-      /* @__PURE__ */ t(P, { visible: !!n, ref: V, children: /* @__PURE__ */ t(
-        K,
+    /* @__PURE__ */ t(P, { children: /* @__PURE__ */ t(k, { ...S }) }),
+    /* @__PURE__ */ w(ie, { width: v, loggedIn: !!n, children: [
+      /* @__PURE__ */ t(_, { visible: !!n, ref: F, children: /* @__PURE__ */ t(
+        N,
         {
           id: "accountMenuContainer",
           component: /* @__PURE__ */ t(
-            H,
+            E,
             {
-              icon: /* @__PURE__ */ t(I, {}),
+              icon: /* @__PURE__ */ t(H, {}),
               ...d,
-              onClick: o ? a : void 0
+              onClick: o ? b : void 0
             }
           ),
           label: `Hi, ${r}!`
         }
       ) }),
-      /* @__PURE__ */ t(P, { visible: !n, ref: F, children: /* @__PURE__ */ t(E, { id: "loginButtonContainer", onClick: w, children: "Log In" }) })
+      /* @__PURE__ */ t(_, { visible: !n, ref: U, children: /* @__PURE__ */ t(M, { id: "loginButtonContainer", onClick: j, children: "Log In" }) })
     ] })
   ] });
 };
 export {
-  fe as default
+  he as default
 };

package/Button/Button.d.ts

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

package/Button/Button.js

@@ -1,39 +1,39 @@
 import { jsxs as H, jsx as l } from "react/jsx-runtime";
 import * as g from "react";
-import { g as _, a as A, s as d, r as q, c, f as J, u as K, b as O, P as t, d as Q, e as v } from "../.chunks/DefaultPropsProvider.js";
+import { g as _, a as A, s as c, r as q, c as d, f as J, u as K, b as O, P as t, d as Q, e as v } from "../.chunks/DefaultPropsProvider.js";
 import { m as X } from "../.chunks/memoTheme.js";
 import { c as Y } from "../.chunks/createSimplePaletteValueFilter.js";
 import { B as S } from "../.chunks/ButtonBase.js";
 import { i as Z } from "../.chunks/emotion-styled.browser.esm.js";
-import { c as f } from "../.chunks/emotion-react.browser.esm.js";
-import n from "../theme.js";
+import { c as x } from "../.chunks/emotion-react.browser.esm.js";
+import r from "../theme.js";
 function oo(o) {
   return _("MuiButton", o);
 }
 const u = A("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"]), R = /* @__PURE__ */ g.createContext({});
 process.env.NODE_ENV !== "production" && (R.displayName = "ButtonGroupContext");
-const E = /* @__PURE__ */ g.createContext(void 0);
-process.env.NODE_ENV !== "production" && (E.displayName = "ButtonGroupButtonContext");
+const N = /* @__PURE__ */ g.createContext(void 0);
+process.env.NODE_ENV !== "production" && (N.displayName = "ButtonGroupButtonContext");
 const to = (o) => {
   const {
-    color: a,
-    disableElevation: r,
+    color: n,
+    disableElevation: a,
     fullWidth: e,
     size: i,
-    variant: s,
-    classes: p
-  } = o, y = {
-    root: ["root", s, `${s}${c(a)}`, `size${c(i)}`, `${s}Size${c(i)}`, `color${c(a)}`, r && "disableElevation", e && "fullWidth"],
+    variant: p,
+    classes: s
+  } = o, f = {
+    root: ["root", p, `${p}${d(n)}`, `size${d(i)}`, `${p}Size${d(i)}`, `color${d(n)}`, a && "disableElevation", e && "fullWidth"],
     label: ["label"],
-    startIcon: ["icon", "startIcon", `iconSize${c(i)}`],
-    endIcon: ["icon", "endIcon", `iconSize${c(i)}`]
-  }, B = Q(y, oo, p);
+    startIcon: ["icon", "startIcon", `iconSize${d(i)}`],
+    endIcon: ["icon", "endIcon", `iconSize${d(i)}`]
+  }, $ = Q(f, oo, s);
   return {
-    ...p,
+    ...s,
     // forward the focused, disabled, etc. classes to the ButtonBase
-    ...B
+    ...$
   };
-}, N = [{
+}, E = [{
   props: {
     size: "small"
   },
@@ -60,20 +60,20 @@ const to = (o) => {
       fontSize: 22
     }
   }
-}], ro = d(S, {
+}], ro = c(S, {
   shouldForwardProp: (o) => q(o) || o === "classes",
   name: "MuiButton",
   slot: "Root",
-  overridesResolver: (o, a) => {
+  overridesResolver: (o, n) => {
     const {
-      ownerState: r
+      ownerState: a
     } = o;
-    return [a.root, a[r.variant], a[`${r.variant}${c(r.color)}`], a[`size${c(r.size)}`], a[`${r.variant}Size${c(r.size)}`], r.color === "inherit" && a.colorInherit, r.disableElevation && a.disableElevation, r.fullWidth && a.fullWidth];
+    return [n.root, n[a.variant], n[`${a.variant}${d(a.color)}`], n[`size${d(a.size)}`], n[`${a.variant}Size${d(a.size)}`], a.color === "inherit" && n.colorInherit, a.disableElevation && n.disableElevation, a.fullWidth && n.fullWidth];
   }
 })(X(({
   theme: o
 }) => {
-  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];
+  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];
   return {
     ...o.typography.button,
     minWidth: 64,
@@ -165,10 +165,10 @@ const to = (o) => {
       style: {
         color: "inherit",
         borderColor: "currentColor",
-        "--variant-containedBg": o.vars ? o.vars.palette.Button.inheritContainedBg : a,
+        "--variant-containedBg": o.vars ? o.vars.palette.Button.inheritContainedBg : n,
         "@media (hover: hover)": {
           "&:hover": {
-            "--variant-containedBg": o.vars ? o.vars.palette.Button.inheritContainedHoverBg : r,
+            "--variant-containedBg": o.vars ? o.vars.palette.Button.inheritContainedHoverBg : a,
             "--variant-textBg": o.vars ? `rgba(${o.vars.palette.text.primaryChannel} / ${o.vars.palette.action.hoverOpacity})` : v(o.palette.text.primary, o.palette.action.hoverOpacity),
             "--variant-outlinedBg": o.vars ? `rgba(${o.vars.palette.text.primaryChannel} / ${o.vars.palette.action.hoverOpacity})` : v(o.palette.text.primary, o.palette.action.hoverOpacity)
           }
@@ -256,14 +256,14 @@ const to = (o) => {
       }
     }]
   };
-})), ao = d("span", {
+})), ao = c("span", {
   name: "MuiButton",
   slot: "StartIcon",
-  overridesResolver: (o, a) => {
+  overridesResolver: (o, n) => {
     const {
-      ownerState: r
+      ownerState: a
     } = o;
-    return [a.startIcon, a[`iconSize${c(r.size)}`]];
+    return [n.startIcon, n[`iconSize${d(a.size)}`]];
   }
 })({
   display: "inherit",
@@ -276,15 +276,15 @@ const to = (o) => {
     style: {
       marginLeft: -2
     }
-  }, ...N]
-}), no = d("span", {
+  }, ...E]
+}), no = c("span", {
   name: "MuiButton",
   slot: "EndIcon",
-  overridesResolver: (o, a) => {
+  overridesResolver: (o, n) => {
     const {
-      ownerState: r
+      ownerState: a
     } = o;
-    return [a.endIcon, a[`iconSize${c(r.size)}`]];
+    return [n.endIcon, n[`iconSize${d(a.size)}`]];
   }
 })({
   display: "inherit",
@@ -297,14 +297,14 @@ const to = (o) => {
     style: {
       marginRight: -2
     }
-  }, ...N]
-}), T = /* @__PURE__ */ g.forwardRef(function(a, r) {
-  const e = g.useContext(R), i = g.useContext(E), s = J(e, a), p = K({
-    props: s,
+  }, ...E]
+}), T = /* @__PURE__ */ g.forwardRef(function(n, a) {
+  const e = g.useContext(R), i = g.useContext(N), p = J(e, n), s = K({
+    props: p,
     name: "MuiButton"
   }), {
-    children: y,
-    color: B = "primary",
+    children: f,
+    color: $ = "primary",
     component: w = "button",
     className: P,
     disabled: m = !1,
@@ -316,11 +316,11 @@ const to = (o) => {
     size: j = "medium",
     startIcon: I,
     type: k,
-    variant: G = "text",
-    ...L
-  } = p, x = {
-    ...p,
-    color: B,
+    variant: F = "text",
+    ...G
+  } = s, y = {
+    ...s,
+    color: $,
     component: w,
     disabled: m,
     disableElevation: W,
@@ -328,28 +328,28 @@ const to = (o) => {
     fullWidth: M,
     size: j,
     type: k,
-    variant: G
-  }, b = to(x), F = I && /* @__PURE__ */ l(ao, {
+    variant: F
+  }, b = to(y), L = I && /* @__PURE__ */ l(ao, {
     className: b.startIcon,
-    ownerState: x,
+    ownerState: y,
     children: I
   }), D = h && /* @__PURE__ */ l(no, {
     className: b.endIcon,
-    ownerState: x,
+    ownerState: y,
     children: h
   }), U = i || "";
   return /* @__PURE__ */ H(ro, {
-    ownerState: x,
+    ownerState: y,
     className: O(e.className, b.root, P, U),
     component: w,
     disabled: m,
     focusRipple: !C,
     focusVisibleClassName: O(b.focusVisible, V),
-    ref: r,
+    ref: a,
     type: k,
-    ...L,
+    ...G,
     classes: b,
-    children: [F, y, D]
+    children: [L, f, D]
   });
 });
 process.env.NODE_ENV !== "production" && (T.propTypes = {
@@ -446,84 +446,84 @@ process.env.NODE_ENV !== "production" && (T.propTypes = {
    */
   variant: t.oneOfType([t.oneOf(["contained", "outlined", "text"]), t.string])
 });
-const $ = d(T)`
+const B = c(T)`
   text-transform: none;
   &:disabled {
     opacity: 0.5;
-    color: ${n.colors.black};
+    color: ${r.colors.black};
     display: flex;
     justify-content: center;
     align-items: center;
   }
-`, eo = d($)`
-  background-color: ${n.colors.green};
+`, eo = c(B)`
+  background-color: ${r.colors.green};
   border-radius: 0;
   height: 2.5rem;
   border: 2px solid transparent;
-  color: ${n.colors.white};
+  color: ${r.colors.white};
   transition: 313ms all ease-in;
   border-radius: 32px;
   font-weight: 400;
   padding: 0.75rem 2rem;
   font-size: 1rem;
-  box-shadow: ${n.boxShadows.gray63};
+  box-shadow: ${r.boxShadows.gray63};
   &:hover,
   :focus-visible {
-    background-color: ${n.colors.darkGreen};
-    box-shadow: ${n.boxShadows.black63};
+    background-color: ${r.colors.darkGreen};
+    box-shadow: ${r.boxShadows.black63};
   }
   &:disabled {
-    background-color: ${n.colors.darkGreen};
+    background-color: ${r.colors.darkGreen};
   }
-`, io = d($)`
-  color: ${n.colors.black};
-  border: 3px solid ${n.colors.blue};
+`, io = c(B)`
+  color: ${r.colors.black};
+  border: 3px solid ${r.colors.blue};
   padding: 0.5rem 2rem;
-`, z = d($)(({ width: o = "114px" }) => ({
-  ...f`
+`, z = c(B)(({ width: o = "114px" }) => ({
+  ...x`
     box-sizing: border-box;
-    background-color: ${n.colors.bibiBlue};
+    background-color: ${r.colors.bibiBlue};
     border-radius: 0;
     height: 47px;
     width: ${o};
     border: 2px solid transparent;
-    color: ${n.colors.white};
+    color: ${r.colors.white};
     transition: 108ms all ease-in;
     font-weight: 500;
     padding: 0;
     font-size: 19px;
     &:hover,
     :focus-visible {
-      background-color: ${n.colors.bibiBlueHover};
+      background-color: ${r.colors.bibiBlueHover};
     }
   `
-})), so = d(z)(({ active: o }) => ({
-  ...f`
-    background-color: ${o && n.colors.white};
-    color: ${o && n.colors.bibiBlue};
+})), so = c(z)(({ active: o }) => ({
+  ...x`
+    background-color: ${o && r.colors.white};
+    color: ${o && r.colors.bibiBlue};
     &:hover,
     :focus-visible {
-      background-color: ${n.colors.white};
-      color: ${n.colors.bibiBlue};
+      background-color: ${r.colors.white};
+      color: ${r.colors.bibiBlue};
     }
   `
-})), lo = d(z)(() => ({
-  ...f`
-    background-color: ${n.colors.white};
-    color: ${n.colors.bibiBlue};
+})), lo = c(z)(() => ({
+  ...x`
+    background-color: ${r.colors.white};
+    color: ${r.colors.bibiBlue};
     &:hover,
     :focus-visible {
-      background-color: ${n.colors.bibiBlue};
-      border: 2px solid ${n.colors.white};
-      color: ${n.colors.white};
+      background-color: ${r.colors.bibiBlue};
+      border: 2px solid ${r.colors.white};
+      color: ${r.colors.white};
     }
   `
-})), co = d(S)`
+})), co = c(S)`
   border-radius: 8px;
-`, po = d(S, {
+`, po = c(S, {
   shouldForwardProp: (o) => typeof o == "string" && Z(o)
-})(({ size: o, color: a, highlightColor: r }) => ({
-  ...f`
+})(({ size: o, color: n, highlightColor: a }) => ({
+  ...x`
     display: flex;
     align-items: center;
     justify-content: center;
@@ -533,26 +533,44 @@ const $ = d(T)`
     &:hover,
     :focus-visible {
       svg {
-        filter: drop-shadow(0 0 6px ${r}) drop-shadow(0 0 6px ${r})
-          drop-shadow(0 0 6px ${r}) drop-shadow(0 0 6px ${r});
+        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: ${a};
+      fill: ${n};
       width: ${o}px;
       height: ${o}px;
     }
   `
+})), uo = c(B)(({ active: o }) => ({
+  ...x`
+    box-sizing: border-box;
+    background-color: ${o ? r.colors.black : r.colors.white};
+    height: 28px;
+    border-radius: 18px;
+    padding: 0 29px;
+    border: 2px solid ${o ? "transparent" : r.colors.black};
+    color: ${o ? r.colors.white : r.colors.black};
+    transition: 108ms all ease-in;
+    font-weight: 500;
+
+    &:hover,
+    :focus-visible {
+      background-color: ${o ? r.colors.charcoal : r.colors.gray2};
+    }
+  `
 })), So = ({
   variant: o = 1,
-  size: a = 50,
-  color: r = n.colors.darkGreen,
-  highlightColor: e = n.colors.dandelion,
+  size: n = 50,
+  color: a = r.colors.darkGreen,
+  highlightColor: e = r.colors.dandelion,
   children: i,
+  active: p,
   ...s
-}) => o === "bibi" ? /* @__PURE__ */ l(z, { ...s, children: i }) : o === "bibiOutlined" ? /* @__PURE__ */ l(so, { ...s, children: i }) : o === "bibiInverse" ? /* @__PURE__ */ l(lo, { ...s, children: i }) : o === "unstyled" ? /* @__PURE__ */ l(co, { ...s, children: i }) : o === 2 ? /* @__PURE__ */ l(io, { ...s, children: /* @__PURE__ */ l("span", { children: i }) }) : o === "icon" ? /* @__PURE__ */ l(po, { className: "jcButton", ...{ size: a, color: r, highlightColor: e }, ...s, children: i }) : /* @__PURE__ */ l(eo, { ...s, children: /* @__PURE__ */ l("span", { children: i }) });
+}) => o === "bibi" ? /* @__PURE__ */ l(z, { ...s, children: i }) : o === "bibiOutlined" ? /* @__PURE__ */ l(so, { ...s, children: i }) : o === "bibiInverse" ? /* @__PURE__ */ l(lo, { ...s, children: i }) : o === "unstyled" ? /* @__PURE__ */ l(co, { ...s, children: i }) : o === 2 ? /* @__PURE__ */ l(io, { ...s, children: /* @__PURE__ */ l("span", { children: i }) }) : o === "icon" ? /* @__PURE__ */ l(po, { className: "jcIconButton", ...{ size: n, color: a, highlightColor: e }, ...s, children: i }) : o === "filter" ? /* @__PURE__ */ l(uo, { className: "jcFilterButton", active: p, ...s, children: i }) : /* @__PURE__ */ l(eo, { ...s, children: /* @__PURE__ */ l("span", { children: i }) });
 export {
   So as Button,
   So as default

package/Flex/Flex.js

@@ -1,24 +1,25 @@
-import { jsx as d } from "react/jsx-runtime";
-import { n as p, i as m } from "../.chunks/emotion-styled.browser.esm.js";
-const w = p("div", {
+import { jsx as x } from "react/jsx-runtime";
+import { n as d, i as m } from "../.chunks/emotion-styled.browser.esm.js";
+const p = d("div", {
   shouldForwardProp: (o) => m(o) && typeof o == "string" && o !== "wrap"
 })(
-  ({ column: o, alignItems: r, justifyContent: a, wrap: t, width: e, height: i, styles: n, padding: s, gap: l, placeContent: f }) => ({
+  ({ column: o, alignItems: r, justifyContent: a, wrap: e, width: i, height: s, styles: n, padding: t, gap: l, placeContent: f }) => ({
+    boxSizing: "border-box",
     display: "flex",
     flexDirection: o ? "column" : "row",
-    flexWrap: t ? "wrap" : "nowrap",
+    flexWrap: e ? "wrap" : "nowrap",
     alignItems: r,
     justifyContent: a,
     placeContent: f,
-    width: e,
-    height: i,
+    width: i,
+    height: s,
     gap: l,
-    padding: s,
+    padding: t,
     fontFamily: "Roboto, sans-serif",
     ...n
   })
-), u = ({ children: o, ...r }) => /* @__PURE__ */ d(w, { ...r, children: o });
+), b = ({ children: o, ...r }) => /* @__PURE__ */ x(p, { className: "jcFlex", ...r, children: o });
 export {
-  u as Flex,
-  u as default
+  b as Flex,
+  b as default
 };

package/README.md

@@ -1,106 +1,106 @@
-# Welcome to the Johnson County Component Library!
-
-## Quick Start
-
-### Runtime Enviromnent
-
-1. Please download and install [NVM for Windows](https://github.com/coreybutler/nvm-windows?tab=readme-ov-file)
-2. `nvm install 22.11.0`
-3. `nvm use 22`
-
-### Usage
-
-`npm install jcicl@latest`
-
-```js
-import Button, { ButtonProps } from 'jcicl/Button';
-import Nav, { NavProps } from 'jcicl/Nav';
-
-const Component: React.FC<ButtonProps> = ({ ...buttonProps }) => <Button {...buttonProps}>Johnson County Button</Button>;
-```
-
-### Adding the fonts and scrollbar styles
-
-In your project entry point (most likely `main.tsx`), add:
-
-```js
-import '@fontsource/roboto/300.css';
-import '@fontsource/roboto/400.css';
-import '@fontsource/roboto/500.css';
-import '@fontsource/roboto/700.css';
-import '@fontsource/material-icons';
-import 'overlayscrollbars/overlayscrollbars.css';
-```
-
-Alternatively, add to project root `index.html` `<head />`:
-
-```html
-<link rel="preconnect" href="https://fonts.googleapis.com" />
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" />
-```
-
-#### Viewing Storybook Documentation
-
-We are using [Storybook](https://storybook.js.org/docs/get-started/frameworks/react-vite?renderer=react) to document our component library
-
-Please use `npm run storybook` or `npm start` from the root directory to start the storybook application. You can see helpful documentation links under the `Configure your project` section of the Storybook application.
-
-## Development
-
-### Getting started
-
-[Please ensure your react development environment is set up](https://devops.jc.net/JCIT/Business%20Solutions%20Delivery/_wiki/wikis/Business-Solutions-Delivery.wiki?wikiVersion=GBwikiMaster&pagePath=%2FSetting%20Up%20React&pageId=219).
-
-From the root project directory, please run `npm install`
-
-### Dependencies
-
-For this component library, we are extending [Material UI](https://mui.com/material-ui/getting-started/) and customizing with [Emotion/Styled](https://emotion.sh/docs/styled)
-
-### Components Directory Structure
-
-In each components folder, you should see a `[Component].stories.tsx` file. You can copy the established pattern to create stories for new components, or customize as you please according to the above documentation
-
-#### Base
-
-Base components are intended to be the foundational building blocks of our web pages here at Johnson County
-
-#### Composite
-
-Composite components are intended to be reusable chunks of HTML built from base components and complimentary TSX (TypeScript XML)
-
-#### Superomposite
-
-Composite with a higher level of complexity
-
-#### Templates
-
-Templates are intended to render the HTML for predefined page layouts comprised of composite components, base components, and complimentary TSX
-
-#### **All of the above component types are inteded to be importable and reusable throughout the suite of Johnson County web applications** 😊
-
-### Process
-
-1. Add or update any components you wish. For new components, please create the associated `[NewComponent].stories.tsx` file to allow for documentation. In `.storybook/main.ts`, we are using the default string matching pattern to automatically index `*.stories.*` files 😊
-2. Export any newly created components in the relevant index files: `(base/(super)composite/templates)/[NewComponent]/index.ts` and `components/index.ts`.
-3. Export any newly created types for the component from `(base/(super)composite/templates)/[NewComponent]/index.ts`
-4. Publish the library and update relevant project dependencies
-
-### Publishing the library
-
-The library will automatically publish a new minor version on merges to master. If you need to manually publish a new version:
-
-`npm run bp`
-
-- Creates a new minor version (`0.0.x`), builds, and publishes the library to the npm registry
-
-`npm run bpMinor` for minor versions (`0.x.0`), and `npm run bpMajor` for major versions (`x.0.0`)
-
-For more details on scripting commands, please see the [npm CLI documentation](https://docs.npmjs.com/cli/v9/commands)
-
-### Deploying storybook
-
-TODO: Automate
-
-Build the library with `npm run storybook`, then copy all of the files in `storybook-static` into `windu\E:\ComponentLibrary`
+# Welcome to the Johnson County Component Library!
+
+## Quick Start
+
+### Runtime Enviromnent
+
+1. Please download and install [NVM for Windows](https://github.com/coreybutler/nvm-windows?tab=readme-ov-file)
+2. `nvm install 22.11.0`
+3. `nvm use 22`
+
+### Usage
+
+`npm install jcicl@latest`
+
+```js
+import Button, { ButtonProps } from 'jcicl/Button';
+import Nav, { NavProps } from 'jcicl/Nav';
+
+const Component: React.FC<ButtonProps> = ({ ...buttonProps }) => <Button {...buttonProps}>Johnson County Button</Button>;
+```
+
+### Adding the fonts and scrollbar styles
+
+In your project entry point (most likely `main.tsx`), add:
+
+```js
+import '@fontsource/roboto/300.css';
+import '@fontsource/roboto/400.css';
+import '@fontsource/roboto/500.css';
+import '@fontsource/roboto/700.css';
+import '@fontsource/material-icons';
+import 'overlayscrollbars/overlayscrollbars.css';
+```
+
+Alternatively, add to project root `index.html` `<head />`:
+
+```html
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" />
+```
+
+#### Viewing Storybook Documentation
+
+We are using [Storybook](https://storybook.js.org/docs/get-started/frameworks/react-vite?renderer=react) to document our component library
+
+Please use `npm run storybook` or `npm start` from the root directory to start the storybook application. You can see helpful documentation links under the `Configure your project` section of the Storybook application.
+
+## Development
+
+### Getting started
+
+[Please ensure your react development environment is set up](https://devops.jc.net/JCIT/Business%20Solutions%20Delivery/_wiki/wikis/Business-Solutions-Delivery.wiki?wikiVersion=GBwikiMaster&pagePath=%2FSetting%20Up%20React&pageId=219).
+
+From the root project directory, please run `npm install`
+
+### Dependencies
+
+For this component library, we are extending [Material UI](https://mui.com/material-ui/getting-started/) and customizing with [Emotion/Styled](https://emotion.sh/docs/styled)
+
+### Components Directory Structure
+
+In each components folder, you should see a `[Component].stories.tsx` file. You can copy the established pattern to create stories for new components, or customize as you please according to the above documentation
+
+#### Base
+
+Base components are intended to be the foundational building blocks of our web pages here at Johnson County
+
+#### Composite
+
+Composite components are intended to be reusable chunks of HTML built from base components and complimentary TSX (TypeScript XML)
+
+#### Superomposite
+
+Composite with a higher level of complexity
+
+#### Templates
+
+Templates are intended to render the HTML for predefined page layouts comprised of composite components, base components, and complimentary TSX
+
+#### **All of the above component types are inteded to be importable and reusable throughout the suite of Johnson County web applications** 😊
+
+### Process
+
+1. Add or update any components you wish. For new components, please create the associated `[NewComponent].stories.tsx` file to allow for documentation. In `.storybook/main.ts`, we are using the default string matching pattern to automatically index `*.stories.*` files 😊
+2. Export any newly created components in the relevant index files: `(base/(super)composite/templates)/[NewComponent]/index.ts` and `components/index.ts`.
+3. Export any newly created types for the component from `(base/(super)composite/templates)/[NewComponent]/index.ts`
+4. Publish the library and update relevant project dependencies
+
+### Publishing the library
+
+The library will automatically publish a new minor version on merges to master. If you need to manually publish a new version:
+
+`npm run bp`
+
+- Creates a new minor version (`0.0.x`), builds, and publishes the library to the npm registry
+
+`npm run bpMinor` for minor versions (`0.x.0`), and `npm run bpMajor` for major versions (`x.0.0`)
+
+For more details on scripting commands, please see the [npm CLI documentation](https://docs.npmjs.com/cli/v9/commands)
+
+### Deploying storybook
+
+TODO: Automate
+
+Build the library with `npm run storybook`, then copy all of the files in `storybook-static` into `windu\E:\ComponentLibrary`

package/Search/Search.d.ts

@@ -1,7 +1,7 @@
 import { TextFieldProps as MuiTextFieldProps } from '@mui/material/TextField';
-export type SearchFilter = {
+export type SearchFilterProps = {
     name: string;
-    onClick: string;
+    onClick: () => void;
     active?: boolean;
 };
 export type SearchProps = Omit<MuiTextFieldProps, 'variant'> & {
@@ -9,7 +9,7 @@ export type SearchProps = Omit<MuiTextFieldProps, 'variant'> & {
     borderColor?: string;
     borderFocusColor?: string;
     onSearch: () => void;
-    filters?: SearchFilter[];
+    filters?: SearchFilterProps[];
 };
 export declare const Search: React.FC<SearchProps>;
 export default Search;

package/Search/Search.js

@@ -1,20 +1,31 @@
-import { jsx as o } from "react/jsx-runtime";
-import { n as h } from "../.chunks/emotion-styled.browser.esm.js";
-import r from "../theme.js";
-import p from "../Icon/Icon.js";
-import { Button as m } from "../Button/Button.js";
-import { c as a } from "../.chunks/createSvgIcon.js";
-import { T as u } from "../.chunks/TextField.js";
-const g = a(/* @__PURE__ */ o("path", {
+import { jsx as r, jsxs as v } from "react/jsx-runtime";
+import { useState as S } from "react";
+import { n as s } from "../.chunks/emotion-styled.browser.esm.js";
+import { c as l } from "../.chunks/emotion-react.browser.esm.js";
+import e from "../theme.js";
+import z from "../Icon/Icon.js";
+import { Button as p } from "../Button/Button.js";
+import { c as m } from "../.chunks/createSvgIcon.js";
+import { T as y } from "../.chunks/TextField.js";
+const k = m(/* @__PURE__ */ r("path", {
   d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14"
-}), "Search"), b = a(/* @__PURE__ */ o("path", {
+}), "Search"), C = m(/* @__PURE__ */ r("path", {
   d: "M10 18h4v-2h-4zM3 6v2h18V6zm3 7h12v-2H6z"
-}), "FilterList"), x = h(u)(({ borderColor: e, borderFocusColor: t, shadowTertiary: i }) => ({
-  backgroundColor: r.colors.white,
+}), "FilterList"), M = s("div")(() => ({
+  ...l`
+    position: relative;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  `
+})), R = s(y)(({ borderColor: o, borderFocusColor: i, shadowTertiary: a }) => ({
+  backgroundColor: e.colors.white,
   borderRadius: "1rem",
   height: "2rem",
-  border: `1px solid ${e}`,
+  border: `1px solid ${o}`,
   transition: "313ms all ease-out",
+  zIndex: 1327,
   ".MuiInputBase-root": {
     padding: "0 2px"
   },
@@ -31,7 +42,7 @@ const g = a(/* @__PURE__ */ o("path", {
     },
     "&:hover": {
       svg: {
-        boxShadow: `0 0 2px ${r.colors.midnight}`
+        boxShadow: `0 0 2px ${e.colors.midnight}`
       }
     }
   },
@@ -39,8 +50,8 @@ const g = a(/* @__PURE__ */ o("path", {
     borderRadius: "50%",
     "&:hover": {
       svg: {
-        backgroundColor: t,
-        fill: r.colors.white
+        backgroundColor: i,
+        fill: e.colors.white
       },
       ".MuiTouchRipple-root": {
         backgroundColor: "transparent"
@@ -59,11 +70,11 @@ const g = a(/* @__PURE__ */ o("path", {
     alignItems: "center"
   },
   "&:hover, :focus-visible, :focus-within": {
-    borderColor: t,
-    boxShadow: i
+    borderColor: i,
+    boxShadow: a
   },
   "&:focus-visible": {
-    borderColor: e,
+    borderColor: o,
     borderWidth: "2px"
   },
   fieldset: {
@@ -75,54 +86,107 @@ const g = a(/* @__PURE__ */ o("path", {
       border: "none"
     }
   }
-})), C = ({
-  borderColor: e = r.colors.green,
+})), $ = s("div")(({ open: o }) => ({
+  ...l`
+    box-sizing: border-box;
+    position: absolute;
+    width: calc(50%);
+    top: 1rem;
+    right: 3px;
+    z-index: 1313;
+    display: flex;
+    gap: 1rem;
+    background-color: ${e.colors.white};
+    box-shadow: ${e.boxShadows.midnight};
+    padding: ${o ? "2rem 1rem" : 0};
+    transition: 313ms all ease-in-out;
+    display: grid;
+    grid-template-rows: ${o ? "1fr" : "0fr"};
+
+    .filtersWrapper {
+      overflow: hidden;
+    }
+
+    @media screen and (max-width: ${e.screenSizes.tablet}) {
+      width: calc(100% - 6px);
+    }
+  `
+})), F = s("div")(() => ({
+  ...l`
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-row-gap: 1.3rem;
+    grid-column-gap: 1.3rem;
+    justify-content: center;
+    box-sizing: border-box;
+    width: 100%;
+
+    @media screen and (max-width: ${e.screenSizes.tablet}) {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    @media screen and (max-width: 786px) {
+      grid-template-columns: repeat(1, 1fr);
+    }
+
+    .filtersButton {
+      width: 100%;
+      justify-self: center;
+    }
+  `
+})), P = ({
+  borderColor: o = e.colors.green,
   // border primary
-  borderFocusColor: t = r.colors.darkGreen,
+  borderFocusColor: i = e.colors.darkGreen,
   // icon primary
-  shadowTertiary: i = r.boxShadows.darkGreenThick,
-  onSearch: n,
-  ...d
+  shadowTertiary: a = e.boxShadows.darkGreenThick,
+  filters: t,
+  onSearch: d,
+  ...h
 }) => {
-  const l = (s) => {
-    s.preventDefault(), s.key === "Enter" && n && n();
-  }, c = { borderColor: e, borderFocusColor: t, shadowTertiary: i, ...d };
-  return /* @__PURE__ */ o(
-    x,
-    {
-      slotProps: {
-        input: {
-          startAdornment: /* @__PURE__ */ o(
-            m,
-            {
-              variant: "icon",
-              size: 28,
-              onClick: n,
-              color: t,
-              highlightColor: "transparent",
-              children: /* @__PURE__ */ o(g, {})
-            }
-          ),
-          endAdornment: /* @__PURE__ */ o(
-            p,
-            {
-              onClick: () => "",
-              icon: /* @__PURE__ */ o(b, {}),
-              backgroundColor: e,
-              iconColor: r.colors.white,
-              size: 28,
-              padding: 3
-            }
-          )
-        }
-      },
-      type: "search",
-      ...c,
-      onKeyUp: l
-    }
-  );
+  const [c, g] = S(!1), u = (n) => {
+    n.preventDefault(), n.key === "Enter" && d && d();
+  }, x = { borderColor: o, borderFocusColor: i, shadowTertiary: a, ...h }, b = t && t.length > 0;
+  return /* @__PURE__ */ v(M, { children: [
+    /* @__PURE__ */ r(
+      R,
+      {
+        slotProps: {
+          input: {
+            startAdornment: /* @__PURE__ */ r(
+              p,
+              {
+                variant: "icon",
+                size: 28,
+                onClick: d,
+                color: i,
+                highlightColor: "transparent",
+                children: /* @__PURE__ */ r(k, {})
+              }
+            ),
+            endAdornment: b && /* @__PURE__ */ r(
+              z,
+              {
+                onClick: () => g(!c),
+                icon: /* @__PURE__ */ r(C, {}),
+                backgroundColor: o,
+                iconColor: e.colors.white,
+                size: 28,
+                padding: 3
+              }
+            )
+          }
+        },
+        type: "search",
+        ...x,
+        onKeyUp: u
+      }
+    ),
+    /* @__PURE__ */ r($, { open: c, children: /* @__PURE__ */ r(F, { className: "filtersWrapper", children: t == null ? void 0 : t.map(({ name: n, onClick: f, active: w }) => /* @__PURE__ */ r(p, { className: "filtersButton", variant: "filter", onClick: f, active: w, children: n }, n)) }) })
+  ] });
 };
 export {
-  C as Search,
-  C as default
+  P as Search,
+  P as default
 };

package/Search/index.d.ts

@@ -1 +1 @@
-export { default, type SearchProps, type SearchFilter } from './Search';
+export { default, type SearchProps, type SearchFilterProps } from './Search';

package/package.json

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