jcicl 0.0.313 → 0.0.317

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 U, 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 t, 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 m } 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 { c as v } from "../.chunks/emotion-react.browser.esm.js";
 import r 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 to = (o) => {
+const g = 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 ro = (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, {
+}], to = s(m, {
   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}`]: {
+    [`&.${g.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}`]: {
+        [`&.${g.focusVisible}`]: {
           boxShadow: (o.vars || o).shadows[6]
         },
-        [`&.${b.disabled}`]: {
+        [`&.${g.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}`]: {
+        [`&.${g.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}`]: {
+        [`&.${g.focusVisible}`]: {
           boxShadow: "none"
         },
         "&:active": {
           boxShadow: "none"
         },
-        [`&.${b.disabled}`]: {
+        [`&.${g.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: h,
+    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 = ro(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 || "";
-  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),
+  }), H = d || "";
+  return /* @__PURE__ */ U(to, {
+    ownerState: w,
+    className: R(e.className, y.root, h, H),
+    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`.     │
@@ -446,7 +446,7 @@ process.env.NODE_ENV !== "production" && (T.propTypes = {
    */
   variant: t.oneOfType([t.oneOf(["contained", "outlined", "text"]), t.string])
 });
-const $ = c(T)`
+const S = s(j)`
   text-transform: none;
   &:disabled {
     opacity: 0.5;
@@ -455,7 +455,7 @@ const $ = c(T)`
     justify-content: center;
     align-items: center;
   }
-`, eo = c($)`
+`, eo = s(S)`
   background-color: ${r.colors.green};
   border-radius: 0;
   height: 2.5rem;
@@ -475,12 +475,58 @@ const $ = c(T)`
   &:disabled {
     background-color: ${r.colors.darkGreen};
   }
-`, io = c($)`
-  color: ${r.colors.black};
-  border: 3px solid ${r.colors.blue};
-  padding: 0.5rem 2rem;
-`, z = c($)(({ width: o = "114px" }) => ({
-  ...f`
+`, io = s(S)(
+  ({
+    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
+  }) => ({
+    ...v`
+      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)`
+  background-color: ${r.colors.gold};
+  border-radius: 0;
+  height: 2.5rem;
+  border: 2px solid transparent;
+  color: ${r.colors.midnight};
+  transition: 313ms all ease-in;
+  border-radius: 32px;
+  font-weight: 400;
+  padding: 0.75rem 2rem;
+  font-size: 19px;
+  box-shadow: ${r.boxShadows.gray63};
+  &:hover,
+  :focus-visible {
+    background-color: ${r.colors.goldHover};
+    box-shadow: ${r.boxShadows.gray63};
+  }
+  &:disabled {
+    background-color: ${r.colors.goldHover};
+  }
+`, z = s(S)(({ width: o = "114px" }) => ({
+  ...v`
     box-sizing: border-box;
     background-color: ${r.colors.bibiBlue};
     border-radius: 0;
@@ -497,8 +543,8 @@ const $ = c(T)`
       background-color: ${r.colors.bibiBlueHover};
     }
   `
-})), so = c(z)(({ active: o }) => ({
-  ...f`
+})), lo = s(z)(({ active: o }) => ({
+  ...v`
     background-color: ${o && r.colors.white};
     color: ${o && r.colors.bibiBlue};
     &:hover,
@@ -507,8 +553,8 @@ const $ = c(T)`
       color: ${r.colors.bibiBlue};
     }
   `
-})), lo = c(z)(() => ({
-  ...f`
+})), co = s(z)(() => ({
+  ...v`
     background-color: ${r.colors.white};
     color: ${r.colors.bibiBlue};
     &:hover,
@@ -518,13 +564,13 @@ const $ = c(T)`
       color: ${r.colors.white};
     }
   `
-})), co = c(S)`
+})), po = s(m)`
   border-radius: 8px;
-`, po = c(S, {
+`, uo = s(m, {
   shouldForwardProp: (o) => typeof o == "string" && Z(o)
 })(
   ({ size: o, color: a, highlightColor: n, hoverColor: e }) => ({
-    ...f`
+    ...v`
       display: flex;
       align-items: center;
       justify-content: center;
@@ -548,8 +594,8 @@ const $ = c(T)`
       }
     `
   })
-), uo = c($)(({ active: o }) => ({
-  ...f`
+), bo = s(S)(({ active: o }) => ({
+  ...v`
     box-sizing: border-box;
     background-color: ${o ? r.colors.black : r.colors.white};
     height: 28px;
@@ -567,17 +613,33 @@ const $ = c(T)`
       background-color: ${o ? r.colors.charcoal : r.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 }) });
+  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,
+  children: l,
+  active: h,
+  ...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(z, { ...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: h, ...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
 };