jcicl 0.0.311 → 0.0.315

package/Button/Button.d.ts

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

package/Button/Button.js

@@ -1,39 +1,39 @@
-import { jsxs as H, jsx as l } from "react/jsx-runtime";
-import * as x from "react";
-import { g as _, a as A, s as c, r as q, c as d, m as J, u as K, b as O, P as t, d as Q, e as g } from "../.chunks/DefaultPropsProvider.js";
+import { jsxs as H, jsx as i } from "react/jsx-runtime";
+import * as B from "react";
+import { g as _, a as A, s, r as q, c as p, m as J, u as K, b as R, P as r, d as Q, e as $ } 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 { B as z } 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 r from "../theme.js";
+import { c as g } from "../.chunks/emotion-react.browser.esm.js";
+import t from "../theme.js";
 function oo(o) {
   return _("MuiButton", o);
 }
-const b = 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__ */ x.createContext({});
-process.env.NODE_ENV !== "production" && (R.displayName = "ButtonGroupContext");
-const N = /* @__PURE__ */ x.createContext(void 0);
-process.env.NODE_ENV !== "production" && (N.displayName = "ButtonGroupButtonContext");
+const v = 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"]), E = /* @__PURE__ */ B.createContext({});
+process.env.NODE_ENV !== "production" && (E.displayName = "ButtonGroupContext");
+const T = /* @__PURE__ */ B.createContext(void 0);
+process.env.NODE_ENV !== "production" && (T.displayName = "ButtonGroupButtonContext");
 const to = (o) => {
   const {
     color: a,
     disableElevation: n,
     fullWidth: e,
-    size: p,
-    variant: i,
-    classes: u
-  } = o, s = {
-    root: ["root", i, `${i}${d(a)}`, `size${d(p)}`, `${i}Size${d(p)}`, `color${d(a)}`, n && "disableElevation", e && "fullWidth"],
+    size: d,
+    variant: u,
+    classes: b
+  } = o, x = {
+    root: ["root", u, `${u}${p(a)}`, `size${p(d)}`, `${u}Size${p(d)}`, `color${p(a)}`, n && "disableElevation", e && "fullWidth"],
     label: ["label"],
-    startIcon: ["icon", "startIcon", `iconSize${d(p)}`],
-    endIcon: ["icon", "endIcon", `iconSize${d(p)}`]
-  }, y = Q(s, oo, u);
+    startIcon: ["icon", "startIcon", `iconSize${p(d)}`],
+    endIcon: ["icon", "endIcon", `iconSize${p(d)}`]
+  }, f = Q(x, oo, b);
   return {
-    ...u,
+    ...b,
     // forward the focused, disabled, etc. classes to the ButtonBase
-    ...y
+    ...f
   };
-}, E = [{
+}, W = [{
   props: {
     size: "small"
   },
@@ -60,7 +60,7 @@ const to = (o) => {
       fontSize: 22
     }
   }
-}], ro = c(S, {
+}], ro = s(z, {
   shouldForwardProp: (o) => q(o) || o === "classes",
   name: "MuiButton",
   slot: "Root",
@@ -68,7 +68,7 @@ const to = (o) => {
     const {
       ownerState: n
     } = o;
-    return [a.root, a[n.variant], a[`${n.variant}${d(n.color)}`], a[`size${d(n.size)}`], a[`${n.variant}Size${d(n.size)}`], n.color === "inherit" && a.colorInherit, n.disableElevation && a.disableElevation, n.fullWidth && a.fullWidth];
+    return [a.root, a[n.variant], a[`${n.variant}${p(n.color)}`], a[`size${p(n.size)}`], a[`${n.variant}Size${p(n.size)}`], n.color === "inherit" && a.colorInherit, n.disableElevation && a.disableElevation, n.fullWidth && a.fullWidth];
   }
 })(X(({
   theme: o
@@ -86,7 +86,7 @@ const to = (o) => {
     "&:hover": {
       textDecoration: "none"
     },
-    [`&.${b.disabled}`]: {
+    [`&.${v.disabled}`]: {
       color: (o.vars || o).palette.action.disabled
     },
     variants: [{
@@ -107,10 +107,10 @@ const to = (o) => {
         "&:active": {
           boxShadow: (o.vars || o).shadows[8]
         },
-        [`&.${b.focusVisible}`]: {
+        [`&.${v.focusVisible}`]: {
           boxShadow: (o.vars || o).shadows[6]
         },
-        [`&.${b.disabled}`]: {
+        [`&.${v.disabled}`]: {
           color: (o.vars || o).palette.action.disabled,
           boxShadow: (o.vars || o).shadows[0],
           backgroundColor: (o.vars || o).palette.action.disabledBackground
@@ -126,7 +126,7 @@ const to = (o) => {
         borderColor: "var(--variant-outlinedBorder, currentColor)",
         backgroundColor: "var(--variant-outlinedBg)",
         color: "var(--variant-outlinedColor)",
-        [`&.${b.disabled}`]: {
+        [`&.${v.disabled}`]: {
           border: `1px solid ${(o.vars || o).palette.action.disabledBackground}`
         }
       }
@@ -146,15 +146,15 @@ const to = (o) => {
       style: {
         "--variant-textColor": (o.vars || o).palette[e].main,
         "--variant-outlinedColor": (o.vars || o).palette[e].main,
-        "--variant-outlinedBorder": o.vars ? `rgba(${o.vars.palette[e].mainChannel} / 0.5)` : g(o.palette[e].main, 0.5),
+        "--variant-outlinedBorder": o.vars ? `rgba(${o.vars.palette[e].mainChannel} / 0.5)` : $(o.palette[e].main, 0.5),
         "--variant-containedColor": (o.vars || o).palette[e].contrastText,
         "--variant-containedBg": (o.vars || o).palette[e].main,
         "@media (hover: hover)": {
           "&:hover": {
             "--variant-containedBg": (o.vars || o).palette[e].dark,
-            "--variant-textBg": o.vars ? `rgba(${o.vars.palette[e].mainChannel} / ${o.vars.palette.action.hoverOpacity})` : g(o.palette[e].main, o.palette.action.hoverOpacity),
+            "--variant-textBg": o.vars ? `rgba(${o.vars.palette[e].mainChannel} / ${o.vars.palette.action.hoverOpacity})` : $(o.palette[e].main, o.palette.action.hoverOpacity),
             "--variant-outlinedBorder": (o.vars || o).palette[e].main,
-            "--variant-outlinedBg": o.vars ? `rgba(${o.vars.palette[e].mainChannel} / ${o.vars.palette.action.hoverOpacity})` : g(o.palette[e].main, o.palette.action.hoverOpacity)
+            "--variant-outlinedBg": o.vars ? `rgba(${o.vars.palette[e].mainChannel} / ${o.vars.palette.action.hoverOpacity})` : $(o.palette[e].main, o.palette.action.hoverOpacity)
           }
         }
       }
@@ -169,8 +169,8 @@ const to = (o) => {
         "@media (hover: hover)": {
           "&:hover": {
             "--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})` : g(o.palette.text.primary, o.palette.action.hoverOpacity),
-            "--variant-outlinedBg": o.vars ? `rgba(${o.vars.palette.text.primaryChannel} / ${o.vars.palette.action.hoverOpacity})` : g(o.palette.text.primary, o.palette.action.hoverOpacity)
+            "--variant-textBg": o.vars ? `rgba(${o.vars.palette.text.primaryChannel} / ${o.vars.palette.action.hoverOpacity})` : $(o.palette.text.primary, o.palette.action.hoverOpacity),
+            "--variant-outlinedBg": o.vars ? `rgba(${o.vars.palette.text.primaryChannel} / ${o.vars.palette.action.hoverOpacity})` : $(o.palette.text.primary, o.palette.action.hoverOpacity)
           }
         }
       }
@@ -237,13 +237,13 @@ const to = (o) => {
         "&:hover": {
           boxShadow: "none"
         },
-        [`&.${b.focusVisible}`]: {
+        [`&.${v.focusVisible}`]: {
           boxShadow: "none"
         },
         "&:active": {
           boxShadow: "none"
         },
-        [`&.${b.disabled}`]: {
+        [`&.${v.disabled}`]: {
           boxShadow: "none"
         }
       }
@@ -256,14 +256,14 @@ const to = (o) => {
       }
     }]
   };
-})), ao = c("span", {
+})), ao = s("span", {
   name: "MuiButton",
   slot: "StartIcon",
   overridesResolver: (o, a) => {
     const {
       ownerState: n
     } = o;
-    return [a.startIcon, a[`iconSize${d(n.size)}`]];
+    return [a.startIcon, a[`iconSize${p(n.size)}`]];
   }
 })({
   display: "inherit",
@@ -276,15 +276,15 @@ const to = (o) => {
     style: {
       marginLeft: -2
     }
-  }, ...E]
-}), no = c("span", {
+  }, ...W]
+}), no = s("span", {
   name: "MuiButton",
   slot: "EndIcon",
   overridesResolver: (o, a) => {
     const {
       ownerState: n
     } = o;
-    return [a.endIcon, a[`iconSize${d(n.size)}`]];
+    return [a.endIcon, a[`iconSize${p(n.size)}`]];
   }
 })({
   display: "inherit",
@@ -297,62 +297,62 @@ const to = (o) => {
     style: {
       marginRight: -2
     }
-  }, ...E]
-}), T = /* @__PURE__ */ x.forwardRef(function(a, n) {
-  const e = x.useContext(R), p = x.useContext(N), i = J(e, a), u = K({
-    props: i,
+  }, ...W]
+}), j = /* @__PURE__ */ B.forwardRef(function(a, n) {
+  const e = B.useContext(E), d = B.useContext(T), u = J(e, a), b = K({
+    props: u,
     name: "MuiButton"
   }), {
-    children: s,
-    color: y = "primary",
-    component: w = "button",
-    className: P,
-    disabled: m = !1,
-    disableElevation: W = !1,
-    disableFocusRipple: C = !1,
-    endIcon: h,
-    focusVisibleClassName: V,
-    fullWidth: j = !1,
+    children: x,
+    color: f = "primary",
+    component: l = "button",
+    className: m,
+    disabled: c = !1,
+    disableElevation: C = !1,
+    disableFocusRipple: k = !1,
+    endIcon: I,
+    focusVisibleClassName: P,
+    fullWidth: V = !1,
     size: M = "medium",
-    startIcon: I,
-    type: k,
-    variant: F = "text",
-    ...G
-  } = u, B = {
-    ...u,
-    color: y,
-    component: w,
-    disabled: m,
-    disableElevation: W,
-    disableFocusRipple: C,
-    fullWidth: j,
+    startIcon: O,
+    type: N,
+    variant: G = "text",
+    ...F
+  } = b, w = {
+    ...b,
+    color: f,
+    component: l,
+    disabled: c,
+    disableElevation: C,
+    disableFocusRipple: k,
+    fullWidth: V,
     size: M,
-    type: k,
-    variant: F
-  }, v = to(B), L = I && /* @__PURE__ */ l(ao, {
-    className: v.startIcon,
-    ownerState: B,
+    type: N,
+    variant: G
+  }, y = to(w), L = O && /* @__PURE__ */ i(ao, {
+    className: y.startIcon,
+    ownerState: w,
+    children: O
+  }), D = I && /* @__PURE__ */ i(no, {
+    className: y.endIcon,
+    ownerState: w,
     children: I
-  }), D = h && /* @__PURE__ */ l(no, {
-    className: v.endIcon,
-    ownerState: B,
-    children: h
-  }), U = p || "";
+  }), U = d || "";
   return /* @__PURE__ */ H(ro, {
-    ownerState: B,
-    className: O(e.className, v.root, P, U),
-    component: w,
-    disabled: m,
-    focusRipple: !C,
-    focusVisibleClassName: O(v.focusVisible, V),
+    ownerState: w,
+    className: R(e.className, y.root, m, U),
+    component: l,
+    disabled: c,
+    focusRipple: !k,
+    focusVisibleClassName: R(y.focusVisible, P),
     ref: n,
-    type: k,
-    ...G,
-    classes: v,
-    children: [L, s, D]
+    type: N,
+    ...F,
+    classes: y,
+    children: [L, x, D]
   });
 });
-process.env.NODE_ENV !== "production" && (T.propTypes = {
+process.env.NODE_ENV !== "production" && (j.propTypes = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
@@ -360,42 +360,42 @@ process.env.NODE_ENV !== "production" && (T.propTypes = {
   /**
    * The content of the component.
    */
-  children: t.node,
+  children: r.node,
   /**
    * Override or extend the styles applied to the component.
    */
-  classes: t.object,
+  classes: r.object,
   /**
    * @ignore
    */
-  className: t.string,
+  className: r.string,
   /**
    * The color of the component.
    * It supports both default and custom theme colors, which can be added as shown in the
    * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
    * @default 'primary'
    */
-  color: t.oneOfType([t.oneOf(["inherit", "primary", "secondary", "success", "error", "info", "warning"]), t.string]),
+  color: r.oneOfType([r.oneOf(["inherit", "primary", "secondary", "success", "error", "info", "warning"]), r.string]),
   /**
    * The component used for the root node.
    * Either a string to use a HTML element or a component.
    */
-  component: t.elementType,
+  component: r.elementType,
   /**
    * If `true`, the component is disabled.
    * @default false
    */
-  disabled: t.bool,
+  disabled: r.bool,
   /**
    * If `true`, no elevation is used.
    * @default false
    */
-  disableElevation: t.bool,
+  disableElevation: r.bool,
   /**
    * If `true`, the  keyboard focus ripple is disabled.
    * @default false
    */
-  disableFocusRipple: t.bool,
+  disableFocusRipple: r.bool,
   /**
    * If `true`, the ripple effect is disabled.
    *
@@ -403,128 +403,158 @@ process.env.NODE_ENV !== "production" && (T.propTypes = {
    * to highlight the element by applying separate styles with the `.Mui-focusVisible` class.
    * @default false
    */
-  disableRipple: t.bool,
+  disableRipple: r.bool,
   /**
    * Element placed after the children.
    */
-  endIcon: t.node,
+  endIcon: r.node,
   /**
    * @ignore
    */
-  focusVisibleClassName: t.string,
+  focusVisibleClassName: r.string,
   /**
    * If `true`, the button will take up the full width of its container.
    * @default false
    */
-  fullWidth: t.bool,
+  fullWidth: r.bool,
   /**
    * The URL to link to when the button is clicked.
    * If defined, an `a` element will be used as the root node.
    */
-  href: t.string,
+  href: r.string,
   /**
    * The size of the component.
    * `small` is equivalent to the dense button styling.
    * @default 'medium'
    */
-  size: t.oneOfType([t.oneOf(["small", "medium", "large"]), t.string]),
+  size: r.oneOfType([r.oneOf(["small", "medium", "large"]), r.string]),
   /**
    * Element placed before the children.
    */
-  startIcon: t.node,
+  startIcon: r.node,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: t.oneOfType([t.arrayOf(t.oneOfType([t.func, t.object, t.bool])), t.func, t.object]),
+  sx: r.oneOfType([r.arrayOf(r.oneOfType([r.func, r.object, r.bool])), r.func, r.object]),
   /**
    * @ignore
    */
-  type: t.oneOfType([t.oneOf(["button", "reset", "submit"]), t.string]),
+  type: r.oneOfType([r.oneOf(["button", "reset", "submit"]), r.string]),
   /**
    * The variant to use.
    * @default 'text'
    */
-  variant: t.oneOfType([t.oneOf(["contained", "outlined", "text"]), t.string])
+  variant: r.oneOfType([r.oneOf(["contained", "outlined", "text"]), r.string])
 });
-const $ = c(T)`
+const S = s(j)`
   text-transform: none;
   &:disabled {
     opacity: 0.5;
-    color: ${r.colors.black};
+    color: ${t.colors.black};
     display: flex;
     justify-content: center;
     align-items: center;
   }
-`, eo = c($)`
-  background-color: ${r.colors.green};
+`, eo = s(S)`
+  background-color: ${t.colors.green};
   border-radius: 0;
   height: 2.5rem;
   border: 2px solid transparent;
-  color: ${r.colors.white};
+  color: ${t.colors.white};
   transition: 313ms all ease-in;
   border-radius: 32px;
   font-weight: 400;
   padding: 0.75rem 2rem;
   font-size: 1rem;
-  box-shadow: ${r.boxShadows.gray63};
+  box-shadow: ${t.boxShadows.gray63};
   &:hover,
   :focus-visible {
-    background-color: ${r.colors.darkGreen};
-    box-shadow: ${r.boxShadows.black63};
+    background-color: ${t.colors.darkGreen};
+    box-shadow: ${t.boxShadows.black63};
   }
   &:disabled {
-    background-color: ${r.colors.darkGreen};
+    background-color: ${t.colors.darkGreen};
   }
-`, io = c($)`
-  color: ${r.colors.black};
-  border: 3px solid ${r.colors.blue};
+`, io = s(S)(
+  ({
+    customBackgroundColor: o = t.colors.green,
+    customHoverColor: a = t.colors.darkGreen,
+    customTextColor: n = t.colors.white,
+    customShadow1: e = t.boxShadows.gray63,
+    customShadow2: d = t.boxShadows.black63
+  }) => ({
+    ...g`
+      background-color: ${o};
+      border-radius: 0;
+      height: 2.5rem;
+      border: 2px solid transparent;
+      color: ${n};
+      transition: 313ms all ease-in;
+      border-radius: 32px;
+      font-weight: 400;
+      padding: 0.75rem 2rem;
+      font-size: 1rem;
+      box-shadow: ${e};
+      &:hover,
+      :focus-visible {
+        background-color: ${a};
+        box-shadow: ${d};
+      }
+      &:disabled {
+        background-color: ${a};
+      }
+    `
+  })
+), so = s(S)`
+  color: ${t.colors.black};
+  border: 3px solid ${t.colors.blue};
   padding: 0.5rem 2rem;
-`, z = c($)(({ width: o = "114px" }) => ({
-  ...f`
+`, h = s(S)(({ width: o = "114px" }) => ({
+  ...g`
     box-sizing: border-box;
-    background-color: ${r.colors.bibiBlue};
+    background-color: ${t.colors.bibiBlue};
     border-radius: 0;
     height: 47px;
     width: ${o};
     border: 2px solid transparent;
-    color: ${r.colors.white};
+    color: ${t.colors.white};
     transition: 108ms all ease-in;
     font-weight: 500;
     padding: 0;
     font-size: 19px;
     &:hover,
     :focus-visible {
-      background-color: ${r.colors.bibiBlueHover};
+      background-color: ${t.colors.bibiBlueHover};
     }
   `
-})), so = c(z)(({ active: o }) => ({
-  ...f`
-    background-color: ${o && r.colors.white};
-    color: ${o && r.colors.bibiBlue};
+})), lo = s(h)(({ active: o }) => ({
+  ...g`
+    background-color: ${o && t.colors.white};
+    color: ${o && t.colors.bibiBlue};
     &:hover,
     :focus-visible {
-      background-color: ${r.colors.white};
-      color: ${r.colors.bibiBlue};
+      background-color: ${t.colors.white};
+      color: ${t.colors.bibiBlue};
     }
   `
-})), lo = c(z)(() => ({
-  ...f`
-    background-color: ${r.colors.white};
-    color: ${r.colors.bibiBlue};
+})), co = s(h)(() => ({
+  ...g`
+    background-color: ${t.colors.white};
+    color: ${t.colors.bibiBlue};
     &:hover,
     :focus-visible {
-      background-color: ${r.colors.bibiBlue};
-      border: 2px solid ${r.colors.white};
-      color: ${r.colors.white};
+      background-color: ${t.colors.bibiBlue};
+      border: 2px solid ${t.colors.white};
+      color: ${t.colors.white};
     }
   `
-})), co = c(S)`
+})), po = s(z)`
   border-radius: 8px;
-`, po = c(S, {
+`, uo = s(z, {
   shouldForwardProp: (o) => typeof o == "string" && Z(o)
 })(
   ({ size: o, color: a, highlightColor: n, hoverColor: e }) => ({
-    ...f`
+    ...g`
       display: flex;
       align-items: center;
       justify-content: center;
@@ -548,36 +578,52 @@ const $ = c(T)`
       }
     `
   })
-), uo = c($)(({ active: o }) => ({
-  ...f`
+), bo = s(S)(({ active: o }) => ({
+  ...g`
     box-sizing: border-box;
-    background-color: ${o ? r.colors.black : r.colors.white};
+    background-color: ${o ? t.colors.black : t.colors.white};
     height: 28px;
     border-radius: 18px;
     display: flex;
     align-items: center;
     justify-content: center;
-    border: 2px solid ${o ? "transparent" : r.colors.black};
-    color: ${o ? r.colors.white : r.colors.black};
+    border: 2px solid ${o ? "transparent" : t.colors.black};
+    color: ${o ? t.colors.white : t.colors.black};
     transition: 108ms all ease-in;
     font-weight: 500;
 
     &:hover,
     :focus-visible {
-      background-color: ${o ? r.colors.charcoal : r.colors.gray2};
+      background-color: ${o ? t.colors.charcoal : t.colors.gray2};
     }
   `
-})), So = ({
+})), wo = ({
   variant: o = 1,
   size: a = 50,
-  color: n = r.colors.darkGreen,
-  highlightColor: e = r.colors.dandelion,
-  hoverColor: p = r.colors.green,
-  children: i,
-  active: u,
-  ...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: "jcIconButton", ...{ size: a, color: n, highlightColor: e, hoverColor: p }, ...s, children: i }) : o === "filter" ? /* @__PURE__ */ l(uo, { className: "jcFilterButton", active: u, ...s, children: i }) : /* @__PURE__ */ l(eo, { ...s, children: /* @__PURE__ */ l("span", { children: i }) });
+  color: n = t.colors.darkGreen,
+  highlightColor: e = t.colors.dandelion,
+  hoverColor: d = t.colors.green,
+  backgroundColor: u = t.colors.darkGreen,
+  textColor: b = t.colors.white,
+  customShadow1: x = t.boxShadows.gray63,
+  customShadow2: f = t.boxShadows.black63,
+  children: l,
+  active: m,
+  ...c
+}) => o === "custom" ? /* @__PURE__ */ i(
+  io,
+  {
+    customBackgroundColor: u,
+    customHoverColor: d,
+    customTextColor: b,
+    customShadow1: x,
+    customShadow2: f,
+    className: "jcCustomButton",
+    ...c,
+    children: l
+  }
+) : o === "bibi" ? /* @__PURE__ */ i(h, { ...c, children: l }) : o === "bibiOutlined" ? /* @__PURE__ */ i(lo, { ...c, children: l }) : o === "bibiInverse" ? /* @__PURE__ */ i(co, { ...c, children: l }) : o === "unstyled" ? /* @__PURE__ */ i(po, { ...c, children: l }) : o === 2 ? /* @__PURE__ */ i(so, { ...c, children: /* @__PURE__ */ i("span", { children: l }) }) : o === "icon" ? /* @__PURE__ */ i(uo, { className: "jcIconButton", ...{ size: a, color: n, highlightColor: e, hoverColor: d }, ...c, children: l }) : o === "filter" ? /* @__PURE__ */ i(bo, { className: "jcFilterButton", active: m, ...c, children: l }) : /* @__PURE__ */ i(eo, { ...c, children: /* @__PURE__ */ i("span", { children: l }) });
 export {
-  So as Button,
-  So as default
+  wo as Button,
+  wo as default
 };

package/FormFields/FormFields.js

@@ -1,12 +1,12 @@
-import { jsxs as g, Fragment as j, jsx as r } from "react/jsx-runtime";
-import { FormInput as C } from "../FormInput/FormInput.js";
-import { FormSectionTitle as D, FormFieldGrid as S, FormFieldCheckboxContainer as b } from "../FormComponents/FormComponents.js";
-import z from "../theme.js";
-import { u as G } from "../.chunks/useMediaQuery.js";
-const $ = ({
+import { jsxs as j, Fragment as C, jsx as r } from "react/jsx-runtime";
+import { FormInput as D } from "../FormInput/FormInput.js";
+import { FormSectionTitle as S, FormFieldGrid as b, FormFieldCheckboxContainer as z } from "../FormComponents/FormComponents.js";
+import G from "../theme.js";
+import { u as I } from "../.chunks/useMediaQuery.js";
+const q = ({
   title: i,
   fields: d,
-  columns: s = G(`(max-width: ${z.screenSizes.tablet})`) ? 2 : 3,
+  columns: s = I(`(max-width: ${G.screenSizes.tablet})`) ? 2 : 3,
   columnsOverride: u,
   gap: a = 21,
   noLabel: F = !1,
@@ -14,29 +14,30 @@ const $ = ({
   formDefaults: t,
   onChange: p
 }) => {
-  const n = () => d.map(({ key: o, label: c, type: e, limit: f, options: h, defaultValue: l }) => {
-    const x = t[o] ? t[o] : l || (e === "multiDropdown" ? [] : "");
+  const n = () => d.map(({ key: o, label: c, type: e, limit: f, options: h, defaultValue: l, ...x }) => {
+    const w = t[o] ? t[o] : l || (e === "multiDropdown" ? [] : "");
     return /* @__PURE__ */ r(
-      C,
+      D,
       {
-        onChange: (w) => p(o, w, e),
+        onChange: (g) => p(o, g, e),
         label: c,
         type: e,
         limit: f,
-        defaultValue: x,
+        defaultValue: w,
         noLabel: F,
         options: h,
-        multiple: e === "multiDropdown"
+        multiple: e === "multiDropdown",
+        ...x
       },
       o
     );
   });
-  return /* @__PURE__ */ g(j, { children: [
-    i && /* @__PURE__ */ r(D, { children: i }),
-    !m && /* @__PURE__ */ r(S, { columns: s, columnsOverride: u, gap: a, children: /* @__PURE__ */ r(n, {}) }),
-    m && /* @__PURE__ */ r(b, { children: /* @__PURE__ */ r(n, {}) })
+  return /* @__PURE__ */ j(C, { children: [
+    i && /* @__PURE__ */ r(S, { children: i }),
+    !m && /* @__PURE__ */ r(b, { columns: s, columnsOverride: u, gap: a, children: /* @__PURE__ */ r(n, {}) }),
+    m && /* @__PURE__ */ r(z, { children: /* @__PURE__ */ r(n, {}) })
   ] });
 };
 export {
-  $ as default
+  q as default
 };

package/LabeledCheckbox/LabeledCheckbox.js

@@ -1,12 +1,12 @@
-import { jsxs as z, jsx as c } from "react/jsx-runtime";
+import { jsxs as z, jsx as r } from "react/jsx-runtime";
 import { n as oe } from "../.chunks/emotion-styled.browser.esm.js";
 import { c as te } from "../.chunks/emotion-react.browser.esm.js";
-import ne from "../theme.js";
+import ae from "../theme.js";
 import * as v from "react";
-import { g as E, a as q, s as O, r as V, b as U, P as e, c as b, d as H, e as T, u as ae } from "../.chunks/DefaultPropsProvider.js";
-import { u as se } from "../.chunks/useFormControl.js";
-import { B as re } from "../.chunks/ButtonBase.js";
-import { u as ce } from "../.chunks/useControlled.js";
+import { g as E, a as q, s as O, r as V, b as U, P as e, c as b, d as H, e as T, u as se } from "../.chunks/DefaultPropsProvider.js";
+import { u as ne } from "../.chunks/useFormControl.js";
+import { B as ce } from "../.chunks/ButtonBase.js";
+import { u as re } from "../.chunks/useControlled.js";
 import { r as D } from "../.chunks/TransitionGroupContext.js";
 import { c as P } from "../.chunks/createSvgIcon.js";
 import { m as ie } from "../.chunks/memoTheme.js";
@@ -18,15 +18,15 @@ q("PrivateSwitchBase", ["root", "checked", "disabled", "input", "edgeStart", "ed
 const de = (o) => {
   const {
     classes: t,
-    checked: n,
-    disabled: a,
-    edge: s
+    checked: a,
+    disabled: s,
+    edge: n
   } = o, l = {
-    root: ["root", n && "checked", a && "disabled", s && `edge${b(s)}`],
+    root: ["root", a && "checked", s && "disabled", n && `edge${b(n)}`],
     input: ["input"]
   };
   return H(l, le, t);
-}, pe = O(re)({
+}, pe = O(ce)({
   padding: 9,
   borderRadius: "50%",
   variants: [{
@@ -75,10 +75,10 @@ const de = (o) => {
   margin: 0,
   padding: 0,
   zIndex: 1
-}), _ = /* @__PURE__ */ v.forwardRef(function(t, n) {
+}), _ = /* @__PURE__ */ v.forwardRef(function(t, a) {
   const {
-    autoFocus: a,
-    checked: s,
+    autoFocus: s,
+    checked: n,
     checkedIcon: l,
     className: p,
     defaultChecked: d,
@@ -97,28 +97,28 @@ const de = (o) => {
     required: G = !1,
     tabIndex: J,
     type: x,
-    value: $,
+    value: j,
     ...K
-  } = t, [j, Q] = ce({
-    controlled: s,
+  } = t, [$, Q] = re({
+    controlled: n,
     default: !!d,
     name: "SwitchBase",
     state: "checked"
-  }), i = se(), X = (r) => {
-    F && F(r), i && i.onFocus && i.onFocus(r);
-  }, Y = (r) => {
-    f && f(r), i && i.onBlur && i.onBlur(r);
-  }, Z = (r) => {
-    if (r.nativeEvent.defaultPrevented)
+  }), i = ne(), X = (c) => {
+    F && F(c), i && i.onFocus && i.onFocus(c);
+  }, Y = (c) => {
+    f && f(c), i && i.onBlur && i.onBlur(c);
+  }, Z = (c) => {
+    if (c.nativeEvent.defaultPrevented)
       return;
-    const M = r.target.checked;
-    Q(M), h && h(r, M);
+    const M = c.target.checked;
+    Q(M), h && h(c, M);
   };
   let m = k;
   i && typeof m > "u" && (m = i.disabled);
   const ee = x === "checkbox" || x === "radio", R = {
     ...t,
-    checked: j,
+    checked: $,
     disabled: m,
     disableFocusRipple: g,
     edge: u
@@ -134,11 +134,11 @@ const de = (o) => {
     onFocus: X,
     onBlur: Y,
     ownerState: R,
-    ref: n,
+    ref: a,
     ...K,
-    children: [/* @__PURE__ */ c(ue, {
-      autoFocus: a,
-      checked: s,
+    children: [/* @__PURE__ */ r(ue, {
+      autoFocus: s,
+      checked: n,
       defaultChecked: d,
       className: N.input,
       disabled: m,
@@ -151,11 +151,11 @@ const de = (o) => {
       ownerState: R,
       tabIndex: J,
       type: x,
-      ...x === "checkbox" && $ === void 0 ? {} : {
-        value: $
+      ...x === "checkbox" && j === void 0 ? {} : {
+        value: j
       },
       ...I
-    }), j ? l : w]
+    }), $ ? l : w]
   });
 });
 process.env.NODE_ENV !== "production" && (_.propTypes = {
@@ -261,11 +261,11 @@ process.env.NODE_ENV !== "production" && (_.propTypes = {
    */
   value: e.any
 });
-const fe = P(/* @__PURE__ */ c("path", {
+const fe = P(/* @__PURE__ */ r("path", {
   d: "M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
-}), "CheckBoxOutlineBlank"), he = P(/* @__PURE__ */ c("path", {
+}), "CheckBoxOutlineBlank"), he = P(/* @__PURE__ */ r("path", {
   d: "M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
-}), "CheckBox"), me = P(/* @__PURE__ */ c("path", {
+}), "CheckBox"), me = P(/* @__PURE__ */ r("path", {
   d: "M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10H7v-2h10v2z"
 }), "IndeterminateCheckBox");
 function be(o) {
@@ -274,11 +274,11 @@ function be(o) {
 const S = q("MuiCheckbox", ["root", "checked", "disabled", "indeterminate", "colorPrimary", "colorSecondary", "sizeSmall", "sizeMedium"]), ke = (o) => {
   const {
     classes: t,
-    indeterminate: n,
-    color: a,
-    size: s
+    indeterminate: a,
+    color: s,
+    size: n
   } = o, l = {
-    root: ["root", n && "indeterminate", `color${b(a)}`, `size${b(s)}`]
+    root: ["root", a && "indeterminate", `color${b(s)}`, `size${b(n)}`]
   }, p = H(l, be, t);
   return {
     ...t,
@@ -291,9 +291,9 @@ const S = q("MuiCheckbox", ["root", "checked", "disabled", "indeterminate", "col
   slot: "Root",
   overridesResolver: (o, t) => {
     const {
-      ownerState: n
+      ownerState: a
     } = o;
-    return [t.root, n.indeterminate && t.indeterminate, t[`size${b(n.size)}`], n.color !== "default" && t[`color${b(n.color)}`]];
+    return [t.root, a.indeterminate && t.indeterminate, t[`size${b(a.size)}`], a.color !== "default" && t[`color${b(a.color)}`]];
   }
 })(ie(({
   theme: o
@@ -345,12 +345,12 @@ const S = q("MuiCheckbox", ["root", "checked", "disabled", "indeterminate", "col
       }
     }
   }]
-}))), Ce = /* @__PURE__ */ c(he, {}), ye = /* @__PURE__ */ c(fe, {}), xe = /* @__PURE__ */ c(me, {}), W = /* @__PURE__ */ v.forwardRef(function(t, n) {
-  const a = ae({
+}))), Ce = /* @__PURE__ */ r(he, {}), ye = /* @__PURE__ */ r(fe, {}), xe = /* @__PURE__ */ r(me, {}), W = /* @__PURE__ */ v.forwardRef(function(t, a) {
+  const s = se({
     props: t,
     name: "MuiCheckbox"
   }), {
-    checkedIcon: s = Ce,
+    checkedIcon: n = Ce,
     color: l = "primary",
     icon: p = ye,
     indeterminate: d = !1,
@@ -360,14 +360,14 @@ const S = q("MuiCheckbox", ["root", "checked", "disabled", "indeterminate", "col
     disableRipple: w = !1,
     className: B,
     ...I
-  } = a, C = d ? k : p, y = d ? k : s, f = {
-    ...a,
+  } = s, C = d ? k : p, y = d ? k : n, f = {
+    ...s,
     disableRipple: w,
     color: l,
     indeterminate: d,
     size: u
   }, h = ke(f);
-  return /* @__PURE__ */ c(ge, {
+  return /* @__PURE__ */ r(ge, {
     type: "checkbox",
     inputProps: {
       "data-indeterminate": d,
@@ -380,7 +380,7 @@ const S = q("MuiCheckbox", ["root", "checked", "disabled", "indeterminate", "col
       fontSize: y.props.fontSize ?? u
     }),
     ownerState: f,
-    ref: n,
+    ref: a,
     className: U(h.root, B),
     ...I,
     classes: h
@@ -487,7 +487,7 @@ process.env.NODE_ENV !== "production" && (W.propTypes = {
    */
   value: e.any
 });
-const ve = oe("div")(({ disabled: o }) => ({
+const ve = oe("div")(() => ({
   ...te`
     display: flex;
     flex-wrap: nowrap;
@@ -505,29 +505,23 @@ const ve = oe("div")(({ disabled: o }) => ({
       padding: 0;
       width: 19px;
       height: 19px;
-
-      cursor: ${o ? "default" : "pointer"};
-
-      input {
-        cursor: ${o ? "default" : "pointer"};
-      }
     }
 
     .Mui-checked {
-      color: ${ne.colors.green} !important;
+      color: ${ae.colors.green} !important;
     }
   `
 })), Me = ({
   label: o,
   colon: t = !0,
-  noLabel: n = !1,
-  ...a
+  noLabel: a = !1,
+  ...s
 }) => /* @__PURE__ */ z(ve, { className: "jcLabeledCheckbox", children: [
-  !n && /* @__PURE__ */ z("span", { className: "jcCheckboxLabel", children: [
+  !a && /* @__PURE__ */ z("span", { className: "jcCheckboxLabel", children: [
     o,
     t && ":"
   ] }),
-  /* @__PURE__ */ c(W, { ...a })
+  /* @__PURE__ */ r(W, { ...s })
 ] });
 export {
   Me as LabeledCheckbox,

package/package.json

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