jcicl 1.0.29 → 1.0.31

package/Button/Button.d.ts

@@ -1,6 +1,6 @@
 import { ButtonProps as MuiButtonProps } from '@mui/material/Button/Button';
 export interface ButtonProps extends Omit<MuiButtonProps, 'variant' | 'size' | 'color'> {
-    variant?: 1 | 2 | 'unstyled' | 'copy' | 'icon' | 'bibi' | 'bibiOutlined' | 'bibiInverse' | 'filter' | 'custom' | 'pill';
+    variant?: 1 | 2 | 'unstyled' | 'copy' | 'icon' | 'bibi' | 'bibiOutlined' | 'bibiInverse' | 'filter' | 'custom' | 'pill' | 'form';
     size?: number;
     color?: string;
     highlightColor?: string;

package/Button/Button.js

@@ -1,44 +1,44 @@
-import { jsxs as T, jsx as i } from "react/jsx-runtime";
+import { jsxs as N, jsx as i } from "react/jsx-runtime";
 import * as B from "react";
-import { useState as q } from "react";
-import { g as J, a as K, s, r as Q, c as p, u as X, b as W, P as e, d as Y, e as h } from "../.chunks/DefaultPropsProvider.js";
-import { m as Z } from "../.chunks/memoTheme.js";
-import { c as oo } from "../.chunks/createSimplePaletteValueFilter.js";
+import { useState as J } from "react";
+import { g as K, a as Q, s, r as X, c as p, u as Y, b as j, P as e, d as Z, e as h } from "../.chunks/DefaultPropsProvider.js";
+import { m as oo } from "../.chunks/memoTheme.js";
+import { c as to } from "../.chunks/createSimplePaletteValueFilter.js";
 import { B as k } from "../.chunks/ButtonBase.js";
-import { r as to } from "../.chunks/resolveProps.js";
-import { i as ro } from "../.chunks/emotion-styled.browser.esm.js";
+import { r as ro } from "../.chunks/resolveProps.js";
+import { i as eo } from "../.chunks/emotion-styled.browser.esm.js";
 import { c as g } from "../.chunks/emotion-react.browser.esm.js";
 import t from "../theme.js";
-import { Tooltip as eo } from "../Tooltip/Tooltip.js";
+import { Tooltip as no } from "../Tooltip/Tooltip.js";
 import { useThemeColors as ao } from "../ThemeContext.js";
-import { C as no } from "../.chunks/check.js";
-function io(o) {
-  return J("MuiButton", o);
+import { C as io } from "../.chunks/check.js";
+function so(o) {
+  return K("MuiButton", o);
 }
-const x = K("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"]), j = /* @__PURE__ */ B.createContext({});
-process.env.NODE_ENV !== "production" && (j.displayName = "ButtonGroupContext");
-const V = /* @__PURE__ */ B.createContext(void 0);
-process.env.NODE_ENV !== "production" && (V.displayName = "ButtonGroupButtonContext");
-const so = (o) => {
+const x = Q("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"]), F = /* @__PURE__ */ B.createContext({});
+process.env.NODE_ENV !== "production" && (F.displayName = "ButtonGroupContext");
+const P = /* @__PURE__ */ B.createContext(void 0);
+process.env.NODE_ENV !== "production" && (P.displayName = "ButtonGroupButtonContext");
+const lo = (o) => {
   const {
     color: r,
-    disableElevation: a,
-    fullWidth: n,
-    size: c,
+    disableElevation: n,
+    fullWidth: a,
+    size: d,
     variant: u,
     classes: b
-  } = o, v = {
-    root: ["root", u, `${u}${p(r)}`, `size${p(c)}`, `${u}Size${p(c)}`, `color${p(r)}`, a && "disableElevation", n && "fullWidth"],
+  } = o, f = {
+    root: ["root", u, `${u}${p(r)}`, `size${p(d)}`, `${u}Size${p(d)}`, `color${p(r)}`, n && "disableElevation", a && "fullWidth"],
     label: ["label"],
-    startIcon: ["icon", "startIcon", `iconSize${p(c)}`],
-    endIcon: ["icon", "endIcon", `iconSize${p(c)}`]
-  }, f = Y(v, io, b);
+    startIcon: ["icon", "startIcon", `iconSize${p(d)}`],
+    endIcon: ["icon", "endIcon", `iconSize${p(d)}`]
+  }, v = Z(f, so, b);
   return {
     ...b,
     // forward the focused, disabled, etc. classes to the ButtonBase
-    ...f
+    ...v
   };
-}, F = [{
+}, V = [{
   props: {
     size: "small"
   },
@@ -65,20 +65,20 @@ const so = (o) => {
       fontSize: 22
     }
   }
-}], lo = s(k, {
-  shouldForwardProp: (o) => Q(o) || o === "classes",
+}], co = s(k, {
+  shouldForwardProp: (o) => X(o) || o === "classes",
   name: "MuiButton",
   slot: "Root",
   overridesResolver: (o, r) => {
     const {
-      ownerState: a
+      ownerState: n
     } = o;
-    return [r.root, r[a.variant], r[`${a.variant}${p(a.color)}`], r[`size${p(a.size)}`], r[`${a.variant}Size${p(a.size)}`], a.color === "inherit" && r.colorInherit, a.disableElevation && r.disableElevation, a.fullWidth && r.fullWidth];
+    return [r.root, r[n.variant], r[`${n.variant}${p(n.color)}`], r[`size${p(n.size)}`], r[`${n.variant}Size${p(n.size)}`], n.color === "inherit" && r.colorInherit, n.disableElevation && r.disableElevation, n.fullWidth && r.fullWidth];
   }
-})(Z(({
+})(oo(({
   theme: o
 }) => {
-  const r = 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];
+  const r = o.palette.mode === "light" ? o.palette.grey[300] : o.palette.grey[800], n = o.palette.mode === "light" ? o.palette.grey.A100 : o.palette.grey[700];
   return {
     ...o.typography.button,
     minWidth: 64,
@@ -144,22 +144,22 @@ const so = (o) => {
         color: "var(--variant-textColor)",
         backgroundColor: "var(--variant-textBg)"
       }
-    }, ...Object.entries(o.palette).filter(oo()).map(([n]) => ({
+    }, ...Object.entries(o.palette).filter(to()).map(([a]) => ({
       props: {
-        color: n
+        color: a
       },
       style: {
-        "--variant-textColor": (o.vars || o).palette[n].main,
-        "--variant-outlinedColor": (o.vars || o).palette[n].main,
-        "--variant-outlinedBorder": o.vars ? `rgba(${o.vars.palette[n].mainChannel} / 0.5)` : h(o.palette[n].main, 0.5),
-        "--variant-containedColor": (o.vars || o).palette[n].contrastText,
-        "--variant-containedBg": (o.vars || o).palette[n].main,
+        "--variant-textColor": (o.vars || o).palette[a].main,
+        "--variant-outlinedColor": (o.vars || o).palette[a].main,
+        "--variant-outlinedBorder": o.vars ? `rgba(${o.vars.palette[a].mainChannel} / 0.5)` : h(o.palette[a].main, 0.5),
+        "--variant-containedColor": (o.vars || o).palette[a].contrastText,
+        "--variant-containedBg": (o.vars || o).palette[a].main,
         "@media (hover: hover)": {
           "&:hover": {
-            "--variant-containedBg": (o.vars || o).palette[n].dark,
-            "--variant-textBg": o.vars ? `rgba(${o.vars.palette[n].mainChannel} / ${o.vars.palette.action.hoverOpacity})` : h(o.palette[n].main, o.palette.action.hoverOpacity),
-            "--variant-outlinedBorder": (o.vars || o).palette[n].main,
-            "--variant-outlinedBg": o.vars ? `rgba(${o.vars.palette[n].mainChannel} / ${o.vars.palette.action.hoverOpacity})` : h(o.palette[n].main, o.palette.action.hoverOpacity)
+            "--variant-containedBg": (o.vars || o).palette[a].dark,
+            "--variant-textBg": o.vars ? `rgba(${o.vars.palette[a].mainChannel} / ${o.vars.palette.action.hoverOpacity})` : h(o.palette[a].main, o.palette.action.hoverOpacity),
+            "--variant-outlinedBorder": (o.vars || o).palette[a].main,
+            "--variant-outlinedBg": o.vars ? `rgba(${o.vars.palette[a].mainChannel} / ${o.vars.palette.action.hoverOpacity})` : h(o.palette[a].main, o.palette.action.hoverOpacity)
           }
         }
       }
@@ -173,7 +173,7 @@ const so = (o) => {
         "--variant-containedBg": o.vars ? o.vars.palette.Button.inheritContainedBg : r,
         "@media (hover: hover)": {
           "&:hover": {
-            "--variant-containedBg": o.vars ? o.vars.palette.Button.inheritContainedHoverBg : a,
+            "--variant-containedBg": o.vars ? o.vars.palette.Button.inheritContainedHoverBg : n,
             "--variant-textBg": o.vars ? `rgba(${o.vars.palette.text.primaryChannel} / ${o.vars.palette.action.hoverOpacity})` : h(o.palette.text.primary, o.palette.action.hoverOpacity),
             "--variant-outlinedBg": o.vars ? `rgba(${o.vars.palette.text.primaryChannel} / ${o.vars.palette.action.hoverOpacity})` : h(o.palette.text.primary, o.palette.action.hoverOpacity)
           }
@@ -261,14 +261,14 @@ const so = (o) => {
       }
     }]
   };
-})), co = s("span", {
+})), po = s("span", {
   name: "MuiButton",
   slot: "StartIcon",
   overridesResolver: (o, r) => {
     const {
-      ownerState: a
+      ownerState: n
     } = o;
-    return [r.startIcon, r[`iconSize${p(a.size)}`]];
+    return [r.startIcon, r[`iconSize${p(n.size)}`]];
   }
 })({
   display: "inherit",
@@ -281,15 +281,15 @@ const so = (o) => {
     style: {
       marginLeft: -2
     }
-  }, ...F]
-}), po = s("span", {
+  }, ...V]
+}), uo = s("span", {
   name: "MuiButton",
   slot: "EndIcon",
   overridesResolver: (o, r) => {
     const {
-      ownerState: a
+      ownerState: n
     } = o;
-    return [r.endIcon, r[`iconSize${p(a.size)}`]];
+    return [r.endIcon, r[`iconSize${p(n.size)}`]];
   }
 })({
   display: "inherit",
@@ -302,59 +302,59 @@ const so = (o) => {
     style: {
       marginRight: -2
     }
-  }, ...F]
-}), M = /* @__PURE__ */ B.forwardRef(function(r, a) {
-  const n = B.useContext(j), c = B.useContext(V), u = to(n, r), b = X({
+  }, ...V]
+}), M = /* @__PURE__ */ B.forwardRef(function(r, n) {
+  const a = B.useContext(F), d = B.useContext(P), u = ro(a, r), b = Y({
     props: u,
     name: "MuiButton"
   }), {
-    children: v,
-    color: f = "primary",
+    children: f,
+    color: v = "primary",
     component: l = "button",
     className: I,
     disabled: S = !1,
-    disableElevation: d = !1,
+    disableElevation: c = !1,
     disableFocusRipple: y = !1,
     endIcon: m,
     focusVisibleClassName: z,
     fullWidth: R = !1,
     size: O = "medium",
     startIcon: E,
-    type: P,
-    variant: H = "text",
-    ...D
+    type: W,
+    variant: D = "text",
+    ...U
   } = b, C = {
     ...b,
-    color: f,
+    color: v,
     component: l,
     disabled: S,
-    disableElevation: d,
+    disableElevation: c,
     disableFocusRipple: y,
     fullWidth: R,
     size: O,
-    type: P,
-    variant: H
-  }, $ = so(C), U = E && /* @__PURE__ */ i(co, {
+    type: W,
+    variant: D
+  }, $ = lo(C), _ = E && /* @__PURE__ */ i(po, {
     className: $.startIcon,
     ownerState: C,
     children: E
-  }), _ = m && /* @__PURE__ */ i(po, {
+  }), A = m && /* @__PURE__ */ i(uo, {
     className: $.endIcon,
     ownerState: C,
     children: m
-  }), A = c || "";
-  return /* @__PURE__ */ T(lo, {
+  }), q = d || "";
+  return /* @__PURE__ */ N(co, {
     ownerState: C,
-    className: W(n.className, $.root, I, A),
+    className: j(a.className, $.root, I, q),
     component: l,
     disabled: S,
     focusRipple: !y,
-    focusVisibleClassName: W($.focusVisible, z),
-    ref: a,
-    type: P,
-    ...D,
+    focusVisibleClassName: j($.focusVisible, z),
+    ref: n,
+    type: W,
+    ...U,
     classes: $,
-    children: [U, v, _]
+    children: [_, f, A]
   });
 });
 process.env.NODE_ENV !== "production" && (M.propTypes = {
@@ -471,7 +471,7 @@ const G = [
   span {
     align-items: center !important;
   }
-`, uo = s(w)`
+`, bo = s(w)`
   background-color: ${t.colors.green};
   height: 2.5rem;
   border: 2px solid transparent;
@@ -490,39 +490,39 @@ const G = [
   &:disabled {
     background-color: ${t.colors.darkGreen};
   }
-`, bo = s(w, {
+`, go = s(w, {
   shouldForwardProp: (o) => !G.includes(o)
 })(
   ({
     customBackgroundColor: o = t.colors.green,
     customHoverColor: r = t.colors.darkGreen,
-    customTextColor: a = t.colors.white,
-    customShadow1: n = t.boxShadows.gray63,
-    customShadow2: c = t.boxShadows.black63
+    customTextColor: n = t.colors.white,
+    customShadow1: a = t.boxShadows.gray63,
+    customShadow2: d = t.boxShadows.black63
   }) => ({
     ...g`
       background-color: ${o};
       border-radius: 0;
       height: 2.5rem;
       border: 2px solid transparent;
-      color: ${a};
+      color: ${n};
       transition: 313ms all ease-in;
       border-radius: 32px;
       font-weight: 400;
       padding: 0.75rem 2rem;
       font-size: 1rem;
-      box-shadow: ${n};
+      box-shadow: ${a};
       &:hover,
       :focus-visible {
         background-color: ${r};
-        box-shadow: ${c};
+        box-shadow: ${d};
       }
       &:disabled {
         background-color: ${r};
       }
     `
   })
-), go = s(w)`
+), L = s(w)`
   background-color: ${t.colors.gold};
   height: 2.5rem;
   border: 2px solid transparent;
@@ -541,7 +541,10 @@ const G = [
   &:disabled {
     background-color: ${t.colors.goldHover};
   }
-`, N = s(w)(({ width: o = "114px" }) => ({
+`, xo = s(L)`
+  width: 447px;
+  align-self: center;
+`, T = s(w)(({ width: o = "114px" }) => ({
   ...g`
     box-sizing: border-box;
     background-color: ${t.colors.bibiBlue};
@@ -559,7 +562,7 @@ const G = [
       background-color: ${t.colors.bibiBlueHover};
     }
   `
-})), xo = s(N)(({ active: o }) => ({
+})), fo = s(T)(({ active: o }) => ({
   ...g`
     background-color: ${o && t.colors.white};
     color: ${o && t.colors.bibiBlue};
@@ -569,7 +572,7 @@ const G = [
       color: ${t.colors.bibiBlue};
     }
   `
-})), vo = s(N)(() => ({
+})), vo = s(T)(() => ({
   ...g`
     background-color: ${t.colors.white};
     color: ${t.colors.bibiBlue};
@@ -580,13 +583,13 @@ const G = [
       color: ${t.colors.white};
     }
   `
-})), L = s(k)`
+})), H = s(k)`
   display: block;
-`, fo = s(L)`
+`, yo = s(H)`
   font-family: inherit;
   font-size: inherit;
   font-weight: inherit;
-`, yo = s("div")`
+`, mo = s("div")`
   display: flex;
   .isCopied {
     color: ${t.colors.gray};
@@ -601,10 +604,10 @@ const G = [
     width: 14px !important;
     margin: 0;
   }
-`, mo = s(k, {
-  shouldForwardProp: (o) => typeof o == "string" && ro(o)
+`, $o = s(k, {
+  shouldForwardProp: (o) => typeof o == "string" && eo(o)
 })(
-  ({ size: o, color: r, highlightColor: a, hoverColor: n }) => ({
+  ({ size: o, color: r, highlightColor: n, hoverColor: a }) => ({
     ...g`
       display: flex;
       align-items: center;
@@ -615,9 +618,9 @@ const G = [
       &:hover,
       :focus-visible {
         svg {
-          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});
-          fill: ${n || r};
+          filter: drop-shadow(0 0 6px ${n}) drop-shadow(0 0 6px ${n})
+            drop-shadow(0 0 6px ${n}) drop-shadow(0 0 6px ${n});
+          fill: ${a || r};
         }
       }
 
@@ -629,7 +632,7 @@ const G = [
       }
     `
   })
-), $o = s(w)(({ active: o }) => ({
+), ho = s(w)(({ active: o }) => ({
   ...g`
     box-sizing: border-box;
     background-color: ${o ? t.colors.black : t.colors.white};
@@ -648,7 +651,7 @@ const G = [
       background-color: ${o ? t.colors.charcoal : t.colors.gray2};
     }
   `
-})), ho = s(k)(
+})), Bo = s(k)(
   ({ backgroundColor: o, borderColor: r }) => ({
     ...g`
       height: 28px;
@@ -684,71 +687,71 @@ const G = [
       }
     `
   })
-), Wo = ({
+), Fo = ({
   variant: o = 1,
   size: r = 50,
-  color: a,
-  highlightColor: n,
-  hoverColor: c,
+  color: n,
+  highlightColor: a,
+  hoverColor: d,
   backgroundColor: u,
   textColor: b,
-  customShadow1: v,
-  customShadow2: f,
+  customShadow1: f,
+  customShadow2: v,
   children: l,
   textToCopy: I,
   active: S,
-  ...d
+  ...c
 }) => {
   const y = ao();
   if (o === "custom")
     return /* @__PURE__ */ i(
-      bo,
+      go,
       {
         customBackgroundColor: u,
-        customHoverColor: c,
+        customHoverColor: d,
         customTextColor: b,
-        customShadow1: v,
-        customShadow2: f,
+        customShadow1: f,
+        customShadow2: v,
         className: "jcCustomButton",
-        ...d,
+        ...c,
         children: l
       }
     );
   if (o === "bibi")
-    return /* @__PURE__ */ i(N, { ...d, children: l });
+    return /* @__PURE__ */ i(T, { ...c, children: l });
   if (o === "bibiOutlined")
-    return /* @__PURE__ */ i(xo, { ...d, children: l });
+    return /* @__PURE__ */ i(fo, { ...c, children: l });
   if (o === "bibiInverse")
-    return /* @__PURE__ */ i(vo, { ...d, children: l });
+    return /* @__PURE__ */ i(vo, { ...c, children: l });
   if (o === "unstyled")
-    return /* @__PURE__ */ i(L, { ...d, children: l });
+    return /* @__PURE__ */ i(H, { ...c, children: l });
   if (o === "copy") {
-    const [m, z] = q(!1);
-    return /* @__PURE__ */ T(yo, { onClick: async () => {
+    const [m, z] = J(!1);
+    return /* @__PURE__ */ N(mo, { onClick: async () => {
       try {
         await navigator.clipboard.writeText(I || String(l)), z(!0), setTimeout(() => z(!1), 1100);
       } catch (O) {
         console.error("Failed to copy text: ", O);
       }
     }, children: [
-      /* @__PURE__ */ i(eo, { title: "Copy to clipboard", children: /* @__PURE__ */ i(fo, { ...d, children: l }) }),
-      m && /* @__PURE__ */ T("span", { className: "isCopied", children: [
-        /* @__PURE__ */ i(no, { size: 12 }),
+      /* @__PURE__ */ i(no, { title: "Copy to clipboard", children: /* @__PURE__ */ i(yo, { ...c, children: l }) }),
+      m && /* @__PURE__ */ N("span", { className: "isCopied", children: [
+        /* @__PURE__ */ i(io, { size: 12 }),
         " Copied"
       ] })
     ] });
   }
-  return o === 2 ? /* @__PURE__ */ i(go, { ...d, children: /* @__PURE__ */ i("span", { children: l }) }) : o === "icon" ? (a = a || t.colors.green, n = n || t.colors.dandelion, c = c || t.colors.green, /* @__PURE__ */ i(mo, { className: "jcIconButton", ...{ size: r, color: a, highlightColor: n, hoverColor: c }, ...d, children: l })) : o === "filter" ? /* @__PURE__ */ i($o, { className: "jcFilterButton", active: S, ...d, children: l }) : o === "pill" ? /* @__PURE__ */ i(
-    ho,
+  return o === 2 ? /* @__PURE__ */ i(L, { ...c, children: /* @__PURE__ */ i("span", { children: l }) }) : o === "icon" ? (n = n || t.colors.green, a = a || t.colors.dandelion, d = d || t.colors.green, /* @__PURE__ */ i($o, { className: "jcIconButton", ...{ size: r, color: n, highlightColor: a, hoverColor: d }, ...c, children: l })) : o === "filter" ? /* @__PURE__ */ i(ho, { className: "jcFilterButton", active: S, ...c, children: l }) : o === "form" ? /* @__PURE__ */ i(xo, { className: "jcFormButton", ...c, children: l }) : o === "pill" ? /* @__PURE__ */ i(
+    Bo,
     {
       backgroundColor: u || y.themeIconBackgroundB,
       borderColor: b || y.themeIconBackgroundA,
-      ...d,
+      ...c,
       children: /* @__PURE__ */ i("span", { children: l })
     }
-  ) : /* @__PURE__ */ i(uo, { ...d, children: /* @__PURE__ */ i("span", { children: l }) });
+  ) : /* @__PURE__ */ i(bo, { ...c, children: /* @__PURE__ */ i("span", { children: l }) });
 };
 export {
-  Wo as Button,
-  Wo as default
+  Fo as Button,
+  Fo as default
 };

package/CircularIconButton/CircularIconButton.d.ts

@@ -9,6 +9,7 @@ interface CircularIconWrapperProps {
     backgroundColor?: string;
     color?: string;
     size?: number;
+    useThemeColor?: boolean;
 }
 declare const CircularIconButton: React.FC<CircularIconButtonProps>;
 export default CircularIconButton;

package/CircularIconButton/CircularIconButton.js

@@ -1,11 +1,11 @@
-import { jsx as e } from "react/jsx-runtime";
-import { n as i } from "../.chunks/emotion-styled.browser.esm.js";
-import { c as a } from "../.chunks/emotion-react.browser.esm.js";
-import l from "../theme.js";
-import { useThemeColors as m } from "../ThemeContext.js";
-const u = i("div")(({ backgroundColor: t, size: r, color: o }) => ({
-  ...a`
-    background-color: ${t};
+import { jsx as t } from "react/jsx-runtime";
+import { n as l } from "../.chunks/emotion-styled.browser.esm.js";
+import { c as m } from "../.chunks/emotion-react.browser.esm.js";
+import s from "../theme.js";
+import { useThemeColors as u } from "../ThemeContext.js";
+const f = l("div")(({ backgroundColor: e, size: r, color: o }) => ({
+  ...m`
+    background-color: ${e};
     color: ${o};
     border-radius: 50%;
     width: ${r}px;
@@ -22,25 +22,26 @@ const u = i("div")(({ backgroundColor: t, size: r, color: o }) => ({
       transform: scale(1.1);
     }
   `
-})), x = ({
-  color: t = l.colors.white,
-  backgroundColor: r,
+})), b = ({
+  color: e = s.colors.white,
+  backgroundColor: r = s.colors.green,
   size: o = 20,
   onClick: n,
-  icon: s
+  icon: c,
+  useThemeColor: i = !1
 }) => {
-  const c = m();
-  return /* @__PURE__ */ e(
-    u,
+  const a = u();
+  return /* @__PURE__ */ t(
+    f,
     {
-      color: t,
-      backgroundColor: r || c.themeIconBackgroundA,
+      color: e,
+      backgroundColor: i ? a.themeIconBackgroundA : r,
       size: o * 1.2,
       onClick: n,
-      children: /* @__PURE__ */ e(s, { size: o * 0.8 })
+      children: /* @__PURE__ */ t(c, { size: o * 0.8 })
     }
   );
 };
 export {
-  x as default
+  b as default
 };

package/FormContext/createFormContext.d.ts

@@ -0,0 +1,32 @@
+import { FormContextOptions, FormContextResult, InputChangeExtension } from './types';
+/**
+ * Factory function to create a typed form context with shared functionality.
+ * Fixes the stale closure bug by computing all values inside the functional update.
+ *
+ * @template T - The type of form data this context will manage
+ * @param options - Configuration options for the form context
+ * @returns Object containing the Context and Provider
+ *
+ * @example
+ * ```tsx
+ * interface MyFormData {
+ *   name: string;
+ *   email: string;
+ *   [key: string]: unknown; // Required for FormFields compatibility
+ * }
+ *
+ * const { Context: MyFormContext, Provider: MyFormProvider } = createFormContext<MyFormData>({
+ *   name: 'MyForm',
+ *   defaultValues: { name: '', email: '' },
+ * });
+ * ```
+ */
+export declare function createFormContext<T extends Record<string, unknown>>(options: FormContextOptions<T>): FormContextResult<T>;
+/**
+ * Creates a DOB → Age autofill extension.
+ * When dateOfBirth field changes, automatically calculates and sets age.
+ *
+ * @param dobKey - The form field key for date of birth (default: 'dateOfBirth')
+ * @param ageKey - The form field key for age (default: 'age')
+ */
+export declare function createDobToAgeExtension<T extends Record<string, unknown>>(dobKey?: keyof T & string, ageKey?: keyof T & string): InputChangeExtension<T>;

package/FormContext/createFormContext.js

@@ -0,0 +1,74 @@
+import { jsx as N } from "react/jsx-runtime";
+import { createContext as w, useState as E, useEffect as P, useMemo as $ } from "react";
+import { formatPhoneNumber as C } from "../utils.js";
+function I(b) {
+  const { name: n, defaultValues: s = {}, onInputChangeExtensions: u = [], submit: m, debug: a = !1 } = b, i = w({
+    onFormInputChange: () => console.error(`Failed to update form input. ${n}FormContext not initialized`),
+    formData: s,
+    setFormData: () => console.error(`Failed to set form data. ${n}FormContext not initialized`),
+    resetForm: () => console.error(`Failed to reset form. ${n}FormContext not initialized`)
+  });
+  return { Context: i, Provider: ({ children: x }) => {
+    const [e, r] = E(s), d = (g, t, c) => {
+      r((l) => {
+        let o;
+        if (c === "checkbox")
+          o = t.target.checked;
+        else if (c === "multiDropdown") {
+          const h = t.target.value;
+          Array.isArray(h) ? o = h.map((D) => D.value) : o = [];
+        } else if (c === "phone") {
+          const [, h] = C(t.target.value);
+          o = h;
+        } else
+          o = t.target.value;
+        return o === "undefined" && (o = void 0), { ...l, [g]: o };
+      });
+      let p;
+      if (c === "checkbox")
+        p = t.target.checked;
+      else if (c === "phone") {
+        const [, l] = C(t.target.value);
+        p = l;
+      } else
+        p = t.target.value === "undefined" ? void 0 : t.target.value;
+      u.forEach((l) => {
+        l(g, p, r);
+      });
+    }, v = () => r(s);
+    P(() => {
+      a && console.log(`[${n}Form] Updated form data:`, e);
+    }, [e]);
+    const f = $(
+      () => ({
+        onFormInputChange: d,
+        formData: e,
+        setFormData: r,
+        resetForm: v,
+        ...m ? { submit: () => m(e) } : {}
+      }),
+      [e]
+    );
+    return /* @__PURE__ */ N(i.Provider, { value: f, children: x });
+  } };
+}
+function M(b = "dateOfBirth", n = "age") {
+  return (s, u, m) => {
+    if (s === b && u && typeof u == "string") {
+      const a = u.split("-");
+      if (a.length !== 3) return;
+      const i = Number(a[0]), F = Number(a[1]), x = Number(a[2]), e = /* @__PURE__ */ new Date(), r = e.getFullYear(), d = e.getMonth() + 1, v = e.getDate();
+      if (i > r || i < 1900)
+        return;
+      let f = r - i;
+      (F > d || F === d && x > v) && (f -= 1), m((g) => ({
+        ...g,
+        [n]: String(f)
+      }));
+    }
+  };
+}
+export {
+  M as createDobToAgeExtension,
+  I as createFormContext
+};

package/FormContext/index.d.ts

@@ -0,0 +1,2 @@
+export { createFormContext, createDobToAgeExtension } from './createFormContext';
+export type { FormContextProps, FormContextOptions, FormContextResult, InputChangeExtension, } from './types';

package/FormContext/index.js

@@ -0,0 +1,5 @@
+import { createDobToAgeExtension as t, createFormContext as r } from "./createFormContext.js";
+export {
+  t as createDobToAgeExtension,
+  r as createFormContext
+};

package/FormContext/types.d.ts

@@ -0,0 +1,53 @@
+import { PropsWithChildren } from 'react';
+/**
+ * Base form context properties that all form contexts share.
+ * @template T - The type of form data this context manages
+ */
+export interface FormContextProps<T extends Record<string, unknown>> {
+    /**
+     * Handler for form input changes - supports text, checkbox, multiDropdown, and phone types.
+     * Accepts any string key to maintain compatibility with FormFields component,
+     * but typed form data provides compile-time safety for direct property access.
+     */
+    onFormInputChange: (key: string, e: React.ChangeEvent<HTMLInputElement>, type?: string) => void;
+    /** Current form data state */
+    formData: T;
+    /** Direct setter for form data (use sparingly - prefer onFormInputChange) */
+    setFormData: React.Dispatch<React.SetStateAction<T>>;
+    /** Reset form to initial/empty state */
+    resetForm: () => void;
+    /** Optional submit handler (if configured in factory) */
+    submit?: () => void;
+}
+/**
+ * Extension function called after each input change.
+ * Use for side effects like auto-filling related fields (e.g., DOB → Age).
+ * @template T - The type of form data
+ */
+export type InputChangeExtension<T extends Record<string, unknown>> = (key: string, value: unknown, setFormData: React.Dispatch<React.SetStateAction<T>>) => void;
+/**
+ * Configuration options for creating a form context.
+ * @template T - The type of form data this context will manage
+ */
+export interface FormContextOptions<T extends Record<string, unknown>> {
+    /** Name for the context (used in error messages) */
+    name: string;
+    /** Default/initial values for the form */
+    defaultValues?: Partial<T>;
+    /** Extensions called after each input change (e.g., DOB→Age autofill) */
+    onInputChangeExtensions?: InputChangeExtension<T>[];
+    /** Custom submit function */
+    submit?: (formData: T) => void;
+    /** Enable debug logging of form data changes */
+    debug?: boolean;
+}
+/**
+ * Return type from createFormContext factory.
+ * @template T - The type of form data
+ */
+export interface FormContextResult<T extends Record<string, unknown>> {
+    /** The React Context object */
+    Context: React.Context<FormContextProps<T>>;
+    /** Provider component that wraps children with form state */
+    Provider: React.FC<PropsWithChildren>;
+}

package/FormContext/types.js

@@ -0,0 +1 @@
+

package/Pill/Pill.d.ts

@@ -2,6 +2,7 @@ export interface PillProps {
     backgroundColor?: string;
     textColor?: string;
     type?: 'primary' | 'secondary';
+    squared?: boolean;
 }
 export declare const Pill: React.FC<PillProps & {
     children: React.ReactNode;

package/Pill/Pill.js

@@ -1,33 +1,43 @@
 import { jsx as s } from "react/jsx-runtime";
-import { n as a } from "../.chunks/emotion-styled.browser.esm.js";
-import { c as i } from "../.chunks/emotion-react.browser.esm.js";
-import e from "../theme.js";
-import { useThemeColors as p } from "../ThemeContext.js";
-const l = a("span")(
-  ({ backgroundColor: r = e.colors.whiteGreen, textColor: o = e.colors.white }) => ({
-    ...i`
-      font-family: ${e.fonts.roboto};
+import { n as i } from "../.chunks/emotion-styled.browser.esm.js";
+import { c as p } from "../.chunks/emotion-react.browser.esm.js";
+import t from "../theme.js";
+import { useThemeColors as d } from "../ThemeContext.js";
+const a = i("span")(
+  ({ backgroundColor: e = t.colors.whiteGreen, textColor: o = t.colors.white, squared: r = !1 }) => ({
+    ...p`
+      font-family: ${t.fonts.roboto};
       font-size: 13px;
       font-weight: 500;
       color: ${o};
-      background-color: ${r};
+      background-color: ${e};
       padding: 3px 13px;
-      border-radius: 21px;
+      border-radius: ${r ? "4px" : "21px"};
       cursor: default;
     `
   })
-), x = (r) => {
-  const o = p(), { backgroundColor: t, textColor: n, type: m = "primary", children: c } = r;
+), C = (e) => {
+  const o = d(), { backgroundColor: r, textColor: c, type: m = "primary", squared: l = !1, children: n } = e;
   return m == "secondary" ? /* @__PURE__ */ s(
-    l,
+    a,
     {
-      backgroundColor: t || o.themeIconBackgroundB,
-      textColor: n || o.themeIconColorB,
-      children: c
+      backgroundColor: r || o.themeIconBackgroundB,
+      textColor: c || o.themeIconColorB,
+      squared: l,
+      children: n
     }
-  ) : /* @__PURE__ */ s(l, { backgroundColor: t || o.themeIconBackgroundA, textColor: n, children: c });
+  ) : /* @__PURE__ */ s(
+    a,
+    {
+      backgroundColor: r || o.themeIconBackgroundA,
+      textColor: c,
+      squared: l,
+      className: "jciclPillWrapper",
+      children: n
+    }
+  );
 };
 export {
-  x as Pill,
-  x as default
+  C as Pill,
+  C as default
 };

package/SquareIconButton/SquareIconButton.d.ts

@@ -8,6 +8,7 @@ interface SquareIconWrapperProps {
     backgroundColor?: string;
     color?: string;
     size?: number;
+    useThemeColor?: boolean;
 }
 declare const SquareIconButton: React.FC<SquareIconButtonProps>;
 export default SquareIconButton;

package/SquareIconButton/SquareIconButton.js

@@ -1,10 +1,10 @@
 import { jsx as t } from "react/jsx-runtime";
-import { n as c } from "../.chunks/emotion-styled.browser.esm.js";
-import { c as a } from "../.chunks/emotion-react.browser.esm.js";
-import l from "../theme.js";
-import { useThemeColors as u } from "../ThemeContext.js";
-const m = c("button")(({ backgroundColor: r, color: e, size: o }) => ({
-  ...a`
+import { n as a } from "../.chunks/emotion-styled.browser.esm.js";
+import { c as u } from "../.chunks/emotion-react.browser.esm.js";
+import n from "../theme.js";
+import { useThemeColors as m } from "../ThemeContext.js";
+const f = a("button")(({ backgroundColor: r, color: e, size: o }) => ({
+  ...u`
     width: ${o}px;
     height: ${o}px;
     background-color: ${r};
@@ -32,25 +32,26 @@ const m = c("button")(({ backgroundColor: r, color: e, size: o }) => ({
       }
     }
   `
-})), g = ({
-  color: r = l.colors.white,
-  backgroundColor: e,
+})), x = ({
+  color: r = n.colors.white,
+  backgroundColor: e = n.colors.green,
   size: o = 20,
-  onClick: n,
-  icon: s
+  onClick: s,
+  icon: c,
+  useThemeColor: i = !1
 }) => {
-  const i = u();
+  const l = m();
   return /* @__PURE__ */ t(
-    m,
+    f,
     {
-      backgroundColor: e || i.themeIconBackgroundA,
+      backgroundColor: i ? l.themeIconBackgroundA : e,
       color: r,
       size: o * 2,
-      onClick: n,
-      children: /* @__PURE__ */ t(s, { size: o })
+      onClick: s,
+      children: /* @__PURE__ */ t(c, { size: o })
     }
   );
 };
 export {
-  g as default
+  x as default
 };

package/Toast/index.d.ts

@@ -1,3 +1,4 @@
 export { default, type ToastProps } from './Toast';
 export { Toaster, type ToastItem } from './Toaster';
 export { handleDismissToast, showToast, saveToastForRedirect, showSavedToast } from './ToastHelpers';
+export { useToast } from './useToast';

package/Toast/index.js

@@ -1,11 +1,13 @@
 import { default as e } from "./Toast.js";
-import { Toaster as a } from "./Toaster.js";
-import { handleDismissToast as T, saveToastForRedirect as d, showSavedToast as f, showToast as m } from "./ToastHelpers.js";
+import { Toaster as r } from "./Toaster.js";
+import { handleDismissToast as T, saveToastForRedirect as f, showSavedToast as m, showToast as d } from "./ToastHelpers.js";
+import { useToast as x } from "./useToast.js";
 export {
-  a as Toaster,
+  r as Toaster,
   e as default,
   T as handleDismissToast,
-  d as saveToastForRedirect,
-  f as showSavedToast,
-  m as showToast
+  f as saveToastForRedirect,
+  m as showSavedToast,
+  d as showToast,
+  x as useToast
 };

package/Toast/useToast.d.ts

@@ -0,0 +1,23 @@
+import { ToastProps } from './Toast';
+import { ToastItem } from './Toaster';
+/**
+ * Hook for managing toast notifications.
+ * Encapsulates toast state management and provides a simple API.
+ *
+ * @example
+ * ```tsx
+ * const { toasts, toast, dismissToast } = useToast();
+ *
+ * // Show a toast
+ * toast({ type: 'success', message: 'Saved!', duration: 3000 });
+ *
+ * // In render
+ * <Toaster toastQueue={toasts} onDismiss={dismissToast} />
+ * ```
+ */
+export declare const useToast: () => {
+    toasts: ToastItem[];
+    toast: (toastProps: ToastProps) => void;
+    dismissToast: (id: number) => void;
+};
+export default useToast;

package/Toast/useToast.js

@@ -0,0 +1,10 @@
+import { useState as a } from "react";
+import { handleDismissToast as e, showToast as i } from "./ToastHelpers.js";
+const c = () => {
+  const [o, t] = a([]);
+  return { toasts: o, toast: (s) => i(s, t), dismissToast: (s) => e(s, t) };
+};
+export {
+  c as default,
+  c as useToast
+};

package/index.d.ts

@@ -9,6 +9,7 @@ export { default as LabeledValue } from './LabeledValue';
 export { default as ListButton } from './ListButton';
 export { default as Loading } from './Loading';
 export { default as ScrollContainer } from './ScrollContainer';
+export * from './FormContext';
 export { default as Accordion } from './Accordion';
 export { default as ErrorBoundary } from './ErrorBoundary';
 export { default as InfoCard } from './InfoCard';

package/index.js

@@ -1,52 +1,55 @@
-import { AvatarWithImage as t } from "./AvatarWithImage/AvatarWithImage.js";
+import { AvatarWithImage as e } from "./AvatarWithImage/AvatarWithImage.js";
 import { Button as a } from "./Button/Button.js";
 import { Divider as p } from "./Divider/Divider.js";
-import { Flex as x } from "./Flex/Flex.js";
-import { Grid as l } from "./Grid/Grid.js";
+import { Flex as m } from "./Flex/Flex.js";
+import { Grid as n } from "./Grid/Grid.js";
 import { default as i } from "./Icon/Icon.js";
 import { Input as s } from "./Input/Input.js";
-import { LabeledValue as I } from "./LabeledValue/LabeledValue.js";
-import { default as b } from "./ListButton/ListButton.js";
+import { LabeledValue as c } from "./LabeledValue/LabeledValue.js";
+import { default as I } from "./ListButton/ListButton.js";
 import { default as g } from "./Loading/Loading.js";
-import { default as C } from "./ScrollContainer/ScrollContainer.js";
-import { Accordion as v } from "./Accordion/Accordion.js";
-import { default as E } from "./ErrorBoundary/ErrorBoundary.js";
+import { default as B } from "./ScrollContainer/ScrollContainer.js";
+import { createDobToAgeExtension as v, createFormContext as E } from "./FormContext/createFormContext.js";
+import { Accordion as D } from "./Accordion/Accordion.js";
+import { default as S } from "./ErrorBoundary/ErrorBoundary.js";
 import { InfoCard as y } from "./InfoCard/InfoCard.js";
-import { LabeledInput as F } from "./LabeledInput/LabeledInput.js";
-import { default as H } from "./List/List.js";
-import { default as T } from "./LogoLoop/LogoLoop.js";
-import { SiteBanner as j } from "./SiteBanner/SiteBanner.js";
-import { Tooltip as q } from "./Tooltip/Tooltip.js";
-import { default as z } from "./WithLabel/WithLabel.js";
-import { default as K } from "./WithLoading/WithLoading.js";
-import { A as O } from "./.chunks/AppHeader.js";
-import { EditableInfoCard as Q } from "./EditableInfoCard/EditableInfoCard.js";
-import { Nav as U } from "./Nav/Nav.js";
-import { default as Y } from "./AppContainer/AppContainer.js";
+import { LabeledInput as H } from "./LabeledInput/LabeledInput.js";
+import { default as V } from "./List/List.js";
+import { default as k } from "./LogoLoop/LogoLoop.js";
+import { SiteBanner as w } from "./SiteBanner/SiteBanner.js";
+import { Tooltip as J } from "./Tooltip/Tooltip.js";
+import { default as M } from "./WithLabel/WithLabel.js";
+import { default as P } from "./WithLoading/WithLoading.js";
+import { A as R } from "./.chunks/AppHeader.js";
+import { EditableInfoCard as X } from "./EditableInfoCard/EditableInfoCard.js";
+import { Nav as Z } from "./Nav/Nav.js";
+import { default as $ } from "./AppContainer/AppContainer.js";
 export {
-  v as Accordion,
-  Y as AppContainer,
-  O as AppHeader,
-  t as AvatarWithImage,
+  D as Accordion,
+  $ as AppContainer,
+  R as AppHeader,
+  e as AvatarWithImage,
   a as Button,
   p as Divider,
-  Q as EditableInfoCard,
-  E as ErrorBoundary,
-  x as Flex,
-  l as Grid,
+  X as EditableInfoCard,
+  S as ErrorBoundary,
+  m as Flex,
+  n as Grid,
   i as Icon,
   y as InfoCard,
   s as Input,
-  F as LabeledInput,
-  I as LabeledValue,
-  H as List,
-  b as ListButton,
+  H as LabeledInput,
+  c as LabeledValue,
+  V as List,
+  I as ListButton,
   g as Loading,
-  T as LogoLoop,
-  U as Nav,
-  C as ScrollContainer,
-  j as SiteBanner,
-  q as Tooltip,
-  z as WithLabel,
-  K as WithLoading
+  k as LogoLoop,
+  Z as Nav,
+  B as ScrollContainer,
+  w as SiteBanner,
+  J as Tooltip,
+  M as WithLabel,
+  P as WithLoading,
+  v as createDobToAgeExtension,
+  E as createFormContext
 };

package/package.json

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