@mui/material 5.2.0 → 5.2.4

package/umd/material-ui.development.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.2.0
+/** @license MUI v5.2.4
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -661,7 +661,7 @@
     return StyleSheet;
   }();
 
-  var e="-ms-";var r="-moz-";var a="-webkit-";var c="comm";var n="rule";var t="decl";var i="@import";var p="@keyframes";var k=Math.abs;var d=String.fromCharCode;function m(e,r){return (((r<<2^z(e,0))<<2^z(e,1))<<2^z(e,2))<<2^z(e,3)}function g(e){return e.trim()}function x$1(e,r){return (e=r.exec(e))?e[0]:e}function y(e,r,a){return e.replace(r,a)}function j(e,r){return e.indexOf(r)}function z(e,r){return e.charCodeAt(r)|0}function C(e,r,a){return e.slice(r,a)}function A(e){return e.length}function M(e){return e.length}function O(e,r){return r.push(e),e}function S(e,r){return e.map(r).join("")}var q=1;var B=1;var D=0;var E=0;var F=0;var G="";function H(e,r,a,c,n,t,s){return {value:e,root:r,parent:a,type:c,props:n,children:t,line:q,column:B,length:s,return:""}}function I(e,r,a){return H(e,r.root,r.parent,a,r.props,r.children,0)}function J(){return F}function K(){F=E>0?z(G,--E):0;if(B--,F===10)B=1,q--;return F}function L(){F=E<D?z(G,E++):0;if(B++,F===10)B=1,q++;return F}function N(){return z(G,E)}function P(){return E}function Q(e,r){return C(G,e,r)}function R(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 T(e){return q=B=1,D=A(G=e),E=0,[]}function U(e){return G="",e}function V(e){return g(Q(E-1,_$4(e===91?e+2:e===40?e+1:e)))}function X(e){while(F=N())if(F<33)L();else break;return R(e)>2||R(F)>3?"":" "}function Z(e,r){while(--r&&L())if(F<48||F>102||F>57&&F<65||F>70&&F<97)break;return Q(e,P()+(r<6&&N()==32&&L()==32))}function _$4(e){while(L())switch(F){case e:return E;case 34:case 39:return _$4(e===34||e===39?e:F);case 40:if(e===41)_$4(e);break;case 92:L();break}return E}function ee(e,r){while(L())if(e+F===47+10)break;else if(e+F===42+42&&N()===47)break;return "/*"+Q(r,E-1)+"*"+d(e===47?e:L())}function re(e){while(!R(N()))L();return Q(e,E)}function ae(e){return U(ce("",null,null,null,[""],e=T(e),0,[0],e))}function ce(e,r,a,c,n,t,s,u,i){var f=0;var o=0;var l=s;var v=0;var h=0;var p=0;var b=1;var w=1;var $=1;var k=0;var m="";var g=n;var x=t;var j=c;var z=m;while(w)switch(p=k,k=L()){case 34:case 39:case 91:case 40:z+=V(k);break;case 9:case 10:case 13:case 32:z+=X(p);break;case 92:z+=Z(P()-1,7);continue;case 47:switch(N()){case 42:case 47:O(te(ee(L(),P()),r,a),i);break;default:z+="/";}break;case 123*b:u[f++]=A(z)*$;case 125*b:case 59:case 0:switch(k){case 0:case 125:w=0;case 59+o:if(h>0&&A(z)-l)O(h>32?se(z+";",c,a,l-1):se(y(z," ","")+";",c,a,l-2),i);break;case 59:z+=";";default:O(j=ne(z,r,a,f,o,n,u,m,g=[],x=[],l),t);if(k===123)if(o===0)ce(z,r,j,j,g,t,l,u,x);else switch(v){case 100:case 109:case 115:ce(e,j,j,c&&O(ne(e,j,j,0,0,n,u,m,n,g=[],l),x),n,x,l,u,c?g:x);break;default:ce(z,j,j,j,[""],x,l,u,x);}}f=o=h=0,b=$=1,m=z="",l=s;break;case 58:l=1+A(z),h=p;default:if(b<1)if(k==123)--b;else if(k==125&&b++==0&&K()==125)continue;switch(z+=d(k),k*b){case 38:$=o>0?1:(z+="\f",-1);break;case 44:u[f++]=(A(z)-1)*$,$=1;break;case 64:if(N()===45)z+=V(L());v=N(),o=A(m=z+=re(P())),k++;break;case 45:if(p===45&&A(z)==2)b=0;}}return t}function ne(e,r,a,c,t,s,u,i,f,o,l){var v=t-1;var h=t===0?s:[""];var p=M(h);for(var b=0,w=0,$=0;b<c;++b)for(var d=0,m=C(e,v+1,v=k(w=u[b])),x=e;d<p;++d)if(x=g(w>0?h[d]+" "+m:y(m,/&\f/g,h[d])))f[$++]=x;return H(e,r,a,t===0?n:i,f,o,l)}function te(e,r,a){return H(e,r,a,c,d(J()),C(e,2,-2),0)}function se(e,r,a,c){return H(e,r,a,t,C(e,0,c),C(e,c+1,-1),c)}function ue(c,n){switch(m(c,n)){case 5103:return a+"print-"+c+c;case 5737:case 4201:case 3177:case 3433:case 1641:case 4457:case 2921:case 5572:case 6356:case 5844:case 3191:case 6645:case 3005:case 6391:case 5879:case 5623:case 6135:case 4599:case 4855:case 4215:case 6389:case 5109:case 5365:case 5621:case 3829:return a+c+c;case 5349:case 4246:case 4810:case 6968:case 2756:return a+c+r+c+e+c+c;case 6828:case 4268:return a+c+e+c+c;case 6165:return a+c+e+"flex-"+c+c;case 5187:return a+c+y(c,/(\w+).+(:[^]+)/,a+"box-$1$2"+e+"flex-$1$2")+c;case 5443:return a+c+e+"flex-item-"+y(c,/flex-|-self/,"")+c;case 4675:return a+c+e+"flex-line-pack"+y(c,/align-content|flex-|-self/,"")+c;case 5548:return a+c+e+y(c,"shrink","negative")+c;case 5292:return a+c+e+y(c,"basis","preferred-size")+c;case 6060:return a+"box-"+y(c,"-grow","")+a+c+e+y(c,"grow","positive")+c;case 4554:return a+y(c,/([^-])(transform)/g,"$1"+a+"$2")+c;case 6187:return y(y(y(c,/(zoom-|grab)/,a+"$1"),/(image-set)/,a+"$1"),c,"")+c;case 5495:case 3959:return y(c,/(image-set\([^]*)/,a+"$1"+"$`$1");case 4968:return y(y(c,/(.+:)(flex-)?(.*)/,a+"box-pack:$3"+e+"flex-pack:$3"),/s.+-b[^;]+/,"justify")+a+c+c;case 4095:case 3583:case 4068:case 2532:return y(c,/(.+)-inline(.+)/,a+"$1$2")+c;case 8116:case 7059:case 5753:case 5535:case 5445:case 5701:case 4933:case 4677:case 5533:case 5789:case 5021:case 4765:if(A(c)-1-n>6)switch(z(c,n+1)){case 109:if(z(c,n+4)!==45)break;case 102:return y(c,/(.+:)(.+)-([^]+)/,"$1"+a+"$2-$3"+"$1"+r+(z(c,n+3)==108?"$3":"$2-$3"))+c;case 115:return ~j(c,"stretch")?ue(y(c,"stretch","fill-available"),n)+c:c}break;case 4949:if(z(c,n+1)!==115)break;case 6444:switch(z(c,A(c)-3-(~j(c,"!important")&&10))){case 107:return y(c,":",":"+a)+c;case 101:return y(c,/(.+:)([^;!]+)(;|!.+)?/,"$1"+a+(z(c,14)===45?"inline-":"")+"box$3"+"$1"+a+"$2$3"+"$1"+e+"$2box$3")+c}break;case 5936:switch(z(c,n+11)){case 114:return a+c+e+y(c,/[svh]\w+-[tblr]{2}/,"tb")+c;case 108:return a+c+e+y(c,/[svh]\w+-[tblr]{2}/,"tb-rl")+c;case 45:return a+c+e+y(c,/[svh]\w+-[tblr]{2}/,"lr")+c}return a+c+e+c+c}return c}function ie(e,r){var a="";var c=M(e);for(var n=0;n<c;n++)a+=r(e[n],n,e,r)||"";return a}function fe(e,r,a,s){switch(e.type){case i:case t:return e.return=e.return||e.value;case c:return "";case n:e.value=e.props.join(",");}return A(a=ie(e.children,s))?e.return=e.value+"{"+a+"}":""}function oe(e){var r=M(e);return function(a,c,n,t){var s="";for(var u=0;u<r;u++)s+=e[u](a,c,n,t)||"";return s}}function ve(c,s,u,i){if(!c.return)switch(c.type){case t:c.return=ue(c.value,c.length);break;case p:return ie([I(y(c.value,"@","@"+a),c,"")],i);case n:if(c.length)return S(c.props,(function(n){switch(x$1(n,/(::plac\w+|:read-\w+)/)){case":read-only":case":read-write":return ie([I(y(n,/:(read-\w+)/,":"+r+"$1"),c,"")],i);case"::placeholder":return ie([I(y(n,/:(plac\w+)/,":"+a+"input-$1"),c,""),I(y(n,/:(plac\w+)/,":"+r+"$1"),c,""),I(y(n,/:(plac\w+)/,e+"input-$1"),c,"")],i)}return ""}))}}
+  var e="-ms-";var r="-moz-";var a="-webkit-";var c="comm";var n="rule";var t="decl";var i="@import";var p="@keyframes";var k=Math.abs;var d=String.fromCharCode;var g=Object.assign;function m(e,r){return (((r<<2^z(e,0))<<2^z(e,1))<<2^z(e,2))<<2^z(e,3)}function x$1(e){return e.trim()}function y(e,r){return (e=r.exec(e))?e[0]:e}function j(e,r,a){return e.replace(r,a)}function C(e,r){return e.indexOf(r)}function z(e,r){return e.charCodeAt(r)|0}function A(e,r,a){return e.slice(r,a)}function O(e){return e.length}function M(e){return e.length}function S(e,r){return r.push(e),e}function q(e,r){return e.map(r).join("")}var B=1;var D=1;var E=0;var F=0;var G=0;var H="";function I(e,r,a,c,n,t,s){return {value:e,root:r,parent:a,type:c,props:n,children:t,line:B,column:D,length:s,return:""}}function J(e,r){return g(I("",null,null,"",null,null,0),e,{length:-e.length},r)}function K(){return G}function L(){G=F>0?z(H,--F):0;if(D--,G===10)D=1,B--;return G}function N(){G=F<E?z(H,F++):0;if(D++,G===10)D=1,B++;return G}function P(){return z(H,F)}function Q(){return F}function R(e,r){return A(H,e,r)}function T(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 U(e){return B=D=1,E=O(H=e),F=0,[]}function V(e){return H="",e}function W(e){return x$1(R(F-1,ee(e===91?e+2:e===40?e+1:e)))}function Y(e){while(G=P())if(G<33)N();else break;return T(e)>2||T(G)>3?"":" "}function _$4(e,r){while(--r&&N())if(G<48||G>102||G>57&&G<65||G>70&&G<97)break;return R(e,Q()+(r<6&&P()==32&&N()==32))}function ee(e){while(N())switch(G){case e:return F;case 34:case 39:if(e!==34&&e!==39)ee(G);break;case 40:if(e===41)ee(e);break;case 92:N();break}return F}function re(e,r){while(N())if(e+G===47+10)break;else if(e+G===42+42&&P()===47)break;return "/*"+R(r,F-1)+"*"+d(e===47?e:N())}function ae(e){while(!T(P()))N();return R(e,F)}function ce(e){return V(ne("",null,null,null,[""],e=U(e),0,[0],e))}function ne(e,r,a,c,n,t,s,u,i){var f=0;var o=0;var l=s;var v=0;var h=0;var p=0;var b=1;var w=1;var $=1;var k=0;var g="";var m=n;var x=t;var y=c;var z=g;while(w)switch(p=k,k=N()){case 40:if(p!=108&&z.charCodeAt(l-1)==58){if(C(z+=j(W(k),"&","&\f"),"&\f")!=-1)$=-1;break}case 34:case 39:case 91:z+=W(k);break;case 9:case 10:case 13:case 32:z+=Y(p);break;case 92:z+=_$4(Q()-1,7);continue;case 47:switch(P()){case 42:case 47:S(se(re(N(),Q()),r,a),i);break;default:z+="/";}break;case 123*b:u[f++]=O(z)*$;case 125*b:case 59:case 0:switch(k){case 0:case 125:w=0;case 59+o:if(h>0&&O(z)-l)S(h>32?ue(z+";",c,a,l-1):ue(j(z," ","")+";",c,a,l-2),i);break;case 59:z+=";";default:S(y=te(z,r,a,f,o,n,u,g,m=[],x=[],l),t);if(k===123)if(o===0)ne(z,r,y,y,m,t,l,u,x);else switch(v){case 100:case 109:case 115:ne(e,y,y,c&&S(te(e,y,y,0,0,n,u,g,n,m=[],l),x),n,x,l,u,c?m:x);break;default:ne(z,y,y,y,[""],x,0,u,x);}}f=o=h=0,b=$=1,g=z="",l=s;break;case 58:l=1+O(z),h=p;default:if(b<1)if(k==123)--b;else if(k==125&&b++==0&&L()==125)continue;switch(z+=d(k),k*b){case 38:$=o>0?1:(z+="\f",-1);break;case 44:u[f++]=(O(z)-1)*$,$=1;break;case 64:if(P()===45)z+=W(N());v=P(),o=l=O(g=z+=ae(Q())),k++;break;case 45:if(p===45&&O(z)==2)b=0;}}return t}function te(e,r,a,c,t,s,u,i,f,o,l){var v=t-1;var h=t===0?s:[""];var p=M(h);for(var b=0,w=0,$=0;b<c;++b)for(var d=0,g=A(e,v+1,v=k(w=u[b])),m=e;d<p;++d)if(m=x$1(w>0?h[d]+" "+g:j(g,/&\f/g,h[d])))f[$++]=m;return I(e,r,a,t===0?n:i,f,o,l)}function se(e,r,a){return I(e,r,a,c,d(K()),A(e,2,-2),0)}function ue(e,r,a,c){return I(e,r,a,t,A(e,0,c),A(e,c+1,-1),c)}function ie(c,n){switch(m(c,n)){case 5103:return a+"print-"+c+c;case 5737:case 4201:case 3177:case 3433:case 1641:case 4457:case 2921:case 5572:case 6356:case 5844:case 3191:case 6645:case 3005:case 6391:case 5879:case 5623:case 6135:case 4599:case 4855:case 4215:case 6389:case 5109:case 5365:case 5621:case 3829:return a+c+c;case 5349:case 4246:case 4810:case 6968:case 2756:return a+c+r+c+e+c+c;case 6828:case 4268:return a+c+e+c+c;case 6165:return a+c+e+"flex-"+c+c;case 5187:return a+c+j(c,/(\w+).+(:[^]+)/,a+"box-$1$2"+e+"flex-$1$2")+c;case 5443:return a+c+e+"flex-item-"+j(c,/flex-|-self/,"")+c;case 4675:return a+c+e+"flex-line-pack"+j(c,/align-content|flex-|-self/,"")+c;case 5548:return a+c+e+j(c,"shrink","negative")+c;case 5292:return a+c+e+j(c,"basis","preferred-size")+c;case 6060:return a+"box-"+j(c,"-grow","")+a+c+e+j(c,"grow","positive")+c;case 4554:return a+j(c,/([^-])(transform)/g,"$1"+a+"$2")+c;case 6187:return j(j(j(c,/(zoom-|grab)/,a+"$1"),/(image-set)/,a+"$1"),c,"")+c;case 5495:case 3959:return j(c,/(image-set\([^]*)/,a+"$1"+"$`$1");case 4968:return j(j(c,/(.+:)(flex-)?(.*)/,a+"box-pack:$3"+e+"flex-pack:$3"),/s.+-b[^;]+/,"justify")+a+c+c;case 4095:case 3583:case 4068:case 2532:return j(c,/(.+)-inline(.+)/,a+"$1$2")+c;case 8116:case 7059:case 5753:case 5535:case 5445:case 5701:case 4933:case 4677:case 5533:case 5789:case 5021:case 4765:if(O(c)-1-n>6)switch(z(c,n+1)){case 109:if(z(c,n+4)!==45)break;case 102:return j(c,/(.+:)(.+)-([^]+)/,"$1"+a+"$2-$3"+"$1"+r+(z(c,n+3)==108?"$3":"$2-$3"))+c;case 115:return ~C(c,"stretch")?ie(j(c,"stretch","fill-available"),n)+c:c}break;case 4949:if(z(c,n+1)!==115)break;case 6444:switch(z(c,O(c)-3-(~C(c,"!important")&&10))){case 107:return j(c,":",":"+a)+c;case 101:return j(c,/(.+:)([^;!]+)(;|!.+)?/,"$1"+a+(z(c,14)===45?"inline-":"")+"box$3"+"$1"+a+"$2$3"+"$1"+e+"$2box$3")+c}break;case 5936:switch(z(c,n+11)){case 114:return a+c+e+j(c,/[svh]\w+-[tblr]{2}/,"tb")+c;case 108:return a+c+e+j(c,/[svh]\w+-[tblr]{2}/,"tb-rl")+c;case 45:return a+c+e+j(c,/[svh]\w+-[tblr]{2}/,"lr")+c}return a+c+e+c+c}return c}function fe(e,r){var a="";var c=M(e);for(var n=0;n<c;n++)a+=r(e[n],n,e,r)||"";return a}function oe(e,r,a,s){switch(e.type){case i:case t:return e.return=e.return||e.value;case c:return "";case p:return e.return=e.value+"{"+fe(e.children,s)+"}";case n:e.value=e.props.join(",");}return O(a=fe(e.children,s))?e.return=e.value+"{"+a+"}":""}function le(e){var r=M(e);return function(a,c,n,t){var s="";for(var u=0;u<r;u++)s+=e[u](a,c,n,t)||"";return s}}function he(c,s,u,i){if(c.length>-1)if(!c.return)switch(c.type){case t:c.return=ie(c.value,c.length);break;case p:return fe([J(c,{value:j(c.value,"@","@"+a)})],i);case n:if(c.length)return q(c.props,(function(n){switch(y(n,/(::plac\w+|:read-\w+)/)){case":read-only":case":read-write":return fe([J(c,{props:[j(n,/:(read-\w+)/,":"+r+"$1")]})],i);case"::placeholder":return fe([J(c,{props:[j(n,/:(plac\w+)/,":"+a+"input-$1")]}),J(c,{props:[j(n,/:(plac\w+)/,":"+r+"$1")]}),J(c,{props:[j(n,/:(plac\w+)/,e+"input-$1")]})],i)}return ""}))}}
 
   var weakMemoize = function weakMemoize(func) {
     // $FlowFixMe flow doesn't include all non-primitive types as allowed for weakmaps
@@ -689,20 +689,20 @@
 
     while (true) {
       previous = character;
-      character = N(); // &\f
+      character = P(); // &\f
 
       if (previous === 38 && character === 12) {
         points[index] = 1;
       }
 
-      if (R(character)) {
+      if (T(character)) {
         break;
       }
 
-      L();
+      N();
     }
 
-    return Q(begin, E);
+    return R(begin, F);
   };
 
   var toRules = function toRules(parsed, points) {
@@ -711,10 +711,10 @@
     var character = 44;
 
     do {
-      switch (R(character)) {
+      switch (T(character)) {
         case 0:
           // &\f
-          if (character === 38 && N() === 12) {
+          if (character === 38 && P() === 12) {
             // this is not 100% correct, we don't account for literal sequences here - like for example quoted strings
             // stylis inserts \f after & to know when & where it should replace this sequence with the context selector
             // and when it should just concatenate the outer and inner selectors
@@ -722,18 +722,18 @@
             points[index] = 1;
           }
 
-          parsed[index] += identifierWithPointTracking(E - 1, points, index);
+          parsed[index] += identifierWithPointTracking(F - 1, points, index);
           break;
 
         case 2:
-          parsed[index] += V(character);
+          parsed[index] += W(character);
           break;
 
         case 4:
           // comma
           if (character === 44) {
             // colon
-            parsed[++index] = N() === 58 ? '&\f' : '';
+            parsed[++index] = P() === 58 ? '&\f' : '';
             points[index] = parsed[index].length;
             break;
           }
@@ -743,13 +743,13 @@
         default:
           parsed[index] += d(character);
       }
-    } while (character = L());
+    } while (character = N());
 
     return parsed;
   };
 
   var getRules = function getRules(value, points) {
-    return U(toRules(T(value), points));
+    return V(toRules(U(value), points));
   }; // WeakSet would be more appropriate, but only WeakMap is supported in IE11
 
 
@@ -879,7 +879,7 @@
       };
     });
   });
-  var defaultStylisPlugins = [ve];
+  var defaultStylisPlugins = [he];
 
   var createCache = function createCache(options) {
     var key = options.key;
@@ -955,7 +955,7 @@
 
     if (isBrowser$4) {
       var currentSheet;
-      var finalizingPlugins = [fe, function (element) {
+      var finalizingPlugins = [oe, function (element) {
         if (!element.root) {
           if (element["return"]) {
             currentSheet.insert(element["return"]);
@@ -966,10 +966,10 @@
           }
         }
       } ];
-      var serializer = oe(omnipresentPlugins.concat(stylisPlugins, finalizingPlugins));
+      var serializer = le(omnipresentPlugins.concat(stylisPlugins, finalizingPlugins));
 
       var stylis = function stylis(styles) {
-        return ie(ae(styles), serializer);
+        return fe(ce(styles), serializer);
       };
 
       _insert = function insert(selector, serialized, sheet, shouldCache) {
@@ -990,12 +990,12 @@
         }
       };
     } else {
-      var _finalizingPlugins = [fe];
+      var _finalizingPlugins = [oe];
 
-      var _serializer = oe(omnipresentPlugins.concat(stylisPlugins, _finalizingPlugins));
+      var _serializer = le(omnipresentPlugins.concat(stylisPlugins, _finalizingPlugins));
 
       var _stylis = function _stylis(styles) {
-        return ie(ae(styles), _serializer);
+        return fe(ce(styles), _serializer);
       }; // $FlowFixMe
 
 
@@ -2008,7 +2008,7 @@
 
   var pkg = {
   	name: "@emotion/react",
-  	version: "11.6.0",
+  	version: "11.7.0",
   	main: "dist/emotion-react.cjs.js",
   	module: "dist/emotion-react.esm.js",
   	browser: {
@@ -4998,37 +4998,22 @@
   const useEnhancedEffect = typeof window !== 'undefined' ? React__namespace.useLayoutEffect : React__namespace.useEffect;
   var useEnhancedEffect$1 = useEnhancedEffect;
 
-  function useRandomId(idOverride) {
+  let globalId = 0;
+  function useId(idOverride) {
     const [defaultId, setDefaultId] = React__namespace.useState(idOverride);
     const id = idOverride || defaultId;
     React__namespace.useEffect(() => {
       if (defaultId == null) {
         // Fallback to this default id when possible.
-        // Use the random value for client-side rendering only.
+        // Use the incrementing value for client-side rendering only.
         // We can't use it server-side.
-        setDefaultId(`mui-${Math.round(Math.random() * 1e9)}`);
+        // If you want to use random values please consider the Birthday Problem: https://en.wikipedia.org/wiki/Birthday_problem
+        globalId += 1;
+        setDefaultId(`mui-${globalId}`);
       }
     }, [defaultId]);
     return id;
   }
-  /**
-   *
-   * @example <div id={useId()} />
-   * @param idOverride
-   * @returns {string}
-   */
-
-
-  function useReactId(idOverride) {
-    // TODO: Remove `React as any` once `useId` is part of stable types.
-    if (React__namespace.useId !== undefined) {
-      const reactId = React__namespace.useId();
-      return idOverride != null ? idOverride : reactId;
-    } // eslint-disable-next-line react-hooks/rules-of-hooks -- `React.useId` is invariant at runtime.
-
-
-    return useRandomId(idOverride);
-  }
 
   function unsupportedProp(props, propName, componentName, location, propFullName) {
 
@@ -5113,7 +5098,7 @@
   // based on https://github.com/WICG/focus-visible/blob/v4.1.5/src/focus-visible.js
   let hadKeyboardEvent = true;
   let hadFocusVisibleRecently = false;
-  let hadFocusVisibleRecentlyTimeout = null;
+  let hadFocusVisibleRecentlyTimeout;
   const inputTypesWhitelist = {
     text: true,
     search: true,
@@ -5449,6 +5434,23 @@
   validator.isRequired = requiredInteger;
   var integerPropType = validator;
 
+  /**
+   * Add keys, values of `defaultProps` that does not exist in `props`
+   * @param {object} defaultProps
+   * @param {object} props
+   * @returns {object} resolved props
+   */
+  function resolveProps(defaultProps, props) {
+    const output = _extends({}, props);
+
+    Object.keys(defaultProps).forEach(propName => {
+      if (output[propName] === undefined) {
+        output[propName] = defaultProps[propName];
+      }
+    });
+    return output;
+  }
+
   function merge(acc, item) {
     if (!item) {
       return acc;
@@ -6363,6 +6365,15 @@
     });
   }
 
+  function sx(styles) {
+    return ({
+      theme
+    }) => styleFunctionSx({
+      sx: styles,
+      theme
+    });
+  }
+
   function toVal(mix) {
   	var k, y, str='';
 
@@ -6452,6 +6463,21 @@
       return up(key);
     }
 
+    function not(key) {
+      // handle first and last key separately, for better readability
+      const keyIndex = keys.indexOf(key);
+
+      if (keyIndex === 0) {
+        return up(keys[1]);
+      }
+
+      if (keyIndex === keys.length - 1) {
+        return down(keys[keyIndex]);
+      }
+
+      return between(key, keys[keys.indexOf(key) + 1]).replace('@media', '@media not all and');
+    }
+
     return _extends({
       keys,
       values,
@@ -6459,6 +6485,7 @@
       down,
       between,
       only,
+      not,
       unit
     }, other);
   }
@@ -6912,7 +6939,6 @@
     };
   }
 
-  /* eslint-disable no-restricted-syntax */
   function getThemeProps(params) {
     const {
       theme,
@@ -6924,20 +6950,7 @@
       return props;
     }
 
-    const output = _extends({}, props); // Resolve default props, code borrow from React source.
-    // https://github.com/facebook/react/blob/15a8f031838a553e41c0b66eb1bcf1da8448104d/packages/react/src/ReactElement.js#L221
-
-
-    const defaultProps = theme.components[name].defaultProps;
-    let propName;
-
-    for (propName in defaultProps) {
-      if (output[propName] === undefined) {
-        output[propName] = defaultProps[propName];
-      }
-    }
-
-    return output;
+    return resolveProps(theme.components[name].defaultProps, props);
   }
 
   function useThemeProps$1({
@@ -7326,7 +7339,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       const componentValue = theme.components[component] || {};
       componentValue.defaultProps = props[component];
       theme.components[component] = componentValue;
-    }); // css overrides
+    }); // CSS overrides
 
     Object.keys(styleOverrides).forEach(component => {
       const componentValue = theme.components[component] || {};
@@ -7375,6 +7388,49 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     return theme;
   }
 
+  /**
+   * Determines if a given element is a DOM element name (i.e. not a React component).
+   */
+  function isHostComponent(element) {
+    return typeof element === 'string';
+  }
+
+  /**
+   * Appends the ownerState object to the props, merging with the existing one if necessary.
+   *
+   * @param elementType Type of the element that owns the `existingProps`. If the element is a DOM node, `ownerState` are not applied.
+   * @param existingProps Props of the element.
+   * @param ownerState
+   */
+
+  function appendOwnerState(elementType, existingProps = {}, ownerState) {
+    if (isHostComponent(elementType)) {
+      return existingProps;
+    }
+
+    return _extends({}, existingProps, {
+      ownerState: _extends({}, existingProps.ownerState, ownerState)
+    });
+  }
+
+  /**
+   * Extracts event handlers from a given object.
+   * A prop is considered an event handler if it is a function and its name starts with `on`.
+   *
+   * @param object An object to extract event handlers from.
+   */
+  function extractEventHandlers(object, excludeKeys = []) {
+    if (object === undefined) {
+      return {};
+    }
+
+    const result = {};
+    Object.keys(object).filter(prop => prop.match(/^on[A-Z]/) && typeof object[prop] === 'function' && !excludeKeys.includes(prop)).forEach(prop => {
+      result[prop] = object[prop];
+    });
+    return result;
+  }
+
   // Give up on IE11 support for this feature
 
   function stripDiacritics(string) {
@@ -7476,7 +7532,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       selectOnFocus = !props.freeSolo,
       value: valueProp
     } = props;
-    const id = useReactId(idProp);
+    const id = useId(idProp);
     let getOptionLabel = getOptionLabelProp;
 
     getOptionLabel = option => {
@@ -8420,13 +8476,6 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     return output;
   }
 
-  /**
-   * Determines if a given element is a DOM element name (i.e. not a React component).
-   */
-  function isHostComponent(element) {
-    return typeof element === 'string';
-  }
-
   const defaultGenerator = componentName => componentName;
 
   const createClassNameGenerator = () => {
@@ -8612,7 +8661,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       },
       classes: classesProp,
       badgeContent: badgeContentProp,
-      component = 'span',
+      component,
       children,
       className,
       components = {},
@@ -8621,10 +8670,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       max: maxProp = 99,
       overlap: overlapProp = 'rectangular',
       showZero = false,
-      variant: variantProp = 'standard',
-
-      /* eslint-disable react/prop-types */
-      theme
+      variant: variantProp = 'standard'
     } = props,
           other = _objectWithoutPropertiesLoose(props, _excluded$2l);
 
@@ -8666,22 +8712,15 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     }
 
     const classes = useUtilityClasses$1S(ownerState);
-    const Root = components.Root || component;
-    const rootProps = componentsProps.root || {};
+    const Root = component || components.Root || 'span';
+    const rootProps = appendOwnerState(Root, _extends({}, other, componentsProps.root), ownerState);
     const Badge = components.Badge || 'span';
-    const badgeProps = componentsProps.badge || {};
-    return /*#__PURE__*/jsxRuntime_2(Root, _extends({}, rootProps, !isHostComponent(Root) && {
-      as: component,
-      ownerState: _extends({}, ownerState, rootProps.ownerState),
-      theme
-    }, {
+    const badgeProps = appendOwnerState(Badge, componentsProps.badge, ownerState);
+    return /*#__PURE__*/jsxRuntime_2(Root, _extends({}, rootProps, {
       ref: ref
     }, other, {
       className: clsx(classes.root, rootProps.className, className),
-      children: [children, /*#__PURE__*/jsxRuntime_1(Badge, _extends({}, badgeProps, !isHostComponent(Badge) && {
-        ownerState: _extends({}, ownerState, badgeProps.ownerState),
-        theme
-      }, {
+      children: [children, /*#__PURE__*/jsxRuntime_1(Badge, _extends({}, badgeProps, {
         className: clsx(classes.badge, badgeProps.className),
         children: displayValue
       }))]
@@ -8786,24 +8825,6 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
   const buttonUnstyledClasses = generateUtilityClasses('ButtonUnstyled', ['root', 'active', 'disabled', 'focusVisible']);
   var buttonUnstyledClasses$1 = buttonUnstyledClasses;
 
-  /**
-   * Extracts event handlers from a given object.
-   * A prop is considered an event handler if it is a function and its name starts with `on`.
-   *
-   * @param object An object to extract event handlers from.
-   */
-  function extractEventHandlers(object, excludeKeys = []) {
-    if (object === undefined) {
-      return {};
-    }
-
-    const result = {};
-    Object.keys(object).filter(prop => prop.match(/^on[A-Z]/) && typeof object[prop] === 'function' && !excludeKeys.includes(prop)).forEach(prop => {
-      result[prop] = object[prop];
-    });
-    return result;
-  }
-
   function useButton(props) {
     var _ref;
 
@@ -9005,24 +9026,6 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     };
   }
 
-  /**
-   * Appends the ownerState object to the props, merging with the existing one if necessary.
-   *
-   * @param elementType Type of the element that owns the `existingProps`. If the element is a DOM node, `ownerState` are not applied.
-   * @param existingProps Props of the element.
-   * @param ownerState
-   */
-
-  function appendOwnerState(elementType, existingProps, ownerState) {
-    if (isHostComponent(elementType)) {
-      return existingProps;
-    }
-
-    return _extends({}, existingProps, {
-      ownerState: _extends({}, existingProps.ownerState, ownerState)
-    });
-  }
-
   const _excluded$2k = ["className", "component", "components", "componentsProps", "children", "disabled", "action", "onBlur", "onClick", "onFocus", "onFocusVisible", "onKeyDown", "onKeyUp", "onMouseLeave"];
 
   const useUtilityClasses$1R = ownerState => {
@@ -9159,6 +9162,192 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
   } ;
   var ButtonUnstyled$1 = ButtonUnstyled;
 
+  function mapEventPropToEvent(eventProp) {
+    return eventProp.substring(2).toLowerCase();
+  }
+
+  function clickedRootScrollbar(event, doc) {
+    return doc.documentElement.clientWidth < event.clientX || doc.documentElement.clientHeight < event.clientY;
+  }
+
+  /**
+   * Listen for click events that occur somewhere in the document, outside of the element itself.
+   * For instance, if you need to hide a menu when people click anywhere else on your page.
+   *
+   * Demos:
+   *
+   * - [Click Away Listener](https://mui.com/components/click-away-listener/)
+   * - [Menus](https://mui.com/components/menus/)
+   *
+   * API:
+   *
+   * - [ClickAwayListener API](https://mui.com/api/click-away-listener/)
+   */
+  function ClickAwayListener(props) {
+    const {
+      children,
+      disableReactTree = false,
+      mouseEvent = 'onClick',
+      onClickAway,
+      touchEvent = 'onTouchEnd'
+    } = props;
+    const movedRef = React__namespace.useRef(false);
+    const nodeRef = React__namespace.useRef(null);
+    const activatedRef = React__namespace.useRef(false);
+    const syntheticEventRef = React__namespace.useRef(false);
+    React__namespace.useEffect(() => {
+      // Ensure that this component is not "activated" synchronously.
+      // https://github.com/facebook/react/issues/20074
+      setTimeout(() => {
+        activatedRef.current = true;
+      }, 0);
+      return () => {
+        activatedRef.current = false;
+      };
+    }, []);
+    const handleRef = useForkRef( // @ts-expect-error TODO upstream fix
+    children.ref, nodeRef); // The handler doesn't take event.defaultPrevented into account:
+    //
+    // event.preventDefault() is meant to stop default behaviors like
+    // clicking a checkbox to check it, hitting a button to submit a form,
+    // and hitting left arrow to move the cursor in a text input etc.
+    // Only special HTML elements have these default behaviors.
+
+    const handleClickAway = useEventCallback(event => {
+      // Given developers can stop the propagation of the synthetic event,
+      // we can only be confident with a positive value.
+      const insideReactTree = syntheticEventRef.current;
+      syntheticEventRef.current = false;
+      const doc = ownerDocument(nodeRef.current); // 1. IE11 support, which trigger the handleClickAway even after the unbind
+      // 2. The child might render null.
+      // 3. Behave like a blur listener.
+
+      if (!activatedRef.current || !nodeRef.current || 'clientX' in event && clickedRootScrollbar(event, doc)) {
+        return;
+      } // Do not act if user performed touchmove
+
+
+      if (movedRef.current) {
+        movedRef.current = false;
+        return;
+      }
+
+      let insideDOM; // If not enough, can use https://github.com/DieterHolvoet/event-propagation-path/blob/master/propagationPath.js
+
+      if (event.composedPath) {
+        insideDOM = event.composedPath().indexOf(nodeRef.current) > -1;
+      } else {
+        insideDOM = !doc.documentElement.contains( // @ts-expect-error returns `false` as intended when not dispatched from a Node
+        event.target) || nodeRef.current.contains( // @ts-expect-error returns `false` as intended when not dispatched from a Node
+        event.target);
+      }
+
+      if (!insideDOM && (disableReactTree || !insideReactTree)) {
+        onClickAway(event);
+      }
+    }); // Keep track of mouse/touch events that bubbled up through the portal.
+
+    const createHandleSynthetic = handlerName => event => {
+      syntheticEventRef.current = true;
+      const childrenPropsHandler = children.props[handlerName];
+
+      if (childrenPropsHandler) {
+        childrenPropsHandler(event);
+      }
+    };
+
+    const childrenProps = {
+      ref: handleRef
+    };
+
+    if (touchEvent !== false) {
+      childrenProps[touchEvent] = createHandleSynthetic(touchEvent);
+    }
+
+    React__namespace.useEffect(() => {
+      if (touchEvent !== false) {
+        const mappedTouchEvent = mapEventPropToEvent(touchEvent);
+        const doc = ownerDocument(nodeRef.current);
+
+        const handleTouchMove = () => {
+          movedRef.current = true;
+        };
+
+        doc.addEventListener(mappedTouchEvent, handleClickAway);
+        doc.addEventListener('touchmove', handleTouchMove);
+        return () => {
+          doc.removeEventListener(mappedTouchEvent, handleClickAway);
+          doc.removeEventListener('touchmove', handleTouchMove);
+        };
+      }
+
+      return undefined;
+    }, [handleClickAway, touchEvent]);
+
+    if (mouseEvent !== false) {
+      childrenProps[mouseEvent] = createHandleSynthetic(mouseEvent);
+    }
+
+    React__namespace.useEffect(() => {
+      if (mouseEvent !== false) {
+        const mappedMouseEvent = mapEventPropToEvent(mouseEvent);
+        const doc = ownerDocument(nodeRef.current);
+        doc.addEventListener(mappedMouseEvent, handleClickAway);
+        return () => {
+          doc.removeEventListener(mappedMouseEvent, handleClickAway);
+        };
+      }
+
+      return undefined;
+    }, [handleClickAway, mouseEvent]);
+    return /*#__PURE__*/jsxRuntime_1(React__namespace.Fragment, {
+      children: /*#__PURE__*/React__namespace.cloneElement(children, childrenProps)
+    });
+  }
+
+  ClickAwayListener.propTypes
+  /* remove-proptypes */
+  = {
+    // ----------------------------- Warning --------------------------------
+    // | These PropTypes are generated from the TypeScript type definitions |
+    // |     To update them edit TypeScript types and run "yarn proptypes"  |
+    // ----------------------------------------------------------------------
+
+    /**
+     * The wrapped element.
+     */
+    children: elementAcceptingRef$1.isRequired,
+
+    /**
+     * If `true`, the React tree is ignored and only the DOM tree is considered.
+     * This prop changes how portaled elements are handled.
+     * @default false
+     */
+    disableReactTree: propTypes.bool,
+
+    /**
+     * The mouse event to listen to. You can disable the listener by providing `false`.
+     * @default 'onClick'
+     */
+    mouseEvent: propTypes.oneOf(['onClick', 'onMouseDown', 'onMouseUp', false]),
+
+    /**
+     * Callback fired when a "click away" event is detected.
+     */
+    onClickAway: propTypes.func.isRequired,
+
+    /**
+     * The touch event to listen to. You can disable the listener by providing `false`.
+     * @default 'onTouchEnd'
+     */
+    touchEvent: propTypes.oneOf(['onTouchEnd', 'onTouchStart', false])
+  } ;
+
+  {
+    // eslint-disable-next-line
+    ClickAwayListener['propTypes' + ''] = exactProp(ClickAwayListener.propTypes);
+  }
+
   /**
    * @ignore - internal component.
    */
@@ -14562,220 +14751,11 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
   } ;
   var SwitchUnstyled$1 = SwitchUnstyled;
 
-  const _excluded$2d = ["onChange", "maxRows", "minRows", "style", "value"];
-
-  function getStyleValue(computedStyle, property) {
-    return parseInt(computedStyle[property], 10) || 0;
+  function getTabPanelUnstyledUtilityClass(slot) {
+    return generateUtilityClass('TabPanelUnstyled', slot);
   }
-
-  const styles$5 = {
-    shadow: {
-      // Visibility needed to hide the extra text area on iPads
-      visibility: 'hidden',
-      // Remove from the content flow
-      position: 'absolute',
-      // Ignore the scrollbar width
-      overflow: 'hidden',
-      height: 0,
-      top: 0,
-      left: 0,
-      // Create a new layer, increase the isolation of the computed values
-      transform: 'translateZ(0)'
-    }
-  };
-  const TextareaAutosize = /*#__PURE__*/React__namespace.forwardRef(function TextareaAutosize(props, ref) {
-    const {
-      onChange,
-      maxRows,
-      minRows = 1,
-      style,
-      value
-    } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$2d);
-
-    const {
-      current: isControlled
-    } = React__namespace.useRef(value != null);
-    const inputRef = React__namespace.useRef(null);
-    const handleRef = useForkRef(ref, inputRef);
-    const shadowRef = React__namespace.useRef(null);
-    const renders = React__namespace.useRef(0);
-    const [state, setState] = React__namespace.useState({});
-    const syncHeight = React__namespace.useCallback(() => {
-      const input = inputRef.current;
-      const containerWindow = ownerWindow(input);
-      const computedStyle = containerWindow.getComputedStyle(input); // If input's width is shrunk and it's not visible, don't sync height.
-
-      if (computedStyle.width === '0px') {
-        return;
-      }
-
-      const inputShallow = shadowRef.current;
-      inputShallow.style.width = computedStyle.width;
-      inputShallow.value = input.value || props.placeholder || 'x';
-
-      if (inputShallow.value.slice(-1) === '\n') {
-        // Certain fonts which overflow the line height will cause the textarea
-        // to report a different scrollHeight depending on whether the last line
-        // is empty. Make it non-empty to avoid this issue.
-        inputShallow.value += ' ';
-      }
-
-      const boxSizing = computedStyle['box-sizing'];
-      const padding = getStyleValue(computedStyle, 'padding-bottom') + getStyleValue(computedStyle, 'padding-top');
-      const border = getStyleValue(computedStyle, 'border-bottom-width') + getStyleValue(computedStyle, 'border-top-width'); // The height of the inner content
-
-      const innerHeight = inputShallow.scrollHeight; // Measure height of a textarea with a single row
-
-      inputShallow.value = 'x';
-      const singleRowHeight = inputShallow.scrollHeight; // The height of the outer content
-
-      let outerHeight = innerHeight;
-
-      if (minRows) {
-        outerHeight = Math.max(Number(minRows) * singleRowHeight, outerHeight);
-      }
-
-      if (maxRows) {
-        outerHeight = Math.min(Number(maxRows) * singleRowHeight, outerHeight);
-      }
-
-      outerHeight = Math.max(outerHeight, singleRowHeight); // Take the box sizing into account for applying this value as a style.
-
-      const outerHeightStyle = outerHeight + (boxSizing === 'border-box' ? padding + border : 0);
-      const overflow = Math.abs(outerHeight - innerHeight) <= 1;
-      setState(prevState => {
-        // Need a large enough difference to update the height.
-        // This prevents infinite rendering loop.
-        if (renders.current < 20 && (outerHeightStyle > 0 && Math.abs((prevState.outerHeightStyle || 0) - outerHeightStyle) > 1 || prevState.overflow !== overflow)) {
-          renders.current += 1;
-          return {
-            overflow,
-            outerHeightStyle
-          };
-        }
-
-        {
-          if (renders.current === 20) {
-            console.error(['MUI: Too many re-renders. The layout is unstable.', 'TextareaAutosize limits the number of renders to prevent an infinite loop.'].join('\n'));
-          }
-        }
-
-        return prevState;
-      });
-    }, [maxRows, minRows, props.placeholder]);
-    React__namespace.useEffect(() => {
-      const handleResize = debounce$1(() => {
-        renders.current = 0;
-        syncHeight();
-      });
-      const containerWindow = ownerWindow(inputRef.current);
-      containerWindow.addEventListener('resize', handleResize);
-      let resizeObserver;
-
-      if (typeof ResizeObserver !== 'undefined') {
-        resizeObserver = new ResizeObserver(handleResize);
-        resizeObserver.observe(inputRef.current);
-      }
-
-      return () => {
-        handleResize.clear();
-        containerWindow.removeEventListener('resize', handleResize);
-
-        if (resizeObserver) {
-          resizeObserver.disconnect();
-        }
-      };
-    }, [syncHeight]);
-    useEnhancedEffect$1(() => {
-      syncHeight();
-    });
-    React__namespace.useEffect(() => {
-      renders.current = 0;
-    }, [value]);
-
-    const handleChange = event => {
-      renders.current = 0;
-
-      if (!isControlled) {
-        syncHeight();
-      }
-
-      if (onChange) {
-        onChange(event);
-      }
-    };
-
-    return /*#__PURE__*/jsxRuntime_2(React__namespace.Fragment, {
-      children: [/*#__PURE__*/jsxRuntime_1("textarea", _extends({
-        value: value,
-        onChange: handleChange,
-        ref: handleRef // Apply the rows prop to get a "correct" first SSR paint
-        ,
-        rows: minRows,
-        style: _extends({
-          height: state.outerHeightStyle,
-          // Need a large enough difference to allow scrolling.
-          // This prevents infinite rendering loop.
-          overflow: state.overflow ? 'hidden' : null
-        }, style)
-      }, other)), /*#__PURE__*/jsxRuntime_1("textarea", {
-        "aria-hidden": true,
-        className: props.className,
-        readOnly: true,
-        ref: shadowRef,
-        tabIndex: -1,
-        style: _extends({}, styles$5.shadow, style, {
-          padding: 0
-        })
-      })]
-    });
-  });
-  TextareaAutosize.propTypes
-  /* remove-proptypes */
-  = {
-    // ----------------------------- Warning --------------------------------
-    // | These PropTypes are generated from the TypeScript type definitions |
-    // |     To update them edit the d.ts file and run "yarn proptypes"     |
-    // ----------------------------------------------------------------------
-
-    /**
-     * @ignore
-     */
-    className: propTypes.string,
-
-    /**
-     * Maximum number of rows to display.
-     */
-    maxRows: propTypes.oneOfType([propTypes.number, propTypes.string]),
-
-    /**
-     * Minimum number of rows to display.
-     * @default 1
-     */
-    minRows: propTypes.oneOfType([propTypes.number, propTypes.string]),
-
-    /**
-     * @ignore
-     */
-    onChange: propTypes.func,
-
-    /**
-     * @ignore
-     */
-    placeholder: propTypes.string,
-
-    /**
-     * @ignore
-     */
-    style: propTypes.object,
-
-    /**
-     * @ignore
-     */
-    value: propTypes.oneOfType([propTypes.arrayOf(propTypes.string), propTypes.number, propTypes.string])
-  } ;
-  var TextareaAutosize$1 = TextareaAutosize;
+  const tabPanelUnstyledClasses = generateUtilityClasses('TabPanelUnstyled', ['root', 'hidden']);
+  var tabPanelUnstyledClasses$1 = tabPanelUnstyledClasses;
 
   function getTabsUnstyledUtilityClass(slot) {
     return generateUtilityClass('TabsUnstyled', slot);
@@ -14798,7 +14778,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       name: 'Tabs',
       state: 'value'
     });
-    const idPrefix = useReactId();
+    const idPrefix = useId();
     const onSelected = React__namespace.useCallback((e, newValue) => {
       setValue(newValue);
 
@@ -14869,7 +14849,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
   }
   var Context$1 = Context;
 
-  const _excluded$2c = ["children", "className", "value", "defaultValue", "orientation", "direction", "component", "components", "componentsProps", "onChange", "selectionFollowsFocus"];
+  const _excluded$2d = ["children", "className", "value", "defaultValue", "orientation", "direction", "component", "components", "componentsProps", "onChange", "selectionFollowsFocus"];
 
   const useUtilityClasses$1O = ownerState => {
     const {
@@ -14904,7 +14884,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       components = {},
       componentsProps = {}
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$2c);
+          other = _objectWithoutPropertiesLoose(props, _excluded$2d);
 
     const {
       tabsContextValue,
@@ -15003,101 +14983,46 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
   } ;
   var TabsUnstyled$1 = TabsUnstyled;
 
-  function getTabUnstyledUtilityClass(slot) {
-    return generateUtilityClass('TabUnstyled', slot);
-  }
-  const tabUnstyledClasses = generateUtilityClasses('TabUnstyled', ['root', 'selected', 'disabled']);
-  var tabUnstyledClasses$1 = tabUnstyledClasses;
-
-  const _excluded$2b = ["getRootProps"];
-
-  const useTab = props => {
+  const useTabPanel = props => {
     const {
-      value: valueProp,
-      onChange,
-      onClick,
-      onFocus
+      value
     } = props;
-
-    const _useButton = useButton(props),
-          {
-      getRootProps: getRootPropsButton
-    } = _useButton,
-          otherButtonProps = _objectWithoutPropertiesLoose(_useButton, _excluded$2b);
-
     const context = useTabContext();
 
     if (context === null) {
       throw new Error('No TabContext provided');
     }
 
-    const value = valueProp != null ? valueProp : 0;
-    const selected = context.value === value;
-    const selectionFollowsFocus = context.selectionFollowsFocus;
-    const a11yAttributes = {
-      role: 'tab',
-      'aria-controls': getPanelId(context, value),
-      id: getTabId(context, value),
-      'aria-selected': selected,
-      disabled: otherButtonProps.disabled
-    };
-
-    const handleFocus = event => {
-      if (selectionFollowsFocus && !selected) {
-        if (onChange) {
-          onChange(event, value);
-        }
-
-        context.onSelected(event, value);
-      }
-
-      if (onFocus) {
-        onFocus(event);
-      }
-    };
-
-    const handleClick = event => {
-      if (!selected) {
-        if (onChange) {
-          onChange(event, value);
-        }
-
-        context.onSelected(event, value);
-      }
-
-      if (onClick) {
-        onClick(event);
-      }
-    };
+    const hidden = value !== context.value;
+    const id = getPanelId(context, value);
+    const tabId = getTabId(context, value);
 
-    const getRootProps = otherHandlers => {
-      const buttonResolvedProps = getRootPropsButton(_extends({
-        onClick: handleClick,
-        onFocus: handleFocus
-      }, otherHandlers));
-      return _extends({}, buttonResolvedProps, a11yAttributes);
+    const getRootProps = () => {
+      return {
+        'aria-labelledby': tabId,
+        hidden,
+        id
+      };
     };
 
-    return _extends({
+    return {
+      hidden,
       getRootProps
-    }, otherButtonProps, {
-      selected
-    });
+    };
   };
 
-  var useTab$1 = useTab;
+  var useTabPanel$1 = useTabPanel;
 
-  const _excluded$2a = ["action", "children", "value", "className", "disabled", "onChange", "onClick", "onFocus", "component", "components", "componentsProps"];
+  const _excluded$2c = ["children", "className", "value", "components", "componentsProps", "component"];
 
   const useUtilityClasses$1N = ownerState => {
     const {
-      selected,
-      disabled
+      hidden
     } = ownerState;
     const slots = {
-      root: ['root', selected && 'selected', disabled && 'disabled']
+      root: ['root', hidden && 'hidden']
     };
-    return composeClasses(slots, getTabUnstyledUtilityClass, {});
+    return composeClasses(slots, getTabPanelUnstyledUtilityClass, {});
   };
   /**
    *
@@ -15107,59 +15032,43 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
    *
    * API:
    *
-   * - [TabUnstyled API](https://mui.com/api/tab-unstyled/)
+   * - [TabPanelUnstyled API](https://mui.com/api/tab-panel-unstyled/)
    */
 
 
-  const TabUnstyled = /*#__PURE__*/React__namespace.forwardRef(function TabUnstyled(props, ref) {
+  const TabPanelUnstyled = /*#__PURE__*/React__namespace.forwardRef(function TabPanelUnstyled(props, ref) {
     var _ref, _componentsProps$root;
 
     const {
-      action,
       children,
       className,
-      disabled = false,
-      component,
       components = {},
-      componentsProps = {}
+      componentsProps = {},
+      component
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$2a);
+          other = _objectWithoutPropertiesLoose(props, _excluded$2c);
 
-    const tabRef = React__namespace.useRef();
-    const handleRef = useForkRef(tabRef, ref);
     const {
-      active,
-      focusVisible,
-      setFocusVisible,
-      selected,
+      hidden,
       getRootProps
-    } = useTab$1(_extends({}, props, {
-      ref: handleRef
-    }));
-    React__namespace.useImperativeHandle(action, () => ({
-      focusVisible: () => {
-        setFocusVisible(true);
-        tabRef.current.focus();
-      }
-    }), [setFocusVisible]);
+    } = useTabPanel$1(props);
 
     const ownerState = _extends({}, props, {
-      active,
-      focusVisible,
-      disabled,
-      selected
+      hidden
     });
 
     const classes = useUtilityClasses$1N(ownerState);
-    const TabRoot = (_ref = component != null ? component : components.Root) != null ? _ref : 'button';
-    const tabRootProps = appendOwnerState(TabRoot, _extends({}, other, componentsProps.root), ownerState);
-    return /*#__PURE__*/jsxRuntime_1(TabRoot, _extends({}, getRootProps(), tabRootProps, {
-      className: clsx(classes.root, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.className, className),
+    const TabPanelRoot = (_ref = component != null ? component : components.Root) != null ? _ref : 'div';
+    const tabPanelRootProps = appendOwnerState(TabPanelRoot, _extends({}, other, componentsProps.root), ownerState);
+    return /*#__PURE__*/jsxRuntime_1(TabPanelRoot, _extends({}, getRootProps(), {
       ref: ref,
-      children: children
+      role: "tabpanel"
+    }, tabPanelRootProps, {
+      className: clsx(classes.root, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.className, className),
+      children: !hidden && children
     }));
   });
-  TabUnstyled.propTypes
+  TabPanelUnstyled.propTypes
   /* remove-proptypes */
   = {
     // ----------------------------- Warning --------------------------------
@@ -15168,16 +15077,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     // ----------------------------------------------------------------------
 
     /**
-     * A ref for imperative actions. It currently only supports `focusVisible()` action.
-     */
-    action: propTypes.oneOfType([propTypes.func, propTypes.shape({
-      current: propTypes.shape({
-        focusVisible: propTypes.func.isRequired
-      })
-    })]),
-
-    /**
-     * @ignore
+     * The content of the component.
      */
     children: propTypes.node,
 
@@ -15193,7 +15093,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     component: propTypes.elementType,
 
     /**
-     * The components used for each slot inside the Tab.
+     * The components used for each slot inside the TabPanel.
      * Either a string to use a HTML element or a component.
      * @default {}
      */
@@ -15202,38 +15102,17 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     }),
 
     /**
-     * The props used for each slot inside the Tab.
+     * The props used for each slot inside the TabPanel.
      * @default {}
      */
     componentsProps: propTypes.object,
 
     /**
-     * If `true`, the component is disabled.
-     * @default false
-     */
-    disabled: propTypes.bool,
-
-    /**
-     * Callback invoked when new value is being set.
-     */
-    onChange: propTypes.func,
-
-    /**
-     * @ignore
-     */
-    onClick: propTypes.func,
-
-    /**
-     * @ignore
-     */
-    onFocus: propTypes.func,
-
-    /**
-     * You can provide your own value. Otherwise, we fall back to the child position index.
+     * The value of the TabPanel. It will be shown when the Tab with the corresponding value is selected.
      */
-    value: propTypes.oneOfType([propTypes.number, propTypes.string])
+    value: propTypes.oneOfType([propTypes.number, propTypes.string]).isRequired
   } ;
-  var TabUnstyled$1 = TabUnstyled;
+  var TabPanelUnstyled$1 = TabPanelUnstyled;
 
   function getTabsListUnstyledUtilityClass(slot) {
     return generateUtilityClass('TabsListUnstyled', slot);
@@ -15431,7 +15310,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
 
   var useTabsList$1 = useTabsList;
 
-  const _excluded$29 = ["className", "children", "component", "components", "componentsProps"];
+  const _excluded$2b = ["className", "children", "component", "components", "componentsProps"];
 
   const useUtilityClasses$1M = ownerState => {
     const {
@@ -15463,7 +15342,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       components = {},
       componentsProps = {}
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$29);
+          other = _objectWithoutPropertiesLoose(props, _excluded$2b);
 
     const {
       isRtl,
@@ -15529,52 +15408,101 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
   } ;
   var TabsListUnstyled$1 = TabsListUnstyled;
 
-  function getTabPanelUnstyledUtilityClass(slot) {
-    return generateUtilityClass('TabPanelUnstyled', slot);
+  function getTabUnstyledUtilityClass(slot) {
+    return generateUtilityClass('TabUnstyled', slot);
   }
-  const tabPanelUnstyledClasses = generateUtilityClasses('TabPanelUnstyled', ['root', 'hidden']);
-  var tabPanelUnstyledClasses$1 = tabPanelUnstyledClasses;
+  const tabUnstyledClasses = generateUtilityClasses('TabUnstyled', ['root', 'selected', 'disabled']);
+  var tabUnstyledClasses$1 = tabUnstyledClasses;
 
-  const useTabPanel = props => {
+  const _excluded$2a = ["getRootProps"];
+
+  const useTab = props => {
     const {
-      value
+      value: valueProp,
+      onChange,
+      onClick,
+      onFocus
     } = props;
+
+    const _useButton = useButton(props),
+          {
+      getRootProps: getRootPropsButton
+    } = _useButton,
+          otherButtonProps = _objectWithoutPropertiesLoose(_useButton, _excluded$2a);
+
     const context = useTabContext();
 
     if (context === null) {
       throw new Error('No TabContext provided');
     }
 
-    const hidden = value !== context.value;
-    const id = getPanelId(context, value);
-    const tabId = getTabId(context, value);
+    const value = valueProp != null ? valueProp : 0;
+    const selected = context.value === value;
+    const selectionFollowsFocus = context.selectionFollowsFocus;
+    const a11yAttributes = {
+      role: 'tab',
+      'aria-controls': getPanelId(context, value),
+      id: getTabId(context, value),
+      'aria-selected': selected,
+      disabled: otherButtonProps.disabled
+    };
 
-    const getRootProps = () => {
-      return {
-        'aria-labelledby': tabId,
-        hidden,
-        id
-      };
+    const handleFocus = event => {
+      if (selectionFollowsFocus && !selected) {
+        if (onChange) {
+          onChange(event, value);
+        }
+
+        context.onSelected(event, value);
+      }
+
+      if (onFocus) {
+        onFocus(event);
+      }
     };
 
-    return {
-      hidden,
-      getRootProps
+    const handleClick = event => {
+      if (!selected) {
+        if (onChange) {
+          onChange(event, value);
+        }
+
+        context.onSelected(event, value);
+      }
+
+      if (onClick) {
+        onClick(event);
+      }
+    };
+
+    const getRootProps = otherHandlers => {
+      const buttonResolvedProps = getRootPropsButton(_extends({
+        onClick: handleClick,
+        onFocus: handleFocus
+      }, otherHandlers));
+      return _extends({}, buttonResolvedProps, a11yAttributes);
     };
+
+    return _extends({
+      getRootProps
+    }, otherButtonProps, {
+      selected
+    });
   };
 
-  var useTabPanel$1 = useTabPanel;
+  var useTab$1 = useTab;
 
-  const _excluded$28 = ["children", "className", "value", "components", "componentsProps", "component"];
+  const _excluded$29 = ["action", "children", "value", "className", "disabled", "onChange", "onClick", "onFocus", "component", "components", "componentsProps"];
 
   const useUtilityClasses$1L = ownerState => {
     const {
-      hidden
+      selected,
+      disabled
     } = ownerState;
     const slots = {
-      root: ['root', hidden && 'hidden']
+      root: ['root', selected && 'selected', disabled && 'disabled']
     };
-    return composeClasses(slots, getTabPanelUnstyledUtilityClass, {});
+    return composeClasses(slots, getTabUnstyledUtilityClass, {});
   };
   /**
    *
@@ -15584,43 +15512,59 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
    *
    * API:
    *
-   * - [TabPanelUnstyled API](https://mui.com/api/tab-panel-unstyled/)
+   * - [TabUnstyled API](https://mui.com/api/tab-unstyled/)
    */
 
 
-  const TabPanelUnstyled = /*#__PURE__*/React__namespace.forwardRef(function TabPanelUnstyled(props, ref) {
+  const TabUnstyled = /*#__PURE__*/React__namespace.forwardRef(function TabUnstyled(props, ref) {
     var _ref, _componentsProps$root;
 
     const {
+      action,
       children,
       className,
+      disabled = false,
+      component,
       components = {},
-      componentsProps = {},
-      component
+      componentsProps = {}
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$28);
+          other = _objectWithoutPropertiesLoose(props, _excluded$29);
 
+    const tabRef = React__namespace.useRef();
+    const handleRef = useForkRef(tabRef, ref);
     const {
-      hidden,
+      active,
+      focusVisible,
+      setFocusVisible,
+      selected,
       getRootProps
-    } = useTabPanel$1(props);
+    } = useTab$1(_extends({}, props, {
+      ref: handleRef
+    }));
+    React__namespace.useImperativeHandle(action, () => ({
+      focusVisible: () => {
+        setFocusVisible(true);
+        tabRef.current.focus();
+      }
+    }), [setFocusVisible]);
 
     const ownerState = _extends({}, props, {
-      hidden
+      active,
+      focusVisible,
+      disabled,
+      selected
     });
 
     const classes = useUtilityClasses$1L(ownerState);
-    const TabPanelRoot = (_ref = component != null ? component : components.Root) != null ? _ref : 'div';
-    const tabPanelRootProps = appendOwnerState(TabPanelRoot, _extends({}, other, componentsProps.root), ownerState);
-    return /*#__PURE__*/jsxRuntime_1(TabPanelRoot, _extends({}, getRootProps(), {
-      ref: ref,
-      role: "tabpanel"
-    }, tabPanelRootProps, {
+    const TabRoot = (_ref = component != null ? component : components.Root) != null ? _ref : 'button';
+    const tabRootProps = appendOwnerState(TabRoot, _extends({}, other, componentsProps.root), ownerState);
+    return /*#__PURE__*/jsxRuntime_1(TabRoot, _extends({}, getRootProps(), tabRootProps, {
       className: clsx(classes.root, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.className, className),
-      children: !hidden && children
+      ref: ref,
+      children: children
     }));
   });
-  TabPanelUnstyled.propTypes
+  TabUnstyled.propTypes
   /* remove-proptypes */
   = {
     // ----------------------------- Warning --------------------------------
@@ -15629,7 +15573,16 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     // ----------------------------------------------------------------------
 
     /**
-     * The content of the component.
+     * A ref for imperative actions. It currently only supports `focusVisible()` action.
+     */
+    action: propTypes.oneOfType([propTypes.func, propTypes.shape({
+      current: propTypes.shape({
+        focusVisible: propTypes.func.isRequired
+      })
+    })]),
+
+    /**
+     * @ignore
      */
     children: propTypes.node,
 
@@ -15645,7 +15598,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     component: propTypes.elementType,
 
     /**
-     * The components used for each slot inside the TabPanel.
+     * The components used for each slot inside the Tab.
      * Either a string to use a HTML element or a component.
      * @default {}
      */
@@ -15654,17 +15607,253 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     }),
 
     /**
-     * The props used for each slot inside the TabPanel.
+     * The props used for each slot inside the Tab.
      * @default {}
      */
     componentsProps: propTypes.object,
 
     /**
-     * The value of the TabPanel. It will be shown when the Tab with the corresponding value is selected.
+     * If `true`, the component is disabled.
+     * @default false
      */
-    value: propTypes.oneOfType([propTypes.number, propTypes.string]).isRequired
+    disabled: propTypes.bool,
+
+    /**
+     * Callback invoked when new value is being set.
+     */
+    onChange: propTypes.func,
+
+    /**
+     * @ignore
+     */
+    onClick: propTypes.func,
+
+    /**
+     * @ignore
+     */
+    onFocus: propTypes.func,
+
+    /**
+     * You can provide your own value. Otherwise, we fall back to the child position index.
+     */
+    value: propTypes.oneOfType([propTypes.number, propTypes.string])
   } ;
-  var TabPanelUnstyled$1 = TabPanelUnstyled;
+  var TabUnstyled$1 = TabUnstyled;
+
+  const _excluded$28 = ["onChange", "maxRows", "minRows", "style", "value"];
+
+  function getStyleValue(computedStyle, property) {
+    return parseInt(computedStyle[property], 10) || 0;
+  }
+
+  const styles$5 = {
+    shadow: {
+      // Visibility needed to hide the extra text area on iPads
+      visibility: 'hidden',
+      // Remove from the content flow
+      position: 'absolute',
+      // Ignore the scrollbar width
+      overflow: 'hidden',
+      height: 0,
+      top: 0,
+      left: 0,
+      // Create a new layer, increase the isolation of the computed values
+      transform: 'translateZ(0)'
+    }
+  };
+  const TextareaAutosize = /*#__PURE__*/React__namespace.forwardRef(function TextareaAutosize(props, ref) {
+    const {
+      onChange,
+      maxRows,
+      minRows = 1,
+      style,
+      value
+    } = props,
+          other = _objectWithoutPropertiesLoose(props, _excluded$28);
+
+    const {
+      current: isControlled
+    } = React__namespace.useRef(value != null);
+    const inputRef = React__namespace.useRef(null);
+    const handleRef = useForkRef(ref, inputRef);
+    const shadowRef = React__namespace.useRef(null);
+    const renders = React__namespace.useRef(0);
+    const [state, setState] = React__namespace.useState({});
+    const syncHeight = React__namespace.useCallback(() => {
+      const input = inputRef.current;
+      const containerWindow = ownerWindow(input);
+      const computedStyle = containerWindow.getComputedStyle(input); // If input's width is shrunk and it's not visible, don't sync height.
+
+      if (computedStyle.width === '0px') {
+        return;
+      }
+
+      const inputShallow = shadowRef.current;
+      inputShallow.style.width = computedStyle.width;
+      inputShallow.value = input.value || props.placeholder || 'x';
+
+      if (inputShallow.value.slice(-1) === '\n') {
+        // Certain fonts which overflow the line height will cause the textarea
+        // to report a different scrollHeight depending on whether the last line
+        // is empty. Make it non-empty to avoid this issue.
+        inputShallow.value += ' ';
+      }
+
+      const boxSizing = computedStyle['box-sizing'];
+      const padding = getStyleValue(computedStyle, 'padding-bottom') + getStyleValue(computedStyle, 'padding-top');
+      const border = getStyleValue(computedStyle, 'border-bottom-width') + getStyleValue(computedStyle, 'border-top-width'); // The height of the inner content
+
+      const innerHeight = inputShallow.scrollHeight; // Measure height of a textarea with a single row
+
+      inputShallow.value = 'x';
+      const singleRowHeight = inputShallow.scrollHeight; // The height of the outer content
+
+      let outerHeight = innerHeight;
+
+      if (minRows) {
+        outerHeight = Math.max(Number(minRows) * singleRowHeight, outerHeight);
+      }
+
+      if (maxRows) {
+        outerHeight = Math.min(Number(maxRows) * singleRowHeight, outerHeight);
+      }
+
+      outerHeight = Math.max(outerHeight, singleRowHeight); // Take the box sizing into account for applying this value as a style.
+
+      const outerHeightStyle = outerHeight + (boxSizing === 'border-box' ? padding + border : 0);
+      const overflow = Math.abs(outerHeight - innerHeight) <= 1;
+      setState(prevState => {
+        // Need a large enough difference to update the height.
+        // This prevents infinite rendering loop.
+        if (renders.current < 20 && (outerHeightStyle > 0 && Math.abs((prevState.outerHeightStyle || 0) - outerHeightStyle) > 1 || prevState.overflow !== overflow)) {
+          renders.current += 1;
+          return {
+            overflow,
+            outerHeightStyle
+          };
+        }
+
+        {
+          if (renders.current === 20) {
+            console.error(['MUI: Too many re-renders. The layout is unstable.', 'TextareaAutosize limits the number of renders to prevent an infinite loop.'].join('\n'));
+          }
+        }
+
+        return prevState;
+      });
+    }, [maxRows, minRows, props.placeholder]);
+    React__namespace.useEffect(() => {
+      const handleResize = debounce$1(() => {
+        renders.current = 0;
+        syncHeight();
+      });
+      const containerWindow = ownerWindow(inputRef.current);
+      containerWindow.addEventListener('resize', handleResize);
+      let resizeObserver;
+
+      if (typeof ResizeObserver !== 'undefined') {
+        resizeObserver = new ResizeObserver(handleResize);
+        resizeObserver.observe(inputRef.current);
+      }
+
+      return () => {
+        handleResize.clear();
+        containerWindow.removeEventListener('resize', handleResize);
+
+        if (resizeObserver) {
+          resizeObserver.disconnect();
+        }
+      };
+    }, [syncHeight]);
+    useEnhancedEffect$1(() => {
+      syncHeight();
+    });
+    React__namespace.useEffect(() => {
+      renders.current = 0;
+    }, [value]);
+
+    const handleChange = event => {
+      renders.current = 0;
+
+      if (!isControlled) {
+        syncHeight();
+      }
+
+      if (onChange) {
+        onChange(event);
+      }
+    };
+
+    return /*#__PURE__*/jsxRuntime_2(React__namespace.Fragment, {
+      children: [/*#__PURE__*/jsxRuntime_1("textarea", _extends({
+        value: value,
+        onChange: handleChange,
+        ref: handleRef // Apply the rows prop to get a "correct" first SSR paint
+        ,
+        rows: minRows,
+        style: _extends({
+          height: state.outerHeightStyle,
+          // Need a large enough difference to allow scrolling.
+          // This prevents infinite rendering loop.
+          overflow: state.overflow ? 'hidden' : null
+        }, style)
+      }, other)), /*#__PURE__*/jsxRuntime_1("textarea", {
+        "aria-hidden": true,
+        className: props.className,
+        readOnly: true,
+        ref: shadowRef,
+        tabIndex: -1,
+        style: _extends({}, styles$5.shadow, style, {
+          padding: 0
+        })
+      })]
+    });
+  });
+  TextareaAutosize.propTypes
+  /* remove-proptypes */
+  = {
+    // ----------------------------- Warning --------------------------------
+    // | These PropTypes are generated from the TypeScript type definitions |
+    // |     To update them edit the d.ts file and run "yarn proptypes"     |
+    // ----------------------------------------------------------------------
+
+    /**
+     * @ignore
+     */
+    className: propTypes.string,
+
+    /**
+     * Maximum number of rows to display.
+     */
+    maxRows: propTypes.oneOfType([propTypes.number, propTypes.string]),
+
+    /**
+     * Minimum number of rows to display.
+     * @default 1
+     */
+    minRows: propTypes.oneOfType([propTypes.number, propTypes.string]),
+
+    /**
+     * @ignore
+     */
+    onChange: propTypes.func,
+
+    /**
+     * @ignore
+     */
+    placeholder: propTypes.string,
+
+    /**
+     * @ignore
+     */
+    style: propTypes.object,
+
+    /**
+     * @ignore
+     */
+    value: propTypes.oneOfType([propTypes.arrayOf(propTypes.string), propTypes.number, propTypes.string])
+  } ;
+  var TextareaAutosize$1 = TextareaAutosize;
 
   function createMixins(breakpoints, spacing, mixins) {
     return _extends({
@@ -16439,7 +16628,7 @@ const theme2 = createTheme({ palette: {
     const theme = _extends({}, themeInput);
 
     theme.typography = _extends({}, theme.typography);
-    const typography = theme.typography; // Convert between css lengths e.g. em->px or px->rem
+    const typography = theme.typography; // Convert between CSS lengths e.g. em->px or px->rem
     // Set the baseFontSize for your project. Defaults to 16px (also the browser default).
 
     const convert = convertLength(typography.htmlFontSize);
@@ -16706,7 +16895,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * Provides a human-readable title for the element that contains it.
@@ -18130,7 +18319,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The duration for the transition, in milliseconds.
@@ -18302,7 +18491,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The variant to use.
@@ -18579,7 +18768,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The component used for the transition.
@@ -18590,7 +18779,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
 
     /**
      * Props applied to the transition element.
-     * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition) component.
+     * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component.
      */
     TransitionProps: propTypes.object
   } ;
@@ -18691,7 +18880,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var AccordionActions$1 = AccordionActions;
 
@@ -18767,7 +18956,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var AccordionDetails$1 = AccordionDetails;
 
@@ -19613,7 +19802,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
      * This prop can help identify which element has keyboard focus.
      * The class name will be applied when the element gains the focus through keyboard interaction.
      * It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).
-     * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/master/explainer.md).
+     * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/HEAD/explainer.md).
      * A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components
      * if needed.
      */
@@ -19706,7 +19895,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * @default 0
@@ -19910,7 +20099,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
      * This prop can help identify which element has keyboard focus.
      * The class name will be applied when the element gains the focus through keyboard interaction.
      * It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).
-     * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/master/explainer.md).
+     * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/HEAD/explainer.md).
      * A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components
      * if needed.
      */
@@ -19924,7 +20113,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var AccordionSummary$1 = AccordionSummary;
 
@@ -20142,7 +20331,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var IconButton$1 = IconButton;
 
@@ -20203,7 +20392,6 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     const getBackgroundColor = theme.palette.mode === 'light' ? lighten : darken;
     const color = ownerState.color || ownerState.severity;
     return _extends({}, theme.typography.body2, {
-      borderRadius: theme.shape.borderRadius,
       backgroundColor: 'transparent',
       display: 'flex',
       padding: '6px 16px'
@@ -20298,7 +20486,6 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     const classes = useUtilityClasses$1B(ownerState);
     return /*#__PURE__*/jsxRuntime_2(AlertRoot, _extends({
       role: role,
-      square: true,
       elevation: 0,
       ownerState: ownerState,
       className: clsx(classes.root, className),
@@ -20416,7 +20603,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The variant to use.
@@ -20604,7 +20791,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * Applies the theme typography styles.
@@ -20716,7 +20903,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var AlertTitle$1 = AlertTitle;
 
@@ -20884,7 +21071,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var AppBar$1 = AppBar;
 
@@ -21159,7 +21346,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var ListSubheader$1 = ListSubheader;
 
@@ -21673,7 +21860,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The variant to use.
@@ -22740,7 +22927,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The value of the autocomplete.
@@ -23014,7 +23201,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The shape of the avatar.
@@ -23032,7 +23219,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   const avatarGroupClasses = generateUtilityClasses('MuiAvatarGroup', ['root', 'avatar']);
   var avatarGroupClasses$1 = avatarGroupClasses;
 
-  const _excluded$1N = ["children", "className", "max", "spacing", "variant"];
+  const _excluded$1N = ["children", "className", "max", "spacing", "total", "variant"];
   const SPACINGS$1 = {
     small: -16,
     medium: null
@@ -23094,11 +23281,12 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       className,
       max = 5,
       spacing = 'medium',
+      total,
       variant = 'circular'
     } = props,
           other = _objectWithoutPropertiesLoose(props, _excluded$1N);
 
-    const clampedMax = max < 2 ? 2 : max;
+    let clampedMax = max < 2 ? 2 : max;
 
     const ownerState = _extends({}, props, {
       max,
@@ -23116,7 +23304,15 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
 
       return /*#__PURE__*/React__namespace.isValidElement(child);
     });
-    const extraAvatars = children.length > clampedMax ? children.length - clampedMax + 1 : 0;
+    const totalAvatars = total || children.length;
+
+    if (totalAvatars === clampedMax) {
+      clampedMax += 1;
+    }
+
+    clampedMax = Math.min(totalAvatars + 1, clampedMax);
+    const maxAvatars = Math.min(children.length, clampedMax - 1);
+    const extraAvatars = Math.max(totalAvatars - clampedMax, totalAvatars - maxAvatars, 0);
     const marginLeft = spacing && SPACINGS$1[spacing] !== undefined ? SPACINGS$1[spacing] : -spacing;
     return /*#__PURE__*/jsxRuntime_2(AvatarGroupRoot, _extends({
       ownerState: ownerState,
@@ -23131,7 +23327,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
         },
         variant: variant,
         children: ["+", extraAvatars]
-      }) : null, children.slice(0, children.length - extraAvatars).reverse().map(child => {
+      }) : null, children.slice(0, maxAvatars).reverse().map(child => {
         return /*#__PURE__*/React__namespace.cloneElement(child, {
           className: clsx(child.props.className, classes.avatar),
           style: _extends({
@@ -23186,7 +23382,13 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
+
+    /**
+     * The total number of avatars. Used for calculating the number of extra avatars.
+     * @default children.length
+     */
+    total: propTypes.number,
 
     /**
      * The variant to use.
@@ -23548,7 +23750,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The duration for the transition, in milliseconds.
@@ -23562,7 +23764,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   } ;
   var Backdrop$1 = Backdrop;
 
-  const _excluded$1K = ["components", "componentsProps", "color", "invisible", "badgeContent", "showZero", "variant"];
+  const _excluded$1K = ["component", "components", "componentsProps", "color", "invisible", "badgeContent", "showZero", "variant"];
   const badgeClasses = _extends({}, badgeUnstyledClasses$1, generateUtilityClasses('MuiBadge', ['colorError', 'colorInfo', 'colorPrimary', 'colorSecondary', 'colorSuccess', 'colorWarning']));
   const RADIUS_STANDARD = 10;
   const RADIUS_DOT = 4;
@@ -23701,6 +23903,11 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       duration: theme.transitions.duration.leavingScreen
     })
   }));
+
+  const shouldSpreadAdditionalProps = Slot => {
+    return !Slot || !isHostComponent(Slot);
+  };
+
   const Badge = /*#__PURE__*/React__namespace.forwardRef(function Badge(inProps, ref) {
     var _componentsProps$root, _componentsProps$badg;
 
@@ -23710,6 +23917,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     });
 
     const {
+      component = 'span',
       components = {},
       componentsProps = {},
       color: colorProp = 'default',
@@ -23750,12 +23958,13 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
         Badge: BadgeBadge
       }, components),
       componentsProps: {
-        root: _extends({}, componentsProps.root, (!components.Root || !isHostComponent(components.Root)) && {
+        root: _extends({}, componentsProps.root, shouldSpreadAdditionalProps(components.Root) && {
+          as: component,
           ownerState: _extends({}, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.ownerState, {
             color
           })
         }),
-        badge: _extends({}, componentsProps.badge, (!components.Thumb || !isHostComponent(components.Thumb)) && {
+        badge: _extends({}, componentsProps.badge, shouldSpreadAdditionalProps(components.Badge) && {
           ownerState: _extends({}, (_componentsProps$badg = componentsProps.badge) == null ? void 0 : _componentsProps$badg.ownerState, {
             color
           })
@@ -23808,6 +24017,12 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /* @typescript-to-proptypes-ignore */
     .oneOfType([propTypes.oneOf(['default', 'primary', 'secondary', 'error', 'info', 'success', 'warning']), propTypes.string]),
 
+    /**
+     * The component used for the root node.
+     * Either a string to use a HTML element or a component.
+     */
+    component: propTypes.elementType,
+
     /**
      * The components used for each slot inside the Badge.
      * Either a string to use a HTML element or a component.
@@ -23850,7 +24065,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The variant to use.
@@ -23988,7 +24203,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The value of the currently selected `BottomNavigationAction`.
@@ -24168,7 +24383,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * You can provide your own value. Otherwise, we fallback to the child position index.
@@ -24477,7 +24692,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var Breadcrumbs$1 = Breadcrumbs;
 
@@ -24498,7 +24713,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
 
   var ButtonGroupContext$1 = ButtonGroupContext;
 
-  const _excluded$1G = ["children", "className", "color", "component", "disabled", "disableElevation", "disableFocusRipple", "disableRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"];
+  const _excluded$1G = ["children", "color", "component", "className", "disabled", "disableElevation", "disableFocusRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"];
 
   const useUtilityClasses$1p = ownerState => {
     const {
@@ -24699,51 +24914,32 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     marginRight: -2
   }, commonIconStyles(ownerState)));
   const Button = /*#__PURE__*/React__namespace.forwardRef(function Button(inProps, ref) {
+    // props priority: `inProps` > `contextProps` > `themeDefaultProps`
+    const contextProps = React__namespace.useContext(ButtonGroupContext$1);
+    const resolvedProps = resolveProps(contextProps, inProps);
     const props = useThemeProps({
-      props: inProps,
+      props: resolvedProps,
       name: 'MuiButton'
     });
-    const {
-      className: classNameContext,
-      color: colorContext,
-      disabled: disabledContext,
-      disableElevation: disableElevationContext,
-      disableFocusRipple: disableFocusRippleContext,
-      disableRipple: disableRippleContext,
-      fullWidth: fullWidthContext,
-      size: sizeContext,
-      variant: variantContext
-    } = React__namespace.useContext(ButtonGroupContext$1);
 
     const {
       children,
-      className,
-      color: colorProp,
+      color = 'primary',
       component = 'button',
-      disabled: disabledProp,
-      disableElevation: disableElevationProp,
-      disableFocusRipple: disableFocusRippleProp,
-      disableRipple: disableRippleProp,
+      className,
+      disabled = false,
+      disableElevation = false,
+      disableFocusRipple = false,
       endIcon: endIconProp,
       focusVisibleClassName,
-      fullWidth: fullWidthProp,
-      size: sizeProp,
+      fullWidth = false,
+      size = 'medium',
       startIcon: startIconProp,
       type,
-      variant: variantProp
+      variant = 'text'
     } = props,
           other = _objectWithoutPropertiesLoose(props, _excluded$1G);
 
-    const color = colorProp || colorContext || 'primary'; // TODO v6: Use nullish coalescing (??) instead of OR operator for these boolean props so that these boolean props for Button with ButtonGroup context take priority. See conversation from https://github.com/mui-org/material-ui/pull/28645#discussion_r738380902.
-
-    const disabled = disabledProp || disabledContext || false;
-    const disableElevation = disableElevationProp || disableElevationContext || false;
-    const disableFocusRipple = disableFocusRippleProp || disableFocusRippleContext || false;
-    const fullWidth = fullWidthProp || fullWidthContext || false;
-    const size = sizeProp || sizeContext || 'medium';
-    const variant = variantProp || variantContext || 'text';
-    const disableRipple = disableRippleProp || disableRippleContext || false;
-
     const ownerState = _extends({}, props, {
       color,
       component,
@@ -24772,10 +24968,9 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
 
     return /*#__PURE__*/jsxRuntime_2(ButtonRoot, _extends({
       ownerState: ownerState,
-      className: clsx(className, classNameContext),
+      className: clsx(className, contextProps.className),
       component: component,
       disabled: disabled,
-      disableRipple: disableRipple,
       focusRipple: !disableFocusRipple,
       focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
       ref: ref,
@@ -24888,7 +25083,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * @ignore
@@ -25166,7 +25361,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The variant to use.
@@ -25267,7 +25462,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var Card$1 = Card;
 
@@ -25389,7 +25584,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var CardActionArea$1 = CardActionArea;
 
@@ -25487,7 +25682,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var CardActions$1 = CardActions;
 
@@ -25577,7 +25772,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var CardContent$1 = CardContent;
 
@@ -25780,7 +25975,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The content of the component.
@@ -25940,7 +26135,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var CardMedia$1 = CardMedia;
 
@@ -26486,7 +26681,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The value of the component. The DOM API casts this to a string.
@@ -26738,7 +26933,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The thickness of the circle.
@@ -26762,192 +26957,6 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   } ;
   var CircularProgress$1 = CircularProgress;
 
-  function mapEventPropToEvent(eventProp) {
-    return eventProp.substring(2).toLowerCase();
-  }
-
-  function clickedRootScrollbar(event, doc) {
-    return doc.documentElement.clientWidth < event.clientX || doc.documentElement.clientHeight < event.clientY;
-  }
-
-  /**
-   * Listen for click events that occur somewhere in the document, outside of the element itself.
-   * For instance, if you need to hide a menu when people click anywhere else on your page.
-   *
-   * Demos:
-   *
-   * - [Click Away Listener](https://mui.com/components/click-away-listener/)
-   * - [Menus](https://mui.com/components/menus/)
-   *
-   * API:
-   *
-   * - [ClickAwayListener API](https://mui.com/api/click-away-listener/)
-   */
-  function ClickAwayListener(props) {
-    const {
-      children,
-      disableReactTree = false,
-      mouseEvent = 'onClick',
-      onClickAway,
-      touchEvent = 'onTouchEnd'
-    } = props;
-    const movedRef = React__namespace.useRef(false);
-    const nodeRef = React__namespace.useRef(null);
-    const activatedRef = React__namespace.useRef(false);
-    const syntheticEventRef = React__namespace.useRef(false);
-    React__namespace.useEffect(() => {
-      // Ensure that this component is not "activated" synchronously.
-      // https://github.com/facebook/react/issues/20074
-      setTimeout(() => {
-        activatedRef.current = true;
-      }, 0);
-      return () => {
-        activatedRef.current = false;
-      };
-    }, []);
-    const handleRef = useForkRef( // @ts-expect-error TODO upstream fix
-    children.ref, nodeRef); // The handler doesn't take event.defaultPrevented into account:
-    //
-    // event.preventDefault() is meant to stop default behaviors like
-    // clicking a checkbox to check it, hitting a button to submit a form,
-    // and hitting left arrow to move the cursor in a text input etc.
-    // Only special HTML elements have these default behaviors.
-
-    const handleClickAway = useEventCallback(event => {
-      // Given developers can stop the propagation of the synthetic event,
-      // we can only be confident with a positive value.
-      const insideReactTree = syntheticEventRef.current;
-      syntheticEventRef.current = false;
-      const doc = ownerDocument(nodeRef.current); // 1. IE11 support, which trigger the handleClickAway even after the unbind
-      // 2. The child might render null.
-      // 3. Behave like a blur listener.
-
-      if (!activatedRef.current || !nodeRef.current || 'clientX' in event && clickedRootScrollbar(event, doc)) {
-        return;
-      } // Do not act if user performed touchmove
-
-
-      if (movedRef.current) {
-        movedRef.current = false;
-        return;
-      }
-
-      let insideDOM; // If not enough, can use https://github.com/DieterHolvoet/event-propagation-path/blob/master/propagationPath.js
-
-      if (event.composedPath) {
-        insideDOM = event.composedPath().indexOf(nodeRef.current) > -1;
-      } else {
-        insideDOM = !doc.documentElement.contains( // @ts-expect-error returns `false` as intended when not dispatched from a Node
-        event.target) || nodeRef.current.contains( // @ts-expect-error returns `false` as intended when not dispatched from a Node
-        event.target);
-      }
-
-      if (!insideDOM && (disableReactTree || !insideReactTree)) {
-        onClickAway(event);
-      }
-    }); // Keep track of mouse/touch events that bubbled up through the portal.
-
-    const createHandleSynthetic = handlerName => event => {
-      syntheticEventRef.current = true;
-      const childrenPropsHandler = children.props[handlerName];
-
-      if (childrenPropsHandler) {
-        childrenPropsHandler(event);
-      }
-    };
-
-    const childrenProps = {
-      ref: handleRef
-    };
-
-    if (touchEvent !== false) {
-      childrenProps[touchEvent] = createHandleSynthetic(touchEvent);
-    }
-
-    React__namespace.useEffect(() => {
-      if (touchEvent !== false) {
-        const mappedTouchEvent = mapEventPropToEvent(touchEvent);
-        const doc = ownerDocument(nodeRef.current);
-
-        const handleTouchMove = () => {
-          movedRef.current = true;
-        };
-
-        doc.addEventListener(mappedTouchEvent, handleClickAway);
-        doc.addEventListener('touchmove', handleTouchMove);
-        return () => {
-          doc.removeEventListener(mappedTouchEvent, handleClickAway);
-          doc.removeEventListener('touchmove', handleTouchMove);
-        };
-      }
-
-      return undefined;
-    }, [handleClickAway, touchEvent]);
-
-    if (mouseEvent !== false) {
-      childrenProps[mouseEvent] = createHandleSynthetic(mouseEvent);
-    }
-
-    React__namespace.useEffect(() => {
-      if (mouseEvent !== false) {
-        const mappedMouseEvent = mapEventPropToEvent(mouseEvent);
-        const doc = ownerDocument(nodeRef.current);
-        doc.addEventListener(mappedMouseEvent, handleClickAway);
-        return () => {
-          doc.removeEventListener(mappedMouseEvent, handleClickAway);
-        };
-      }
-
-      return undefined;
-    }, [handleClickAway, mouseEvent]);
-    return /*#__PURE__*/jsxRuntime_1(React__namespace.Fragment, {
-      children: /*#__PURE__*/React__namespace.cloneElement(children, childrenProps)
-    });
-  }
-
-  ClickAwayListener.propTypes
-  /* remove-proptypes */
-  = {
-    // ----------------------------- Warning --------------------------------
-    // | These PropTypes are generated from the TypeScript type definitions |
-    // |     To update them edit TypeScript types and run "yarn proptypes"  |
-    // ----------------------------------------------------------------------
-
-    /**
-     * The wrapped element.
-     */
-    children: elementAcceptingRef$1.isRequired,
-
-    /**
-     * If `true`, the React tree is ignored and only the DOM tree is considered.
-     * This prop changes how portaled elements are handled.
-     * @default false
-     */
-    disableReactTree: propTypes.bool,
-
-    /**
-     * The mouse event to listen to. You can disable the listener by providing `false`.
-     * @default 'onClick'
-     */
-    mouseEvent: propTypes.oneOf(['onClick', 'onMouseDown', 'onMouseUp', false]),
-
-    /**
-     * Callback fired when a "click away" event is detected.
-     */
-    onClickAway: propTypes.func.isRequired,
-
-    /**
-     * The touch event to listen to. You can disable the listener by providing `false`.
-     * @default 'onTouchEnd'
-     */
-    touchEvent: propTypes.oneOf(['onTouchEnd', 'onTouchStart', false])
-  } ;
-
-  {
-    // eslint-disable-next-line
-    ClickAwayListener['propTypes' + ''] = exactProp(ClickAwayListener.propTypes);
-  }
-
   function getContainerUtilityClass(slot) {
     return generateUtilityClass('MuiContainer', slot);
   }
@@ -27106,7 +27115,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var Container$1 = Container;
 
@@ -27217,7 +27226,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     children: propTypes.node,
 
     /**
-     * Enable `color-scheme` css property to use `theme.palette.mode`.
+     * Enable `color-scheme` CSS property to use `theme.palette.mode`.
      * For more details, check out https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme
      * For browser support, check out https://caniuse.com/?search=color-scheme
      * @default false
@@ -27522,7 +27531,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var Modal$1 = Modal;
 
@@ -27741,7 +27750,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       }
     };
 
-    const ariaLabelledby = useReactId(ariaLabelledbyProp);
+    const ariaLabelledby = useId(ariaLabelledbyProp);
     const dialogContextValue = React__namespace.useMemo(() => {
       return {
         titleId: ariaLabelledby
@@ -27911,7 +27920,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The component used for the transition.
@@ -27933,7 +27942,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
 
     /**
      * Props applied to the transition element.
-     * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition) component.
+     * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component.
      */
     TransitionProps: propTypes.object
   } ;
@@ -28035,7 +28044,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var DialogActions$1 = DialogActions;
 
@@ -28146,7 +28155,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var DialogContent$1 = DialogContent;
 
@@ -28215,7 +28224,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var DialogContentText$1 = DialogContentText;
 
@@ -28296,7 +28305,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var DialogTitle$1 = DialogTitle;
 
@@ -28544,7 +28553,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The text alignment.
@@ -29223,7 +29232,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The duration for the transition, in milliseconds.
@@ -29478,7 +29487,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The variant to use.
@@ -29537,7 +29546,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     return obj.startAdornment;
   }
 
-  const _excluded$1k = ["aria-describedby", "autoComplete", "autoFocus", "className", "color", "components", "componentsProps", "defaultValue", "disabled", "endAdornment", "error", "fullWidth", "id", "inputComponent", "inputProps", "inputRef", "margin", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onClick", "onFocus", "onKeyDown", "onKeyUp", "placeholder", "readOnly", "renderSuffix", "rows", "size", "startAdornment", "type", "value"];
+  const _excluded$1k = ["aria-describedby", "autoComplete", "autoFocus", "className", "color", "components", "componentsProps", "defaultValue", "disabled", "disableInjectingGlobalStyles", "endAdornment", "error", "fullWidth", "id", "inputComponent", "inputProps", "inputRef", "margin", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onClick", "onFocus", "onKeyDown", "onKeyUp", "placeholder", "readOnly", "renderSuffix", "rows", "size", "startAdornment", "type", "value"];
   const rootOverridesResolver = (props, styles) => {
     const {
       ownerState
@@ -29738,6 +29747,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       componentsProps = {},
       defaultValue,
       disabled,
+      disableInjectingGlobalStyles,
       endAdornment,
       fullWidth = false,
       id,
@@ -29968,7 +29978,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     const Input = components.Input || InputBaseComponent;
     inputProps = _extends({}, inputProps, componentsProps.input);
     return /*#__PURE__*/jsxRuntime_2(React__namespace.Fragment, {
-      children: [inputGlobalStyles, /*#__PURE__*/jsxRuntime_2(Root, _extends({}, rootProps, !isHostComponent(Root) && {
+      children: [!disableInjectingGlobalStyles && inputGlobalStyles, /*#__PURE__*/jsxRuntime_2(Root, _extends({}, rootProps, !isHostComponent(Root) && {
         ownerState: _extends({}, ownerState, rootProps.ownerState)
       }, {
         ref: ref,
@@ -30082,6 +30092,13 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
      */
     disabled: propTypes.bool,
 
+    /**
+     * If `true`, GlobalStyles for the auto-fill keyframes will not be injected/removed on mount/unmount. Make sure to inject them at the top of your application.
+     * This option is intended to help with boosting the initial rendering performance if you are loading a big amount of Input components at once.
+     * @default false
+     */
+    disableInjectingGlobalStyles: propTypes.bool,
+
     /**
      * End `InputAdornment` for this component.
      */
@@ -30227,7 +30244,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types).
@@ -30621,7 +30638,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types).
@@ -30945,7 +30962,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The variant to use.
@@ -31159,7 +31176,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The value of the component.
@@ -31266,7 +31283,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var FormGroup$1 = FormGroup;
 
@@ -31443,7 +31460,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The variant to use.
@@ -31624,7 +31641,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var FormLabel$1 = FormLabel;
 
@@ -31661,69 +31678,84 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     return `${parse}${String(val).replace(String(parse), '') || 'px'}`;
   }
 
-  function generateGrid(globalStyles, theme, breakpoint, ownerState) {
-    const size = ownerState[breakpoint];
+  function generateGrid({
+    theme,
+    ownerState
+  }) {
+    let size;
+    return theme.breakpoints.keys.reduce((globalStyles, breakpoint) => {
+      // Use side effect over immutability for better performance.
+      let styles = {};
 
-    if (!size) {
-      return;
-    }
+      if (ownerState[breakpoint]) {
+        size = ownerState[breakpoint];
+      }
 
-    let styles = {};
+      if (!size) {
+        return globalStyles;
+      }
 
-    if (size === true) {
-      // For the auto layouting
-      styles = {
-        flexBasis: 0,
-        flexGrow: 1,
-        maxWidth: '100%'
-      };
-    } else if (size === 'auto') {
-      styles = {
-        flexBasis: 'auto',
-        flexGrow: 0,
-        flexShrink: 0,
-        maxWidth: 'none',
-        width: 'auto'
-      };
-    } else {
-      const columnsBreakpointValues = resolveBreakpointValues({
-        values: ownerState.columns,
-        breakpoints: theme.breakpoints.values
-      });
-      const columnValue = typeof columnsBreakpointValues === 'object' ? columnsBreakpointValues[breakpoint] : columnsBreakpointValues; // Keep 7 significant numbers.
+      if (size === true) {
+        // For the auto layouting
+        styles = {
+          flexBasis: 0,
+          flexGrow: 1,
+          maxWidth: '100%'
+        };
+      } else if (size === 'auto') {
+        styles = {
+          flexBasis: 'auto',
+          flexGrow: 0,
+          flexShrink: 0,
+          maxWidth: 'none',
+          width: 'auto'
+        };
+      } else {
+        const columnsBreakpointValues = resolveBreakpointValues({
+          values: ownerState.columns,
+          breakpoints: theme.breakpoints.values
+        });
+        const columnValue = typeof columnsBreakpointValues === 'object' ? columnsBreakpointValues[breakpoint] : columnsBreakpointValues;
 
-      const width = `${Math.round(size / columnValue * 10e7) / 10e5}%`;
-      let more = {};
+        if (columnValue === undefined || columnValue === null) {
+          return globalStyles;
+        } // Keep 7 significant numbers.
 
-      if (ownerState.container && ownerState.item && ownerState.columnSpacing !== 0) {
-        const themeSpacing = theme.spacing(ownerState.columnSpacing);
 
-        if (themeSpacing !== '0px') {
-          const fullWidth = `calc(${width} + ${getOffset(themeSpacing)})`;
-          more = {
-            flexBasis: fullWidth,
-            maxWidth: fullWidth
-          };
-        }
-      } // Close to the bootstrap implementation:
-      // https://github.com/twbs/bootstrap/blob/8fccaa2439e97ec72a4b7dc42ccc1f649790adb0/scss/mixins/_grid.scss#L41
+        const width = `${Math.round(size / columnValue * 10e7) / 10e5}%`;
+        let more = {};
+
+        if (ownerState.container && ownerState.item && ownerState.columnSpacing !== 0) {
+          const themeSpacing = theme.spacing(ownerState.columnSpacing);
 
+          if (themeSpacing !== '0px') {
+            const fullWidth = `calc(${width} + ${getOffset(themeSpacing)})`;
+            more = {
+              flexBasis: fullWidth,
+              maxWidth: fullWidth
+            };
+          }
+        } // Close to the bootstrap implementation:
+        // https://github.com/twbs/bootstrap/blob/8fccaa2439e97ec72a4b7dc42ccc1f649790adb0/scss/mixins/_grid.scss#L41
 
-      styles = _extends({
-        flexBasis: width,
-        flexGrow: 0,
-        maxWidth: width
-      }, more);
-    } // No need for a media query for the first size.
 
+        styles = _extends({
+          flexBasis: width,
+          flexGrow: 0,
+          maxWidth: width
+        }, more);
+      } // No need for a media query for the first size.
 
-    if (theme.breakpoints.values[breakpoint] === 0) {
-      Object.assign(globalStyles, styles);
-    } else {
-      globalStyles[theme.breakpoints.up(breakpoint)] = styles;
-    }
-  }
 
+      if (theme.breakpoints.values[breakpoint] === 0) {
+        Object.assign(globalStyles, styles);
+      } else {
+        globalStyles[theme.breakpoints.up(breakpoint)] = styles;
+      }
+
+      return globalStyles;
+    }, {});
+  }
   function generateDirection({
     theme,
     ownerState
@@ -31818,6 +31850,27 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     }
 
     return styles;
+  }
+  function resolveSpacingClasses(spacing, container, styles = {}) {
+    // in case of grid item or undefined/null or `spacing` <= 0
+    if (!container || !spacing || spacing <= 0) {
+      return [];
+    } // in case of string/number `spacing`
+
+
+    if (typeof spacing === 'string' && !Number.isNaN(Number(spacing)) || typeof spacing === 'number') {
+      return [styles[`spacing-xs-${String(spacing)}`] || `spacing-xs-${String(spacing)}`];
+    } // in case of object `spacing`
+
+
+    const {
+      xs,
+      sm,
+      md,
+      lg,
+      xl
+    } = spacing;
+    return [Number(xs) > 0 && (styles[`spacing-xs-${String(xs)}`] || `spacing-xs-${String(xs)}`), Number(sm) > 0 && (styles[`spacing-sm-${String(sm)}`] || `spacing-sm-${String(sm)}`), Number(md) > 0 && (styles[`spacing-md-${String(md)}`] || `spacing-md-${String(md)}`), Number(lg) > 0 && (styles[`spacing-lg-${String(lg)}`] || `spacing-lg-${String(lg)}`), Number(xl) > 0 && (styles[`spacing-xl-${String(xl)}`] || `spacing-xl-${String(xl)}`)];
   } // Default CSS values
   // flex: '0 1 auto',
   // flexDirection: 'row',
@@ -31842,7 +31895,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
         xs,
         zeroMinWidth
       } = props.ownerState;
-      return [styles.root, container && styles.container, item && styles.item, zeroMinWidth && styles.zeroMinWidth, container && spacing !== 0 && styles[`spacing-xs-${String(spacing)}`], direction !== 'row' && styles[`direction-xs-${String(direction)}`], wrap !== 'wrap' && styles[`wrap-xs-${String(wrap)}`], xs !== false && styles[`grid-xs-${String(xs)}`], sm !== false && styles[`grid-sm-${String(sm)}`], md !== false && styles[`grid-md-${String(md)}`], lg !== false && styles[`grid-lg-${String(lg)}`], xl !== false && styles[`grid-xl-${String(xl)}`]];
+      return [styles.root, container && styles.container, item && styles.item, zeroMinWidth && styles.zeroMinWidth, ...resolveSpacingClasses(spacing, container, styles), direction !== 'row' && styles[`direction-xs-${String(direction)}`], wrap !== 'wrap' && styles[`wrap-xs-${String(wrap)}`], xs !== false && styles[`grid-xs-${String(xs)}`], sm !== false && styles[`grid-sm-${String(sm)}`], md !== false && styles[`grid-md-${String(md)}`], lg !== false && styles[`grid-lg-${String(lg)}`], xl !== false && styles[`grid-xl-${String(xl)}`]];
     }
   })(({
     ownerState
@@ -31861,14 +31914,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     flexWrap: 'nowrap'
   }, ownerState.wrap === 'reverse' && {
     flexWrap: 'wrap-reverse'
-  }), generateDirection, generateRowGap, generateColumnGap, ({
-    theme,
-    ownerState
-  }) => theme.breakpoints.keys.reduce((globalStyles, breakpoint) => {
-    // Use side effect over immutability for better performance.
-    generateGrid(globalStyles, theme, breakpoint, ownerState);
-    return globalStyles;
-  }, {}));
+  }), generateDirection, generateRowGap, generateColumnGap, generateGrid);
 
   const useUtilityClasses$_ = ownerState => {
     const {
@@ -31886,7 +31932,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       zeroMinWidth
     } = ownerState;
     const slots = {
-      root: ['root', container && 'container', item && 'item', zeroMinWidth && 'zeroMinWidth', container && spacing !== 0 && `spacing-xs-${String(spacing)}`, direction !== 'row' && `direction-xs-${String(direction)}`, wrap !== 'wrap' && `wrap-xs-${String(wrap)}`, xs !== false && `grid-xs-${String(xs)}`, sm !== false && `grid-sm-${String(sm)}`, md !== false && `grid-md-${String(md)}`, lg !== false && `grid-lg-${String(lg)}`, xl !== false && `grid-xl-${String(xl)}`]
+      root: ['root', container && 'container', item && 'item', zeroMinWidth && 'zeroMinWidth', ...resolveSpacingClasses(spacing, container), direction !== 'row' && `direction-xs-${String(direction)}`, wrap !== 'wrap' && `wrap-xs-${String(wrap)}`, xs !== false && `grid-xs-${String(xs)}`, sm !== false && `grid-sm-${String(sm)}`, md !== false && `grid-md-${String(md)}`, lg !== false && `grid-lg-${String(lg)}`, xl !== false && `grid-xl-${String(xl)}`]
     };
     return composeClasses(slots, getGridUtilityClass, classes);
   };
@@ -32066,7 +32112,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * Defines the `flex-wrap` style property.
@@ -32397,8 +32443,32 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
    * @deprecated Not used internally. Use `MediaQueryListEvent` from lib.dom.d.ts instead.
    */
 
-  function useMediaQueryOld(query, defaultMatches, matchMedia, ssrMatchMedia, noSsr) {
+  function useMediaQuery(queryInput, options = {}) {
+    const theme = useTheme$2(); // Wait for jsdom to support the match media feature.
+    // All the browsers MUI support have this built-in.
+    // This defensive check is here for simplicity.
+    // Most of the time, the match media logic isn't central to people tests.
+
     const supportMatchMedia = typeof window !== 'undefined' && typeof window.matchMedia !== 'undefined';
+    const {
+      defaultMatches = false,
+      matchMedia = supportMatchMedia ? window.matchMedia : null,
+      noSsr = false,
+      ssrMatchMedia = null
+    } = getThemeProps({
+      name: 'MuiUseMediaQuery',
+      props: options,
+      theme
+    });
+
+    {
+      if (typeof queryInput === 'function' && theme === null) {
+        console.error(['MUI: The `query` argument provided is invalid.', 'You are providing a function without a theme in the context.', 'One of the parent elements needs to use a ThemeProvider.'].join('\n'));
+      }
+    }
+
+    let query = typeof queryInput === 'function' ? queryInput(theme) : queryInput;
+    query = query.replace(/^@media( ?)/m, '');
     const [match, setMatch] = React__namespace.useState(() => {
       if (noSsr && supportMatchMedia) {
         return matchMedia(query).matches;
@@ -32430,76 +32500,13 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
         }
       };
 
-      updateMatch(); // TODO: Use `addEventListener` once support for Safari < 14 is dropped
-
+      updateMatch();
       queryList.addListener(updateMatch);
       return () => {
         active = false;
         queryList.removeListener(updateMatch);
       };
     }, [query, matchMedia, supportMatchMedia]);
-    return match;
-  }
-
-  function useMediaQueryNew(query, defaultMatches, matchMedia, ssrMatchMedia) {
-    const getDefaultSnapshot = React__namespace.useCallback(() => defaultMatches, [defaultMatches]);
-    const getServerSnapshot = React__namespace.useMemo(() => {
-      if (ssrMatchMedia !== null) {
-        const {
-          matches
-        } = ssrMatchMedia(query);
-        return () => matches;
-      }
-
-      return getDefaultSnapshot;
-    }, [getDefaultSnapshot, query, ssrMatchMedia]);
-    const [getSnapshot, subscribe] = React__namespace.useMemo(() => {
-      if (matchMedia === null) {
-        return [getDefaultSnapshot, () => () => {}];
-      }
-
-      const mediaQueryList = matchMedia(query);
-      return [() => mediaQueryList.matches, notify => {
-        // TODO: Use `addEventListener` once support for Safari < 14 is dropped
-        mediaQueryList.addListener(notify);
-        return () => {
-          mediaQueryList.removeListener(notify);
-        };
-      }];
-    }, [getDefaultSnapshot, matchMedia, query]);
-    const match = React__namespace.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
-    return match;
-  }
-
-  function useMediaQuery(queryInput, options = {}) {
-    const theme = useTheme$2(); // Wait for jsdom to support the match media feature.
-    // All the browsers MUI support have this built-in.
-    // This defensive check is here for simplicity.
-    // Most of the time, the match media logic isn't central to people tests.
-
-    const supportMatchMedia = typeof window !== 'undefined' && typeof window.matchMedia !== 'undefined';
-    const {
-      defaultMatches = false,
-      matchMedia = supportMatchMedia ? window.matchMedia : null,
-      ssrMatchMedia = null,
-      noSsr
-    } = getThemeProps({
-      name: 'MuiUseMediaQuery',
-      props: options,
-      theme
-    });
-
-    {
-      if (typeof queryInput === 'function' && theme === null) {
-        console.error(['MUI: The `query` argument provided is invalid.', 'You are providing a function without a theme in the context.', 'One of the parent elements needs to use a ThemeProvider.'].join('\n'));
-      }
-    }
-
-    let query = typeof queryInput === 'function' ? queryInput(theme) : queryInput;
-    query = query.replace(/^@media( ?)/m, ''); // TODO: Drop `useMediaQueryOld` and use  `use-sync-external-store` shim in `useMediaQueryNew` once the package is stable
-
-    const useMediaQueryImplementation = React__namespace.useSyncExternalStore !== undefined ? useMediaQueryNew : useMediaQueryOld;
-    const match = useMediaQueryImplementation(query, defaultMatches, matchMedia, ssrMatchMedia, noSsr);
 
     {
       // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -33266,7 +33273,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   Icon.muiName = 'Icon';
   var Icon$1 = Icon;
@@ -33443,7 +33450,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The variant to use.
@@ -33631,7 +33638,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var ImageListItem$1 = ImageListItem;
 
@@ -33857,7 +33864,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * Title to be displayed.
@@ -34172,7 +34179,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types).
@@ -34367,7 +34374,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The variant to use.
@@ -34580,7 +34587,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The variant to use.
@@ -34929,7 +34936,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The value of the progress indicator for the determinate and buffer variants.
@@ -35162,7 +35169,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * `classes` prop applied to the [`Typography`](/api/typography/) element.
@@ -35330,7 +35337,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var List$1 = List;
 
@@ -35558,7 +35565,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
      * This prop can help identify which element has keyboard focus.
      * The class name will be applied when the element gains the focus through keyboard interaction.
      * It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).
-     * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/master/explainer.md).
+     * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/HEAD/explainer.md).
      * A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components
      * if needed.
      */
@@ -35573,7 +35580,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var ListItemButton$1 = ListItemButton;
 
@@ -35669,7 +35676,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   ListItemSecondaryAction.muiName = 'ListItemSecondaryAction';
   var ListItemSecondaryAction$1 = ListItemSecondaryAction;
@@ -36070,7 +36077,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var ListItem$1 = ListItem;
 
@@ -36164,7 +36171,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var ListItemAvatar$1 = ListItemAvatar;
 
@@ -36262,7 +36269,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var ListItemIcon$1 = ListItemIcon;
 
@@ -36444,7 +36451,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var ListItemText$1 = ListItemText;
 
@@ -37198,7 +37205,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * This is the point on the popover which
@@ -37236,7 +37243,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
 
     /**
      * Props applied to the transition element.
-     * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition) component.
+     * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component.
      * @default {}
      */
     TransitionProps: propTypes.object
@@ -37501,7 +37508,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The length of the transition in `ms`, or 'auto'
@@ -37515,7 +37522,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
 
     /**
      * Props applied to the transition element.
-     * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition) component.
+     * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component.
      * @default {}
      */
     TransitionProps: propTypes.object,
@@ -37763,7 +37770,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
      * This prop can help identify which element has keyboard focus.
      * The class name will be applied when the element gains the focus through keyboard interaction.
      * It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).
-     * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/master/explainer.md).
+     * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/HEAD/explainer.md).
      * A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components
      * if needed.
      */
@@ -37784,7 +37791,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * @default 0
@@ -37997,7 +38004,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The variant to use.
@@ -38345,7 +38352,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The `input` value. The DOM API casts this to a string.
@@ -38584,6 +38591,8 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     paddingRight: 0
   }));
   const OutlinedInput = /*#__PURE__*/React__namespace.forwardRef(function OutlinedInput(inProps, ref) {
+    var _React$Fragment;
+
     const props = useThemeProps({
       props: inProps,
       name: 'MuiOutlinedInput'
@@ -38601,6 +38610,12 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
           other = _objectWithoutPropertiesLoose(props, _excluded$M);
 
     const classes = useUtilityClasses$C(props);
+    const muiFormControl = useFormControl();
+    const fcs = formControlState({
+      props,
+      muiFormControl,
+      states: ['required']
+    });
     return /*#__PURE__*/jsxRuntime_1(InputBase$1, _extends({
       components: _extends({
         Root: OutlinedInputRoot,
@@ -38608,7 +38623,9 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       }, components),
       renderSuffix: state => /*#__PURE__*/jsxRuntime_1(NotchedOutlineRoot, {
         className: classes.notchedOutline,
-        label: label,
+        label: label && fcs.required ? _React$Fragment || (_React$Fragment = /*#__PURE__*/jsxRuntime_2(React__namespace.Fragment, {
+          children: [label, "\xA0", '*']
+        })) : label,
         notched: typeof notched !== 'undefined' ? notched : Boolean(state.startAdornment || state.filled || state.focused)
       }),
       fullWidth: fullWidth,
@@ -38793,7 +38810,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types).
@@ -39290,7 +39307,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The type of pagination item.
@@ -39556,7 +39573,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The variant to use.
@@ -39886,7 +39903,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The value of the component. The DOM API casts this to a string.
@@ -39938,7 +39955,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       }
     };
 
-    const name = useReactId(nameProp);
+    const name = useId(nameProp);
     return /*#__PURE__*/jsxRuntime_1(RadioGroupContext$1.Provider, {
       value: {
         name,
@@ -40196,7 +40213,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     const isHovered = itemValue <= hover;
     const isFocused = itemValue <= focus;
     const isChecked = itemValue === ratingValueRounded;
-    const id = useReactId();
+    const id = useId();
 
     const container = /*#__PURE__*/jsxRuntime_1(RatingIcon, {
       as: IconContainerComponent,
@@ -40310,7 +40327,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     } = props,
           other = _objectWithoutPropertiesLoose(props, _excluded2$3);
 
-    const name = useReactId(nameProp);
+    const name = useId(nameProp);
     const [valueDerived, setValueState] = useControlled({
       controlled: valueProp,
       default: defaultValue,
@@ -40703,7 +40720,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The rating value.
@@ -40801,7 +40818,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     component: propTypes.elementType,
 
     /**
-     * Enable `color-scheme` css property to use `theme.palette.mode`.
+     * Enable `color-scheme` CSS property to use `theme.palette.mode`.
      * For more details, check out https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme
      * For browser support, check out https://caniuse.com/?search=color-scheme
      */
@@ -41201,7 +41218,23 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     }
 
     if (computeDisplay) {
-      display = multiple ? displayMultiple.join(', ') : displaySingle;
+      if (multiple) {
+        if (displayMultiple.length === 0) {
+          display = null;
+        } else {
+          display = displayMultiple.reduce((output, child, index) => {
+            output.push(child);
+
+            if (index < displayMultiple.length - 1) {
+              output.push(', ');
+            }
+
+            return output;
+          }, []);
+        }
+      } else {
+        display = displaySingle;
+      }
     } // Avoid performing a layout computation in the render method.
 
 
@@ -41715,7 +41748,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The `input` value. Providing an empty string will select no options.
@@ -41945,7 +41978,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The type of content that will be rendered.
@@ -42584,7 +42617,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * Tab index attribute of the hidden `input` element.
@@ -42766,7 +42799,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var SnackbarContent$1 = SnackbarContent;
 
@@ -42777,7 +42810,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   var snackbarClasses$1 = snackbarClasses;
 
   const _excluded$z = ["onEnter", "onExited"],
-        _excluded2$2 = ["action", "anchorOrigin", "autoHideDuration", "children", "className", "ClickAwayListenerProps", "ContentProps", "disableWindowBlurListener", "message", "onClose", "onMouseEnter", "onMouseLeave", "open", "resumeHideDuration", "TransitionComponent", "transitionDuration", "TransitionProps"];
+        _excluded2$2 = ["action", "anchorOrigin", "autoHideDuration", "children", "className", "ClickAwayListenerProps", "ContentProps", "disableWindowBlurListener", "message", "onBlur", "onClose", "onFocus", "onMouseEnter", "onMouseLeave", "open", "resumeHideDuration", "TransitionComponent", "transitionDuration", "TransitionProps"];
 
   const useUtilityClasses$s = ownerState => {
     const {
@@ -42871,7 +42904,9 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       ContentProps,
       disableWindowBlurListener = false,
       message,
+      onBlur,
       onClose,
+      onFocus,
       onMouseEnter,
       onMouseLeave,
       open,
@@ -42941,6 +42976,14 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       }
     }, [autoHideDuration, resumeHideDuration, setAutoHideTimer]);
 
+    const handleFocus = event => {
+      if (onFocus) {
+        onFocus(event);
+      }
+
+      handlePause();
+    };
+
     const handleMouseEnter = event => {
       if (onMouseEnter) {
         onMouseEnter(event);
@@ -42949,6 +42992,14 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       handlePause();
     };
 
+    const handleBlur = event => {
+      if (onBlur) {
+        onBlur(event);
+      }
+
+      handleResume();
+    };
+
     const handleMouseLeave = event => {
       if (onMouseLeave) {
         onMouseLeave(event);
@@ -42991,7 +43042,33 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       }
 
       return undefined;
-    }, [disableWindowBlurListener, handleResume, open]); // So we only render active snackbars.
+    }, [disableWindowBlurListener, handleResume, open]);
+    React__namespace.useEffect(() => {
+      if (!open) {
+        return undefined;
+      }
+      /**
+       * @param {KeyboardEvent} nativeEvent
+       */
+
+
+      function handleKeyDown(nativeEvent) {
+        if (!nativeEvent.defaultPrevented) {
+          // IE11, Edge (prior to using Bink?) use 'Esc'
+          if (nativeEvent.key === 'Escape' || nativeEvent.key === 'Esc') {
+            // not calling `preventDefault` since we don't know if people may ignore this event e.g. a permanently open snackbar
+            if (onClose) {
+              onClose(nativeEvent, 'escapeKeyDown');
+            }
+          }
+        }
+      }
+
+      document.addEventListener('keydown', handleKeyDown);
+      return () => {
+        document.removeEventListener('keydown', handleKeyDown);
+      };
+    }, [exited, open, onClose]); // So we only render active snackbars.
 
     if (!open && exited) {
       return null;
@@ -43002,6 +43079,8 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     }, ClickAwayListenerProps, {
       children: /*#__PURE__*/jsxRuntime_1(SnackbarRoot, _extends({
         className: clsx(classes.root, className),
+        onBlur: handleBlur,
+        onFocus: handleFocus,
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
         ownerState: ownerState,
@@ -43100,6 +43179,11 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
      */
     message: propTypes.node,
 
+    /**
+     * @ignore
+     */
+    onBlur: propTypes.func,
+
     /**
      * Callback fired when the component requests to be closed.
      * Typically `onClose` is used to set state in the parent component,
@@ -43107,11 +43191,16 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
      * The `reason` parameter can optionally be used to control the response to `onClose`,
      * for example ignoring `clickaway`.
      *
-     * @param {React.SyntheticEvent<any>} event The event source of the callback.
-     * @param {string} reason Can be: `"timeout"` (`autoHideDuration` expired), `"clickaway"`.
+     * @param {React.SyntheticEvent<any> | Event} event The event source of the callback.
+     * @param {string} reason Can be: `"timeout"` (`autoHideDuration` expired), `"clickaway"`, or `"escapeKeyDown"`.
      */
     onClose: propTypes.func,
 
+    /**
+     * @ignore
+     */
+    onFocus: propTypes.func,
+
     /**
      * @ignore
      */
@@ -43138,7 +43227,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The component used for the transition.
@@ -43163,7 +43252,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
 
     /**
      * Props applied to the transition element.
-     * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition) component.
+     * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component.
      * @default {}
      */
     TransitionProps: propTypes.object
@@ -43904,7 +43993,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The component used for the transition.
@@ -43929,7 +44018,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
 
     /**
      * Props applied to the transition element.
-     * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition) component.
+     * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component.
      */
     TransitionProps: propTypes.object
   } ;
@@ -44199,7 +44288,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       }, [title, childNode, isControlled]);
     }
 
-    const id = useReactId(idProp);
+    const id = useId(idProp);
     const prevUserSelect = React__namespace.useRef();
     const stopTouchInteraction = React__namespace.useCallback(() => {
       if (prevUserSelect.current !== undefined) {
@@ -44716,7 +44805,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * Tooltip title. Zero-length titles string are never displayed.
@@ -44734,7 +44823,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
 
     /**
      * Props applied to the transition element.
-     * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition) component.
+     * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component.
      */
     TransitionProps: propTypes.object
   } ;
@@ -44975,7 +45064,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * `classes` prop applied to the [`Tooltip`](/api/tooltip/) element.
@@ -45145,7 +45234,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   SpeedDialIcon.muiName = 'SpeedDialIcon';
   var SpeedDialIcon$1 = SpeedDialIcon;
@@ -45300,7 +45389,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop, which allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var Stack$1 = Stack;
 
@@ -45498,7 +45587,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var Step$1 = Step;
 
@@ -45677,7 +45766,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var StepIcon$1 = StepIcon;
 
@@ -45911,7 +46000,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   StepLabel.muiName = 'StepLabel';
   var StepLabel$1 = StepLabel;
@@ -46045,7 +46134,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var StepButton$1 = StepButton;
 
@@ -46180,7 +46269,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var StepConnector$1 = StepConnector;
 
@@ -46316,7 +46405,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The component used for the transition.
@@ -46340,7 +46429,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
 
     /**
      * Props applied to the transition element.
-     * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition) component.
+     * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component.
      */
     TransitionProps: propTypes.object
   } ;
@@ -46496,7 +46585,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var Stepper$1 = Stepper;
 
@@ -47507,7 +47596,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The value of the component. The DOM API casts this to a string.
@@ -47782,7 +47871,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * You can provide your own value. Otherwise, we fallback to the child position index.
@@ -47949,7 +48038,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var Table$1 = Table;
 
@@ -48054,7 +48143,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var TableBody$1 = TableBody;
 
@@ -48274,7 +48363,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * Specify the cell type.
@@ -48366,7 +48455,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var TableContainer$1 = TableContainer;
 
@@ -48459,7 +48548,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var TableFooter$1 = TableFooter;
 
@@ -48552,7 +48641,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var TableHead$1 = TableHead;
 
@@ -48672,7 +48761,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The variant to use.
@@ -48989,8 +49078,8 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       colSpan = colSpanProp || 1000; // col-span over everything
     }
 
-    const selectId = useReactId(SelectProps.id);
-    const labelId = useReactId(SelectProps.labelId);
+    const selectId = useId(SelectProps.id);
+    const labelId = useId(SelectProps.labelId);
 
     const getLabelDisplayedRowsTo = () => {
       if (count === -1) {
@@ -49222,7 +49311,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var TablePagination$1 = TablePagination;
 
@@ -49358,7 +49447,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var TableRow$1 = TableRow;
 
@@ -49539,7 +49628,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var TableSortLabel$1 = TableSortLabel;
 
@@ -49772,7 +49861,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object])
   } ;
   var TabScrollButton$1 = TabScrollButton;
 
@@ -50566,7 +50655,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * Props applied to the tab indicator element.
@@ -50692,7 +50781,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       FormHelperTextProps,
       fullWidth = false,
       helperText,
-      id,
+      id: idOverride,
       InputLabelProps,
       inputProps,
       InputProps,
@@ -50743,14 +50832,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
         InputMore.notched = InputLabelProps.shrink;
       }
 
-      if (label) {
-        var _InputLabelProps$requ;
-
-        const displayRequired = (_InputLabelProps$requ = InputLabelProps == null ? void 0 : InputLabelProps.required) != null ? _InputLabelProps$requ : required;
-        InputMore.label = /*#__PURE__*/jsxRuntime_2(React__namespace.Fragment, {
-          children: [label, displayRequired && '\u00a0*']
-        });
-      }
+      InputMore.label = label;
     }
 
     if (select) {
@@ -50762,6 +50844,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       InputMore['aria-describedby'] = undefined;
     }
 
+    const id = useId(idOverride);
     const helperTextId = helperText && id ? `${id}-helper-text` : undefined;
     const inputLabelId = label && id ? `${id}-label` : undefined;
     const InputComponent = variantComponent[variant];
@@ -51013,7 +51096,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types).
@@ -51255,7 +51338,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The value to associate with the button when selected in a
@@ -51517,7 +51600,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object, propTypes.bool])), propTypes.func, propTypes.object]),
 
     /**
      * The currently selected value within the group or an array of selected
@@ -51797,6 +51880,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   exports.easing = easing;
   exports.emphasize = emphasize;
   exports.experimentalStyled = styled$1;
+  exports.experimental_sx = sx;
   exports.extractEventHandlers = extractEventHandlers;
   exports.fabClasses = fabClasses$1;
   exports.filledInputClasses = filledInputClasses$1;
@@ -52030,7 +52114,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   exports.unstable_getUnit = getUnit;
   exports.unstable_toUnitless = toUnitless;
   exports.unstable_useEnhancedEffect = useEnhancedEffect$1;
-  exports.unstable_useId = useReactId;
+  exports.unstable_useId = useId;
   exports.unsupportedProp = unsupportedProp;
   exports.useAutocomplete = useAutocomplete;
   exports.useButton = useButton;