jcicl 1.0.9 → 1.0.13

package/Button/Button.js

@@ -1,39 +1,43 @@
-import { jsxs as _, jsx as i } from "react/jsx-runtime";
-import * as S from "react";
-import { g as A, a as q, s, r as J, c as p, j as K, u as Q, b as R, P as t, d as X, e as $ } from "../.chunks/DefaultPropsProvider.js";
-import { m as Y } from "../.chunks/memoTheme.js";
-import { c as Z } from "../.chunks/createSimplePaletteValueFilter.js";
-import { B as h } from "../.chunks/ButtonBase.js";
-import { i as oo } from "../.chunks/emotion-styled.browser.esm.js";
-import { c as v } from "../.chunks/emotion-react.browser.esm.js";
-import r from "../theme.js";
-function ro(o) {
-  return A("MuiButton", o);
+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 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 k } from "../.chunks/ButtonBase.js";
+import { i as ro } 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 { useThemeColors as ao } from "../ThemeContext.js";
+import { C as no } from "../.chunks/check.js";
+function io(o) {
+  return J("MuiButton", o);
 }
-const g = 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"]), E = /* @__PURE__ */ S.createContext({});
-process.env.NODE_ENV !== "production" && (E.displayName = "ButtonGroupContext");
-const T = /* @__PURE__ */ S.createContext(void 0);
-process.env.NODE_ENV !== "production" && (T.displayName = "ButtonGroupButtonContext");
-const to = (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: n,
-    fullWidth: e,
-    size: d,
+    color: r,
+    disableElevation: a,
+    fullWidth: n,
+    size: c,
     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"],
+  } = 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 = X(x, ro, 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
   };
-}, P = [{
+}, F = [{
   props: {
     size: "small"
   },
@@ -60,20 +64,20 @@ const to = (o) => {
       fontSize: 22
     }
   }
-}], ao = s(h, {
-  shouldForwardProp: (o) => J(o) || o === "classes",
+}], lo = s(k, {
+  shouldForwardProp: (o) => Q(o) || o === "classes",
   name: "MuiButton",
   slot: "Root",
-  overridesResolver: (o, a) => {
+  overridesResolver: (o, r) => {
     const {
-      ownerState: n
+      ownerState: a
     } = o;
-    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];
+    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];
   }
-})(Y(({
+})(oo(({
   theme: o
 }) => {
-  const a = 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];
+  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,
@@ -86,7 +90,7 @@ const to = (o) => {
     "&:hover": {
       textDecoration: "none"
     },
-    [`&.${g.disabled}`]: {
+    [`&.${x.disabled}`]: {
       color: (o.vars || o).palette.action.disabled
     },
     variants: [{
@@ -107,10 +111,10 @@ const to = (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
@@ -126,7 +130,7 @@ const to = (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}`
         }
       }
@@ -139,22 +143,22 @@ const to = (o) => {
         color: "var(--variant-textColor)",
         backgroundColor: "var(--variant-textBg)"
       }
-    }, ...Object.entries(o.palette).filter(Z()).map(([e]) => ({
+    }, ...Object.entries(o.palette).filter(to()).map(([n]) => ({
       props: {
-        color: e
+        color: n
       },
       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)` : $(o.palette[e].main, 0.5),
-        "--variant-containedColor": (o.vars || o).palette[e].contrastText,
-        "--variant-containedBg": (o.vars || o).palette[e].main,
+        "--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,
         "@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})` : $(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})` : $(o.palette[e].main, o.palette.action.hoverOpacity)
+            "--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)
           }
         }
       }
@@ -165,12 +169,12 @@ const to = (o) => {
       style: {
         color: "inherit",
         borderColor: "currentColor",
-        "--variant-containedBg": o.vars ? o.vars.palette.Button.inheritContainedBg : a,
+        "--variant-containedBg": o.vars ? o.vars.palette.Button.inheritContainedBg : r,
         "@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})` : $(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)
           }
         }
       }
@@ -237,13 +241,13 @@ const to = (o) => {
         "&:hover": {
           boxShadow: "none"
         },
-        [`&.${g.focusVisible}`]: {
+        [`&.${x.focusVisible}`]: {
           boxShadow: "none"
         },
         "&:active": {
           boxShadow: "none"
         },
-        [`&.${g.disabled}`]: {
+        [`&.${x.disabled}`]: {
           boxShadow: "none"
         }
       }
@@ -256,14 +260,14 @@ const to = (o) => {
       }
     }]
   };
-})), no = s("span", {
+})), co = s("span", {
   name: "MuiButton",
   slot: "StartIcon",
-  overridesResolver: (o, a) => {
+  overridesResolver: (o, r) => {
     const {
-      ownerState: n
+      ownerState: a
     } = o;
-    return [a.startIcon, a[`iconSize${p(n.size)}`]];
+    return [r.startIcon, r[`iconSize${p(a.size)}`]];
   }
 })({
   display: "inherit",
@@ -276,15 +280,15 @@ const to = (o) => {
     style: {
       marginLeft: -2
     }
-  }, ...P]
-}), eo = s("span", {
+  }, ...F]
+}), po = s("span", {
   name: "MuiButton",
   slot: "EndIcon",
-  overridesResolver: (o, a) => {
+  overridesResolver: (o, r) => {
     const {
-      ownerState: n
+      ownerState: a
     } = o;
-    return [a.endIcon, a[`iconSize${p(n.size)}`]];
+    return [r.endIcon, r[`iconSize${p(a.size)}`]];
   }
 })({
   display: "inherit",
@@ -297,62 +301,62 @@ const to = (o) => {
     style: {
       marginRight: -2
     }
-  }, ...P]
-}), j = /* @__PURE__ */ S.forwardRef(function(a, n) {
-  const e = S.useContext(E), d = S.useContext(T), u = K(e, a), b = Q({
+  }, ...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: m,
-    disabled: c = !1,
-    disableElevation: C = !1,
-    disableFocusRipple: k = !1,
-    endIcon: I,
-    focusVisibleClassName: V,
-    fullWidth: M = !1,
-    size: F = "medium",
-    startIcon: O,
-    type: N,
-    variant: G = "text",
-    ...L
-  } = b, w = {
+    className: I,
+    disabled: S = !1,
+    disableElevation: d = !1,
+    disableFocusRipple: y = !1,
+    endIcon: m,
+    focusVisibleClassName: z,
+    fullWidth: R = !1,
+    size: O = "medium",
+    startIcon: E,
+    type: P,
+    variant: H = "text",
+    ...D
+  } = b, C = {
     ...b,
     color: f,
     component: l,
-    disabled: c,
-    disableElevation: C,
-    disableFocusRipple: k,
-    fullWidth: M,
-    size: F,
-    type: N,
-    variant: G
-  }, y = to(w), H = O && /* @__PURE__ */ i(no, {
-    className: y.startIcon,
-    ownerState: w,
-    children: O
-  }), D = I && /* @__PURE__ */ i(eo, {
-    className: y.endIcon,
-    ownerState: w,
-    children: I
-  }), U = d || "";
-  return /* @__PURE__ */ _(ao, {
-    ownerState: w,
-    className: R(e.className, y.root, m, U),
+    disabled: S,
+    disableElevation: d,
+    disableFocusRipple: y,
+    fullWidth: R,
+    size: O,
+    type: P,
+    variant: H
+  }, $ = so(C), U = E && /* @__PURE__ */ i(co, {
+    className: $.startIcon,
+    ownerState: C,
+    children: E
+  }), _ = m && /* @__PURE__ */ i(po, {
+    className: $.endIcon,
+    ownerState: C,
+    children: m
+  }), A = c || "";
+  return /* @__PURE__ */ T(lo, {
+    ownerState: C,
+    className: W(n.className, $.root, I, A),
     component: l,
-    disabled: c,
-    focusRipple: !k,
-    focusVisibleClassName: R(y.focusVisible, V),
-    ref: n,
-    type: N,
-    ...L,
-    classes: y,
-    children: [H, x, D]
+    disabled: S,
+    focusRipple: !y,
+    focusVisibleClassName: W($.focusVisible, z),
+    ref: a,
+    type: P,
+    ...D,
+    classes: $,
+    children: [U, v, _]
   });
 });
-process.env.NODE_ENV !== "production" && (j.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`.     │
@@ -360,42 +364,42 @@ process.env.NODE_ENV !== "production" && (j.propTypes = {
   /**
    * The content of the component.
    */
-  children: t.node,
+  children: e.node,
   /**
    * Override or extend the styles applied to the component.
    */
-  classes: t.object,
+  classes: e.object,
   /**
    * @ignore
    */
-  className: t.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: t.oneOfType([t.oneOf(["inherit", "primary", "secondary", "success", "error", "info", "warning"]), t.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: t.elementType,
+  component: e.elementType,
   /**
    * If `true`, the component is disabled.
    * @default false
    */
-  disabled: t.bool,
+  disabled: e.bool,
   /**
    * If `true`, no elevation is used.
    * @default false
    */
-  disableElevation: t.bool,
+  disableElevation: e.bool,
   /**
    * If `true`, the  keyboard focus ripple is disabled.
    * @default false
    */
-  disableFocusRipple: t.bool,
+  disableFocusRipple: e.bool,
   /**
    * If `true`, the ripple effect is disabled.
    *
@@ -403,61 +407,61 @@ process.env.NODE_ENV !== "production" && (j.propTypes = {
    * to highlight the element by applying separate styles with the `.Mui-focusVisible` class.
    * @default false
    */
-  disableRipple: t.bool,
+  disableRipple: e.bool,
   /**
    * Element placed after the children.
    */
-  endIcon: t.node,
+  endIcon: e.node,
   /**
    * @ignore
    */
-  focusVisibleClassName: t.string,
+  focusVisibleClassName: e.string,
   /**
    * If `true`, the button will take up the full width of its container.
    * @default false
    */
-  fullWidth: t.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: t.string,
+  href: e.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: e.oneOfType([e.oneOf(["small", "medium", "large"]), e.string]),
   /**
    * Element placed before the children.
    */
-  startIcon: t.node,
+  startIcon: e.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: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.object]),
   /**
    * @ignore
    */
-  type: t.oneOfType([t.oneOf(["button", "reset", "submit"]), t.string]),
+  type: e.oneOfType([e.oneOf(["button", "reset", "submit"]), e.string]),
   /**
    * The variant to use.
    * @default 'text'
    */
-  variant: t.oneOfType([t.oneOf(["contained", "outlined", "text"]), t.string])
+  variant: e.oneOfType([e.oneOf(["contained", "outlined", "text"]), e.string])
 });
-const W = [
+const G = [
   "active",
   "customBackgroundColor",
   "customHoverColor",
   "customTextColor",
   "customShadow1",
   "customShadow2"
-], B = s(j, { shouldForwardProp: (o) => !W.includes(o) })`
+], w = s(M, { shouldForwardProp: (o) => !G.includes(o) })`
   text-transform: none;
   &:disabled {
     opacity: 0.5;
-    color: ${r.colors.black};
+    color: ${t.colors.black};
     display: flex;
     justify-content: center;
     align-items: center;
@@ -466,122 +470,141 @@ const W = [
   span {
     align-items: center !important;
   }
-`, io = s(B)`
-  background-color: ${r.colors.green};
+`, uo = s(w)`
+  background-color: ${t.colors.green};
   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};
   }
-`, so = s(B, {
-  shouldForwardProp: (o) => !W.includes(o)
+`, bo = s(w, {
+  shouldForwardProp: (o) => !G.includes(o)
 })(
   ({
-    customBackgroundColor: o = r.colors.green,
-    customHoverColor: a = r.colors.darkGreen,
-    customTextColor: n = r.colors.white,
-    customShadow1: e = r.boxShadows.gray63,
-    customShadow2: d = r.boxShadows.black63
+    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
   }) => ({
-    ...v`
+    ...g`
       background-color: ${o};
       border-radius: 0;
       height: 2.5rem;
       border: 2px solid transparent;
-      color: ${n};
+      color: ${a};
       transition: 313ms all ease-in;
       border-radius: 32px;
       font-weight: 400;
       padding: 0.75rem 2rem;
       font-size: 1rem;
-      box-shadow: ${e};
+      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};
       }
     `
   })
-), lo = s(B)`
-  background-color: ${r.colors.gold};
+), go = s(w)`
+  background-color: ${t.colors.gold};
   height: 2.5rem;
   border: 2px solid transparent;
-  color: ${r.colors.midnight};
+  color: ${t.colors.midnight};
   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.goldHover};
-    box-shadow: ${r.boxShadows.gray63};
+    background-color: ${t.colors.goldHover};
+    box-shadow: ${t.boxShadows.gray63};
   }
   &:disabled {
-    background-color: ${r.colors.goldHover};
+    background-color: ${t.colors.goldHover};
   }
-`, z = s(B)(({ width: o = "114px" }) => ({
-  ...v`
+`, N = s(w)(({ 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};
     }
   `
-})), co = s(z)(({ active: o }) => ({
-  ...v`
-    background-color: ${o && r.colors.white};
-    color: ${o && r.colors.bibiBlue};
+})), xo = s(N)(({ 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};
     }
   `
-})), po = s(z)(() => ({
-  ...v`
-    background-color: ${r.colors.white};
-    color: ${r.colors.bibiBlue};
+})), vo = s(N)(() => ({
+  ...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};
     }
   `
-})), uo = s(h)`
+})), L = s(k)`
   display: block;
-`, bo = s(h, {
-  shouldForwardProp: (o) => typeof o == "string" && oo(o)
+`, fo = s(L)`
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+`, yo = s("div")`
+  display: flex;
+  .isCopied {
+    color: ${t.colors.gray};
+    display: inline;
+    margin-left: 8px;
+    font-size: smaller;
+    align-content: center;
+  }
+  .isCopied > svg {
+    vertical-align: middle;
+    height: 14px !important;
+    width: 14px !important;
+    margin: 0;
+  }
+`, mo = s(k, {
+  shouldForwardProp: (o) => typeof o == "string" && ro(o)
 })(
-  ({ size: o, color: a, highlightColor: n, hoverColor: e }) => ({
-    ...v`
+  ({ size: o, color: r, highlightColor: a, hoverColor: n }) => ({
+    ...g`
       display: flex;
       align-items: center;
       justify-content: center;
@@ -591,66 +614,140 @@ const W = [
       &:hover,
       :focus-visible {
         svg {
-          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: ${e || 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;
       }
     `
   })
-), go = s(B)(({ active: o }) => ({
-  ...v`
+), $o = s(w)(({ 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};
     }
   `
-})), mo = ({
+})), 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: n = r.colors.darkGreen,
-  highlightColor: e = r.colors.dandelion,
-  hoverColor: d = r.colors.green,
-  backgroundColor: u = r.colors.darkGreen,
-  textColor: b = r.colors.white,
-  customShadow1: x = r.boxShadows.gray63,
-  customShadow2: f = r.boxShadows.black63,
+  size: r = 50,
+  color: a,
+  highlightColor: n,
+  hoverColor: c,
+  backgroundColor: u,
+  textColor: b,
+  customShadow1: v,
+  customShadow2: f,
   children: l,
-  active: m,
-  ...c
-}) => o === "custom" ? /* @__PURE__ */ i(
-  so,
-  {
-    customBackgroundColor: u,
-    customHoverColor: d,
-    customTextColor: b,
-    customShadow1: x,
-    customShadow2: f,
-    className: "jcCustomButton",
-    ...c,
-    children: l
+  textToCopy: I,
+  active: S,
+  ...d
+}) => {
+  const y = ao();
+  if (o === "custom")
+    return /* @__PURE__ */ i(
+      bo,
+      {
+        customBackgroundColor: u,
+        customHoverColor: c,
+        customTextColor: b,
+        customShadow1: v,
+        customShadow2: f,
+        className: "jcCustomButton",
+        ...d,
+        children: l
+      }
+    );
+  if (o === "bibi")
+    return /* @__PURE__ */ i(N, { ...d, children: l });
+  if (o === "bibiOutlined")
+    return /* @__PURE__ */ i(xo, { ...d, children: l });
+  if (o === "bibiInverse")
+    return /* @__PURE__ */ i(vo, { ...d, children: l });
+  if (o === "unstyled")
+    return /* @__PURE__ */ i(L, { ...d, children: l });
+  if (o === "copy") {
+    const [m, z] = q(!1);
+    return /* @__PURE__ */ T(yo, { 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 }),
+        " Copied"
+      ] })
+    ] });
   }
-) : o === "bibi" ? /* @__PURE__ */ i(z, { ...c, children: l }) : o === "bibiOutlined" ? /* @__PURE__ */ i(co, { ...c, children: l }) : o === "bibiInverse" ? /* @__PURE__ */ i(po, { ...c, children: l }) : o === "unstyled" ? /* @__PURE__ */ i(uo, { ...c, children: l }) : o === 2 ? /* @__PURE__ */ i(lo, { ...c, children: /* @__PURE__ */ i("span", { children: l }) }) : o === "icon" ? /* @__PURE__ */ i(bo, { className: "jcIconButton", ...{ size: a, color: n, highlightColor: e, hoverColor: d }, ...c, children: l }) : o === "filter" ? /* @__PURE__ */ i(go, { className: "jcFilterButton", active: m, ...c, children: l }) : /* @__PURE__ */ i(io, { ...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 {
-  mo as Button,
-  mo as default
+  Po as Button,
+  Po as default
 };