@mui/material 5.14.1 → 5.14.3

package/umd/material-ui.development.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.14.1
+ * @mui/material v5.14.3
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -13,10 +13,7 @@
 
   'use client';
 
-  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-  function _interopNamespace(e) {
-    if (e && e.__esModule) return e;
+  function _interopNamespaceDefault(e) {
     var n = Object.create(null);
     if (e) {
       Object.keys(e).forEach(function (k) {
@@ -29,14 +26,12 @@
         }
       });
     }
-    n["default"] = e;
+    n.default = e;
     return Object.freeze(n);
   }
 
-  var React__namespace = /*#__PURE__*/_interopNamespace(React);
-  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-  var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
-  var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
+  var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+  var ReactDOM__namespace = /*#__PURE__*/_interopNamespaceDefault(ReactDOM);
 
   const common = {
     black: '#000',
@@ -388,26 +383,26 @@
 
   var index = /*#__PURE__*/Object.freeze({
     __proto__: null,
+    amber: amber$1,
+    blue: blue$1,
+    blueGrey: blueGrey$1,
+    brown: brown$1,
     common: common$1,
-    red: red$1,
-    pink: pink$1,
-    purple: purple$1,
+    cyan: cyan$1,
+    deepOrange: deepOrange$1,
     deepPurple: deepPurple$1,
+    green: green$1,
+    grey: grey$1,
     indigo: indigo$1,
-    blue: blue$1,
     lightBlue: lightBlue$1,
-    cyan: cyan$1,
-    teal: teal$1,
-    green: green$1,
     lightGreen: lightGreen$1,
     lime: lime$1,
-    yellow: yellow$1,
-    amber: amber$1,
     orange: orange$1,
-    deepOrange: deepOrange$1,
-    brown: brown$1,
-    grey: grey$1,
-    blueGrey: blueGrey$1
+    pink: pink$1,
+    purple: purple$1,
+    red: red$1,
+    teal: teal$1,
+    yellow: yellow$1
   });
 
   var global$1 = (typeof global !== "undefined" ? global :
@@ -704,6 +699,7 @@
   (c) Sindre Sorhus
   @license MIT
   */
+
   /* eslint-disable no-unused-vars */
   var getOwnPropertySymbols = Object.getOwnPropertySymbols;
   var hasOwnProperty$1 = Object.prototype.hasOwnProperty;
@@ -795,20 +791,17 @@
    * LICENSE file in the root directory of this source tree.
    */
 
-  var ReactPropTypesSecret$2 = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';
-
-  var ReactPropTypesSecret_1 = ReactPropTypesSecret$2;
 
-  var has$2 = Function.call.bind(Object.prototype.hasOwnProperty);
+  var ReactPropTypesSecret$1 = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';
 
-  var ReactPropTypesSecret$1 = ReactPropTypesSecret_1;
+  var ReactPropTypesSecret_1 = ReactPropTypesSecret$1;
 
-  var has$1 = has$2;
+  var has$1 = Function.call.bind(Object.prototype.hasOwnProperty);
 
   var printWarning$1 = function() {};
 
   {
-    var ReactPropTypesSecret = ReactPropTypesSecret$1;
+    var ReactPropTypesSecret = ReactPropTypesSecret_1;
     var loggedTypeFailures = {};
     var has = has$1;
 
@@ -837,7 +830,7 @@
    * @param {?Function} getStack Returns the component stack.
    * @private
    */
-  function checkPropTypes$1(typeSpecs, values, location, componentName, getStack) {
+  function checkPropTypes(typeSpecs, values, location, componentName, getStack) {
     {
       for (var typeSpecName in typeSpecs) {
         if (has(typeSpecs, typeSpecName)) {
@@ -892,15 +885,13 @@
    *
    * @private
    */
-  checkPropTypes$1.resetWarningCache = function() {
+  checkPropTypes.resetWarningCache = function() {
     {
       loggedTypeFailures = {};
     }
   };
 
-  var checkPropTypes_1 = checkPropTypes$1;
-
-  var checkPropTypes = checkPropTypes_1;
+  var checkPropTypes_1 = checkPropTypes;
 
   var printWarning = function() {};
 
@@ -1065,7 +1056,7 @@
         componentName = componentName || ANONYMOUS;
         propFullName = propFullName || propName;
 
-        if (secret !== ReactPropTypesSecret$1) {
+        if (secret !== ReactPropTypesSecret_1) {
           if (throwOnDirectAccess) {
             // New behavior only for users of `prop-types` package
             var err = new Error(
@@ -1149,7 +1140,7 @@
           return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected an array.'));
         }
         for (var i = 0; i < propValue.length; i++) {
-          var error = typeChecker(propValue, i, componentName, location, propFullName + '[' + i + ']', ReactPropTypesSecret$1);
+          var error = typeChecker(propValue, i, componentName, location, propFullName + '[' + i + ']', ReactPropTypesSecret_1);
           if (error instanceof Error) {
             return error;
           }
@@ -1242,7 +1233,7 @@
         }
         for (var key in propValue) {
           if (has$1(propValue, key)) {
-            var error = typeChecker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret$1);
+            var error = typeChecker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret_1);
             if (error instanceof Error) {
               return error;
             }
@@ -1274,7 +1265,7 @@
         var expectedTypes = [];
         for (var i = 0; i < arrayOfTypeCheckers.length; i++) {
           var checker = arrayOfTypeCheckers[i];
-          var checkerResult = checker(props, propName, componentName, location, propFullName, ReactPropTypesSecret$1);
+          var checkerResult = checker(props, propName, componentName, location, propFullName, ReactPropTypesSecret_1);
           if (checkerResult == null) {
             return null;
           }
@@ -1317,7 +1308,7 @@
           if (typeof checker !== 'function') {
             return invalidValidatorError(componentName, location, propFullName, key, getPreciseType(checker));
           }
-          var error = checker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret$1);
+          var error = checker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret_1);
           if (error) {
             return error;
           }
@@ -1348,7 +1339,7 @@
               '\nValid keys: ' + JSON.stringify(Object.keys(shapeTypes), null, '  ')
             );
           }
-          var error = checker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret$1);
+          var error = checker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret_1);
           if (error) {
             return error;
           }
@@ -1490,15 +1481,13 @@
       return propValue.constructor.name;
     }
 
-    ReactPropTypes.checkPropTypes = checkPropTypes;
-    ReactPropTypes.resetWarningCache = checkPropTypes.resetWarningCache;
+    ReactPropTypes.checkPropTypes = checkPropTypes_1;
+    ReactPropTypes.resetWarningCache = checkPropTypes_1.resetWarningCache;
     ReactPropTypes.PropTypes = ReactPropTypes;
 
     return ReactPropTypes;
   };
 
-  var require$$1 = factoryWithTypeCheckers;
-
   var propTypes = createCommonjsModule(function (module) {
   /**
    * Copyright (c) 2013-present, Facebook, Inc.
@@ -1513,7 +1502,7 @@
     // By explicitly using `prop-types` you are opting into new development behavior.
     // http://fb.me/prop-types-in-prod
     var throwOnDirectAccess = true;
-    module.exports = require$$1(ReactIs.isElement, throwOnDirectAccess);
+    module.exports = factoryWithTypeCheckers(ReactIs.isElement, throwOnDirectAccess);
   }
   });
 
@@ -2756,7 +2745,7 @@
     return StyleSheet;
   }();
 
-  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 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 weakMemoize = function weakMemoize(func) {
     // $FlowFixMe flow doesn't include all non-primitive types as allowed for weakmaps
@@ -3051,7 +3040,7 @@
       case 4810:
       case 6968:
       case 2756:
-        return a + value + r$1 + value + e + value + value;
+        return a + value + r$3 + value + e + value + value;
       // flex, flex-direction
 
       case 6828:
@@ -3132,7 +3121,7 @@
           // (f)ill-available, (f)it-content
 
           case 102:
-            return z(value, /(.+:)(.+)-([^]+)/, '$1' + a + '$2-$3' + '$1' + r$1 + (O(value, length + 3) == 108 ? '$3' : '$2-$3')) + value;
+            return z(value, /(.+:)(.+)-([^]+)/, '$1' + a + '$2-$3' + '$1' + r$3 + (O(value, length + 3) == 108 ? '$3' : '$2-$3')) + value;
           // (s)tretch
 
           case 115:
@@ -3199,7 +3188,7 @@
             case ':read-only':
             case ':read-write':
               return oe([K(element, {
-                props: [z(value, /:(read-\w+)/, ':' + r$1 + '$1')]
+                props: [z(value, /:(read-\w+)/, ':' + r$3 + '$1')]
               })], callback);
             // :placeholder
 
@@ -3207,7 +3196,7 @@
               return oe([K(element, {
                 props: [z(value, /:(plac\w+)/, ':' + a + 'input-$1')]
               }), K(element, {
-                props: [z(value, /:(plac\w+)/, ':' + r$1 + '$1')]
+                props: [z(value, /:(plac\w+)/, ':' + r$3 + '$1')]
               }), K(element, {
                 props: [z(value, /:(plac\w+)/, e + 'input-$1')]
               })], callback);
@@ -4892,14 +4881,14 @@
     newStyled[tagName] = newStyled(tagName);
   });
 
-  React__default["default"].__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner;
+  React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner;
 
   var reactJsxRuntime_development = createCommonjsModule(function (module, exports) {
 
   {
     (function() {
 
-  var React = React__default["default"];
+  var React$1 = React;
 
   // ATTENTION
   // When adding new symbols to this file,
@@ -4934,7 +4923,7 @@
     return null;
   }
 
-  var ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+  var ReactSharedInternals = React$1.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
 
   function error(format) {
     {
@@ -7523,7 +7512,7 @@
     });
   }
 
-  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}
+  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}
 
   const _excluded$2m = ["className", "component"];
   function createBox(options = {}) {
@@ -7547,7 +7536,7 @@
       return /*#__PURE__*/jsxRuntime_1(BoxRoot, _extends({
         as: component,
         ref: ref,
-        className: clsx(className, generateClassName ? generateClassName(defaultClassName) : defaultClassName),
+        className: clsx$2(className, generateClassName ? generateClassName(defaultClassName) : defaultClassName),
         theme: themeId ? theme[themeId] || theme : theme
       }, other));
     });
@@ -9212,7 +9201,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(classes.root, className),
+          className: clsx$2(classes.root, className),
           ref: ref
         }, other))
       );
@@ -9598,7 +9587,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         ref: ref,
         as: component,
         ownerState: ownerState,
-        className: clsx(classes.root, className)
+        className: clsx$2(classes.root, className)
       }, other, {
         children: React__namespace.Children.map(children, child => {
           if ( /*#__PURE__*/React__namespace.isValidElement(child) && isMuiElement(child, ['Grid'])) {
@@ -9741,8 +9730,12 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
           };
         }
         return {
+          // The useFlexGap={false} implement relies on each child to give up control of the margin.
+          // We need to reset the margin to avoid double spacing.
+          '& > :not(style):not(style)': {
+            margin: 0
+          },
           '& > :not(style) ~ :not(style)': {
-            margin: 0,
             [`margin${getSideFromDirection(breakpoint ? directionValues[breakpoint] : ownerState.direction)}`]: getValue(transformer, propValue)
           }
         };
@@ -9791,7 +9784,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         as: component,
         ownerState: ownerState,
         ref: ref,
-        className: clsx(classes.root, className)
+        className: clsx$2(classes.root, className)
       }, other, {
         children: divider ? joinChildren(children, divider) : children
       }));
@@ -11097,6 +11090,8 @@ 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}
+
   /**
    * Determines if a given element is a DOM element name (i.e. not a React component).
    */
@@ -11183,6 +11178,8 @@ 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`.
@@ -16798,7 +16795,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const classes = useUtilityClasses$1M(ownerState);
     return /*#__PURE__*/jsxRuntime_2(SvgIconRoot, _extends({
       as: component,
-      className: clsx(classes.root, className),
+      className: clsx$1(classes.root, className),
       focusable: "false",
       color: htmlColor,
       "aria-hidden": titleAccess ? undefined : true,
@@ -16951,7 +16948,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     exitActive: PropTypes.string
   })]) ;
 
-  var TransitionGroupContext = React__default["default"].createContext(null);
+  var TransitionGroupContext = React.createContext(null);
 
   var forceReflow = function forceReflow(node) {
     return node.scrollTop;
@@ -17177,7 +17174,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
         if (nextStatus === ENTERING) {
           if (this.props.unmountOnExit || this.props.mountOnEnter) {
-            var node = this.props.nodeRef ? this.props.nodeRef.current : ReactDOM__default["default"].findDOMNode(this); // https://github.com/reactjs/react-transition-group/pull/749
+            var node = this.props.nodeRef ? this.props.nodeRef.current : ReactDOM.findDOMNode(this); // https://github.com/reactjs/react-transition-group/pull/749
             // With unmountOnExit or mountOnEnter, the enter animation should happen at the transition between `exited` and `entering`.
             // To make the animation happen,  we have to separate each rendering and avoid being processed as batched.
 
@@ -17201,7 +17198,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       var enter = this.props.enter;
       var appearing = this.context ? this.context.isMounting : mounting;
 
-      var _ref2 = this.props.nodeRef ? [appearing] : [ReactDOM__default["default"].findDOMNode(this), appearing],
+      var _ref2 = this.props.nodeRef ? [appearing] : [ReactDOM.findDOMNode(this), appearing],
           maybeNode = _ref2[0],
           maybeAppearing = _ref2[1];
 
@@ -17239,7 +17236,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
       var exit = this.props.exit;
       var timeouts = this.getTimeouts();
-      var maybeNode = this.props.nodeRef ? undefined : ReactDOM__default["default"].findDOMNode(this); // no exit animation skip right to EXITED
+      var maybeNode = this.props.nodeRef ? undefined : ReactDOM.findDOMNode(this); // no exit animation skip right to EXITED
 
       if (!exit || config.disabled) {
         this.safeSetState({
@@ -17303,7 +17300,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
     _proto.onTransitionEnd = function onTransitionEnd(timeout, handler) {
       this.setNextCallback(handler);
-      var node = this.props.nodeRef ? this.props.nodeRef.current : ReactDOM__default["default"].findDOMNode(this);
+      var node = this.props.nodeRef ? this.props.nodeRef.current : ReactDOM.findDOMNode(this);
       var doesNotHaveTimeoutOrListener = timeout == null && !this.props.addEndListener;
 
       if (!node || doesNotHaveTimeoutOrListener) {
@@ -17353,14 +17350,14 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       return (
         /*#__PURE__*/
         // allows for nested Transitions
-        React__default["default"].createElement(TransitionGroupContext.Provider, {
+        React.createElement(TransitionGroupContext.Provider, {
           value: null
-        }, typeof children === 'function' ? children(status, childProps) : React__default["default"].cloneElement(React__default["default"].Children.only(children), childProps))
+        }, typeof children === 'function' ? children(status, childProps) : React.cloneElement(React.Children.only(children), childProps))
       );
     };
 
     return Transition;
-  }(React__default["default"].Component);
+  }(React.Component);
 
   Transition.contextType = TransitionGroupContext;
   Transition.propTypes = {
@@ -17828,18 +17825,18 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       delete props.exit;
 
       if (Component === null) {
-        return /*#__PURE__*/React__default["default"].createElement(TransitionGroupContext.Provider, {
+        return /*#__PURE__*/React.createElement(TransitionGroupContext.Provider, {
           value: contextValue
         }, children);
       }
 
-      return /*#__PURE__*/React__default["default"].createElement(TransitionGroupContext.Provider, {
+      return /*#__PURE__*/React.createElement(TransitionGroupContext.Provider, {
         value: contextValue
-      }, /*#__PURE__*/React__default["default"].createElement(Component, props, children));
+      }, /*#__PURE__*/React.createElement(Component, props, children));
     };
 
     return TransitionGroup;
-  }(React__default["default"].Component);
+  }(React.Component);
 
   TransitionGroup.propTypes = {
     /**
@@ -18158,7 +18155,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(classes.root, className, {
+        className: clsx$1(classes.root, className, {
           'entered': classes.entered,
           'exited': !inProp && collapsedSize === '0px' && classes.hidden
         }[state]),
@@ -18364,7 +18361,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(classes.root, className),
+      className: clsx$1(classes.root, className),
       ref: ref
     }, other));
   });
@@ -18579,7 +18576,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     });
     const classes = useUtilityClasses$1J(ownerState);
     return /*#__PURE__*/jsxRuntime_2(AccordionRoot, _extends({
-      className: clsx(classes.root, className),
+      className: clsx$1(classes.root, className),
       ref: ref,
       ownerState: ownerState,
       square: square
@@ -18730,7 +18727,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     });
     const classes = useUtilityClasses$1I(ownerState);
     return /*#__PURE__*/jsxRuntime_1(AccordionActionsRoot, _extends({
-      className: clsx(classes.root, className),
+      className: clsx$1(classes.root, className),
       ref: ref,
       ownerState: ownerState
     }, other));
@@ -18801,7 +18798,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const ownerState = props;
     const classes = useUtilityClasses$1H(ownerState);
     return /*#__PURE__*/jsxRuntime_1(AccordionDetailsRoot, _extends({
-      className: clsx(classes.root, className),
+      className: clsx$1(classes.root, className),
       ref: ref,
       ownerState: ownerState
     }, other));
@@ -18843,14 +18840,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(className, classes.ripple, classes.rippleVisible, pulsate && classes.ripplePulsate);
+    const rippleClassName = clsx$1(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(classes.child, leaving && classes.childLeaving, pulsate && classes.childPulsate);
+    const childClassName = clsx$1(classes.child, leaving && classes.childLeaving, pulsate && classes.childPulsate);
     if (!inProp && !leaving) {
       setLeaving(true);
     }
@@ -19081,12 +19078,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(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)
+          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)
         },
         timeout: DURATION,
         pulsate: pulsate,
@@ -19213,7 +19210,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(touchRippleClasses$1.root, classes.root, className),
+      className: clsx$1(touchRippleClasses$1.root, classes.root, className),
       ref: container
     }, other, {
       children: /*#__PURE__*/jsxRuntime_1(TransitionGroup$1, {
@@ -19519,7 +19516,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const classes = useUtilityClasses$1G(ownerState);
     return /*#__PURE__*/jsxRuntime_2(ButtonBaseRoot, _extends({
       as: ComponentProp,
-      className: clsx(classes.root, className),
+      className: clsx$1(classes.root, className),
       ownerState: ownerState,
       onBlur: handleBlur,
       onClick: onClick,
@@ -19835,8 +19832,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       disabled: disabled,
       component: "div",
       "aria-expanded": expanded,
-      className: clsx(classes.root, className),
-      focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
+      className: clsx$1(classes.root, className),
+      focusVisibleClassName: clsx$1(classes.focusVisible, focusVisibleClassName),
       onClick: handleChange,
       ref: ref,
       ownerState: ownerState
@@ -20016,7 +20013,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     });
     const classes = useUtilityClasses$1E(ownerState);
     return /*#__PURE__*/jsxRuntime_1(IconButtonRoot, _extends({
-      className: clsx(classes.root, className),
+      className: clsx$1(classes.root, className),
       centerRipple: true,
       focusRipple: !disableFocusRipple,
       disabled: disabled,
@@ -20260,7 +20257,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       role: role,
       elevation: 0,
       ownerState: ownerState,
-      className: clsx(classes.root, className),
+      className: clsx$1(classes.root, className),
       ref: ref
     }, other, {
       children: [icon !== false ? /*#__PURE__*/jsxRuntime_1(AlertIcon, {
@@ -20528,7 +20525,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       as: Component,
       ref: ref,
       ownerState: ownerState,
-      className: clsx(classes.root, className)
+      className: clsx$1(classes.root, className)
     }, other));
   });
   Typography.propTypes /* remove-proptypes */ = {
@@ -20652,7 +20649,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       component: "div",
       ownerState: ownerState,
       ref: ref,
-      className: clsx(classes.root, className)
+      className: clsx$1(classes.root, className)
     }, other));
   });
   AlertTitle.propTypes /* remove-proptypes */ = {
@@ -20803,7 +20800,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       component: "header",
       ownerState: ownerState,
       elevation: 4,
-      className: clsx(classes.root, className, position === 'fixed' && 'mui-fixed'),
+      className: clsx$1(classes.root, className, position === 'fixed' && 'mui-fixed'),
       ref: ref
     }, other));
   });
@@ -21123,7 +21120,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const classes = useUtilityClasses$1z(ownerState);
     return /*#__PURE__*/jsxRuntime_1(ListSubheaderRoot, _extends({
       as: component,
-      className: clsx(classes.root, className),
+      className: clsx$1(classes.root, className),
       ref: ref,
       ownerState: ownerState
     }, other));
@@ -21264,8 +21261,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       borderRadius: 32 / 2,
       whiteSpace: 'nowrap',
       transition: theme.transitions.create(['background-color', 'box-shadow']),
-      // label will inherit this from root, then `clickable` class overrides this for both
-      cursor: 'default',
       // We disable the focus ring for mouse, touch and keyboard users.
       outline: 0,
       textDecoration: 'none',
@@ -21524,23 +21519,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(deleteIconProp.props.className, classes.deleteIcon),
+        className: clsx$1(deleteIconProp.props.className, classes.deleteIcon),
         onClick: handleDeleteIconClick
       }) : /*#__PURE__*/jsxRuntime_1(CancelIcon, {
-        className: clsx(classes.deleteIcon),
+        className: clsx$1(classes.deleteIcon),
         onClick: handleDeleteIconClick
       });
     }
     let avatar = null;
     if (avatarProp && /*#__PURE__*/React__namespace.isValidElement(avatarProp)) {
       avatar = /*#__PURE__*/React__namespace.cloneElement(avatarProp, {
-        className: clsx(classes.avatar, avatarProp.props.className)
+        className: clsx$1(classes.avatar, avatarProp.props.className)
       });
     }
     let icon = null;
     if (iconProp && /*#__PURE__*/React__namespace.isValidElement(iconProp)) {
       icon = /*#__PURE__*/React__namespace.cloneElement(iconProp, {
-        className: clsx(classes.icon, iconProp.props.className)
+        className: clsx$1(classes.icon, iconProp.props.className)
       });
     }
     {
@@ -21550,7 +21545,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     }
     return /*#__PURE__*/jsxRuntime_2(ChipRoot, _extends({
       as: component,
-      className: clsx(classes.root, className),
+      className: clsx$1(classes.root, className),
       disabled: clickable && disabled ? true : undefined,
       onClick: onClick,
       onKeyDown: handleKeyDown,
@@ -21560,7 +21555,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(classes.label),
+        className: clsx$1(classes.label),
         ownerState: ownerState,
         children: label
       }), deleteIcon]
@@ -22170,7 +22165,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         ref: ref,
         onClick: handleClick
       }, other, {
-        className: clsx(classes.root, rootProps.className, className, readOnly && 'MuiInputBase-readOnly'),
+        className: clsx$1(classes.root, rootProps.className, className, readOnly && 'MuiInputBase-readOnly'),
         children: [startAdornment, /*#__PURE__*/jsxRuntime_1(FormControlContext$1.Provider, {
           value: null,
           children: /*#__PURE__*/jsxRuntime_1(Input, _extends({
@@ -22197,7 +22192,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
             ownerState: _extends({}, ownerState, inputProps.ownerState)
           }, {
             ref: handleInputRef,
-            className: clsx(classes.input, inputProps.className, readOnly && 'MuiInputBase-readOnly'),
+            className: clsx$1(classes.input, inputProps.className, readOnly && 'MuiInputBase-readOnly'),
             onBlur: handleBlur,
             onChange: handleChange,
             onFocus: handleFocus
@@ -22814,6 +22809,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       props: inProps,
       name: 'MuiAutocomplete'
     });
+
     /* eslint-disable @typescript-eslint/no-unused-vars */
     const {
         autoComplete = false,
@@ -22842,10 +22838,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         freeSolo = false,
         fullWidth = false,
         getLimitTagsText = more => `+${more}`,
-        getOptionLabel = option => {
-          var _option$label;
-          return (_option$label = option.label) != null ? _option$label : option;
-        },
+        getOptionLabel: getOptionLabelProp,
         groupBy,
         handleHomeEndKeys = !props.freeSolo,
         includeInputInList = false,
@@ -22910,6 +22903,11 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       } = _getListboxProps,
       otherListboxProps = _objectWithoutPropertiesLoose(_getListboxProps, _excluded2$9);
     const combinedListboxRef = useForkRef(listboxRef, externalListboxRef);
+    const defaultGetOptionLabel = option => {
+      var _option$label;
+      return (_option$label = option.label) != null ? _option$label : option;
+    };
+    const getOptionLabel = getOptionLabelProp || defaultGetOptionLabel;
 
     // If you modify this, make sure to keep the `AutocompleteOwnerState` type in sync.
     const ownerState = _extends({}, props, {
@@ -22917,6 +22915,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       expanded,
       focused,
       fullWidth,
+      getOptionLabel,
       hasClearIcon,
       hasPopupIcon,
       inputFocused: focusedTag === -1,
@@ -22988,7 +22987,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(classes.root, className),
+        className: clsx$1(classes.root, className),
         ownerState: ownerState
       }, getRootProps(other), {
         children: renderInput({
@@ -23015,7 +23014,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
                 title: clearText,
                 ownerState: ownerState
               }, clearIndicatorSlotProps, {
-                className: clsx(classes.clearIndicator, clearIndicatorSlotProps == null ? void 0 : clearIndicatorSlotProps.className),
+                className: clsx$1(classes.clearIndicator, clearIndicatorSlotProps == null ? void 0 : clearIndicatorSlotProps.className),
                 children: clearIcon
               })) : null, hasPopupIcon ? /*#__PURE__*/jsxRuntime_1(AutocompletePopupIndicator, _extends({}, getPopupIndicatorProps(), {
                 disabled: disabled,
@@ -23023,7 +23022,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
                 title: popupOpen ? closeText : openText,
                 ownerState: ownerState
               }, popupIndicatorSlotProps, {
-                className: clsx(classes.popupIndicator, popupIndicatorSlotProps == null ? void 0 : popupIndicatorSlotProps.className),
+                className: clsx$1(classes.popupIndicator, popupIndicatorSlotProps == null ? void 0 : popupIndicatorSlotProps.className),
                 children: popupIcon
               })) : null]
             })
@@ -23045,12 +23044,12 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         anchorEl: anchorEl,
         open: popupOpen
       }, popperSlotProps, {
-        className: clsx(classes.popper, popperSlotProps == null ? void 0 : popperSlotProps.className),
+        className: clsx$1(classes.popper, popperSlotProps == null ? void 0 : popperSlotProps.className),
         children: /*#__PURE__*/jsxRuntime_2(AutocompletePaper, _extends({
           ownerState: ownerState,
           as: PaperComponent
         }, paperSlotProps, {
-          className: clsx(classes.paper, paperSlotProps == null ? void 0 : paperSlotProps.className),
+          className: clsx$1(classes.paper, paperSlotProps == null ? void 0 : paperSlotProps.className),
           children: [loading && groupedOptions.length === 0 ? /*#__PURE__*/jsxRuntime_1(AutocompleteLoading, {
             className: classes.loading,
             ownerState: ownerState,
@@ -23220,9 +23219,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * A function that determines the filtered options to be rendered on search.
      *
      * @default createFilterOptions()
-     * @param {T[]} options The options to render.
+     * @param {Value[]} options The options to render.
      * @param {object} state The state of the component.
-     * @returns {T[]}
+     * @returns {Value[]}
      */
     filterOptions: PropTypes.func,
     /**
@@ -23256,7 +23255,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * Used to determine the disabled state for a given option.
      *
-     * @param {T} option The option to test.
+     * @param {Value} option The option to test.
      * @returns {boolean}
      */
     getOptionDisabled: PropTypes.func,
@@ -23266,7 +23265,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      *
      * If used in free solo mode, it must accept both the type of the options and a string.
      *
-     * @param {T} option
+     * @param {Value} option
      * @returns {string}
      * @default (option) => option.label ?? option
      */
@@ -23275,7 +23274,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * If provided, the options will be grouped under the returned string.
      * The groupBy value is also used as the text for group headings when `renderGroup` is not provided.
      *
-     * @param {T} options The options to group.
+     * @param {Value} options The options to group.
      * @returns {string}
      */
     groupBy: PropTypes.func,
@@ -23304,8 +23303,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * Uses strict equality by default.
      * ⚠️ Both arguments need to be handled, an option can only match with one value.
      *
-     * @param {T} option The option to test.
-     * @param {T} value The value to test against.
+     * @param {Value} option The option to test.
+     * @param {Value} value The value to test against.
      * @returns {boolean}
      */
     isOptionEqualToValue: PropTypes.func,
@@ -23353,7 +23352,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * Callback fired when the value changes.
      *
      * @param {React.SyntheticEvent} event The event source of the callback.
-     * @param {T|T[]} value The new value of the component.
+     * @param {Value|Value[]} value The new value of the component.
      * @param {string} reason One of "createOption", "selectOption", "removeOption", "blur" or "clear".
      * @param {string} [details]
      */
@@ -23370,7 +23369,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * Callback fired when the highlight option changes.
      *
      * @param {React.SyntheticEvent} event The event source of the callback.
-     * @param {T} option The highlighted option.
+     * @param {Value} option The highlighted option.
      * @param {string} reason Can be: `"keyboard"`, `"auto"`, `"mouse"`, `"touch"`.
      */
     onHighlightChange: PropTypes.func,
@@ -23447,7 +23446,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * Render the option, use `getOptionLabel` by default.
      *
      * @param {object} props The props to apply on the li element.
-     * @param {T} option The option to render.
+     * @param {Value} option The option to render.
      * @param {object} state The state of each option.
      * @param {object} ownerState The state of the Autocomplete component.
      * @returns {ReactNode}
@@ -23456,7 +23455,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * Render the selected value.
      *
-     * @param {T[]} value The `value` provided to the component.
+     * @param {Value[]} value The `value` provided to the component.
      * @param {function} getTagProps A tag props getter.
      * @param {object} ownerState The state of the Autocomplete component.
      * @returns {ReactNode}
@@ -23678,7 +23677,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(classes.root, className),
+      className: clsx$1(classes.root, className),
       ref: ref
     }, other, {
       children: children
@@ -23843,21 +23842,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(classes.root, className),
+      className: clsx$1(classes.root, className),
       ref: ref
     }, other, {
       children: [extraAvatars ? /*#__PURE__*/jsxRuntime_2(AvatarGroupAvatar, _extends({
         ownerState: ownerState,
         variant: variant
       }, additionalAvatarSlotProps, {
-        className: clsx(classes.avatar, additionalAvatarSlotProps == null ? void 0 : additionalAvatarSlotProps.className),
+        className: clsx$1(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(child.props.className, classes.avatar),
+          className: clsx$1(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
@@ -24214,7 +24213,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(classes.root, className, rootSlotProps == null ? void 0 : rootSlotProps.className),
+        className: clsx$1(classes.root, className, rootSlotProps == null ? void 0 : rootSlotProps.className),
         ownerState: _extends({}, ownerState, rootSlotProps == null ? void 0 : rootSlotProps.ownerState),
         classes: classes,
         ref: ref,
@@ -24550,13 +24549,13 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         as: component
       },
       ownerState,
-      className: clsx(rootSlotProps == null ? void 0 : rootSlotProps.className, classes.root, className)
+      className: clsx$1(rootSlotProps == null ? void 0 : rootSlotProps.className, classes.root, className)
     });
     const badgeProps = useSlotProps({
       elementType: BadgeSlot,
       externalSlotProps: badgeSlotProps,
       ownerState,
-      className: clsx(classes.badge, badgeSlotProps == null ? void 0 : badgeSlotProps.className)
+      className: clsx$1(classes.badge, badgeSlotProps == null ? void 0 : badgeSlotProps.className)
     });
     return /*#__PURE__*/jsxRuntime_2(RootSlot, _extends({}, rootProps, {
       children: [children, /*#__PURE__*/jsxRuntime_1(BadgeSlot, _extends({}, badgeProps, {
@@ -24731,7 +24730,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const classes = useUtilityClasses$1r(ownerState);
     return /*#__PURE__*/jsxRuntime_1(BottomNavigationRoot, _extends({
       as: component,
-      className: clsx(classes.root, className),
+      className: clsx$1(classes.root, className),
       ref: ref,
       ownerState: ownerState
     }, other, {
@@ -24900,7 +24899,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     };
     return /*#__PURE__*/jsxRuntime_2(BottomNavigationActionRoot, _extends({
       ref: ref,
-      className: clsx(classes.root, className),
+      className: clsx$1(classes.root, className),
       focusRipple: true,
       onClick: handleChange,
       ownerState: ownerState
@@ -25222,7 +25221,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       ref: ref,
       component: component,
       color: "text.secondary",
-      className: clsx(classes.root, className),
+      className: clsx$1(classes.root, className),
       ownerState: ownerState
     }, other, {
       children: /*#__PURE__*/jsxRuntime_1(BreadcrumbsOl, {
@@ -25572,11 +25571,11 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     });
     return /*#__PURE__*/jsxRuntime_2(ButtonRoot, _extends({
       ownerState: ownerState,
-      className: clsx(contextProps.className, classes.root, className),
+      className: clsx$1(contextProps.className, classes.root, className),
       component: component,
       disabled: disabled,
       focusRipple: !disableFocusRipple,
-      focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
+      focusVisibleClassName: clsx$1(classes.focusVisible, focusVisibleClassName),
       ref: ref,
       type: type
     }, other, {
@@ -25612,7 +25611,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * The component used for the root node.
      * Either a string to use a HTML element or a component.
      */
-    component: PropTypes /* @typescript-to-proptypes-ignore */.elementType,
+    component: PropTypes.elementType,
     /**
      * If `true`, the component is disabled.
      * @default false
@@ -25846,7 +25845,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(classes.root, className),
+      className: clsx$1(classes.root, className),
       ref: ref,
       ownerState: ownerState
     }, other, {
@@ -25973,7 +25972,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     });
     const classes = useUtilityClasses$1m(ownerState);
     return /*#__PURE__*/jsxRuntime_1(CardRoot, _extends({
-      className: clsx(classes.root, className),
+      className: clsx$1(classes.root, className),
       elevation: raised ? 8 : undefined,
       ref: ref,
       ownerState: ownerState
@@ -26087,8 +26086,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const ownerState = props;
     const classes = useUtilityClasses$1l(ownerState);
     return /*#__PURE__*/jsxRuntime_2(CardActionAreaRoot, _extends({
-      className: clsx(classes.root, className),
-      focusVisibleClassName: clsx(focusVisibleClassName, classes.focusVisible),
+      className: clsx$1(classes.root, className),
+      focusVisibleClassName: clsx$1(focusVisibleClassName, classes.focusVisible),
       ref: ref,
       ownerState: ownerState
     }, other, {
@@ -26178,7 +26177,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     });
     const classes = useUtilityClasses$1k(ownerState);
     return /*#__PURE__*/jsxRuntime_1(CardActionsRoot, _extends({
-      className: clsx(classes.root, className),
+      className: clsx$1(classes.root, className),
       ownerState: ownerState,
       ref: ref
     }, other));
@@ -26256,7 +26255,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const classes = useUtilityClasses$1j(ownerState);
     return /*#__PURE__*/jsxRuntime_1(CardContentRoot, _extends({
       as: component,
-      className: clsx(classes.root, className),
+      className: clsx$1(classes.root, className),
       ownerState: ownerState,
       ref: ref
     }, other));
@@ -26396,7 +26395,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       }));
     }
     return /*#__PURE__*/jsxRuntime_2(CardHeaderRoot, _extends({
-      className: clsx(classes.root, className),
+      className: clsx$1(classes.root, className),
       as: component,
       ref: ref,
       ownerState: ownerState
@@ -26550,7 +26549,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     });
     const classes = useUtilityClasses$1h(ownerState);
     return /*#__PURE__*/jsxRuntime_1(CardMediaRoot, _extends({
-      className: clsx(classes.root, className),
+      className: clsx$1(classes.root, className),
       as: component,
       role: !isMediaComponent && image ? 'img' : undefined,
       ref: ref,
@@ -26732,7 +26731,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const classes = useUtilityClasses$1g(ownerState);
     return /*#__PURE__*/jsxRuntime_2(SwitchBaseRoot, _extends({
       component: "span",
-      className: clsx(classes.root, className),
+      className: clsx$1(classes.root, className),
       centerRipple: true,
       focusRipple: !disableFocusRipple,
       disabled: disabled,
@@ -26975,7 +26974,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       }),
       ownerState: ownerState,
       ref: ref,
-      className: clsx(classes.root, className)
+      className: clsx$1(classes.root, className)
     }, other, {
       classes: classes
     }));
@@ -27235,7 +27234,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(classes.root, className),
+      className: clsx$1(classes.root, className),
       style: _extends({
         width: size,
         height: size
@@ -27635,10 +27634,10 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
           as: component,
           theme
         }, {
-          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))
+          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(backdropSlotProps == null ? void 0 : backdropSlotProps.className, BackdropProps == null ? void 0 : BackdropProps.className, classes == null ? void 0 : classes.backdrop)
+          className: clsx$1(backdropSlotProps == null ? void 0 : backdropSlotProps.className, BackdropProps == null ? void 0 : BackdropProps.className, classes == null ? void 0 : classes.backdrop)
         })
       },
       onTransitionEnter: () => setExited(false),
@@ -28037,7 +28036,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       };
     }, [ariaLabelledby]);
     return /*#__PURE__*/jsxRuntime_1(DialogRoot, _extends({
-      className: clsx(classes.root, className),
+      className: clsx$1(classes.root, className),
       closeAfterTransition: true,
       components: {
         Backdrop: DialogBackdrop
@@ -28062,7 +28061,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         role: "presentation"
       }, TransitionProps, {
         children: /*#__PURE__*/jsxRuntime_1(DialogContainer, {
-          className: clsx(classes.container),
+          className: clsx$1(classes.container),
           onMouseDown: handleMouseDown,
           ownerState: ownerState,
           children: /*#__PURE__*/jsxRuntime_1(DialogPaper, _extends({
@@ -28072,7 +28071,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
             "aria-describedby": ariaDescribedby,
             "aria-labelledby": ariaLabelledby
           }, PaperProps, {
-            className: clsx(classes.paper, PaperProps.className),
+            className: clsx$1(classes.paper, PaperProps.className),
             ownerState: ownerState,
             children: /*#__PURE__*/jsxRuntime_1(DialogContext$1.Provider, {
               value: dialogContextValue,
@@ -28267,7 +28266,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(classes.root, className),
+      className: clsx$1(classes.root, className),
       ownerState: ownerState,
       ref: ref
     }, other));
@@ -28366,7 +28365,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(classes.root, className),
+      className: clsx$1(classes.root, className),
       ownerState: ownerState,
       ref: ref
     }, other));
@@ -28439,7 +28438,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       color: "text.secondary",
       ref: ref,
       ownerState: ownerState,
-      className: clsx(classes.root, className)
+      className: clsx$1(classes.root, className)
     }, props, {
       classes: classes
     }));
@@ -28503,7 +28502,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(classes.root, className),
+      className: clsx$1(classes.root, className),
       ownerState: ownerState,
       ref: ref,
       variant: "h6",
@@ -28700,7 +28699,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(classes.root, className),
+      className: clsx$1(classes.root, className),
       role: role,
       ref: ref,
       ownerState: ownerState
@@ -28712,6 +28711,12 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       }) : null
     }));
   });
+
+  /**
+   * The following flag is used to ensure that this component isn't tabbable i.e.
+   * does not get highlight/focus inside of MUI List.
+   */
+  Divider.muiSkipListHighlight = true;
   Divider.propTypes /* remove-proptypes */ = {
     // ----------------------------- Warning --------------------------------
     // | These PropTypes are generated from the TypeScript type definitions |
@@ -29257,13 +29262,13 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       elevation: variant === 'temporary' ? elevation : 0,
       square: true
     }, PaperProps, {
-      className: clsx(classes.paper, PaperProps.className),
+      className: clsx$1(classes.paper, PaperProps.className),
       ownerState: ownerState,
       children: children
     }));
     if (variant === 'permanent') {
       return /*#__PURE__*/jsxRuntime_1(DrawerDockedRoot, _extends({
-        className: clsx(classes.root, classes.docked, className),
+        className: clsx$1(classes.root, classes.docked, className),
         ownerState: ownerState,
         ref: ref
       }, other, {
@@ -29280,7 +29285,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(classes.root, classes.docked, className),
+        className: clsx$1(classes.root, classes.docked, className),
         ownerState: ownerState,
         ref: ref
       }, other, {
@@ -29293,7 +29298,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       BackdropProps: _extends({}, BackdropProps, BackdropPropsProp, {
         transitionDuration
       }),
-      className: clsx(classes.root, classes.modal, className),
+      className: clsx$1(classes.root, classes.modal, className),
       open: open,
       ownerState: ownerState,
       onClose: onClose,
@@ -29529,11 +29534,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(classes.root, className),
+      className: clsx$1(classes.root, className),
       component: component,
       disabled: disabled,
       focusRipple: !disableFocusRipple,
-      focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
+      focusVisibleClassName: clsx$1(classes.focusVisible, focusVisibleClassName),
       ownerState: ownerState,
       ref: ref
     }, other, {
@@ -29569,7 +29574,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * The component used for the root node.
      * Either a string to use a HTML element or a component.
      */
-    component: PropTypes /* @typescript-to-proptypes-ignore */.elementType,
+    component: PropTypes.elementType,
     /**
      * If `true`, the component is disabled.
      * @default false
@@ -30217,7 +30222,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(classes.root, className),
+        className: clsx$1(classes.root, className),
         ref: ref
       }, other, {
         children: children
@@ -30497,12 +30502,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(classes.label, typographySlotProps == null ? void 0 : typographySlotProps.className),
+        className: clsx$1(classes.label, typographySlotProps == null ? void 0 : typographySlotProps.className),
         children: label
       }));
     }
     return /*#__PURE__*/jsxRuntime_2(FormControlLabelRoot, _extends({
-      className: clsx(classes.root, className),
+      className: clsx$1(classes.root, className),
       ownerState: ownerState,
       ref: ref
     }, other, {
@@ -30664,7 +30669,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(classes.root, className),
+      className: clsx$1(classes.root, className),
       ownerState: ownerState,
       ref: ref
     }, other));
@@ -30786,7 +30791,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(classes.root, className),
+      className: clsx$1(classes.root, className),
       ref: ref
     }, other, {
       children: children === ' ' ? // notranslate needed while Google Translate will not fix zero-width space issue
@@ -30947,7 +30952,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(classes.root, className),
+      className: clsx$1(classes.root, className),
       ref: ref
     }, other, {
       children: [children, fcs.required && /*#__PURE__*/jsxRuntime_2(AsteriskComponent, {
@@ -31433,7 +31438,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(classes.root, className),
+        className: clsx$1(classes.root, className),
         as: component,
         ref: ref
       }, otherFiltered))
@@ -32315,7 +32320,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(classes.root, className),
+      className: clsx$1(classes.root, className),
       ownerState: ownerState,
       children: children
     });
@@ -32589,7 +32594,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(baseClassName,
+      className: clsx$1(baseClassName,
       // Prevent the translation of the text content.
       // The font relies on the exact text content to render the icon.
       'notranslate', classes.root, className),
@@ -32741,7 +32746,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(classes.root, classes[variant], className),
+      className: clsx$1(classes.root, classes[variant], className),
       ref: ref,
       style: style,
       ownerState: ownerState
@@ -32898,7 +32903,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(classes.root, classes[variant], className),
+      className: clsx$1(classes.root, classes[variant], className),
       ref: ref,
       style: _extends({
         height,
@@ -32919,7 +32924,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(classes.img, child.props.className)
+            className: clsx$1(classes.img, child.props.className)
           });
         }
         return child;
@@ -33117,7 +33122,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(classes.root, className),
+      className: clsx$1(classes.root, className),
       ref: ref
     }, other, {
       children: [/*#__PURE__*/jsxRuntime_2(ImageListItemBarTitleWrap, {
@@ -33612,7 +33617,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(classes.root, className),
+        className: clsx$1(classes.root, className),
         ref: ref
       }, other, {
         children: typeof children === 'string' && !disableTypography ? /*#__PURE__*/jsxRuntime_1(Typography$1, {
@@ -33809,7 +33814,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       "data-shrink": shrink,
       ownerState: ownerState,
       ref: ref,
-      className: clsx(classes.root, className)
+      className: clsx$1(classes.root, className)
     }, other, {
       classes: classes
     }));
@@ -34161,7 +34166,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       }
     }
     return /*#__PURE__*/jsxRuntime_2(LinearProgressRoot, _extends({
-      className: clsx(classes.root, className),
+      className: clsx$1(classes.root, className),
       ownerState: ownerState,
       role: "progressbar"
     }, rootProps, {
@@ -34380,7 +34385,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(classes.root, className),
+      className: clsx$1(classes.root, className),
       classes: TypographyClasses,
       component: component,
       onBlur: handleBlur,
@@ -34526,7 +34531,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(classes.root, className),
+        className: clsx$1(classes.root, className),
         ref: ref,
         ownerState: ownerState
       }, other, {
@@ -34727,9 +34732,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(classes.focusVisible, focusVisibleClassName),
+        focusVisibleClassName: clsx$1(classes.focusVisible, focusVisibleClassName),
         ownerState: ownerState,
-        className: clsx(classes.root, className)
+        className: clsx$1(classes.root, className)
       }, other, {
         classes: classes,
         children: children
@@ -34769,7 +34774,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * The component used for the root node.
      * Either a string to use a HTML element or a component.
      */
-    component: PropTypes /* @typescript-to-proptypes-ignore */.elementType,
+    component: PropTypes.elementType,
     /**
      * If `true`, compact vertical padding designed for keyboard and mouse input is used.
      * The prop defaults to the value inherited from the parent List component.
@@ -34871,7 +34876,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(classes.root, className),
+      className: clsx$1(classes.root, className),
       ownerState: ownerState,
       ref: ref
     }, other));
@@ -35082,13 +35087,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(classes.root, rootProps.className, className),
+      className: clsx$1(classes.root, rootProps.className, className),
       disabled
     }, other);
     let Component = componentProp || 'li';
     if (button) {
       componentProps.component = componentProp || 'div';
-      componentProps.focusVisibleClassName = clsx(listItemClasses$1.focusVisible, focusVisibleClassName);
+      componentProps.focusVisibleClassName = clsx$1(listItemClasses$1.focusVisible, focusVisibleClassName);
       Component = ButtonBase$1;
     }
 
@@ -35109,7 +35114,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(classes.container, ContainerClassName),
+          className: clsx$1(classes.container, ContainerClassName),
           ref: handleRef,
           ownerState: ownerState
         }, ContainerProps, {
@@ -35195,7 +35200,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * The component used for the root node.
      * Either a string to use a HTML element or a component.
      */
-    component: PropTypes /* @typescript-to-proptypes-ignore */.elementType,
+    component: PropTypes.elementType,
     /**
      * The components used for each slot inside.
      *
@@ -35353,7 +35358,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(classes.root, className),
+      className: clsx$1(classes.root, className),
       ownerState: ownerState,
       ref: ref
     }, other));
@@ -35438,7 +35443,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(classes.root, className),
+      className: clsx$1(classes.root, className),
       ownerState: ownerState,
       ref: ref
     }, other));
@@ -35566,7 +35571,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       }));
     }
     return /*#__PURE__*/jsxRuntime_2(ListItemTextRoot, _extends({
-      className: clsx(classes.root, className),
+      className: clsx$1(classes.root, className),
       ownerState: ownerState,
       ref: ref
     }, other, {
@@ -36191,7 +36196,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         ref: handlePaperRef
       },
       ownerState,
-      className: clsx(classes.paper, externalPaperSlotProps == null ? void 0 : externalPaperSlotProps.className)
+      className: clsx$1(classes.paper, externalPaperSlotProps == null ? void 0 : externalPaperSlotProps.className)
     });
     const _useSlotProps = useSlotProps({
         elementType: RootSlot,
@@ -36208,7 +36213,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
           open
         },
         ownerState,
-        className: clsx(classes.root, className)
+        className: clsx$1(classes.root, className)
       }),
       {
         slotProps: rootSlotPropsProp
@@ -36410,7 +36415,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", "disableAutoFocusItem", "MenuListProps", "onClose", "open", "PaperProps", "PopoverClasses", "transitionDuration", "TransitionProps", "variant"];
+    _excluded2$5 = ["autoFocus", "children", "className", "disableAutoFocusItem", "MenuListProps", "onClose", "open", "PaperProps", "PopoverClasses", "transitionDuration", "TransitionProps", "variant", "slots", "slotProps"];
   const RTL_ORIGIN = {
     vertical: 'top',
     horizontal: 'right'
@@ -36457,6 +36462,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     outline: 0
   });
   const Menu = /*#__PURE__*/React__namespace.forwardRef(function Menu(inProps, ref) {
+    var _slots$paper, _slotProps$paper;
     const props = useThemeProps({
       props: inProps,
       name: 'MuiMenu'
@@ -36464,6 +36470,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const {
         autoFocus = true,
         children,
+        className,
         disableAutoFocusItem = false,
         MenuListProps = {},
         onClose,
@@ -36474,7 +36481,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         TransitionProps: {
           onEntering
         } = {},
-        variant = 'selectedMenu'
+        variant = 'selectedMenu',
+        slots = {},
+        slotProps = {}
       } = props,
       TransitionProps = _objectWithoutPropertiesLoose(props.TransitionProps, _excluded$R),
       other = _objectWithoutPropertiesLoose(props, _excluded2$5);
@@ -36536,6 +36545,20 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         }
       }
     });
+    const PaperSlot = (_slots$paper = slots.paper) != null ? _slots$paper : MenuPaper;
+    const paperExternalSlotProps = (_slotProps$paper = slotProps.paper) != null ? _slotProps$paper : PaperProps;
+    const rootSlotProps = useSlotProps({
+      elementType: slots.root,
+      externalSlotProps: slotProps.root,
+      ownerState,
+      className: [classes.root, className]
+    });
+    const paperSlotProps = useSlotProps({
+      elementType: PaperSlot,
+      externalSlotProps: paperExternalSlotProps,
+      ownerState,
+      className: classes.paper
+    });
     return /*#__PURE__*/jsxRuntime_1(MenuRoot, _extends({
       onClose: onClose,
       anchorOrigin: {
@@ -36544,16 +36567,13 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       },
       transformOrigin: isRtl ? RTL_ORIGIN : LTR_ORIGIN,
       slots: {
-        paper: MenuPaper
+        paper: PaperSlot,
+        root: slots.root
       },
       slotProps: {
-        paper: _extends({}, PaperProps, {
-          classes: _extends({}, PaperProps.classes, {
-            root: classes.paper
-          })
-        })
+        root: rootSlotProps,
+        paper: paperSlotProps
       },
-      className: classes.root,
       open: open,
       ref: ref,
       transitionDuration: transitionDuration,
@@ -36570,7 +36590,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         autoFocusItem: autoFocusItem,
         variant: variant
       }, MenuListProps, {
-        className: clsx(classes.list, MenuListProps.className),
+        className: clsx$1(classes.list, MenuListProps.className),
         children: children
       }))
     }));
@@ -36601,6 +36621,10 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * Override or extend the styles applied to the component.
      */
     classes: PropTypes.object,
+    /**
+     * @ignore
+     */
+    className: PropTypes.string,
     /**
      * When opening the menu will not focus the active item but the `[role="menu"]`
      * unless `autoFocus` is also set to `false`. Not using the default means not
@@ -36633,6 +36657,25 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * `classes` prop applied to the [`Popover`](/material-ui/api/popover/) element.
      */
     PopoverClasses: PropTypes.object,
+    /**
+     * The extra props for the slot components.
+     * You can override the existing props or add new ones.
+     *
+     * @default {}
+     */
+    slotProps: PropTypes.shape({
+      paper: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+      root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+    }),
+    /**
+     * The components used for each slot inside.
+     *
+     * @default {}
+     */
+    slots: PropTypes.shape({
+      paper: PropTypes.elementType,
+      root: PropTypes.elementType
+    }),
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
@@ -36822,8 +36865,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         role: role,
         tabIndex: tabIndex,
         component: component,
-        focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
-        className: clsx(classes.root, className)
+        focusVisibleClassName: clsx$1(classes.focusVisible, focusVisibleClassName),
+        className: clsx$1(classes.root, className)
       }, other, {
         ownerState: ownerState,
         classes: classes
@@ -36857,7 +36900,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * The component used for the root node.
      * Either a string to use a HTML element or a component.
      */
-    component: PropTypes /* @typescript-to-proptypes-ignore */.elementType,
+    component: PropTypes.elementType,
     /**
      * If `true`, compact vertical padding designed for keyboard and mouse input is used.
      * The prop defaults to the value inherited from the parent Menu component.
@@ -37038,7 +37081,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(classes.root, className),
+      className: clsx$1(classes.root, className),
       ref: ref,
       ownerState: ownerState
     }, other, {
@@ -37048,7 +37091,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(classes.dot, index === activeStep && classes.dotActive),
+          className: clsx$1(classes.dot, index === activeStep && classes.dotActive),
           ownerState: ownerState,
           dotActive: index === activeStep
         }, index))
@@ -37257,7 +37300,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(classes.select, className),
+        className: clsx$1(classes.select, className),
         disabled: disabled,
         ref: inputRef || ref
       }, other)), props.multiple ? null : /*#__PURE__*/jsxRuntime_1(NativeSelectIcon, {
@@ -37379,7 +37422,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         }, inputProps, input ? input.props.inputProps : {}),
         ref
       }, other, {
-        className: clsx(classes.root, input.props.className, className)
+        className: clsx$1(classes.root, input.props.className, className)
       }))
     });
   });
@@ -38269,14 +38312,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(classes.root, className),
+      className: clsx$1(classes.root, className),
       children: "\u2026"
     }) : /*#__PURE__*/jsxRuntime_2(PaginationItemPage, _extends({
       ref: ref,
       ownerState: ownerState,
       component: component,
       disabled: disabled,
-      className: clsx(classes.root, className)
+      className: clsx$1(classes.root, className)
     }, other, {
       children: [type === 'page' && page, Icon ? /*#__PURE__*/jsxRuntime_1(PaginationItemPageIcon, {
         as: Icon,
@@ -38471,7 +38514,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(classes.root, className),
+      className: clsx$1(classes.root, className),
       ownerState: ownerState,
       ref: ref
     }, other, {
@@ -38809,7 +38852,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       checked: checked,
       onChange: onChange,
       ref: ref,
-      className: clsx(classes.root, className)
+      className: clsx$1(classes.root, className)
     }, other));
   });
   Radio.propTypes /* remove-proptypes */ = {
@@ -39183,7 +39226,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(classes.icon, isFilled ? classes.iconFilled : classes.iconEmpty, isHovered && classes.iconHover, isFocused && classes.iconFocus, isActive && classes.iconActive),
+      className: clsx$1(classes.icon, isFilled ? classes.iconFilled : classes.iconEmpty, isHovered && classes.iconHover, isFocused && classes.iconFocus, isActive && classes.iconActive),
       ownerState: _extends({}, ownerState, {
         iconEmpty: !isFilled,
         iconFilled: isFilled,
@@ -39430,7 +39473,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       ref: handleRef,
       onMouseMove: handleMouseMove,
       onMouseLeave: handleMouseLeave,
-      className: clsx(classes.root, className, readOnly && 'MuiRating-readOnly'),
+      className: clsx$1(classes.root, className, readOnly && 'MuiRating-readOnly'),
       ownerState: ownerState,
       role: readOnly ? 'img' : null,
       "aria-label": readOnly ? getLabelText(value) : null
@@ -39461,7 +39504,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(classes.decimal, isActive && classes.iconActive),
+            className: clsx$1(classes.decimal, isActive && classes.iconActive),
             ownerState: ownerState,
             iconActive: isActive,
             children: items.map(($, indexDecimal) => {
@@ -39486,7 +39529,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(classes.label, classes.labelEmptyValue),
+        className: clsx$1(classes.label, classes.labelEmptyValue),
         ownerState: ownerState,
         children: [/*#__PURE__*/jsxRuntime_1("input", {
           className: classes.visuallyHidden,
@@ -39688,7 +39731,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(classes.root, className),
+      className: clsx$1(classes.root, className),
       ref: ref,
       ownerState: ownerState
     }, other));
@@ -40163,7 +40206,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         onFocus: onFocus
       }, SelectDisplayProps, {
         ownerState: ownerState,
-        className: clsx(SelectDisplayProps.className, classes.select, className)
+        className: clsx$1(SelectDisplayProps.className, classes.select, className)
         // The id is required for proper a11y
         ,
         id: buttonId,
@@ -40469,7 +40512,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         notched: true
       } : {}, {
         ref: inputComponentRef,
-        className: clsx(InputComponent.props.className, className)
+        className: clsx$1(InputComponent.props.className, className)
       }, !input && {
         variant
       }, other))
@@ -40567,7 +40610,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * Callback fired when a menu item is selected.
      *
-     * @param {SelectChangeEvent<T>} event The event source of the callback.
+     * @param {SelectChangeEvent<Value>} event The event source of the callback.
      * You can pull out the new value by accessing `event.target.value` (any).
      * **Warning**: This is a generic event, not a change event, unless the change event is caused by browser autofill.
      * @param {object} [child] The react element that was selected when `native` is `false` (default).
@@ -40777,7 +40820,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(classes.root, className),
+      className: clsx$1(classes.root, className),
       ownerState: ownerState
     }, other, {
       style: _extends({
@@ -40856,7 +40899,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       open
     } = props;
     const utilityClasses = {
-      offset: clsx(open && sliderClasses$1.valueLabelOpen),
+      offset: clsx$1(open && sliderClasses$1.valueLabelOpen),
       circle: sliderClasses$1.valueLabelCircle,
       label: sliderClasses$1.valueLabelLabel
     };
@@ -40877,10 +40920,10 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       return null;
     }
     return /*#__PURE__*/React__namespace.cloneElement(children, {
-      className: clsx(children.props.className)
+      className: clsx$1(children.props.className)
     }, /*#__PURE__*/jsxRuntime_2(React__namespace.Fragment, {
       children: [children.props.children, /*#__PURE__*/jsxRuntime_1("span", {
-        className: clsx(classes.offset, className),
+        className: clsx$1(classes.offset, className),
         "aria-hidden": true,
         children: /*#__PURE__*/jsxRuntime_1("span", {
           className: classes.circle,
@@ -41483,7 +41526,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
             markActive
           }, {
             style: _extends({}, style, markProps.style),
-            className: clsx(markProps.className, markActive && classes.markActive)
+            className: clsx$1(markProps.className, markActive && classes.markActive)
           })), mark.label != null ? /*#__PURE__*/jsxRuntime_1(MarkLabelSlot, _extends({
             "aria-hidden": true,
             "data-index": index
@@ -41491,7 +41534,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
             markLabelActive: markActive
           }, {
             style: _extends({}, style, markLabelProps.style),
-            className: clsx(classes.markLabel, markLabelProps.className, markActive && classes.markLabelActive),
+            className: clsx$1(classes.markLabel, markLabelProps.className, markActive && classes.markLabelActive),
             children: mark.label
           })) : null]
         }, index);
@@ -41513,7 +41556,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(classes.thumb, thumbProps.className, active === index && classes.active, focusedThumbIndex === index && classes.focusVisible),
+              className: clsx$1(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,
@@ -41883,7 +41926,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       role: role,
       square: true,
       elevation: 6,
-      className: clsx(classes.root, className),
+      className: clsx$1(classes.root, className),
       ownerState: ownerState,
       ref: ref
     }, other, {
@@ -42760,7 +42803,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       });
     });
     return /*#__PURE__*/jsxRuntime_2(SpeedDialRoot, _extends({
-      className: clsx(classes.root, className),
+      className: clsx$1(classes.root, className),
       ref: ref,
       role: "presentation",
       onKeyDown: handleKeyDown,
@@ -42783,7 +42826,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
           "aria-controls": `${id}-actions`
         }, FabProps, {
           onClick: handleClick,
-          className: clsx(classes.fab, FabProps.className),
+          className: clsx$1(classes.fab, FabProps.className),
           ref: handleFabRef,
           ownerState: ownerState,
           children: /*#__PURE__*/React__namespace.isValidElement(icon) && isMuiElement(icon, ['SpeedDialIcon']) ? /*#__PURE__*/React__namespace.cloneElement(icon, {
@@ -42794,7 +42837,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(classes.actions, !open && classes.actionsClosed),
+        className: clsx$1(classes.actions, !open && classes.actionsClosed),
         ownerState: ownerState,
         children: children
       })]
@@ -43364,7 +43407,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(other.className, children.props.className),
+      className: clsx$1(other.className, children.props.className),
       onTouchStart: detectTouchStart,
       ref: handleRef
     }, followCursor ? {
@@ -43437,14 +43480,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(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$1(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(classes.tooltip, (_ref7 = (_slotProps$tooltip2 = slotProps.tooltip) != null ? _slotProps$tooltip2 : componentsProps.tooltip) == null ? void 0 : _ref7.className)
+      className: clsx$1(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(classes.arrow, (_ref8 = (_slotProps$arrow2 = slotProps.arrow) != null ? _slotProps$arrow2 : componentsProps.arrow) == null ? void 0 : _ref8.className)
+      className: clsx$1(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({
@@ -43807,7 +43850,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(classes.fab, className),
+      className: clsx$1(classes.fab, className),
       tabIndex: -1,
       role: "menuitem",
       ownerState: ownerState
@@ -44001,7 +44044,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       return icon;
     }
     return /*#__PURE__*/jsxRuntime_2(SpeedDialIconRoot, _extends({
-      className: clsx(classes.root, className),
+      className: clsx$1(classes.root, className),
       ref: ref,
       ownerState: ownerState
     }, other, {
@@ -44168,7 +44211,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(classes.root, className),
+      className: clsx$1(classes.root, className),
       ref: ref,
       ownerState: ownerState
     }, other, {
@@ -44320,7 +44363,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(classNameProp, classes.root);
+      const className = clsx$1(classNameProp, classes.root);
       if (error) {
         return /*#__PURE__*/jsxRuntime_1(StepIconRoot, _extends({
           as: Warning,
@@ -44543,7 +44586,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(classes.root, className),
+      className: clsx$1(classes.root, className),
       ref: ref,
       ownerState: ownerState
     }, other, {
@@ -44562,7 +44605,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(classes.label, labelSlotProps == null ? void 0 : labelSlotProps.className),
+          className: clsx$1(classes.label, labelSlotProps == null ? void 0 : labelSlotProps.className),
           children: children
         })) : null, optional]
       })]
@@ -44709,7 +44752,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       TouchRippleProps: {
         className: classes.touchRipple
       },
-      className: clsx(classes.root, className),
+      className: clsx$1(classes.root, className),
       ref: ref,
       ownerState: ownerState,
       "aria-current": active ? 'step' : undefined
@@ -44845,7 +44888,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(classes.root, className),
+      className: clsx$1(classes.root, className),
       ref: ref,
       ownerState: ownerState
     }, other, {
@@ -44955,7 +44998,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       transitionDuration = undefined;
     }
     return /*#__PURE__*/jsxRuntime_1(StepContentRoot, _extends({
-      className: clsx(classes.root, className),
+      className: clsx$1(classes.root, className),
       ref: ref,
       ownerState: ownerState
     }, other, {
@@ -45099,7 +45142,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(classes.root, className),
+        className: clsx$1(classes.root, className),
         ref: ref
       }, other, {
         children: steps
@@ -45200,7 +45243,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('PrivateSwipeArea-root', classes.root, classes[`anchor${capitalize(anchor)}`], className),
+      className: clsx$1('PrivateSwipeArea-root', classes.root, classes[`anchor${capitalize(anchor)}`], className),
       ref: ref,
       style: _extends({
         [isHorizontal(anchor) ? 'width' : 'height']: width
@@ -46005,7 +46048,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       ownerState: ownerState
     });
     return /*#__PURE__*/jsxRuntime_2(SwitchRoot, {
-      className: clsx(classes.root, className),
+      className: clsx$1(classes.root, className),
       sx: sx,
       ownerState: ownerState,
       children: [/*#__PURE__*/jsxRuntime_1(SwitchSwitchBase, _extends({
@@ -46259,7 +46302,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(classes.iconWrapper, iconProp.props.className)
+      className: clsx$1(classes.iconWrapper, iconProp.props.className)
     }) : iconProp;
     const handleClick = event => {
       if (!selected && onChange) {
@@ -46279,7 +46322,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     };
     return /*#__PURE__*/jsxRuntime_2(TabRoot, _extends({
       focusRipple: !disableFocusRipple,
-      className: clsx(classes.root, className),
+      className: clsx$1(classes.root, className),
       ref: ref,
       role: "tab",
       "aria-selected": selected,
@@ -46458,7 +46501,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(classes.root, className),
+        className: clsx$1(classes.root, className),
         ownerState: ownerState
       }, other))
     });
@@ -46562,7 +46605,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(classes.root, className),
+        className: clsx$1(classes.root, className),
         as: component,
         ref: ref,
         role: component === defaultComponent$3 ? null : 'rowgroup',
@@ -46738,7 +46781,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(classes.root, className),
+      className: clsx$1(classes.root, className),
       "aria-sort": ariaSort,
       scope: scope,
       ownerState: ownerState
@@ -46845,7 +46888,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(classes.root, className),
+      className: clsx$1(classes.root, className),
       ownerState: ownerState
     }, other));
   });
@@ -46923,7 +46966,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(classes.root, className),
+        className: clsx$1(classes.root, className),
         ref: ref,
         role: component === defaultComponent$2 ? null : 'rowgroup',
         ownerState: ownerState
@@ -47004,7 +47047,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(classes.root, className),
+        className: clsx$1(classes.root, className),
         ref: ref,
         role: component === defaultComponent$1 ? null : 'rowgroup',
         ownerState: ownerState
@@ -47107,7 +47150,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(classes.root, className),
+      className: clsx$1(classes.root, className),
       ref: ref,
       ownerState: ownerState
     }, other));
@@ -47447,7 +47490,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       ref: ref,
       as: component,
       ownerState: ownerState,
-      className: clsx(classes.root, className)
+      className: clsx$1(classes.root, className)
     }, other, {
       children: /*#__PURE__*/jsxRuntime_2(TablePaginationToolbar, {
         className: classes.toolbar,
@@ -47469,10 +47512,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(classes.input, classes.selectRoot, (SelectProps.classes || {}).root),
-            select: clsx(classes.select, (SelectProps.classes || {}).select),
+            root: clsx$1(classes.input, classes.selectRoot, (SelectProps.classes || {}).root),
+            select: clsx$1(classes.select, (SelectProps.classes || {}).select),
             // TODO v5 remove `selectIcon`
-            icon: clsx(classes.selectIcon, (SelectProps.classes || {}).icon)
+            icon: clsx$1(classes.selectIcon, (SelectProps.classes || {}).icon)
           }),
           children: rowsPerPageOptions.map(rowsPerPageOption => /*#__PURE__*/React.createElement(MenuItemComponent, _extends({}, !isHostComponent(MenuItemComponent) && {
             ownerState
@@ -47720,7 +47763,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(classes.root, className),
+      className: clsx$1(classes.root, className),
       role: component === defaultComponent ? null : 'row',
       ownerState: ownerState
     }, other));
@@ -47873,7 +47916,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(classes.root, className),
+      className: clsx$1(classes.root, className),
       component: "span",
       disableRipple: true,
       ownerState: ownerState,
@@ -47881,7 +47924,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(classes.icon),
+        className: clsx$1(classes.icon),
         ownerState: ownerState
       })]
     }));
@@ -48104,7 +48147,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     });
     return /*#__PURE__*/jsxRuntime_1(TabScrollButtonRoot, _extends({
       component: "div",
-      className: clsx(classes.root, className),
+      className: clsx$1(classes.root, className),
       ref: ref,
       role: null,
       ownerState: ownerState,
@@ -48431,10 +48474,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     }
     const [mounted, setMounted] = React__namespace.useState(false);
     const [indicatorStyle, setIndicatorStyle] = React__namespace.useState(defaultIndicatorStyle);
-    const [displayScroll, setDisplayScroll] = React__namespace.useState({
-      start: false,
-      end: false
-    });
+    const [displayStartScroll, setDisplayStartScroll] = React__namespace.useState(false);
+    const [displayEndScroll, setDisplayEndScroll] = React__namespace.useState(false);
+    const [updateScrollObserver, setUpdateScrollObserver] = React__namespace.useState(false);
     const [scrollerStyle, setScrollerStyle] = React__namespace.useState({
       overflow: 'hidden',
       scrollbarWidth: 0
@@ -48583,9 +48625,9 @@ 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(classes.scrollableX, classes.hideScrollbar)
+        className: clsx$1(classes.scrollableX, classes.hideScrollbar)
       }) : null;
-      const scrollButtonsActive = displayScroll.start || displayScroll.end;
+      const scrollButtonsActive = displayStartScroll || displayEndScroll;
       const showScrollButtons = scrollable && (scrollButtons === 'auto' && scrollButtonsActive || scrollButtons === true);
       conditionalElements.scrollButtonStart = showScrollButtons ? /*#__PURE__*/jsxRuntime_1(ScrollButtonComponent, _extends({
         slots: {
@@ -48597,9 +48639,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         orientation: orientation,
         direction: isRtl ? 'right' : 'left',
         onClick: handleStartScrollClick,
-        disabled: !displayScroll.start
+        disabled: !displayStartScroll
       }, TabScrollButtonProps, {
-        className: clsx(classes.scrollButtons, TabScrollButtonProps.className)
+        className: clsx$1(classes.scrollButtons, TabScrollButtonProps.className)
       })) : null;
       conditionalElements.scrollButtonEnd = showScrollButtons ? /*#__PURE__*/jsxRuntime_1(ScrollButtonComponent, _extends({
         slots: {
@@ -48611,9 +48653,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         orientation: orientation,
         direction: isRtl ? 'left' : 'right',
         onClick: handleEndScrollClick,
-        disabled: !displayScroll.end
+        disabled: !displayEndScroll
       }, TabScrollButtonProps, {
-        className: clsx(classes.scrollButtons, TabScrollButtonProps.className)
+        className: clsx$1(classes.scrollButtons, TabScrollButtonProps.className)
       })) : null;
       return conditionalElements;
     };
@@ -48641,30 +48683,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     });
     const updateScrollButtonState = useEventCallback(() => {
       if (scrollable && scrollButtons !== false) {
-        const {
-          scrollTop,
-          scrollHeight,
-          clientHeight,
-          scrollWidth,
-          clientWidth
-        } = tabsRef.current;
-        let showStartScroll;
-        let showEndScroll;
-        if (vertical) {
-          showStartScroll = scrollTop > 1;
-          showEndScroll = scrollTop < scrollHeight - clientHeight - 1;
-        } else {
-          const scrollLeft = getNormalizedScrollLeft(tabsRef.current, theme.direction);
-          // use 1 for the potential rounding error with browser zooms.
-          showStartScroll = isRtl ? scrollLeft < scrollWidth - clientWidth - 1 : scrollLeft > 1;
-          showEndScroll = !isRtl ? scrollLeft < scrollWidth - clientWidth - 1 : scrollLeft > 1;
-        }
-        if (showStartScroll !== displayScroll.start || showEndScroll !== displayScroll.end) {
-          setDisplayScroll({
-            start: showStartScroll,
-            end: showEndScroll
-          });
-        }
+        setUpdateScrollObserver(!updateScrollObserver);
       }
     });
     React__namespace.useEffect(() => {
@@ -48677,7 +48696,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         // replaced by Suspense with a fallback, once React is updated to version 18
         if (tabsRef.current) {
           updateIndicatorState();
-          updateScrollButtonState();
         }
       });
       const win = ownerWindow(tabsRef.current);
@@ -48696,21 +48714,44 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
           resizeObserver.disconnect();
         }
       };
-    }, [updateIndicatorState, updateScrollButtonState]);
-    const handleTabsScroll = React__namespace.useMemo(() => debounce$1(() => {
-      updateScrollButtonState();
-    }), [updateScrollButtonState]);
+    }, [updateIndicatorState]);
+
+    /**
+     * Toggle visibility of start and end scroll buttons
+     * Using IntersectionObserver on first and last Tabs.
+     */
     React__namespace.useEffect(() => {
-      return () => {
-        handleTabsScroll.clear();
-      };
-    }, [handleTabsScroll]);
+      const tabListChildren = Array.from(tabListRef.current.children);
+      const length = tabListChildren.length;
+      if (typeof IntersectionObserver !== 'undefined' && length > 0 && scrollable && scrollButtons !== false) {
+        const firstTab = tabListChildren[0];
+        const lastTab = tabListChildren[length - 1];
+        const observerOptions = {
+          root: tabsRef.current,
+          threshold: 0.99
+        };
+        const handleScrollButtonStart = entries => {
+          setDisplayStartScroll(!entries[0].isIntersecting);
+        };
+        const firstObserver = new IntersectionObserver(handleScrollButtonStart, observerOptions);
+        firstObserver.observe(firstTab);
+        const handleScrollButtonEnd = entries => {
+          setDisplayEndScroll(!entries[0].isIntersecting);
+        };
+        const lastObserver = new IntersectionObserver(handleScrollButtonEnd, observerOptions);
+        lastObserver.observe(lastTab);
+        return () => {
+          firstObserver.disconnect();
+          lastObserver.disconnect();
+        };
+      }
+      return undefined;
+    }, [scrollable, scrollButtons, updateScrollObserver, childrenProp == null ? void 0 : childrenProp.length]);
     React__namespace.useEffect(() => {
       setMounted(true);
     }, []);
     React__namespace.useEffect(() => {
       updateIndicatorState();
-      updateScrollButtonState();
     });
     React__namespace.useEffect(() => {
       // Don't animate on the first render.
@@ -48721,7 +48762,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(classes.indicator, TabIndicatorProps.className),
+      className: clsx$1(classes.indicator, TabIndicatorProps.className),
       ownerState: ownerState,
       style: _extends({}, indicatorStyle, TabIndicatorProps.style)
     }));
@@ -48789,7 +48830,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(classes.root, className),
+      className: clsx$1(classes.root, className),
       ownerState: ownerState,
       ref: ref,
       as: component
@@ -48802,7 +48843,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
           [vertical ? `margin${isRtl ? 'Left' : 'Right'}` : 'marginBottom']: visibleScrollbar ? undefined : -scrollerStyle.scrollbarWidth
         },
         ref: tabsRef,
-        onScroll: handleTabsScroll,
         children: [/*#__PURE__*/jsxRuntime_1(FlexContainer, {
           "aria-label": ariaLabel,
           "aria-labelledby": ariaLabelledBy,
@@ -49126,7 +49166,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       inputProps: inputProps
     }, InputMore, InputProps));
     return /*#__PURE__*/jsxRuntime_2(TextFieldRoot, _extends({
-      className: clsx(classes.root, className),
+      className: clsx$1(classes.root, className),
       disabled: disabled,
       error: error,
       fullWidth: fullWidth,
@@ -49453,7 +49493,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       }
     };
     return /*#__PURE__*/jsxRuntime_1(ToggleButtonRoot, _extends({
-      className: clsx(classes.root, className),
+      className: clsx$1(classes.root, className),
       disabled: disabled,
       focusRipple: !disableFocusRipple,
       ref: ref,
@@ -49684,7 +49724,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     };
     return /*#__PURE__*/jsxRuntime_1(ToggleButtonGroupRoot, _extends({
       role: "group",
-      className: clsx(classes.root, className),
+      className: clsx$1(classes.root, className),
       ref: ref,
       ownerState: ownerState
     }, other, {
@@ -49698,7 +49738,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
           }
         }
         return /*#__PURE__*/React__namespace.cloneElement(child, {
-          className: clsx(classes.grouped, child.props.className),
+          className: clsx$1(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,
@@ -50276,6 +50316,4 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   exports.withStyles = withStyles;
   exports.withTheme = withTheme;
 
-  Object.defineProperty(exports, '__esModule', { value: true });
-
 }));