jcicl 1.0.11 → 1.0.13

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';
+    variant?: 1 | 2 | 'unstyled' | 'copy' | 'icon' | 'bibi' | 'bibiOutlined' | 'bibiInverse' | 'filter' | 'custom' | 'pill';
     size?: number;
     color?: string;
     highlightColor?: string;

package/Button/Button.js

@@ -1,42 +1,43 @@
-import { jsxs as I, jsx as i } from "react/jsx-runtime";
-import * as w from "react";
+import { jsxs as T, 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, h as X, u as Y, b as P, P as r, d as Z, e as $ } from "../.chunks/DefaultPropsProvider.js";
+import { g as J, a as K, s, r as Q, c as p, h as X, u as Y, b as W, 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 O } from "../.chunks/ButtonBase.js";
+import { B as k } from "../.chunks/ButtonBase.js";
 import { i as ro } from "../.chunks/emotion-styled.browser.esm.js";
-import { c as v } from "../.chunks/emotion-react.browser.esm.js";
+import { c as g } from "../.chunks/emotion-react.browser.esm.js";
 import t from "../theme.js";
-import { Tooltip as ao } from "../Tooltip/Tooltip.js";
-import { C as eo } from "../.chunks/check.js";
-function no(o) {
+import { Tooltip as eo } 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);
 }
-const g = 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"]), W = /* @__PURE__ */ w.createContext({});
-process.env.NODE_ENV !== "production" && (W.displayName = "ButtonGroupContext");
-const j = /* @__PURE__ */ w.createContext(void 0);
-process.env.NODE_ENV !== "production" && (j.displayName = "ButtonGroupButtonContext");
-const io = (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 {
-    color: a,
-    disableElevation: e,
+    color: r,
+    disableElevation: a,
     fullWidth: n,
-    size: d,
+    size: c,
     variant: u,
     classes: b
-  } = o, x = {
-    root: ["root", u, `${u}${p(a)}`, `size${p(d)}`, `${u}Size${p(d)}`, `color${p(a)}`, e && "disableElevation", n && "fullWidth"],
+  } = o, v = {
+    root: ["root", u, `${u}${p(r)}`, `size${p(c)}`, `${u}Size${p(c)}`, `color${p(r)}`, a && "disableElevation", n && "fullWidth"],
     label: ["label"],
-    startIcon: ["icon", "startIcon", `iconSize${p(d)}`],
-    endIcon: ["icon", "endIcon", `iconSize${p(d)}`]
-  }, f = Z(x, no, b);
+    startIcon: ["icon", "startIcon", `iconSize${p(c)}`],
+    endIcon: ["icon", "endIcon", `iconSize${p(c)}`]
+  }, f = Z(v, io, b);
   return {
     ...b,
     // forward the focused, disabled, etc. classes to the ButtonBase
     ...f
   };
-}, V = [{
+}, F = [{
   props: {
     size: "small"
   },
@@ -63,20 +64,20 @@ const io = (o) => {
       fontSize: 22
     }
   }
-}], so = s(O, {
+}], lo = s(k, {
   shouldForwardProp: (o) => Q(o) || o === "classes",
   name: "MuiButton",
   slot: "Root",
-  overridesResolver: (o, a) => {
+  overridesResolver: (o, r) => {
     const {
-      ownerState: e
+      ownerState: a
     } = o;
-    return [a.root, a[e.variant], a[`${e.variant}${p(e.color)}`], a[`size${p(e.size)}`], a[`${e.variant}Size${p(e.size)}`], e.color === "inherit" && a.colorInherit, e.disableElevation && a.disableElevation, e.fullWidth && a.fullWidth];
+    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];
   }
 })(oo(({
   theme: o
 }) => {
-  const a = o.palette.mode === "light" ? o.palette.grey[300] : o.palette.grey[800], e = 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], a = o.palette.mode === "light" ? o.palette.grey.A100 : o.palette.grey[700];
   return {
     ...o.typography.button,
     minWidth: 64,
@@ -89,7 +90,7 @@ const io = (o) => {
     "&:hover": {
       textDecoration: "none"
     },
-    [`&.${g.disabled}`]: {
+    [`&.${x.disabled}`]: {
       color: (o.vars || o).palette.action.disabled
     },
     variants: [{
@@ -110,10 +111,10 @@ const io = (o) => {
         "&:active": {
           boxShadow: (o.vars || o).shadows[8]
         },
-        [`&.${g.focusVisible}`]: {
+        [`&.${x.focusVisible}`]: {
           boxShadow: (o.vars || o).shadows[6]
         },
-        [`&.${g.disabled}`]: {
+        [`&.${x.disabled}`]: {
           color: (o.vars || o).palette.action.disabled,
           boxShadow: (o.vars || o).shadows[0],
           backgroundColor: (o.vars || o).palette.action.disabledBackground
@@ -129,7 +130,7 @@ const io = (o) => {
         borderColor: "var(--variant-outlinedBorder, currentColor)",
         backgroundColor: "var(--variant-outlinedBg)",
         color: "var(--variant-outlinedColor)",
-        [`&.${g.disabled}`]: {
+        [`&.${x.disabled}`]: {
           border: `1px solid ${(o.vars || o).palette.action.disabledBackground}`
         }
       }
@@ -149,15 +150,15 @@ const io = (o) => {
       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)` : $(o.palette[n].main, 0.5),
+        "--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,
         "@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})` : $(o.palette[n].main, o.palette.action.hoverOpacity),
+            "--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})` : $(o.palette[n].main, o.palette.action.hoverOpacity)
+            "--variant-outlinedBg": o.vars ? `rgba(${o.vars.palette[n].mainChannel} / ${o.vars.palette.action.hoverOpacity})` : h(o.palette[n].main, o.palette.action.hoverOpacity)
           }
         }
       }
@@ -168,12 +169,12 @@ const io = (o) => {
       style: {
         color: "inherit",
         borderColor: "currentColor",
-        "--variant-containedBg": o.vars ? o.vars.palette.Button.inheritContainedBg : a,
+        "--variant-containedBg": o.vars ? o.vars.palette.Button.inheritContainedBg : r,
         "@media (hover: hover)": {
           "&:hover": {
-            "--variant-containedBg": o.vars ? o.vars.palette.Button.inheritContainedHoverBg : e,
-            "--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)
+            "--variant-containedBg": o.vars ? o.vars.palette.Button.inheritContainedHoverBg : a,
+            "--variant-textBg": o.vars ? `rgba(${o.vars.palette.text.primaryChannel} / ${o.vars.palette.action.hoverOpacity})` : 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)
           }
         }
       }
@@ -240,13 +241,13 @@ const io = (o) => {
         "&:hover": {
           boxShadow: "none"
         },
-        [`&.${g.focusVisible}`]: {
+        [`&.${x.focusVisible}`]: {
           boxShadow: "none"
         },
         "&:active": {
           boxShadow: "none"
         },
-        [`&.${g.disabled}`]: {
+        [`&.${x.disabled}`]: {
           boxShadow: "none"
         }
       }
@@ -259,14 +260,14 @@ const io = (o) => {
       }
     }]
   };
-})), lo = s("span", {
+})), co = s("span", {
   name: "MuiButton",
   slot: "StartIcon",
-  overridesResolver: (o, a) => {
+  overridesResolver: (o, r) => {
     const {
-      ownerState: e
+      ownerState: a
     } = o;
-    return [a.startIcon, a[`iconSize${p(e.size)}`]];
+    return [r.startIcon, r[`iconSize${p(a.size)}`]];
   }
 })({
   display: "inherit",
@@ -279,15 +280,15 @@ const io = (o) => {
     style: {
       marginLeft: -2
     }
-  }, ...V]
-}), co = s("span", {
+  }, ...F]
+}), po = s("span", {
   name: "MuiButton",
   slot: "EndIcon",
-  overridesResolver: (o, a) => {
+  overridesResolver: (o, r) => {
     const {
-      ownerState: e
+      ownerState: a
     } = o;
-    return [a.endIcon, a[`iconSize${p(e.size)}`]];
+    return [r.endIcon, r[`iconSize${p(a.size)}`]];
   }
 })({
   display: "inherit",
@@ -300,62 +301,62 @@ const io = (o) => {
     style: {
       marginRight: -2
     }
-  }, ...V]
-}), F = /* @__PURE__ */ w.forwardRef(function(a, e) {
-  const n = w.useContext(W), d = w.useContext(j), u = X(n, a), b = Y({
+  }, ...F]
+}), M = /* @__PURE__ */ B.forwardRef(function(r, a) {
+  const n = B.useContext(j), c = B.useContext(V), u = X(n, r), b = Y({
     props: u,
     name: "MuiButton"
   }), {
-    children: x,
+    children: v,
     color: f = "primary",
     component: l = "button",
-    className: z,
-    disabled: B = !1,
-    disableElevation: c = !1,
+    className: I,
+    disabled: S = !1,
+    disableElevation: d = !1,
     disableFocusRipple: y = !1,
     endIcon: m,
-    focusVisibleClassName: R,
-    fullWidth: k = !1,
-    size: L = "medium",
-    startIcon: T,
-    type: E,
+    focusVisibleClassName: z,
+    fullWidth: R = !1,
+    size: O = "medium",
+    startIcon: E,
+    type: P,
     variant: H = "text",
     ...D
   } = b, C = {
     ...b,
     color: f,
     component: l,
-    disabled: B,
-    disableElevation: c,
+    disabled: S,
+    disableElevation: d,
     disableFocusRipple: y,
-    fullWidth: k,
-    size: L,
-    type: E,
+    fullWidth: R,
+    size: O,
+    type: P,
     variant: H
-  }, h = io(C), U = T && /* @__PURE__ */ i(lo, {
-    className: h.startIcon,
+  }, $ = so(C), U = E && /* @__PURE__ */ i(co, {
+    className: $.startIcon,
     ownerState: C,
-    children: T
-  }), _ = m && /* @__PURE__ */ i(co, {
-    className: h.endIcon,
+    children: E
+  }), _ = m && /* @__PURE__ */ i(po, {
+    className: $.endIcon,
     ownerState: C,
     children: m
-  }), A = d || "";
-  return /* @__PURE__ */ I(so, {
+  }), A = c || "";
+  return /* @__PURE__ */ T(lo, {
     ownerState: C,
-    className: P(n.className, h.root, z, A),
+    className: W(n.className, $.root, I, A),
     component: l,
-    disabled: B,
+    disabled: S,
     focusRipple: !y,
-    focusVisibleClassName: P(h.focusVisible, R),
-    ref: e,
-    type: E,
+    focusVisibleClassName: W($.focusVisible, z),
+    ref: a,
+    type: P,
     ...D,
-    classes: h,
-    children: [U, x, _]
+    classes: $,
+    children: [U, v, _]
   });
 });
-process.env.NODE_ENV !== "production" && (F.propTypes = {
+process.env.NODE_ENV !== "production" && (M.propTypes = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
@@ -363,42 +364,42 @@ process.env.NODE_ENV !== "production" && (F.propTypes = {
   /**
    * The content of the component.
    */
-  children: r.node,
+  children: e.node,
   /**
    * Override or extend the styles applied to the component.
    */
-  classes: r.object,
+  classes: e.object,
   /**
    * @ignore
    */
-  className: r.string,
+  className: e.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: r.oneOfType([r.oneOf(["inherit", "primary", "secondary", "success", "error", "info", "warning"]), r.string]),
+  color: e.oneOfType([e.oneOf(["inherit", "primary", "secondary", "success", "error", "info", "warning"]), e.string]),
   /**
    * The component used for the root node.
    * Either a string to use a HTML element or a component.
    */
-  component: r.elementType,
+  component: e.elementType,
   /**
    * If `true`, the component is disabled.
    * @default false
    */
-  disabled: r.bool,
+  disabled: e.bool,
   /**
    * If `true`, no elevation is used.
    * @default false
    */
-  disableElevation: r.bool,
+  disableElevation: e.bool,
   /**
    * If `true`, the  keyboard focus ripple is disabled.
    * @default false
    */
-  disableFocusRipple: r.bool,
+  disableFocusRipple: e.bool,
   /**
    * If `true`, the ripple effect is disabled.
    *
@@ -406,57 +407,57 @@ process.env.NODE_ENV !== "production" && (F.propTypes = {
    * to highlight the element by applying separate styles with the `.Mui-focusVisible` class.
    * @default false
    */
-  disableRipple: r.bool,
+  disableRipple: e.bool,
   /**
    * Element placed after the children.
    */
-  endIcon: r.node,
+  endIcon: e.node,
   /**
    * @ignore
    */
-  focusVisibleClassName: r.string,
+  focusVisibleClassName: e.string,
   /**
    * If `true`, the button will take up the full width of its container.
    * @default false
    */
-  fullWidth: r.bool,
+  fullWidth: e.bool,
   /**
    * The URL to link to when the button is clicked.
    * If defined, an `a` element will be used as the root node.
    */
-  href: r.string,
+  href: e.string,
   /**
    * The size of the component.
    * `small` is equivalent to the dense button styling.
    * @default 'medium'
    */
-  size: r.oneOfType([r.oneOf(["small", "medium", "large"]), r.string]),
+  size: e.oneOfType([e.oneOf(["small", "medium", "large"]), e.string]),
   /**
    * Element placed before the children.
    */
-  startIcon: r.node,
+  startIcon: e.node,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: r.oneOfType([r.arrayOf(r.oneOfType([r.func, r.object, r.bool])), r.func, r.object]),
+  sx: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.object]),
   /**
    * @ignore
    */
-  type: r.oneOfType([r.oneOf(["button", "reset", "submit"]), r.string]),
+  type: e.oneOfType([e.oneOf(["button", "reset", "submit"]), e.string]),
   /**
    * The variant to use.
    * @default 'text'
    */
-  variant: r.oneOfType([r.oneOf(["contained", "outlined", "text"]), r.string])
+  variant: e.oneOfType([e.oneOf(["contained", "outlined", "text"]), e.string])
 });
-const M = [
+const G = [
   "active",
   "customBackgroundColor",
   "customHoverColor",
   "customTextColor",
   "customShadow1",
   "customShadow2"
-], S = s(F, { shouldForwardProp: (o) => !M.includes(o) })`
+], w = s(M, { shouldForwardProp: (o) => !G.includes(o) })`
   text-transform: none;
   &:disabled {
     opacity: 0.5;
@@ -469,7 +470,7 @@ const M = [
   span {
     align-items: center !important;
   }
-`, po = s(S)`
+`, uo = s(w)`
   background-color: ${t.colors.green};
   height: 2.5rem;
   border: 2px solid transparent;
@@ -488,22 +489,22 @@ const M = [
   &:disabled {
     background-color: ${t.colors.darkGreen};
   }
-`, uo = s(S, {
-  shouldForwardProp: (o) => !M.includes(o)
+`, bo = s(w, {
+  shouldForwardProp: (o) => !G.includes(o)
 })(
   ({
     customBackgroundColor: o = t.colors.green,
-    customHoverColor: a = t.colors.darkGreen,
-    customTextColor: e = t.colors.white,
+    customHoverColor: r = t.colors.darkGreen,
+    customTextColor: a = t.colors.white,
     customShadow1: n = t.boxShadows.gray63,
-    customShadow2: d = t.boxShadows.black63
+    customShadow2: c = t.boxShadows.black63
   }) => ({
-    ...v`
+    ...g`
       background-color: ${o};
       border-radius: 0;
       height: 2.5rem;
       border: 2px solid transparent;
-      color: ${e};
+      color: ${a};
       transition: 313ms all ease-in;
       border-radius: 32px;
       font-weight: 400;
@@ -512,15 +513,15 @@ const M = [
       box-shadow: ${n};
       &:hover,
       :focus-visible {
-        background-color: ${a};
-        box-shadow: ${d};
+        background-color: ${r};
+        box-shadow: ${c};
       }
       &:disabled {
-        background-color: ${a};
+        background-color: ${r};
       }
     `
   })
-), bo = s(S)`
+), go = s(w)`
   background-color: ${t.colors.gold};
   height: 2.5rem;
   border: 2px solid transparent;
@@ -539,8 +540,8 @@ const M = [
   &:disabled {
     background-color: ${t.colors.goldHover};
   }
-`, N = s(S)(({ width: o = "114px" }) => ({
-  ...v`
+`, N = s(w)(({ width: o = "114px" }) => ({
+  ...g`
     box-sizing: border-box;
     background-color: ${t.colors.bibiBlue};
     border-radius: 0;
@@ -557,8 +558,8 @@ const M = [
       background-color: ${t.colors.bibiBlueHover};
     }
   `
-})), go = s(N)(({ active: o }) => ({
-  ...v`
+})), xo = s(N)(({ active: o }) => ({
+  ...g`
     background-color: ${o && t.colors.white};
     color: ${o && t.colors.bibiBlue};
     &:hover,
@@ -568,7 +569,7 @@ const M = [
     }
   `
 })), vo = s(N)(() => ({
-  ...v`
+  ...g`
     background-color: ${t.colors.white};
     color: ${t.colors.bibiBlue};
     &:hover,
@@ -578,13 +579,13 @@ const M = [
       color: ${t.colors.white};
     }
   `
-})), G = s(O)`
+})), L = s(k)`
   display: block;
-`, xo = s(G)`
+`, fo = s(L)`
   font-family: inherit;
   font-size: inherit;
   font-weight: inherit;
-`, fo = s("div")`
+`, yo = s("div")`
   display: flex;
   .isCopied {
     color: ${t.colors.gray};
@@ -599,11 +600,11 @@ const M = [
     width: 14px !important;
     margin: 0;
   }
-`, yo = s(O, {
+`, mo = s(k, {
   shouldForwardProp: (o) => typeof o == "string" && ro(o)
 })(
-  ({ size: o, color: a, highlightColor: e, hoverColor: n }) => ({
-    ...v`
+  ({ size: o, color: r, highlightColor: a, hoverColor: n }) => ({
+    ...g`
       display: flex;
       align-items: center;
       justify-content: center;
@@ -613,22 +614,22 @@ const M = [
       &:hover,
       :focus-visible {
         svg {
-          filter: drop-shadow(0 0 6px ${e}) drop-shadow(0 0 6px ${e})
-            drop-shadow(0 0 6px ${e}) drop-shadow(0 0 6px ${e});
-          fill: ${n || a};
+          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};
         }
       }
 
       svg {
         transition: 313ms all ease-in-out;
-        fill: ${a};
+        fill: ${r};
         width: ${o}px;
         height: ${o}px;
       }
     `
   })
-), mo = s(S)(({ active: o }) => ({
-  ...v`
+), $o = s(w)(({ active: o }) => ({
+  ...g`
     box-sizing: border-box;
     background-color: ${o ? t.colors.black : t.colors.white};
     height: 28px;
@@ -646,62 +647,107 @@ const M = [
       background-color: ${o ? t.colors.charcoal : t.colors.gray2};
     }
   `
-})), Ro = ({
+})), ho = s(k)(
+  ({ backgroundColor: o, borderColor: r }) => ({
+    ...g`
+      height: 28px;
+      border-radius: 20px;
+      border-width: 2px;
+      border-style: solid;
+      border-color: ${r}aa ${r} ${r} ${r}aa;
+      background: ${o};
+      color: ${r};
+      padding: 10px;
+      font-size: 0.9rem !important;
+      font-weight: 500;
+      font-family: inherit;
+      transition: all 313ms ease;
+
+      span {
+        display: flex;
+        align-items: center !important;
+      }
+
+      .lucide {
+        height: 15px;
+        margin-left: 5px;
+        margin-right: -8px;
+        stroke: ${r};
+        transition: all 313ms ease;
+      }
+
+      &:hover .lucide {
+        height: 17px;
+        stroke-width: 3;
+        margin-left: 17px;
+      }
+    `
+  })
+), Po = ({
   variant: o = 1,
-  size: a = 50,
-  color: e = t.colors.darkGreen,
-  highlightColor: n = 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,
+  size: r = 50,
+  color: a,
+  highlightColor: n,
+  hoverColor: c,
+  backgroundColor: u,
+  textColor: b,
+  customShadow1: v,
+  customShadow2: f,
   children: l,
-  textToCopy: z,
-  active: B,
-  ...c
+  textToCopy: I,
+  active: S,
+  ...d
 }) => {
+  const y = ao();
   if (o === "custom")
     return /* @__PURE__ */ i(
-      uo,
+      bo,
       {
         customBackgroundColor: u,
-        customHoverColor: d,
+        customHoverColor: c,
         customTextColor: b,
-        customShadow1: x,
+        customShadow1: v,
         customShadow2: f,
         className: "jcCustomButton",
-        ...c,
+        ...d,
         children: l
       }
     );
   if (o === "bibi")
-    return /* @__PURE__ */ i(N, { ...c, children: l });
+    return /* @__PURE__ */ i(N, { ...d, children: l });
   if (o === "bibiOutlined")
-    return /* @__PURE__ */ i(go, { ...c, children: l });
+    return /* @__PURE__ */ i(xo, { ...d, children: l });
   if (o === "bibiInverse")
-    return /* @__PURE__ */ i(vo, { ...c, children: l });
+    return /* @__PURE__ */ i(vo, { ...d, children: l });
   if (o === "unstyled")
-    return /* @__PURE__ */ i(G, { ...c, children: l });
+    return /* @__PURE__ */ i(L, { ...d, children: l });
   if (o === "copy") {
-    const [y, m] = q(!1);
-    return /* @__PURE__ */ I(fo, { onClick: async () => {
+    const [m, z] = q(!1);
+    return /* @__PURE__ */ T(yo, { onClick: async () => {
       try {
-        await navigator.clipboard.writeText(z || String(l)), m(!0), setTimeout(() => m(!1), 1100);
-      } catch (k) {
-        console.error("Failed to copy text: ", k);
+        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(ao, { title: "Copy to clipboard", children: /* @__PURE__ */ i(xo, { ...c, children: l }) }),
-      y && /* @__PURE__ */ I("span", { className: "isCopied", children: [
-        /* @__PURE__ */ i(eo, { size: 12 }),
+      /* @__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 }),
         " Copied"
       ] })
     ] });
   }
-  return o === 2 ? /* @__PURE__ */ i(bo, { ...c, children: /* @__PURE__ */ i("span", { children: l }) }) : o === "icon" ? /* @__PURE__ */ i(yo, { className: "jcIconButton", ...{ size: a, color: e, highlightColor: n, hoverColor: d }, ...c, children: l }) : o === "filter" ? /* @__PURE__ */ i(mo, { className: "jcFilterButton", active: B, ...c, children: l }) : /* @__PURE__ */ i(po, { ...c, children: /* @__PURE__ */ i("span", { children: l }) });
+  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,
+    {
+      backgroundColor: u || y.themeIconBackgroundB,
+      borderColor: b || y.themeIconBackgroundA,
+      ...d,
+      children: /* @__PURE__ */ i("span", { children: l })
+    }
+  ) : /* @__PURE__ */ i(uo, { ...d, children: /* @__PURE__ */ i("span", { children: l }) });
 };
 export {
-  Ro as Button,
-  Ro as default
+  Po as Button,
+  Po as default
 };

package/Pill/Pill.js

@@ -13,6 +13,7 @@ const l = a("span")(
       background-color: ${r};
       padding: 3px 13px;
       border-radius: 21px;
+      cursor: default;
     `
   })
 ), x = (r) => {

package/package.json

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

package/utils.js

@@ -1,14 +1,14 @@
-const h = (e, t = "mmddyyyy") => t === "mmddyyyy" ? new Date(e).toLocaleDateString("en-US", {
+const $ = (r, t = "mmddyyyy") => t === "mmddyyyy" ? new Date(r).toLocaleDateString("en-US", {
   month: "numeric",
   day: "numeric",
   year: "numeric"
-}) : e, g = (e) => {
-  const { line1: t, line2: o, city: i, state: n, zip: c } = e;
-  let r = t;
-  return o && (r += `, ${o}`), i && (r += `, ${i}`), n && (r += `, ${n}`), c && (r += ` ${c}`), r;
-}, $ = (e) => {
-  if (e > 3 && e < 21) return "th";
-  switch (e % 10) {
+}) : r, g = (r) => {
+  const { line1: t, line2: i, city: o, state: n, zip: c } = r;
+  let e = t || "";
+  return i && (e.length > 0 && (e += ", "), e += i), o && (e.length > 0 && (e += ", "), e += o), n && (e.length > 0 && (e += ", "), e += n), c && (e += ` ${c}`), e;
+}, y = (r) => {
+  if (r > 3 && r < 21) return "th";
+  switch (r % 10) {
     case 1:
       return "st";
     case 2:
@@ -18,9 +18,9 @@ const h = (e, t = "mmddyyyy") => t === "mmddyyyy" ? new Date(e).toLocaleDateStri
     default:
       return "th";
   }
-}, p = (e) => {
+}, p = (r) => {
   try {
-    const t = /* @__PURE__ */ new Date(e.replace(" ", "T") + "Z"), i = new Intl.DateTimeFormat("en-US", {
+    const t = /* @__PURE__ */ new Date(r.replace(" ", "T") + "Z"), o = new Intl.DateTimeFormat("en-US", {
       timeZone: "America/Chicago",
       month: "short",
       day: "numeric",
@@ -30,23 +30,23 @@ const h = (e, t = "mmddyyyy") => t === "mmddyyyy" ? new Date(e).toLocaleDateStri
       hour12: !0
     }).formatToParts(t), n = (l) => {
       var a;
-      return ((a = i.find((y) => y.type === l)) == null ? void 0 : a.value) ?? "";
-    }, c = n("month") + ".", r = Number(n("day")), s = n("year"), m = n("hour"), u = n("minute"), d = n("dayPeriod").toLowerCase(), f = $(r);
-    return `${c} ${r}${f}, ${s}, ${m}:${u}${d}`;
+      return ((a = o.find((h) => h.type === l)) == null ? void 0 : a.value) ?? "";
+    }, c = n("month") + ".", e = Number(n("day")), s = n("year"), m = n("hour"), u = n("minute"), d = n("dayPeriod").toLowerCase(), f = y(e);
+    return `${c} ${e}${f}, ${s}, ${m}:${u}${d}`;
   } catch {
-    return e;
+    return r;
   }
-}, D = (e) => {
-  if (e == null) return ["", void 0];
-  let t = e.replace(/\D/g, "") || "";
+}, D = (r) => {
+  if (r == null) return ["", void 0];
+  let t = r.replace(/\D/g, "") || "";
   t.at(0) == "1" && (t = t.slice(1));
-  const o = t.slice(0, 3), i = t.slice(3, 6), n = t.slice(6, 10), c = t.slice(10);
-  let r = t;
-  return t.length >= 4 && (r = `(${o}) ${t.slice(3)}`), t.length >= 7 && (r = `(${o}) ${i}-${t.slice(6)}`), t.length > 10 && (r = `(${o}) ${i}-${n} ext. ${c}`), [r, t];
+  const i = t.slice(0, 3), o = t.slice(3, 6), n = t.slice(6, 10), c = t.slice(10);
+  let e = t;
+  return t.length >= 4 && (e = `(${i}) ${t.slice(3)}`), t.length >= 7 && (e = `(${i}) ${o}-${t.slice(6)}`), t.length > 10 && (e = `(${i}) ${o}-${n} ext. ${c}`), [e, t];
 };
 export {
   g as formatAddress,
-  h as formatDate,
+  $ as formatDate,
   D as formatPhoneNumber,
   p as formatTimestamp
 };