@hybridcore/ui 1.6.0 → 1.6.2

package/dist/{Button-CvE2gnly.js → Button-C5yquWAB.js}

@@ -1,47 +1,33 @@
-import { a as t, _ as L } from "./objectWithoutPropertiesLoose-DJteAcBH.js";
-import * as f from "react";
+import { a as t, _ as j } from "./objectWithoutPropertiesLoose-DJteAcBH.js";
+import * as p from "react";
 import { P as n } from "./index-C__OZmYy.js";
-import { g as _, u as F, c as h, a as U } from "./useThemeProps-BzzHcQyd.js";
-import { alpha as v } from "@mui/system";
-import { s as x, r as D } from "./styled-eZwjUruw.js";
-import { g as G } from "./createTheme-DYxDnE9u.js";
-import { jsx as m, jsxs as A } from "react/jsx-runtime";
-import { B as q } from "./ButtonBase-2bPw77UP.js";
-import { c as e } from "./capitalize-ciszXJ7R.js";
-function O(o, i) {
-  const a = t({}, i);
-  return Object.keys(o).forEach((r) => {
-    if (r.toString().match(/^(components|slots)$/))
-      a[r] = t({}, o[r], a[r]);
-    else if (r.toString().match(/^(componentsProps|slotProps)$/)) {
-      const l = o[r] || {}, s = i[r];
-      a[r] = {}, !s || !Object.keys(s) ? a[r] = l : !l || !Object.keys(l) ? a[r] = s : (a[r] = t({}, s), Object.keys(l).forEach((c) => {
-        a[r][c] = O(l[c], s[c]);
-      }));
-    } else a[r] === void 0 && (a[r] = o[r]);
-  }), a;
+import { c as m } from "./clsx-OuTLNxxd.js";
+import { g as D, a as F, s as f, r as G, b as r, f as v, h as U, u as H, c as A } from "./generateUtilityClasses-C3ivN9Ie.js";
+import { jsx as R, jsxs as q } from "react/jsx-runtime";
+import { B as J } from "./ButtonBase-BEF7oTOe.js";
+function K(o) {
+  return F("MuiButton", o);
 }
-function H(o) {
-  return G("MuiButton", o);
-}
-const b = _("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", "textSizeSmall", "textSizeMedium", "textSizeLarge", "outlinedSizeSmall", "outlinedSizeMedium", "outlinedSizeLarge", "containedSizeSmall", "containedSizeMedium", "containedSizeLarge", "sizeMedium", "sizeSmall", "sizeLarge", "fullWidth", "startIcon", "endIcon", "iconSizeSmall", "iconSizeMedium", "iconSizeLarge"]), R = /* @__PURE__ */ f.createContext({});
-process.env.NODE_ENV !== "production" && (R.displayName = "ButtonGroupContext");
-const J = ["children", "color", "component", "className", "disabled", "disableElevation", "disableFocusRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"], K = (o) => {
+const b = D("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"]), h = /* @__PURE__ */ p.createContext({});
+process.env.NODE_ENV !== "production" && (h.displayName = "ButtonGroupContext");
+const E = /* @__PURE__ */ p.createContext(void 0);
+process.env.NODE_ENV !== "production" && (E.displayName = "ButtonGroupButtonContext");
+const Q = ["children", "color", "component", "className", "disabled", "disableElevation", "disableFocusRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"], X = (o) => {
   const {
-    color: i,
-    disableElevation: a,
-    fullWidth: r,
-    size: l,
-    variant: s,
+    color: a,
+    disableElevation: i,
+    fullWidth: l,
+    size: s,
+    variant: e,
     classes: c
   } = o, g = {
-    root: ["root", s, `${s}${e(i)}`, `size${e(l)}`, `${s}Size${e(l)}`, i === "inherit" && "colorInherit", a && "disableElevation", r && "fullWidth"],
+    root: ["root", e, `${e}${r(a)}`, `size${r(s)}`, `${e}Size${r(s)}`, `color${r(a)}`, i && "disableElevation", l && "fullWidth"],
     label: ["label"],
-    startIcon: ["startIcon", `iconSize${e(l)}`],
-    endIcon: ["endIcon", `iconSize${e(l)}`]
-  }, p = U(g, H, c);
-  return t({}, c, p);
-}, k = (o) => t({}, o.size === "small" && {
+    startIcon: ["icon", "startIcon", `iconSize${r(s)}`],
+    endIcon: ["icon", "endIcon", `iconSize${r(s)}`]
+  }, x = A(g, K, c);
+  return t({}, c, x);
+}, N = (o) => t({}, o.size === "small" && {
   "& > *:nth-of-type(1)": {
     fontSize: 18
   }
@@ -53,21 +39,22 @@ const J = ["children", "color", "component", "className", "disabled", "disableEl
   "& > *:nth-of-type(1)": {
     fontSize: 22
   }
-}), N = x(q, {
-  shouldForwardProp: (o) => D(o) || o === "classes",
+}), Y = f(J, {
+  shouldForwardProp: (o) => G(o) || o === "classes",
   name: "MuiButton",
   slot: "Root",
-  overridesResolver: (o, i) => {
+  overridesResolver: (o, a) => {
     const {
-      ownerState: a
+      ownerState: i
     } = o;
-    return [i.root, i[a.variant], i[`${a.variant}${e(a.color)}`], i[`size${e(a.size)}`], i[`${a.variant}Size${e(a.size)}`], a.color === "inherit" && i.colorInherit, a.disableElevation && i.disableElevation, a.fullWidth && i.fullWidth];
+    return [a.root, a[i.variant], a[`${i.variant}${r(i.color)}`], a[`size${r(i.size)}`], a[`${i.variant}Size${r(i.size)}`], i.color === "inherit" && a.colorInherit, i.disableElevation && a.disableElevation, i.fullWidth && a.fullWidth];
   }
 })(({
   theme: o,
-  ownerState: i
+  ownerState: a
 }) => {
-  var a, r;
+  var i, l;
+  const s = 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];
   return t({}, o.typography.button, {
     minWidth: 64,
     padding: "6px 16px",
@@ -82,91 +69,91 @@ const J = ["children", "color", "component", "className", "disabled", "disableEl
       "@media (hover: none)": {
         backgroundColor: "transparent"
       }
-    }, i.variant === "text" && i.color !== "inherit" && {
-      backgroundColor: o.vars ? `rgba(${o.vars.palette[i.color].mainChannel} / ${o.vars.palette.action.hoverOpacity})` : v(o.palette[i.color].main, o.palette.action.hoverOpacity),
+    }, a.variant === "text" && a.color !== "inherit" && {
+      backgroundColor: o.vars ? `rgba(${o.vars.palette[a.color].mainChannel} / ${o.vars.palette.action.hoverOpacity})` : v(o.palette[a.color].main, o.palette.action.hoverOpacity),
       // Reset on touch devices, it doesn't add specificity
       "@media (hover: none)": {
         backgroundColor: "transparent"
       }
-    }, i.variant === "outlined" && i.color !== "inherit" && {
-      border: `1px solid ${(o.vars || o).palette[i.color].main}`,
-      backgroundColor: o.vars ? `rgba(${o.vars.palette[i.color].mainChannel} / ${o.vars.palette.action.hoverOpacity})` : v(o.palette[i.color].main, o.palette.action.hoverOpacity),
+    }, a.variant === "outlined" && a.color !== "inherit" && {
+      border: `1px solid ${(o.vars || o).palette[a.color].main}`,
+      backgroundColor: o.vars ? `rgba(${o.vars.palette[a.color].mainChannel} / ${o.vars.palette.action.hoverOpacity})` : v(o.palette[a.color].main, o.palette.action.hoverOpacity),
       // Reset on touch devices, it doesn't add specificity
       "@media (hover: none)": {
         backgroundColor: "transparent"
       }
-    }, i.variant === "contained" && {
-      backgroundColor: (o.vars || o).palette.grey.A100,
+    }, a.variant === "contained" && {
+      backgroundColor: o.vars ? o.vars.palette.Button.inheritContainedHoverBg : e,
       boxShadow: (o.vars || o).shadows[4],
       // Reset on touch devices, it doesn't add specificity
       "@media (hover: none)": {
         boxShadow: (o.vars || o).shadows[2],
         backgroundColor: (o.vars || o).palette.grey[300]
       }
-    }, i.variant === "contained" && i.color !== "inherit" && {
-      backgroundColor: (o.vars || o).palette[i.color].dark,
+    }, a.variant === "contained" && a.color !== "inherit" && {
+      backgroundColor: (o.vars || o).palette[a.color].dark,
       // Reset on touch devices, it doesn't add specificity
       "@media (hover: none)": {
-        backgroundColor: (o.vars || o).palette[i.color].main
+        backgroundColor: (o.vars || o).palette[a.color].main
       }
     }),
-    "&:active": t({}, i.variant === "contained" && {
+    "&:active": t({}, a.variant === "contained" && {
       boxShadow: (o.vars || o).shadows[8]
     }),
-    [`&.${b.focusVisible}`]: t({}, i.variant === "contained" && {
+    [`&.${b.focusVisible}`]: t({}, a.variant === "contained" && {
       boxShadow: (o.vars || o).shadows[6]
     }),
     [`&.${b.disabled}`]: t({
       color: (o.vars || o).palette.action.disabled
-    }, i.variant === "outlined" && {
+    }, a.variant === "outlined" && {
       border: `1px solid ${(o.vars || o).palette.action.disabledBackground}`
-    }, i.variant === "contained" && {
+    }, a.variant === "contained" && {
       color: (o.vars || o).palette.action.disabled,
       boxShadow: (o.vars || o).shadows[0],
       backgroundColor: (o.vars || o).palette.action.disabledBackground
     })
-  }, i.variant === "text" && {
+  }, a.variant === "text" && {
     padding: "6px 8px"
-  }, i.variant === "text" && i.color !== "inherit" && {
-    color: (o.vars || o).palette[i.color].main
-  }, i.variant === "outlined" && {
+  }, a.variant === "text" && a.color !== "inherit" && {
+    color: (o.vars || o).palette[a.color].main
+  }, a.variant === "outlined" && {
     padding: "5px 15px",
     border: "1px solid currentColor"
-  }, i.variant === "outlined" && i.color !== "inherit" && {
-    color: (o.vars || o).palette[i.color].main,
-    border: o.vars ? `1px solid rgba(${o.vars.palette[i.color].mainChannel} / 0.5)` : `1px solid ${v(o.palette[i.color].main, 0.5)}`
-  }, i.variant === "contained" && {
+  }, a.variant === "outlined" && a.color !== "inherit" && {
+    color: (o.vars || o).palette[a.color].main,
+    border: o.vars ? `1px solid rgba(${o.vars.palette[a.color].mainChannel} / 0.5)` : `1px solid ${v(o.palette[a.color].main, 0.5)}`
+  }, a.variant === "contained" && {
     color: o.vars ? (
       // this is safe because grey does not change between default light/dark mode
       o.vars.palette.text.primary
-    ) : (a = (r = o.palette).getContrastText) == null ? void 0 : a.call(r, o.palette.grey[300]),
-    backgroundColor: (o.vars || o).palette.grey[300],
+    ) : (i = (l = o.palette).getContrastText) == null ? void 0 : i.call(l, o.palette.grey[300]),
+    backgroundColor: o.vars ? o.vars.palette.Button.inheritContainedBg : s,
     boxShadow: (o.vars || o).shadows[2]
-  }, i.variant === "contained" && i.color !== "inherit" && {
-    color: (o.vars || o).palette[i.color].contrastText,
-    backgroundColor: (o.vars || o).palette[i.color].main
-  }, i.color === "inherit" && {
+  }, a.variant === "contained" && a.color !== "inherit" && {
+    color: (o.vars || o).palette[a.color].contrastText,
+    backgroundColor: (o.vars || o).palette[a.color].main
+  }, a.color === "inherit" && {
     color: "inherit",
     borderColor: "currentColor"
-  }, i.size === "small" && i.variant === "text" && {
+  }, a.size === "small" && a.variant === "text" && {
     padding: "4px 5px",
     fontSize: o.typography.pxToRem(13)
-  }, i.size === "large" && i.variant === "text" && {
+  }, a.size === "large" && a.variant === "text" && {
     padding: "8px 11px",
     fontSize: o.typography.pxToRem(15)
-  }, i.size === "small" && i.variant === "outlined" && {
+  }, a.size === "small" && a.variant === "outlined" && {
     padding: "3px 9px",
     fontSize: o.typography.pxToRem(13)
-  }, i.size === "large" && i.variant === "outlined" && {
+  }, a.size === "large" && a.variant === "outlined" && {
     padding: "7px 21px",
     fontSize: o.typography.pxToRem(15)
-  }, i.size === "small" && i.variant === "contained" && {
+  }, a.size === "small" && a.variant === "contained" && {
     padding: "4px 10px",
     fontSize: o.typography.pxToRem(13)
-  }, i.size === "large" && i.variant === "contained" && {
+  }, a.size === "large" && a.variant === "contained" && {
     padding: "8px 22px",
     fontSize: o.typography.pxToRem(15)
-  }, i.fullWidth && {
+  }, a.fullWidth && {
     width: "100%"
   });
 }, ({
@@ -185,14 +172,14 @@ const J = ["children", "color", "component", "className", "disabled", "disableEl
   [`&.${b.disabled}`]: {
     boxShadow: "none"
   }
-}), Q = x("span", {
+}), Z = f("span", {
   name: "MuiButton",
   slot: "StartIcon",
-  overridesResolver: (o, i) => {
+  overridesResolver: (o, a) => {
     const {
-      ownerState: a
+      ownerState: i
     } = o;
-    return [i.startIcon, i[`iconSize${e(a.size)}`]];
+    return [a.startIcon, a[`iconSize${r(i.size)}`]];
   }
 })(({
   ownerState: o
@@ -202,14 +189,14 @@ const J = ["children", "color", "component", "className", "disabled", "disableEl
   marginLeft: -4
 }, o.size === "small" && {
   marginLeft: -2
-}, k(o))), X = x("span", {
+}, N(o))), w = f("span", {
   name: "MuiButton",
   slot: "EndIcon",
-  overridesResolver: (o, i) => {
+  overridesResolver: (o, a) => {
     const {
-      ownerState: a
+      ownerState: i
     } = o;
-    return [i.endIcon, i[`iconSize${e(a.size)}`]];
+    return [a.endIcon, a[`iconSize${r(i.size)}`]];
   }
 })(({
   ownerState: o
@@ -219,63 +206,63 @@ const J = ["children", "color", "component", "className", "disabled", "disableEl
   marginLeft: 8
 }, o.size === "small" && {
   marginRight: -2
-}, k(o))), Y = /* @__PURE__ */ f.forwardRef(function(i, a) {
-  const r = f.useContext(R), l = O(r, i), s = F({
-    props: l,
+}, N(o))), oo = /* @__PURE__ */ p.forwardRef(function(a, i) {
+  const l = p.useContext(h), s = p.useContext(E), e = U(l, a), c = H({
+    props: e,
     name: "MuiButton"
   }), {
-    children: c,
-    color: g = "primary",
-    component: p = "button",
-    className: B,
-    disabled: y = !1,
-    disableElevation: E = !1,
-    disableFocusRipple: z = !1,
-    endIcon: C,
+    children: g,
+    color: x = "primary",
+    component: y = "button",
+    className: O,
+    disabled: z = !1,
+    disableElevation: k = !1,
+    disableFocusRipple: C = !1,
+    endIcon: I,
     focusVisibleClassName: T,
-    fullWidth: W = !1,
-    size: P = "medium",
-    startIcon: I,
-    type: $,
+    fullWidth: P = !1,
+    size: W = "medium",
+    startIcon: $,
+    type: B,
     variant: S = "text"
-  } = s, M = L(s, J), u = t({}, s, {
-    color: g,
-    component: p,
-    disabled: y,
-    disableElevation: E,
-    disableFocusRipple: z,
-    fullWidth: W,
-    size: P,
-    type: $,
+  } = c, M = j(c, Q), u = t({}, c, {
+    color: x,
+    component: y,
+    disabled: z,
+    disableElevation: k,
+    disableFocusRipple: C,
+    fullWidth: P,
+    size: W,
+    type: B,
     variant: S
-  }), d = K(u), j = I && /* @__PURE__ */ m(Q, {
+  }), d = X(u), V = $ && /* @__PURE__ */ R(Z, {
     className: d.startIcon,
     ownerState: u,
-    children: I
-  }), V = C && /* @__PURE__ */ m(X, {
+    children: $
+  }), _ = I && /* @__PURE__ */ R(w, {
     className: d.endIcon,
     ownerState: u,
-    children: C
-  });
-  return /* @__PURE__ */ A(N, t({
+    children: I
+  }), L = s || "";
+  return /* @__PURE__ */ q(Y, t({
     ownerState: u,
-    className: h(r.className, d.root, B),
-    component: p,
-    disabled: y,
-    focusRipple: !z,
-    focusVisibleClassName: h(d.focusVisible, T),
-    ref: a,
-    type: $
+    className: m(l.className, d.root, O, L),
+    component: y,
+    disabled: z,
+    focusRipple: !C,
+    focusVisibleClassName: m(d.focusVisible, T),
+    ref: i,
+    type: B
   }, M, {
     classes: d,
-    children: [j, c, V]
+    children: [V, g, _]
   }));
 });
-process.env.NODE_ENV !== "production" && (Y.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // |     To update them edit the d.ts file and run "yarn proptypes"     |
-  // ----------------------------------------------------------------------
+process.env.NODE_ENV !== "production" && (oo.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
   /**
    * The content of the component.
    */
@@ -291,7 +278,7 @@ process.env.NODE_ENV !== "production" && (Y.propTypes = {
   /**
    * 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/#adding-new-colors).
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
    * @default 'primary'
    */
   color: n.oneOfType([n.oneOf(["inherit", "primary", "secondary", "success", "error", "info", "warning"]), n.string]),
@@ -366,5 +353,5 @@ process.env.NODE_ENV !== "production" && (Y.propTypes = {
   variant: n.oneOfType([n.oneOf(["contained", "outlined", "text"]), n.string])
 });
 export {
-  Y as B
+  oo as B
 };