@cgi-learning-hub/ui 0.0.1-dev.1708990372 → 0.0.1-dev.1709023966

package/dist/components/buttons/DefaultButton/DefaultButton.es.js

@@ -1,349 +1,490 @@
-import { jsx as f, jsxs as S } from "react/jsx-runtime";
-import * as B from "react";
-import T from "./DefaultButtonIcon.es.js";
-import { b as D, g as _, s as I, f as g, a as e, u as j, _ as N, h as V, P as n, e as U, v as K } from "../../../useThemeProps-B6yTTpAe.js";
-import { B as H, a as Y } from "../../../Button-X7eWZQfX.js";
-import { u as Z } from "../../../useId-BW-oWmul.js";
-import { c as W } from "../../../useForkRef-CLcOhrzI.js";
-import { keyframes as z, css as w } from "@emotion/react";
-import { u as q } from "../../../useTheme-BWRyHzdn.js";
-function A(o) {
-  return D("MuiCircularProgress", o);
+import { jsx as b, jsxs as O } from "react/jsx-runtime";
+import * as p from "react";
+import N from "./DefaultButtonIcon.es.js";
+import { g as W, a as M, s as f, r as Y, c as l, _ as a, i as E, o as V, b as _, e as j, f as k, P as i, h as F } from "../../../useThemeProps-Dg9Uoq7q.js";
+import { B as Z } from "../../../ButtonBase-B0tkJ9zf.js";
+import { u as w } from "../../../useId-BW-oWmul.js";
+import { c as oo } from "../../../refType-Hh9tfnoF.js";
+import { C as no } from "../../../CircularProgress-CguDBnxV.js";
+import { u as io } from "../../../useTheme-DJEDOopE.js";
+function to(o) {
+  return M("MuiButton", o);
 }
-_("MuiCircularProgress", ["root", "determinate", "indeterminate", "colorPrimary", "colorSecondary", "svg", "circle", "circleDeterminate", "circleIndeterminate", "circleDisableShrink"]);
-const J = ["className", "color", "disableShrink", "size", "style", "thickness", "value", "variant"];
-let k = (o) => o, E, M, R, O;
-const u = 44, Q = z(E || (E = k`
-  0% {
-    transform: rotate(0deg);
+const ao = W("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 = ao, G = /* @__PURE__ */ p.createContext({});
+process.env.NODE_ENV !== "production" && (G.displayName = "ButtonGroupContext");
+const U = G, D = /* @__PURE__ */ p.createContext(void 0);
+process.env.NODE_ENV !== "production" && (D.displayName = "ButtonGroupButtonContext");
+const ro = D, so = ["children", "color", "component", "className", "disabled", "disableElevation", "disableFocusRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"], lo = (o) => {
+  const {
+    color: n,
+    disableElevation: t,
+    fullWidth: s,
+    size: r,
+    variant: e,
+    classes: d
+  } = o, g = {
+    root: ["root", e, `${e}${l(n)}`, `size${l(r)}`, `${e}Size${l(r)}`, n === "inherit" && "colorInherit", t && "disableElevation", s && "fullWidth"],
+    label: ["label"],
+    startIcon: ["startIcon", `iconSize${l(r)}`],
+    endIcon: ["endIcon", `iconSize${l(r)}`]
+  }, x = F(g, to, d);
+  return a({}, d, x);
+}, S = (o) => a({}, o.size === "small" && {
+  "& > *:nth-of-type(1)": {
+    fontSize: 18
   }
-
-  100% {
-    transform: rotate(360deg);
+}, o.size === "medium" && {
+  "& > *:nth-of-type(1)": {
+    fontSize: 20
   }
-`)), X = z(M || (M = k`
-  0% {
-    stroke-dasharray: 1px, 200px;
-    stroke-dashoffset: 0;
+}, o.size === "large" && {
+  "& > *:nth-of-type(1)": {
+    fontSize: 22
   }
-
-  50% {
-    stroke-dasharray: 100px, 200px;
-    stroke-dashoffset: -15px;
+}), eo = f(Z, {
+  shouldForwardProp: (o) => Y(o) || o === "classes",
+  name: "MuiButton",
+  slot: "Root",
+  overridesResolver: (o, n) => {
+    const {
+      ownerState: t
+    } = o;
+    return [n.root, n[t.variant], n[`${t.variant}${l(t.color)}`], n[`size${l(t.size)}`], n[`${t.variant}Size${l(t.size)}`], t.color === "inherit" && n.colorInherit, t.disableElevation && n.disableElevation, t.fullWidth && n.fullWidth];
   }
-
-  100% {
-    stroke-dasharray: 100px, 200px;
-    stroke-dashoffset: -125px;
+})(({
+  theme: o,
+  ownerState: n
+}) => {
+  var t, s;
+  const r = 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 a({}, o.typography.button, {
+    minWidth: 64,
+    padding: "6px 16px",
+    borderRadius: (o.vars || o).shape.borderRadius,
+    transition: o.transitions.create(["background-color", "box-shadow", "border-color", "color"], {
+      duration: o.transitions.duration.short
+    }),
+    "&:hover": a({
+      textDecoration: "none",
+      backgroundColor: o.vars ? `rgba(${o.vars.palette.text.primaryChannel} / ${o.vars.palette.action.hoverOpacity})` : E(o.palette.text.primary, o.palette.action.hoverOpacity),
+      // Reset on touch devices, it doesn't add specificity
+      "@media (hover: none)": {
+        backgroundColor: "transparent"
+      }
+    }, n.variant === "text" && n.color !== "inherit" && {
+      backgroundColor: o.vars ? `rgba(${o.vars.palette[n.color].mainChannel} / ${o.vars.palette.action.hoverOpacity})` : E(o.palette[n.color].main, o.palette.action.hoverOpacity),
+      // Reset on touch devices, it doesn't add specificity
+      "@media (hover: none)": {
+        backgroundColor: "transparent"
+      }
+    }, n.variant === "outlined" && n.color !== "inherit" && {
+      border: `1px solid ${(o.vars || o).palette[n.color].main}`,
+      backgroundColor: o.vars ? `rgba(${o.vars.palette[n.color].mainChannel} / ${o.vars.palette.action.hoverOpacity})` : E(o.palette[n.color].main, o.palette.action.hoverOpacity),
+      // Reset on touch devices, it doesn't add specificity
+      "@media (hover: none)": {
+        backgroundColor: "transparent"
+      }
+    }, n.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]
+      }
+    }, n.variant === "contained" && n.color !== "inherit" && {
+      backgroundColor: (o.vars || o).palette[n.color].dark,
+      // Reset on touch devices, it doesn't add specificity
+      "@media (hover: none)": {
+        backgroundColor: (o.vars || o).palette[n.color].main
+      }
+    }),
+    "&:active": a({}, n.variant === "contained" && {
+      boxShadow: (o.vars || o).shadows[8]
+    }),
+    [`&.${R.focusVisible}`]: a({}, n.variant === "contained" && {
+      boxShadow: (o.vars || o).shadows[6]
+    }),
+    [`&.${R.disabled}`]: a({
+      color: (o.vars || o).palette.action.disabled
+    }, n.variant === "outlined" && {
+      border: `1px solid ${(o.vars || o).palette.action.disabledBackground}`
+    }, n.variant === "contained" && {
+      color: (o.vars || o).palette.action.disabled,
+      boxShadow: (o.vars || o).shadows[0],
+      backgroundColor: (o.vars || o).palette.action.disabledBackground
+    })
+  }, n.variant === "text" && {
+    padding: "6px 8px"
+  }, n.variant === "text" && n.color !== "inherit" && {
+    color: (o.vars || o).palette[n.color].main
+  }, n.variant === "outlined" && {
+    padding: "5px 15px",
+    border: "1px solid currentColor"
+  }, n.variant === "outlined" && n.color !== "inherit" && {
+    color: (o.vars || o).palette[n.color].main,
+    border: o.vars ? `1px solid rgba(${o.vars.palette[n.color].mainChannel} / 0.5)` : `1px solid ${E(o.palette[n.color].main, 0.5)}`
+  }, n.variant === "contained" && {
+    color: o.vars ? (
+      // this is safe because grey does not change between default light/dark mode
+      o.vars.palette.text.primary
+    ) : (t = (s = o.palette).getContrastText) == null ? void 0 : t.call(s, o.palette.grey[300]),
+    backgroundColor: o.vars ? o.vars.palette.Button.inheritContainedBg : r,
+    boxShadow: (o.vars || o).shadows[2]
+  }, n.variant === "contained" && n.color !== "inherit" && {
+    color: (o.vars || o).palette[n.color].contrastText,
+    backgroundColor: (o.vars || o).palette[n.color].main
+  }, n.color === "inherit" && {
+    color: "inherit",
+    borderColor: "currentColor"
+  }, n.size === "small" && n.variant === "text" && {
+    padding: "4px 5px",
+    fontSize: o.typography.pxToRem(13)
+  }, n.size === "large" && n.variant === "text" && {
+    padding: "8px 11px",
+    fontSize: o.typography.pxToRem(15)
+  }, n.size === "small" && n.variant === "outlined" && {
+    padding: "3px 9px",
+    fontSize: o.typography.pxToRem(13)
+  }, n.size === "large" && n.variant === "outlined" && {
+    padding: "7px 21px",
+    fontSize: o.typography.pxToRem(15)
+  }, n.size === "small" && n.variant === "contained" && {
+    padding: "4px 10px",
+    fontSize: o.typography.pxToRem(13)
+  }, n.size === "large" && n.variant === "contained" && {
+    padding: "8px 22px",
+    fontSize: o.typography.pxToRem(15)
+  }, n.fullWidth && {
+    width: "100%"
+  });
+}, ({
+  ownerState: o
+}) => o.disableElevation && {
+  boxShadow: "none",
+  "&:hover": {
+    boxShadow: "none"
+  },
+  [`&.${R.focusVisible}`]: {
+    boxShadow: "none"
+  },
+  "&:active": {
+    boxShadow: "none"
+  },
+  [`&.${R.disabled}`]: {
+    boxShadow: "none"
   }
-`)), oo = (o) => {
-  const {
-    classes: t,
-    variant: r,
-    color: i,
-    disableShrink: a
-  } = o, s = {
-    root: ["root", r, `color${g(i)}`],
-    svg: ["svg"],
-    circle: ["circle", `circle${g(r)}`, a && "circleDisableShrink"]
-  };
-  return U(s, A, t);
-}, to = I("span", {
-  name: "MuiCircularProgress",
-  slot: "Root",
-  overridesResolver: (o, t) => {
+}), co = f("span", {
+  name: "MuiButton",
+  slot: "StartIcon",
+  overridesResolver: (o, n) => {
     const {
-      ownerState: r
+      ownerState: t
     } = o;
-    return [t.root, t[r.variant], t[`color${g(r.color)}`]];
+    return [n.startIcon, n[`iconSize${l(t.size)}`]];
   }
 })(({
-  ownerState: o,
-  theme: t
-}) => e({
-  display: "inline-block"
-}, o.variant === "determinate" && {
-  transition: t.transitions.create("transform")
-}, o.color !== "inherit" && {
-  color: (t.vars || t).palette[o.color].main
-}), ({
   ownerState: o
-}) => o.variant === "indeterminate" && w(R || (R = k`
-      animation: ${0} 1.4s linear infinite;
-    `), Q)), no = I("svg", {
-  name: "MuiCircularProgress",
-  slot: "Svg",
-  overridesResolver: (o, t) => t.svg
-})({
-  display: "block"
-  // Keeps the progress centered
-}), ro = I("circle", {
-  name: "MuiCircularProgress",
-  slot: "Circle",
-  overridesResolver: (o, t) => {
+}) => a({
+  display: "inherit",
+  marginRight: 8,
+  marginLeft: -4
+}, o.size === "small" && {
+  marginLeft: -2
+}, S(o))), uo = f("span", {
+  name: "MuiButton",
+  slot: "EndIcon",
+  overridesResolver: (o, n) => {
     const {
-      ownerState: r
+      ownerState: t
     } = o;
-    return [t.circle, t[`circle${g(r.variant)}`], r.disableShrink && t.circleDisableShrink];
+    return [n.endIcon, n[`iconSize${l(t.size)}`]];
   }
 })(({
-  ownerState: o,
-  theme: t
-}) => e({
-  stroke: "currentColor"
-}, o.variant === "determinate" && {
-  transition: t.transitions.create("stroke-dashoffset")
-}, o.variant === "indeterminate" && {
-  // Some default value that looks fine waiting for the animation to kicks in.
-  strokeDasharray: "80px, 200px",
-  strokeDashoffset: 0
-  // Add the unit to fix a Edge 16 and below bug.
-}), ({
   ownerState: o
-}) => o.variant === "indeterminate" && !o.disableShrink && w(O || (O = k`
-      animation: ${0} 1.4s ease-in-out infinite;
-    `), X)), F = /* @__PURE__ */ B.forwardRef(function(t, r) {
-  const i = j({
-    props: t,
-    name: "MuiCircularProgress"
+}) => a({
+  display: "inherit",
+  marginRight: -4,
+  marginLeft: 8
+}, o.size === "small" && {
+  marginRight: -2
+}, S(o))), H = /* @__PURE__ */ p.forwardRef(function(n, t) {
+  const s = p.useContext(U), r = p.useContext(ro), e = V(s, n), d = _({
+    props: e,
+    name: "MuiButton"
   }), {
-    className: a,
-    color: s = "primary",
-    disableShrink: C = !1,
-    size: h = 40,
-    style: $,
-    thickness: l = 3.6,
-    value: p = 0,
-    variant: x = "indeterminate"
-  } = i, L = N(i, J), m = e({}, i, {
-    color: s,
-    disableShrink: C,
-    size: h,
-    thickness: l,
-    value: p,
-    variant: x
-  }), v = oo(m), b = {}, c = {}, P = {};
-  if (x === "determinate") {
-    const y = 2 * Math.PI * ((u - l) / 2);
-    b.strokeDasharray = y.toFixed(3), P["aria-valuenow"] = Math.round(p), b.strokeDashoffset = `${((100 - p) / 100 * y).toFixed(3)}px`, c.transform = "rotate(-90deg)";
-  }
-  return /* @__PURE__ */ f(to, e({
-    className: V(v.root, a),
-    style: e({
-      width: h,
-      height: h
-    }, c, $),
-    ownerState: m,
-    ref: r,
-    role: "progressbar"
-  }, P, L, {
-    children: /* @__PURE__ */ f(no, {
-      className: v.svg,
-      ownerState: m,
-      viewBox: `${u / 2} ${u / 2} ${u} ${u}`,
-      children: /* @__PURE__ */ f(ro, {
-        className: v.circle,
-        style: b,
-        ownerState: m,
-        cx: u,
-        cy: u,
-        r: (u - l) / 2,
-        fill: "none",
-        strokeWidth: l
-      })
-    })
+    children: g,
+    color: x = "primary",
+    component: v = "button",
+    className: h,
+    disabled: z = !1,
+    disableElevation: $ = !1,
+    disableFocusRipple: B = !1,
+    endIcon: I,
+    focusVisibleClassName: m,
+    fullWidth: u = !1,
+    size: P = "medium",
+    startIcon: y,
+    type: T,
+    variant: q = "text"
+  } = d, J = j(d, so), L = a({}, d, {
+    color: x,
+    component: v,
+    disabled: z,
+    disableElevation: $,
+    disableFocusRipple: B,
+    fullWidth: u,
+    size: P,
+    type: T,
+    variant: q
+  }), C = lo(L), K = y && /* @__PURE__ */ b(co, {
+    className: C.startIcon,
+    ownerState: L,
+    children: y
+  }), Q = I && /* @__PURE__ */ b(uo, {
+    className: C.endIcon,
+    ownerState: L,
+    children: I
+  }), X = r || "";
+  return /* @__PURE__ */ O(eo, a({
+    ownerState: L,
+    className: k(s.className, C.root, h, X),
+    component: v,
+    disabled: z,
+    focusRipple: !B,
+    focusVisibleClassName: k(C.focusVisible, m),
+    ref: t,
+    type: T
+  }, J, {
+    classes: C,
+    children: [K, g, Q]
   }));
 });
-process.env.NODE_ENV !== "production" && (F.propTypes = {
+process.env.NODE_ENV !== "production" && (H.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.
+   */
+  children: i.node,
   /**
    * Override or extend the styles applied to the component.
    */
-  classes: n.object,
+  classes: i.object,
   /**
    * @ignore
    */
-  className: n.string,
+  className: i.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: n.oneOfType([n.oneOf(["inherit", "primary", "secondary", "error", "info", "success", "warning"]), n.string]),
+  color: i.oneOfType([i.oneOf(["inherit", "primary", "secondary", "success", "error", "info", "warning"]), i.string]),
   /**
-   * If `true`, the shrink animation is disabled.
-   * This only works if variant is `indeterminate`.
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: i.elementType,
+  /**
+   * If `true`, the component is disabled.
    * @default false
    */
-  disableShrink: W(n.bool, (o) => o.disableShrink && o.variant && o.variant !== "indeterminate" ? new Error("MUI: You have provided the `disableShrink` prop with a variant other than `indeterminate`. This will have no effect.") : null),
+  disabled: i.bool,
   /**
-   * The size of the component.
-   * If using a number, the pixel unit is assumed.
-   * If using a string, you need to provide the CSS unit, e.g. '3rem'.
-   * @default 40
+   * If `true`, no elevation is used.
+   * @default false
+   */
+  disableElevation: i.bool,
+  /**
+   * If `true`, the  keyboard focus ripple is disabled.
+   * @default false
+   */
+  disableFocusRipple: i.bool,
+  /**
+   * If `true`, the ripple effect is disabled.
+   *
+   * ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure
+   * to highlight the element by applying separate styles with the `.Mui-focusVisible` class.
+   * @default false
+   */
+  disableRipple: i.bool,
+  /**
+   * Element placed after the children.
    */
-  size: n.oneOfType([n.number, n.string]),
+  endIcon: i.node,
   /**
    * @ignore
    */
-  style: n.object,
+  focusVisibleClassName: i.string,
   /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
+   * If `true`, the button will take up the full width of its container.
+   * @default false
+   */
+  fullWidth: i.bool,
+  /**
+   * The URL to link to when the button is clicked.
+   * If defined, an `a` element will be used as the root node.
+   */
+  href: i.string,
+  /**
+   * The size of the component.
+   * `small` is equivalent to the dense button styling.
+   * @default 'medium'
+   */
+  size: i.oneOfType([i.oneOf(["small", "medium", "large"]), i.string]),
+  /**
+   * Element placed before the children.
    */
-  sx: n.oneOfType([n.arrayOf(n.oneOfType([n.func, n.object, n.bool])), n.func, n.object]),
+  startIcon: i.node,
   /**
-   * The thickness of the circle.
-   * @default 3.6
+   * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  thickness: n.number,
+  sx: i.oneOfType([i.arrayOf(i.oneOfType([i.func, i.object, i.bool])), i.func, i.object]),
   /**
-   * The value of the progress indicator for the determinate variant.
-   * Value between 0 and 100.
-   * @default 0
+   * @ignore
    */
-  value: n.number,
+  type: i.oneOfType([i.oneOf(["button", "reset", "submit"]), i.string]),
   /**
    * The variant to use.
-   * Use indeterminate when there is no progress value.
-   * @default 'indeterminate'
+   * @default 'text'
    */
-  variant: n.oneOf(["determinate", "indeterminate"])
+  variant: i.oneOfType([i.oneOf(["contained", "outlined", "text"]), i.string])
 });
-const io = F;
-function ao(o) {
-  return D("MuiLoadingButton", o);
+const po = H;
+function go(o) {
+  return M("MuiLoadingButton", o);
 }
-const eo = _("MuiLoadingButton", ["root", "loading", "loadingIndicator", "loadingIndicatorCenter", "loadingIndicatorStart", "loadingIndicatorEnd", "endIconLoadingEnd", "startIconLoadingStart"]), d = eo, so = ["children", "disabled", "id", "loading", "loadingIndicator", "loadingPosition", "variant"], lo = (o) => {
+const vo = W("MuiLoadingButton", ["root", "loading", "loadingIndicator", "loadingIndicatorCenter", "loadingIndicatorStart", "loadingIndicatorEnd", "endIconLoadingEnd", "startIconLoadingStart"]), c = vo, bo = ["children", "disabled", "id", "loading", "loadingIndicator", "loadingPosition", "variant"], fo = (o) => {
   const {
-    loading: t,
-    loadingPosition: r,
-    classes: i
-  } = o, a = {
-    root: ["root", t && "loading"],
-    startIcon: [t && `startIconLoading${g(r)}`],
-    endIcon: [t && `endIconLoading${g(r)}`],
-    loadingIndicator: ["loadingIndicator", t && `loadingIndicator${g(r)}`]
-  }, s = U(a, ao, i);
-  return e({}, i, s);
-}, co = (o) => o !== "ownerState" && o !== "theme" && o !== "sx" && o !== "as" && o !== "classes", uo = I(H, {
-  shouldForwardProp: (o) => co(o) || o === "classes",
+    loading: n,
+    loadingPosition: t,
+    classes: s
+  } = o, r = {
+    root: ["root", n && "loading"],
+    startIcon: [n && `startIconLoading${l(t)}`],
+    endIcon: [n && `endIconLoading${l(t)}`],
+    loadingIndicator: ["loadingIndicator", n && `loadingIndicator${l(t)}`]
+  }, e = F(r, go, s);
+  return a({}, s, e);
+}, xo = (o) => o !== "ownerState" && o !== "theme" && o !== "sx" && o !== "as" && o !== "classes", Io = f(po, {
+  shouldForwardProp: (o) => xo(o) || o === "classes",
   name: "MuiLoadingButton",
   slot: "Root",
-  overridesResolver: (o, t) => [t.root, t.startIconLoadingStart && {
-    [`& .${d.startIconLoadingStart}`]: t.startIconLoadingStart
-  }, t.endIconLoadingEnd && {
-    [`& .${d.endIconLoadingEnd}`]: t.endIconLoadingEnd
+  overridesResolver: (o, n) => [n.root, n.startIconLoadingStart && {
+    [`& .${c.startIconLoadingStart}`]: n.startIconLoadingStart
+  }, n.endIconLoadingEnd && {
+    [`& .${c.endIconLoadingEnd}`]: n.endIconLoadingEnd
   }]
 })(({
   ownerState: o,
-  theme: t
-}) => e({
-  [`& .${d.startIconLoadingStart}, & .${d.endIconLoadingEnd}`]: {
-    transition: t.transitions.create(["opacity"], {
-      duration: t.transitions.duration.short
+  theme: n
+}) => a({
+  [`& .${c.startIconLoadingStart}, & .${c.endIconLoadingEnd}`]: {
+    transition: n.transitions.create(["opacity"], {
+      duration: n.transitions.duration.short
     }),
     opacity: 0
   }
 }, o.loadingPosition === "center" && {
-  transition: t.transitions.create(["background-color", "box-shadow", "border-color"], {
-    duration: t.transitions.duration.short
+  transition: n.transitions.create(["background-color", "box-shadow", "border-color"], {
+    duration: n.transitions.duration.short
   }),
-  [`&.${d.loading}`]: {
+  [`&.${c.loading}`]: {
     color: "transparent"
   }
 }, o.loadingPosition === "start" && o.fullWidth && {
-  [`& .${d.startIconLoadingStart}, & .${d.endIconLoadingEnd}`]: {
-    transition: t.transitions.create(["opacity"], {
-      duration: t.transitions.duration.short
+  [`& .${c.startIconLoadingStart}, & .${c.endIconLoadingEnd}`]: {
+    transition: n.transitions.create(["opacity"], {
+      duration: n.transitions.duration.short
     }),
     opacity: 0,
     marginRight: -8
   }
 }, o.loadingPosition === "end" && o.fullWidth && {
-  [`& .${d.startIconLoadingStart}, & .${d.endIconLoadingEnd}`]: {
-    transition: t.transitions.create(["opacity"], {
-      duration: t.transitions.duration.short
+  [`& .${c.startIconLoadingStart}, & .${c.endIconLoadingEnd}`]: {
+    transition: n.transitions.create(["opacity"], {
+      duration: n.transitions.duration.short
     }),
     opacity: 0,
     marginLeft: -8
   }
-})), go = I("span", {
+})), yo = f("span", {
   name: "MuiLoadingButton",
   slot: "LoadingIndicator",
-  overridesResolver: (o, t) => {
+  overridesResolver: (o, n) => {
     const {
-      ownerState: r
+      ownerState: t
     } = o;
-    return [t.loadingIndicator, t[`loadingIndicator${g(r.loadingPosition)}`]];
+    return [n.loadingIndicator, n[`loadingIndicator${l(t.loadingPosition)}`]];
   }
 })(({
   theme: o,
-  ownerState: t
-}) => e({
+  ownerState: n
+}) => a({
   position: "absolute",
   visibility: "visible",
   display: "flex"
-}, t.loadingPosition === "start" && (t.variant === "outlined" || t.variant === "contained") && {
-  left: t.size === "small" ? 10 : 14
-}, t.loadingPosition === "start" && t.variant === "text" && {
+}, n.loadingPosition === "start" && (n.variant === "outlined" || n.variant === "contained") && {
+  left: n.size === "small" ? 10 : 14
+}, n.loadingPosition === "start" && n.variant === "text" && {
   left: 6
-}, t.loadingPosition === "center" && {
+}, n.loadingPosition === "center" && {
   left: "50%",
   transform: "translate(-50%)",
   color: (o.vars || o).palette.action.disabled
-}, t.loadingPosition === "end" && (t.variant === "outlined" || t.variant === "contained") && {
-  right: t.size === "small" ? 10 : 14
-}, t.loadingPosition === "end" && t.variant === "text" && {
+}, n.loadingPosition === "end" && (n.variant === "outlined" || n.variant === "contained") && {
+  right: n.size === "small" ? 10 : 14
+}, n.loadingPosition === "end" && n.variant === "text" && {
   right: 6
-}, t.loadingPosition === "start" && t.fullWidth && {
+}, n.loadingPosition === "start" && n.fullWidth && {
   position: "relative",
   left: -10
-}, t.loadingPosition === "end" && t.fullWidth && {
+}, n.loadingPosition === "end" && n.fullWidth && {
   position: "relative",
   right: -10
-})), G = /* @__PURE__ */ B.forwardRef(function(t, r) {
-  const i = B.useContext(Y), a = K(i, t), s = j({
-    props: a,
+})), A = /* @__PURE__ */ p.forwardRef(function(n, t) {
+  const s = p.useContext(U), r = V(s, n), e = _({
+    props: r,
     name: "MuiLoadingButton"
   }), {
-    children: C,
-    disabled: h = !1,
-    id: $,
-    loading: l = !1,
-    loadingIndicator: p,
-    loadingPosition: x = "center",
-    variant: L = "text"
-  } = s, m = N(s, so), v = Z($), b = p ?? /* @__PURE__ */ f(io, {
-    "aria-labelledby": v,
+    children: d,
+    disabled: g = !1,
+    id: x,
+    loading: v = !1,
+    loadingIndicator: h,
+    loadingPosition: z = "center",
+    variant: $ = "text"
+  } = e, B = j(e, bo), I = w(x), m = h ?? /* @__PURE__ */ b(no, {
+    "aria-labelledby": I,
     color: "inherit",
     size: 16
-  }), c = e({}, s, {
-    disabled: h,
-    loading: l,
-    loadingIndicator: b,
-    loadingPosition: x,
-    variant: L
-  }), P = lo(c), y = l ? /* @__PURE__ */ f(go, {
+  }), u = a({}, e, {
+    disabled: g,
+    loading: v,
+    loadingIndicator: m,
+    loadingPosition: z,
+    variant: $
+  }), P = fo(u), y = v ? /* @__PURE__ */ b(yo, {
     className: P.loadingIndicator,
-    ownerState: c,
-    children: b
+    ownerState: u,
+    children: m
   }) : null;
-  return /* @__PURE__ */ S(uo, e({
-    disabled: h || l,
-    id: v,
-    ref: r
-  }, m, {
-    variant: L,
+  return /* @__PURE__ */ O(Io, a({
+    disabled: g || v,
+    id: I,
+    ref: t
+  }, B, {
+    variant: $,
     classes: P,
-    ownerState: c,
-    children: [c.loadingPosition === "end" ? C : y, c.loadingPosition === "end" ? y : C]
+    ownerState: u,
+    children: [u.loadingPosition === "end" ? d : y, u.loadingPosition === "end" ? y : d]
   }));
 });
-process.env.NODE_ENV !== "production" && (G.propTypes = {
+process.env.NODE_ENV !== "production" && (A.propTypes = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
@@ -351,50 +492,50 @@ process.env.NODE_ENV !== "production" && (G.propTypes = {
   /**
    * The content of the component.
    */
-  children: n.node,
+  children: i.node,
   /**
    * Override or extend the styles applied to the component.
    */
-  classes: n.object,
+  classes: i.object,
   /**
    * If `true`, the component is disabled.
    * @default false
    */
-  disabled: n.bool,
+  disabled: i.bool,
   /**
    * @ignore
    */
-  id: n.string,
+  id: i.string,
   /**
    * If `true`, the loading indicator is shown and the button becomes disabled.
    * @default false
    */
-  loading: n.bool,
+  loading: i.bool,
   /**
    * Element placed before the children if the button is in loading state.
    * The node should contain an element with `role="progressbar"` with an accessible name.
    * By default we render a `CircularProgress` that is labelled by the button itself.
    * @default <CircularProgress color="inherit" size={16} />
    */
-  loadingIndicator: n.node,
+  loadingIndicator: i.node,
   /**
    * The loading indicator can be positioned on the start, end, or the center of the button.
    * @default 'center'
    */
-  loadingPosition: W(n.oneOf(["start", "end", "center"]), (o) => o.loadingPosition === "start" && !o.startIcon ? new Error('MUI: The loadingPosition="start" should be used in combination with startIcon.') : o.loadingPosition === "end" && !o.endIcon ? new Error('MUI: The loadingPosition="end" should be used in combination with endIcon.') : null),
+  loadingPosition: oo(i.oneOf(["start", "end", "center"]), (o) => o.loadingPosition === "start" && !o.startIcon ? new Error('MUI: The loadingPosition="start" should be used in combination with startIcon.') : o.loadingPosition === "end" && !o.endIcon ? new Error('MUI: The loadingPosition="end" should be used in combination with endIcon.') : null),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: n.oneOfType([n.arrayOf(n.oneOfType([n.func, n.object, n.bool])), n.func, n.object]),
+  sx: i.oneOfType([i.arrayOf(i.oneOfType([i.func, i.object, i.bool])), i.func, i.object]),
   /**
    * The variant to use.
    * @default 'text'
    */
-  variant: n.oneOfType([n.oneOf(["contained", "outlined", "text"]), n.string])
+  variant: i.oneOfType([i.oneOf(["contained", "outlined", "text"]), i.string])
 });
-const fo = G, ho = I(fo, {
+const Co = A, ho = f(Co, {
   shouldForwardProp: (o) => o !== "contentColor" && o !== "hoverColor"
-})(({ contentColor: o, hoverColor: t, theme: r }) => ({
+})(({ contentColor: o, hoverColor: n, theme: t }) => ({
   justifyContent: "center",
   alignItems: "center",
   columnGap: 8,
@@ -407,32 +548,32 @@ const fo = G, ho = I(fo, {
   borderRadius: 5,
   borderWidth: 2,
   "&:hover": {
-    color: r.palette.common.white,
-    backgroundColor: t,
-    borderColor: t,
+    color: t.palette.common.white,
+    backgroundColor: n,
+    borderColor: n,
     borderWidth: 2
   }
-})), xo = ({
+})), Oo = ({
   icon: o,
-  text: t,
-  ...r
+  text: n,
+  ...t
 }) => {
-  const i = q(), a = r.contentColor ?? i.palette.primary.main;
-  return /* @__PURE__ */ S(
+  const s = io(), r = t.contentColor ?? s.palette.primary.main;
+  return /* @__PURE__ */ O(
     ho,
     {
-      ...r,
+      ...t,
       variant: "outlined",
-      contentColor: a,
-      hoverColor: r.hoverColor ?? a,
+      contentColor: r,
+      hoverColor: t.hoverColor ?? r,
       children: [
-        (o == null ? void 0 : o.position) === "left" ? /* @__PURE__ */ f(T, { ...o }) : null,
-        t,
-        (o == null ? void 0 : o.position) === "right" ? /* @__PURE__ */ f(T, { ...o }) : null
+        (o == null ? void 0 : o.position) === "left" ? /* @__PURE__ */ b(N, { ...o }) : null,
+        n,
+        (o == null ? void 0 : o.position) === "right" ? /* @__PURE__ */ b(N, { ...o }) : null
       ]
     }
   );
 };
 export {
-  xo as default
+  Oo as default
 };