jcicl 1.0.30 → 1.0.32

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.js

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

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,44 @@
-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 { jsx as a } from "react/jsx-runtime";
+import { n as m } 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 n = m("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;
-  return m == "secondary" ? /* @__PURE__ */ s(
-    l,
+), C = (e) => {
+  const o = d(), { backgroundColor: r, textColor: l, type: i = "primary", squared: c = !1, children: s } = e;
+  return i == "secondary" ? /* @__PURE__ */ a(
+    n,
     {
-      backgroundColor: t || o.themeIconBackgroundB,
-      textColor: n || o.themeIconColorB,
-      children: c
+      backgroundColor: r || o.themeIconBackgroundB,
+      textColor: l || o.themeIconColorB,
+      squared: c,
+      className: "jciclPillWrapper",
+      children: s
     }
-  ) : /* @__PURE__ */ s(l, { backgroundColor: t || o.themeIconBackgroundA, textColor: n, children: c });
+  ) : /* @__PURE__ */ a(
+    n,
+    {
+      backgroundColor: r || o.themeIconBackgroundA,
+      textColor: l,
+      squared: c,
+      className: "jciclPillWrapper",
+      children: s
+    }
+  );
 };
 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/package.json

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