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

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

@@ -1,490 +1,349 @@
-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);
+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);
 }
-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
+_("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);
   }
-}, o.size === "medium" && {
-  "& > *:nth-of-type(1)": {
-    fontSize: 20
+
+  100% {
+    transform: rotate(360deg);
   }
-}, o.size === "large" && {
-  "& > *:nth-of-type(1)": {
-    fontSize: 22
+`)), X = z(M || (M = k`
+  0% {
+    stroke-dasharray: 1px, 200px;
+    stroke-dashoffset: 0;
   }
-}), 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];
+
+  50% {
+    stroke-dasharray: 100px, 200px;
+    stroke-dashoffset: -15px;
   }
-})(({
-  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"
+
+  100% {
+    stroke-dasharray: 100px, 200px;
+    stroke-dashoffset: -125px;
   }
-}), co = f("span", {
-  name: "MuiButton",
-  slot: "StartIcon",
-  overridesResolver: (o, n) => {
+`)), 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) => {
     const {
-      ownerState: t
+      ownerState: r
     } = o;
-    return [n.startIcon, n[`iconSize${l(t.size)}`]];
+    return [t.root, t[r.variant], t[`color${g(r.color)}`]];
   }
 })(({
+  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
-}) => a({
-  display: "inherit",
-  marginRight: 8,
-  marginLeft: -4
-}, o.size === "small" && {
-  marginLeft: -2
-}, S(o))), uo = f("span", {
-  name: "MuiButton",
-  slot: "EndIcon",
-  overridesResolver: (o, n) => {
+}) => 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) => {
     const {
-      ownerState: t
+      ownerState: r
     } = o;
-    return [n.endIcon, n[`iconSize${l(t.size)}`]];
+    return [t.circle, t[`circle${g(r.variant)}`], r.disableShrink && t.circleDisableShrink];
   }
 })(({
+  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
-}) => 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"
+}) => 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"
   }), {
-    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]
+    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
+      })
+    })
   }));
 });
-process.env.NODE_ENV !== "production" && (H.propTypes = {
+process.env.NODE_ENV !== "production" && (F.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: i.object,
+  classes: n.object,
   /**
    * @ignore
    */
-  className: i.string,
+  className: n.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: i.oneOfType([i.oneOf(["inherit", "primary", "secondary", "success", "error", "info", "warning"]), i.string]),
+  color: n.oneOfType([n.oneOf(["inherit", "primary", "secondary", "error", "info", "success", "warning"]), n.string]),
   /**
-   * 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
-   */
-  disabled: i.bool,
-  /**
-   * 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.
+   * If `true`, the shrink animation is disabled.
+   * This only works if variant is `indeterminate`.
    * @default false
    */
-  disableRipple: i.bool,
+  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),
   /**
-   * Element placed after the children.
+   * 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
    */
-  endIcon: i.node,
+  size: n.oneOfType([n.number, n.string]),
   /**
    * @ignore
    */
-  focusVisibleClassName: i.string,
+  style: n.object,
   /**
-   * 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.
+   * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  startIcon: i.node,
+  sx: n.oneOfType([n.arrayOf(n.oneOfType([n.func, n.object, n.bool])), n.func, n.object]),
   /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
+   * The thickness of the circle.
+   * @default 3.6
    */
-  sx: i.oneOfType([i.arrayOf(i.oneOfType([i.func, i.object, i.bool])), i.func, i.object]),
+  thickness: n.number,
   /**
-   * @ignore
+   * The value of the progress indicator for the determinate variant.
+   * Value between 0 and 100.
+   * @default 0
    */
-  type: i.oneOfType([i.oneOf(["button", "reset", "submit"]), i.string]),
+  value: n.number,
   /**
    * The variant to use.
-   * @default 'text'
+   * Use indeterminate when there is no progress value.
+   * @default 'indeterminate'
    */
-  variant: i.oneOfType([i.oneOf(["contained", "outlined", "text"]), i.string])
+  variant: n.oneOf(["determinate", "indeterminate"])
 });
-const po = H;
-function go(o) {
-  return M("MuiLoadingButton", o);
+const io = F;
+function ao(o) {
+  return D("MuiLoadingButton", 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 eo = _("MuiLoadingButton", ["root", "loading", "loadingIndicator", "loadingIndicatorCenter", "loadingIndicatorStart", "loadingIndicatorEnd", "endIconLoadingEnd", "startIconLoadingStart"]), d = eo, so = ["children", "disabled", "id", "loading", "loadingIndicator", "loadingPosition", "variant"], lo = (o) => {
   const {
-    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",
+    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",
   name: "MuiLoadingButton",
   slot: "Root",
-  overridesResolver: (o, n) => [n.root, n.startIconLoadingStart && {
-    [`& .${c.startIconLoadingStart}`]: n.startIconLoadingStart
-  }, n.endIconLoadingEnd && {
-    [`& .${c.endIconLoadingEnd}`]: n.endIconLoadingEnd
+  overridesResolver: (o, t) => [t.root, t.startIconLoadingStart && {
+    [`& .${d.startIconLoadingStart}`]: t.startIconLoadingStart
+  }, t.endIconLoadingEnd && {
+    [`& .${d.endIconLoadingEnd}`]: t.endIconLoadingEnd
   }]
 })(({
   ownerState: o,
-  theme: n
-}) => a({
-  [`& .${c.startIconLoadingStart}, & .${c.endIconLoadingEnd}`]: {
-    transition: n.transitions.create(["opacity"], {
-      duration: n.transitions.duration.short
+  theme: t
+}) => e({
+  [`& .${d.startIconLoadingStart}, & .${d.endIconLoadingEnd}`]: {
+    transition: t.transitions.create(["opacity"], {
+      duration: t.transitions.duration.short
     }),
     opacity: 0
   }
 }, o.loadingPosition === "center" && {
-  transition: n.transitions.create(["background-color", "box-shadow", "border-color"], {
-    duration: n.transitions.duration.short
+  transition: t.transitions.create(["background-color", "box-shadow", "border-color"], {
+    duration: t.transitions.duration.short
   }),
-  [`&.${c.loading}`]: {
+  [`&.${d.loading}`]: {
     color: "transparent"
   }
 }, o.loadingPosition === "start" && o.fullWidth && {
-  [`& .${c.startIconLoadingStart}, & .${c.endIconLoadingEnd}`]: {
-    transition: n.transitions.create(["opacity"], {
-      duration: n.transitions.duration.short
+  [`& .${d.startIconLoadingStart}, & .${d.endIconLoadingEnd}`]: {
+    transition: t.transitions.create(["opacity"], {
+      duration: t.transitions.duration.short
     }),
     opacity: 0,
     marginRight: -8
   }
 }, o.loadingPosition === "end" && o.fullWidth && {
-  [`& .${c.startIconLoadingStart}, & .${c.endIconLoadingEnd}`]: {
-    transition: n.transitions.create(["opacity"], {
-      duration: n.transitions.duration.short
+  [`& .${d.startIconLoadingStart}, & .${d.endIconLoadingEnd}`]: {
+    transition: t.transitions.create(["opacity"], {
+      duration: t.transitions.duration.short
     }),
     opacity: 0,
     marginLeft: -8
   }
-})), yo = f("span", {
+})), go = I("span", {
   name: "MuiLoadingButton",
   slot: "LoadingIndicator",
-  overridesResolver: (o, n) => {
+  overridesResolver: (o, t) => {
     const {
-      ownerState: t
+      ownerState: r
     } = o;
-    return [n.loadingIndicator, n[`loadingIndicator${l(t.loadingPosition)}`]];
+    return [t.loadingIndicator, t[`loadingIndicator${g(r.loadingPosition)}`]];
   }
 })(({
   theme: o,
-  ownerState: n
-}) => a({
+  ownerState: t
+}) => e({
   position: "absolute",
   visibility: "visible",
   display: "flex"
-}, n.loadingPosition === "start" && (n.variant === "outlined" || n.variant === "contained") && {
-  left: n.size === "small" ? 10 : 14
-}, n.loadingPosition === "start" && n.variant === "text" && {
+}, t.loadingPosition === "start" && (t.variant === "outlined" || t.variant === "contained") && {
+  left: t.size === "small" ? 10 : 14
+}, t.loadingPosition === "start" && t.variant === "text" && {
   left: 6
-}, n.loadingPosition === "center" && {
+}, t.loadingPosition === "center" && {
   left: "50%",
   transform: "translate(-50%)",
   color: (o.vars || o).palette.action.disabled
-}, n.loadingPosition === "end" && (n.variant === "outlined" || n.variant === "contained") && {
-  right: n.size === "small" ? 10 : 14
-}, n.loadingPosition === "end" && n.variant === "text" && {
+}, t.loadingPosition === "end" && (t.variant === "outlined" || t.variant === "contained") && {
+  right: t.size === "small" ? 10 : 14
+}, t.loadingPosition === "end" && t.variant === "text" && {
   right: 6
-}, n.loadingPosition === "start" && n.fullWidth && {
+}, t.loadingPosition === "start" && t.fullWidth && {
   position: "relative",
   left: -10
-}, n.loadingPosition === "end" && n.fullWidth && {
+}, t.loadingPosition === "end" && t.fullWidth && {
   position: "relative",
   right: -10
-})), A = /* @__PURE__ */ p.forwardRef(function(n, t) {
-  const s = p.useContext(U), r = V(s, n), e = _({
-    props: r,
+})), G = /* @__PURE__ */ B.forwardRef(function(t, r) {
+  const i = B.useContext(Y), a = K(i, t), s = j({
+    props: a,
     name: "MuiLoadingButton"
   }), {
-    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,
+    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,
     color: "inherit",
     size: 16
-  }), u = a({}, e, {
-    disabled: g,
-    loading: v,
-    loadingIndicator: m,
-    loadingPosition: z,
-    variant: $
-  }), P = fo(u), y = v ? /* @__PURE__ */ b(yo, {
+  }), c = e({}, s, {
+    disabled: h,
+    loading: l,
+    loadingIndicator: b,
+    loadingPosition: x,
+    variant: L
+  }), P = lo(c), y = l ? /* @__PURE__ */ f(go, {
     className: P.loadingIndicator,
-    ownerState: u,
-    children: m
+    ownerState: c,
+    children: b
   }) : null;
-  return /* @__PURE__ */ O(Io, a({
-    disabled: g || v,
-    id: I,
-    ref: t
-  }, B, {
-    variant: $,
+  return /* @__PURE__ */ S(uo, e({
+    disabled: h || l,
+    id: v,
+    ref: r
+  }, m, {
+    variant: L,
     classes: P,
-    ownerState: u,
-    children: [u.loadingPosition === "end" ? d : y, u.loadingPosition === "end" ? y : d]
+    ownerState: c,
+    children: [c.loadingPosition === "end" ? C : y, c.loadingPosition === "end" ? y : C]
   }));
 });
-process.env.NODE_ENV !== "production" && (A.propTypes = {
+process.env.NODE_ENV !== "production" && (G.propTypes = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
@@ -492,50 +351,50 @@ process.env.NODE_ENV !== "production" && (A.propTypes = {
   /**
    * The content of the component.
    */
-  children: i.node,
+  children: n.node,
   /**
    * Override or extend the styles applied to the component.
    */
-  classes: i.object,
+  classes: n.object,
   /**
    * If `true`, the component is disabled.
    * @default false
    */
-  disabled: i.bool,
+  disabled: n.bool,
   /**
    * @ignore
    */
-  id: i.string,
+  id: n.string,
   /**
    * If `true`, the loading indicator is shown and the button becomes disabled.
    * @default false
    */
-  loading: i.bool,
+  loading: n.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: i.node,
+  loadingIndicator: n.node,
   /**
    * The loading indicator can be positioned on the start, end, or the center of the button.
    * @default 'center'
    */
-  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),
+  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),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: i.oneOfType([i.arrayOf(i.oneOfType([i.func, i.object, i.bool])), i.func, i.object]),
+  sx: n.oneOfType([n.arrayOf(n.oneOfType([n.func, n.object, n.bool])), n.func, n.object]),
   /**
    * The variant to use.
    * @default 'text'
    */
-  variant: i.oneOfType([i.oneOf(["contained", "outlined", "text"]), i.string])
+  variant: n.oneOfType([n.oneOf(["contained", "outlined", "text"]), n.string])
 });
-const Co = A, ho = f(Co, {
+const fo = G, ho = I(fo, {
   shouldForwardProp: (o) => o !== "contentColor" && o !== "hoverColor"
-})(({ contentColor: o, hoverColor: n, theme: t }) => ({
+})(({ contentColor: o, hoverColor: t, theme: r }) => ({
   justifyContent: "center",
   alignItems: "center",
   columnGap: 8,
@@ -548,32 +407,32 @@ const Co = A, ho = f(Co, {
   borderRadius: 5,
   borderWidth: 2,
   "&:hover": {
-    color: t.palette.common.white,
-    backgroundColor: n,
-    borderColor: n,
+    color: r.palette.common.white,
+    backgroundColor: t,
+    borderColor: t,
     borderWidth: 2
   }
-})), Oo = ({
+})), xo = ({
   icon: o,
-  text: n,
-  ...t
+  text: t,
+  ...r
 }) => {
-  const s = io(), r = t.contentColor ?? s.palette.primary.main;
-  return /* @__PURE__ */ O(
+  const i = q(), a = r.contentColor ?? i.palette.primary.main;
+  return /* @__PURE__ */ S(
     ho,
     {
-      ...t,
+      ...r,
       variant: "outlined",
-      contentColor: r,
-      hoverColor: t.hoverColor ?? r,
+      contentColor: a,
+      hoverColor: r.hoverColor ?? a,
       children: [
-        (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
+        (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
       ]
     }
   );
 };
 export {
-  Oo as default
+  xo as default
 };