@mui/material 5.14.4 → 5.14.6

package/umd/material-ui.development.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.14.4
+ * @mui/material v5.14.6
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -2531,16 +2531,19 @@
   const ClassNameGenerator = createClassNameGenerator();
   var ClassNameGenerator$1 = ClassNameGenerator;
 
+  // If GlobalStateSlot is changed, GLOBAL_STATE_CLASSES in
+  // \packages\api-docs-builder\utils\parseSlotsAndClasses.ts must be updated accordingly.
   const globalStateClassesMapping = {
     active: 'active',
     checked: 'checked',
     completed: 'completed',
     disabled: 'disabled',
-    readOnly: 'readOnly',
     error: 'error',
     expanded: 'expanded',
     focused: 'focused',
     focusVisible: 'focusVisible',
+    open: 'open',
+    readOnly: 'readOnly',
     required: 'required',
     selected: 'selected'
   };
@@ -2745,7 +2748,7 @@
     return StyleSheet;
   }();
 
-  var e="-ms-";var r$3="-moz-";var a="-webkit-";var n="comm";var c="rule";var s="decl";var i="@import";var h="@keyframes";var $="@layer";var g=Math.abs;var k=String.fromCharCode;var m=Object.assign;function x(e,r){return O(e,0)^45?(((r<<2^O(e,0))<<2^O(e,1))<<2^O(e,2))<<2^O(e,3):0}function y(e){return e.trim()}function j(e,r){return (e=r.exec(e))?e[0]:e}function z(e,r,a){return e.replace(r,a)}function C(e,r){return e.indexOf(r)}function O(e,r){return e.charCodeAt(r)|0}function A(e,r,a){return e.slice(r,a)}function M(e){return e.length}function S(e){return e.length}function q(e,r){return r.push(e),e}function B(e,r){return e.map(r).join("")}var D=1;var E=1;var F=0;var G=0;var H=0;var I="";function J(e,r,a,n,c,s,t){return {value:e,root:r,parent:a,type:n,props:c,children:s,line:D,column:E,length:t,return:""}}function K(e,r){return m(J("",null,null,"",null,null,0),e,{length:-e.length},r)}function L(){return H}function N(){H=G>0?O(I,--G):0;if(E--,H===10)E=1,D--;return H}function P(){H=G<F?O(I,G++):0;if(E++,H===10)E=1,D++;return H}function Q(){return O(I,G)}function R(){return G}function T(e,r){return A(I,e,r)}function U(e){switch(e){case 0:case 9:case 10:case 13:case 32:return 5;case 33:case 43:case 44:case 47:case 62:case 64:case 126:case 59:case 123:case 125:return 4;case 58:return 3;case 34:case 39:case 40:case 91:return 2;case 41:case 93:return 1}return 0}function V(e){return D=E=1,F=M(I=e),G=0,[]}function W(e){return I="",e}function X(e){return y(T(G-1,re(e===91?e+2:e===40?e+1:e)))}function Z(e){while(H=Q())if(H<33)P();else break;return U(e)>2||U(H)>3?"":" "}function ee(e,r){while(--r&&P())if(H<48||H>102||H>57&&H<65||H>70&&H<97)break;return T(e,R()+(r<6&&Q()==32&&P()==32))}function re(e){while(P())switch(H){case e:return G;case 34:case 39:if(e!==34&&e!==39)re(H);break;case 40:if(e===41)re(e);break;case 92:P();break}return G}function ae(e,r){while(P())if(e+H===47+10)break;else if(e+H===42+42&&Q()===47)break;return "/*"+T(r,G-1)+"*"+k(e===47?e:P())}function ne(e){while(!U(Q()))P();return T(e,G)}function ce(e){return W(se("",null,null,null,[""],e=V(e),0,[0],e))}function se(e,r,a,n,c,s,t,u,i){var f=0;var o=0;var l=t;var v=0;var p=0;var h=0;var b=1;var w=1;var d=1;var $=0;var g="";var m=c;var x=s;var y=n;var j=g;while(w)switch(h=$,$=P()){case 40:if(h!=108&&O(j,l-1)==58){if(C(j+=z(X($),"&","&\f"),"&\f")!=-1)d=-1;break}case 34:case 39:case 91:j+=X($);break;case 9:case 10:case 13:case 32:j+=Z(h);break;case 92:j+=ee(R()-1,7);continue;case 47:switch(Q()){case 42:case 47:q(ue(ae(P(),R()),r,a),i);break;default:j+="/";}break;case 123*b:u[f++]=M(j)*d;case 125*b:case 59:case 0:switch($){case 0:case 125:w=0;case 59+o:if(d==-1)j=z(j,/\f/g,"");if(p>0&&M(j)-l)q(p>32?ie(j+";",n,a,l-1):ie(z(j," ","")+";",n,a,l-2),i);break;case 59:j+=";";default:q(y=te(j,r,a,f,o,c,u,g,m=[],x=[],l),s);if($===123)if(o===0)se(j,r,y,y,m,s,l,u,x);else switch(v===99&&O(j,3)===110?100:v){case 100:case 108:case 109:case 115:se(e,y,y,n&&q(te(e,y,y,0,0,c,u,g,c,m=[],l),x),c,x,l,u,n?m:x);break;default:se(j,y,y,y,[""],x,0,u,x);}}f=o=p=0,b=d=1,g=j="",l=t;break;case 58:l=1+M(j),p=h;default:if(b<1)if($==123)--b;else if($==125&&b++==0&&N()==125)continue;switch(j+=k($),$*b){case 38:d=o>0?1:(j+="\f",-1);break;case 44:u[f++]=(M(j)-1)*d,d=1;break;case 64:if(Q()===45)j+=X(P());v=Q(),o=l=M(g=j+=ne(R())),$++;break;case 45:if(h===45&&M(j)==2)b=0;}}return s}function te(e,r,a,n,s,t,u,i,f,o,l){var v=s-1;var p=s===0?t:[""];var h=S(p);for(var b=0,w=0,d=0;b<n;++b)for(var $=0,k=A(e,v+1,v=g(w=u[b])),m=e;$<h;++$)if(m=y(w>0?p[$]+" "+k:z(k,/&\f/g,p[$])))f[d++]=m;return J(e,r,a,s===0?c:i,f,o,l)}function ue(e,r,a){return J(e,r,a,n,k(L()),A(e,2,-2),0)}function ie(e,r,a,n){return J(e,r,a,s,A(e,0,n),A(e,n+1,-1),n)}function oe(e,r){var a="";var n=S(e);for(var c=0;c<n;c++)a+=r(e[c],c,e,r)||"";return a}function le(e,r,a,t){switch(e.type){case $:if(e.children.length)break;case i:case s:return e.return=e.return||e.value;case n:return "";case h:return e.return=e.value+"{"+oe(e.children,t)+"}";case c:e.value=e.props.join(",");}return M(a=oe(e.children,t))?e.return=e.value+"{"+a+"}":""}function ve(e){var r=S(e);return function(a,n,c,s){var t="";for(var u=0;u<r;u++)t+=e[u](a,n,c,s)||"";return t}}
+  var e="-ms-";var r$1="-moz-";var a="-webkit-";var n="comm";var c="rule";var s="decl";var i="@import";var h="@keyframes";var $="@layer";var g=Math.abs;var k=String.fromCharCode;var m=Object.assign;function x(e,r){return O(e,0)^45?(((r<<2^O(e,0))<<2^O(e,1))<<2^O(e,2))<<2^O(e,3):0}function y(e){return e.trim()}function j(e,r){return (e=r.exec(e))?e[0]:e}function z(e,r,a){return e.replace(r,a)}function C(e,r){return e.indexOf(r)}function O(e,r){return e.charCodeAt(r)|0}function A(e,r,a){return e.slice(r,a)}function M(e){return e.length}function S(e){return e.length}function q(e,r){return r.push(e),e}function B(e,r){return e.map(r).join("")}var D=1;var E=1;var F=0;var G=0;var H=0;var I="";function J(e,r,a,n,c,s,t){return {value:e,root:r,parent:a,type:n,props:c,children:s,line:D,column:E,length:t,return:""}}function K(e,r){return m(J("",null,null,"",null,null,0),e,{length:-e.length},r)}function L(){return H}function N(){H=G>0?O(I,--G):0;if(E--,H===10)E=1,D--;return H}function P(){H=G<F?O(I,G++):0;if(E++,H===10)E=1,D++;return H}function Q(){return O(I,G)}function R(){return G}function T(e,r){return A(I,e,r)}function U(e){switch(e){case 0:case 9:case 10:case 13:case 32:return 5;case 33:case 43:case 44:case 47:case 62:case 64:case 126:case 59:case 123:case 125:return 4;case 58:return 3;case 34:case 39:case 40:case 91:return 2;case 41:case 93:return 1}return 0}function V(e){return D=E=1,F=M(I=e),G=0,[]}function W(e){return I="",e}function X(e){return y(T(G-1,re(e===91?e+2:e===40?e+1:e)))}function Z(e){while(H=Q())if(H<33)P();else break;return U(e)>2||U(H)>3?"":" "}function ee(e,r){while(--r&&P())if(H<48||H>102||H>57&&H<65||H>70&&H<97)break;return T(e,R()+(r<6&&Q()==32&&P()==32))}function re(e){while(P())switch(H){case e:return G;case 34:case 39:if(e!==34&&e!==39)re(H);break;case 40:if(e===41)re(e);break;case 92:P();break}return G}function ae(e,r){while(P())if(e+H===47+10)break;else if(e+H===42+42&&Q()===47)break;return "/*"+T(r,G-1)+"*"+k(e===47?e:P())}function ne(e){while(!U(Q()))P();return T(e,G)}function ce(e){return W(se("",null,null,null,[""],e=V(e),0,[0],e))}function se(e,r,a,n,c,s,t,u,i){var f=0;var o=0;var l=t;var v=0;var p=0;var h=0;var b=1;var w=1;var d=1;var $=0;var g="";var m=c;var x=s;var y=n;var j=g;while(w)switch(h=$,$=P()){case 40:if(h!=108&&O(j,l-1)==58){if(C(j+=z(X($),"&","&\f"),"&\f")!=-1)d=-1;break}case 34:case 39:case 91:j+=X($);break;case 9:case 10:case 13:case 32:j+=Z(h);break;case 92:j+=ee(R()-1,7);continue;case 47:switch(Q()){case 42:case 47:q(ue(ae(P(),R()),r,a),i);break;default:j+="/";}break;case 123*b:u[f++]=M(j)*d;case 125*b:case 59:case 0:switch($){case 0:case 125:w=0;case 59+o:if(d==-1)j=z(j,/\f/g,"");if(p>0&&M(j)-l)q(p>32?ie(j+";",n,a,l-1):ie(z(j," ","")+";",n,a,l-2),i);break;case 59:j+=";";default:q(y=te(j,r,a,f,o,c,u,g,m=[],x=[],l),s);if($===123)if(o===0)se(j,r,y,y,m,s,l,u,x);else switch(v===99&&O(j,3)===110?100:v){case 100:case 108:case 109:case 115:se(e,y,y,n&&q(te(e,y,y,0,0,c,u,g,c,m=[],l),x),c,x,l,u,n?m:x);break;default:se(j,y,y,y,[""],x,0,u,x);}}f=o=p=0,b=d=1,g=j="",l=t;break;case 58:l=1+M(j),p=h;default:if(b<1)if($==123)--b;else if($==125&&b++==0&&N()==125)continue;switch(j+=k($),$*b){case 38:d=o>0?1:(j+="\f",-1);break;case 44:u[f++]=(M(j)-1)*d,d=1;break;case 64:if(Q()===45)j+=X(P());v=Q(),o=l=M(g=j+=ne(R())),$++;break;case 45:if(h===45&&M(j)==2)b=0;}}return s}function te(e,r,a,n,s,t,u,i,f,o,l){var v=s-1;var p=s===0?t:[""];var h=S(p);for(var b=0,w=0,d=0;b<n;++b)for(var $=0,k=A(e,v+1,v=g(w=u[b])),m=e;$<h;++$)if(m=y(w>0?p[$]+" "+k:z(k,/&\f/g,p[$])))f[d++]=m;return J(e,r,a,s===0?c:i,f,o,l)}function ue(e,r,a){return J(e,r,a,n,k(L()),A(e,2,-2),0)}function ie(e,r,a,n){return J(e,r,a,s,A(e,0,n),A(e,n+1,-1),n)}function oe(e,r){var a="";var n=S(e);for(var c=0;c<n;c++)a+=r(e[c],c,e,r)||"";return a}function le(e,r,a,t){switch(e.type){case $:if(e.children.length)break;case i:case s:return e.return=e.return||e.value;case n:return "";case h:return e.return=e.value+"{"+oe(e.children,t)+"}";case c:e.value=e.props.join(",");}return M(a=oe(e.children,t))?e.return=e.value+"{"+a+"}":""}function ve(e){var r=S(e);return function(a,n,c,s){var t="";for(var u=0;u<r;u++)t+=e[u](a,n,c,s)||"";return t}}
 
   var weakMemoize = function weakMemoize(func) {
     // $FlowFixMe flow doesn't include all non-primitive types as allowed for weakmaps
@@ -3040,7 +3043,7 @@
       case 4810:
       case 6968:
       case 2756:
-        return a + value + r$3 + value + e + value + value;
+        return a + value + r$1 + value + e + value + value;
       // flex, flex-direction
 
       case 6828:
@@ -3121,7 +3124,7 @@
           // (f)ill-available, (f)it-content
 
           case 102:
-            return z(value, /(.+:)(.+)-([^]+)/, '$1' + a + '$2-$3' + '$1' + r$3 + (O(value, length + 3) == 108 ? '$3' : '$2-$3')) + value;
+            return z(value, /(.+:)(.+)-([^]+)/, '$1' + a + '$2-$3' + '$1' + r$1 + (O(value, length + 3) == 108 ? '$3' : '$2-$3')) + value;
           // (s)tretch
 
           case 115:
@@ -3188,7 +3191,7 @@
             case ':read-only':
             case ':read-write':
               return oe([K(element, {
-                props: [z(value, /:(read-\w+)/, ':' + r$3 + '$1')]
+                props: [z(value, /:(read-\w+)/, ':' + r$1 + '$1')]
               })], callback);
             // :placeholder
 
@@ -3196,7 +3199,7 @@
               return oe([K(element, {
                 props: [z(value, /:(plac\w+)/, ':' + a + 'input-$1')]
               }), K(element, {
-                props: [z(value, /:(plac\w+)/, ':' + r$3 + '$1')]
+                props: [z(value, /:(plac\w+)/, ':' + r$1 + '$1')]
               }), K(element, {
                 props: [z(value, /:(plac\w+)/, e + 'input-$1')]
               })], callback);
@@ -6272,7 +6275,7 @@
     }
   };
 
-  const _excluded$2p = ["values", "unit", "step"];
+  const _excluded$2o = ["values", "unit", "step"];
   const sortBreakpointsValues = values => {
     const breakpointsAsArray = Object.keys(values).map(key => ({
       key,
@@ -6307,7 +6310,7 @@
         unit = 'px',
         step = 5
       } = breakpoints,
-      other = _objectWithoutPropertiesLoose(breakpoints, _excluded$2p);
+      other = _objectWithoutPropertiesLoose(breakpoints, _excluded$2o);
     const sortedValues = sortBreakpointsValues(values);
     const keys = Object.keys(sortedValues);
     function up(key) {
@@ -7393,7 +7396,7 @@
   styleFunctionSx.filterProps = ['sx'];
   var styleFunctionSx$1 = styleFunctionSx;
 
-  const _excluded$2o = ["breakpoints", "palette", "spacing", "shape"];
+  const _excluded$2n = ["breakpoints", "palette", "spacing", "shape"];
   function createTheme$1(options = {}, ...args) {
     const {
         breakpoints: breakpointsInput = {},
@@ -7401,7 +7404,7 @@
         spacing: spacingInput,
         shape: shapeInput = {}
       } = options,
-      other = _objectWithoutPropertiesLoose(options, _excluded$2o);
+      other = _objectWithoutPropertiesLoose(options, _excluded$2n);
     const breakpoints = createBreakpoints(breakpointsInput);
     const spacing = createSpacing(spacingInput);
     let muiTheme = deepmerge({
@@ -7469,7 +7472,7 @@
     themeId: PropTypes.string
   } ;
 
-  const _excluded$2n = ["sx"];
+  const _excluded$2m = ["sx"];
   const splitProps = props => {
     var _props$theme$unstable, _props$theme;
     const result = {
@@ -7490,7 +7493,7 @@
     const {
         sx: inSx
       } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded$2n);
+      other = _objectWithoutPropertiesLoose(props, _excluded$2m);
     const {
       systemProps,
       otherProps
@@ -7514,9 +7517,9 @@
     });
   }
 
-  function r$2(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r$2(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx$2(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r$2(e))&&(n&&(n+=" "),n+=t);return n}
+  function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
-  const _excluded$2m = ["className", "component"];
+  const _excluded$2l = ["className", "component"];
   function createBox(options = {}) {
     const {
       themeId,
@@ -7534,18 +7537,18 @@
           className,
           component = 'div'
         } = _extendSxProp,
-        other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$2m);
+        other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$2l);
       return /*#__PURE__*/jsxRuntime_1(BoxRoot, _extends({
         as: component,
         ref: ref,
-        className: clsx$2(className, generateClassName ? generateClassName(defaultClassName) : defaultClassName),
+        className: clsx(className, generateClassName ? generateClassName(defaultClassName) : defaultClassName),
         theme: themeId ? theme[themeId] || theme : theme
       }, other));
     });
     return Box;
   }
 
-  const _excluded$2l = ["variant"];
+  const _excluded$2k = ["variant"];
   function isEmpty$3(string) {
     return string.length === 0;
   }
@@ -7559,7 +7562,7 @@
     const {
         variant
       } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded$2l);
+      other = _objectWithoutPropertiesLoose(props, _excluded$2k);
     let classKey = variant || '';
     Object.keys(other).sort().forEach(key => {
       if (key === 'color') {
@@ -7571,7 +7574,7 @@
     return classKey;
   }
 
-  const _excluded$2k = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
+  const _excluded$2j = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
   function isEmpty$2(obj) {
     return Object.keys(obj).length === 0;
   }
@@ -7677,7 +7680,7 @@
           // For more details: https://github.com/mui/material-ui/pull/37908
           overridesResolver = defaultOverridesResolver(lowercaseFirstLetter(componentSlot))
         } = inputOptions,
-        options = _objectWithoutPropertiesLoose(inputOptions, _excluded$2k);
+        options = _objectWithoutPropertiesLoose(inputOptions, _excluded$2j);
 
       // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
       const skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver :
@@ -8563,7 +8566,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     });
   }
 
-  const _excluded$2j = ["colorSchemes", "components", "generateCssVars", "cssVarPrefix"];
+  const _excluded$2i = ["colorSchemes", "components", "generateCssVars", "cssVarPrefix"];
   const DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}';
   function createCssVarsProvider(options) {
     const {
@@ -8626,7 +8629,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
           }),
           cssVarPrefix
         } = _ref,
-        restThemeProp = _objectWithoutPropertiesLoose(_ref, _excluded$2j);
+        restThemeProp = _objectWithoutPropertiesLoose(_ref, _excluded$2i);
       const allColorSchemes = Object.keys(colorSchemes);
       const defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
       const defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
@@ -9046,14 +9049,14 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     };
   }
 
-  const _excluded$2i = ["colorSchemes", "components"],
-    _excluded2$d = ["light"];
+  const _excluded$2h = ["colorSchemes", "components"],
+    _excluded2$e = ["light"];
   function prepareCssVars(theme, parserConfig) {
     // @ts-ignore - ignore components do not exist
     const {
         colorSchemes = {}
       } = theme,
-      otherTheme = _objectWithoutPropertiesLoose(theme, _excluded$2i);
+      otherTheme = _objectWithoutPropertiesLoose(theme, _excluded$2h);
     const {
       vars: rootVars,
       css: rootCss,
@@ -9064,7 +9067,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     const {
         light
       } = colorSchemes,
-      otherColorSchemes = _objectWithoutPropertiesLoose(colorSchemes, _excluded2$d);
+      otherColorSchemes = _objectWithoutPropertiesLoose(colorSchemes, _excluded2$e);
     Object.entries(otherColorSchemes || {}).forEach(([key, scheme]) => {
       const {
         vars,
@@ -9108,7 +9111,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     };
   }
 
-  const _excluded$2h = ["className", "component", "disableGutters", "fixed", "maxWidth", "classes"];
+  const _excluded$2g = ["className", "component", "disableGutters", "fixed", "maxWidth", "classes"];
   const defaultTheme$6 = createTheme$1();
   const defaultCreateStyledComponent$2 = systemStyled('div', {
     name: 'MuiContainer',
@@ -9204,7 +9207,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
           fixed = false,
           maxWidth = 'lg'
         } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded$2h);
+        other = _objectWithoutPropertiesLoose(props, _excluded$2g);
       const ownerState = _extends({}, props, {
         component,
         disableGutters,
@@ -9222,7 +9225,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
           // @ts-ignore module augmentation fails if custom breakpoints are used
           ,
           ownerState: ownerState,
-          className: clsx$2(classes.root, className),
+          className: clsx(classes.root, className),
           ref: ref
         }, other))
       );
@@ -9506,7 +9509,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     return [`direction-xs-${String(direction)}`];
   };
 
-  const _excluded$2g = ["className", "children", "columns", "container", "component", "direction", "wrap", "spacing", "rowSpacing", "columnSpacing", "disableEqualOverflow", "unstable_level"];
+  const _excluded$2f = ["className", "children", "columns", "container", "component", "direction", "wrap", "spacing", "rowSpacing", "columnSpacing", "disableEqualOverflow", "unstable_level"];
   const defaultTheme$5 = createTheme$1();
 
   // widening Theme to any so that the consumer can own the theme structure.
@@ -9564,7 +9567,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
           disableEqualOverflow: themeDisableEqualOverflow,
           unstable_level: level = 0
         } = props,
-        rest = _objectWithoutPropertiesLoose(props, _excluded$2g);
+        rest = _objectWithoutPropertiesLoose(props, _excluded$2f);
       // Because `disableEqualOverflow` can be set from the theme's defaultProps, the **nested** grid should look at the instance props instead.
       let disableEqualOverflow = themeDisableEqualOverflow;
       if (level && themeDisableEqualOverflow !== undefined) {
@@ -9608,7 +9611,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         ref: ref,
         as: component,
         ownerState: ownerState,
-        className: clsx$2(classes.root, className)
+        className: clsx(classes.root, className)
       }, other, {
         children: React__namespace.Children.map(children, child => {
           if ( /*#__PURE__*/React__namespace.isValidElement(child) && isMuiElement(child, ['Grid'])) {
@@ -9661,7 +9664,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     return Grid;
   }
 
-  const _excluded$2f = ["component", "direction", "spacing", "divider", "children", "className", "useFlexGap"];
+  const _excluded$2e = ["component", "direction", "spacing", "divider", "children", "className", "useFlexGap"];
   const defaultTheme$4 = createTheme$1();
   // widening Theme to any so that the consumer can own the theme structure.
   const defaultCreateStyledComponent = systemStyled('div', {
@@ -9794,7 +9797,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
           className,
           useFlexGap = false
         } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded$2f);
+        other = _objectWithoutPropertiesLoose(props, _excluded$2e);
       const ownerState = {
         direction,
         spacing,
@@ -9805,7 +9808,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         as: component,
         ownerState: ownerState,
         ref: ref,
-        className: clsx$2(classes.root, className)
+        className: clsx(classes.root, className)
       }, other, {
         children: divider ? joinChildren(children, divider) : children
       }));
@@ -9820,8 +9823,8 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     return Stack;
   }
 
-  const _excluded$2e = ["defaultProps", "mixins", "overrides", "palette", "props", "styleOverrides"],
-    _excluded2$c = ["type", "mode"];
+  const _excluded$2d = ["defaultProps", "mixins", "overrides", "palette", "props", "styleOverrides"],
+    _excluded2$d = ["type", "mode"];
   function adaptV4Theme(inputTheme) {
     {
       console.warn(['MUI: adaptV4Theme() is deprecated.', 'Follow the upgrade guide on https://mui.com/r/migration-v4#theme.'].join('\n'));
@@ -9834,7 +9837,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         props = {},
         styleOverrides = {}
       } = inputTheme,
-      other = _objectWithoutPropertiesLoose(inputTheme, _excluded$2e);
+      other = _objectWithoutPropertiesLoose(inputTheme, _excluded$2d);
     const theme = _extends({}, other, {
       components: {}
     });
@@ -9886,7 +9889,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         type: typeInput,
         mode: modeInput
       } = palette,
-      paletteRest = _objectWithoutPropertiesLoose(palette, _excluded2$c);
+      paletteRest = _objectWithoutPropertiesLoose(palette, _excluded2$d);
     const finalMode = modeInput || typeInput || 'light';
     theme.palette = _extends({
       // theme.palette.text.hint
@@ -9915,7 +9918,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     }, mixins);
   }
 
-  const _excluded$2d = ["mode", "contrastThreshold", "tonalOffset"];
+  const _excluded$2c = ["mode", "contrastThreshold", "tonalOffset"];
   const light = {
     // The colors used to style the text.
     text: {
@@ -10084,7 +10087,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         contrastThreshold = 3,
         tonalOffset = 0.2
       } = palette,
-      other = _objectWithoutPropertiesLoose(palette, _excluded$2d);
+      other = _objectWithoutPropertiesLoose(palette, _excluded$2c);
     const primary = palette.primary || getDefaultPrimary(mode);
     const secondary = palette.secondary || getDefaultSecondary(mode);
     const error = palette.error || getDefaultError(mode);
@@ -10208,7 +10211,7 @@ const theme2 = createTheme({ palette: {
     return paletteOutput;
   }
 
-  const _excluded$2c = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
+  const _excluded$2b = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
   function round$2(value) {
     return Math.round(value * 1e5) / 1e5;
   }
@@ -10239,7 +10242,7 @@ const theme2 = createTheme({ palette: {
         allVariants,
         pxToRem: pxToRem2
       } = _ref,
-      other = _objectWithoutPropertiesLoose(_ref, _excluded$2c);
+      other = _objectWithoutPropertiesLoose(_ref, _excluded$2b);
     {
       if (typeof fontSize !== 'number') {
         console.error('MUI: `fontSize` is required to be a number.');
@@ -10307,7 +10310,7 @@ const theme2 = createTheme({ palette: {
   const shadows = ['none', createShadow(0, 2, 1, -1, 0, 1, 1, 0, 0, 1, 3, 0), createShadow(0, 3, 1, -2, 0, 2, 2, 0, 0, 1, 5, 0), createShadow(0, 3, 3, -2, 0, 3, 4, 0, 0, 1, 8, 0), createShadow(0, 2, 4, -1, 0, 4, 5, 0, 0, 1, 10, 0), createShadow(0, 3, 5, -1, 0, 5, 8, 0, 0, 1, 14, 0), createShadow(0, 3, 5, -1, 0, 6, 10, 0, 0, 1, 18, 0), createShadow(0, 4, 5, -2, 0, 7, 10, 1, 0, 2, 16, 1), createShadow(0, 5, 5, -3, 0, 8, 10, 1, 0, 3, 14, 2), createShadow(0, 5, 6, -3, 0, 9, 12, 1, 0, 3, 16, 2), createShadow(0, 6, 6, -3, 0, 10, 14, 1, 0, 4, 18, 3), createShadow(0, 6, 7, -4, 0, 11, 15, 1, 0, 4, 20, 3), createShadow(0, 7, 8, -4, 0, 12, 17, 2, 0, 5, 22, 4), createShadow(0, 7, 8, -4, 0, 13, 19, 2, 0, 5, 24, 4), createShadow(0, 7, 9, -4, 0, 14, 21, 2, 0, 5, 26, 4), createShadow(0, 8, 9, -5, 0, 15, 22, 2, 0, 6, 28, 5), createShadow(0, 8, 10, -5, 0, 16, 24, 2, 0, 6, 30, 5), createShadow(0, 8, 11, -5, 0, 17, 26, 2, 0, 6, 32, 5), createShadow(0, 9, 11, -5, 0, 18, 28, 2, 0, 7, 34, 6), createShadow(0, 9, 12, -6, 0, 19, 29, 2, 0, 7, 36, 6), createShadow(0, 10, 13, -6, 0, 20, 31, 3, 0, 8, 38, 7), createShadow(0, 10, 13, -6, 0, 21, 33, 3, 0, 8, 40, 7), createShadow(0, 10, 14, -6, 0, 22, 35, 3, 0, 8, 42, 7), createShadow(0, 11, 14, -7, 0, 23, 36, 3, 0, 9, 44, 8), createShadow(0, 11, 15, -7, 0, 24, 38, 3, 0, 9, 46, 8)];
   var shadows$1 = shadows;
 
-  const _excluded$2b = ["duration", "easing", "delay"];
+  const _excluded$2a = ["duration", "easing", "delay"];
   // Follow https://material.google.com/motion/duration-easing.html#duration-easing-natural-easing-curves
   // to learn the context in which each easing should be used.
   const easing = {
@@ -10358,7 +10361,7 @@ const theme2 = createTheme({ palette: {
           easing: easingOption = mergedEasing.easeInOut,
           delay = 0
         } = options,
-        other = _objectWithoutPropertiesLoose(options, _excluded$2b);
+        other = _objectWithoutPropertiesLoose(options, _excluded$2a);
       {
         const isString = value => typeof value === 'string';
         // IE11 support, replace with Number.isNaN
@@ -10408,7 +10411,7 @@ const theme2 = createTheme({ palette: {
   };
   var zIndex$1 = zIndex;
 
-  const _excluded$2a = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
+  const _excluded$29 = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
   function createTheme(options = {}, ...args) {
     const {
         mixins: mixinsInput = {},
@@ -10416,7 +10419,7 @@ const theme2 = createTheme({ palette: {
         transitions: transitionsInput = {},
         typography: typographyInput = {}
       } = options,
-      other = _objectWithoutPropertiesLoose(options, _excluded$2a);
+      other = _objectWithoutPropertiesLoose(options, _excluded$29);
     if (options.vars) {
       throw new Error(`MUI: \`vars\` is a private field used for CSS variables support.
 Please use another name.` );
@@ -10717,12 +10720,12 @@ Use unitless line heights instead.` );
   });
   var styled$1 = styled;
 
-  const _excluded$29 = ["theme"];
+  const _excluded$28 = ["theme"];
   function ThemeProvider(_ref) {
     let {
         theme: themeInput
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$29);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$28);
     const scopedTheme = themeInput[THEME_ID];
     return /*#__PURE__*/jsxRuntime_1(ThemeProvider$1, _extends({}, props, {
       themeId: scopedTheme ? THEME_ID : undefined,
@@ -10777,8 +10780,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   };
   var getOverlayAlpha$1 = getOverlayAlpha;
 
-  const _excluded$28 = ["colorSchemes", "cssVarPrefix", "shouldSkipGeneratingVar"],
-    _excluded2$b = ["palette"];
+  const _excluded$27 = ["colorSchemes", "cssVarPrefix", "shouldSkipGeneratingVar"],
+    _excluded2$c = ["palette"];
   const defaultDarkOverlays = [...Array(25)].map((_, index) => {
     if (index === 0) {
       return undefined;
@@ -10821,7 +10824,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         cssVarPrefix = 'mui',
         shouldSkipGeneratingVar: shouldSkipGeneratingVar$1 = shouldSkipGeneratingVar
       } = options,
-      input = _objectWithoutPropertiesLoose(options, _excluded$28);
+      input = _objectWithoutPropertiesLoose(options, _excluded$27);
     const getCssVar = createGetCssVar(cssVarPrefix);
     const _createThemeWithoutVa = createTheme(_extends({}, input, colorSchemesInput.light && {
         palette: (_colorSchemesInput$li = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li.palette
@@ -10829,7 +10832,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       {
         palette: lightPalette
       } = _createThemeWithoutVa,
-      muiTheme = _objectWithoutPropertiesLoose(_createThemeWithoutVa, _excluded2$b);
+      muiTheme = _objectWithoutPropertiesLoose(_createThemeWithoutVa, _excluded2$c);
     const {
       palette: darkPalette
     } = createTheme({
@@ -11112,15 +11115,13 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     throw new Error(`MUI: The \`experimental_sx\` has been moved to \`theme.unstable_sx\`.For more details, see https://github.com/mui/material-ui/pull/35150.` );
   }
 
-  function r$1(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r$1(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx$1(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r$1(e))&&(n&&(n+=" "),n+=t);return n}
-
   function getSvgIconUtilityClass(slot) {
     return generateUtilityClass('MuiSvgIcon', slot);
   }
   const svgIconClasses = generateUtilityClasses('MuiSvgIcon', ['root', 'colorPrimary', 'colorSecondary', 'colorAction', 'colorError', 'colorDisabled', 'fontSizeInherit', 'fontSizeSmall', 'fontSizeMedium', 'fontSizeLarge']);
   var svgIconClasses$1 = svgIconClasses;
 
-  const _excluded$27 = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"];
+  const _excluded$26 = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"];
   const useUtilityClasses$1O = ownerState => {
     const {
       color,
@@ -11188,7 +11189,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         titleAccess,
         viewBox = '0 0 24 24'
       } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded$27);
+      other = _objectWithoutPropertiesLoose(props, _excluded$26);
     const hasSvgAsChild = /*#__PURE__*/React__namespace.isValidElement(children) && children.type === 'svg';
     const ownerState = _extends({}, props, {
       color,
@@ -11206,7 +11207,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const classes = useUtilityClasses$1O(ownerState);
     return /*#__PURE__*/jsxRuntime_2(SvgIconRoot, _extends({
       as: component,
-      className: clsx$1(classes.root, className),
+      className: clsx(classes.root, className),
       focusable: "false",
       color: htmlColor,
       "aria-hidden": titleAccess ? undefined : true,
@@ -12331,7 +12332,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const collapseClasses = generateUtilityClasses('MuiCollapse', ['root', 'horizontal', 'vertical', 'entered', 'hidden', 'wrapper', 'wrapperInner']);
   var collapseClasses$1 = collapseClasses;
 
-  const _excluded$26 = ["addEndListener", "children", "className", "collapsedSize", "component", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "orientation", "style", "timeout", "TransitionComponent"];
+  const _excluded$25 = ["addEndListener", "children", "className", "collapsedSize", "component", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "orientation", "style", "timeout", "TransitionComponent"];
   const useUtilityClasses$1N = ownerState => {
     const {
       orientation,
@@ -12431,7 +12432,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         // eslint-disable-next-line react/prop-types
         TransitionComponent = Transition$1
       } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded$26);
+      other = _objectWithoutPropertiesLoose(props, _excluded$25);
     const ownerState = _extends({}, props, {
       orientation,
       collapsedSize: collapsedSizeProp
@@ -12566,7 +12567,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     }, other, {
       children: (state, childProps) => /*#__PURE__*/jsxRuntime_1(CollapseRoot, _extends({
         as: component,
-        className: clsx$1(classes.root, className, {
+        className: clsx(classes.root, className, {
           'entered': classes.entered,
           'exited': !inProp && collapsedSize === '0px' && classes.hidden
         }[state]),
@@ -12699,7 +12700,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const paperClasses = generateUtilityClasses('MuiPaper', ['root', 'rounded', 'outlined', 'elevation', 'elevation0', 'elevation1', 'elevation2', 'elevation3', 'elevation4', 'elevation5', 'elevation6', 'elevation7', 'elevation8', 'elevation9', 'elevation10', 'elevation11', 'elevation12', 'elevation13', 'elevation14', 'elevation15', 'elevation16', 'elevation17', 'elevation18', 'elevation19', 'elevation20', 'elevation21', 'elevation22', 'elevation23', 'elevation24']);
   var paperClasses$1 = paperClasses;
 
-  const _excluded$25 = ["className", "component", "elevation", "square", "variant"];
+  const _excluded$24 = ["className", "component", "elevation", "square", "variant"];
   const useUtilityClasses$1M = ownerState => {
     const {
       square,
@@ -12754,7 +12755,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         square = false,
         variant = 'elevation'
       } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded$25);
+      other = _objectWithoutPropertiesLoose(props, _excluded$24);
     const ownerState = _extends({}, props, {
       component,
       elevation,
@@ -12772,7 +12773,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     return /*#__PURE__*/jsxRuntime_1(PaperRoot, _extends({
       as: component,
       ownerState: ownerState,
-      className: clsx$1(classes.root, className),
+      className: clsx(classes.root, className),
       ref: ref
     }, other));
   });
@@ -12846,7 +12847,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const accordionClasses = generateUtilityClasses('MuiAccordion', ['root', 'rounded', 'expanded', 'disabled', 'gutters', 'region']);
   var accordionClasses$1 = accordionClasses;
 
-  const _excluded$24 = ["children", "className", "defaultExpanded", "disabled", "disableGutters", "expanded", "onChange", "square", "TransitionComponent", "TransitionProps"];
+  const _excluded$23 = ["children", "className", "defaultExpanded", "disabled", "disableGutters", "expanded", "onChange", "square", "TransitionComponent", "TransitionProps"];
   const useUtilityClasses$1L = ownerState => {
     const {
       classes,
@@ -12959,7 +12960,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         TransitionComponent = Collapse$1,
         TransitionProps
       } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded$24);
+      other = _objectWithoutPropertiesLoose(props, _excluded$23);
     const [expanded, setExpandedState] = useControlled({
       controlled: expandedProp,
       default: defaultExpanded,
@@ -12987,7 +12988,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     });
     const classes = useUtilityClasses$1L(ownerState);
     return /*#__PURE__*/jsxRuntime_2(AccordionRoot, _extends({
-      className: clsx$1(classes.root, className),
+      className: clsx(classes.root, className),
       ref: ref,
       ownerState: ownerState,
       square: square
@@ -13091,7 +13092,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const accordionActionsClasses = generateUtilityClasses('MuiAccordionActions', ['root', 'spacing']);
   var accordionActionsClasses$1 = accordionActionsClasses;
 
-  const _excluded$23 = ["className", "disableSpacing"];
+  const _excluded$22 = ["className", "disableSpacing"];
   const useUtilityClasses$1K = ownerState => {
     const {
       classes,
@@ -13132,13 +13133,13 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         className,
         disableSpacing = false
       } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded$23);
+      other = _objectWithoutPropertiesLoose(props, _excluded$22);
     const ownerState = _extends({}, props, {
       disableSpacing
     });
     const classes = useUtilityClasses$1K(ownerState);
     return /*#__PURE__*/jsxRuntime_1(AccordionActionsRoot, _extends({
-      className: clsx$1(classes.root, className),
+      className: clsx(classes.root, className),
       ref: ref,
       ownerState: ownerState
     }, other));
@@ -13178,7 +13179,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const accordionDetailsClasses = generateUtilityClasses('MuiAccordionDetails', ['root']);
   var accordionDetailsClasses$1 = accordionDetailsClasses;
 
-  const _excluded$22 = ["className"];
+  const _excluded$21 = ["className"];
   const useUtilityClasses$1J = ownerState => {
     const {
       classes
@@ -13205,11 +13206,11 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const {
         className
       } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded$22);
+      other = _objectWithoutPropertiesLoose(props, _excluded$21);
     const ownerState = props;
     const classes = useUtilityClasses$1J(ownerState);
     return /*#__PURE__*/jsxRuntime_1(AccordionDetailsRoot, _extends({
-      className: clsx$1(classes.root, className),
+      className: clsx(classes.root, className),
       ref: ref,
       ownerState: ownerState
     }, other));
@@ -13251,14 +13252,14 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       timeout
     } = props;
     const [leaving, setLeaving] = React__namespace.useState(false);
-    const rippleClassName = clsx$1(className, classes.ripple, classes.rippleVisible, pulsate && classes.ripplePulsate);
+    const rippleClassName = clsx(className, classes.ripple, classes.rippleVisible, pulsate && classes.ripplePulsate);
     const rippleStyles = {
       width: rippleSize,
       height: rippleSize,
       top: -(rippleSize / 2) + rippleY,
       left: -(rippleSize / 2) + rippleX
     };
-    const childClassName = clsx$1(classes.child, leaving && classes.childLeaving, pulsate && classes.childPulsate);
+    const childClassName = clsx(classes.child, leaving && classes.childLeaving, pulsate && classes.childPulsate);
     if (!inProp && !leaving) {
       setLeaving(true);
     }
@@ -13323,7 +13324,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const touchRippleClasses = generateUtilityClasses('MuiTouchRipple', ['root', 'ripple', 'rippleVisible', 'ripplePulsate', 'child', 'childLeaving', 'childPulsate']);
   var touchRippleClasses$1 = touchRippleClasses;
 
-  const _excluded$21 = ["center", "classes", "className"];
+  const _excluded$20 = ["center", "classes", "className"];
   let _$3 = t => t,
     _t$3,
     _t2$3,
@@ -13452,7 +13453,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         classes = {},
         className
       } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded$21);
+      other = _objectWithoutPropertiesLoose(props, _excluded$20);
     const [ripples, setRipples] = React__namespace.useState([]);
     const nextKey = React__namespace.useRef(0);
     const rippleCallback = React__namespace.useRef(null);
@@ -13489,12 +13490,12 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       } = params;
       setRipples(oldRipples => [...oldRipples, /*#__PURE__*/jsxRuntime_1(TouchRippleRipple, {
         classes: {
-          ripple: clsx$1(classes.ripple, touchRippleClasses$1.ripple),
-          rippleVisible: clsx$1(classes.rippleVisible, touchRippleClasses$1.rippleVisible),
-          ripplePulsate: clsx$1(classes.ripplePulsate, touchRippleClasses$1.ripplePulsate),
-          child: clsx$1(classes.child, touchRippleClasses$1.child),
-          childLeaving: clsx$1(classes.childLeaving, touchRippleClasses$1.childLeaving),
-          childPulsate: clsx$1(classes.childPulsate, touchRippleClasses$1.childPulsate)
+          ripple: clsx(classes.ripple, touchRippleClasses$1.ripple),
+          rippleVisible: clsx(classes.rippleVisible, touchRippleClasses$1.rippleVisible),
+          ripplePulsate: clsx(classes.ripplePulsate, touchRippleClasses$1.ripplePulsate),
+          child: clsx(classes.child, touchRippleClasses$1.child),
+          childLeaving: clsx(classes.childLeaving, touchRippleClasses$1.childLeaving),
+          childPulsate: clsx(classes.childPulsate, touchRippleClasses$1.childPulsate)
         },
         timeout: DURATION,
         pulsate: pulsate,
@@ -13621,7 +13622,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       stop
     }), [pulsate, start, stop]);
     return /*#__PURE__*/jsxRuntime_1(TouchRippleRoot, _extends({
-      className: clsx$1(touchRippleClasses$1.root, classes.root, className),
+      className: clsx(touchRippleClasses$1.root, classes.root, className),
       ref: container
     }, other, {
       children: /*#__PURE__*/jsxRuntime_1(TransitionGroup$1, {
@@ -13655,7 +13656,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const buttonBaseClasses = generateUtilityClasses('MuiButtonBase', ['root', 'disabled', 'focusVisible']);
   var buttonBaseClasses$1 = buttonBaseClasses;
 
-  const _excluded$20 = ["action", "centerRipple", "children", "className", "component", "disabled", "disableRipple", "disableTouchRipple", "focusRipple", "focusVisibleClassName", "LinkComponent", "onBlur", "onClick", "onContextMenu", "onDragLeave", "onFocus", "onFocusVisible", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseLeave", "onMouseUp", "onTouchEnd", "onTouchMove", "onTouchStart", "tabIndex", "TouchRippleProps", "touchRippleRef", "type"];
+  const _excluded$1$ = ["action", "centerRipple", "children", "className", "component", "disabled", "disableRipple", "disableTouchRipple", "focusRipple", "focusVisibleClassName", "LinkComponent", "onBlur", "onClick", "onContextMenu", "onDragLeave", "onFocus", "onFocusVisible", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseLeave", "onMouseUp", "onTouchEnd", "onTouchMove", "onTouchStart", "tabIndex", "TouchRippleProps", "touchRippleRef", "type"];
   const useUtilityClasses$1I = ownerState => {
     const {
       disabled,
@@ -13757,7 +13758,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         touchRippleRef,
         type
       } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded$20);
+      other = _objectWithoutPropertiesLoose(props, _excluded$1$);
     const buttonRef = React__namespace.useRef(null);
     const rippleRef = React__namespace.useRef(null);
     const handleRippleRef = useForkRef(rippleRef, touchRippleRef);
@@ -13927,7 +13928,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const classes = useUtilityClasses$1I(ownerState);
     return /*#__PURE__*/jsxRuntime_2(ButtonBaseRoot, _extends({
       as: ComponentProp,
-      className: clsx$1(classes.root, className),
+      className: clsx(classes.root, className),
       ownerState: ownerState,
       onBlur: handleBlur,
       onClick: onClick,
@@ -14121,7 +14122,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const accordionSummaryClasses = generateUtilityClasses('MuiAccordionSummary', ['root', 'expanded', 'focusVisible', 'disabled', 'gutters', 'contentGutters', 'content', 'expandIconWrapper']);
   var accordionSummaryClasses$1 = accordionSummaryClasses;
 
-  const _excluded$1$ = ["children", "className", "expandIcon", "focusVisibleClassName", "onClick"];
+  const _excluded$1_ = ["children", "className", "expandIcon", "focusVisibleClassName", "onClick"];
   const useUtilityClasses$1H = ownerState => {
     const {
       classes,
@@ -14216,7 +14217,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         focusVisibleClassName,
         onClick
       } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded$1$);
+      other = _objectWithoutPropertiesLoose(props, _excluded$1_);
     const {
       disabled = false,
       disableGutters,
@@ -14243,8 +14244,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       disabled: disabled,
       component: "div",
       "aria-expanded": expanded,
-      className: clsx$1(classes.root, className),
-      focusVisibleClassName: clsx$1(classes.focusVisible, focusVisibleClassName),
+      className: clsx(classes.root, className),
+      focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
       onClick: handleChange,
       ref: ref,
       ownerState: ownerState
@@ -14313,7 +14314,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const iconButtonClasses = generateUtilityClasses('MuiIconButton', ['root', 'disabled', 'colorInherit', 'colorPrimary', 'colorSecondary', 'colorError', 'colorInfo', 'colorSuccess', 'colorWarning', 'edgeStart', 'edgeEnd', 'sizeSmall', 'sizeMedium', 'sizeLarge']);
   var iconButtonClasses$1 = iconButtonClasses;
 
-  const _excluded$1_ = ["edge", "children", "className", "color", "disabled", "disableFocusRipple", "size"];
+  const _excluded$1Z = ["edge", "children", "className", "color", "disabled", "disableFocusRipple", "size"];
   const useUtilityClasses$1G = ownerState => {
     const {
       classes,
@@ -14414,7 +14415,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         disableFocusRipple = false,
         size = 'medium'
       } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded$1_);
+      other = _objectWithoutPropertiesLoose(props, _excluded$1Z);
     const ownerState = _extends({}, props, {
       edge,
       color,
@@ -14424,7 +14425,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     });
     const classes = useUtilityClasses$1G(ownerState);
     return /*#__PURE__*/jsxRuntime_1(IconButtonRoot, _extends({
-      className: clsx$1(classes.root, className),
+      className: clsx(classes.root, className),
       centerRipple: true,
       focusRipple: !disableFocusRipple,
       disabled: disabled,
@@ -14523,7 +14524,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
   }), 'Close');
 
-  const _excluded$1Z = ["action", "children", "className", "closeText", "color", "components", "componentsProps", "icon", "iconMapping", "onClose", "role", "severity", "slotProps", "slots", "variant"];
+  const _excluded$1Y = ["action", "children", "className", "closeText", "color", "components", "componentsProps", "icon", "iconMapping", "onClose", "role", "severity", "slotProps", "slots", "variant"];
   const useUtilityClasses$1F = ownerState => {
     const {
       variant,
@@ -14653,7 +14654,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         slots = {},
         variant = 'standard'
       } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded$1Z);
+      other = _objectWithoutPropertiesLoose(props, _excluded$1Y);
     const ownerState = _extends({}, props, {
       color,
       severity,
@@ -14668,7 +14669,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       role: role,
       elevation: 0,
       ownerState: ownerState,
-      className: clsx$1(classes.root, className),
+      className: clsx(classes.root, className),
       ref: ref
     }, other, {
       children: [icon !== false ? /*#__PURE__*/jsxRuntime_1(AlertIcon, {
@@ -14834,7 +14835,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const typographyClasses = generateUtilityClasses('MuiTypography', ['root', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle1', 'subtitle2', 'body1', 'body2', 'inherit', 'button', 'caption', 'overline', 'alignLeft', 'alignRight', 'alignCenter', 'alignJustify', 'noWrap', 'gutterBottom', 'paragraph']);
   var typographyClasses$1 = typographyClasses;
 
-  const _excluded$1Y = ["align", "className", "component", "gutterBottom", "noWrap", "paragraph", "variant", "variantMapping"];
+  const _excluded$1X = ["align", "className", "component", "gutterBottom", "noWrap", "paragraph", "variant", "variantMapping"];
   const useUtilityClasses$1E = ownerState => {
     const {
       align,
@@ -14921,7 +14922,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         variant = 'body1',
         variantMapping = defaultVariantMapping
       } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded$1Y);
+      other = _objectWithoutPropertiesLoose(props, _excluded$1X);
     const ownerState = _extends({}, props, {
       align,
       color,
@@ -14939,7 +14940,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       as: Component,
       ref: ref,
       ownerState: ownerState,
-      className: clsx$1(classes.root, className)
+      className: clsx(classes.root, className)
     }, other));
   });
   Typography.propTypes /* remove-proptypes */ = {
@@ -15025,7 +15026,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const alertTitleClasses = generateUtilityClasses('MuiAlertTitle', ['root']);
   var alertTitleClasses$1 = alertTitleClasses;
 
-  const _excluded$1X = ["className"];
+  const _excluded$1W = ["className"];
   const useUtilityClasses$1D = ownerState => {
     const {
       classes
@@ -15055,7 +15056,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const {
         className
       } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded$1X);
+      other = _objectWithoutPropertiesLoose(props, _excluded$1W);
     const ownerState = props;
     const classes = useUtilityClasses$1D(ownerState);
     return /*#__PURE__*/jsxRuntime_1(AlertTitleRoot, _extends({
@@ -15063,7 +15064,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       component: "div",
       ownerState: ownerState,
       ref: ref,
-      className: clsx$1(classes.root, className)
+      className: clsx(classes.root, className)
     }, other));
   });
   AlertTitle.propTypes /* remove-proptypes */ = {
@@ -15096,7 +15097,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const appBarClasses = generateUtilityClasses('MuiAppBar', ['root', 'positionFixed', 'positionAbsolute', 'positionSticky', 'positionStatic', 'positionRelative', 'colorDefault', 'colorPrimary', 'colorSecondary', 'colorInherit', 'colorTransparent']);
   var appBarClasses$1 = appBarClasses;
 
-  const _excluded$1W = ["className", "color", "enableColorOnDark", "position"];
+  const _excluded$1V = ["className", "color", "enableColorOnDark", "position"];
   const useUtilityClasses$1C = ownerState => {
     const {
       color,
@@ -15202,7 +15203,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         enableColorOnDark = false,
         position = 'fixed'
       } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded$1W);
+      other = _objectWithoutPropertiesLoose(props, _excluded$1V);
     const ownerState = _extends({}, props, {
       color,
       position,
@@ -15214,7 +15215,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       component: "header",
       ownerState: ownerState,
       elevation: 4,
-      className: clsx$1(classes.root, className, position === 'fixed' && 'mui-fixed'),
+      className: clsx(classes.root, className, position === 'fixed' && 'mui-fixed'),
       ref: ref
     }, other));
   });
@@ -15347,8 +15348,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     return componentProps;
   }
 
-  function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
-
   /**
    * Removes event handlers from the given object.
    * A field is considered an event handler if it is a function with a name beginning with `on`.
@@ -15433,7 +15432,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     };
   }
 
-  const _excluded$1V = ["elementType", "externalSlotProps", "ownerState", "skipResolvingSlotProps"];
+  const _excluded$1U = ["elementType", "externalSlotProps", "ownerState", "skipResolvingSlotProps"];
   /**
    * @ignore - do not document.
    * Builds the props to be passed into the slot of an unstyled component.
@@ -15450,7 +15449,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         ownerState,
         skipResolvingSlotProps = false
       } = parameters,
-      rest = _objectWithoutPropertiesLoose(parameters, _excluded$1V);
+      rest = _objectWithoutPropertiesLoose(parameters, _excluded$1U);
     const resolvedComponentsProps = skipResolvingSlotProps ? {} : resolveComponentProps(externalSlotProps, ownerState);
     const {
       props: mergedProps,
@@ -17871,8 +17870,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   }
   generateUtilityClasses('MuiPopper', ['root']);
 
-  const _excluded$1U = ["anchorEl", "children", "direction", "disablePortal", "modifiers", "open", "placement", "popperOptions", "popperRef", "slotProps", "slots", "TransitionProps", "ownerState"],
-    _excluded2$a = ["anchorEl", "children", "container", "direction", "disablePortal", "keepMounted", "modifiers", "open", "placement", "popperOptions", "popperRef", "style", "transition", "slotProps", "slots"];
+  const _excluded$1T = ["anchorEl", "children", "direction", "disablePortal", "modifiers", "open", "placement", "popperOptions", "popperRef", "slotProps", "slots", "TransitionProps", "ownerState"],
+    _excluded2$b = ["anchorEl", "children", "container", "direction", "disablePortal", "keepMounted", "modifiers", "open", "placement", "popperOptions", "popperRef", "style", "transition", "slotProps", "slots"];
   function flipPlacement(placement, direction) {
     if (direction === 'ltr') {
       return placement;
@@ -17924,7 +17923,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         // @ts-ignore internal logic
         // prevent from spreading to DOM, it can come from the parent component e.g. Select.
       } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded$1U);
+      other = _objectWithoutPropertiesLoose(props, _excluded$1T);
     const tooltipRef = React__namespace.useRef(null);
     const ownRef = useForkRef(tooltipRef, forwardedRef);
     const popperRef = React__namespace.useRef(null);
@@ -18056,7 +18055,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         slotProps = {},
         slots = {}
       } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded2$a);
+      other = _objectWithoutPropertiesLoose(props, _excluded2$b);
     const [exited, setExited] = React__namespace.useState(true);
     const handleEnter = () => {
       setExited(false);
@@ -18310,7 +18309,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       if (container.parentNode instanceof DocumentFragment) {
         scrollContainer = ownerDocument(container).body;
       } else {
-        // Improve Gatsby support
+        // Support html overflow-y: auto for scroll stability between pages
         // https://css-tricks.com/snippets/css/force-vertical-scrollbar/
         const parent = container.parentElement;
         const containerWindow = ownerWindow(container);
@@ -18445,23 +18444,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     }
   }
 
-  function getModalUtilityClass(slot) {
-    return generateUtilityClass('MuiModal', slot);
-  }
-  const modalClasses$1 = generateUtilityClasses('MuiModal', ['root', 'hidden', 'backdrop']);
-
-  const _excluded$1T = ["children", "closeAfterTransition", "container", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "manager", "onBackdropClick", "onClose", "onKeyDown", "open", "onTransitionEnter", "onTransitionExited", "slotProps", "slots"];
-  const useUtilityClasses$1A = ownerState => {
-    const {
-      open,
-      exited
-    } = ownerState;
-    const slots = {
-      root: ['root', !open && exited && 'hidden'],
-      backdrop: ['backdrop']
-    };
-    return composeClasses(slots, useClassNamesOverride(getModalUtilityClass));
-  };
   function getContainer(container) {
     return typeof container === 'function' ? container() : container;
   }
@@ -18472,68 +18454,47 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   // A modal manager used to track and manage the state of open Modals.
   // Modals don't open on the server so this won't conflict with concurrent requests.
   const defaultManager = new ModalManager();
-
   /**
-   * Modal is a lower-level construct that is leveraged by the following components:
-   *
-   * *   [Dialog](https://mui.com/material-ui/api/dialog/)
-   * *   [Drawer](https://mui.com/material-ui/api/drawer/)
-   * *   [Menu](https://mui.com/material-ui/api/menu/)
-   * *   [Popover](https://mui.com/material-ui/api/popover/)
-   *
-   * If you are creating a modal dialog, you probably want to use the [Dialog](https://mui.com/material-ui/api/dialog/) component
-   * rather than directly using Modal.
-   *
-   * This component shares many concepts with [react-overlays](https://react-bootstrap.github.io/react-overlays/#modals).
    *
    * Demos:
    *
-   * - [Modal](https://mui.com/base-ui/react-modal/)
+   * - [Modal](https://mui.com/base-ui/react-modal/#hook)
    *
    * API:
    *
-   * - [Modal API](https://mui.com/base-ui/react-modal/components-api/#modal)
+   * - [useModal API](https://mui.com/base-ui/react-modal/hooks-api/#use-modal)
    */
-  const Modal$2 = /*#__PURE__*/React__namespace.forwardRef(function Modal(props, forwardedRef) {
-    var _props$ariaHidden, _slots$root;
+  function useModal(parameters) {
     const {
-        children,
-        closeAfterTransition = false,
-        container,
-        disableAutoFocus = false,
-        disableEnforceFocus = false,
-        disableEscapeKeyDown = false,
-        disablePortal = false,
-        disableRestoreFocus = false,
-        disableScrollLock = false,
-        hideBackdrop = false,
-        keepMounted = false,
-        // private
-        manager: managerProp = defaultManager,
-        onBackdropClick,
-        onClose,
-        onKeyDown,
-        open,
-        onTransitionEnter,
-        onTransitionExited,
-        slotProps = {},
-        slots = {}
-      } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded$1T);
-    // TODO: `modal`` must change its type in this file to match the type of methods
-    // provided by `ModalManager`
-    const manager = managerProp;
-    const [exited, setExited] = React__namespace.useState(!open);
+      container,
+      disableEscapeKeyDown = false,
+      disableScrollLock = false,
+      // @ts-ignore internal logic - Base UI supports the manager as a prop too
+      manager = defaultManager,
+      closeAfterTransition = false,
+      onTransitionEnter,
+      onTransitionExited,
+      children,
+      onClose,
+      open,
+      rootRef
+    } = parameters;
+
+    // @ts-ignore internal logic
     const modal = React__namespace.useRef({});
     const mountNodeRef = React__namespace.useRef(null);
     const modalRef = React__namespace.useRef(null);
-    const handleRef = useForkRef(modalRef, forwardedRef);
+    const handleRef = useForkRef(modalRef, rootRef);
+    const [exited, setExited] = React__namespace.useState(!open);
     const hasTransition = getHasTransition(children);
-    const ariaHiddenProp = (_props$ariaHidden = props['aria-hidden']) != null ? _props$ariaHidden : true;
+    let ariaHiddenProp = true;
+    if (parameters['aria-hidden'] === 'false' || parameters['aria-hidden'] === false) {
+      ariaHiddenProp = false;
+    }
     const getDoc = () => ownerDocument(mountNodeRef.current);
     const getModal = () => {
       modal.current.modalRef = modalRef.current;
-      modal.current.mountNode = mountNodeRef.current;
+      modal.current.mount = mountNodeRef.current;
       return modal.current;
     };
     const handleMounted = () => {
@@ -18558,18 +18519,18 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const isTopModal = React__namespace.useCallback(() => manager.isTopModal(getModal()), [manager]);
     const handlePortalRef = useEventCallback(node => {
       mountNodeRef.current = node;
-      if (!node || !modalRef.current) {
+      if (!node) {
         return;
       }
       if (open && isTopModal()) {
         handleMounted();
-      } else {
+      } else if (modalRef.current) {
         ariaHidden(modalRef.current, ariaHiddenProp);
       }
     });
     const handleClose = React__namespace.useCallback(() => {
       manager.remove(getModal(), ariaHiddenProp);
-    }, [manager, ariaHiddenProp]);
+    }, [ariaHiddenProp, manager]);
     React__namespace.useEffect(() => {
       return () => {
         handleClose();
@@ -18582,49 +18543,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         handleClose();
       }
     }, [open, handleClose, hasTransition, closeAfterTransition, handleOpen]);
-    const ownerState = _extends({}, props, {
-      closeAfterTransition,
-      disableAutoFocus,
-      disableEnforceFocus,
-      disableEscapeKeyDown,
-      disablePortal,
-      disableRestoreFocus,
-      disableScrollLock,
-      exited,
-      hideBackdrop,
-      keepMounted
-    });
-    const classes = useUtilityClasses$1A(ownerState);
-    const handleEnter = () => {
-      setExited(false);
-      if (onTransitionEnter) {
-        onTransitionEnter();
-      }
-    };
-    const handleExited = () => {
-      setExited(true);
-      if (onTransitionExited) {
-        onTransitionExited();
-      }
-      if (closeAfterTransition) {
-        handleClose();
-      }
-    };
-    const handleBackdropClick = event => {
-      if (event.target !== event.currentTarget) {
-        return;
-      }
-      if (onBackdropClick) {
-        onBackdropClick(event);
-      }
-      if (onClose) {
-        onClose(event, 'backdropClick');
-      }
-    };
-    const handleKeyDown = event => {
-      if (onKeyDown) {
-        onKeyDown(event);
-      }
+    const createHandleKeyDown = otherHandlers => event => {
+      var _otherHandlers$onKeyD;
+      (_otherHandlers$onKeyD = otherHandlers.onKeyDown) == null ? void 0 : _otherHandlers$onKeyD.call(otherHandlers, event);
 
       // The handler doesn't take event.defaultPrevented into account:
       //
@@ -18643,178 +18564,71 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         }
       }
     };
-    const childProps = {};
-    if (children.props.tabIndex === undefined) {
-      childProps.tabIndex = '-1';
-    }
+    const createHandleBackdropClick = otherHandlers => event => {
+      var _otherHandlers$onClic;
+      (_otherHandlers$onClic = otherHandlers.onClick) == null ? void 0 : _otherHandlers$onClic.call(otherHandlers, event);
+      if (event.target !== event.currentTarget) {
+        return;
+      }
+      if (onClose) {
+        onClose(event, 'backdropClick');
+      }
+    };
+    const getRootProps = (otherHandlers = {}) => {
+      const propsEventHandlers = extractEventHandlers(parameters);
 
-    // It's a Transition like component
-    if (hasTransition) {
-      childProps.onEnter = createChainedFunction(handleEnter, children.props.onEnter);
-      childProps.onExited = createChainedFunction(handleExited, children.props.onExited);
-    }
-    const Root = (_slots$root = slots.root) != null ? _slots$root : 'div';
-    const rootProps = useSlotProps({
-      elementType: Root,
-      externalSlotProps: slotProps.root,
-      externalForwardedProps: other,
-      additionalProps: {
-        ref: handleRef,
-        role: 'presentation',
-        onKeyDown: handleKeyDown
-      },
-      className: classes.root,
-      ownerState
-    });
-    const BackdropComponent = slots.backdrop;
-    const backdropProps = useSlotProps({
-      elementType: BackdropComponent,
-      externalSlotProps: slotProps.backdrop,
-      additionalProps: {
-        'aria-hidden': true,
-        onClick: handleBackdropClick,
+      // The custom event handlers shouldn't be spread on the root element
+      delete propsEventHandlers.onTransitionEnter;
+      delete propsEventHandlers.onTransitionExited;
+      const externalEventHandlers = _extends({}, propsEventHandlers, otherHandlers);
+      return _extends({
+        role: 'presentation'
+      }, externalEventHandlers, {
+        onKeyDown: createHandleKeyDown(externalEventHandlers),
+        ref: handleRef
+      });
+    };
+    const getBackdropProps = (otherHandlers = {}) => {
+      const externalEventHandlers = otherHandlers;
+      return _extends({
+        'aria-hidden': true
+      }, externalEventHandlers, {
+        onClick: createHandleBackdropClick(externalEventHandlers),
         open
-      },
-      className: classes.backdrop,
-      ownerState
-    });
-    if (!keepMounted && !open && (!hasTransition || exited)) {
-      return null;
-    }
-    return /*#__PURE__*/jsxRuntime_1(Portal
-    // @ts-expect-error TODO: include ref to Base UI Portal props
-    , {
-      ref: handlePortalRef,
-      container: container,
-      disablePortal: disablePortal,
-      children: /*#__PURE__*/jsxRuntime_2(Root, _extends({}, rootProps, {
-        children: [!hideBackdrop && BackdropComponent ? /*#__PURE__*/jsxRuntime_1(BackdropComponent, _extends({}, backdropProps)) : null, /*#__PURE__*/jsxRuntime_1(FocusTrap, {
-          disableEnforceFocus: disableEnforceFocus,
-          disableAutoFocus: disableAutoFocus,
-          disableRestoreFocus: disableRestoreFocus,
-          isEnabled: isTopModal,
-          open: open,
-          children: /*#__PURE__*/React__namespace.cloneElement(children, childProps)
-        })]
-      }))
-    });
-  });
-  Modal$2.propTypes /* remove-proptypes */ = {
-    // ----------------------------- Warning --------------------------------
-    // | These PropTypes are generated from the TypeScript type definitions |
-    // |     To update them edit TypeScript types and run "yarn proptypes"  |
-    // ----------------------------------------------------------------------
-    /**
-     * A single child content element.
-     */
-    children: elementAcceptingRef$1.isRequired,
-    /**
-     * When set to true the Modal waits until a nested Transition is completed before closing.
-     * @default false
-     */
-    closeAfterTransition: PropTypes.bool,
-    /**
-     * An HTML element or function that returns one.
-     * The `container` will have the portal children appended to it.
-     *
-     * By default, it uses the body of the top-level document object,
-     * so it's simply `document.body` most of the time.
-     */
-    container: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([HTMLElementType, PropTypes.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: PropTypes.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: PropTypes.bool,
-    /**
-     * If `true`, hitting escape will not fire the `onClose` callback.
-     * @default false
-     */
-    disableEscapeKeyDown: PropTypes.bool,
-    /**
-     * The `children` will be under the DOM hierarchy of the parent component.
-     * @default false
-     */
-    disablePortal: PropTypes.bool,
-    /**
-     * If `true`, the modal will not restore focus to previously focused element once
-     * modal is hidden or unmounted.
-     * @default false
-     */
-    disableRestoreFocus: PropTypes.bool,
-    /**
-     * Disable the scroll lock behavior.
-     * @default false
-     */
-    disableScrollLock: PropTypes.bool,
-    /**
-     * If `true`, the backdrop is not rendered.
-     * @default false
-     */
-    hideBackdrop: PropTypes.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.
-     * @default false
-     */
-    keepMounted: PropTypes.bool,
-    /**
-     * Callback fired when the backdrop is clicked.
-     * @deprecated Use the `onClose` prop with the `reason` argument to handle the `backdropClick` events.
-     */
-    onBackdropClick: PropTypes.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: PropTypes.func,
-    /**
-     * A function called when a transition enters.
-     */
-    onTransitionEnter: PropTypes.func,
-    /**
-     * A function called when a transition has exited.
-     */
-    onTransitionExited: PropTypes.func,
-    /**
-     * If `true`, the component is shown.
-     */
-    open: PropTypes.bool.isRequired,
-    /**
-     * The props used for each slot inside the Modal.
-     * @default {}
-     */
-    slotProps: PropTypes.shape({
-      backdrop: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-      root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
-    }),
-    /**
-     * The components used for each slot inside the Modal.
-     * Either a string to use a HTML element or a component.
-     * @default {}
-     */
-    slots: PropTypes.shape({
-      backdrop: PropTypes.elementType,
-      root: PropTypes.elementType
-    })
-  } ;
+      });
+    };
+    const getTransitionProps = () => {
+      const handleEnter = () => {
+        setExited(false);
+        if (onTransitionEnter) {
+          onTransitionEnter();
+        }
+      };
+      const handleExited = () => {
+        setExited(true);
+        if (onTransitionExited) {
+          onTransitionExited();
+        }
+        if (closeAfterTransition) {
+          handleClose();
+        }
+      };
+      return {
+        onEnter: createChainedFunction(handleEnter, children.props.onEnter),
+        onExited: createChainedFunction(handleExited, children.props.onExited)
+      };
+    };
+    return {
+      getRootProps,
+      getBackdropProps,
+      getTransitionProps,
+      rootRef: handleRef,
+      portalRef: handlePortalRef,
+      isTopModal,
+      exited,
+      hasTransition
+    };
+  }
 
   /**
    * NoSsr purposely removes components from the subject of Server Side Rendering (SSR).
@@ -21068,7 +20882,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var listSubheaderClasses$1 = listSubheaderClasses;
 
   const _excluded$1Q = ["className", "color", "component", "disableGutters", "disableSticky", "inset"];
-  const useUtilityClasses$1z = ownerState => {
+  const useUtilityClasses$1A = ownerState => {
     const {
       classes,
       color,
@@ -21137,10 +20951,10 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       disableSticky,
       inset
     });
-    const classes = useUtilityClasses$1z(ownerState);
+    const classes = useUtilityClasses$1A(ownerState);
     return /*#__PURE__*/jsxRuntime_1(ListSubheaderRoot, _extends({
       as: component,
-      className: clsx$1(classes.root, className),
+      className: clsx(classes.root, className),
       ref: ref,
       ownerState: ownerState
     }, other));
@@ -21206,7 +21020,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var chipClasses$1 = chipClasses;
 
   const _excluded$1P = ["avatar", "className", "clickable", "color", "component", "deleteIcon", "disabled", "icon", "label", "onClick", "onDelete", "onKeyDown", "onKeyUp", "size", "variant", "tabIndex", "skipFocusWhenDisabled"];
-  const useUtilityClasses$1y = ownerState => {
+  const useUtilityClasses$1z = ownerState => {
     const {
       classes,
       disabled,
@@ -21529,7 +21343,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       clickable,
       variant
     });
-    const classes = useUtilityClasses$1y(ownerState);
+    const classes = useUtilityClasses$1z(ownerState);
     const moreProps = component === ButtonBase$1 ? _extends({
       component: ComponentProp || 'div',
       focusVisibleClassName: classes.focusVisible
@@ -21539,23 +21353,23 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     let deleteIcon = null;
     if (onDelete) {
       deleteIcon = deleteIconProp && /*#__PURE__*/React__namespace.isValidElement(deleteIconProp) ? /*#__PURE__*/React__namespace.cloneElement(deleteIconProp, {
-        className: clsx$1(deleteIconProp.props.className, classes.deleteIcon),
+        className: clsx(deleteIconProp.props.className, classes.deleteIcon),
         onClick: handleDeleteIconClick
       }) : /*#__PURE__*/jsxRuntime_1(CancelIcon, {
-        className: clsx$1(classes.deleteIcon),
+        className: clsx(classes.deleteIcon),
         onClick: handleDeleteIconClick
       });
     }
     let avatar = null;
     if (avatarProp && /*#__PURE__*/React__namespace.isValidElement(avatarProp)) {
       avatar = /*#__PURE__*/React__namespace.cloneElement(avatarProp, {
-        className: clsx$1(classes.avatar, avatarProp.props.className)
+        className: clsx(classes.avatar, avatarProp.props.className)
       });
     }
     let icon = null;
     if (iconProp && /*#__PURE__*/React__namespace.isValidElement(iconProp)) {
       icon = /*#__PURE__*/React__namespace.cloneElement(iconProp, {
-        className: clsx$1(classes.icon, iconProp.props.className)
+        className: clsx(classes.icon, iconProp.props.className)
       });
     }
     {
@@ -21565,7 +21379,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     }
     return /*#__PURE__*/jsxRuntime_2(ChipRoot, _extends({
       as: component,
-      className: clsx$1(classes.root, className),
+      className: clsx(classes.root, className),
       disabled: clickable && disabled ? true : undefined,
       onClick: onClick,
       onKeyDown: handleKeyDown,
@@ -21575,7 +21389,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       ownerState: ownerState
     }, moreProps, other, {
       children: [avatar || icon, /*#__PURE__*/jsxRuntime_1(ChipLabel, {
-        className: clsx$1(classes.label),
+        className: clsx(classes.label),
         ownerState: ownerState,
         children: label
       }), deleteIcon]
@@ -21781,7 +21595,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     } = props;
     return [styles.input, ownerState.size === 'small' && styles.inputSizeSmall, ownerState.multiline && styles.inputMultiline, ownerState.type === 'search' && styles.inputTypeSearch, ownerState.startAdornment && styles.inputAdornedStart, ownerState.endAdornment && styles.inputAdornedEnd, ownerState.hiddenLabel && styles.inputHiddenLabel];
   };
-  const useUtilityClasses$1x = ownerState => {
+  const useUtilityClasses$1y = ownerState => {
     const {
       classes,
       color,
@@ -22121,7 +21935,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       if (inputRef.current && event.currentTarget === event.target) {
         inputRef.current.focus();
       }
-      if (onClick && !fcs.disabled) {
+      if (onClick) {
         onClick(event);
       }
     };
@@ -22173,7 +21987,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       startAdornment,
       type
     });
-    const classes = useUtilityClasses$1x(ownerState);
+    const classes = useUtilityClasses$1y(ownerState);
     const Root = slots.root || components.Root || InputBaseRoot;
     const rootProps = slotProps.root || componentsProps.root || {};
     const Input = slots.input || components.Input || InputBaseComponent;
@@ -22185,7 +21999,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         ref: ref,
         onClick: handleClick
       }, other, {
-        className: clsx$1(classes.root, rootProps.className, className, readOnly && 'MuiInputBase-readOnly'),
+        className: clsx(classes.root, rootProps.className, className, readOnly && 'MuiInputBase-readOnly'),
         children: [startAdornment, /*#__PURE__*/jsxRuntime_1(FormControlContext$1.Provider, {
           value: null,
           children: /*#__PURE__*/jsxRuntime_1(Input, _extends({
@@ -22212,7 +22026,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
             ownerState: _extends({}, ownerState, inputProps.ownerState)
           }, {
             ref: handleInputRef,
-            className: clsx$1(classes.input, inputProps.className, readOnly && 'MuiInputBase-readOnly'),
+            className: clsx(classes.input, inputProps.className, readOnly && 'MuiInputBase-readOnly'),
             onBlur: handleBlur,
             onChange: handleChange,
             onFocus: handleFocus
@@ -22485,8 +22299,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   var _ClearIcon, _ArrowDropDownIcon;
   const _excluded$1N = ["autoComplete", "autoHighlight", "autoSelect", "blurOnSelect", "ChipProps", "className", "clearIcon", "clearOnBlur", "clearOnEscape", "clearText", "closeText", "componentsProps", "defaultValue", "disableClearable", "disableCloseOnSelect", "disabled", "disabledItemsFocusable", "disableListWrap", "disablePortal", "filterOptions", "filterSelectedOptions", "forcePopupIcon", "freeSolo", "fullWidth", "getLimitTagsText", "getOptionDisabled", "getOptionLabel", "isOptionEqualToValue", "groupBy", "handleHomeEndKeys", "id", "includeInputInList", "inputValue", "limitTags", "ListboxComponent", "ListboxProps", "loading", "loadingText", "multiple", "noOptionsText", "onChange", "onClose", "onHighlightChange", "onInputChange", "onOpen", "open", "openOnFocus", "openText", "options", "PaperComponent", "PopperComponent", "popupIcon", "readOnly", "renderGroup", "renderInput", "renderOption", "renderTags", "selectOnFocus", "size", "slotProps", "value"],
-    _excluded2$9 = ["ref"];
-  const useUtilityClasses$1w = ownerState => {
+    _excluded2$a = ["ref"];
+  const useUtilityClasses$1x = ownerState => {
     const {
       classes,
       disablePortal,
@@ -22921,7 +22735,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       {
         ref: listboxRef
       } = _getListboxProps,
-      otherListboxProps = _objectWithoutPropertiesLoose(_getListboxProps, _excluded2$9);
+      otherListboxProps = _objectWithoutPropertiesLoose(_getListboxProps, _excluded2$a);
     const combinedListboxRef = useForkRef(listboxRef, externalListboxRef);
     const defaultGetOptionLabel = option => {
       var _option$label;
@@ -22942,7 +22756,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       popupOpen,
       size
     });
-    const classes = useUtilityClasses$1w(ownerState);
+    const classes = useUtilityClasses$1x(ownerState);
     let startAdornment;
     if (multiple && value.length > 0) {
       const getCustomizedTagProps = params => _extends({
@@ -23007,7 +22821,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     return /*#__PURE__*/jsxRuntime_2(React__namespace.Fragment, {
       children: [/*#__PURE__*/jsxRuntime_1(AutocompleteRoot, _extends({
         ref: ref,
-        className: clsx$1(classes.root, className),
+        className: clsx(classes.root, className),
         ownerState: ownerState
       }, getRootProps(other), {
         children: renderInput({
@@ -23034,7 +22848,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
                 title: clearText,
                 ownerState: ownerState
               }, clearIndicatorSlotProps, {
-                className: clsx$1(classes.clearIndicator, clearIndicatorSlotProps == null ? void 0 : clearIndicatorSlotProps.className),
+                className: clsx(classes.clearIndicator, clearIndicatorSlotProps == null ? void 0 : clearIndicatorSlotProps.className),
                 children: clearIcon
               })) : null, hasPopupIcon ? /*#__PURE__*/jsxRuntime_1(AutocompletePopupIndicator, _extends({}, getPopupIndicatorProps(), {
                 disabled: disabled,
@@ -23042,7 +22856,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
                 title: popupOpen ? closeText : openText,
                 ownerState: ownerState
               }, popupIndicatorSlotProps, {
-                className: clsx$1(classes.popupIndicator, popupIndicatorSlotProps == null ? void 0 : popupIndicatorSlotProps.className),
+                className: clsx(classes.popupIndicator, popupIndicatorSlotProps == null ? void 0 : popupIndicatorSlotProps.className),
                 children: popupIcon
               })) : null]
             })
@@ -23064,12 +22878,12 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         anchorEl: anchorEl,
         open: popupOpen
       }, popperSlotProps, {
-        className: clsx$1(classes.popper, popperSlotProps == null ? void 0 : popperSlotProps.className),
+        className: clsx(classes.popper, popperSlotProps == null ? void 0 : popperSlotProps.className),
         children: /*#__PURE__*/jsxRuntime_2(AutocompletePaper, _extends({
           ownerState: ownerState,
           as: PaperComponent
         }, paperSlotProps, {
-          className: clsx$1(classes.paper, paperSlotProps == null ? void 0 : paperSlotProps.className),
+          className: clsx(classes.paper, paperSlotProps == null ? void 0 : paperSlotProps.className),
           children: [loading && groupedOptions.length === 0 ? /*#__PURE__*/jsxRuntime_1(AutocompleteLoading, {
             className: classes.loading,
             ownerState: ownerState,
@@ -23532,7 +23346,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var avatarClasses$1 = avatarClasses;
 
   const _excluded$1M = ["alt", "children", "className", "component", "imgProps", "sizes", "src", "srcSet", "variant"];
-  const useUtilityClasses$1v = ownerState => {
+  const useUtilityClasses$1w = ownerState => {
     const {
       classes,
       variant,
@@ -23674,7 +23488,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       component,
       variant
     });
-    const classes = useUtilityClasses$1v(ownerState);
+    const classes = useUtilityClasses$1w(ownerState);
     if (hasImgNotFailing) {
       children = /*#__PURE__*/jsxRuntime_1(AvatarImg, _extends({
         alt: alt,
@@ -23697,7 +23511,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     return /*#__PURE__*/jsxRuntime_1(AvatarRoot, _extends({
       as: component,
       ownerState: ownerState,
-      className: clsx$1(classes.root, className),
+      className: clsx(classes.root, className),
       ref: ref
     }, other, {
       children: children
@@ -23772,7 +23586,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     small: -16,
     medium: null
   };
-  const useUtilityClasses$1u = ownerState => {
+  const useUtilityClasses$1v = ownerState => {
     const {
       classes
     } = ownerState;
@@ -23841,7 +23655,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       component,
       variant
     });
-    const classes = useUtilityClasses$1u(ownerState);
+    const classes = useUtilityClasses$1v(ownerState);
     const children = React__namespace.Children.toArray(childrenProp).filter(child => {
       {
         if (reactIs_2(child)) {
@@ -23862,21 +23676,21 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     return /*#__PURE__*/jsxRuntime_2(AvatarGroupRoot, _extends({
       as: component,
       ownerState: ownerState,
-      className: clsx$1(classes.root, className),
+      className: clsx(classes.root, className),
       ref: ref
     }, other, {
       children: [extraAvatars ? /*#__PURE__*/jsxRuntime_2(AvatarGroupAvatar, _extends({
         ownerState: ownerState,
         variant: variant
       }, additionalAvatarSlotProps, {
-        className: clsx$1(classes.avatar, additionalAvatarSlotProps == null ? void 0 : additionalAvatarSlotProps.className),
+        className: clsx(classes.avatar, additionalAvatarSlotProps == null ? void 0 : additionalAvatarSlotProps.className),
         style: _extends({
           marginLeft
         }, additionalAvatarSlotProps == null ? void 0 : additionalAvatarSlotProps.style),
         children: ["+", extraAvatars]
       })) : null, children.slice(0, maxAvatars).reverse().map((child, index) => {
         return /*#__PURE__*/React__namespace.cloneElement(child, {
-          className: clsx$1(child.props.className, classes.avatar),
+          className: clsx(child.props.className, classes.avatar),
           style: _extends({
             // Consistent with "&:last-child" styling for the default spacing,
             // we do not apply custom marginLeft spacing on the last child
@@ -24164,7 +23978,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var backdropClasses$1 = backdropClasses;
 
   const _excluded$1J = ["children", "className", "component", "components", "componentsProps", "invisible", "open", "slotProps", "slots", "TransitionComponent", "transitionDuration"];
-  const useUtilityClasses$1t = ownerState => {
+  const useUtilityClasses$1u = ownerState => {
     const {
       classes,
       invisible
@@ -24223,7 +24037,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       component,
       invisible
     });
-    const classes = useUtilityClasses$1t(ownerState);
+    const classes = useUtilityClasses$1u(ownerState);
     const rootSlotProps = (_slotProps$root = slotProps.root) != null ? _slotProps$root : componentsProps.root;
     return /*#__PURE__*/jsxRuntime_1(TransitionComponent, _extends({
       in: open,
@@ -24233,7 +24047,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         "aria-hidden": true
       }, rootSlotProps, {
         as: (_ref = (_slots$root = slots.root) != null ? _slots$root : components.Root) != null ? _ref : component,
-        className: clsx$1(classes.root, className, rootSlotProps == null ? void 0 : rootSlotProps.className),
+        className: clsx(classes.root, className, rootSlotProps == null ? void 0 : rootSlotProps.className),
         ownerState: _extends({}, ownerState, rootSlotProps == null ? void 0 : rootSlotProps.ownerState),
         classes: classes,
         ref: ref,
@@ -24350,7 +24164,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const _excluded$1I = ["anchorOrigin", "className", "classes", "component", "components", "componentsProps", "children", "overlap", "color", "invisible", "max", "badgeContent", "slots", "slotProps", "showZero", "variant"];
   const RADIUS_STANDARD = 10;
   const RADIUS_DOT = 4;
-  const useUtilityClasses$1s = ownerState => {
+  const useUtilityClasses$1t = ownerState => {
     const {
       color,
       anchorOrigin,
@@ -24553,7 +24367,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       overlap,
       variant
     });
-    const classes = useUtilityClasses$1s(ownerState);
+    const classes = useUtilityClasses$1t(ownerState);
 
     // support both `slots` and `components` for backward compatibility
     const RootSlot = (_ref = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : components.Root) != null ? _ref : BadgeRoot;
@@ -24569,13 +24383,13 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         as: component
       },
       ownerState,
-      className: clsx$1(rootSlotProps == null ? void 0 : rootSlotProps.className, classes.root, className)
+      className: clsx(rootSlotProps == null ? void 0 : rootSlotProps.className, classes.root, className)
     });
     const badgeProps = useSlotProps({
       elementType: BadgeSlot,
       externalSlotProps: badgeSlotProps,
       ownerState,
-      className: clsx$1(classes.badge, badgeSlotProps == null ? void 0 : badgeSlotProps.className)
+      className: clsx(classes.badge, badgeSlotProps == null ? void 0 : badgeSlotProps.className)
     });
     return /*#__PURE__*/jsxRuntime_2(RootSlot, _extends({}, rootProps, {
       children: [children, /*#__PURE__*/jsxRuntime_1(BadgeSlot, _extends({}, badgeProps, {
@@ -24708,7 +24522,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var bottomNavigationClasses$1 = bottomNavigationClasses;
 
   const _excluded$1H = ["children", "className", "component", "onChange", "showLabels", "value"];
-  const useUtilityClasses$1r = ownerState => {
+  const useUtilityClasses$1s = ownerState => {
     const {
       classes
     } = ownerState;
@@ -24747,10 +24561,10 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       component,
       showLabels
     });
-    const classes = useUtilityClasses$1r(ownerState);
+    const classes = useUtilityClasses$1s(ownerState);
     return /*#__PURE__*/jsxRuntime_1(BottomNavigationRoot, _extends({
       as: component,
-      className: clsx$1(classes.root, className),
+      className: clsx(classes.root, className),
       ref: ref,
       ownerState: ownerState
     }, other, {
@@ -24826,7 +24640,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var bottomNavigationActionClasses$1 = bottomNavigationActionClasses;
 
   const _excluded$1G = ["className", "icon", "label", "onChange", "onClick", "selected", "showLabel", "value"];
-  const useUtilityClasses$1q = ownerState => {
+  const useUtilityClasses$1r = ownerState => {
     const {
       classes,
       showLabel,
@@ -24908,7 +24722,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       } = props,
       other = _objectWithoutPropertiesLoose(props, _excluded$1G);
     const ownerState = props;
-    const classes = useUtilityClasses$1q(ownerState);
+    const classes = useUtilityClasses$1r(ownerState);
     const handleChange = event => {
       if (onChange) {
         onChange(event, value);
@@ -24919,7 +24733,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     };
     return /*#__PURE__*/jsxRuntime_2(BottomNavigationActionRoot, _extends({
       ref: ref,
-      className: clsx$1(classes.root, className),
+      className: clsx(classes.root, className),
       focusRipple: true,
       onClick: handleChange,
       ownerState: ownerState
@@ -25100,7 +24914,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var breadcrumbsClasses$1 = breadcrumbsClasses;
 
   const _excluded$1E = ["children", "className", "component", "slots", "slotProps", "expandText", "itemsAfterCollapse", "itemsBeforeCollapse", "maxItems", "separator"];
-  const useUtilityClasses$1p = ownerState => {
+  const useUtilityClasses$1q = ownerState => {
     const {
       classes
     } = ownerState;
@@ -25186,7 +25000,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       maxItems,
       separator
     });
-    const classes = useUtilityClasses$1p(ownerState);
+    const classes = useUtilityClasses$1q(ownerState);
     const collapsedIconSlotProps = useSlotProps({
       elementType: slots.CollapsedIcon,
       externalSlotProps: slotProps.collapsedIcon,
@@ -25241,7 +25055,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       ref: ref,
       component: component,
       color: "text.secondary",
-      className: clsx$1(classes.root, className),
+      className: clsx(classes.root, className),
       ownerState: ownerState
     }, other, {
       children: /*#__PURE__*/jsxRuntime_1(BreadcrumbsOl, {
@@ -25341,7 +25155,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var ButtonGroupContext$1 = ButtonGroupContext;
 
   const _excluded$1D = ["children", "color", "component", "className", "disabled", "disableElevation", "disableFocusRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"];
-  const useUtilityClasses$1o = ownerState => {
+  const useUtilityClasses$1p = ownerState => {
     const {
       color,
       disableElevation,
@@ -25578,7 +25392,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       type,
       variant
     });
-    const classes = useUtilityClasses$1o(ownerState);
+    const classes = useUtilityClasses$1p(ownerState);
     const startIcon = startIconProp && /*#__PURE__*/jsxRuntime_1(ButtonStartIcon, {
       className: classes.startIcon,
       ownerState: ownerState,
@@ -25591,11 +25405,11 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     });
     return /*#__PURE__*/jsxRuntime_2(ButtonRoot, _extends({
       ownerState: ownerState,
-      className: clsx$1(contextProps.className, classes.root, className),
+      className: clsx(contextProps.className, classes.root, className),
       component: component,
       disabled: disabled,
       focusRipple: !disableFocusRipple,
-      focusVisibleClassName: clsx$1(classes.focusVisible, focusVisibleClassName),
+      focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
       ref: ref,
       type: type
     }, other, {
@@ -25722,7 +25536,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       [`& .${buttonGroupClasses$1.grouped}`]: styles[`grouped${capitalize(ownerState.variant)}${capitalize(ownerState.color)}`]
     }, styles.root, styles[ownerState.variant], ownerState.disableElevation === true && styles.disableElevation, ownerState.fullWidth && styles.fullWidth, ownerState.orientation === 'vertical' && styles.vertical];
   };
-  const useUtilityClasses$1n = ownerState => {
+  const useUtilityClasses$1o = ownerState => {
     const {
       classes,
       color,
@@ -25850,7 +25664,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       size,
       variant
     });
-    const classes = useUtilityClasses$1n(ownerState);
+    const classes = useUtilityClasses$1o(ownerState);
     const context = React__namespace.useMemo(() => ({
       className: classes.grouped,
       color,
@@ -25865,7 +25679,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     return /*#__PURE__*/jsxRuntime_1(ButtonGroupRoot, _extends({
       as: component,
       role: "group",
-      className: clsx$1(classes.root, className),
+      className: clsx(classes.root, className),
       ref: ref,
       ownerState: ownerState
     }, other, {
@@ -25959,7 +25773,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var cardClasses$1 = cardClasses;
 
   const _excluded$1B = ["className", "raised"];
-  const useUtilityClasses$1m = ownerState => {
+  const useUtilityClasses$1n = ownerState => {
     const {
       classes
     } = ownerState;
@@ -25990,9 +25804,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const ownerState = _extends({}, props, {
       raised
     });
-    const classes = useUtilityClasses$1m(ownerState);
+    const classes = useUtilityClasses$1n(ownerState);
     return /*#__PURE__*/jsxRuntime_1(CardRoot, _extends({
-      className: clsx$1(classes.root, className),
+      className: clsx(classes.root, className),
       elevation: raised ? 8 : undefined,
       ref: ref,
       ownerState: ownerState
@@ -26039,7 +25853,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var cardActionAreaClasses$1 = cardActionAreaClasses;
 
   const _excluded$1A = ["children", "className", "focusVisibleClassName"];
-  const useUtilityClasses$1l = ownerState => {
+  const useUtilityClasses$1m = ownerState => {
     const {
       classes
     } = ownerState;
@@ -26104,10 +25918,10 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       } = props,
       other = _objectWithoutPropertiesLoose(props, _excluded$1A);
     const ownerState = props;
-    const classes = useUtilityClasses$1l(ownerState);
+    const classes = useUtilityClasses$1m(ownerState);
     return /*#__PURE__*/jsxRuntime_2(CardActionAreaRoot, _extends({
-      className: clsx$1(classes.root, className),
-      focusVisibleClassName: clsx$1(focusVisibleClassName, classes.focusVisible),
+      className: clsx(classes.root, className),
+      focusVisibleClassName: clsx(focusVisibleClassName, classes.focusVisible),
       ref: ref,
       ownerState: ownerState
     }, other, {
@@ -26152,7 +25966,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var cardActionsClasses$1 = cardActionsClasses;
 
   const _excluded$1z = ["disableSpacing", "className"];
-  const useUtilityClasses$1k = ownerState => {
+  const useUtilityClasses$1l = ownerState => {
     const {
       classes,
       disableSpacing
@@ -26195,9 +26009,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const ownerState = _extends({}, props, {
       disableSpacing
     });
-    const classes = useUtilityClasses$1k(ownerState);
+    const classes = useUtilityClasses$1l(ownerState);
     return /*#__PURE__*/jsxRuntime_1(CardActionsRoot, _extends({
-      className: clsx$1(classes.root, className),
+      className: clsx(classes.root, className),
       ownerState: ownerState,
       ref: ref
     }, other));
@@ -26238,7 +26052,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var cardContentClasses$1 = cardContentClasses;
 
   const _excluded$1y = ["className", "component"];
-  const useUtilityClasses$1j = ownerState => {
+  const useUtilityClasses$1k = ownerState => {
     const {
       classes
     } = ownerState;
@@ -26272,10 +26086,10 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const ownerState = _extends({}, props, {
       component
     });
-    const classes = useUtilityClasses$1j(ownerState);
+    const classes = useUtilityClasses$1k(ownerState);
     return /*#__PURE__*/jsxRuntime_1(CardContentRoot, _extends({
       as: component,
-      className: clsx$1(classes.root, className),
+      className: clsx(classes.root, className),
       ownerState: ownerState,
       ref: ref
     }, other));
@@ -26316,7 +26130,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var cardHeaderClasses$1 = cardHeaderClasses;
 
   const _excluded$1x = ["action", "avatar", "className", "component", "disableTypography", "subheader", "subheaderTypographyProps", "title", "titleTypographyProps"];
-  const useUtilityClasses$1i = ownerState => {
+  const useUtilityClasses$1j = ownerState => {
     const {
       classes
     } = ownerState;
@@ -26390,7 +26204,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       component,
       disableTypography
     });
-    const classes = useUtilityClasses$1i(ownerState);
+    const classes = useUtilityClasses$1j(ownerState);
     let title = titleProp;
     if (title != null && title.type !== Typography$1 && !disableTypography) {
       title = /*#__PURE__*/jsxRuntime_1(Typography$1, _extends({
@@ -26415,7 +26229,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       }));
     }
     return /*#__PURE__*/jsxRuntime_2(CardHeaderRoot, _extends({
-      className: clsx$1(classes.root, className),
+      className: clsx(classes.root, className),
       as: component,
       ref: ref,
       ownerState: ownerState
@@ -26505,7 +26319,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var cardMediaClasses$1 = cardMediaClasses;
 
   const _excluded$1w = ["children", "className", "component", "image", "src", "style"];
-  const useUtilityClasses$1h = ownerState => {
+  const useUtilityClasses$1i = ownerState => {
     const {
       classes,
       isMediaComponent,
@@ -26567,9 +26381,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       isMediaComponent,
       isImageComponent: IMAGE_COMPONENTS.indexOf(component) !== -1
     });
-    const classes = useUtilityClasses$1h(ownerState);
+    const classes = useUtilityClasses$1i(ownerState);
     return /*#__PURE__*/jsxRuntime_1(CardMediaRoot, _extends({
-      className: clsx$1(classes.root, className),
+      className: clsx(classes.root, className),
       as: component,
       role: !isMediaComponent && image ? 'img' : undefined,
       ref: ref,
@@ -26636,7 +26450,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   generateUtilityClasses('PrivateSwitchBase', ['root', 'checked', 'disabled', 'input', 'edgeStart', 'edgeEnd']);
 
   const _excluded$1v = ["autoFocus", "checked", "checkedIcon", "className", "defaultChecked", "disabled", "disableFocusRipple", "edge", "icon", "id", "inputProps", "inputRef", "name", "onBlur", "onChange", "onFocus", "readOnly", "required", "tabIndex", "type", "value"];
-  const useUtilityClasses$1g = ownerState => {
+  const useUtilityClasses$1h = ownerState => {
     const {
       classes,
       checked,
@@ -26748,10 +26562,10 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       disableFocusRipple,
       edge
     });
-    const classes = useUtilityClasses$1g(ownerState);
+    const classes = useUtilityClasses$1h(ownerState);
     return /*#__PURE__*/jsxRuntime_2(SwitchBaseRoot, _extends({
       component: "span",
-      className: clsx$1(classes.root, className),
+      className: clsx(classes.root, className),
       centerRipple: true,
       focusRipple: !disableFocusRipple,
       disabled: disabled,
@@ -26910,7 +26724,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var checkboxClasses$1 = checkboxClasses;
 
   const _excluded$1u = ["checkedIcon", "color", "icon", "indeterminate", "indeterminateIcon", "inputProps", "size", "className"];
-  const useUtilityClasses$1f = ownerState => {
+  const useUtilityClasses$1g = ownerState => {
     const {
       classes,
       indeterminate,
@@ -26981,7 +26795,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       indeterminate,
       size
     });
-    const classes = useUtilityClasses$1f(ownerState);
+    const classes = useUtilityClasses$1g(ownerState);
     return /*#__PURE__*/jsxRuntime_1(CheckboxRoot, _extends({
       type: "checkbox",
       inputProps: _extends({
@@ -26995,7 +26809,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       }),
       ownerState: ownerState,
       ref: ref,
-      className: clsx$1(classes.root, className)
+      className: clsx(classes.root, className)
     }, other, {
       classes: classes
     }));
@@ -27141,7 +26955,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     stroke-dashoffset: -125px;
   }
 `));
-  const useUtilityClasses$1e = ownerState => {
+  const useUtilityClasses$1f = ownerState => {
     const {
       classes,
       variant,
@@ -27243,7 +27057,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       value,
       variant
     });
-    const classes = useUtilityClasses$1e(ownerState);
+    const classes = useUtilityClasses$1f(ownerState);
     const circleStyle = {};
     const rootStyle = {};
     const rootProps = {};
@@ -27255,7 +27069,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       rootStyle.transform = 'rotate(-90deg)';
     }
     return /*#__PURE__*/jsxRuntime_1(CircularProgressRoot, _extends({
-      className: clsx$1(classes.root, className),
+      className: clsx(classes.root, className),
       style: _extends({
         width: size,
         height: size
@@ -27541,8 +27355,25 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     };
   }
 
+  function getModalUtilityClass(slot) {
+    return generateUtilityClass('MuiModal', slot);
+  }
+  const modalClasses = generateUtilityClasses('MuiModal', ['root', 'hidden', 'backdrop']);
+  var modalClasses$1 = modalClasses;
+
   const _excluded$1s = ["BackdropComponent", "BackdropProps", "classes", "className", "closeAfterTransition", "children", "container", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "onBackdropClick", "onClose", "open", "slotProps", "slots", "theme"];
-  const modalClasses = modalClasses$1;
+  const useUtilityClasses$1e = ownerState => {
+    const {
+      open,
+      exited,
+      classes
+    } = ownerState;
+    const slots = {
+      root: ['root', !open && exited && 'hidden'],
+      backdrop: ['backdrop']
+    };
+    return composeClasses(slots, getModalUtilityClass, classes);
+  };
   const ModalRoot = styled$1('div', {
     name: 'MuiModal',
     slot: 'Root',
@@ -27597,7 +27428,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const {
         BackdropComponent = ModalBackdrop,
         BackdropProps,
-        classes,
         className,
         closeAfterTransition = false,
         children,
@@ -27614,17 +27444,13 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         hideBackdrop = false,
         keepMounted = false,
         onBackdropClick,
-        onClose,
         open,
         slotProps,
-        slots,
+        slots
         // eslint-disable-next-line react/prop-types
-        theme
       } = props,
       other = _objectWithoutPropertiesLoose(props, _excluded$1s);
-    const [exited, setExited] = React__namespace.useState(true);
-    const commonProps = {
-      container,
+    const propsWithDefaults = _extends({}, props, {
       closeAfterTransition,
       disableAutoFocus,
       disableEnforceFocus,
@@ -27633,40 +27459,90 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       disableRestoreFocus,
       disableScrollLock,
       hideBackdrop,
-      keepMounted,
-      onBackdropClick,
-      onClose,
-      open
-    };
-    const ownerState = _extends({}, props, commonProps, {
+      keepMounted
+    });
+    const {
+      getRootProps,
+      getBackdropProps,
+      getTransitionProps,
+      portalRef,
+      isTopModal,
+      exited,
+      hasTransition
+    } = useModal(_extends({}, propsWithDefaults, {
+      rootRef: ref
+    }));
+    const ownerState = _extends({}, propsWithDefaults, {
       exited
     });
+    const classes = useUtilityClasses$1e(ownerState);
+    const childProps = {};
+    if (children.props.tabIndex === undefined) {
+      childProps.tabIndex = '-1';
+    }
+
+    // It's a Transition like component
+    if (hasTransition) {
+      const {
+        onEnter,
+        onExited
+      } = getTransitionProps();
+      childProps.onEnter = onEnter;
+      childProps.onExited = onExited;
+    }
     const RootSlot = (_ref = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : components.Root) != null ? _ref : ModalRoot;
     const BackdropSlot = (_ref2 = (_slots$backdrop = slots == null ? void 0 : slots.backdrop) != null ? _slots$backdrop : components.Backdrop) != null ? _ref2 : BackdropComponent;
     const rootSlotProps = (_slotProps$root = slotProps == null ? void 0 : slotProps.root) != null ? _slotProps$root : componentsProps.root;
     const backdropSlotProps = (_slotProps$backdrop = slotProps == null ? void 0 : slotProps.backdrop) != null ? _slotProps$backdrop : componentsProps.backdrop;
-    return /*#__PURE__*/jsxRuntime_1(Modal$2, _extends({
-      slots: {
-        root: RootSlot,
-        backdrop: BackdropSlot
+    const rootProps = useSlotProps({
+      elementType: RootSlot,
+      externalSlotProps: rootSlotProps,
+      externalForwardedProps: other,
+      getSlotProps: getRootProps,
+      additionalProps: {
+        ref,
+        as: component
       },
-      slotProps: {
-        root: () => _extends({}, resolveComponentProps(rootSlotProps, ownerState), !isHostComponent(RootSlot) && {
-          as: component,
-          theme
-        }, {
-          className: clsx$1(className, rootSlotProps == null ? void 0 : rootSlotProps.className, classes == null ? void 0 : classes.root, !ownerState.open && ownerState.exited && (classes == null ? void 0 : classes.hidden))
-        }),
-        backdrop: () => _extends({}, BackdropProps, resolveComponentProps(backdropSlotProps, ownerState), {
-          className: clsx$1(backdropSlotProps == null ? void 0 : backdropSlotProps.className, BackdropProps == null ? void 0 : BackdropProps.className, classes == null ? void 0 : classes.backdrop)
-        })
+      ownerState,
+      className: clsx(className, rootSlotProps == null ? void 0 : rootSlotProps.className, classes == null ? void 0 : classes.root, !ownerState.open && ownerState.exited && (classes == null ? void 0 : classes.hidden))
+    });
+    const backdropProps = useSlotProps({
+      elementType: BackdropSlot,
+      externalSlotProps: backdropSlotProps,
+      additionalProps: BackdropProps,
+      getSlotProps: otherHandlers => {
+        return getBackdropProps(_extends({}, otherHandlers, {
+          onClick: e => {
+            if (onBackdropClick) {
+              onBackdropClick(e);
+            }
+            if (otherHandlers != null && otherHandlers.onClick) {
+              otherHandlers.onClick(e);
+            }
+          }
+        }));
       },
-      onTransitionEnter: () => setExited(false),
-      onTransitionExited: () => setExited(true),
-      ref: ref
-    }, other, commonProps, {
-      children: children
-    }));
+      className: clsx(backdropSlotProps == null ? void 0 : backdropSlotProps.className, BackdropProps == null ? void 0 : BackdropProps.className, classes == null ? void 0 : classes.backdrop),
+      ownerState
+    });
+    if (!keepMounted && !open && (!hasTransition || exited)) {
+      return null;
+    }
+    return /*#__PURE__*/jsxRuntime_1(Portal, {
+      ref: portalRef,
+      container: container,
+      disablePortal: disablePortal,
+      children: /*#__PURE__*/jsxRuntime_2(RootSlot, _extends({}, rootProps, {
+        children: [!hideBackdrop && BackdropComponent ? /*#__PURE__*/jsxRuntime_1(BackdropSlot, _extends({}, backdropProps)) : null, /*#__PURE__*/jsxRuntime_1(FocusTrap, {
+          disableEnforceFocus: disableEnforceFocus,
+          disableAutoFocus: disableAutoFocus,
+          disableRestoreFocus: disableRestoreFocus,
+          isEnabled: isTopModal,
+          open: open,
+          children: /*#__PURE__*/React__namespace.cloneElement(children, childProps)
+        })]
+      }))
+    });
   });
   Modal.propTypes /* remove-proptypes */ = {
     // ----------------------------- Warning --------------------------------
@@ -28057,7 +27933,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       };
     }, [ariaLabelledby]);
     return /*#__PURE__*/jsxRuntime_1(DialogRoot, _extends({
-      className: clsx$1(classes.root, className),
+      className: clsx(classes.root, className),
       closeAfterTransition: true,
       components: {
         Backdrop: DialogBackdrop
@@ -28082,7 +27958,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         role: "presentation"
       }, TransitionProps, {
         children: /*#__PURE__*/jsxRuntime_1(DialogContainer, {
-          className: clsx$1(classes.container),
+          className: clsx(classes.container),
           onMouseDown: handleMouseDown,
           ownerState: ownerState,
           children: /*#__PURE__*/jsxRuntime_1(DialogPaper, _extends({
@@ -28092,7 +27968,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
             "aria-describedby": ariaDescribedby,
             "aria-labelledby": ariaLabelledby
           }, PaperProps, {
-            className: clsx$1(classes.paper, PaperProps.className),
+            className: clsx(classes.paper, PaperProps.className),
             ownerState: ownerState,
             children: /*#__PURE__*/jsxRuntime_1(DialogContext$1.Provider, {
               value: dialogContextValue,
@@ -28287,7 +28163,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     });
     const classes = useUtilityClasses$1c(ownerState);
     return /*#__PURE__*/jsxRuntime_1(DialogActionsRoot, _extends({
-      className: clsx$1(classes.root, className),
+      className: clsx(classes.root, className),
       ownerState: ownerState,
       ref: ref
     }, other));
@@ -28386,7 +28262,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     });
     const classes = useUtilityClasses$1b(ownerState);
     return /*#__PURE__*/jsxRuntime_1(DialogContentRoot, _extends({
-      className: clsx$1(classes.root, className),
+      className: clsx(classes.root, className),
       ownerState: ownerState,
       ref: ref
     }, other));
@@ -28459,7 +28335,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       color: "text.secondary",
       ref: ref,
       ownerState: ownerState,
-      className: clsx$1(classes.root, className)
+      className: clsx(classes.root, className)
     }, props, {
       classes: classes
     }));
@@ -28523,7 +28399,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     } = React__namespace.useContext(DialogContext$1);
     return /*#__PURE__*/jsxRuntime_1(DialogTitleRoot, _extends({
       component: "h2",
-      className: clsx$1(classes.root, className),
+      className: clsx(classes.root, className),
       ownerState: ownerState,
       ref: ref,
       variant: "h6",
@@ -28720,7 +28596,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const classes = useUtilityClasses$18(ownerState);
     return /*#__PURE__*/jsxRuntime_1(DividerRoot, _extends({
       as: component,
-      className: clsx$1(classes.root, className),
+      className: clsx(classes.root, className),
       role: role,
       ref: ref,
       ownerState: ownerState
@@ -29121,7 +28997,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var drawerClasses$1 = drawerClasses;
 
   const _excluded$1k = ["BackdropProps"],
-    _excluded2$8 = ["anchor", "BackdropProps", "children", "className", "elevation", "hideBackdrop", "ModalProps", "onClose", "open", "PaperProps", "SlideProps", "TransitionComponent", "transitionDuration", "variant"];
+    _excluded2$9 = ["anchor", "BackdropProps", "children", "className", "elevation", "hideBackdrop", "ModalProps", "onClose", "open", "PaperProps", "SlideProps", "TransitionComponent", "transitionDuration", "variant"];
   const overridesResolver$5 = (props, styles) => {
     const {
       ownerState
@@ -29261,7 +29137,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         variant = 'temporary'
       } = props,
       ModalProps = _objectWithoutPropertiesLoose(props.ModalProps, _excluded$1k),
-      other = _objectWithoutPropertiesLoose(props, _excluded2$8);
+      other = _objectWithoutPropertiesLoose(props, _excluded2$9);
 
     // Let's assume that the Drawer will always be rendered on user space.
     // We use this state is order to skip the appear transition during the
@@ -29283,13 +29159,13 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       elevation: variant === 'temporary' ? elevation : 0,
       square: true
     }, PaperProps, {
-      className: clsx$1(classes.paper, PaperProps.className),
+      className: clsx(classes.paper, PaperProps.className),
       ownerState: ownerState,
       children: children
     }));
     if (variant === 'permanent') {
       return /*#__PURE__*/jsxRuntime_1(DrawerDockedRoot, _extends({
-        className: clsx$1(classes.root, classes.docked, className),
+        className: clsx(classes.root, classes.docked, className),
         ownerState: ownerState,
         ref: ref
       }, other, {
@@ -29306,7 +29182,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     }));
     if (variant === 'persistent') {
       return /*#__PURE__*/jsxRuntime_1(DrawerDockedRoot, _extends({
-        className: clsx$1(classes.root, classes.docked, className),
+        className: clsx(classes.root, classes.docked, className),
         ownerState: ownerState,
         ref: ref
       }, other, {
@@ -29319,7 +29195,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       BackdropProps: _extends({}, BackdropProps, BackdropPropsProp, {
         transitionDuration
       }),
-      className: clsx$1(classes.root, classes.modal, className),
+      className: clsx(classes.root, classes.modal, className),
       open: open,
       ownerState: ownerState,
       onClose: onClose,
@@ -29372,8 +29248,10 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     ModalProps: PropTypes.object,
     /**
      * 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: PropTypes.func,
     /**
@@ -29555,11 +29433,11 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     });
     const classes = useUtilityClasses$16(ownerState);
     return /*#__PURE__*/jsxRuntime_1(FabRoot, _extends({
-      className: clsx$1(classes.root, className),
+      className: clsx(classes.root, className),
       component: component,
       disabled: disabled,
       focusRipple: !disableFocusRipple,
-      focusVisibleClassName: clsx$1(classes.focusVisible, focusVisibleClassName),
+      focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
       ownerState: ownerState,
       ref: ref
     }, other, {
@@ -30243,7 +30121,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       children: /*#__PURE__*/jsxRuntime_1(FormControlRoot, _extends({
         as: component,
         ownerState: ownerState,
-        className: clsx$1(classes.root, className),
+        className: clsx(classes.root, className),
         ref: ref
       }, other, {
         children: children
@@ -30523,12 +30401,12 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       label = /*#__PURE__*/jsxRuntime_1(Typography$1, _extends({
         component: "span"
       }, typographySlotProps, {
-        className: clsx$1(classes.label, typographySlotProps == null ? void 0 : typographySlotProps.className),
+        className: clsx(classes.label, typographySlotProps == null ? void 0 : typographySlotProps.className),
         children: label
       }));
     }
     return /*#__PURE__*/jsxRuntime_2(FormControlLabelRoot, _extends({
-      className: clsx$1(classes.root, className),
+      className: clsx(classes.root, className),
       ownerState: ownerState,
       ref: ref
     }, other, {
@@ -30690,7 +30568,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     });
     const classes = useUtilityClasses$12(ownerState);
     return /*#__PURE__*/jsxRuntime_1(FormGroupRoot, _extends({
-      className: clsx$1(classes.root, className),
+      className: clsx(classes.root, className),
       ownerState: ownerState,
       ref: ref
     }, other));
@@ -30812,7 +30690,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     return /*#__PURE__*/jsxRuntime_1(FormHelperTextRoot, _extends({
       as: component,
       ownerState: ownerState,
-      className: clsx$1(classes.root, className),
+      className: clsx(classes.root, className),
       ref: ref
     }, other, {
       children: children === ' ' ? // notranslate needed while Google Translate will not fix zero-width space issue
@@ -30973,7 +30851,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     return /*#__PURE__*/jsxRuntime_2(FormLabelRoot, _extends({
       as: component,
       ownerState: ownerState,
-      className: clsx$1(classes.root, className),
+      className: clsx(classes.root, className),
       ref: ref
     }, other, {
       children: [children, fcs.required && /*#__PURE__*/jsxRuntime_2(AsteriskComponent, {
@@ -31459,7 +31337,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       value: columns,
       children: /*#__PURE__*/jsxRuntime_1(GridRoot, _extends({
         ownerState: ownerState,
-        className: clsx$1(classes.root, className),
+        className: clsx(classes.root, className),
         as: component,
         ref: ref
       }, otherFiltered))
@@ -32341,7 +32219,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     });
     const classes = useUtilityClasses$_(ownerState);
     return /*#__PURE__*/jsxRuntime_1(HiddenCssRoot, {
-      className: clsx$1(classes.root, className),
+      className: clsx(classes.root, className),
       ownerState: ownerState,
       children: children
     });
@@ -32615,7 +32493,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const classes = useUtilityClasses$Z(ownerState);
     return /*#__PURE__*/jsxRuntime_1(IconRoot, _extends({
       as: Component,
-      className: clsx$1(baseClassName,
+      className: clsx(baseClassName,
       // Prevent the translation of the text content.
       // The font relies on the exact text content to render the icon.
       'notranslate', classes.root, className),
@@ -32767,7 +32645,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const classes = useUtilityClasses$Y(ownerState);
     return /*#__PURE__*/jsxRuntime_1(ImageListRoot, _extends({
       as: component,
-      className: clsx$1(classes.root, classes[variant], className),
+      className: clsx(classes.root, classes[variant], className),
       ref: ref,
       style: style,
       ownerState: ownerState
@@ -32924,7 +32802,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const classes = useUtilityClasses$X(ownerState);
     return /*#__PURE__*/jsxRuntime_1(ImageListItemRoot, _extends({
       as: component,
-      className: clsx$1(classes.root, classes[variant], className),
+      className: clsx(classes.root, classes[variant], className),
       ref: ref,
       style: _extends({
         height,
@@ -32945,7 +32823,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         }
         if (child.type === 'img' || isMuiElement(child, ['Image'])) {
           return /*#__PURE__*/React__namespace.cloneElement(child, {
-            className: clsx$1(classes.img, child.props.className)
+            className: clsx(classes.img, child.props.className)
           });
         }
         return child;
@@ -33143,7 +33021,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const classes = useUtilityClasses$W(ownerState);
     return /*#__PURE__*/jsxRuntime_2(ImageListItemBarRoot, _extends({
       ownerState: ownerState,
-      className: clsx$1(classes.root, className),
+      className: clsx(classes.root, className),
       ref: ref
     }, other, {
       children: [/*#__PURE__*/jsxRuntime_2(ImageListItemBarTitleWrap, {
@@ -33638,7 +33516,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       children: /*#__PURE__*/jsxRuntime_1(InputAdornmentRoot, _extends({
         as: component,
         ownerState: ownerState,
-        className: clsx$1(classes.root, className),
+        className: clsx(classes.root, className),
         ref: ref
       }, other, {
         children: typeof children === 'string' && !disableTypography ? /*#__PURE__*/jsxRuntime_1(Typography$1, {
@@ -33835,7 +33713,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       "data-shrink": shrink,
       ownerState: ownerState,
       ref: ref,
-      className: clsx$1(classes.root, className)
+      className: clsx(classes.root, className)
     }, other, {
       classes: classes
     }));
@@ -34187,7 +34065,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       }
     }
     return /*#__PURE__*/jsxRuntime_2(LinearProgressRoot, _extends({
-      className: clsx$1(classes.root, className),
+      className: clsx(classes.root, className),
       ownerState: ownerState,
       role: "progressbar"
     }, rootProps, {
@@ -34406,7 +34284,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const classes = useUtilityClasses$R(ownerState);
     return /*#__PURE__*/jsxRuntime_1(LinkRoot, _extends({
       color: color,
-      className: clsx$1(classes.root, className),
+      className: clsx(classes.root, className),
       classes: TypographyClasses,
       component: component,
       onBlur: handleBlur,
@@ -34552,7 +34430,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       value: context,
       children: /*#__PURE__*/jsxRuntime_2(ListRoot, _extends({
         as: component,
-        className: clsx$1(classes.root, className),
+        className: clsx(classes.root, className),
         ref: ref,
         ownerState: ownerState
       }, other, {
@@ -34753,9 +34631,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         // `ButtonBase` processes `href` or `to` if `component` is set to 'button'
         ,
         component: (other.href || other.to) && component === 'div' ? 'button' : component,
-        focusVisibleClassName: clsx$1(classes.focusVisible, focusVisibleClassName),
+        focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
         ownerState: ownerState,
-        className: clsx$1(classes.root, className)
+        className: clsx(classes.root, className)
       }, other, {
         classes: classes,
         children: children
@@ -34897,7 +34775,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     });
     const classes = useUtilityClasses$O(ownerState);
     return /*#__PURE__*/jsxRuntime_1(ListItemSecondaryActionRoot, _extends({
-      className: clsx$1(classes.root, className),
+      className: clsx(classes.root, className),
       ownerState: ownerState,
       ref: ref
     }, other));
@@ -34928,7 +34806,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var ListItemSecondaryAction$1 = ListItemSecondaryAction;
 
   const _excluded$X = ["className"],
-    _excluded2$7 = ["alignItems", "autoFocus", "button", "children", "className", "component", "components", "componentsProps", "ContainerComponent", "ContainerProps", "dense", "disabled", "disableGutters", "disablePadding", "divider", "focusVisibleClassName", "secondaryAction", "selected", "slotProps", "slots"];
+    _excluded2$8 = ["alignItems", "autoFocus", "button", "children", "className", "component", "components", "componentsProps", "ContainerComponent", "ContainerProps", "dense", "disabled", "disableGutters", "disablePadding", "divider", "focusVisibleClassName", "secondaryAction", "selected", "slotProps", "slots"];
   const overridesResolver$2 = (props, styles) => {
     const {
       ownerState
@@ -35070,7 +34948,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         slots = {}
       } = props,
       ContainerProps = _objectWithoutPropertiesLoose(props.ContainerProps, _excluded$X),
-      other = _objectWithoutPropertiesLoose(props, _excluded2$7);
+      other = _objectWithoutPropertiesLoose(props, _excluded2$8);
     const context = React__namespace.useContext(ListContext$1);
     const childContext = React__namespace.useMemo(() => ({
       dense: dense || context.dense || false,
@@ -35108,13 +34986,13 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const Root = slots.root || components.Root || ListItemRoot;
     const rootProps = slotProps.root || componentsProps.root || {};
     const componentProps = _extends({
-      className: clsx$1(classes.root, rootProps.className, className),
+      className: clsx(classes.root, rootProps.className, className),
       disabled
     }, other);
     let Component = componentProp || 'li';
     if (button) {
       componentProps.component = componentProp || 'div';
-      componentProps.focusVisibleClassName = clsx$1(listItemClasses$1.focusVisible, focusVisibleClassName);
+      componentProps.focusVisibleClassName = clsx(listItemClasses$1.focusVisible, focusVisibleClassName);
       Component = ButtonBase$1;
     }
 
@@ -35135,7 +35013,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         value: childContext,
         children: /*#__PURE__*/jsxRuntime_2(ListItemContainer, _extends({
           as: ContainerComponent,
-          className: clsx$1(classes.container, ContainerClassName),
+          className: clsx(classes.container, ContainerClassName),
           ref: handleRef,
           ownerState: ownerState
         }, ContainerProps, {
@@ -35379,7 +35257,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     });
     const classes = useUtilityClasses$M(ownerState);
     return /*#__PURE__*/jsxRuntime_1(ListItemAvatarRoot, _extends({
-      className: clsx$1(classes.root, className),
+      className: clsx(classes.root, className),
       ownerState: ownerState,
       ref: ref
     }, other));
@@ -35464,7 +35342,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     });
     const classes = useUtilityClasses$L(ownerState);
     return /*#__PURE__*/jsxRuntime_1(ListItemIconRoot, _extends({
-      className: clsx$1(classes.root, className),
+      className: clsx(classes.root, className),
       ownerState: ownerState,
       ref: ref
     }, other));
@@ -35592,7 +35470,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       }));
     }
     return /*#__PURE__*/jsxRuntime_2(ListItemTextRoot, _extends({
-      className: clsx$1(classes.root, className),
+      className: clsx(classes.root, className),
       ownerState: ownerState,
       ref: ref
     }, other, {
@@ -35932,7 +35810,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var popoverClasses$1 = popoverClasses;
 
   const _excluded$S = ["onEntering"],
-    _excluded2$6 = ["action", "anchorEl", "anchorOrigin", "anchorPosition", "anchorReference", "children", "className", "container", "elevation", "marginThreshold", "open", "PaperProps", "slots", "slotProps", "transformOrigin", "TransitionComponent", "transitionDuration", "TransitionProps"],
+    _excluded2$7 = ["action", "anchorEl", "anchorOrigin", "anchorPosition", "anchorReference", "children", "className", "container", "elevation", "marginThreshold", "open", "PaperProps", "slots", "slotProps", "transformOrigin", "TransitionComponent", "transitionDuration", "TransitionProps"],
     _excluded3$1 = ["slotProps"];
   function getOffsetTop(rect, vertical) {
     let offset = 0;
@@ -36029,7 +35907,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         } = {}
       } = props,
       TransitionProps = _objectWithoutPropertiesLoose(props.TransitionProps, _excluded$S),
-      other = _objectWithoutPropertiesLoose(props, _excluded2$6);
+      other = _objectWithoutPropertiesLoose(props, _excluded2$7);
     const externalPaperSlotProps = (_slotProps$paper = slotProps == null ? void 0 : slotProps.paper) != null ? _slotProps$paper : PaperPropsProp;
     const paperRef = React__namespace.useRef();
     const handlePaperRef = useForkRef(paperRef, externalPaperSlotProps.ref);
@@ -36217,7 +36095,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         ref: handlePaperRef
       },
       ownerState,
-      className: clsx$1(classes.paper, externalPaperSlotProps == null ? void 0 : externalPaperSlotProps.className)
+      className: clsx(classes.paper, externalPaperSlotProps == null ? void 0 : externalPaperSlotProps.className)
     });
     const _useSlotProps = useSlotProps({
         elementType: RootSlot,
@@ -36234,7 +36112,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
           open
         },
         ownerState,
-        className: clsx$1(classes.root, className)
+        className: clsx(classes.root, className)
       }),
       {
         slotProps: rootSlotPropsProp
@@ -36436,7 +36314,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var menuClasses$1 = menuClasses;
 
   const _excluded$R = ["onEntering"],
-    _excluded2$5 = ["autoFocus", "children", "className", "disableAutoFocusItem", "MenuListProps", "onClose", "open", "PaperProps", "PopoverClasses", "transitionDuration", "TransitionProps", "variant", "slots", "slotProps"];
+    _excluded2$6 = ["autoFocus", "children", "className", "disableAutoFocusItem", "MenuListProps", "onClose", "open", "PaperProps", "PopoverClasses", "transitionDuration", "TransitionProps", "variant", "slots", "slotProps"];
   const RTL_ORIGIN = {
     vertical: 'top',
     horizontal: 'right'
@@ -36507,7 +36385,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         slotProps = {}
       } = props,
       TransitionProps = _objectWithoutPropertiesLoose(props.TransitionProps, _excluded$R),
-      other = _objectWithoutPropertiesLoose(props, _excluded2$5);
+      other = _objectWithoutPropertiesLoose(props, _excluded2$6);
     const theme = useTheme();
     const isRtl = theme.direction === 'rtl';
     const ownerState = _extends({}, props, {
@@ -36611,7 +36489,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         autoFocusItem: autoFocusItem,
         variant: variant
       }, MenuListProps, {
-        className: clsx$1(classes.list, MenuListProps.className),
+        className: clsx(classes.list, MenuListProps.className),
         children: children
       }))
     }));
@@ -36886,8 +36764,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         role: role,
         tabIndex: tabIndex,
         component: component,
-        focusVisibleClassName: clsx$1(classes.focusVisible, focusVisibleClassName),
-        className: clsx$1(classes.root, className)
+        focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
+        className: clsx(classes.root, className)
       }, other, {
         ownerState: ownerState,
         classes: classes
@@ -37102,7 +36980,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     return /*#__PURE__*/jsxRuntime_2(MobileStepperRoot, _extends({
       square: true,
       elevation: 0,
-      className: clsx$1(classes.root, className),
+      className: clsx(classes.root, className),
       ref: ref,
       ownerState: ownerState
     }, other, {
@@ -37112,7 +36990,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         ownerState: ownerState,
         className: classes.dots,
         children: [...new Array(steps)].map((_, index) => /*#__PURE__*/jsxRuntime_1(MobileStepperDot, {
-          className: clsx$1(classes.dot, index === activeStep && classes.dotActive),
+          className: clsx(classes.dot, index === activeStep && classes.dotActive),
           ownerState: ownerState,
           dotActive: index === activeStep
         }, index))
@@ -37321,7 +37199,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     return /*#__PURE__*/jsxRuntime_2(React__namespace.Fragment, {
       children: [/*#__PURE__*/jsxRuntime_1(NativeSelectSelect, _extends({
         ownerState: ownerState,
-        className: clsx$1(classes.select, className),
+        className: clsx(classes.select, className),
         disabled: disabled,
         ref: inputRef || ref
       }, other)), props.multiple ? null : /*#__PURE__*/jsxRuntime_1(NativeSelectIcon, {
@@ -37390,7 +37268,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var NativeSelectInput$1 = NativeSelectInput;
 
   const _excluded$N = ["className", "children", "classes", "IconComponent", "input", "inputProps", "variant"],
-    _excluded2$4 = ["root"];
+    _excluded2$5 = ["root"];
   const useUtilityClasses$E = ownerState => {
     const {
       classes
@@ -37428,7 +37306,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       classes: classesProp
     });
     const classes = useUtilityClasses$E(ownerState);
-    const otherClasses = _objectWithoutPropertiesLoose(classesProp, _excluded2$4);
+    const otherClasses = _objectWithoutPropertiesLoose(classesProp, _excluded2$5);
     return /*#__PURE__*/jsxRuntime_1(React__namespace.Fragment, {
       children: /*#__PURE__*/React__namespace.cloneElement(input, _extends({
         // Most of the logic is implemented in `NativeSelectInput`.
@@ -37443,7 +37321,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         }, inputProps, input ? input.props.inputProps : {}),
         ref
       }, other, {
-        className: clsx$1(classes.root, input.props.className, className)
+        className: clsx(classes.root, input.props.className, className)
       }))
     });
   });
@@ -38333,14 +38211,14 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     return type === 'start-ellipsis' || type === 'end-ellipsis' ? /*#__PURE__*/jsxRuntime_1(PaginationItemEllipsis, {
       ref: ref,
       ownerState: ownerState,
-      className: clsx$1(classes.root, className),
+      className: clsx(classes.root, className),
       children: "\u2026"
     }) : /*#__PURE__*/jsxRuntime_2(PaginationItemPage, _extends({
       ref: ref,
       ownerState: ownerState,
       component: component,
       disabled: disabled,
-      className: clsx$1(classes.root, className)
+      className: clsx(classes.root, className)
     }, other, {
       children: [type === 'page' && page, Icon ? /*#__PURE__*/jsxRuntime_1(PaginationItemPageIcon, {
         as: Icon,
@@ -38535,7 +38413,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const classes = useUtilityClasses$B(ownerState);
     return /*#__PURE__*/jsxRuntime_1(PaginationRoot, _extends({
       "aria-label": "pagination navigation",
-      className: clsx$1(classes.root, className),
+      className: clsx(classes.root, className),
       ownerState: ownerState,
       ref: ref
     }, other, {
@@ -38873,7 +38751,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       checked: checked,
       onChange: onChange,
       ref: ref,
-      className: clsx$1(classes.root, className)
+      className: clsx(classes.root, className)
     }, other));
   });
   Radio.propTypes /* remove-proptypes */ = {
@@ -39065,7 +38943,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var ratingClasses$1 = ratingClasses;
 
   const _excluded$F = ["value"],
-    _excluded2$3 = ["className", "defaultValue", "disabled", "emptyIcon", "emptyLabelText", "getLabelText", "highlightSelectedOnly", "icon", "IconContainerComponent", "max", "name", "onChange", "onChangeActive", "onMouseLeave", "onMouseMove", "precision", "readOnly", "size", "value"];
+    _excluded2$4 = ["className", "defaultValue", "disabled", "emptyIcon", "emptyLabelText", "getLabelText", "highlightSelectedOnly", "icon", "IconContainerComponent", "max", "name", "onChange", "onChangeActive", "onMouseLeave", "onMouseMove", "precision", "readOnly", "size", "value"];
   function clamp$1(value, min, max) {
     if (value < min) {
       return min;
@@ -39247,7 +39125,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const container = /*#__PURE__*/jsxRuntime_1(RatingIcon, {
       as: IconContainerComponent,
       value: itemValue,
-      className: clsx$1(classes.icon, isFilled ? classes.iconFilled : classes.iconEmpty, isHovered && classes.iconHover, isFocused && classes.iconFocus, isActive && classes.iconActive),
+      className: clsx(classes.icon, isFilled ? classes.iconFilled : classes.iconEmpty, isHovered && classes.iconHover, isFocused && classes.iconFocus, isActive && classes.iconActive),
       ownerState: _extends({}, ownerState, {
         iconEmpty: !isFilled,
         iconFilled: isFilled,
@@ -39346,7 +39224,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         size = 'medium',
         value: valueProp
       } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded2$3);
+      other = _objectWithoutPropertiesLoose(props, _excluded2$4);
     const name = useId(nameProp);
     const [valueDerived, setValueState] = useControlled({
       controlled: valueProp,
@@ -39494,7 +39372,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       ref: handleRef,
       onMouseMove: handleMouseMove,
       onMouseLeave: handleMouseLeave,
-      className: clsx$1(classes.root, className, readOnly && 'MuiRating-readOnly'),
+      className: clsx(classes.root, className, readOnly && 'MuiRating-readOnly'),
       ownerState: ownerState,
       role: readOnly ? 'img' : null,
       "aria-label": readOnly ? getLabelText(value) : null
@@ -39525,7 +39403,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         if (precision < 1) {
           const items = Array.from(new Array(1 / precision));
           return /*#__PURE__*/jsxRuntime_1(RatingDecimal, {
-            className: clsx$1(classes.decimal, isActive && classes.iconActive),
+            className: clsx(classes.decimal, isActive && classes.iconActive),
             ownerState: ownerState,
             iconActive: isActive,
             children: items.map(($, indexDecimal) => {
@@ -39550,7 +39428,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
           itemValue: itemValue
         }), itemValue);
       }), !readOnly && !disabled && /*#__PURE__*/jsxRuntime_2(RatingLabel, {
-        className: clsx$1(classes.label, classes.labelEmptyValue),
+        className: clsx(classes.label, classes.labelEmptyValue),
         ownerState: ownerState,
         children: [/*#__PURE__*/jsxRuntime_1("input", {
           className: classes.visuallyHidden,
@@ -39752,7 +39630,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const classes = useUtilityClasses$y(ownerState);
     return /*#__PURE__*/jsxRuntime_1(ScopedCssBaselineRoot, _extends({
       as: component,
-      className: clsx$1(classes.root, className),
+      className: clsx(classes.root, className),
       ref: ref,
       ownerState: ownerState
     }, other));
@@ -39795,7 +39673,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   function getSelectUtilityClasses(slot) {
     return generateUtilityClass('MuiSelect', slot);
   }
-  const selectClasses = generateUtilityClasses('MuiSelect', ['select', 'multiple', 'filled', 'outlined', 'standard', 'disabled', 'focused', 'icon', 'iconOpen', 'iconFilled', 'iconOutlined', 'iconStandard', 'nativeInput', 'error']);
+  const selectClasses = generateUtilityClasses('MuiSelect', ['root', 'select', 'multiple', 'filled', 'outlined', 'standard', 'disabled', 'focused', 'icon', 'iconOpen', 'iconFilled', 'iconOutlined', 'iconStandard', 'nativeInput', 'error']);
   var selectClasses$1 = selectClasses;
 
   var _span;
@@ -40227,7 +40105,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         onFocus: onFocus
       }, SelectDisplayProps, {
         ownerState: ownerState,
-        className: clsx$1(SelectDisplayProps.className, classes.select, className)
+        className: clsx(SelectDisplayProps.className, classes.select, className)
         // The id is required for proper a11y
         ,
         id: buttonId,
@@ -40427,7 +40305,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   } ;
   var SelectInput$1 = SelectInput;
 
-  const _excluded$C = ["autoWidth", "children", "classes", "className", "defaultOpen", "displayEmpty", "IconComponent", "id", "input", "inputProps", "label", "labelId", "MenuProps", "multiple", "native", "onClose", "onOpen", "open", "renderValue", "SelectDisplayProps", "variant"];
+  const _excluded$C = ["autoWidth", "children", "classes", "className", "defaultOpen", "displayEmpty", "IconComponent", "id", "input", "inputProps", "label", "labelId", "MenuProps", "multiple", "native", "onClose", "onOpen", "open", "renderValue", "SelectDisplayProps", "variant"],
+    _excluded2$3 = ["root"];
   const useUtilityClasses$w = ownerState => {
     const {
       classes
@@ -40485,6 +40364,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       classes: classesProp
     });
     const classes = useUtilityClasses$w(ownerState);
+    const restOfClasses = _objectWithoutPropertiesLoose(classes, _excluded2$3);
     const InputComponent = input || {
       standard: /*#__PURE__*/jsxRuntime_1(StyledInput, {
         ownerState: ownerState
@@ -40527,13 +40407,13 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
             id
           }, SelectDisplayProps)
         }, inputProps, {
-          classes: inputProps ? deepmerge(classes, inputProps.classes) : classes
+          classes: inputProps ? deepmerge(restOfClasses, inputProps.classes) : restOfClasses
         }, input ? input.props.inputProps : {})
       }, multiple && native && variant === 'outlined' ? {
         notched: true
       } : {}, {
         ref: inputComponentRef,
-        className: clsx$1(InputComponent.props.className, className)
+        className: clsx(InputComponent.props.className, className, classes.root)
       }, !input && {
         variant
       }, other))
@@ -40788,7 +40668,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   }, ({
     ownerState
   }) => ownerState.animation === 'pulse' && css(_t3 || (_t3 = _`
-      animation: ${0} 1.5s ease-in-out 0.5s infinite;
+      animation: ${0} 2s ease-in-out 0.5s infinite;
     `), pulseKeyframe), ({
     ownerState,
     theme
@@ -40800,7 +40680,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       -webkit-mask-image: -webkit-radial-gradient(white, black);
 
       &::after {
-        animation: ${0} 1.6s linear 0.5s infinite;
+        animation: ${0} 2s linear 0.5s infinite;
         background: linear-gradient(
           90deg,
           transparent,
@@ -40841,7 +40721,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     return /*#__PURE__*/jsxRuntime_1(SkeletonRoot, _extends({
       as: component,
       ref: ref,
-      className: clsx$1(classes.root, className),
+      className: clsx(classes.root, className),
       ownerState: ownerState
     }, other, {
       style: _extends({
@@ -40920,7 +40800,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       open
     } = props;
     const utilityClasses = {
-      offset: clsx$1(open && sliderClasses$1.valueLabelOpen),
+      offset: clsx(open && sliderClasses$1.valueLabelOpen),
       circle: sliderClasses$1.valueLabelCircle,
       label: sliderClasses$1.valueLabelLabel
     };
@@ -40941,10 +40821,10 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       return null;
     }
     return /*#__PURE__*/React__namespace.cloneElement(children, {
-      className: clsx$1(children.props.className)
+      className: clsx(children.props.className)
     }, /*#__PURE__*/jsxRuntime_2(React__namespace.Fragment, {
       children: [children.props.children, /*#__PURE__*/jsxRuntime_1("span", {
-        className: clsx$1(classes.offset, className),
+        className: clsx(classes.offset, className),
         "aria-hidden": true,
         children: /*#__PURE__*/jsxRuntime_1("span", {
           className: classes.circle,
@@ -41547,7 +41427,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
             markActive
           }, {
             style: _extends({}, style, markProps.style),
-            className: clsx$1(markProps.className, markActive && classes.markActive)
+            className: clsx(markProps.className, markActive && classes.markActive)
           })), mark.label != null ? /*#__PURE__*/jsxRuntime_1(MarkLabelSlot, _extends({
             "aria-hidden": true,
             "data-index": index
@@ -41555,7 +41435,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
             markLabelActive: markActive
           }, {
             style: _extends({}, style, markLabelProps.style),
-            className: clsx$1(classes.markLabel, markLabelProps.className, markActive && classes.markLabelActive),
+            className: clsx(classes.markLabel, markLabelProps.className, markActive && classes.markLabelActive),
             children: mark.label
           })) : null]
         }, index);
@@ -41577,7 +41457,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
             children: /*#__PURE__*/jsxRuntime_1(ThumbSlot, _extends({
               "data-index": index
             }, thumbProps, {
-              className: clsx$1(classes.thumb, thumbProps.className, active === index && classes.active, focusedThumbIndex === index && classes.focusVisible),
+              className: clsx(classes.thumb, thumbProps.className, active === index && classes.active, focusedThumbIndex === index && classes.focusVisible),
               style: _extends({}, style, getThumbStyle(index), thumbProps.style),
               children: /*#__PURE__*/jsxRuntime_1(InputSlot, _extends({
                 "data-index": index,
@@ -41947,7 +41827,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       role: role,
       square: true,
       elevation: 6,
-      className: clsx$1(classes.root, className),
+      className: clsx(classes.root, className),
       ownerState: ownerState,
       ref: ref
     }, other, {
@@ -42824,7 +42704,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       });
     });
     return /*#__PURE__*/jsxRuntime_2(SpeedDialRoot, _extends({
-      className: clsx$1(classes.root, className),
+      className: clsx(classes.root, className),
       ref: ref,
       role: "presentation",
       onKeyDown: handleKeyDown,
@@ -42847,7 +42727,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
           "aria-controls": `${id}-actions`
         }, FabProps, {
           onClick: handleClick,
-          className: clsx$1(classes.fab, FabProps.className),
+          className: clsx(classes.fab, FabProps.className),
           ref: handleFabRef,
           ownerState: ownerState,
           children: /*#__PURE__*/React__namespace.isValidElement(icon) && isMuiElement(icon, ['SpeedDialIcon']) ? /*#__PURE__*/React__namespace.cloneElement(icon, {
@@ -42858,7 +42738,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         id: `${id}-actions`,
         role: "menu",
         "aria-orientation": getOrientation(direction),
-        className: clsx$1(classes.actions, !open && classes.actionsClosed),
+        className: clsx(classes.actions, !open && classes.actionsClosed),
         ownerState: ownerState,
         children: children
       })]
@@ -43428,7 +43308,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       nameOrDescProps['aria-labelledby'] = open && !titleIsString ? id : null;
     }
     const childrenProps = _extends({}, nameOrDescProps, other, children.props, {
-      className: clsx$1(other.className, children.props.className),
+      className: clsx(other.className, children.props.className),
       onTouchStart: detectTouchStart,
       ref: handleRef
     }, followCursor ? {
@@ -43501,14 +43381,14 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const TooltipComponent = (_ref4 = (_slots$tooltip = slots.tooltip) != null ? _slots$tooltip : components.Tooltip) != null ? _ref4 : TooltipTooltip;
     const ArrowComponent = (_ref5 = (_slots$arrow = slots.arrow) != null ? _slots$arrow : components.Arrow) != null ? _ref5 : TooltipArrow;
     const popperProps = appendOwnerState(PopperComponent, _extends({}, PopperProps, (_slotProps$popper = slotProps.popper) != null ? _slotProps$popper : componentsProps.popper, {
-      className: clsx$1(classes.popper, PopperProps == null ? void 0 : PopperProps.className, (_ref6 = (_slotProps$popper2 = slotProps.popper) != null ? _slotProps$popper2 : componentsProps.popper) == null ? void 0 : _ref6.className)
+      className: clsx(classes.popper, PopperProps == null ? void 0 : PopperProps.className, (_ref6 = (_slotProps$popper2 = slotProps.popper) != null ? _slotProps$popper2 : componentsProps.popper) == null ? void 0 : _ref6.className)
     }), ownerState);
     const transitionProps = appendOwnerState(TransitionComponent, _extends({}, TransitionProps, (_slotProps$transition = slotProps.transition) != null ? _slotProps$transition : componentsProps.transition), ownerState);
     const tooltipProps = appendOwnerState(TooltipComponent, _extends({}, (_slotProps$tooltip = slotProps.tooltip) != null ? _slotProps$tooltip : componentsProps.tooltip, {
-      className: clsx$1(classes.tooltip, (_ref7 = (_slotProps$tooltip2 = slotProps.tooltip) != null ? _slotProps$tooltip2 : componentsProps.tooltip) == null ? void 0 : _ref7.className)
+      className: clsx(classes.tooltip, (_ref7 = (_slotProps$tooltip2 = slotProps.tooltip) != null ? _slotProps$tooltip2 : componentsProps.tooltip) == null ? void 0 : _ref7.className)
     }), ownerState);
     const tooltipArrowProps = appendOwnerState(ArrowComponent, _extends({}, (_slotProps$arrow = slotProps.arrow) != null ? _slotProps$arrow : componentsProps.arrow, {
-      className: clsx$1(classes.arrow, (_ref8 = (_slotProps$arrow2 = slotProps.arrow) != null ? _slotProps$arrow2 : componentsProps.arrow) == null ? void 0 : _ref8.className)
+      className: clsx(classes.arrow, (_ref8 = (_slotProps$arrow2 = slotProps.arrow) != null ? _slotProps$arrow2 : componentsProps.arrow) == null ? void 0 : _ref8.className)
     }), ownerState);
     return /*#__PURE__*/jsxRuntime_2(React__namespace.Fragment, {
       children: [/*#__PURE__*/React__namespace.cloneElement(children, childrenProps), /*#__PURE__*/jsxRuntime_1(PopperComponent, _extends({
@@ -43871,7 +43751,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     };
     const fab = /*#__PURE__*/jsxRuntime_1(SpeedDialActionFab, _extends({
       size: "small",
-      className: clsx$1(classes.fab, className),
+      className: clsx(classes.fab, className),
       tabIndex: -1,
       role: "menuitem",
       ownerState: ownerState
@@ -44065,7 +43945,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       return icon;
     }
     return /*#__PURE__*/jsxRuntime_2(SpeedDialIconRoot, _extends({
-      className: clsx$1(classes.root, className),
+      className: clsx(classes.root, className),
       ref: ref,
       ownerState: ownerState
     }, other, {
@@ -44232,7 +44112,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const classes = useUtilityClasses$n(ownerState);
     const newChildren = /*#__PURE__*/jsxRuntime_2(StepRoot, _extends({
       as: component,
-      className: clsx$1(classes.root, className),
+      className: clsx(classes.root, className),
       ref: ref,
       ownerState: ownerState
     }, other, {
@@ -44384,7 +44264,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     });
     const classes = useUtilityClasses$m(ownerState);
     if (typeof icon === 'number' || typeof icon === 'string') {
-      const className = clsx$1(classNameProp, classes.root);
+      const className = clsx(classNameProp, classes.root);
       if (error) {
         return /*#__PURE__*/jsxRuntime_1(StepIconRoot, _extends({
           as: Warning,
@@ -44607,7 +44487,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const classes = useUtilityClasses$l(ownerState);
     const labelSlotProps = (_slotProps$label = slotProps.label) != null ? _slotProps$label : componentsProps.label;
     return /*#__PURE__*/jsxRuntime_2(StepLabelRoot, _extends({
-      className: clsx$1(classes.root, className),
+      className: clsx(classes.root, className),
       ref: ref,
       ownerState: ownerState
     }, other, {
@@ -44626,7 +44506,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         children: [children ? /*#__PURE__*/jsxRuntime_1(StepLabelLabel, _extends({
           ownerState: ownerState
         }, labelSlotProps, {
-          className: clsx$1(classes.label, labelSlotProps == null ? void 0 : labelSlotProps.className),
+          className: clsx(classes.label, labelSlotProps == null ? void 0 : labelSlotProps.className),
           children: children
         })) : null, optional]
       })]
@@ -44773,7 +44653,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       TouchRippleProps: {
         className: classes.touchRipple
       },
-      className: clsx$1(classes.root, className),
+      className: clsx(classes.root, className),
       ref: ref,
       ownerState: ownerState,
       "aria-current": active ? 'step' : undefined
@@ -44909,7 +44789,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     });
     const classes = useUtilityClasses$j(ownerState);
     return /*#__PURE__*/jsxRuntime_1(StepConnectorRoot, _extends({
-      className: clsx$1(classes.root, className),
+      className: clsx(classes.root, className),
       ref: ref,
       ownerState: ownerState
     }, other, {
@@ -45019,7 +44899,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       transitionDuration = undefined;
     }
     return /*#__PURE__*/jsxRuntime_1(StepContentRoot, _extends({
-      className: clsx$1(classes.root, className),
+      className: clsx(classes.root, className),
       ref: ref,
       ownerState: ownerState
     }, other, {
@@ -45163,7 +45043,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       children: /*#__PURE__*/jsxRuntime_1(StepperRoot, _extends({
         as: component,
         ownerState: ownerState,
-        className: clsx$1(classes.root, className),
+        className: clsx(classes.root, className),
         ref: ref
       }, other, {
         children: steps
@@ -45264,7 +45144,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       other = _objectWithoutPropertiesLoose(props, _excluded$l);
     const ownerState = props;
     return /*#__PURE__*/jsxRuntime_1(SwipeAreaRoot, _extends({
-      className: clsx$1('PrivateSwipeArea-root', classes.root, classes[`anchor${capitalize(anchor)}`], className),
+      className: clsx('PrivateSwipeArea-root', classes.root, classes[`anchor${capitalize(anchor)}`], className),
       ref: ref,
       style: _extends({
         [isHorizontal(anchor) ? 'width' : 'height']: width
@@ -46069,7 +45949,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       ownerState: ownerState
     });
     return /*#__PURE__*/jsxRuntime_2(SwitchRoot, {
-      className: clsx$1(classes.root, className),
+      className: clsx(classes.root, className),
       sx: sx,
       ownerState: ownerState,
       children: [/*#__PURE__*/jsxRuntime_1(SwitchSwitchBase, _extends({
@@ -46323,7 +46203,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     });
     const classes = useUtilityClasses$f(ownerState);
     const icon = iconProp && label && /*#__PURE__*/React__namespace.isValidElement(iconProp) ? /*#__PURE__*/React__namespace.cloneElement(iconProp, {
-      className: clsx$1(classes.iconWrapper, iconProp.props.className)
+      className: clsx(classes.iconWrapper, iconProp.props.className)
     }) : iconProp;
     const handleClick = event => {
       if (!selected && onChange) {
@@ -46343,7 +46223,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     };
     return /*#__PURE__*/jsxRuntime_2(TabRoot, _extends({
       focusRipple: !disableFocusRipple,
-      className: clsx$1(classes.root, className),
+      className: clsx(classes.root, className),
       ref: ref,
       role: "tab",
       "aria-selected": selected,
@@ -46522,7 +46402,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         as: component,
         role: component === defaultComponent$4 ? null : 'table',
         ref: ref,
-        className: clsx$1(classes.root, className),
+        className: clsx(classes.root, className),
         ownerState: ownerState
       }, other))
     });
@@ -46626,7 +46506,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     return /*#__PURE__*/jsxRuntime_1(Tablelvl2Context$1.Provider, {
       value: tablelvl2$2,
       children: /*#__PURE__*/jsxRuntime_1(TableBodyRoot, _extends({
-        className: clsx$1(classes.root, className),
+        className: clsx(classes.root, className),
         as: component,
         ref: ref,
         role: component === defaultComponent$3 ? null : 'rowgroup',
@@ -46802,7 +46682,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     return /*#__PURE__*/jsxRuntime_1(TableCellRoot, _extends({
       as: component,
       ref: ref,
-      className: clsx$1(classes.root, className),
+      className: clsx(classes.root, className),
       "aria-sort": ariaSort,
       scope: scope,
       ownerState: ownerState
@@ -46909,7 +46789,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     return /*#__PURE__*/jsxRuntime_1(TableContainerRoot, _extends({
       ref: ref,
       as: component,
-      className: clsx$1(classes.root, className),
+      className: clsx(classes.root, className),
       ownerState: ownerState
     }, other));
   });
@@ -46987,7 +46867,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       value: tablelvl2$1,
       children: /*#__PURE__*/jsxRuntime_1(TableFooterRoot, _extends({
         as: component,
-        className: clsx$1(classes.root, className),
+        className: clsx(classes.root, className),
         ref: ref,
         role: component === defaultComponent$2 ? null : 'rowgroup',
         ownerState: ownerState
@@ -47068,7 +46948,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       value: tablelvl2,
       children: /*#__PURE__*/jsxRuntime_1(TableHeadRoot, _extends({
         as: component,
-        className: clsx$1(classes.root, className),
+        className: clsx(classes.root, className),
         ref: ref,
         role: component === defaultComponent$1 ? null : 'rowgroup',
         ownerState: ownerState
@@ -47171,7 +47051,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const classes = useUtilityClasses$8(ownerState);
     return /*#__PURE__*/jsxRuntime_1(ToolbarRoot, _extends({
       as: component,
-      className: clsx$1(classes.root, className),
+      className: clsx(classes.root, className),
       ref: ref,
       ownerState: ownerState
     }, other));
@@ -47511,7 +47391,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       ref: ref,
       as: component,
       ownerState: ownerState,
-      className: clsx$1(classes.root, className)
+      className: clsx(classes.root, className)
     }, other, {
       children: /*#__PURE__*/jsxRuntime_2(TablePaginationToolbar, {
         className: classes.toolbar,
@@ -47533,10 +47413,10 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         }, SelectProps, {
           classes: _extends({}, SelectProps.classes, {
             // TODO v5 remove `classes.input`
-            root: clsx$1(classes.input, classes.selectRoot, (SelectProps.classes || {}).root),
-            select: clsx$1(classes.select, (SelectProps.classes || {}).select),
+            root: clsx(classes.input, classes.selectRoot, (SelectProps.classes || {}).root),
+            select: clsx(classes.select, (SelectProps.classes || {}).select),
             // TODO v5 remove `selectIcon`
-            icon: clsx$1(classes.selectIcon, (SelectProps.classes || {}).icon)
+            icon: clsx(classes.selectIcon, (SelectProps.classes || {}).icon)
           }),
           children: rowsPerPageOptions.map(rowsPerPageOption => /*#__PURE__*/React.createElement(MenuItemComponent, _extends({}, !isHostComponent(MenuItemComponent) && {
             ownerState
@@ -47784,7 +47664,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     return /*#__PURE__*/jsxRuntime_1(TableRowRoot, _extends({
       as: component,
       ref: ref,
-      className: clsx$1(classes.root, className),
+      className: clsx(classes.root, className),
       role: component === defaultComponent ? null : 'row',
       ownerState: ownerState
     }, other));
@@ -47937,7 +47817,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     });
     const classes = useUtilityClasses$5(ownerState);
     return /*#__PURE__*/jsxRuntime_2(TableSortLabelRoot, _extends({
-      className: clsx$1(classes.root, className),
+      className: clsx(classes.root, className),
       component: "span",
       disableRipple: true,
       ownerState: ownerState,
@@ -47945,7 +47825,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     }, other, {
       children: [children, hideSortIcon && !active ? null : /*#__PURE__*/jsxRuntime_1(TableSortLabelIcon, {
         as: IconComponent,
-        className: clsx$1(classes.icon),
+        className: clsx(classes.icon),
         ownerState: ownerState
       })]
     }));
@@ -48168,7 +48048,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     });
     return /*#__PURE__*/jsxRuntime_1(TabScrollButtonRoot, _extends({
       component: "div",
-      className: clsx$1(classes.root, className),
+      className: clsx(classes.root, className),
       ref: ref,
       role: null,
       ownerState: ownerState,
@@ -48646,7 +48526,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       const conditionalElements = {};
       conditionalElements.scrollbarSizeListener = scrollable ? /*#__PURE__*/jsxRuntime_1(TabsScrollbarSize, {
         onChange: handleScrollbarSizeChange,
-        className: clsx$1(classes.scrollableX, classes.hideScrollbar)
+        className: clsx(classes.scrollableX, classes.hideScrollbar)
       }) : null;
       const scrollButtonsActive = displayStartScroll || displayEndScroll;
       const showScrollButtons = scrollable && (scrollButtons === 'auto' && scrollButtonsActive || scrollButtons === true);
@@ -48662,7 +48542,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         onClick: handleStartScrollClick,
         disabled: !displayStartScroll
       }, TabScrollButtonProps, {
-        className: clsx$1(classes.scrollButtons, TabScrollButtonProps.className)
+        className: clsx(classes.scrollButtons, TabScrollButtonProps.className)
       })) : null;
       conditionalElements.scrollButtonEnd = showScrollButtons ? /*#__PURE__*/jsxRuntime_1(ScrollButtonComponent, _extends({
         slots: {
@@ -48676,7 +48556,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         onClick: handleEndScrollClick,
         disabled: !displayEndScroll
       }, TabScrollButtonProps, {
-        className: clsx$1(classes.scrollButtons, TabScrollButtonProps.className)
+        className: clsx(classes.scrollButtons, TabScrollButtonProps.className)
       })) : null;
       return conditionalElements;
     };
@@ -48783,7 +48663,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       updateScrollButtons: updateScrollButtonState
     }), [updateIndicatorState, updateScrollButtonState]);
     const indicator = /*#__PURE__*/jsxRuntime_1(TabsIndicator, _extends({}, TabIndicatorProps, {
-      className: clsx$1(classes.indicator, TabIndicatorProps.className),
+      className: clsx(classes.indicator, TabIndicatorProps.className),
       ownerState: ownerState,
       style: _extends({}, indicatorStyle, TabIndicatorProps.style)
     }));
@@ -48851,7 +48731,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     };
     const conditionalElements = getConditionalElements();
     return /*#__PURE__*/jsxRuntime_2(TabsRoot, _extends({
-      className: clsx$1(classes.root, className),
+      className: clsx(classes.root, className),
       ownerState: ownerState,
       ref: ref,
       as: component
@@ -49035,7 +48915,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const textFieldClasses = generateUtilityClasses('MuiTextField', ['root']);
   var textFieldClasses$1 = textFieldClasses;
 
-  const _excluded$3 = ["autoComplete", "autoFocus", "children", "className", "color", "defaultValue", "disabled", "error", "FormHelperTextProps", "fullWidth", "helperText", "id", "InputLabelProps", "inputProps", "InputProps", "inputRef", "label", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onClick", "onFocus", "placeholder", "required", "rows", "select", "SelectProps", "type", "value", "variant"];
+  const _excluded$3 = ["autoComplete", "autoFocus", "children", "className", "color", "defaultValue", "disabled", "error", "FormHelperTextProps", "fullWidth", "helperText", "id", "InputLabelProps", "inputProps", "InputProps", "inputRef", "label", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onFocus", "placeholder", "required", "rows", "select", "SelectProps", "type", "value", "variant"];
   const variantComponent = {
     standard: Input$1,
     filled: FilledInput$1,
@@ -49117,7 +48997,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         name,
         onBlur,
         onChange,
-        onClick,
         onFocus,
         placeholder,
         required = false,
@@ -49182,12 +49061,11 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       onBlur: onBlur,
       onChange: onChange,
       onFocus: onFocus,
-      onClick: onClick,
       placeholder: placeholder,
       inputProps: inputProps
     }, InputMore, InputProps));
     return /*#__PURE__*/jsxRuntime_2(TextFieldRoot, _extends({
-      className: clsx$1(classes.root, className),
+      className: clsx(classes.root, className),
       disabled: disabled,
       error: error,
       fullWidth: fullWidth,
@@ -49341,10 +49219,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * You can pull out the new value by accessing `event.target.value` (string).
      */
     onChange: PropTypes.func,
-    /**
-     * @ignore
-     */
-    onClick: PropTypes.func,
     /**
      * @ignore
      */
@@ -49514,7 +49388,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       }
     };
     return /*#__PURE__*/jsxRuntime_1(ToggleButtonRoot, _extends({
-      className: clsx$1(classes.root, className),
+      className: clsx(classes.root, className),
       disabled: disabled,
       focusRipple: !disableFocusRipple,
       ref: ref,
@@ -49745,7 +49619,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     };
     return /*#__PURE__*/jsxRuntime_1(ToggleButtonGroupRoot, _extends({
       role: "group",
-      className: clsx$1(classes.root, className),
+      className: clsx(classes.root, className),
       ref: ref,
       ownerState: ownerState
     }, other, {
@@ -49759,7 +49633,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
           }
         }
         return /*#__PURE__*/React__namespace.cloneElement(child, {
-          className: clsx$1(classes.grouped, child.props.className),
+          className: clsx(classes.grouped, child.props.className),
           onChange: exclusive ? handleExclusiveChange : handleChange,
           selected: child.props.selected === undefined ? isValueSelected(child.props.value, value) : child.props.selected,
           size: child.props.size || size,
@@ -50175,6 +50049,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   exports.getMenuItemUtilityClass = getMenuItemUtilityClass;
   exports.getMenuUtilityClass = getMenuUtilityClass;
   exports.getMobileStepperUtilityClass = getMobileStepperUtilityClass;
+  exports.getModalUtilityClass = getModalUtilityClass;
   exports.getNativeSelectUtilityClasses = getNativeSelectUtilityClasses;
   exports.getOffsetLeft = getOffsetLeft;
   exports.getOffsetTop = getOffsetTop;
@@ -50253,7 +50128,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   exports.menuClasses = menuClasses$1;
   exports.menuItemClasses = menuItemClasses$1;
   exports.mobileStepperClasses = mobileStepperClasses$1;
-  exports.modalClasses = modalClasses;
+  exports.modalClasses = modalClasses$1;
   exports.nativeSelectClasses = nativeSelectClasses$1;
   exports.outlinedInputClasses = outlinedInputClasses$1;
   exports.ownerDocument = ownerDocument;