jcicl 0.0.132 → 0.0.135

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;