@hybridcore/ui 1.1.0 → 1.1.2

package/dist/{Button-BZR43NHz.js → DialogContent-2aPOjKE7.js}

@@ -1,13 +1,13 @@
 import { a as l, _ as j } from "./extends-C3382pL0.js";
 import * as d from "react";
-import { P as n, c as $ } from "./createTheme-agWfFD64.js";
-import { c as _, g as H, u as Y, a as G, r as Vo } from "./chainPropTypes-DtBfUj5o.js";
+import { c as $, P as n } from "./createTheme-agWfFD64.js";
+import { c as _, g as H, r as Vo, u as Y, a as G } from "./chainPropTypes-DtBfUj5o.js";
 import { g as U, s as L, r as Ho, a as eo } from "./styled-Iq9jsO4F.js";
+import { jsx as N, jsxs as co } from "react/jsx-runtime";
+import { a as J, B as Uo, u as ho, s as yo, b as Eo } from "./ButtonBase-BYmh3G5j.js";
 import { u as So } from "./useTheme-CeyGVuQP.js";
-import { jsxs as co, jsx as N } from "react/jsx-runtime";
-import { T as Uo, r as Ko, g as ho } from "./utils-C13eMoWa.js";
+import { T as Ko, r as qo, g as To } from "./utils-DLpkeyhZ.js";
 import { e as po, a as Oo } from "./exactProp-CI8dagM-.js";
-import { u as J, b as yo, s as Eo, a as To, B as qo } from "./ButtonBase-B6WYZgVU.js";
 import { o as V } from "./ownerDocument-CUrv0DIK.js";
 import { o as uo } from "./ownerWindow-niciwP7I.js";
 import { c as Co, u as Yo } from "./useId-BHG98T5I.js";
@@ -88,6 +88,353 @@ function Po(o) {
   }), s);
 }
 function ne(o) {
+  return U("MuiButton", o);
+}
+const no = H("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"]), Mo = /* @__PURE__ */ d.createContext({});
+process.env.NODE_ENV !== "production" && (Mo.displayName = "ButtonGroupContext");
+const $o = /* @__PURE__ */ d.createContext(void 0);
+process.env.NODE_ENV !== "production" && ($o.displayName = "ButtonGroupButtonContext");
+const te = ["children", "color", "component", "className", "disabled", "disableElevation", "disableFocusRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"], re = (o) => {
+  const {
+    color: e,
+    disableElevation: t,
+    fullWidth: r,
+    size: s,
+    variant: i,
+    classes: a
+  } = o, c = {
+    root: ["root", i, `${i}${$(e)}`, `size${$(s)}`, `${i}Size${$(s)}`, `color${$(e)}`, t && "disableElevation", r && "fullWidth"],
+    label: ["label"],
+    startIcon: ["icon", "startIcon", `iconSize${$(s)}`],
+    endIcon: ["icon", "endIcon", `iconSize${$(s)}`]
+  }, p = G(c, ne, a);
+  return l({}, a, p);
+}, Wo = (o) => l({}, o.size === "small" && {
+  "& > *:nth-of-type(1)": {
+    fontSize: 18
+  }
+}, o.size === "medium" && {
+  "& > *:nth-of-type(1)": {
+    fontSize: 20
+  }
+}, o.size === "large" && {
+  "& > *:nth-of-type(1)": {
+    fontSize: 22
+  }
+}), ie = L(Uo, {
+  shouldForwardProp: (o) => Ho(o) || o === "classes",
+  name: "MuiButton",
+  slot: "Root",
+  overridesResolver: (o, e) => {
+    const {
+      ownerState: t
+    } = o;
+    return [e.root, e[t.variant], e[`${t.variant}${$(t.color)}`], e[`size${$(t.size)}`], e[`${t.variant}Size${$(t.size)}`], t.color === "inherit" && e.colorInherit, t.disableElevation && e.disableElevation, t.fullWidth && e.fullWidth];
+  }
+})(({
+  theme: o,
+  ownerState: e
+}) => {
+  var t, r;
+  const s = o.palette.mode === "light" ? o.palette.grey[300] : o.palette.grey[800], i = o.palette.mode === "light" ? o.palette.grey.A100 : o.palette.grey[700];
+  return l({}, 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": l({
+      textDecoration: "none",
+      backgroundColor: o.vars ? `rgba(${o.vars.palette.text.primaryChannel} / ${o.vars.palette.action.hoverOpacity})` : eo(o.palette.text.primary, o.palette.action.hoverOpacity),
+      // Reset on touch devices, it doesn't add specificity
+      "@media (hover: none)": {
+        backgroundColor: "transparent"
+      }
+    }, e.variant === "text" && e.color !== "inherit" && {
+      backgroundColor: o.vars ? `rgba(${o.vars.palette[e.color].mainChannel} / ${o.vars.palette.action.hoverOpacity})` : eo(o.palette[e.color].main, o.palette.action.hoverOpacity),
+      // Reset on touch devices, it doesn't add specificity
+      "@media (hover: none)": {
+        backgroundColor: "transparent"
+      }
+    }, e.variant === "outlined" && e.color !== "inherit" && {
+      border: `1px solid ${(o.vars || o).palette[e.color].main}`,
+      backgroundColor: o.vars ? `rgba(${o.vars.palette[e.color].mainChannel} / ${o.vars.palette.action.hoverOpacity})` : eo(o.palette[e.color].main, o.palette.action.hoverOpacity),
+      // Reset on touch devices, it doesn't add specificity
+      "@media (hover: none)": {
+        backgroundColor: "transparent"
+      }
+    }, e.variant === "contained" && {
+      backgroundColor: o.vars ? o.vars.palette.Button.inheritContainedHoverBg : i,
+      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]
+      }
+    }, e.variant === "contained" && e.color !== "inherit" && {
+      backgroundColor: (o.vars || o).palette[e.color].dark,
+      // Reset on touch devices, it doesn't add specificity
+      "@media (hover: none)": {
+        backgroundColor: (o.vars || o).palette[e.color].main
+      }
+    }),
+    "&:active": l({}, e.variant === "contained" && {
+      boxShadow: (o.vars || o).shadows[8]
+    }),
+    [`&.${no.focusVisible}`]: l({}, e.variant === "contained" && {
+      boxShadow: (o.vars || o).shadows[6]
+    }),
+    [`&.${no.disabled}`]: l({
+      color: (o.vars || o).palette.action.disabled
+    }, e.variant === "outlined" && {
+      border: `1px solid ${(o.vars || o).palette.action.disabledBackground}`
+    }, e.variant === "contained" && {
+      color: (o.vars || o).palette.action.disabled,
+      boxShadow: (o.vars || o).shadows[0],
+      backgroundColor: (o.vars || o).palette.action.disabledBackground
+    })
+  }, e.variant === "text" && {
+    padding: "6px 8px"
+  }, e.variant === "text" && e.color !== "inherit" && {
+    color: (o.vars || o).palette[e.color].main
+  }, e.variant === "outlined" && {
+    padding: "5px 15px",
+    border: "1px solid currentColor"
+  }, e.variant === "outlined" && e.color !== "inherit" && {
+    color: (o.vars || o).palette[e.color].main,
+    border: o.vars ? `1px solid rgba(${o.vars.palette[e.color].mainChannel} / 0.5)` : `1px solid ${eo(o.palette[e.color].main, 0.5)}`
+  }, e.variant === "contained" && {
+    color: o.vars ? (
+      // this is safe because grey does not change between default light/dark mode
+      o.vars.palette.text.primary
+    ) : (t = (r = o.palette).getContrastText) == null ? void 0 : t.call(r, o.palette.grey[300]),
+    backgroundColor: o.vars ? o.vars.palette.Button.inheritContainedBg : s,
+    boxShadow: (o.vars || o).shadows[2]
+  }, e.variant === "contained" && e.color !== "inherit" && {
+    color: (o.vars || o).palette[e.color].contrastText,
+    backgroundColor: (o.vars || o).palette[e.color].main
+  }, e.color === "inherit" && {
+    color: "inherit",
+    borderColor: "currentColor"
+  }, e.size === "small" && e.variant === "text" && {
+    padding: "4px 5px",
+    fontSize: o.typography.pxToRem(13)
+  }, e.size === "large" && e.variant === "text" && {
+    padding: "8px 11px",
+    fontSize: o.typography.pxToRem(15)
+  }, e.size === "small" && e.variant === "outlined" && {
+    padding: "3px 9px",
+    fontSize: o.typography.pxToRem(13)
+  }, e.size === "large" && e.variant === "outlined" && {
+    padding: "7px 21px",
+    fontSize: o.typography.pxToRem(15)
+  }, e.size === "small" && e.variant === "contained" && {
+    padding: "4px 10px",
+    fontSize: o.typography.pxToRem(13)
+  }, e.size === "large" && e.variant === "contained" && {
+    padding: "8px 22px",
+    fontSize: o.typography.pxToRem(15)
+  }, e.fullWidth && {
+    width: "100%"
+  });
+}, ({
+  ownerState: o
+}) => o.disableElevation && {
+  boxShadow: "none",
+  "&:hover": {
+    boxShadow: "none"
+  },
+  [`&.${no.focusVisible}`]: {
+    boxShadow: "none"
+  },
+  "&:active": {
+    boxShadow: "none"
+  },
+  [`&.${no.disabled}`]: {
+    boxShadow: "none"
+  }
+}), se = L("span", {
+  name: "MuiButton",
+  slot: "StartIcon",
+  overridesResolver: (o, e) => {
+    const {
+      ownerState: t
+    } = o;
+    return [e.startIcon, e[`iconSize${$(t.size)}`]];
+  }
+})(({
+  ownerState: o
+}) => l({
+  display: "inherit",
+  marginRight: 8,
+  marginLeft: -4
+}, o.size === "small" && {
+  marginLeft: -2
+}, Wo(o))), ae = L("span", {
+  name: "MuiButton",
+  slot: "EndIcon",
+  overridesResolver: (o, e) => {
+    const {
+      ownerState: t
+    } = o;
+    return [e.endIcon, e[`iconSize${$(t.size)}`]];
+  }
+})(({
+  ownerState: o
+}) => l({
+  display: "inherit",
+  marginRight: -4,
+  marginLeft: 8
+}, o.size === "small" && {
+  marginRight: -2
+}, Wo(o))), le = /* @__PURE__ */ d.forwardRef(function(e, t) {
+  const r = d.useContext(Mo), s = d.useContext($o), i = Vo(r, e), a = Y({
+    props: i,
+    name: "MuiButton"
+  }), {
+    children: c,
+    color: p = "primary",
+    component: b = "button",
+    className: m,
+    disabled: v = !1,
+    disableElevation: y = !1,
+    disableFocusRipple: h = !1,
+    endIcon: f,
+    focusVisibleClassName: S,
+    fullWidth: O = !1,
+    size: D = "medium",
+    startIcon: R,
+    type: u,
+    variant: k = "text"
+  } = a, E = j(a, te), P = l({}, a, {
+    color: p,
+    component: b,
+    disabled: v,
+    disableElevation: y,
+    disableFocusRipple: h,
+    fullWidth: O,
+    size: D,
+    type: u,
+    variant: k
+  }), T = re(P), I = R && /* @__PURE__ */ N(se, {
+    className: T.startIcon,
+    ownerState: P,
+    children: R
+  }), z = f && /* @__PURE__ */ N(ae, {
+    className: T.endIcon,
+    ownerState: P,
+    children: f
+  }), B = s || "";
+  return /* @__PURE__ */ co(ie, l({
+    ownerState: P,
+    className: _(r.className, T.root, m, B),
+    component: b,
+    disabled: v,
+    focusRipple: !h,
+    focusVisibleClassName: _(T.focusVisible, S),
+    ref: t,
+    type: u
+  }, E, {
+    classes: T,
+    children: [I, c, z]
+  }));
+});
+process.env.NODE_ENV !== "production" && (le.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: n.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: n.object,
+  /**
+   * @ignore
+   */
+  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: n.oneOfType([n.oneOf(["inherit", "primary", "secondary", "success", "error", "info", "warning"]), n.string]),
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: n.elementType,
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled: n.bool,
+  /**
+   * If `true`, no elevation is used.
+   * @default false
+   */
+  disableElevation: n.bool,
+  /**
+   * If `true`, the  keyboard focus ripple is disabled.
+   * @default false
+   */
+  disableFocusRipple: n.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: n.bool,
+  /**
+   * Element placed after the children.
+   */
+  endIcon: n.node,
+  /**
+   * @ignore
+   */
+  focusVisibleClassName: n.string,
+  /**
+   * If `true`, the button will take up the full width of its container.
+   * @default false
+   */
+  fullWidth: n.bool,
+  /**
+   * The URL to link to when the button is clicked.
+   * If defined, an `a` element will be used as the root node.
+   */
+  href: n.string,
+  /**
+   * The size of the component.
+   * `small` is equivalent to the dense button styling.
+   * @default 'medium'
+   */
+  size: n.oneOfType([n.oneOf(["small", "medium", "large"]), n.string]),
+  /**
+   * Element placed before the children.
+   */
+  startIcon: n.node,
+  /**
+   * 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]),
+  /**
+   * @ignore
+   */
+  type: n.oneOfType([n.oneOf(["button", "reset", "submit"]), n.string]),
+  /**
+   * The variant to use.
+   * @default 'text'
+   */
+  variant: n.oneOfType([n.oneOf(["contained", "outlined", "text"]), n.string])
+});
+function ce(o) {
   const e = V(o);
   return e.body === o ? uo(o).innerWidth > e.documentElement.clientWidth : o.scrollHeight > o.clientHeight;
 }
@@ -97,14 +444,14 @@ function Z(o, e) {
 function Ro(o) {
   return parseInt(uo(o).getComputedStyle(o).paddingRight, 10) || 0;
 }
-function te(o) {
+function de(o) {
   const t = ["TEMPLATE", "SCRIPT", "STYLE", "LINK", "MAP", "META", "NOSCRIPT", "PICTURE", "COL", "COLGROUP", "PARAM", "SLOT", "SOURCE", "TRACK"].indexOf(o.tagName) !== -1, r = o.tagName === "INPUT" && o.getAttribute("type") === "hidden";
   return t || r;
 }
 function No(o, e, t, r, s) {
   const i = [e, t, ...r];
   [].forEach.call(o.children, (a) => {
-    const c = i.indexOf(a) === -1, p = !te(a);
+    const c = i.indexOf(a) === -1, p = !de(a);
     c && p && Z(a, s);
   });
 }
@@ -112,10 +459,10 @@ function ao(o, e) {
   let t = -1;
   return o.some((r, s) => e(r) ? (t = s, !0) : !1), t;
 }
-function re(o, e) {
+function pe(o, e) {
   const t = [], r = o.container;
   if (!e.disableScrollLock) {
-    if (ne(r)) {
+    if (ce(r)) {
       const a = Zo(V(r));
       t.push({
         value: r.style.paddingRight,
@@ -162,13 +509,13 @@ function re(o, e) {
     });
   };
 }
-function ie(o) {
+function ue(o) {
   const e = [];
   return [].forEach.call(o.children, (t) => {
     t.getAttribute("aria-hidden") === "true" && e.push(t);
   }), e;
 }
-class se {
+class fe {
   constructor() {
     this.containers = void 0, this.modals = void 0, this.modals = [], this.containers = [];
   }
@@ -177,7 +524,7 @@ class se {
     if (r !== -1)
       return r;
     r = this.modals.length, this.modals.push(e), e.modalRef && Z(e.modalRef, !1);
-    const s = ie(t);
+    const s = ue(t);
     No(t, e.mount, e.modalRef, s, !0);
     const i = ao(this.containers, (a) => a.container === t);
     return i !== -1 ? (this.containers[i].modals.push(e), r) : (this.containers.push({
@@ -189,7 +536,7 @@ class se {
   }
   mount(e, t) {
     const r = ao(this.containers, (i) => i.modals.indexOf(e) !== -1), s = this.containers[r];
-    s.restore || (s.restore = re(s, t));
+    s.restore || (s.restore = pe(s, t));
   }
   remove(e, t = !0) {
     const r = this.modals.indexOf(e);
@@ -208,33 +555,33 @@ class se {
     return this.modals.length > 0 && this.modals[this.modals.length - 1] === e;
   }
 }
-const ae = ["input", "select", "textarea", "a[href]", "button", "[tabindex]", "audio[controls]", "video[controls]", '[contenteditable]:not([contenteditable="false"])'].join(",");
-function le(o) {
+const be = ["input", "select", "textarea", "a[href]", "button", "[tabindex]", "audio[controls]", "video[controls]", '[contenteditable]:not([contenteditable="false"])'].join(",");
+function ge(o) {
   const e = parseInt(o.getAttribute("tabindex") || "", 10);
   return Number.isNaN(e) ? o.contentEditable === "true" || (o.nodeName === "AUDIO" || o.nodeName === "VIDEO" || o.nodeName === "DETAILS") && o.getAttribute("tabindex") === null ? 0 : o.tabIndex : e;
 }
-function ce(o) {
+function me(o) {
   if (o.tagName !== "INPUT" || o.type !== "radio" || !o.name)
     return !1;
   const e = (r) => o.ownerDocument.querySelector(`input[type="radio"]${r}`);
   let t = e(`[name="${o.name}"]:checked`);
   return t || (t = e(`[name="${o.name}"]`)), t !== o;
 }
-function de(o) {
-  return !(o.disabled || o.tagName === "INPUT" && o.type === "hidden" || ce(o));
+function ve(o) {
+  return !(o.disabled || o.tagName === "INPUT" && o.type === "hidden" || me(o));
 }
-function pe(o) {
+function xe(o) {
   const e = [], t = [];
-  return Array.from(o.querySelectorAll(ae)).forEach((r, s) => {
-    const i = le(r);
-    i === -1 || !de(r) || (i === 0 ? e.push(r) : t.push({
+  return Array.from(o.querySelectorAll(be)).forEach((r, s) => {
+    const i = ge(r);
+    i === -1 || !ve(r) || (i === 0 ? e.push(r) : t.push({
       documentOrder: s,
       tabIndex: i,
       node: r
     }));
   }), t.sort((r, s) => r.tabIndex === s.tabIndex ? r.documentOrder - s.documentOrder : r.tabIndex - s.tabIndex).map((r) => r.node).concat(e);
 }
-function ue() {
+function he() {
   return !0;
 }
 function to(o) {
@@ -243,8 +590,8 @@ function to(o) {
     disableAutoFocus: t = !1,
     disableEnforceFocus: r = !1,
     disableRestoreFocus: s = !1,
-    getTabbable: i = pe,
-    isEnabled: a = ue,
+    getTabbable: i = xe,
+    isEnabled: a = he,
     open: c
   } = o, p = d.useRef(!1), b = d.useRef(null), m = d.useRef(null), v = d.useRef(null), y = d.useRef(null), h = d.useRef(!1), f = d.useRef(null), S = J(e.ref, f), O = d.useRef(null);
   d.useEffect(() => {
@@ -373,7 +720,7 @@ process.env.NODE_ENV !== "production" && (to.propTypes = {
   open: n.bool.isRequired
 });
 process.env.NODE_ENV !== "production" && (to.propTypes = Oo(to.propTypes));
-function fe(o) {
+function ye(o) {
   return typeof o == "function" ? o() : o;
 }
 const ro = /* @__PURE__ */ d.forwardRef(function(e, t) {
@@ -382,12 +729,12 @@ const ro = /* @__PURE__ */ d.forwardRef(function(e, t) {
     container: s,
     disablePortal: i = !1
   } = e, [a, c] = d.useState(null), p = J(/* @__PURE__ */ d.isValidElement(r) ? r.ref : null, t);
-  if (yo(() => {
-    i || c(fe(s) || document.body);
-  }, [s, i]), yo(() => {
+  if (ho(() => {
+    i || c(ye(s) || document.body);
+  }, [s, i]), ho(() => {
     if (a && !i)
-      return Eo(t, a), () => {
-        Eo(t, null);
+      return yo(t, a), () => {
+        yo(t, null);
       };
   }, [t, a, i]), i) {
     if (/* @__PURE__ */ d.isValidElement(r)) {
@@ -431,7 +778,7 @@ process.env.NODE_ENV !== "production" && (ro.propTypes = {
   disablePortal: n.bool
 });
 process.env.NODE_ENV !== "production" && (ro.propTypes = Oo(ro.propTypes));
-const be = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"], ge = {
+const Ee = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"], Te = {
   entering: {
     opacity: 1
   },
@@ -457,15 +804,15 @@ const be = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "
     style: O,
     timeout: D = s,
     // eslint-disable-next-line react/prop-types
-    TransitionComponent: R = Uo
-  } = e, u = j(e, be), k = d.useRef(null), E = J(k, c.ref, t), P = (x) => (W) => {
+    TransitionComponent: R = Ko
+  } = e, u = j(e, Ee), k = d.useRef(null), E = J(k, c.ref, t), P = (x) => (W) => {
     if (x) {
       const g = k.current;
       W === void 0 ? x(g) : x(g, W);
     }
   }, T = P(y), I = P((x, W) => {
-    Ko(x);
-    const g = ho({
+    qo(x);
+    const g = To({
       style: O,
       timeout: D,
       easing: p
@@ -474,7 +821,7 @@ const be = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "
     });
     x.style.webkitTransition = r.transitions.create("opacity", g), x.style.transition = r.transitions.create("opacity", g), m && m(x, W);
   }), z = P(v), B = P(S), F = P((x) => {
-    const W = ho({
+    const W = To({
       style: O,
       timeout: D,
       easing: p
@@ -502,7 +849,7 @@ const be = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "
       style: l({
         opacity: 0,
         visibility: x === "exited" && !b ? "hidden" : void 0
-      }, ge[x], O, c.props.style),
+      }, Te[x], O, c.props.style),
       ref: E
     }, W))
   }));
@@ -534,478 +881,136 @@ process.env.NODE_ENV !== "production" && (fo.propTypes = {
    */
   easing: n.oneOfType([n.shape({
     enter: n.string,
-    exit: n.string
-  }), n.string]),
-  /**
-   * If `true`, the component will transition in.
-   */
-  in: n.bool,
-  /**
-   * @ignore
-   */
-  onEnter: n.func,
-  /**
-   * @ignore
-   */
-  onEntered: n.func,
-  /**
-   * @ignore
-   */
-  onEntering: n.func,
-  /**
-   * @ignore
-   */
-  onExit: n.func,
-  /**
-   * @ignore
-   */
-  onExited: n.func,
-  /**
-   * @ignore
-   */
-  onExiting: n.func,
-  /**
-   * @ignore
-   */
-  style: n.object,
-  /**
-   * The duration for the transition, in milliseconds.
-   * You may specify a single timeout for all transitions, or individually with an object.
-   * @default {
-   *   enter: theme.transitions.duration.enteringScreen,
-   *   exit: theme.transitions.duration.leavingScreen,
-   * }
-   */
-  timeout: n.oneOfType([n.number, n.shape({
-    appear: n.number,
-    enter: n.number,
-    exit: n.number
-  })])
-});
-function me(o) {
-  return U("MuiBackdrop", o);
-}
-H("MuiBackdrop", ["root", "invisible"]);
-const ve = ["children", "className", "component", "components", "componentsProps", "invisible", "open", "slotProps", "slots", "TransitionComponent", "transitionDuration"], xe = (o) => {
-  const {
-    classes: e,
-    invisible: t
-  } = o;
-  return G({
-    root: ["root", t && "invisible"]
-  }, me, e);
-}, he = L("div", {
-  name: "MuiBackdrop",
-  slot: "Root",
-  overridesResolver: (o, e) => {
-    const {
-      ownerState: t
-    } = o;
-    return [e.root, t.invisible && e.invisible];
-  }
-})(({
-  ownerState: o
-}) => l({
-  position: "fixed",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  right: 0,
-  bottom: 0,
-  top: 0,
-  left: 0,
-  backgroundColor: "rgba(0, 0, 0, 0.5)",
-  WebkitTapHighlightColor: "transparent"
-}, o.invisible && {
-  backgroundColor: "transparent"
-})), bo = /* @__PURE__ */ d.forwardRef(function(e, t) {
-  var r, s, i;
-  const a = Y({
-    props: e,
-    name: "MuiBackdrop"
-  }), {
-    children: c,
-    className: p,
-    component: b = "div",
-    components: m = {},
-    componentsProps: v = {},
-    invisible: y = !1,
-    open: h,
-    slotProps: f = {},
-    slots: S = {},
-    TransitionComponent: O = fo,
-    transitionDuration: D
-  } = a, R = j(a, ve), u = l({}, a, {
-    component: b,
-    invisible: y
-  }), k = xe(u), E = (r = f.root) != null ? r : v.root;
-  return /* @__PURE__ */ N(O, l({
-    in: h,
-    timeout: D
-  }, R, {
-    children: /* @__PURE__ */ N(he, l({
-      "aria-hidden": !0
-    }, E, {
-      as: (s = (i = S.root) != null ? i : m.Root) != null ? s : b,
-      className: _(k.root, p, E == null ? void 0 : E.className),
-      ownerState: l({}, u, E == null ? void 0 : E.ownerState),
-      classes: k,
-      ref: t,
-      children: c
-    }))
-  }));
-});
-process.env.NODE_ENV !== "production" && (bo.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: n.node,
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: n.object,
-  /**
-   * @ignore
-   */
-  className: n.string,
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: n.elementType,
+    exit: n.string
+  }), n.string]),
   /**
-   * The components used for each slot inside.
-   *
-   * This prop is an alias for the `slots` prop.
-   * It's recommended to use the `slots` prop instead.
-   *
-   * @default {}
+   * If `true`, the component will transition in.
    */
-  components: n.shape({
-    Root: n.elementType
-  }),
+  in: n.bool,
   /**
-   * The extra props for the slot components.
-   * You can override the existing props or add new ones.
-   *
-   * This prop is an alias for the `slotProps` prop.
-   * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
-   *
-   * @default {}
+   * @ignore
    */
-  componentsProps: n.shape({
-    root: n.object
-  }),
+  onEnter: n.func,
   /**
-   * If `true`, the backdrop is invisible.
-   * It can be used when rendering a popover or a custom select component.
-   * @default false
+   * @ignore
    */
-  invisible: n.bool,
+  onEntered: n.func,
   /**
-   * If `true`, the component is shown.
+   * @ignore
    */
-  open: n.bool.isRequired,
+  onEntering: n.func,
   /**
-   * The extra props for the slot components.
-   * You can override the existing props or add new ones.
-   *
-   * This prop is an alias for the `componentsProps` prop, which will be deprecated in the future.
-   *
-   * @default {}
+   * @ignore
    */
-  slotProps: n.shape({
-    root: n.object
-  }),
+  onExit: n.func,
   /**
-   * The components used for each slot inside.
-   *
-   * This prop is an alias for the `components` prop, which will be deprecated in the future.
-   *
-   * @default {}
+   * @ignore
    */
-  slots: n.shape({
-    root: n.elementType
-  }),
+  onExited: n.func,
   /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
+   * @ignore
    */
-  sx: n.oneOfType([n.arrayOf(n.oneOfType([n.func, n.object, n.bool])), n.func, n.object]),
+  onExiting: n.func,
   /**
-   * The component used for the transition.
-   * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
-   * @default Fade
+   * @ignore
    */
-  TransitionComponent: n.elementType,
+  style: n.object,
   /**
    * The duration for the transition, in milliseconds.
    * You may specify a single timeout for all transitions, or individually with an object.
+   * @default {
+   *   enter: theme.transitions.duration.enteringScreen,
+   *   exit: theme.transitions.duration.leavingScreen,
+   * }
    */
-  transitionDuration: n.oneOfType([n.number, n.shape({
+  timeout: n.oneOfType([n.number, n.shape({
     appear: n.number,
     enter: n.number,
     exit: n.number
   })])
 });
-function ye(o) {
-  return typeof o == "function" ? o() : o;
-}
-function Ee(o) {
-  return o ? o.props.hasOwnProperty("in") : !1;
-}
-const Te = new se();
 function Ce(o) {
-  const {
-    container: e,
-    disableEscapeKeyDown: t = !1,
-    disableScrollLock: r = !1,
-    // @ts-ignore internal logic - Base UI supports the manager as a prop too
-    manager: s = Te,
-    closeAfterTransition: i = !1,
-    onTransitionEnter: a,
-    onTransitionExited: c,
-    children: p,
-    onClose: b,
-    open: m,
-    rootRef: v
-  } = o, y = d.useRef({}), h = d.useRef(null), f = d.useRef(null), S = J(f, v), [O, D] = d.useState(!m), R = Ee(p);
-  let u = !0;
-  (o["aria-hidden"] === "false" || o["aria-hidden"] === !1) && (u = !1);
-  const k = () => V(h.current), E = () => (y.current.modalRef = f.current, y.current.mount = h.current, y.current), P = () => {
-    s.mount(E(), {
-      disableScrollLock: r
-    }), f.current && (f.current.scrollTop = 0);
-  }, T = To(() => {
-    const g = ye(e) || k().body;
-    s.add(E(), g), f.current && P();
-  }), I = d.useCallback(() => s.isTopModal(E()), [s]), z = To((g) => {
-    h.current = g, g && (m && I() ? P() : f.current && Z(f.current, u));
-  }), B = d.useCallback(() => {
-    s.remove(E(), u);
-  }, [u, s]);
-  d.useEffect(() => () => {
-    B();
-  }, [B]), d.useEffect(() => {
-    m ? T() : (!R || !i) && B();
-  }, [m, B, R, i, T]);
-  const F = (g) => (C) => {
-    var M;
-    (M = g.onKeyDown) == null || M.call(g, C), !(C.key !== "Escape" || C.which === 229 || // Wait until IME is settled.
-    !I()) && (t || (C.stopPropagation(), b && b(C, "escapeKeyDown")));
-  }, w = (g) => (C) => {
-    var M;
-    (M = g.onClick) == null || M.call(g, C), C.target === C.currentTarget && b && b(C, "backdropClick");
-  };
-  return {
-    getRootProps: (g = {}) => {
-      const C = Bo(o);
-      delete C.onTransitionEnter, delete C.onTransitionExited;
-      const M = l({}, C, g);
-      return l({
-        role: "presentation"
-      }, M, {
-        onKeyDown: F(M),
-        ref: S
-      });
-    },
-    getBackdropProps: (g = {}) => {
-      const C = g;
-      return l({
-        "aria-hidden": !0
-      }, C, {
-        onClick: w(C),
-        open: m
-      });
-    },
-    getTransitionProps: () => {
-      const g = () => {
-        D(!1), a && a();
-      }, C = () => {
-        D(!0), c && c(), i && B();
-      };
-      return {
-        onEnter: Co(g, p == null ? void 0 : p.props.onEnter),
-        onExited: Co(C, p == null ? void 0 : p.props.onExited)
-      };
-    },
-    rootRef: S,
-    portalRef: z,
-    isTopModal: I,
-    exited: O,
-    hasTransition: R
-  };
-}
-function ke(o) {
-  return U("MuiModal", o);
+  return U("MuiBackdrop", o);
 }
-H("MuiModal", ["root", "hidden", "backdrop"]);
-const Pe = ["BackdropComponent", "BackdropProps", "classes", "className", "closeAfterTransition", "children", "container", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "onBackdropClick", "onClose", "onTransitionEnter", "onTransitionExited", "open", "slotProps", "slots", "theme"], Re = (o) => {
+H("MuiBackdrop", ["root", "invisible"]);
+const ke = ["children", "className", "component", "components", "componentsProps", "invisible", "open", "slotProps", "slots", "TransitionComponent", "transitionDuration"], Pe = (o) => {
   const {
-    open: e,
-    exited: t,
-    classes: r
+    classes: e,
+    invisible: t
   } = o;
   return G({
-    root: ["root", !e && t && "hidden"],
-    backdrop: ["backdrop"]
-  }, ke, r);
-}, Ne = L("div", {
-  name: "MuiModal",
+    root: ["root", t && "invisible"]
+  }, Ce, e);
+}, Re = L("div", {
+  name: "MuiBackdrop",
   slot: "Root",
   overridesResolver: (o, e) => {
     const {
       ownerState: t
     } = o;
-    return [e.root, !t.open && t.exited && e.hidden];
+    return [e.root, t.invisible && e.invisible];
   }
 })(({
-  theme: o,
-  ownerState: e
+  ownerState: o
 }) => l({
   position: "fixed",
-  zIndex: (o.vars || o).zIndex.modal,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
   right: 0,
   bottom: 0,
   top: 0,
-  left: 0
-}, !e.open && e.exited && {
-  visibility: "hidden"
-})), Se = L(bo, {
-  name: "MuiModal",
-  slot: "Backdrop",
-  overridesResolver: (o, e) => e.backdrop
-})({
-  zIndex: -1
-}), Mo = /* @__PURE__ */ d.forwardRef(function(e, t) {
-  var r, s, i, a, c, p;
-  const b = Y({
-    name: "MuiModal",
-    props: e
-  }), {
-    BackdropComponent: m = Se,
-    BackdropProps: v,
-    className: y,
-    closeAfterTransition: h = !1,
-    children: f,
-    container: S,
-    component: O,
-    components: D = {},
-    componentsProps: R = {},
-    disableAutoFocus: u = !1,
-    disableEnforceFocus: k = !1,
-    disableEscapeKeyDown: E = !1,
-    disablePortal: P = !1,
-    disableRestoreFocus: T = !1,
-    disableScrollLock: I = !1,
-    hideBackdrop: z = !1,
-    keepMounted: B = !1,
-    onBackdropClick: F,
-    open: w,
-    slotProps: A,
-    slots: x
-    // eslint-disable-next-line react/prop-types
-  } = b, W = j(b, Pe), g = l({}, b, {
-    closeAfterTransition: h,
-    disableAutoFocus: u,
-    disableEnforceFocus: k,
-    disableEscapeKeyDown: E,
-    disablePortal: P,
-    disableRestoreFocus: T,
-    disableScrollLock: I,
-    hideBackdrop: z,
-    keepMounted: B
+  left: 0,
+  backgroundColor: "rgba(0, 0, 0, 0.5)",
+  WebkitTapHighlightColor: "transparent"
+}, o.invisible && {
+  backgroundColor: "transparent"
+})), bo = /* @__PURE__ */ d.forwardRef(function(e, t) {
+  var r, s, i;
+  const a = Y({
+    props: e,
+    name: "MuiBackdrop"
   }), {
-    getRootProps: C,
-    getBackdropProps: M,
-    getTransitionProps: wo,
-    portalRef: Ao,
-    isTopModal: _o,
-    exited: go,
-    hasTransition: mo
-  } = Ce(l({}, g, {
-    rootRef: t
-  })), X = l({}, g, {
-    exited: go
-  }), K = Re(X), Q = {};
-  if (f.props.tabIndex === void 0 && (Q.tabIndex = "-1"), mo) {
-    const {
-      onEnter: q,
-      onExited: oo
-    } = wo();
-    Q.onEnter = q, Q.onExited = oo;
-  }
-  const vo = (r = (s = x == null ? void 0 : x.root) != null ? s : D.Root) != null ? r : Ne, xo = (i = (a = x == null ? void 0 : x.backdrop) != null ? a : D.Backdrop) != null ? i : m, io = (c = A == null ? void 0 : A.root) != null ? c : R.root, so = (p = A == null ? void 0 : A.backdrop) != null ? p : R.backdrop, Lo = Po({
-    elementType: vo,
-    externalSlotProps: io,
-    externalForwardedProps: W,
-    getSlotProps: C,
-    additionalProps: {
+    children: c,
+    className: p,
+    component: b = "div",
+    components: m = {},
+    componentsProps: v = {},
+    invisible: y = !1,
+    open: h,
+    slotProps: f = {},
+    slots: S = {},
+    TransitionComponent: O = fo,
+    transitionDuration: D
+  } = a, R = j(a, ke), u = l({}, a, {
+    component: b,
+    invisible: y
+  }), k = Pe(u), E = (r = f.root) != null ? r : v.root;
+  return /* @__PURE__ */ N(O, l({
+    in: h,
+    timeout: D
+  }, R, {
+    children: /* @__PURE__ */ N(Re, l({
+      "aria-hidden": !0
+    }, E, {
+      as: (s = (i = S.root) != null ? i : m.Root) != null ? s : b,
+      className: _(k.root, p, E == null ? void 0 : E.className),
+      ownerState: l({}, u, E == null ? void 0 : E.ownerState),
+      classes: k,
       ref: t,
-      as: O
-    },
-    ownerState: X,
-    className: _(y, io == null ? void 0 : io.className, K == null ? void 0 : K.root, !X.open && X.exited && (K == null ? void 0 : K.hidden))
-  }), jo = Po({
-    elementType: xo,
-    externalSlotProps: so,
-    additionalProps: v,
-    getSlotProps: (q) => M(l({}, q, {
-      onClick: (oo) => {
-        F && F(oo), q != null && q.onClick && q.onClick(oo);
-      }
-    })),
-    className: _(so == null ? void 0 : so.className, v == null ? void 0 : v.className, K == null ? void 0 : K.backdrop),
-    ownerState: X
-  });
-  return !B && !w && (!mo || go) ? null : /* @__PURE__ */ N(ro, {
-    ref: Ao,
-    container: S,
-    disablePortal: P,
-    children: /* @__PURE__ */ co(vo, l({}, Lo, {
-      children: [!z && m ? /* @__PURE__ */ N(xo, l({}, jo)) : null, /* @__PURE__ */ N(to, {
-        disableEnforceFocus: k,
-        disableAutoFocus: u,
-        disableRestoreFocus: T,
-        isEnabled: _o,
-        open: w,
-        children: /* @__PURE__ */ d.cloneElement(f, Q)
-      })]
+      children: c
     }))
-  });
+  }));
 });
-process.env.NODE_ENV !== "production" && (Mo.propTypes = {
+process.env.NODE_ENV !== "production" && (bo.propTypes = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
   // └─────────────────────────────────────────────────────────────────────┘
   /**
-   * A backdrop component. This prop enables custom backdrop rendering.
-   * @deprecated Use `slots.backdrop` instead. While this prop currently works, it will be removed in the next major version.
-   * Use the `slots.backdrop` prop to make your application ready for the next version of Material UI.
-   * @default styled(Backdrop, {
-   *   name: 'MuiModal',
-   *   slot: 'Backdrop',
-   *   overridesResolver: (props, styles) => {
-   *     return styles.backdrop;
-   *   },
-   * })({
-   *   zIndex: -1,
-   * })
-   */
-  BackdropComponent: n.elementType,
-  /**
-   * Props applied to the [`Backdrop`](/material-ui/api/backdrop/) element.
-   * @deprecated Use `slotProps.backdrop` instead.
-   */
-  BackdropProps: n.object,
-  /**
-   * A single child content element.
+   * The content of the component.
    */
-  children: po.isRequired,
+  children: n.node,
   /**
    * Override or extend the styles applied to the component.
    */
@@ -1014,11 +1019,6 @@ process.env.NODE_ENV !== "production" && (Mo.propTypes = {
    * @ignore
    */
   className: n.string,
-  /**
-   * When set to true the Modal waits until a nested Transition is completed before closing.
-   * @default false
-   */
-  closeAfterTransition: n.bool,
   /**
    * The component used for the root node.
    * Either a string to use a HTML element or a component.
@@ -1033,7 +1033,6 @@ process.env.NODE_ENV !== "production" && (Mo.propTypes = {
    * @default {}
    */
   components: n.shape({
-    Backdrop: n.elementType,
     Root: n.elementType
   }),
   /**
@@ -1046,345 +1045,290 @@ process.env.NODE_ENV !== "production" && (Mo.propTypes = {
    * @default {}
    */
   componentsProps: n.shape({
-    backdrop: n.oneOfType([n.func, n.object]),
-    root: n.oneOfType([n.func, n.object])
+    root: n.object
   }),
   /**
-   * An HTML element or function that returns one.
-   * The `container` will have the portal children appended to it.
-   *
-   * You can also provide a callback, which is called in a React layout effect.
-   * This lets you set the container from a ref, and also makes server-side rendering possible.
-   *
-   * By default, it uses the body of the top-level document object,
-   * so it's simply `document.body` most of the time.
-   */
-  container: n.oneOfType([Io, n.func]),
-  /**
-   * If `true`, the modal will not automatically shift focus to itself when it opens, and
-   * replace it to the last focused element when it closes.
-   * This also works correctly with any modal children that have the `disableAutoFocus` prop.
-   *
-   * Generally this should never be set to `true` as it makes the modal less
-   * accessible to assistive technologies, like screen readers.
-   * @default false
-   */
-  disableAutoFocus: n.bool,
-  /**
-   * If `true`, the modal will not prevent focus from leaving the modal while open.
-   *
-   * Generally this should never be set to `true` as it makes the modal less
-   * accessible to assistive technologies, like screen readers.
-   * @default false
-   */
-  disableEnforceFocus: n.bool,
-  /**
-   * If `true`, hitting escape will not fire the `onClose` callback.
-   * @default false
-   */
-  disableEscapeKeyDown: n.bool,
-  /**
-   * The `children` will be under the DOM hierarchy of the parent component.
-   * @default false
-   */
-  disablePortal: n.bool,
-  /**
-   * If `true`, the modal will not restore focus to previously focused element once
-   * modal is hidden or unmounted.
-   * @default false
-   */
-  disableRestoreFocus: n.bool,
-  /**
-   * Disable the scroll lock behavior.
-   * @default false
-   */
-  disableScrollLock: n.bool,
-  /**
-   * If `true`, the backdrop is not rendered.
-   * @default false
-   */
-  hideBackdrop: n.bool,
-  /**
-   * Always keep the children in the DOM.
-   * This prop can be useful in SEO situation or
-   * when you want to maximize the responsiveness of the Modal.
+   * If `true`, the backdrop is invisible.
+   * It can be used when rendering a popover or a custom select component.
    * @default false
    */
-  keepMounted: n.bool,
-  /**
-   * Callback fired when the backdrop is clicked.
-   * @deprecated Use the `onClose` prop with the `reason` argument to handle the `backdropClick` events.
-   */
-  onBackdropClick: n.func,
-  /**
-   * Callback fired when the component requests to be closed.
-   * The `reason` parameter can optionally be used to control the response to `onClose`.
-   *
-   * @param {object} event The event source of the callback.
-   * @param {string} reason Can be: `"escapeKeyDown"`, `"backdropClick"`.
-   */
-  onClose: n.func,
-  /**
-   * A function called when a transition enters.
-   */
-  onTransitionEnter: n.func,
-  /**
-   * A function called when a transition has exited.
-   */
-  onTransitionExited: n.func,
+  invisible: n.bool,
   /**
    * If `true`, the component is shown.
    */
   open: n.bool.isRequired,
   /**
-   * The props used for each slot inside the Modal.
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * This prop is an alias for the `componentsProps` prop, which will be deprecated in the future.
+   *
    * @default {}
    */
   slotProps: n.shape({
-    backdrop: n.oneOfType([n.func, n.object]),
-    root: n.oneOfType([n.func, n.object])
+    root: n.object
   }),
   /**
-   * The components used for each slot inside the Modal.
-   * Either a string to use a HTML element or a component.
+   * The components used for each slot inside.
+   *
+   * This prop is an alias for the `components` prop, which will be deprecated in the future.
+   *
    * @default {}
    */
   slots: n.shape({
-    backdrop: n.elementType,
     root: n.elementType
   }),
   /**
    * 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: n.oneOfType([n.arrayOf(n.oneOfType([n.func, n.object, n.bool])), n.func, n.object]),
+  /**
+   * The component used for the transition.
+   * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
+   * @default Fade
+   */
+  TransitionComponent: n.elementType,
+  /**
+   * The duration for the transition, in milliseconds.
+   * You may specify a single timeout for all transitions, or individually with an object.
+   */
+  transitionDuration: n.oneOfType([n.number, n.shape({
+    appear: n.number,
+    enter: n.number,
+    exit: n.number
+  })])
 });
-function Oe(o) {
-  return U("MuiDialog", o);
+function Ne(o) {
+  return typeof o == "function" ? o() : o;
+}
+function Se(o) {
+  return o ? o.props.hasOwnProperty("in") : !1;
+}
+const Oe = new fe();
+function De(o) {
+  const {
+    container: e,
+    disableEscapeKeyDown: t = !1,
+    disableScrollLock: r = !1,
+    // @ts-ignore internal logic - Base UI supports the manager as a prop too
+    manager: s = Oe,
+    closeAfterTransition: i = !1,
+    onTransitionEnter: a,
+    onTransitionExited: c,
+    children: p,
+    onClose: b,
+    open: m,
+    rootRef: v
+  } = o, y = d.useRef({}), h = d.useRef(null), f = d.useRef(null), S = J(f, v), [O, D] = d.useState(!m), R = Se(p);
+  let u = !0;
+  (o["aria-hidden"] === "false" || o["aria-hidden"] === !1) && (u = !1);
+  const k = () => V(h.current), E = () => (y.current.modalRef = f.current, y.current.mount = h.current, y.current), P = () => {
+    s.mount(E(), {
+      disableScrollLock: r
+    }), f.current && (f.current.scrollTop = 0);
+  }, T = Eo(() => {
+    const g = Ne(e) || k().body;
+    s.add(E(), g), f.current && P();
+  }), I = d.useCallback(() => s.isTopModal(E()), [s]), z = Eo((g) => {
+    h.current = g, g && (m && I() ? P() : f.current && Z(f.current, u));
+  }), B = d.useCallback(() => {
+    s.remove(E(), u);
+  }, [u, s]);
+  d.useEffect(() => () => {
+    B();
+  }, [B]), d.useEffect(() => {
+    m ? T() : (!R || !i) && B();
+  }, [m, B, R, i, T]);
+  const F = (g) => (C) => {
+    var M;
+    (M = g.onKeyDown) == null || M.call(g, C), !(C.key !== "Escape" || C.which === 229 || // Wait until IME is settled.
+    !I()) && (t || (C.stopPropagation(), b && b(C, "escapeKeyDown")));
+  }, w = (g) => (C) => {
+    var M;
+    (M = g.onClick) == null || M.call(g, C), C.target === C.currentTarget && b && b(C, "backdropClick");
+  };
+  return {
+    getRootProps: (g = {}) => {
+      const C = Bo(o);
+      delete C.onTransitionEnter, delete C.onTransitionExited;
+      const M = l({}, C, g);
+      return l({
+        role: "presentation"
+      }, M, {
+        onKeyDown: F(M),
+        ref: S
+      });
+    },
+    getBackdropProps: (g = {}) => {
+      const C = g;
+      return l({
+        "aria-hidden": !0
+      }, C, {
+        onClick: w(C),
+        open: m
+      });
+    },
+    getTransitionProps: () => {
+      const g = () => {
+        D(!1), a && a();
+      }, C = () => {
+        D(!0), c && c(), i && B();
+      };
+      return {
+        onEnter: Co(g, p == null ? void 0 : p.props.onEnter),
+        onExited: Co(C, p == null ? void 0 : p.props.onExited)
+      };
+    },
+    rootRef: S,
+    portalRef: z,
+    isTopModal: I,
+    exited: O,
+    hasTransition: R
+  };
 }
-const lo = H("MuiDialog", ["root", "scrollPaper", "scrollBody", "container", "paper", "paperScrollPaper", "paperScrollBody", "paperWidthFalse", "paperWidthXs", "paperWidthSm", "paperWidthMd", "paperWidthLg", "paperWidthXl", "paperFullWidth", "paperFullScreen"]), $o = /* @__PURE__ */ d.createContext({});
-process.env.NODE_ENV !== "production" && ($o.displayName = "DialogContext");
-const De = ["aria-describedby", "aria-labelledby", "BackdropComponent", "BackdropProps", "children", "className", "disableEscapeKeyDown", "fullScreen", "fullWidth", "maxWidth", "onBackdropClick", "onClick", "onClose", "open", "PaperComponent", "PaperProps", "scroll", "TransitionComponent", "transitionDuration", "TransitionProps"], Ie = L(bo, {
-  name: "MuiDialog",
-  slot: "Backdrop",
-  overrides: (o, e) => e.backdrop
-})({
-  // Improve scrollable dialog support.
-  zIndex: -1
-}), Be = (o) => {
+function Ie(o) {
+  return U("MuiModal", o);
+}
+H("MuiModal", ["root", "hidden", "backdrop"]);
+const Be = ["BackdropComponent", "BackdropProps", "classes", "className", "closeAfterTransition", "children", "container", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "onBackdropClick", "onClose", "onTransitionEnter", "onTransitionExited", "open", "slotProps", "slots", "theme"], Me = (o) => {
   const {
-    classes: e,
-    scroll: t,
-    maxWidth: r,
-    fullWidth: s,
-    fullScreen: i
-  } = o, a = {
-    root: ["root"],
-    container: ["container", `scroll${$(t)}`],
-    paper: ["paper", `paperScroll${$(t)}`, `paperWidth${$(String(r))}`, s && "paperFullWidth", i && "paperFullScreen"]
-  };
-  return G(a, Oe, e);
-}, Me = L(Mo, {
-  name: "MuiDialog",
+    open: e,
+    exited: t,
+    classes: r
+  } = o;
+  return G({
+    root: ["root", !e && t && "hidden"],
+    backdrop: ["backdrop"]
+  }, Ie, r);
+}, $e = L("div", {
+  name: "MuiModal",
   slot: "Root",
-  overridesResolver: (o, e) => e.root
-})({
-  "@media print": {
-    // Use !important to override the Modal inline-style.
-    position: "absolute !important"
-  }
-}), $e = L("div", {
-  name: "MuiDialog",
-  slot: "Container",
-  overridesResolver: (o, e) => {
-    const {
-      ownerState: t
-    } = o;
-    return [e.container, e[`scroll${$(t.scroll)}`]];
-  }
-})(({
-  ownerState: o
-}) => l({
-  height: "100%",
-  "@media print": {
-    height: "auto"
-  },
-  // We disable the focus ring for mouse, touch and keyboard users.
-  outline: 0
-}, o.scroll === "paper" && {
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center"
-}, o.scroll === "body" && {
-  overflowY: "auto",
-  overflowX: "hidden",
-  textAlign: "center",
-  "&::after": {
-    content: '""',
-    display: "inline-block",
-    verticalAlign: "middle",
-    height: "100%",
-    width: "0"
-  }
-})), We = L(Do, {
-  name: "MuiDialog",
-  slot: "Paper",
   overridesResolver: (o, e) => {
     const {
       ownerState: t
     } = o;
-    return [e.paper, e[`scrollPaper${$(t.scroll)}`], e[`paperWidth${$(String(t.maxWidth))}`], t.fullWidth && e.paperFullWidth, t.fullScreen && e.paperFullScreen];
+    return [e.root, !t.open && t.exited && e.hidden];
   }
 })(({
   theme: o,
   ownerState: e
 }) => l({
-  margin: 32,
-  position: "relative",
-  overflowY: "auto",
-  // Fix IE11 issue, to remove at some point.
-  "@media print": {
-    overflowY: "visible",
-    boxShadow: "none"
-  }
-}, e.scroll === "paper" && {
-  display: "flex",
-  flexDirection: "column",
-  maxHeight: "calc(100% - 64px)"
-}, e.scroll === "body" && {
-  display: "inline-block",
-  verticalAlign: "middle",
-  textAlign: "left"
-  // 'initial' doesn't work on IE11
-}, !e.maxWidth && {
-  maxWidth: "calc(100% - 64px)"
-}, e.maxWidth === "xs" && {
-  maxWidth: o.breakpoints.unit === "px" ? Math.max(o.breakpoints.values.xs, 444) : `max(${o.breakpoints.values.xs}${o.breakpoints.unit}, 444px)`,
-  [`&.${lo.paperScrollBody}`]: {
-    [o.breakpoints.down(Math.max(o.breakpoints.values.xs, 444) + 32 * 2)]: {
-      maxWidth: "calc(100% - 64px)"
-    }
-  }
-}, e.maxWidth && e.maxWidth !== "xs" && {
-  maxWidth: `${o.breakpoints.values[e.maxWidth]}${o.breakpoints.unit}`,
-  [`&.${lo.paperScrollBody}`]: {
-    [o.breakpoints.down(o.breakpoints.values[e.maxWidth] + 32 * 2)]: {
-      maxWidth: "calc(100% - 64px)"
-    }
-  }
-}, e.fullWidth && {
-  width: "calc(100% - 64px)"
-}, e.fullScreen && {
-  margin: 0,
-  width: "100%",
-  maxWidth: "100%",
-  height: "100%",
-  maxHeight: "none",
-  borderRadius: 0,
-  [`&.${lo.paperScrollBody}`]: {
-    margin: 0,
-    maxWidth: "100%"
+  position: "fixed",
+  zIndex: (o.vars || o).zIndex.modal,
+  right: 0,
+  bottom: 0,
+  top: 0,
+  left: 0
+}, !e.open && e.exited && {
+  visibility: "hidden"
+})), We = L(bo, {
+  name: "MuiModal",
+  slot: "Backdrop",
+  overridesResolver: (o, e) => e.backdrop
+})({
+  zIndex: -1
+}), zo = /* @__PURE__ */ d.forwardRef(function(e, t) {
+  var r, s, i, a, c, p;
+  const b = Y({
+    name: "MuiModal",
+    props: e
+  }), {
+    BackdropComponent: m = We,
+    BackdropProps: v,
+    className: y,
+    closeAfterTransition: h = !1,
+    children: f,
+    container: S,
+    component: O,
+    components: D = {},
+    componentsProps: R = {},
+    disableAutoFocus: u = !1,
+    disableEnforceFocus: k = !1,
+    disableEscapeKeyDown: E = !1,
+    disablePortal: P = !1,
+    disableRestoreFocus: T = !1,
+    disableScrollLock: I = !1,
+    hideBackdrop: z = !1,
+    keepMounted: B = !1,
+    onBackdropClick: F,
+    open: w,
+    slotProps: A,
+    slots: x
+    // eslint-disable-next-line react/prop-types
+  } = b, W = j(b, Be), g = l({}, b, {
+    closeAfterTransition: h,
+    disableAutoFocus: u,
+    disableEnforceFocus: k,
+    disableEscapeKeyDown: E,
+    disablePortal: P,
+    disableRestoreFocus: T,
+    disableScrollLock: I,
+    hideBackdrop: z,
+    keepMounted: B
+  }), {
+    getRootProps: C,
+    getBackdropProps: M,
+    getTransitionProps: wo,
+    portalRef: Ao,
+    isTopModal: _o,
+    exited: go,
+    hasTransition: mo
+  } = De(l({}, g, {
+    rootRef: t
+  })), X = l({}, g, {
+    exited: go
+  }), K = Me(X), Q = {};
+  if (f.props.tabIndex === void 0 && (Q.tabIndex = "-1"), mo) {
+    const {
+      onEnter: q,
+      onExited: oo
+    } = wo();
+    Q.onEnter = q, Q.onExited = oo;
   }
-})), ze = /* @__PURE__ */ d.forwardRef(function(e, t) {
-  const r = Y({
-    props: e,
-    name: "MuiDialog"
-  }), s = So(), i = {
-    enter: s.transitions.duration.enteringScreen,
-    exit: s.transitions.duration.leavingScreen
-  }, {
-    "aria-describedby": a,
-    "aria-labelledby": c,
-    BackdropComponent: p,
-    BackdropProps: b,
-    children: m,
-    className: v,
-    disableEscapeKeyDown: y = !1,
-    fullScreen: h = !1,
-    fullWidth: f = !1,
-    maxWidth: S = "sm",
-    onBackdropClick: O,
-    onClick: D,
-    onClose: R,
-    open: u,
-    PaperComponent: k = Do,
-    PaperProps: E = {},
-    scroll: P = "paper",
-    TransitionComponent: T = fo,
-    transitionDuration: I = i,
-    TransitionProps: z
-  } = r, B = j(r, De), F = l({}, r, {
-    disableEscapeKeyDown: y,
-    fullScreen: h,
-    fullWidth: f,
-    maxWidth: S,
-    scroll: P
-  }), w = Be(F), A = d.useRef(), x = (M) => {
-    A.current = M.target === M.currentTarget;
-  }, W = (M) => {
-    D && D(M), A.current && (A.current = null, O && O(M), R && R(M, "backdropClick"));
-  }, g = Yo(c), C = d.useMemo(() => ({
-    titleId: g
-  }), [g]);
-  return /* @__PURE__ */ N(Me, l({
-    className: _(w.root, v),
-    closeAfterTransition: !0,
-    components: {
-      Backdrop: Ie
-    },
-    componentsProps: {
-      backdrop: l({
-        transitionDuration: I,
-        as: p
-      }, b)
+  const vo = (r = (s = x == null ? void 0 : x.root) != null ? s : D.Root) != null ? r : $e, xo = (i = (a = x == null ? void 0 : x.backdrop) != null ? a : D.Backdrop) != null ? i : m, io = (c = A == null ? void 0 : A.root) != null ? c : R.root, so = (p = A == null ? void 0 : A.backdrop) != null ? p : R.backdrop, Lo = Po({
+    elementType: vo,
+    externalSlotProps: io,
+    externalForwardedProps: W,
+    getSlotProps: C,
+    additionalProps: {
+      ref: t,
+      as: O
     },
-    disableEscapeKeyDown: y,
-    onClose: R,
-    open: u,
-    ref: t,
-    onClick: W,
-    ownerState: F
-  }, B, {
-    children: /* @__PURE__ */ N(T, l({
-      appear: !0,
-      in: u,
-      timeout: I,
-      role: "presentation"
-    }, z, {
-      children: /* @__PURE__ */ N($e, {
-        className: _(w.container),
-        onMouseDown: x,
-        ownerState: F,
-        children: /* @__PURE__ */ N(We, l({
-          as: k,
-          elevation: 24,
-          role: "dialog",
-          "aria-describedby": a,
-          "aria-labelledby": g
-        }, E, {
-          className: _(w.paper, E.className),
-          ownerState: F,
-          children: /* @__PURE__ */ N($o.Provider, {
-            value: C,
-            children: m
-          })
-        }))
-      })
+    ownerState: X,
+    className: _(y, io == null ? void 0 : io.className, K == null ? void 0 : K.root, !X.open && X.exited && (K == null ? void 0 : K.hidden))
+  }), jo = Po({
+    elementType: xo,
+    externalSlotProps: so,
+    additionalProps: v,
+    getSlotProps: (q) => M(l({}, q, {
+      onClick: (oo) => {
+        F && F(oo), q != null && q.onClick && q.onClick(oo);
+      }
+    })),
+    className: _(so == null ? void 0 : so.className, v == null ? void 0 : v.className, K == null ? void 0 : K.backdrop),
+    ownerState: X
+  });
+  return !B && !w && (!mo || go) ? null : /* @__PURE__ */ N(ro, {
+    ref: Ao,
+    container: S,
+    disablePortal: P,
+    children: /* @__PURE__ */ co(vo, l({}, Lo, {
+      children: [!z && m ? /* @__PURE__ */ N(xo, l({}, jo)) : null, /* @__PURE__ */ N(to, {
+        disableEnforceFocus: k,
+        disableAutoFocus: u,
+        disableRestoreFocus: T,
+        isEnabled: _o,
+        open: w,
+        children: /* @__PURE__ */ d.cloneElement(f, Q)
+      })]
     }))
-  }));
+  });
 });
-process.env.NODE_ENV !== "production" && (ze.propTypes = {
+process.env.NODE_ENV !== "production" && (zo.propTypes = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
   // └─────────────────────────────────────────────────────────────────────┘
-  /**
-   * The id(s) of the element(s) that describe the dialog.
-   */
-  "aria-describedby": n.string,
-  /**
-   * The id(s) of the element(s) that label the dialog.
-   */
-  "aria-labelledby": n.string,
   /**
    * A backdrop component. This prop enables custom backdrop rendering.
    * @deprecated Use `slots.backdrop` instead. While this prop currently works, it will be removed in the next major version.
@@ -1401,13 +1345,14 @@ process.env.NODE_ENV !== "production" && (ze.propTypes = {
    */
   BackdropComponent: n.elementType,
   /**
-   * @ignore
+   * Props applied to the [`Backdrop`](/material-ui/api/backdrop/) element.
+   * @deprecated Use `slotProps.backdrop` instead.
    */
   BackdropProps: n.object,
   /**
-   * Dialog children, usually the included sub-components.
+   * A single child content element.
    */
-  children: n.node,
+  children: po.isRequired,
   /**
    * Override or extend the styles applied to the component.
    */
@@ -1417,513 +1362,397 @@ process.env.NODE_ENV !== "production" && (ze.propTypes = {
    */
   className: n.string,
   /**
-   * If `true`, hitting escape will not fire the `onClose` callback.
+   * When set to true the Modal waits until a nested Transition is completed before closing.
    * @default false
    */
-  disableEscapeKeyDown: n.bool,
+  closeAfterTransition: n.bool,
   /**
-   * If `true`, the dialog is full-screen.
-   * @default false
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
    */
-  fullScreen: n.bool,
+  component: n.elementType,
   /**
-   * If `true`, the dialog stretches to `maxWidth`.
+   * The components used for each slot inside.
    *
-   * Notice that the dialog width grow is limited by the default margin.
-   * @default false
-   */
-  fullWidth: n.bool,
-  /**
-   * Determine the max-width of the dialog.
-   * The dialog width grows with the size of the screen.
-   * Set to `false` to disable `maxWidth`.
-   * @default 'sm'
-   */
-  maxWidth: n.oneOfType([n.oneOf(["xs", "sm", "md", "lg", "xl", !1]), n.string]),
-  /**
-   * Callback fired when the backdrop is clicked.
-   * @deprecated Use the `onClose` prop with the `reason` argument to handle the `backdropClick` events.
-   */
-  onBackdropClick: n.func,
-  /**
-   * @ignore
-   */
-  onClick: n.func,
-  /**
-   * Callback fired when the component requests to be closed.
+   * This prop is an alias for the `slots` prop.
+   * It's recommended to use the `slots` prop instead.
    *
-   * @param {object} event The event source of the callback.
-   * @param {string} reason Can be: `"escapeKeyDown"`, `"backdropClick"`.
-   */
-  onClose: n.func,
-  /**
-   * If `true`, the component is shown.
+   * @default {}
    */
-  open: n.bool.isRequired,
+  components: n.shape({
+    Backdrop: n.elementType,
+    Root: n.elementType
+  }),
   /**
-   * The component used to render the body of the dialog.
-   * @default Paper
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * This prop is an alias for the `slotProps` prop.
+   * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
+   *
+   * @default {}
    */
-  PaperComponent: n.elementType,
+  componentsProps: n.shape({
+    backdrop: n.oneOfType([n.func, n.object]),
+    root: n.oneOfType([n.func, n.object])
+  }),
   /**
-   * Props applied to the [`Paper`](/material-ui/api/paper/) element.
-   * @default {}
+   * An HTML element or function that returns one.
+   * The `container` will have the portal children appended to it.
+   *
+   * You can also provide a callback, which is called in a React layout effect.
+   * This lets you set the container from a ref, and also makes server-side rendering possible.
+   *
+   * By default, it uses the body of the top-level document object,
+   * so it's simply `document.body` most of the time.
    */
-  PaperProps: n.object,
+  container: n.oneOfType([Io, n.func]),
   /**
-   * Determine the container for scrolling the dialog.
-   * @default 'paper'
+   * If `true`, the modal will not automatically shift focus to itself when it opens, and
+   * replace it to the last focused element when it closes.
+   * This also works correctly with any modal children that have the `disableAutoFocus` prop.
+   *
+   * Generally this should never be set to `true` as it makes the modal less
+   * accessible to assistive technologies, like screen readers.
+   * @default false
    */
-  scroll: n.oneOf(["body", "paper"]),
+  disableAutoFocus: n.bool,
   /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
+   * If `true`, the modal will not prevent focus from leaving the modal while open.
+   *
+   * Generally this should never be set to `true` as it makes the modal less
+   * accessible to assistive technologies, like screen readers.
+   * @default false
    */
-  sx: n.oneOfType([n.arrayOf(n.oneOfType([n.func, n.object, n.bool])), n.func, n.object]),
+  disableEnforceFocus: n.bool,
   /**
-   * The component used for the transition.
-   * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
-   * @default Fade
+   * If `true`, hitting escape will not fire the `onClose` callback.
+   * @default false
    */
-  TransitionComponent: n.elementType,
+  disableEscapeKeyDown: n.bool,
   /**
-   * The duration for the transition, in milliseconds.
-   * You may specify a single timeout for all transitions, or individually with an object.
-   * @default {
-   *   enter: theme.transitions.duration.enteringScreen,
-   *   exit: theme.transitions.duration.leavingScreen,
-   * }
+   * The `children` will be under the DOM hierarchy of the parent component.
+   * @default false
    */
-  transitionDuration: n.oneOfType([n.number, n.shape({
-    appear: n.number,
-    enter: n.number,
-    exit: n.number
-  })]),
+  disablePortal: n.bool,
   /**
-   * Props applied to the transition element.
-   * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component.
+   * If `true`, the modal will not restore focus to previously focused element once
+   * modal is hidden or unmounted.
+   * @default false
    */
-  TransitionProps: n.object
-});
-function Fe(o) {
-  return U("MuiDialogActions", o);
-}
-H("MuiDialogActions", ["root", "spacing"]);
-const we = ["className", "disableSpacing"], Ae = (o) => {
-  const {
-    classes: e,
-    disableSpacing: t
-  } = o;
-  return G({
-    root: ["root", !t && "spacing"]
-  }, Fe, e);
-}, _e = L("div", {
-  name: "MuiDialogActions",
-  slot: "Root",
-  overridesResolver: (o, e) => {
-    const {
-      ownerState: t
-    } = o;
-    return [e.root, !t.disableSpacing && e.spacing];
-  }
-})(({
-  ownerState: o
-}) => l({
-  display: "flex",
-  alignItems: "center",
-  padding: 8,
-  justifyContent: "flex-end",
-  flex: "0 0 auto"
-}, !o.disableSpacing && {
-  "& > :not(style) ~ :not(style)": {
-    marginLeft: 8
-  }
-})), Le = /* @__PURE__ */ d.forwardRef(function(e, t) {
-  const r = Y({
-    props: e,
-    name: "MuiDialogActions"
-  }), {
-    className: s,
-    disableSpacing: i = !1
-  } = r, a = j(r, we), c = l({}, r, {
-    disableSpacing: i
-  }), p = Ae(c);
-  return /* @__PURE__ */ N(_e, l({
-    className: _(p.root, s),
-    ownerState: c,
-    ref: t
-  }, a));
-});
-process.env.NODE_ENV !== "production" && (Le.propTypes = {
-  // ┌────────────────────────────── Warning ──────────────────────────────┐
-  // │ These PropTypes are generated from the TypeScript type definitions. │
-  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
-  // └─────────────────────────────────────────────────────────────────────┘
+  disableRestoreFocus: n.bool,
   /**
-   * The content of the component.
+   * Disable the scroll lock behavior.
+   * @default false
    */
-  children: n.node,
+  disableScrollLock: n.bool,
   /**
-   * Override or extend the styles applied to the component.
+   * If `true`, the backdrop is not rendered.
+   * @default false
    */
-  classes: n.object,
+  hideBackdrop: n.bool,
   /**
-   * @ignore
+   * Always keep the children in the DOM.
+   * This prop can be useful in SEO situation or
+   * when you want to maximize the responsiveness of the Modal.
+   * @default false
    */
-  className: n.string,
+  keepMounted: n.bool,
   /**
-   * If `true`, the actions do not have additional margin.
-   * @default false
+   * Callback fired when the backdrop is clicked.
+   * @deprecated Use the `onClose` prop with the `reason` argument to handle the `backdropClick` events.
    */
-  disableSpacing: n.bool,
+  onBackdropClick: n.func,
   /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
+   * Callback fired when the component requests to be closed.
+   * The `reason` parameter can optionally be used to control the response to `onClose`.
+   *
+   * @param {object} event The event source of the callback.
+   * @param {string} reason Can be: `"escapeKeyDown"`, `"backdropClick"`.
    */
-  sx: n.oneOfType([n.arrayOf(n.oneOfType([n.func, n.object, n.bool])), n.func, n.object])
-});
-function je(o) {
-  return U("MuiDialogContent", o);
-}
-H("MuiDialogContent", ["root", "dividers"]);
-function mn(o) {
-  return U("MuiDialogTitle", o);
-}
-const Ve = H("MuiDialogTitle", ["root"]), He = ["className", "dividers"], Ue = (o) => {
-  const {
-    classes: e,
-    dividers: t
-  } = o;
-  return G({
-    root: ["root", t && "dividers"]
-  }, je, e);
-}, Ke = L("div", {
-  name: "MuiDialogContent",
-  slot: "Root",
-  overridesResolver: (o, e) => {
-    const {
-      ownerState: t
-    } = o;
-    return [e.root, t.dividers && e.dividers];
-  }
-})(({
-  theme: o,
-  ownerState: e
-}) => l({
-  flex: "1 1 auto",
-  // Add iOS momentum scrolling for iOS < 13.0
-  WebkitOverflowScrolling: "touch",
-  overflowY: "auto",
-  padding: "20px 24px"
-}, e.dividers ? {
-  padding: "16px 24px",
-  borderTop: `1px solid ${(o.vars || o).palette.divider}`,
-  borderBottom: `1px solid ${(o.vars || o).palette.divider}`
-} : {
-  [`.${Ve.root} + &`]: {
-    paddingTop: 0
-  }
-})), qe = /* @__PURE__ */ d.forwardRef(function(e, t) {
-  const r = Y({
-    props: e,
-    name: "MuiDialogContent"
-  }), {
-    className: s,
-    dividers: i = !1
-  } = r, a = j(r, He), c = l({}, r, {
-    dividers: i
-  }), p = Ue(c);
-  return /* @__PURE__ */ N(Ke, l({
-    className: _(p.root, s),
-    ownerState: c,
-    ref: t
-  }, a));
-});
-process.env.NODE_ENV !== "production" && (qe.propTypes = {
-  // ┌────────────────────────────── Warning ──────────────────────────────┐
-  // │ These PropTypes are generated from the TypeScript type definitions. │
-  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
-  // └─────────────────────────────────────────────────────────────────────┘
+  onClose: n.func,
   /**
-   * The content of the component.
+   * A function called when a transition enters.
    */
-  children: n.node,
+  onTransitionEnter: n.func,
   /**
-   * Override or extend the styles applied to the component.
+   * A function called when a transition has exited.
    */
-  classes: n.object,
+  onTransitionExited: n.func,
   /**
-   * @ignore
+   * If `true`, the component is shown.
    */
-  className: n.string,
+  open: n.bool.isRequired,
   /**
-   * Display the top and bottom dividers.
-   * @default false
+   * The props used for each slot inside the Modal.
+   * @default {}
    */
-  dividers: n.bool,
+  slotProps: n.shape({
+    backdrop: n.oneOfType([n.func, n.object]),
+    root: n.oneOfType([n.func, n.object])
+  }),
   /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
+   * The components used for each slot inside the Modal.
+   * Either a string to use a HTML element or a component.
+   * @default {}
    */
-  sx: n.oneOfType([n.arrayOf(n.oneOfType([n.func, n.object, n.bool])), n.func, n.object])
-});
-function Ye(o) {
-  return U("MuiButton", o);
-}
-const no = H("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"]), Wo = /* @__PURE__ */ d.createContext({});
-process.env.NODE_ENV !== "production" && (Wo.displayName = "ButtonGroupContext");
-const zo = /* @__PURE__ */ d.createContext(void 0);
-process.env.NODE_ENV !== "production" && (zo.displayName = "ButtonGroupButtonContext");
-const Ge = ["children", "color", "component", "className", "disabled", "disableElevation", "disableFocusRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"], Xe = (o) => {
-  const {
-    color: e,
-    disableElevation: t,
-    fullWidth: r,
-    size: s,
-    variant: i,
-    classes: a
-  } = o, c = {
-    root: ["root", i, `${i}${$(e)}`, `size${$(s)}`, `${i}Size${$(s)}`, `color${$(e)}`, t && "disableElevation", r && "fullWidth"],
-    label: ["label"],
-    startIcon: ["icon", "startIcon", `iconSize${$(s)}`],
-    endIcon: ["icon", "endIcon", `iconSize${$(s)}`]
-  }, p = G(c, Ye, a);
-  return l({}, a, p);
-}, Fo = (o) => l({}, o.size === "small" && {
-  "& > *:nth-of-type(1)": {
-    fontSize: 18
-  }
-}, o.size === "medium" && {
-  "& > *:nth-of-type(1)": {
-    fontSize: 20
-  }
-}, o.size === "large" && {
-  "& > *:nth-of-type(1)": {
-    fontSize: 22
-  }
-}), Ze = L(qo, {
-  shouldForwardProp: (o) => Ho(o) || o === "classes",
-  name: "MuiButton",
-  slot: "Root",
-  overridesResolver: (o, e) => {
-    const {
-      ownerState: t
-    } = o;
-    return [e.root, e[t.variant], e[`${t.variant}${$(t.color)}`], e[`size${$(t.size)}`], e[`${t.variant}Size${$(t.size)}`], t.color === "inherit" && e.colorInherit, t.disableElevation && e.disableElevation, t.fullWidth && e.fullWidth];
-  }
-})(({
-  theme: o,
-  ownerState: e
-}) => {
-  var t, r;
-  const s = o.palette.mode === "light" ? o.palette.grey[300] : o.palette.grey[800], i = o.palette.mode === "light" ? o.palette.grey.A100 : o.palette.grey[700];
-  return l({}, 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": l({
-      textDecoration: "none",
-      backgroundColor: o.vars ? `rgba(${o.vars.palette.text.primaryChannel} / ${o.vars.palette.action.hoverOpacity})` : eo(o.palette.text.primary, o.palette.action.hoverOpacity),
-      // Reset on touch devices, it doesn't add specificity
-      "@media (hover: none)": {
-        backgroundColor: "transparent"
-      }
-    }, e.variant === "text" && e.color !== "inherit" && {
-      backgroundColor: o.vars ? `rgba(${o.vars.palette[e.color].mainChannel} / ${o.vars.palette.action.hoverOpacity})` : eo(o.palette[e.color].main, o.palette.action.hoverOpacity),
-      // Reset on touch devices, it doesn't add specificity
-      "@media (hover: none)": {
-        backgroundColor: "transparent"
-      }
-    }, e.variant === "outlined" && e.color !== "inherit" && {
-      border: `1px solid ${(o.vars || o).palette[e.color].main}`,
-      backgroundColor: o.vars ? `rgba(${o.vars.palette[e.color].mainChannel} / ${o.vars.palette.action.hoverOpacity})` : eo(o.palette[e.color].main, o.palette.action.hoverOpacity),
-      // Reset on touch devices, it doesn't add specificity
-      "@media (hover: none)": {
-        backgroundColor: "transparent"
-      }
-    }, e.variant === "contained" && {
-      backgroundColor: o.vars ? o.vars.palette.Button.inheritContainedHoverBg : i,
-      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]
-      }
-    }, e.variant === "contained" && e.color !== "inherit" && {
-      backgroundColor: (o.vars || o).palette[e.color].dark,
-      // Reset on touch devices, it doesn't add specificity
-      "@media (hover: none)": {
-        backgroundColor: (o.vars || o).palette[e.color].main
-      }
-    }),
-    "&:active": l({}, e.variant === "contained" && {
-      boxShadow: (o.vars || o).shadows[8]
-    }),
-    [`&.${no.focusVisible}`]: l({}, e.variant === "contained" && {
-      boxShadow: (o.vars || o).shadows[6]
-    }),
-    [`&.${no.disabled}`]: l({
-      color: (o.vars || o).palette.action.disabled
-    }, e.variant === "outlined" && {
-      border: `1px solid ${(o.vars || o).palette.action.disabledBackground}`
-    }, e.variant === "contained" && {
-      color: (o.vars || o).palette.action.disabled,
-      boxShadow: (o.vars || o).shadows[0],
-      backgroundColor: (o.vars || o).palette.action.disabledBackground
-    })
-  }, e.variant === "text" && {
-    padding: "6px 8px"
-  }, e.variant === "text" && e.color !== "inherit" && {
-    color: (o.vars || o).palette[e.color].main
-  }, e.variant === "outlined" && {
-    padding: "5px 15px",
-    border: "1px solid currentColor"
-  }, e.variant === "outlined" && e.color !== "inherit" && {
-    color: (o.vars || o).palette[e.color].main,
-    border: o.vars ? `1px solid rgba(${o.vars.palette[e.color].mainChannel} / 0.5)` : `1px solid ${eo(o.palette[e.color].main, 0.5)}`
-  }, e.variant === "contained" && {
-    color: o.vars ? (
-      // this is safe because grey does not change between default light/dark mode
-      o.vars.palette.text.primary
-    ) : (t = (r = o.palette).getContrastText) == null ? void 0 : t.call(r, o.palette.grey[300]),
-    backgroundColor: o.vars ? o.vars.palette.Button.inheritContainedBg : s,
-    boxShadow: (o.vars || o).shadows[2]
-  }, e.variant === "contained" && e.color !== "inherit" && {
-    color: (o.vars || o).palette[e.color].contrastText,
-    backgroundColor: (o.vars || o).palette[e.color].main
-  }, e.color === "inherit" && {
-    color: "inherit",
-    borderColor: "currentColor"
-  }, e.size === "small" && e.variant === "text" && {
-    padding: "4px 5px",
-    fontSize: o.typography.pxToRem(13)
-  }, e.size === "large" && e.variant === "text" && {
-    padding: "8px 11px",
-    fontSize: o.typography.pxToRem(15)
-  }, e.size === "small" && e.variant === "outlined" && {
-    padding: "3px 9px",
-    fontSize: o.typography.pxToRem(13)
-  }, e.size === "large" && e.variant === "outlined" && {
-    padding: "7px 21px",
-    fontSize: o.typography.pxToRem(15)
-  }, e.size === "small" && e.variant === "contained" && {
-    padding: "4px 10px",
-    fontSize: o.typography.pxToRem(13)
-  }, e.size === "large" && e.variant === "contained" && {
-    padding: "8px 22px",
-    fontSize: o.typography.pxToRem(15)
-  }, e.fullWidth && {
-    width: "100%"
-  });
-}, ({
-  ownerState: o
-}) => o.disableElevation && {
-  boxShadow: "none",
-  "&:hover": {
-    boxShadow: "none"
-  },
-  [`&.${no.focusVisible}`]: {
-    boxShadow: "none"
-  },
-  "&:active": {
-    boxShadow: "none"
-  },
-  [`&.${no.disabled}`]: {
-    boxShadow: "none"
+  slots: n.shape({
+    backdrop: n.elementType,
+    root: n.elementType
+  }),
+  /**
+   * 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])
+});
+function ze(o) {
+  return U("MuiDialog", o);
+}
+const lo = H("MuiDialog", ["root", "scrollPaper", "scrollBody", "container", "paper", "paperScrollPaper", "paperScrollBody", "paperWidthFalse", "paperWidthXs", "paperWidthSm", "paperWidthMd", "paperWidthLg", "paperWidthXl", "paperFullWidth", "paperFullScreen"]), Fo = /* @__PURE__ */ d.createContext({});
+process.env.NODE_ENV !== "production" && (Fo.displayName = "DialogContext");
+const Fe = ["aria-describedby", "aria-labelledby", "BackdropComponent", "BackdropProps", "children", "className", "disableEscapeKeyDown", "fullScreen", "fullWidth", "maxWidth", "onBackdropClick", "onClick", "onClose", "open", "PaperComponent", "PaperProps", "scroll", "TransitionComponent", "transitionDuration", "TransitionProps"], we = L(bo, {
+  name: "MuiDialog",
+  slot: "Backdrop",
+  overrides: (o, e) => e.backdrop
+})({
+  // Improve scrollable dialog support.
+  zIndex: -1
+}), Ae = (o) => {
+  const {
+    classes: e,
+    scroll: t,
+    maxWidth: r,
+    fullWidth: s,
+    fullScreen: i
+  } = o, a = {
+    root: ["root"],
+    container: ["container", `scroll${$(t)}`],
+    paper: ["paper", `paperScroll${$(t)}`, `paperWidth${$(String(r))}`, s && "paperFullWidth", i && "paperFullScreen"]
+  };
+  return G(a, ze, e);
+}, _e = L(zo, {
+  name: "MuiDialog",
+  slot: "Root",
+  overridesResolver: (o, e) => e.root
+})({
+  "@media print": {
+    // Use !important to override the Modal inline-style.
+    position: "absolute !important"
   }
-}), Je = L("span", {
-  name: "MuiButton",
-  slot: "StartIcon",
+}), Le = L("div", {
+  name: "MuiDialog",
+  slot: "Container",
   overridesResolver: (o, e) => {
     const {
       ownerState: t
     } = o;
-    return [e.startIcon, e[`iconSize${$(t.size)}`]];
+    return [e.container, e[`scroll${$(t.scroll)}`]];
   }
 })(({
   ownerState: o
 }) => l({
-  display: "inherit",
-  marginRight: 8,
-  marginLeft: -4
-}, o.size === "small" && {
-  marginLeft: -2
-}, Fo(o))), Qe = L("span", {
-  name: "MuiButton",
-  slot: "EndIcon",
+  height: "100%",
+  "@media print": {
+    height: "auto"
+  },
+  // We disable the focus ring for mouse, touch and keyboard users.
+  outline: 0
+}, o.scroll === "paper" && {
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center"
+}, o.scroll === "body" && {
+  overflowY: "auto",
+  overflowX: "hidden",
+  textAlign: "center",
+  "&::after": {
+    content: '""',
+    display: "inline-block",
+    verticalAlign: "middle",
+    height: "100%",
+    width: "0"
+  }
+})), je = L(Do, {
+  name: "MuiDialog",
+  slot: "Paper",
   overridesResolver: (o, e) => {
     const {
       ownerState: t
     } = o;
-    return [e.endIcon, e[`iconSize${$(t.size)}`]];
+    return [e.paper, e[`scrollPaper${$(t.scroll)}`], e[`paperWidth${$(String(t.maxWidth))}`], t.fullWidth && e.paperFullWidth, t.fullScreen && e.paperFullScreen];
   }
 })(({
-  ownerState: o
+  theme: o,
+  ownerState: e
 }) => l({
-  display: "inherit",
-  marginRight: -4,
-  marginLeft: 8
-}, o.size === "small" && {
-  marginRight: -2
-}, Fo(o))), on = /* @__PURE__ */ d.forwardRef(function(e, t) {
-  const r = d.useContext(Wo), s = d.useContext(zo), i = Vo(r, e), a = Y({
-    props: i,
-    name: "MuiButton"
-  }), {
-    children: c,
-    color: p = "primary",
-    component: b = "button",
-    className: m,
-    disabled: v = !1,
-    disableElevation: y = !1,
-    disableFocusRipple: h = !1,
-    endIcon: f,
-    focusVisibleClassName: S,
-    fullWidth: O = !1,
-    size: D = "medium",
-    startIcon: R,
-    type: u,
-    variant: k = "text"
-  } = a, E = j(a, Ge), P = l({}, a, {
-    color: p,
-    component: b,
-    disabled: v,
-    disableElevation: y,
-    disableFocusRipple: h,
-    fullWidth: O,
-    size: D,
-    type: u,
-    variant: k
-  }), T = Xe(P), I = R && /* @__PURE__ */ N(Je, {
-    className: T.startIcon,
-    ownerState: P,
-    children: R
-  }), z = f && /* @__PURE__ */ N(Qe, {
-    className: T.endIcon,
-    ownerState: P,
-    children: f
-  }), B = s || "";
-  return /* @__PURE__ */ co(Ze, l({
-    ownerState: P,
-    className: _(r.className, T.root, m, B),
-    component: b,
-    disabled: v,
-    focusRipple: !h,
-    focusVisibleClassName: _(T.focusVisible, S),
+  margin: 32,
+  position: "relative",
+  overflowY: "auto",
+  // Fix IE11 issue, to remove at some point.
+  "@media print": {
+    overflowY: "visible",
+    boxShadow: "none"
+  }
+}, e.scroll === "paper" && {
+  display: "flex",
+  flexDirection: "column",
+  maxHeight: "calc(100% - 64px)"
+}, e.scroll === "body" && {
+  display: "inline-block",
+  verticalAlign: "middle",
+  textAlign: "left"
+  // 'initial' doesn't work on IE11
+}, !e.maxWidth && {
+  maxWidth: "calc(100% - 64px)"
+}, e.maxWidth === "xs" && {
+  maxWidth: o.breakpoints.unit === "px" ? Math.max(o.breakpoints.values.xs, 444) : `max(${o.breakpoints.values.xs}${o.breakpoints.unit}, 444px)`,
+  [`&.${lo.paperScrollBody}`]: {
+    [o.breakpoints.down(Math.max(o.breakpoints.values.xs, 444) + 32 * 2)]: {
+      maxWidth: "calc(100% - 64px)"
+    }
+  }
+}, e.maxWidth && e.maxWidth !== "xs" && {
+  maxWidth: `${o.breakpoints.values[e.maxWidth]}${o.breakpoints.unit}`,
+  [`&.${lo.paperScrollBody}`]: {
+    [o.breakpoints.down(o.breakpoints.values[e.maxWidth] + 32 * 2)]: {
+      maxWidth: "calc(100% - 64px)"
+    }
+  }
+}, e.fullWidth && {
+  width: "calc(100% - 64px)"
+}, e.fullScreen && {
+  margin: 0,
+  width: "100%",
+  maxWidth: "100%",
+  height: "100%",
+  maxHeight: "none",
+  borderRadius: 0,
+  [`&.${lo.paperScrollBody}`]: {
+    margin: 0,
+    maxWidth: "100%"
+  }
+})), Ve = /* @__PURE__ */ d.forwardRef(function(e, t) {
+  const r = Y({
+    props: e,
+    name: "MuiDialog"
+  }), s = So(), i = {
+    enter: s.transitions.duration.enteringScreen,
+    exit: s.transitions.duration.leavingScreen
+  }, {
+    "aria-describedby": a,
+    "aria-labelledby": c,
+    BackdropComponent: p,
+    BackdropProps: b,
+    children: m,
+    className: v,
+    disableEscapeKeyDown: y = !1,
+    fullScreen: h = !1,
+    fullWidth: f = !1,
+    maxWidth: S = "sm",
+    onBackdropClick: O,
+    onClick: D,
+    onClose: R,
+    open: u,
+    PaperComponent: k = Do,
+    PaperProps: E = {},
+    scroll: P = "paper",
+    TransitionComponent: T = fo,
+    transitionDuration: I = i,
+    TransitionProps: z
+  } = r, B = j(r, Fe), F = l({}, r, {
+    disableEscapeKeyDown: y,
+    fullScreen: h,
+    fullWidth: f,
+    maxWidth: S,
+    scroll: P
+  }), w = Ae(F), A = d.useRef(), x = (M) => {
+    A.current = M.target === M.currentTarget;
+  }, W = (M) => {
+    D && D(M), A.current && (A.current = null, O && O(M), R && R(M, "backdropClick"));
+  }, g = Yo(c), C = d.useMemo(() => ({
+    titleId: g
+  }), [g]);
+  return /* @__PURE__ */ N(_e, l({
+    className: _(w.root, v),
+    closeAfterTransition: !0,
+    components: {
+      Backdrop: we
+    },
+    componentsProps: {
+      backdrop: l({
+        transitionDuration: I,
+        as: p
+      }, b)
+    },
+    disableEscapeKeyDown: y,
+    onClose: R,
+    open: u,
     ref: t,
-    type: u
-  }, E, {
-    classes: T,
-    children: [I, c, z]
+    onClick: W,
+    ownerState: F
+  }, B, {
+    children: /* @__PURE__ */ N(T, l({
+      appear: !0,
+      in: u,
+      timeout: I,
+      role: "presentation"
+    }, z, {
+      children: /* @__PURE__ */ N(Le, {
+        className: _(w.container),
+        onMouseDown: x,
+        ownerState: F,
+        children: /* @__PURE__ */ N(je, l({
+          as: k,
+          elevation: 24,
+          role: "dialog",
+          "aria-describedby": a,
+          "aria-labelledby": g
+        }, E, {
+          className: _(w.paper, E.className),
+          ownerState: F,
+          children: /* @__PURE__ */ N(Fo.Provider, {
+            value: C,
+            children: m
+          })
+        }))
+      })
+    }))
   }));
 });
-process.env.NODE_ENV !== "production" && (on.propTypes = {
+process.env.NODE_ENV !== "production" && (Ve.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.
+   * The id(s) of the element(s) that describe the dialog.
+   */
+  "aria-describedby": n.string,
+  /**
+   * The id(s) of the element(s) that label the dialog.
+   */
+  "aria-labelledby": n.string,
+  /**
+   * A backdrop component. This prop enables custom backdrop rendering.
+   * @deprecated Use `slots.backdrop` instead. While this prop currently works, it will be removed in the next major version.
+   * Use the `slots.backdrop` prop to make your application ready for the next version of Material UI.
+   * @default styled(Backdrop, {
+   *   name: 'MuiModal',
+   *   slot: 'Backdrop',
+   *   overridesResolver: (props, styles) => {
+   *     return styles.backdrop;
+   *   },
+   * })({
+   *   zIndex: -1,
+   * })
+   */
+  BackdropComponent: n.elementType,
+  /**
+   * @ignore
+   */
+  BackdropProps: n.object,
+  /**
+   * Dialog children, usually the included sub-components.
    */
   children: n.node,
   /**
@@ -1935,90 +1764,261 @@ process.env.NODE_ENV !== "production" && (on.propTypes = {
    */
   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'
+   * If `true`, hitting escape will not fire the `onClose` callback.
+   * @default false
    */
-  color: n.oneOfType([n.oneOf(["inherit", "primary", "secondary", "success", "error", "info", "warning"]), n.string]),
+  disableEscapeKeyDown: n.bool,
   /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
+   * If `true`, the dialog is full-screen.
+   * @default false
    */
-  component: n.elementType,
+  fullScreen: n.bool,
   /**
-   * If `true`, the component is disabled.
+   * If `true`, the dialog stretches to `maxWidth`.
+   *
+   * Notice that the dialog width grow is limited by the default margin.
    * @default false
    */
-  disabled: n.bool,
+  fullWidth: n.bool,
   /**
-   * If `true`, no elevation is used.
-   * @default false
+   * Determine the max-width of the dialog.
+   * The dialog width grows with the size of the screen.
+   * Set to `false` to disable `maxWidth`.
+   * @default 'sm'
    */
-  disableElevation: n.bool,
+  maxWidth: n.oneOfType([n.oneOf(["xs", "sm", "md", "lg", "xl", !1]), n.string]),
   /**
-   * If `true`, the  keyboard focus ripple is disabled.
-   * @default false
+   * Callback fired when the backdrop is clicked.
+   * @deprecated Use the `onClose` prop with the `reason` argument to handle the `backdropClick` events.
    */
-  disableFocusRipple: n.bool,
+  onBackdropClick: n.func,
   /**
-   * If `true`, the ripple effect is disabled.
+   * @ignore
+   */
+  onClick: n.func,
+  /**
+   * Callback fired when the component requests to be closed.
    *
-   * ⚠️ 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
+   * @param {object} event The event source of the callback.
+   * @param {string} reason Can be: `"escapeKeyDown"`, `"backdropClick"`.
    */
-  disableRipple: n.bool,
+  onClose: n.func,
   /**
-   * Element placed after the children.
+   * If `true`, the component is shown.
    */
-  endIcon: n.node,
+  open: n.bool.isRequired,
   /**
-   * @ignore
+   * The component used to render the body of the dialog.
+   * @default Paper
    */
-  focusVisibleClassName: n.string,
+  PaperComponent: n.elementType,
   /**
-   * If `true`, the button will take up the full width of its container.
-   * @default false
+   * Props applied to the [`Paper`](/material-ui/api/paper/) element.
+   * @default {}
    */
-  fullWidth: n.bool,
+  PaperProps: n.object,
   /**
-   * The URL to link to when the button is clicked.
-   * If defined, an `a` element will be used as the root node.
+   * Determine the container for scrolling the dialog.
+   * @default 'paper'
    */
-  href: n.string,
+  scroll: n.oneOf(["body", "paper"]),
   /**
-   * The size of the component.
-   * `small` is equivalent to the dense button styling.
-   * @default 'medium'
+   * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  size: n.oneOfType([n.oneOf(["small", "medium", "large"]), n.string]),
+  sx: n.oneOfType([n.arrayOf(n.oneOfType([n.func, n.object, n.bool])), n.func, n.object]),
   /**
-   * Element placed before the children.
+   * The component used for the transition.
+   * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
+   * @default Fade
    */
-  startIcon: n.node,
+  TransitionComponent: n.elementType,
+  /**
+   * The duration for the transition, in milliseconds.
+   * You may specify a single timeout for all transitions, or individually with an object.
+   * @default {
+   *   enter: theme.transitions.duration.enteringScreen,
+   *   exit: theme.transitions.duration.leavingScreen,
+   * }
+   */
+  transitionDuration: n.oneOfType([n.number, n.shape({
+    appear: n.number,
+    enter: n.number,
+    exit: n.number
+  })]),
+  /**
+   * Props applied to the transition element.
+   * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component.
+   */
+  TransitionProps: n.object
+});
+function He(o) {
+  return U("MuiDialogActions", o);
+}
+H("MuiDialogActions", ["root", "spacing"]);
+const Ue = ["className", "disableSpacing"], Ke = (o) => {
+  const {
+    classes: e,
+    disableSpacing: t
+  } = o;
+  return G({
+    root: ["root", !t && "spacing"]
+  }, He, e);
+}, qe = L("div", {
+  name: "MuiDialogActions",
+  slot: "Root",
+  overridesResolver: (o, e) => {
+    const {
+      ownerState: t
+    } = o;
+    return [e.root, !t.disableSpacing && e.spacing];
+  }
+})(({
+  ownerState: o
+}) => l({
+  display: "flex",
+  alignItems: "center",
+  padding: 8,
+  justifyContent: "flex-end",
+  flex: "0 0 auto"
+}, !o.disableSpacing && {
+  "& > :not(style) ~ :not(style)": {
+    marginLeft: 8
+  }
+})), Ye = /* @__PURE__ */ d.forwardRef(function(e, t) {
+  const r = Y({
+    props: e,
+    name: "MuiDialogActions"
+  }), {
+    className: s,
+    disableSpacing: i = !1
+  } = r, a = j(r, Ue), c = l({}, r, {
+    disableSpacing: i
+  }), p = Ke(c);
+  return /* @__PURE__ */ N(qe, l({
+    className: _(p.root, s),
+    ownerState: c,
+    ref: t
+  }, a));
+});
+process.env.NODE_ENV !== "production" && (Ye.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: n.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: n.object,
+  /**
+   * @ignore
+   */
+  className: n.string,
+  /**
+   * If `true`, the actions do not have additional margin.
+   * @default false
+   */
+  disableSpacing: n.bool,
   /**
    * 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: n.oneOfType([n.arrayOf(n.oneOfType([n.func, n.object, n.bool])), n.func, n.object])
+});
+function Ge(o) {
+  return U("MuiDialogContent", o);
+}
+H("MuiDialogContent", ["root", "dividers"]);
+function mn(o) {
+  return U("MuiDialogTitle", o);
+}
+const Xe = H("MuiDialogTitle", ["root"]), Ze = ["className", "dividers"], Je = (o) => {
+  const {
+    classes: e,
+    dividers: t
+  } = o;
+  return G({
+    root: ["root", t && "dividers"]
+  }, Ge, e);
+}, Qe = L("div", {
+  name: "MuiDialogContent",
+  slot: "Root",
+  overridesResolver: (o, e) => {
+    const {
+      ownerState: t
+    } = o;
+    return [e.root, t.dividers && e.dividers];
+  }
+})(({
+  theme: o,
+  ownerState: e
+}) => l({
+  flex: "1 1 auto",
+  // Add iOS momentum scrolling for iOS < 13.0
+  WebkitOverflowScrolling: "touch",
+  overflowY: "auto",
+  padding: "20px 24px"
+}, e.dividers ? {
+  padding: "16px 24px",
+  borderTop: `1px solid ${(o.vars || o).palette.divider}`,
+  borderBottom: `1px solid ${(o.vars || o).palette.divider}`
+} : {
+  [`.${Xe.root} + &`]: {
+    paddingTop: 0
+  }
+})), on = /* @__PURE__ */ d.forwardRef(function(e, t) {
+  const r = Y({
+    props: e,
+    name: "MuiDialogContent"
+  }), {
+    className: s,
+    dividers: i = !1
+  } = r, a = j(r, Ze), c = l({}, r, {
+    dividers: i
+  }), p = Je(c);
+  return /* @__PURE__ */ N(Qe, l({
+    className: _(p.root, s),
+    ownerState: c,
+    ref: t
+  }, a));
+});
+process.env.NODE_ENV !== "production" && (on.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: n.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: n.object,
   /**
    * @ignore
    */
-  type: n.oneOfType([n.oneOf(["button", "reset", "submit"]), n.string]),
+  className: n.string,
   /**
-   * The variant to use.
-   * @default 'text'
+   * Display the top and bottom dividers.
+   * @default false
    */
-  variant: n.oneOfType([n.oneOf(["contained", "outlined", "text"]), n.string])
+  dividers: n.bool,
+  /**
+   * 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])
 });
 export {
-  on as B,
-  ze as D,
+  le as B,
+  Ve as D,
   Io as H,
-  Mo as M,
-  qe as a,
-  Le as b,
-  $o as c,
+  zo as M,
+  on as a,
+  Ye as b,
+  Fo as c,
   Zo as d,
   mn as g,
   Po as u