@mui/material 5.8.5 → 5.9.0

package/umd/material-ui.development.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.8.5
+/** @license MUI v5.9.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -560,6 +560,7 @@
   }
 
   var StyleSheet = /*#__PURE__*/function () {
+    // Using Node instead of HTMLElement since container may be a ShadowRoot
     function StyleSheet(options) {
       var _this = this;
 
@@ -658,7 +659,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;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 e="-ms-";var r$1="-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(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(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(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$1+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$1+(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+"$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+"$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
@@ -918,8 +919,7 @@
       }
     }
 
-    var inserted = {}; // $FlowFixMe
-
+    var inserted = {};
     var container;
     var nodesToHydrate = [];
 
@@ -1066,16 +1066,6 @@
 
   var createCache$1 = createCache;
 
-  /** @license React v17.0.2
-   * react-is.production.min.js
-   *
-   * Copyright (c) Facebook, Inc. and its affiliates.
-   *
-   * This source code is licensed under the MIT license found in the
-   * LICENSE file in the root directory of this source tree.
-   */
-  if("function"===typeof Symbol&&Symbol.for){var x=Symbol.for;x("react.element");x("react.portal");x("react.fragment");x("react.strict_mode");x("react.profiler");x("react.provider");x("react.context");x("react.forward_ref");x("react.suspense");x("react.suspense_list");x("react.memo");x("react.lazy");x("react.block");x("react.server.block");x("react.fundamental");x("react.debug_trace_mode");x("react.legacy_hidden");}
-
   var reactIs_development = createCommonjsModule(function (module, exports) {
 
   {
@@ -1084,53 +1074,39 @@
   // ATTENTION
   // When adding new symbols to this file,
   // Please consider also adding to 'react-devtools-shared/src/backend/ReactSymbols'
-  // The Symbol used to tag the ReactElement-like types. If there is no native Symbol
-  // nor polyfill, then a plain number is used for performance.
-  var REACT_ELEMENT_TYPE = 0xeac7;
-  var REACT_PORTAL_TYPE = 0xeaca;
-  var REACT_FRAGMENT_TYPE = 0xeacb;
-  var REACT_STRICT_MODE_TYPE = 0xeacc;
-  var REACT_PROFILER_TYPE = 0xead2;
-  var REACT_PROVIDER_TYPE = 0xeacd;
-  var REACT_CONTEXT_TYPE = 0xeace;
-  var REACT_FORWARD_REF_TYPE = 0xead0;
-  var REACT_SUSPENSE_TYPE = 0xead1;
-  var REACT_SUSPENSE_LIST_TYPE = 0xead8;
-  var REACT_MEMO_TYPE = 0xead3;
-  var REACT_LAZY_TYPE = 0xead4;
-  var REACT_BLOCK_TYPE = 0xead9;
-  var REACT_SERVER_BLOCK_TYPE = 0xeada;
-  var REACT_FUNDAMENTAL_TYPE = 0xead5;
-  var REACT_DEBUG_TRACING_MODE_TYPE = 0xeae1;
-  var REACT_LEGACY_HIDDEN_TYPE = 0xeae3;
-
-  if (typeof Symbol === 'function' && Symbol.for) {
-    var symbolFor = Symbol.for;
-    REACT_ELEMENT_TYPE = symbolFor('react.element');
-    REACT_PORTAL_TYPE = symbolFor('react.portal');
-    REACT_FRAGMENT_TYPE = symbolFor('react.fragment');
-    REACT_STRICT_MODE_TYPE = symbolFor('react.strict_mode');
-    REACT_PROFILER_TYPE = symbolFor('react.profiler');
-    REACT_PROVIDER_TYPE = symbolFor('react.provider');
-    REACT_CONTEXT_TYPE = symbolFor('react.context');
-    REACT_FORWARD_REF_TYPE = symbolFor('react.forward_ref');
-    REACT_SUSPENSE_TYPE = symbolFor('react.suspense');
-    REACT_SUSPENSE_LIST_TYPE = symbolFor('react.suspense_list');
-    REACT_MEMO_TYPE = symbolFor('react.memo');
-    REACT_LAZY_TYPE = symbolFor('react.lazy');
-    REACT_BLOCK_TYPE = symbolFor('react.block');
-    REACT_SERVER_BLOCK_TYPE = symbolFor('react.server.block');
-    REACT_FUNDAMENTAL_TYPE = symbolFor('react.fundamental');
-    symbolFor('react.scope');
-    symbolFor('react.opaque.id');
-    REACT_DEBUG_TRACING_MODE_TYPE = symbolFor('react.debug_trace_mode');
-    symbolFor('react.offscreen');
-    REACT_LEGACY_HIDDEN_TYPE = symbolFor('react.legacy_hidden');
-  }
-
-  // Filter certain DOM attributes (e.g. src, href) if their values are empty strings.
+  // The Symbol used to tag the ReactElement-like types.
+  var REACT_ELEMENT_TYPE = Symbol.for('react.element');
+  var REACT_PORTAL_TYPE = Symbol.for('react.portal');
+  var REACT_FRAGMENT_TYPE = Symbol.for('react.fragment');
+  var REACT_STRICT_MODE_TYPE = Symbol.for('react.strict_mode');
+  var REACT_PROFILER_TYPE = Symbol.for('react.profiler');
+  var REACT_PROVIDER_TYPE = Symbol.for('react.provider');
+  var REACT_CONTEXT_TYPE = Symbol.for('react.context');
+  var REACT_SERVER_CONTEXT_TYPE = Symbol.for('react.server_context');
+  var REACT_FORWARD_REF_TYPE = Symbol.for('react.forward_ref');
+  var REACT_SUSPENSE_TYPE = Symbol.for('react.suspense');
+  var REACT_SUSPENSE_LIST_TYPE = Symbol.for('react.suspense_list');
+  var REACT_MEMO_TYPE = Symbol.for('react.memo');
+  var REACT_LAZY_TYPE = Symbol.for('react.lazy');
+  var REACT_OFFSCREEN_TYPE = Symbol.for('react.offscreen');
+
+  // -----------------------------------------------------------------------------
 
   var enableScopeAPI = false; // Experimental Create Event Handle API.
+  var enableCacheElement = false;
+  var enableTransitionTracing = false; // No known bugs, but needs performance testing
+
+  var enableLegacyHidden = false; // Enables unstable_avoidThisFallback feature in Fiber
+  // stuff. Intended to enable React core members to more easily debug scheduling
+  // issues in DEV builds.
+
+  var enableDebugTracing = false; // Track which Fiber(s) schedule render work.
+
+  var REACT_MODULE_REFERENCE;
+
+  {
+    REACT_MODULE_REFERENCE = Symbol.for('react.module.reference');
+  }
 
   function isValidElementType(type) {
     if (typeof type === 'string' || typeof type === 'function') {
@@ -1138,12 +1114,16 @@
     } // Note: typeof might be other than 'symbol' or 'number' (e.g. if it's a polyfill).
 
 
-    if (type === REACT_FRAGMENT_TYPE || type === REACT_PROFILER_TYPE || type === REACT_DEBUG_TRACING_MODE_TYPE || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || type === REACT_LEGACY_HIDDEN_TYPE || enableScopeAPI ) {
+    if (type === REACT_FRAGMENT_TYPE || type === REACT_PROFILER_TYPE || enableDebugTracing  || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || enableLegacyHidden  || type === REACT_OFFSCREEN_TYPE || enableScopeAPI  || enableCacheElement  || enableTransitionTracing ) {
       return true;
     }
 
     if (typeof type === 'object' && type !== null) {
-      if (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || type.$$typeof === REACT_FUNDAMENTAL_TYPE || type.$$typeof === REACT_BLOCK_TYPE || type[0] === REACT_SERVER_BLOCK_TYPE) {
+      if (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || // This needs to include all possible module reference object
+      // types supported by any Flight configuration anywhere since
+      // we don't know which Flight build this will end up being used
+      // with.
+      type.$$typeof === REACT_MODULE_REFERENCE || type.getModuleId !== undefined) {
         return true;
       }
     }
@@ -1171,6 +1151,7 @@
               var $$typeofType = type && type.$$typeof;
 
               switch ($$typeofType) {
+                case REACT_SERVER_CONTEXT_TYPE:
                 case REACT_CONTEXT_TYPE:
                 case REACT_FORWARD_REF_TYPE:
                 case REACT_LAZY_TYPE:
@@ -1202,6 +1183,7 @@
   var Profiler = REACT_PROFILER_TYPE;
   var StrictMode = REACT_STRICT_MODE_TYPE;
   var Suspense = REACT_SUSPENSE_TYPE;
+  var SuspenseList = REACT_SUSPENSE_LIST_TYPE;
   var hasWarnedAboutDeprecatedIsAsyncMode = false;
   var hasWarnedAboutDeprecatedIsConcurrentMode = false; // AsyncMode should be deprecated
 
@@ -1260,6 +1242,9 @@
   function isSuspense(object) {
     return typeOf(object) === REACT_SUSPENSE_TYPE;
   }
+  function isSuspenseList(object) {
+    return typeOf(object) === REACT_SUSPENSE_LIST_TYPE;
+  }
 
   exports.ContextConsumer = ContextConsumer;
   exports.ContextProvider = ContextProvider;
@@ -1272,6 +1257,7 @@
   exports.Profiler = Profiler;
   exports.StrictMode = StrictMode;
   exports.Suspense = Suspense;
+  exports.SuspenseList = SuspenseList;
   exports.isAsyncMode = isAsyncMode;
   exports.isConcurrentMode = isConcurrentMode;
   exports.isContextConsumer = isContextConsumer;
@@ -1285,6 +1271,7 @@
   exports.isProfiler = isProfiler;
   exports.isStrictMode = isStrictMode;
   exports.isSuspense = isSuspense;
+  exports.isSuspenseList = isSuspenseList;
   exports.isValidElementType = isValidElementType;
   exports.typeOf = typeOf;
     })();
@@ -1301,6 +1288,7 @@
   reactIs_development.Profiler;
   reactIs_development.StrictMode;
   reactIs_development.Suspense;
+  reactIs_development.SuspenseList;
   reactIs_development.isAsyncMode;
   reactIs_development.isConcurrentMode;
   reactIs_development.isContextConsumer;
@@ -1314,6 +1302,7 @@
   reactIs_development.isProfiler;
   reactIs_development.isStrictMode;
   reactIs_development.isSuspense;
+  reactIs_development.isSuspenseList;
   reactIs_development.isValidElementType;
   reactIs_development.typeOf;
 
@@ -1574,6 +1563,8 @@
     };
   }
 
+  var noComponentSelectorMessage = 'Component selectors can only be used in conjunction with ' + '@emotion/babel-plugin, the swc Emotion plugin, or another Emotion-aware ' + 'compiler transform.';
+
   function handleInterpolation(mergedProps, registered, interpolation) {
     if (interpolation == null) {
       return '';
@@ -1581,7 +1572,7 @@
 
     if (interpolation.__emotion_styles !== undefined) {
       if (interpolation.toString() === 'NO_COMPONENT_SELECTOR') {
-        throw new Error('Component selectors can only be used in conjunction with @emotion/babel-plugin.');
+        throw new Error(noComponentSelectorMessage);
       }
 
       return interpolation;
@@ -1691,7 +1682,7 @@
           }
         } else {
           if (_key === 'NO_COMPONENT_SELECTOR' && "development" !== 'production') {
-            throw new Error('Component selectors can only be used in conjunction with @emotion/babel-plugin.');
+            throw new Error(noComponentSelectorMessage);
           }
 
           if (Array.isArray(value) && typeof value[0] === 'string' && (registered == null || registered[value[0]] === undefined)) {
@@ -1961,7 +1952,7 @@
 
   var pkg = {
   	name: "@emotion/react",
-  	version: "11.9.0",
+  	version: "11.9.3",
   	main: "dist/emotion-react.cjs.js",
   	module: "dist/emotion-react.esm.js",
   	browser: {
@@ -1989,8 +1980,8 @@
   	dependencies: {
   		"@babel/runtime": "^7.13.10",
   		"@emotion/babel-plugin": "^11.7.1",
-  		"@emotion/cache": "^11.7.1",
-  		"@emotion/serialize": "^1.0.3",
+  		"@emotion/cache": "^11.9.3",
+  		"@emotion/serialize": "^1.0.4",
   		"@emotion/utils": "^1.1.0",
   		"@emotion/weak-memoize": "^0.2.5",
   		"hoist-non-react-statics": "^3.3.1"
@@ -2009,12 +2000,11 @@
   	},
   	devDependencies: {
   		"@babel/core": "^7.13.10",
+  		"@definitelytyped/dtslint": "0.0.112",
   		"@emotion/css": "11.9.0",
   		"@emotion/css-prettifier": "1.0.1",
   		"@emotion/server": "11.4.0",
-  		"@emotion/styled": "11.8.1",
-  		"@types/react": "^16.9.11",
-  		dtslint: "^4.2.1",
+  		"@emotion/styled": "11.9.3",
   		"html-tag-names": "^1.1.2",
   		react: "16.14.0",
   		"svg-tag-names": "^1.1.1",
@@ -3366,13 +3356,7 @@
   propTypes.oneOfType;
   propTypes.element;
 
-  var reactJsxRuntime_production_min = createCommonjsModule(function (module, exports) {
-  var g=60103;exports.Fragment=60107;if("function"===typeof Symbol&&Symbol.for){var h=Symbol.for;g=h("react.element");exports.Fragment=h("react.fragment");}var m=React__default["default"].__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,n=Object.prototype.hasOwnProperty,p={key:!0,ref:!0,__self:!0,__source:!0};
-  function q(c,a,k){var b,d={},e=null,l=null;void 0!==k&&(e=""+k);void 0!==a.key&&(e=""+a.key);void 0!==a.ref&&(l=a.ref);for(b in a)n.call(a,b)&&!p.hasOwnProperty(b)&&(d[b]=a[b]);if(c&&c.defaultProps)for(b in a=c.defaultProps,a)void 0===d[b]&&(d[b]=a[b]);return {$$typeof:g,type:c,key:e,ref:l,props:d,_owner:m.current}}exports.jsx=q;exports.jsxs=q;
-  });
-  reactJsxRuntime_production_min.Fragment;
-  reactJsxRuntime_production_min.jsx;
-  reactJsxRuntime_production_min.jsxs;
+  React__default["default"].__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner;
 
   var reactJsxRuntime_development = createCommonjsModule(function (module, exports) {
 
@@ -3380,56 +3364,25 @@
     (function() {
 
   var React = React__default["default"];
-  var _assign = objectAssign;
 
   // ATTENTION
   // When adding new symbols to this file,
   // Please consider also adding to 'react-devtools-shared/src/backend/ReactSymbols'
-  // The Symbol used to tag the ReactElement-like types. If there is no native Symbol
-  // nor polyfill, then a plain number is used for performance.
-  var REACT_ELEMENT_TYPE = 0xeac7;
-  var REACT_PORTAL_TYPE = 0xeaca;
-  exports.Fragment = 0xeacb;
-  var REACT_STRICT_MODE_TYPE = 0xeacc;
-  var REACT_PROFILER_TYPE = 0xead2;
-  var REACT_PROVIDER_TYPE = 0xeacd;
-  var REACT_CONTEXT_TYPE = 0xeace;
-  var REACT_FORWARD_REF_TYPE = 0xead0;
-  var REACT_SUSPENSE_TYPE = 0xead1;
-  var REACT_SUSPENSE_LIST_TYPE = 0xead8;
-  var REACT_MEMO_TYPE = 0xead3;
-  var REACT_LAZY_TYPE = 0xead4;
-  var REACT_BLOCK_TYPE = 0xead9;
-  var REACT_SERVER_BLOCK_TYPE = 0xeada;
-  var REACT_FUNDAMENTAL_TYPE = 0xead5;
-  var REACT_DEBUG_TRACING_MODE_TYPE = 0xeae1;
-  var REACT_LEGACY_HIDDEN_TYPE = 0xeae3;
-
-  if (typeof Symbol === 'function' && Symbol.for) {
-    var symbolFor = Symbol.for;
-    REACT_ELEMENT_TYPE = symbolFor('react.element');
-    REACT_PORTAL_TYPE = symbolFor('react.portal');
-    exports.Fragment = symbolFor('react.fragment');
-    REACT_STRICT_MODE_TYPE = symbolFor('react.strict_mode');
-    REACT_PROFILER_TYPE = symbolFor('react.profiler');
-    REACT_PROVIDER_TYPE = symbolFor('react.provider');
-    REACT_CONTEXT_TYPE = symbolFor('react.context');
-    REACT_FORWARD_REF_TYPE = symbolFor('react.forward_ref');
-    REACT_SUSPENSE_TYPE = symbolFor('react.suspense');
-    REACT_SUSPENSE_LIST_TYPE = symbolFor('react.suspense_list');
-    REACT_MEMO_TYPE = symbolFor('react.memo');
-    REACT_LAZY_TYPE = symbolFor('react.lazy');
-    REACT_BLOCK_TYPE = symbolFor('react.block');
-    REACT_SERVER_BLOCK_TYPE = symbolFor('react.server.block');
-    REACT_FUNDAMENTAL_TYPE = symbolFor('react.fundamental');
-    symbolFor('react.scope');
-    symbolFor('react.opaque.id');
-    REACT_DEBUG_TRACING_MODE_TYPE = symbolFor('react.debug_trace_mode');
-    symbolFor('react.offscreen');
-    REACT_LEGACY_HIDDEN_TYPE = symbolFor('react.legacy_hidden');
-  }
-
-  var MAYBE_ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator;
+  // The Symbol used to tag the ReactElement-like types.
+  var REACT_ELEMENT_TYPE = Symbol.for('react.element');
+  var REACT_PORTAL_TYPE = Symbol.for('react.portal');
+  var REACT_FRAGMENT_TYPE = Symbol.for('react.fragment');
+  var REACT_STRICT_MODE_TYPE = Symbol.for('react.strict_mode');
+  var REACT_PROFILER_TYPE = Symbol.for('react.profiler');
+  var REACT_PROVIDER_TYPE = Symbol.for('react.provider');
+  var REACT_CONTEXT_TYPE = Symbol.for('react.context');
+  var REACT_FORWARD_REF_TYPE = Symbol.for('react.forward_ref');
+  var REACT_SUSPENSE_TYPE = Symbol.for('react.suspense');
+  var REACT_SUSPENSE_LIST_TYPE = Symbol.for('react.suspense_list');
+  var REACT_MEMO_TYPE = Symbol.for('react.memo');
+  var REACT_LAZY_TYPE = Symbol.for('react.lazy');
+  var REACT_OFFSCREEN_TYPE = Symbol.for('react.offscreen');
+  var MAYBE_ITERATOR_SYMBOL = Symbol.iterator;
   var FAUX_ITERATOR_SYMBOL = '@@iterator';
   function getIteratorFn(maybeIterable) {
     if (maybeIterable === null || typeof maybeIterable !== 'object') {
@@ -3449,11 +3402,13 @@
 
   function error(format) {
     {
-      for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
-        args[_key2 - 1] = arguments[_key2];
-      }
+      {
+        for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+          args[_key2 - 1] = arguments[_key2];
+        }
 
-      printWarning('error', format, args);
+        printWarning('error', format, args);
+      }
     }
   }
 
@@ -3467,10 +3422,11 @@
       if (stack !== '') {
         format += '%s';
         args = args.concat([stack]);
-      }
+      } // eslint-disable-next-line react-internal/safe-string-coercion
+
 
       var argsWithFormat = args.map(function (item) {
-        return '' + item;
+        return String(item);
       }); // Careful: RN currently depends on this prefix
 
       argsWithFormat.unshift('Warning: ' + format); // We intentionally don't use spread (or .apply) directly because it
@@ -3481,9 +3437,23 @@
     }
   }
 
-  // Filter certain DOM attributes (e.g. src, href) if their values are empty strings.
+  // -----------------------------------------------------------------------------
 
   var enableScopeAPI = false; // Experimental Create Event Handle API.
+  var enableCacheElement = false;
+  var enableTransitionTracing = false; // No known bugs, but needs performance testing
+
+  var enableLegacyHidden = false; // Enables unstable_avoidThisFallback feature in Fiber
+  // stuff. Intended to enable React core members to more easily debug scheduling
+  // issues in DEV builds.
+
+  var enableDebugTracing = false; // Track which Fiber(s) schedule render work.
+
+  var REACT_MODULE_REFERENCE;
+
+  {
+    REACT_MODULE_REFERENCE = Symbol.for('react.module.reference');
+  }
 
   function isValidElementType(type) {
     if (typeof type === 'string' || typeof type === 'function') {
@@ -3491,12 +3461,16 @@
     } // Note: typeof might be other than 'symbol' or 'number' (e.g. if it's a polyfill).
 
 
-    if (type === exports.Fragment || type === REACT_PROFILER_TYPE || type === REACT_DEBUG_TRACING_MODE_TYPE || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || type === REACT_LEGACY_HIDDEN_TYPE || enableScopeAPI ) {
+    if (type === REACT_FRAGMENT_TYPE || type === REACT_PROFILER_TYPE || enableDebugTracing  || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || enableLegacyHidden  || type === REACT_OFFSCREEN_TYPE || enableScopeAPI  || enableCacheElement  || enableTransitionTracing ) {
       return true;
     }
 
     if (typeof type === 'object' && type !== null) {
-      if (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || type.$$typeof === REACT_FUNDAMENTAL_TYPE || type.$$typeof === REACT_BLOCK_TYPE || type[0] === REACT_SERVER_BLOCK_TYPE) {
+      if (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || // This needs to include all possible module reference object
+      // types supported by any Flight configuration anywhere since
+      // we don't know which Flight build this will end up being used
+      // with.
+      type.$$typeof === REACT_MODULE_REFERENCE || type.getModuleId !== undefined) {
         return true;
       }
     }
@@ -3505,15 +3479,23 @@
   }
 
   function getWrappedName(outerType, innerType, wrapperName) {
+    var displayName = outerType.displayName;
+
+    if (displayName) {
+      return displayName;
+    }
+
     var functionName = innerType.displayName || innerType.name || '';
-    return outerType.displayName || (functionName !== '' ? wrapperName + "(" + functionName + ")" : wrapperName);
-  }
+    return functionName !== '' ? wrapperName + "(" + functionName + ")" : wrapperName;
+  } // Keep in sync with react-reconciler/getComponentNameFromFiber
+
 
   function getContextName(type) {
     return type.displayName || 'Context';
-  }
+  } // Note that the reconciler package should generally prefer to use getComponentNameFromFiber() instead.
+
 
-  function getComponentName(type) {
+  function getComponentNameFromType(type) {
     if (type == null) {
       // Host root, text node or just invalid type.
       return null;
@@ -3521,7 +3503,7 @@
 
     {
       if (typeof type.tag === 'number') {
-        error('Received an unexpected object in getComponentName(). ' + 'This is likely a bug in React. Please file an issue.');
+        error('Received an unexpected object in getComponentNameFromType(). ' + 'This is likely a bug in React. Please file an issue.');
       }
     }
 
@@ -3534,7 +3516,7 @@
     }
 
     switch (type) {
-      case exports.Fragment:
+      case REACT_FRAGMENT_TYPE:
         return 'Fragment';
 
       case REACT_PORTAL_TYPE:
@@ -3551,6 +3533,7 @@
 
       case REACT_SUSPENSE_LIST_TYPE:
         return 'SuspenseList';
+
     }
 
     if (typeof type === 'object') {
@@ -3567,10 +3550,13 @@
           return getWrappedName(type, type.render, 'ForwardRef');
 
         case REACT_MEMO_TYPE:
-          return getComponentName(type.type);
+          var outerName = type.displayName || null;
+
+          if (outerName !== null) {
+            return outerName;
+          }
 
-        case REACT_BLOCK_TYPE:
-          return getComponentName(type._render);
+          return getComponentNameFromType(type.type) || 'Memo';
 
         case REACT_LAZY_TYPE:
           {
@@ -3579,17 +3565,21 @@
             var init = lazyComponent._init;
 
             try {
-              return getComponentName(init(payload));
+              return getComponentNameFromType(init(payload));
             } catch (x) {
               return null;
             }
           }
+
+        // eslint-disable-next-line no-fallthrough
       }
     }
 
     return null;
   }
 
+  var assign = Object.assign;
+
   // Helpers to patch console.logs to avoid logging during side-effect free
   // replaying on render function. This currently only patches the object
   // lazily which won't cover if the log function was extracted eagerly.
@@ -3653,25 +3643,25 @@
         }; // $FlowFixMe Flow thinks console is immutable.
 
         Object.defineProperties(console, {
-          log: _assign({}, props, {
+          log: assign({}, props, {
             value: prevLog
           }),
-          info: _assign({}, props, {
+          info: assign({}, props, {
             value: prevInfo
           }),
-          warn: _assign({}, props, {
+          warn: assign({}, props, {
             value: prevWarn
           }),
-          error: _assign({}, props, {
+          error: assign({}, props, {
             value: prevError
           }),
-          group: _assign({}, props, {
+          group: assign({}, props, {
             value: prevGroup
           }),
-          groupCollapsed: _assign({}, props, {
+          groupCollapsed: assign({}, props, {
             value: prevGroupCollapsed
           }),
-          groupEnd: _assign({}, props, {
+          groupEnd: assign({}, props, {
             value: prevGroupEnd
           })
         });
@@ -3712,7 +3702,7 @@
 
   function describeNativeComponentFrame(fn, construct) {
     // If something asked for a stack inside a fake render, it should get ignored.
-    if (!fn || reentry) {
+    if ( !fn || reentry) {
       return '';
     }
 
@@ -3821,7 +3811,14 @@
 
                 if (c < 0 || sampleLines[s] !== controlLines[c]) {
                   // V8 adds a "new" prefix for native classes. Let's remove it to make it prettier.
-                  var _frame = '\n' + sampleLines[s].replace(' at new ', ' at ');
+                  var _frame = '\n' + sampleLines[s].replace(' at new ', ' at '); // If our component frame is labeled "<anonymous>"
+                  // but we have a user-provided "displayName"
+                  // splice it in to make the stack more readable.
+
+
+                  if (fn.displayName && _frame.includes('<anonymous>')) {
+                    _frame = _frame.replace('<anonymous>', fn.displayName);
+                  }
 
                   {
                     if (typeof fn === 'function') {
@@ -3906,9 +3903,6 @@
           // Memo may contain any component type so we recursively resolve it.
           return describeUnknownElementTypeFrameInDEV(type.type, source, ownerFn);
 
-        case REACT_BLOCK_TYPE:
-          return describeFunctionComponentFrame(type._render);
-
         case REACT_LAZY_TYPE:
           {
             var lazyComponent = type;
@@ -3926,6 +3920,8 @@
     return '';
   }
 
+  var hasOwnProperty = Object.prototype.hasOwnProperty;
+
   var loggedTypeFailures = {};
   var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
 
@@ -3944,7 +3940,7 @@
   function checkPropTypes(typeSpecs, values, location, componentName, element) {
     {
       // $FlowFixMe This is okay but Flow doesn't know it.
-      var has = Function.call.bind(Object.prototype.hasOwnProperty);
+      var has = Function.call.bind(hasOwnProperty);
 
       for (var typeSpecName in typeSpecs) {
         if (has(typeSpecs, typeSpecName)) {
@@ -3956,6 +3952,7 @@
             // This is intentionally an invariant that gets caught. It's the same
             // behavior as without this statement except with a better message.
             if (typeof typeSpecs[typeSpecName] !== 'function') {
+              // eslint-disable-next-line react-internal/prod-error-codes
               var err = Error((componentName || 'React class') + ': ' + location + ' type `' + typeSpecName + '` is invalid; ' + 'it must be a function, usually from the `prop-types` package, but received `' + typeof typeSpecs[typeSpecName] + '`.' + 'This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.');
               err.name = 'Invariant Violation';
               throw err;
@@ -3989,8 +3986,80 @@
     }
   }
 
+  var isArrayImpl = Array.isArray; // eslint-disable-next-line no-redeclare
+
+  function isArray(a) {
+    return isArrayImpl(a);
+  }
+
+  /*
+   * The `'' + value` pattern (used in in perf-sensitive code) throws for Symbol
+   * and Temporal.* types. See https://github.com/facebook/react/pull/22064.
+   *
+   * The functions in this module will throw an easier-to-understand,
+   * easier-to-debug exception with a clear errors message message explaining the
+   * problem. (Instead of a confusing exception thrown inside the implementation
+   * of the `value` object).
+   */
+  // $FlowFixMe only called in DEV, so void return is not possible.
+  function typeName(value) {
+    {
+      // toStringTag is needed for namespaced types like Temporal.Instant
+      var hasToStringTag = typeof Symbol === 'function' && Symbol.toStringTag;
+      var type = hasToStringTag && value[Symbol.toStringTag] || value.constructor.name || 'Object';
+      return type;
+    }
+  } // $FlowFixMe only called in DEV, so void return is not possible.
+
+
+  function willCoercionThrow(value) {
+    {
+      try {
+        testStringCoercion(value);
+        return false;
+      } catch (e) {
+        return true;
+      }
+    }
+  }
+
+  function testStringCoercion(value) {
+    // If you ended up here by following an exception call stack, here's what's
+    // happened: you supplied an object or symbol value to React (as a prop, key,
+    // DOM attribute, CSS property, string ref, etc.) and when React tried to
+    // coerce it to a string using `'' + value`, an exception was thrown.
+    //
+    // The most common types that will cause this exception are `Symbol` instances
+    // and Temporal objects like `Temporal.Instant`. But any object that has a
+    // `valueOf` or `[Symbol.toPrimitive]` method that throws will also cause this
+    // exception. (Library authors do this to prevent users from using built-in
+    // numeric operators like `+` or comparison operators like `>=` because custom
+    // methods are needed to perform accurate arithmetic or comparison.)
+    //
+    // To fix the problem, coerce this object or symbol value to a string before
+    // passing it to React. The most reliable way is usually `String(value)`.
+    //
+    // To find which value is throwing, check the browser or debugger console.
+    // Before this exception was thrown, there should be `console.error` output
+    // that shows the type (Symbol, Temporal.PlainDate, etc.) that caused the
+    // problem and how that type was used: key, atrribute, input value prop, etc.
+    // In most cases, this console output also shows the component and its
+    // ancestor components where the exception happened.
+    //
+    // eslint-disable-next-line react-internal/safe-string-coercion
+    return '' + value;
+  }
+  function checkKeyStringCoercion(value) {
+    {
+      if (willCoercionThrow(value)) {
+        error('The provided key is an unsupported type %s.' + ' This value must be coerced to a string before before using it here.', typeName(value));
+
+        return testStringCoercion(value); // throw (to help callers find troubleshooting comments)
+      }
+    }
+  }
+
   var ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
-  var hasOwnProperty = Object.prototype.hasOwnProperty;
   var RESERVED_PROPS = {
     key: true,
     ref: true,
@@ -4036,10 +4105,10 @@
   function warnIfStringRefCannotBeAutoConverted(config, self) {
     {
       if (typeof config.ref === 'string' && ReactCurrentOwner.current && self && ReactCurrentOwner.current.stateNode !== self) {
-        var componentName = getComponentName(ReactCurrentOwner.current.type);
+        var componentName = getComponentNameFromType(ReactCurrentOwner.current.type);
 
         if (!didWarnAboutStringRefs[componentName]) {
-          error('Component "%s" contains the string ref "%s". ' + 'Support for string refs will be removed in a future major release. ' + 'This case cannot be automatically converted to an arrow function. ' + 'We ask you to manually fix this case by using useRef() or createRef() instead. ' + 'Learn more about using refs safely here: ' + 'https://reactjs.org/link/strict-mode-string-ref', getComponentName(ReactCurrentOwner.current.type), config.ref);
+          error('Component "%s" contains the string ref "%s". ' + 'Support for string refs will be removed in a future major release. ' + 'This case cannot be automatically converted to an arrow function. ' + 'We ask you to manually fix this case by using useRef() or createRef() instead. ' + 'Learn more about using refs safely here: ' + 'https://reactjs.org/link/strict-mode-string-ref', getComponentNameFromType(ReactCurrentOwner.current.type), config.ref);
 
           didWarnAboutStringRefs[componentName] = true;
         }
@@ -4178,10 +4247,18 @@
       // key is explicitly declared to be undefined or not.
 
       if (maybeKey !== undefined) {
+        {
+          checkKeyStringCoercion(maybeKey);
+        }
+
         key = '' + maybeKey;
       }
 
       if (hasValidKey(config)) {
+        {
+          checkKeyStringCoercion(config.key);
+        }
+
         key = '' + config.key;
       }
 
@@ -4252,6 +4329,7 @@
    * @final
    */
 
+
   function isValidElement(object) {
     {
       return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
@@ -4261,7 +4339,7 @@
   function getDeclarationErrorAddendum() {
     {
       if (ReactCurrentOwner$1.current) {
-        var name = getComponentName(ReactCurrentOwner$1.current.type);
+        var name = getComponentNameFromType(ReactCurrentOwner$1.current.type);
 
         if (name) {
           return '\n\nCheck the render method of `' + name + '`.';
@@ -4341,7 +4419,7 @@
 
       if (element && element._owner && element._owner !== ReactCurrentOwner$1.current) {
         // Give the component that originally created this child.
-        childOwner = " It was passed a child from " + getComponentName(element._owner.type) + ".";
+        childOwner = " It was passed a child from " + getComponentNameFromType(element._owner.type) + ".";
       }
 
       setCurrentlyValidatingElement$1(element);
@@ -4368,7 +4446,7 @@
         return;
       }
 
-      if (Array.isArray(node)) {
+      if (isArray(node)) {
         for (var i = 0; i < node.length; i++) {
           var child = node[i];
 
@@ -4431,12 +4509,12 @@
 
       if (propTypes) {
         // Intentionally inside to avoid triggering lazy initializers:
-        var name = getComponentName(type);
+        var name = getComponentNameFromType(type);
         checkPropTypes(propTypes, element.props, 'prop', name, element);
       } else if (type.PropTypes !== undefined && !propTypesMisspellWarningShown) {
         propTypesMisspellWarningShown = true; // Intentionally inside to avoid triggering lazy initializers:
 
-        var _name = getComponentName(type);
+        var _name = getComponentNameFromType(type);
 
         error('Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?', _name || 'Unknown');
       }
@@ -4503,10 +4581,10 @@
 
         if (type === null) {
           typeString = 'null';
-        } else if (Array.isArray(type)) {
+        } else if (isArray(type)) {
           typeString = 'array';
         } else if (type !== undefined && type.$$typeof === REACT_ELEMENT_TYPE) {
-          typeString = "<" + (getComponentName(type.type) || 'Unknown') + " />";
+          typeString = "<" + (getComponentNameFromType(type.type) || 'Unknown') + " />";
           info = ' Did you accidentally export a JSX literal instead of a component?';
         } else {
           typeString = typeof type;
@@ -4532,7 +4610,7 @@
 
         if (children !== undefined) {
           if (isStaticChildren) {
-            if (Array.isArray(children)) {
+            if (isArray(children)) {
               for (var i = 0; i < children.length; i++) {
                 validateChildKeys(children[i], type);
               }
@@ -4549,7 +4627,7 @@
         }
       }
 
-      if (type === exports.Fragment) {
+      if (type === REACT_FRAGMENT_TYPE) {
         validateFragmentProps(element);
       } else {
         validatePropTypes(element);
@@ -4578,6 +4656,7 @@
 
   var jsxs =  jsxWithValidationStatic ;
 
+  exports.Fragment = REACT_FRAGMENT_TYPE;
   exports.jsx = jsx;
   exports.jsxs = jsxs;
     })();
@@ -4624,7 +4703,7 @@
     injectFirst: PropTypes.bool
   } ;
 
-  function isEmpty$3(obj) {
+  function isEmpty$4(obj) {
     return obj === undefined || obj === null || Object.keys(obj).length === 0;
   }
 
@@ -4633,7 +4712,7 @@
       styles,
       defaultTheme = {}
     } = props;
-    const globalStyles = typeof styles === 'function' ? themeInput => styles(isEmpty$3(themeInput) ? defaultTheme : themeInput) : styles;
+    const globalStyles = typeof styles === 'function' ? themeInput => styles(isEmpty$4(themeInput) ? defaultTheme : themeInput) : styles;
     return /*#__PURE__*/jsxRuntime_1(Global, {
       styles: globalStyles
     });
@@ -5464,7 +5543,12 @@
     return requiredInteger(props, propName, ...other);
   }
 
+  function validatorNoop() {
+    return null;
+  }
+
   validator.isRequired = requiredInteger;
+  validatorNoop.isRequired = validatorNoop;
   var integerPropType = validator;
 
   /**
@@ -5528,26 +5612,26 @@
   var ClassNameGenerator$1 = ClassNameGenerator;
 
   const globalStateClassesMapping = {
-    active: 'Mui-active',
-    checked: 'Mui-checked',
-    completed: 'Mui-completed',
-    disabled: 'Mui-disabled',
-    error: 'Mui-error',
-    expanded: 'Mui-expanded',
-    focused: 'Mui-focused',
-    focusVisible: 'Mui-focusVisible',
-    required: 'Mui-required',
-    selected: 'Mui-selected'
-  };
-  function generateUtilityClass(componentName, slot) {
+    active: 'active',
+    checked: 'checked',
+    completed: 'completed',
+    disabled: 'disabled',
+    error: 'error',
+    expanded: 'expanded',
+    focused: 'focused',
+    focusVisible: 'focusVisible',
+    required: 'required',
+    selected: 'selected'
+  };
+  function generateUtilityClass(componentName, slot, globalStatePrefix = 'Mui') {
     const globalStateClass = globalStateClassesMapping[slot];
-    return globalStateClass || `${ClassNameGenerator$1.generate(componentName)}-${slot}`;
+    return globalStateClass ? `${globalStatePrefix}-${globalStateClass}` : `${ClassNameGenerator$1.generate(componentName)}-${slot}`;
   }
 
-  function generateUtilityClasses(componentName, slots) {
+  function generateUtilityClasses(componentName, slots, globalStatePrefix = 'Mui') {
     const result = {};
     slots.forEach(slot => {
-      result[slot] = generateUtilityClass(componentName, slot);
+      result[slot] = generateUtilityClass(componentName, slot, globalStatePrefix);
     });
     return result;
   }
@@ -6455,7 +6539,7 @@
   styleFunctionSx.filterProps = ['sx'];
   var defaultStyleFunctionSx = styleFunctionSx;
 
-  const _excluded$2m = ["sx"];
+  const _excluded$2n = ["sx"];
 
   const splitProps = props => {
     const result = {
@@ -6476,7 +6560,7 @@
     const {
       sx: inSx
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$2m);
+          other = _objectWithoutPropertiesLoose(props, _excluded$2n);
 
     const {
       systemProps,
@@ -6514,48 +6598,9 @@
     });
   }
 
-  function toVal(mix) {
-  	var k, y, str='';
-
-  	if (typeof mix === 'string' || typeof mix === 'number') {
-  		str += mix;
-  	} else if (typeof mix === 'object') {
-  		if (Array.isArray(mix)) {
-  			for (k=0; k < mix.length; k++) {
-  				if (mix[k]) {
-  					if (y = toVal(mix[k])) {
-  						str && (str += ' ');
-  						str += y;
-  					}
-  				}
-  			}
-  		} else {
-  			for (k in mix) {
-  				if (mix[k]) {
-  					str && (str += ' ');
-  					str += k;
-  				}
-  			}
-  		}
-  	}
-
-  	return str;
-  }
-
-  function clsx () {
-  	var i=0, tmp, x, str='';
-  	while (i < arguments.length) {
-  		if (tmp = arguments[i++]) {
-  			if (x = toVal(tmp)) {
-  				str && (str += ' ');
-  				str += x;
-  			}
-  		}
-  	}
-  	return str;
-  }
+  function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
-  const _excluded$2l = ["values", "unit", "step"];
+  const _excluded$2m = ["values", "unit", "step"];
 
   const sortBreakpointsValues = values => {
     const breakpointsAsArray = Object.keys(values).map(key => ({
@@ -6591,7 +6636,7 @@
       unit = 'px',
       step = 5
     } = breakpoints,
-          other = _objectWithoutPropertiesLoose(breakpoints, _excluded$2l);
+          other = _objectWithoutPropertiesLoose(breakpoints, _excluded$2m);
 
     const sortedValues = sortBreakpointsValues(values);
     const keys = Object.keys(sortedValues);
@@ -6683,7 +6728,7 @@
     return spacing;
   }
 
-  const _excluded$2k = ["breakpoints", "palette", "spacing", "shape"];
+  const _excluded$2l = ["breakpoints", "palette", "spacing", "shape"];
 
   function createTheme$1(options = {}, ...args) {
     const {
@@ -6692,7 +6737,7 @@
       spacing: spacingInput,
       shape: shapeInput = {}
     } = options,
-          other = _objectWithoutPropertiesLoose(options, _excluded$2k);
+          other = _objectWithoutPropertiesLoose(options, _excluded$2l);
 
     const breakpoints = createBreakpoints(breakpointsInput);
     const spacing = createSpacing(spacingInput);
@@ -6814,7 +6859,7 @@
     return useTheme$2(defaultTheme);
   }
 
-  const _excluded$2j = ["className", "component"];
+  const _excluded$2k = ["className", "component"];
   function createBox(options = {}) {
     const {
       defaultTheme,
@@ -6831,7 +6876,7 @@
         className,
         component = 'div'
       } = _extendSxProp,
-            other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$2j);
+            other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$2k);
 
       return /*#__PURE__*/jsxRuntime_1(BoxRoot, _extends({
         as: component,
@@ -6843,9 +6888,9 @@
     return Box;
   }
 
-  const _excluded$2i = ["variant"];
+  const _excluded$2j = ["variant"];
 
-  function isEmpty$2(string) {
+  function isEmpty$3(string) {
     return string.length === 0;
   }
   /**
@@ -6859,24 +6904,24 @@
     const {
       variant
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$2i);
+          other = _objectWithoutPropertiesLoose(props, _excluded$2j);
 
     let classKey = variant || '';
     Object.keys(other).sort().forEach(key => {
       if (key === 'color') {
-        classKey += isEmpty$2(classKey) ? props[key] : capitalize(props[key]);
+        classKey += isEmpty$3(classKey) ? props[key] : capitalize(props[key]);
       } else {
-        classKey += `${isEmpty$2(classKey) ? key : capitalize(key)}${capitalize(props[key].toString())}`;
+        classKey += `${isEmpty$3(classKey) ? key : capitalize(key)}${capitalize(props[key].toString())}`;
       }
     });
     return classKey;
   }
 
-  const _excluded$2h = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"],
+  const _excluded$2i = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"],
         _excluded2$c = ["theme"],
         _excluded3$1 = ["theme"];
 
-  function isEmpty$1(obj) {
+  function isEmpty$2(obj) {
     return Object.keys(obj).length === 0;
   }
 
@@ -6955,7 +7000,7 @@
         skipSx: inputSkipSx,
         overridesResolver
       } = inputOptions,
-            options = _objectWithoutPropertiesLoose(inputOptions, _excluded$2h); // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
+            options = _objectWithoutPropertiesLoose(inputOptions, _excluded$2i); // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
 
 
       const skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver : componentSlot && componentSlot !== 'Root' || false;
@@ -6995,7 +7040,7 @@
                 other = _objectWithoutPropertiesLoose(_ref, _excluded2$c);
 
             return stylesArg(_extends({
-              theme: isEmpty$1(themeInput) ? defaultTheme : themeInput
+              theme: isEmpty$2(themeInput) ? defaultTheme : themeInput
             }, other));
           } : stylesArg;
         }) : [];
@@ -7003,7 +7048,7 @@
 
         if (componentName && overridesResolver) {
           expressionsWithDefaultTheme.push(props => {
-            const theme = isEmpty$1(props.theme) ? defaultTheme : props.theme;
+            const theme = isEmpty$2(props.theme) ? defaultTheme : props.theme;
             const styleOverrides = getStyleOverrides(componentName, theme);
 
             if (styleOverrides) {
@@ -7022,14 +7067,14 @@
 
         if (componentName && !skipVariantsResolver) {
           expressionsWithDefaultTheme.push(props => {
-            const theme = isEmpty$1(props.theme) ? defaultTheme : props.theme;
+            const theme = isEmpty$2(props.theme) ? defaultTheme : props.theme;
             return variantsResolver(props, getVariantStyles(componentName, theme), theme, componentName);
           });
         }
 
         if (!skipSx) {
           expressionsWithDefaultTheme.push(props => {
-            const theme = isEmpty$1(props.theme) ? defaultTheme : props.theme;
+            const theme = isEmpty$2(props.theme) ? defaultTheme : props.theme;
             return styleFunctionSx(_extends({}, props, {
               theme
             }));
@@ -7056,7 +7101,7 @@
                 other = _objectWithoutPropertiesLoose(_ref2, _excluded3$1);
 
             return styleArg(_extends({
-              theme: isEmpty$1(themeInput) ? defaultTheme : themeInput
+              theme: isEmpty$2(themeInput) ? defaultTheme : themeInput
             }, other));
           };
         }
@@ -7568,13 +7613,9 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
    * @param {Object} theme
    * @param {{
    *  prefix?: string,
-   *  basePrefix?: string,
    *  shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean
    * }} options.
-   *  `basePrefix`: defined by design system.
-   *  `prefix`: defined by application
-   *
-   *   the CSS variable value will be adjusted based on the provided `basePrefix` & `prefix` which can be found in `parsedTheme`.
+   *  `prefix`: The prefix of the generated CSS variables. This function does not change the value.
    *
    * @returns {{ css: Object, vars: Object, parsedTheme: typeof theme }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme), and `parsedTheme` is the cloned version of theme.
    *
@@ -7585,16 +7626,15 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
    *   palette: { primary: { 500: 'var(--color)' } }
    * }, { prefix: 'foo' })
    *
-   * console.log(css) // { '--foo-fontSize': '12px', '--foo-lineHeight': 1.2, '--foo-palette-primary-500': 'var(--foo-color)' }
-   * console.log(vars) // { fontSize: '--foo-fontSize', lineHeight: '--foo-lineHeight', palette: { primary: { 500: 'var(--foo-palette-primary-500)' } } }
-   * console.log(parsedTheme) // { fontSize: 12, lineHeight: 1.2, palette: { primary: { 500: 'var(--foo-color)' } } }
+   * console.log(css) // { '--foo-fontSize': '12px', '--foo-lineHeight': 1.2, '--foo-palette-primary-500': 'var(--color)' }
+   * console.log(vars) // { fontSize: 'var(--foo-fontSize)', lineHeight: 'var(--foo-lineHeight)', palette: { primary: { 500: 'var(--foo-palette-primary-500)' } } }
+   * console.log(parsedTheme) // { fontSize: 12, lineHeight: 1.2, palette: { primary: { 500: 'var(--color)' } } }
    */
 
 
   function cssVarsParser(theme, options) {
     const {
       prefix,
-      basePrefix = '',
       shouldSkipGeneratingVar
     } = options || {};
     const css = {};
@@ -7602,16 +7642,6 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     const parsedTheme = {};
     walkObjectDeep(theme, (keys, value, arrayKeys) => {
       if (typeof value === 'string' || typeof value === 'number') {
-        if (typeof value === 'string' && value.match(/var\(\s*--/)) {
-          // for CSS variable, apply prefix or remove basePrefix from the variable
-          if (!basePrefix && prefix) {
-            value = value.replace(/var\(\s*--/g, `var(--${prefix}-`);
-          } else {
-            value = prefix ? value.replace(new RegExp(`var\\(\\s*--${basePrefix}`, 'g'), `var(--${prefix}`) // removing spaces
-            : value.replace(new RegExp(`var\\(\\s*--${basePrefix}-`, 'g'), 'var(--');
-          }
-        }
-
         if (!shouldSkipGeneratingVar || shouldSkipGeneratingVar && !shouldSkipGeneratingVar(keys, value)) {
           // only create css & var if `shouldSkipGeneratingVar` return false
           const cssVar = `--${prefix ? `${prefix}-` : ''}${keys.join('-')}`;
@@ -7637,6 +7667,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
   const DEFAULT_ATTRIBUTE = 'data-color-scheme';
   function getInitColorSchemeScript$1(options) {
     const {
+      enableColorScheme = true,
       enableSystem = false,
       defaultLightColorScheme = 'light',
       defaultDarkColorScheme = 'dark',
@@ -7650,13 +7681,16 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       dangerouslySetInnerHTML: {
         __html: `(function() { try {
         var mode = localStorage.getItem('${modeStorageKey}');
+        var cssColorScheme = mode;
         var colorScheme = '';
         if (mode === 'system' || (!mode && !!${enableSystem})) {
           // handle system mode
           var mql = window.matchMedia('(prefers-color-scheme: dark)');
           if (mql.matches) {
+            cssColorScheme = 'dark';
             colorScheme = localStorage.getItem('${colorSchemeStorageKey}-dark') || '${defaultDarkColorScheme}';
           } else {
+            cssColorScheme = 'light';
             colorScheme = localStorage.getItem('${colorSchemeStorageKey}-light') || '${defaultLightColorScheme}';
           }
         }
@@ -7669,6 +7703,9 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         if (colorScheme) {
           ${colorSchemeNode}.setAttribute('${attribute}', colorScheme);
         }
+        if (${enableColorScheme} && !!cssColorScheme) {
+          ${colorSchemeNode}.style.setProperty('color-scheme', cssColorScheme);
+        }
       } catch (e) {} })();`
       }
     });
@@ -7826,7 +7863,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     const handleMediaQuery = React__namespace.useCallback(e => {
       if (state.mode === 'system') {
         setState(currentState => _extends({}, currentState, {
-          systemMode: e.matches ? 'dark' : 'light'
+          systemMode: e != null && e.matches ? 'dark' : 'light'
         }));
       }
     }, [state.mode]); // Ref hack to avoid adding handleMediaQuery as a dep
@@ -7899,34 +7936,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     });
   }
 
-  /**
-   * The benefit of this function is to help developers get CSS var from theme without specifying the whole variable
-   * and they does not need to remember the prefix (defined once).
-   */
-  function createGetCssVar(prefix = '') {
-    function appendVar(...vars) {
-      if (!vars.length) {
-        return '';
-      }
-
-      const value = vars[0];
-
-      if (typeof value === 'string' && !value.match(/(#|\(|\)|(-?(\d*\.)?\d+)(px|em|%|ex|ch|rem|vw|vh|vmin|vmax|cm|mm|in|pt|pc))/)) {
-        return `, var(--${prefix ? `${prefix}-` : ''}${value}${appendVar(...vars.slice(1))})`;
-      }
-
-      return `, ${value}`;
-    } // AdditionalVars makes `getCssVar` less strict, so it can be use like this `getCssVar('non-mui-variable')` without type error.
-
-
-    const getCssVar = (field, ...vars) => {
-      return `var(--${prefix ? `${prefix}-` : ''}${field}${appendVar(...vars)})`;
-    };
-
-    return getCssVar;
-  }
-
-  const _excluded$2g = ["colorSchemes", "components"];
+  const _excluded$2h = ["colorSchemes", "components", "cssVarPrefix"];
   const DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}';
   function createCssVarsProvider(options) {
     const {
@@ -7938,8 +7948,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       defaultColorScheme: designSystemColorScheme,
       disableTransitionOnChange: designSystemTransitionOnChange = false,
       enableColorScheme: designSystemEnableColorScheme = true,
-      prefix: designSystemPrefix = '',
-      shouldSkipGeneratingVar,
+      shouldSkipGeneratingVar: designSystemShouldSkipGeneratingVar,
       resolveTheme
     } = options;
 
@@ -7962,7 +7971,6 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     function CssVarsProvider({
       children,
       theme: themeProp = defaultTheme,
-      prefix = designSystemPrefix,
       modeStorageKey = defaultModeStorageKey,
       colorSchemeStorageKey = defaultColorSchemeStorageKey,
       attribute = defaultAttribute,
@@ -7973,15 +7981,17 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       storageWindow = typeof window === 'undefined' ? undefined : window,
       documentNode = typeof document === 'undefined' ? undefined : document,
       colorSchemeNode = typeof document === 'undefined' ? undefined : document.documentElement,
-      colorSchemeSelector = ':root'
+      colorSchemeSelector = ':root',
+      shouldSkipGeneratingVar = designSystemShouldSkipGeneratingVar
     }) {
       const hasMounted = React__namespace.useRef(false);
 
       const {
         colorSchemes = {},
-        components = {}
+        components = {},
+        cssVarPrefix
       } = themeProp,
-            restThemeProp = _objectWithoutPropertiesLoose(themeProp, _excluded$2g);
+            restThemeProp = _objectWithoutPropertiesLoose(themeProp, _excluded$2h);
 
       const allColorSchemes = Object.keys(colorSchemes);
       const defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
@@ -8024,16 +8034,14 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         vars: rootVars,
         parsedTheme
       } = cssVarsParser(theme, {
-        prefix,
-        basePrefix: designSystemPrefix,
+        prefix: cssVarPrefix,
         shouldSkipGeneratingVar
       });
       theme = _extends({}, parsedTheme, {
         components,
         colorSchemes,
-        prefix,
+        cssVarPrefix,
         vars: rootVars,
-        getCssVar: createGetCssVar(prefix),
         getColorSchemeSelector: targetColorScheme => `[${attribute}="${targetColorScheme}"] &`
       });
       const defaultColorSchemeStyleSheet = {};
@@ -8044,8 +8052,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
           vars,
           parsedTheme: parsedScheme
         } = cssVarsParser(scheme, {
-          prefix,
-          basePrefix: designSystemPrefix,
+          prefix: cssVarPrefix,
           shouldSkipGeneratingVar
         });
         theme.vars = deepmerge(theme.vars, vars);
@@ -8209,9 +8216,9 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       modeStorageKey: PropTypes.string,
 
       /**
-       * CSS variable prefix.
+       * A function to determine if the key, value should be attached as CSS Variable
        */
-      prefix: PropTypes.string,
+      shouldSkipGeneratingVar: PropTypes.func,
 
       /**
        * The window that attaches the 'storage' event listener
@@ -8228,7 +8235,8 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     const getInitColorSchemeScript = params => getInitColorSchemeScript$1(_extends({
       attribute: defaultAttribute,
       colorSchemeStorageKey: defaultColorSchemeStorageKey,
-      modeStorageKey: defaultModeStorageKey
+      modeStorageKey: defaultModeStorageKey,
+      enableColorScheme: designSystemEnableColorScheme
     }, params));
 
     return {
@@ -8238,9 +8246,36 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     };
   }
 
-  const _excluded$2f = ["className", "component", "disableGutters", "fixed", "maxWidth", "classes"];
-  const defaultTheme$4 = createTheme$1();
-  const defaultCreateStyledComponent = systemStyled('div', {
+  /**
+   * The benefit of this function is to help developers get CSS var from theme without specifying the whole variable
+   * and they does not need to remember the prefix (defined once).
+   */
+  function createGetCssVar$1(prefix = '') {
+    function appendVar(...vars) {
+      if (!vars.length) {
+        return '';
+      }
+
+      const value = vars[0];
+
+      if (typeof value === 'string' && !value.match(/(#|\(|\)|(-?(\d*\.)?\d+)(px|em|%|ex|ch|rem|vw|vh|vmin|vmax|cm|mm|in|pt|pc))/)) {
+        return `, var(--${prefix ? `${prefix}-` : ''}${value}${appendVar(...vars.slice(1))})`;
+      }
+
+      return `, ${value}`;
+    } // AdditionalVars makes `getCssVar` less strict, so it can be use like this `getCssVar('non-mui-variable')` without type error.
+
+
+    const getCssVar = (field, ...fallbacks) => {
+      return `var(--${prefix ? `${prefix}-` : ''}${field}${appendVar(...fallbacks)})`;
+    };
+
+    return getCssVar;
+  }
+
+  const _excluded$2g = ["className", "component", "disableGutters", "fixed", "maxWidth", "classes"];
+  const defaultTheme$5 = createTheme$1();
+  const defaultCreateStyledComponent$1 = systemStyled('div', {
     name: 'MuiContainer',
     slot: 'Root',
     overridesResolver: (props, styles) => {
@@ -8251,10 +8286,10 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     }
   });
 
-  const useThemePropsDefault = inProps => useThemeProps$1({
+  const useThemePropsDefault$1 = inProps => useThemeProps$1({
     props: inProps,
     name: 'MuiContainer',
-    defaultTheme: defaultTheme$4
+    defaultTheme: defaultTheme$5
   });
 
   const useUtilityClasses$1P = (ownerState, componentName) => {
@@ -8277,8 +8312,8 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
   function createContainer(options = {}) {
     const {
       // This will allow adding custom styled fn (for example for custom sx style function)
-      createStyledComponent = defaultCreateStyledComponent,
-      useThemeProps = useThemePropsDefault,
+      createStyledComponent = defaultCreateStyledComponent$1,
+      useThemeProps = useThemePropsDefault$1,
       componentName = 'MuiContainer'
     } = options;
     const ContainerRoot = createStyledComponent(({
@@ -8340,7 +8375,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         fixed = false,
         maxWidth = 'lg'
       } = props,
-            other = _objectWithoutPropertiesLoose(props, _excluded$2f);
+            other = _objectWithoutPropertiesLoose(props, _excluded$2g);
 
       const ownerState = _extends({}, props, {
         component,
@@ -8380,6 +8415,376 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     return Container;
   }
 
+  const traverseBreakpoints = (breakpoints, responsize, iterator) => {
+    const smallestBreakpoint = breakpoints.keys[0]; // the keys is sorted from smallest to largest by `createBreakpoints`.
+
+    if (Array.isArray(responsize)) {
+      responsize.forEach((breakpointValue, index) => {
+        iterator((responsizeStyles, style) => {
+          if (index <= breakpoints.keys.length - 1) {
+            if (index === 0) {
+              Object.assign(responsizeStyles, style);
+            } else {
+              responsizeStyles[breakpoints.up(breakpoints.keys[index])] = style;
+            }
+          }
+        }, breakpointValue);
+      });
+    } else if (responsize && typeof responsize === 'object') {
+      // prevent null
+      // responsize could be a very big object, pick the smallest responsive values
+      const keys = Object.keys(responsize).length > breakpoints.keys.length ? breakpoints.keys : Object.keys(responsize);
+      keys.forEach(key => {
+        if (breakpoints.keys.indexOf(key) !== -1) {
+          // @ts-ignore already checked that responsize is an object
+          const breakpointValue = responsize[key];
+
+          if (breakpointValue !== undefined) {
+            iterator((responsizeStyles, style) => {
+              if (smallestBreakpoint === key) {
+                Object.assign(responsizeStyles, style);
+              } else {
+                responsizeStyles[breakpoints.up(key)] = style;
+              }
+            }, breakpointValue);
+          }
+        }
+      });
+    } else if (typeof responsize === 'number' || typeof responsize === 'string') {
+      iterator((responsizeStyles, style) => {
+        Object.assign(responsizeStyles, style);
+      }, responsize);
+    }
+  };
+  const generateGridSizeStyles = ({
+    theme,
+    ownerState
+  }) => {
+    const styles = {};
+    traverseBreakpoints(theme.breakpoints, ownerState.gridSize, (appendStyle, value) => {
+      let style = {};
+
+      if (value === true) {
+        style = {
+          flexBasis: 0,
+          flexGrow: 1,
+          maxWidth: '100%'
+        };
+      }
+
+      if (value === 'auto') {
+        style = {
+          flexBasis: 'auto',
+          flexGrow: 0,
+          flexShrink: 0,
+          maxWidth: 'none',
+          width: 'auto'
+        };
+      }
+
+      if (typeof value === 'number') {
+        style = {
+          flexGrow: 0,
+          flexBasis: 'auto',
+          width: `calc(100% * ${value} / var(--Grid-columns)${ownerState.nested && ownerState.container ? ` + var(--Grid-columnSpacing)` : ''})`
+        };
+      }
+
+      appendStyle(styles, style);
+    });
+    return styles;
+  };
+  const generateGridOffsetStyles = ({
+    theme,
+    ownerState
+  }) => {
+    const styles = {};
+    traverseBreakpoints(theme.breakpoints, ownerState.gridOffset, (appendStyle, value) => {
+      let style = {};
+
+      if (value === 'auto') {
+        style = {
+          marginLeft: 'auto'
+        };
+      }
+
+      if (typeof value === 'number') {
+        style = {
+          marginLeft: value === 0 ? '0px' : `calc(100% * ${value} / var(--Grid-columns))`
+        };
+      }
+
+      appendStyle(styles, style);
+    });
+    return styles;
+  };
+  const generateGridColumnsStyles = ({
+    theme,
+    ownerState
+  }) => {
+    if (!ownerState.container) {
+      return {};
+    }
+
+    const styles = {
+      '--Grid-columns': 12
+    };
+    traverseBreakpoints(theme.breakpoints, ownerState.columns, (appendStyle, value) => {
+      appendStyle(styles, {
+        '--Grid-columns': value
+      });
+    });
+    return styles;
+  };
+  const generateGridRowSpacingStyles = ({
+    theme,
+    ownerState
+  }) => {
+    if (!ownerState.container) {
+      return {};
+    }
+
+    const styles = {};
+    traverseBreakpoints(theme.breakpoints, ownerState.rowSpacing, (appendStyle, value) => {
+      var _theme$spacing;
+
+      appendStyle(styles, {
+        '--Grid-rowSpacing': typeof value === 'string' ? value : (_theme$spacing = theme.spacing) == null ? void 0 : _theme$spacing.call(theme, value)
+      });
+    });
+    return styles;
+  };
+  const generateGridColumnSpacingStyles = ({
+    theme,
+    ownerState
+  }) => {
+    if (!ownerState.container) {
+      return {};
+    }
+
+    const styles = {};
+    traverseBreakpoints(theme.breakpoints, ownerState.columnSpacing, (appendStyle, value) => {
+      var _theme$spacing2;
+
+      appendStyle(styles, {
+        '--Grid-columnSpacing': typeof value === 'string' ? value : (_theme$spacing2 = theme.spacing) == null ? void 0 : _theme$spacing2.call(theme, value)
+      });
+    });
+    return styles;
+  };
+  const generateGridDirectionStyles = ({
+    theme,
+    ownerState
+  }) => {
+    if (!ownerState.container) {
+      return {};
+    }
+
+    const styles = {};
+    traverseBreakpoints(theme.breakpoints, ownerState.direction, (appendStyle, value) => {
+      appendStyle(styles, {
+        flexDirection: value
+      });
+    });
+    return styles;
+  };
+  const generateGridStyles = ({
+    ownerState
+  }) => {
+    return _extends({
+      minWidth: 0,
+      boxSizing: 'border-box'
+    }, ownerState.container ? _extends({
+      display: 'flex',
+      flexWrap: 'wrap'
+    }, ownerState.wrap && ownerState.wrap !== 'wrap' && {
+      flexWrap: ownerState.wrap
+    }, {
+      margin: `calc(var(--Grid-rowSpacing) / -2) calc(var(--Grid-columnSpacing) / -2)`
+    }, ownerState.nested ? {
+      padding: `calc(var(--Grid-nested-rowSpacing) / 2) calc(var(--Grid-nested-columnSpacing) / 2)`
+    } : {
+      '--Grid-nested-rowSpacing': 'var(--Grid-rowSpacing)',
+      '--Grid-nested-columnSpacing': 'var(--Grid-columnSpacing)'
+    }) : {
+      padding: `calc(var(--Grid-rowSpacing) / 2) calc(var(--Grid-columnSpacing) / 2)`
+    });
+  };
+  const generateSizeClassNames = gridSize => {
+    const classNames = [];
+    Object.entries(gridSize).forEach(([key, value]) => {
+      if (value !== false && value !== undefined) {
+        classNames.push(`grid-${key}-${String(value)}`);
+      }
+    });
+    return classNames;
+  };
+  const generateSpacingClassNames = (spacing, smallestBreakpoint = 'xs') => {
+    function isValidSpacing(val) {
+      if (val === undefined) {
+        return false;
+      }
+
+      return typeof val === 'string' && !Number.isNaN(Number(val)) || typeof val === 'number' && val > 0;
+    }
+
+    if (isValidSpacing(spacing)) {
+      return [`spacing-${smallestBreakpoint}-${String(spacing)}`];
+    }
+
+    if (typeof spacing === 'object' && !Array.isArray(spacing)) {
+      const classNames = [];
+      Object.entries(spacing).forEach(([key, value]) => {
+        if (isValidSpacing(value)) {
+          classNames.push(`spacing-${key}-${String(value)}`);
+        }
+      });
+      return classNames;
+    }
+
+    return [];
+  };
+
+  const _excluded$2f = ["className", "columns", "container", "component", "direction", "wrap", "spacing", "rowSpacing", "columnSpacing"];
+  const defaultTheme$4 = createTheme$1(); // widening Theme to any so that the consumer can own the theme structure.
+
+  const defaultCreateStyledComponent = systemStyled('div', {
+    name: 'MuiGrid',
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.root
+  });
+
+  function useThemePropsDefault(props) {
+    return useThemeProps$1({
+      props,
+      name: 'MuiGrid',
+      defaultTheme: defaultTheme$4
+    });
+  }
+
+  function createGrid(options = {}) {
+    const {
+      // This will allow adding custom styled fn (for example for custom sx style function)
+      createStyledComponent = defaultCreateStyledComponent,
+      useThemeProps = useThemePropsDefault,
+      componentName = 'MuiGrid'
+    } = options;
+    const NestedContext = /*#__PURE__*/React__namespace.createContext(false);
+
+    const useUtilityClasses = (ownerState, theme) => {
+      const {
+        container,
+        direction,
+        spacing,
+        wrap,
+        gridSize
+      } = ownerState;
+      const slots = {
+        root: ['root', container && 'container', direction !== 'row' && `direction-xs-${String(direction)}`, wrap !== 'wrap' && `wrap-xs-${String(wrap)}`, ...generateSizeClassNames(gridSize), ...(container ? generateSpacingClassNames(spacing, theme.breakpoints.keys[0]) : [])]
+      };
+      return composeClasses(slots, slot => generateUtilityClass(componentName, slot), {});
+    };
+
+    const GridRoot = createStyledComponent(generateGridColumnsStyles, generateGridColumnSpacingStyles, generateGridRowSpacingStyles, generateGridSizeStyles, generateGridDirectionStyles, generateGridStyles, generateGridOffsetStyles);
+    const Grid = /*#__PURE__*/React__namespace.forwardRef(function Grid(inProps, ref) {
+      var _inProps$columns, _inProps$spacing, _ref, _inProps$rowSpacing, _ref2, _inProps$columnSpacin;
+
+      const theme = useTheme$1();
+      const themeProps = useThemeProps(inProps);
+      const props = extendSxProp(themeProps); // `color` type conflicts with html color attribute.
+
+      const nested = React__namespace.useContext(NestedContext);
+
+      const {
+        className,
+        columns: columnsProp = 12,
+        container = false,
+        component = 'div',
+        direction = 'row',
+        wrap = 'wrap',
+        spacing: spacingProp = 0,
+        rowSpacing: rowSpacingProp = spacingProp,
+        columnSpacing: columnSpacingProp = spacingProp
+      } = props,
+            rest = _objectWithoutPropertiesLoose(props, _excluded$2f); // collect breakpoints related props because they can be custom from the theme.
+
+
+      const gridSize = {};
+      const gridOffset = {};
+      const other = {};
+      Object.entries(rest).forEach(([key, val]) => {
+        if (theme.breakpoints.values[key] !== undefined) {
+          gridSize[key] = val;
+        } else if (theme.breakpoints.values[key.replace('Offset', '')] !== undefined) {
+          gridOffset[key.replace('Offset', '')] = val;
+        } else {
+          other[key] = val;
+        }
+      });
+      const columns = (_inProps$columns = inProps.columns) != null ? _inProps$columns : nested ? undefined : columnsProp;
+      const spacing = (_inProps$spacing = inProps.spacing) != null ? _inProps$spacing : nested ? undefined : spacingProp;
+      const rowSpacing = (_ref = (_inProps$rowSpacing = inProps.rowSpacing) != null ? _inProps$rowSpacing : inProps.spacing) != null ? _ref : nested ? undefined : rowSpacingProp;
+      const columnSpacing = (_ref2 = (_inProps$columnSpacin = inProps.columnSpacing) != null ? _inProps$columnSpacin : inProps.spacing) != null ? _ref2 : nested ? undefined : columnSpacingProp;
+
+      const ownerState = _extends({}, props, {
+        nested,
+        columns,
+        container,
+        direction,
+        wrap,
+        spacing,
+        rowSpacing,
+        columnSpacing,
+        gridSize,
+        gridOffset
+      });
+
+      const classes = useUtilityClasses(ownerState, theme);
+
+      let result = /*#__PURE__*/jsxRuntime_1(GridRoot, _extends({
+        ref: ref,
+        as: component,
+        ownerState: ownerState,
+        className: clsx(classes.root, className)
+      }, other));
+
+      if (!nested) {
+        result = /*#__PURE__*/jsxRuntime_1(NestedContext.Provider, {
+          value: true,
+          children: result
+        });
+      }
+
+      return result;
+    });
+    Grid.propTypes
+    /* remove-proptypes */
+    = {
+      children: PropTypes.node,
+      className: PropTypes.string,
+      columns: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number, PropTypes.object]),
+      columnSpacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
+      component: PropTypes.elementType,
+      container: PropTypes.bool,
+      direction: PropTypes.oneOfType([PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), PropTypes.object]),
+      lg: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+      lgOffset: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
+      md: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+      mdOffset: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
+      rowSpacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
+      sm: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+      smOffset: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
+      spacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
+      sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+      wrap: PropTypes.oneOf(['nowrap', 'wrap-reverse', 'wrap']),
+      xl: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+      xlOffset: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
+      xs: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+      xsOffset: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number])
+    } ;
+    return Grid;
+  }
+
   const _excluded$2e = ["defaultProps", "mixins", "overrides", "palette", "props", "styleOverrides"],
         _excluded2$b = ["type", "mode"];
   function adaptV4Theme(inputTheme) {
@@ -8467,21 +8872,26 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     return typeof element === 'string';
   }
 
+  /**
+   * Type of the ownerState based on the type of an element it applies to.
+   * This resolves to the provided OwnerState for React components and `undefined` for host components.
+   * Falls back to `OwnerState | undefined` when the exact type can't be determined in development time.
+   */
+
   /**
    * 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 elementType Type of the element that owns the `existingProps`. If the element is a DOM node, `ownerState` is not applied.
+   * @param otherProps Props of the element.
    * @param ownerState
    */
-
-  function appendOwnerState(elementType, existingProps = {}, ownerState) {
+  function appendOwnerState(elementType, otherProps = {}, ownerState) {
     if (isHostComponent(elementType)) {
-      return existingProps;
+      return otherProps;
     }
 
-    return _extends({}, existingProps, {
-      ownerState: _extends({}, existingProps.ownerState, ownerState)
+    return _extends({}, otherProps, {
+      ownerState: _extends({}, otherProps.ownerState, ownerState)
     });
   }
 
@@ -8505,10 +8915,16 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
   }
 
   /**
-   * Creates a type that is T with removed properties that are functions with names beginning with `on`.
-   * Note that it does not exactly follow the logic of `omitEventHandlers` as it also removes fields where
-   * `on` is followed by a non-letter character,
+   * If `componentProps` is a function, calls it with the provided `ownerState`.
+   * Otherwise, just returns `componentProps`.
    */
+  function resolveComponentProps(componentProps, ownerState) {
+    if (typeof componentProps === 'function') {
+      return componentProps(ownerState);
+    }
+
+    return componentProps;
+  }
 
   /**
    * Removes event handlers from the given object.
@@ -8556,12 +8972,16 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       // so we can simply merge all the props without having to worry about extracting event handlers.
       const joinedClasses = clsx(externalForwardedProps == null ? void 0 : externalForwardedProps.className, externalSlotProps == null ? void 0 : externalSlotProps.className, className, additionalProps == null ? void 0 : additionalProps.className);
 
-      const props = _extends({}, additionalProps, externalForwardedProps, externalSlotProps, {
-        className: joinedClasses
-      });
+      const mergedStyle = _extends({}, additionalProps == null ? void 0 : additionalProps.style, externalForwardedProps == null ? void 0 : externalForwardedProps.style, externalSlotProps == null ? void 0 : externalSlotProps.style);
 
-      if (joinedClasses.length === 0) {
-        delete props.className;
+      const props = _extends({}, additionalProps, externalForwardedProps, externalSlotProps);
+
+      if (joinedClasses.length > 0) {
+        props.className = joinedClasses;
+      }
+
+      if (Object.keys(mergedStyle).length > 0) {
+        props.style = mergedStyle;
       }
 
       return {
@@ -8575,15 +8995,23 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     const eventHandlers = extractEventHandlers(_extends({}, externalForwardedProps, externalSlotProps));
     const componentsPropsWithoutEventHandlers = omitEventHandlers(externalSlotProps);
     const otherPropsWithoutEventHandlers = omitEventHandlers(externalForwardedProps);
-    const internalSlotProps = getSlotProps(eventHandlers);
-    const joinedClasses = clsx(externalForwardedProps == null ? void 0 : externalForwardedProps.className, externalSlotProps == null ? void 0 : externalSlotProps.className, className, additionalProps == null ? void 0 : additionalProps.className, internalSlotProps == null ? void 0 : internalSlotProps.className);
+    const internalSlotProps = getSlotProps(eventHandlers); // The order of classes is important here.
+    // Emotion (that we use in libraries consuming MUI Base) depends on this order
+    // to properly override style. It requires the most important classes to be last
+    // (see https://github.com/mui/material-ui/pull/33205) for the related discussion.
 
-    const props = _extends({}, internalSlotProps, additionalProps, otherPropsWithoutEventHandlers, componentsPropsWithoutEventHandlers, {
-      className: joinedClasses
-    });
+    const joinedClasses = clsx(internalSlotProps == null ? void 0 : internalSlotProps.className, additionalProps == null ? void 0 : additionalProps.className, className, externalForwardedProps == null ? void 0 : externalForwardedProps.className, externalSlotProps == null ? void 0 : externalSlotProps.className);
+
+    const mergedStyle = _extends({}, internalSlotProps == null ? void 0 : internalSlotProps.style, additionalProps == null ? void 0 : additionalProps.style, externalForwardedProps == null ? void 0 : externalForwardedProps.style, externalSlotProps == null ? void 0 : externalSlotProps.style);
+
+    const props = _extends({}, internalSlotProps, additionalProps, otherPropsWithoutEventHandlers, componentsPropsWithoutEventHandlers);
 
-    if (joinedClasses.length === 0) {
-      delete props.className;
+    if (joinedClasses.length > 0) {
+      props.className = joinedClasses;
+    }
+
+    if (Object.keys(mergedStyle).length > 0) {
+      props.style = mergedStyle;
     }
 
     return {
@@ -8592,18 +9020,6 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     };
   }
 
-  /**
-   * If `componentProps` is a function, calls it with the provided `ownerState`.
-   * Otherwise, just returns `componentProps`.
-   */
-  function resolveComponentProps(componentProps, ownerState) {
-    if (typeof componentProps === 'function') {
-      return componentProps(ownerState);
-    }
-
-    return componentProps;
-  }
-
   const _excluded$2d = ["elementType", "externalSlotProps", "ownerState"];
 
   /**
@@ -8624,11 +9040,15 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
           rest = _objectWithoutPropertiesLoose(parameters, _excluded$2d);
 
     const resolvedComponentsProps = resolveComponentProps(externalSlotProps, ownerState);
-    const merged = mergeSlotProps(_extends({}, rest, {
+    const {
+      props: mergedProps,
+      internalRef
+    } = mergeSlotProps(_extends({}, rest, {
       externalSlotProps: resolvedComponentsProps
     }));
-    const props = appendOwnerState(elementType, _extends({}, merged.props, {
-      ref: useForkRef(merged.internalRef, useForkRef(resolvedComponentsProps == null ? void 0 : resolvedComponentsProps.ref, (_parameters$additiona = parameters.additionalProps) == null ? void 0 : _parameters$additiona.ref))
+    const ref = useForkRef(internalRef, useForkRef(resolvedComponentsProps == null ? void 0 : resolvedComponentsProps.ref, (_parameters$additiona = parameters.additionalProps) == null ? void 0 : _parameters$additiona.ref));
+    const props = appendOwnerState(elementType, _extends({}, mergedProps, {
+      ref
     }), ownerState);
     return props;
   }
@@ -8698,13 +9118,13 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       autoHighlight = false,
       autoSelect = false,
       blurOnSelect = false,
-      disabled: disabledProp,
       clearOnBlur = !props.freeSolo,
       clearOnEscape = false,
       componentName = 'useAutocomplete',
       defaultValue = props.multiple ? [] : null,
       disableClearable = false,
       disableCloseOnSelect = false,
+      disabled: disabledProp,
       disabledItemsFocusable = false,
       disableListWrap = false,
       filterOptions = defaultFilterOptions,
@@ -8716,12 +9136,12 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
 
         return (_option$label = option.label) != null ? _option$label : option;
       },
-      isOptionEqualToValue = (option, value) => option === value,
       groupBy,
       handleHomeEndKeys = !props.freeSolo,
       id: idProp,
       includeInputInList = false,
       inputValue: inputValueProp,
+      isOptionEqualToValue = (option, value) => option === value,
       multiple = false,
       onChange,
       onClose,
@@ -12508,15 +12928,22 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
           });
           element.style.paddingRight = `${getPaddingRight(element) + scrollbarSize}px`;
         });
-      } // Improve Gatsby support
-      // https://css-tricks.com/snippets/css/force-vertical-scrollbar/
+      }
 
+      let scrollContainer;
 
-      const parent = container.parentElement;
-      const containerWindow = ownerWindow(container);
-      const scrollContainer = (parent == null ? void 0 : parent.nodeName) === 'HTML' && containerWindow.getComputedStyle(parent).overflowY === 'scroll' ? parent : container; // Block the scroll even if no scrollbar is visible to account for mobile keyboard
+      if (container.parentNode instanceof DocumentFragment) {
+        scrollContainer = ownerDocument(container).body;
+      } else {
+        // Improve Gatsby support
+        // https://css-tricks.com/snippets/css/force-vertical-scrollbar/
+        const parent = container.parentElement;
+        const containerWindow = ownerWindow(container);
+        scrollContainer = (parent == null ? void 0 : parent.nodeName) === 'HTML' && containerWindow.getComputedStyle(parent).overflowY === 'scroll' ? parent : container;
+      } // Block the scroll even if no scrollbar is visible to account for mobile keyboard
       // screensize shrink.
 
+
       restoreStyle.push({
         value: scrollContainer.style.overflow,
         property: 'overflow',
@@ -13024,7 +13451,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
   const modalUnstyledClasses = generateUtilityClasses('MuiModal', ['root', 'hidden']);
   var modalUnstyledClasses$1 = modalUnstyledClasses;
 
-  const _excluded$2a = ["children", "classes", "className", "closeAfterTransition", "component", "components", "componentsProps", "container", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "manager", "onBackdropClick", "onClose", "onKeyDown", "open", "onTransitionEnter", "onTransitionExited"];
+  const _excluded$2a = ["children", "classes", "closeAfterTransition", "component", "components", "componentsProps", "container", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "manager", "onBackdropClick", "onClose", "onKeyDown", "open", "onTransitionEnter", "onTransitionExited"];
 
   const useUtilityClasses$1N = ownerState => {
     const {
@@ -13064,12 +13491,11 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
    */
 
   const ModalUnstyled = /*#__PURE__*/React__namespace.forwardRef(function ModalUnstyled(props, ref) {
-    var _props$ariaHidden, _componentsProps$root;
+    var _props$ariaHidden;
 
     const {
       children,
       classes: classesProp,
-      className,
       closeAfterTransition = false,
       component = 'div',
       components = {},
@@ -13175,10 +13601,6 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
 
     const classes = useUtilityClasses$1N(ownerState);
 
-    if (!keepMounted && !open && (!hasTransition || exited)) {
-      return null;
-    }
-
     const handleEnter = () => {
       setExited(false);
 
@@ -13251,19 +13673,34 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     }
 
     const Root = components.Root || component;
-    const rootProps = appendOwnerState(Root, _extends({
-      role: 'presentation'
-    }, other, componentsProps.root, {
-      ref: handleRef,
-      onKeyDown: handleKeyDown,
-      className: clsx(classes.root, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.className, className)
-    }), ownerState);
+    const rootProps = useSlotProps({
+      elementType: Root,
+      externalSlotProps: componentsProps.root,
+      externalForwardedProps: other,
+      additionalProps: {
+        ref: handleRef,
+        role: 'presentation',
+        onKeyDown: handleKeyDown
+      },
+      className: classes.root,
+      ownerState
+    });
     const BackdropComponent = components.Backdrop;
-    const backdropProps = appendOwnerState(BackdropComponent, _extends({
-      'aria-hidden': true,
-      open,
-      onClick: handleBackdropClick
-    }, componentsProps.backdrop), ownerState);
+    const backdropProps = useSlotProps({
+      elementType: BackdropComponent,
+      externalSlotProps: componentsProps.backdrop,
+      additionalProps: {
+        'aria-hidden': true,
+        onClick: handleBackdropClick,
+        open
+      },
+      ownerState
+    });
+
+    if (!keepMounted && !open && (!hasTransition || exited)) {
+      return null;
+    }
+
     return /*#__PURE__*/jsxRuntime_1(Portal$1, {
       ref: handlePortalRef,
       container: container,
@@ -13298,11 +13735,6 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
      */
     classes: PropTypes.object,
 
-    /**
-     * @ignore
-     */
-    className: PropTypes.string,
-
     /**
      * When set to true the Modal waits until a nested Transition is completed before closing.
      * @default false
@@ -13330,8 +13762,8 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
      * @default {}
      */
     componentsProps: PropTypes.shape({
-      backdrop: PropTypes.object,
-      root: PropTypes.object
+      backdrop: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+      root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
     }),
 
     /**
@@ -13772,7 +14204,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       onFocus: handleFocusVisible,
       ref: focusVisibleRef
     } = useIsFocusVisible();
-    const [focusVisible, setFocusVisible] = React__namespace.useState(-1);
+    const [focusedThumbIndex, setFocusedThumbIndex] = React__namespace.useState(-1);
     const sliderRef = React__namespace.useRef();
     const handleFocusRef = useForkRef(focusVisibleRef, sliderRef);
     const handleRef = useForkRef(ref, handleFocusRef);
@@ -13784,7 +14216,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       handleFocusVisible(event);
 
       if (isFocusVisibleRef.current === true) {
-        setFocusVisible(index);
+        setFocusedThumbIndex(index);
       }
 
       setOpen(index);
@@ -13797,7 +14229,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       handleBlurVisible(event);
 
       if (isFocusVisibleRef.current === false) {
-        setFocusVisible(-1);
+        setFocusedThumbIndex(-1);
       }
 
       setOpen(-1);
@@ -13820,8 +14252,8 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       setActive(-1);
     }
 
-    if (disabled && focusVisible !== -1) {
-      setFocusVisible(-1);
+    if (disabled && focusedThumbIndex !== -1) {
+      setFocusedThumbIndex(-1);
     }
 
     const createHandleHiddenInputChange = otherHandlers => event => {
@@ -13870,7 +14302,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       }
 
       setValueState(newValue);
-      setFocusVisible(index);
+      setFocusedThumbIndex(index);
 
       if (handleChange) {
         handleChange(event, newValue, index);
@@ -14181,13 +14613,12 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         onMouseOver: createHandleMouseOver(otherHandlers || {}),
         onMouseLeave: createHandleMouseLeave(otherHandlers || {})
       };
-
-      const mergedEventHandlers = _extends({}, otherHandlers, ownEventHandlers);
-
-      return _extends({}, mergedEventHandlers);
+      return _extends({}, otherHandlers, ownEventHandlers);
     };
 
     const getHiddenInputProps = (otherHandlers = {}) => {
+      var _parameters$step;
+
       const ownEventHandlers = {
         onChange: createHandleHiddenInputChange(otherHandlers || {}),
         onFocus: createHandleHiddenInputFocus(otherHandlers || {}),
@@ -14206,7 +14637,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         type: 'range',
         min: parameters.min,
         max: parameters.max,
-        step: parameters.step,
+        step: (_parameters$step = parameters.step) != null ? _parameters$step : undefined,
         disabled
       }, mergedEventHandlers, {
         style: _extends({}, visuallyHidden$1, {
@@ -14223,7 +14654,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       axis: axis,
       axisProps,
       dragging,
-      focusVisible,
+      focusedThumbIndex,
       getHiddenInputProps,
       getRootProps,
       getThumbProps,
@@ -14236,7 +14667,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     };
   }
 
-  const _excluded$29 = ["aria-label", "aria-valuetext", "className", "component", "classes", "disableSwap", "disabled", "getAriaLabel", "getAriaValueText", "marks", "max", "min", "name", "onChange", "onChangeCommitted", "onMouseDown", "orientation", "scale", "step", "tabIndex", "track", "value", "valueLabelDisplay", "valueLabelFormat", "isRtl", "components", "componentsProps"];
+  const _excluded$29 = ["aria-label", "aria-valuetext", "className", "component", "classes", "disableSwap", "disabled", "getAriaLabel", "getAriaValueText", "marks", "max", "min", "name", "onChange", "onChangeCommitted", "orientation", "scale", "step", "tabIndex", "track", "value", "valueLabelDisplay", "valueLabelFormat", "isRtl", "components", "componentsProps"];
 
   const Identity = x => x;
 
@@ -14286,7 +14717,6 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       marks: marksProp = false,
       max = 100,
       min = 0,
-      onMouseDown,
       orientation = 'horizontal',
       scale = Identity,
       step = 1,
@@ -14325,7 +14755,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       active,
       axis,
       range,
-      focusVisible,
+      focusedThumbIndex,
       dragging,
       marks,
       values,
@@ -14336,37 +14766,69 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     }));
     ownerState.marked = marks.length > 0 && marks.some(mark => mark.label);
     ownerState.dragging = dragging;
+    ownerState.focusedThumbIndex = focusedThumbIndex;
+    const classes = useUtilityClasses$1M(ownerState);
     const Root = (_ref = component != null ? component : components.Root) != null ? _ref : 'span';
-    const rootProps = appendOwnerState(Root, _extends({}, other, componentsProps.root), ownerState);
+    const rootProps = useSlotProps({
+      elementType: Root,
+      getSlotProps: getRootProps,
+      externalSlotProps: componentsProps.root,
+      externalForwardedProps: other,
+      ownerState,
+      className: [classes.root, className]
+    });
     const Rail = (_components$Rail = components.Rail) != null ? _components$Rail : 'span';
-    const railProps = appendOwnerState(Rail, componentsProps.rail, ownerState);
+    const railProps = useSlotProps({
+      elementType: Rail,
+      externalSlotProps: componentsProps.rail,
+      ownerState,
+      className: classes.rail
+    });
     const Track = (_components$Track = components.Track) != null ? _components$Track : 'span';
-    const trackProps = appendOwnerState(Track, componentsProps.track, ownerState);
-
-    const trackStyle = _extends({}, axisProps[axis].offset(trackOffset), axisProps[axis].leap(trackLeap));
-
+    const trackProps = useSlotProps({
+      elementType: Track,
+      externalSlotProps: componentsProps.track,
+      additionalProps: {
+        style: _extends({}, axisProps[axis].offset(trackOffset), axisProps[axis].leap(trackLeap))
+      },
+      ownerState,
+      className: classes.track
+    });
     const Thumb = (_components$Thumb = components.Thumb) != null ? _components$Thumb : 'span';
-    const thumbProps = appendOwnerState(Thumb, componentsProps.thumb, ownerState);
+    const thumbProps = useSlotProps({
+      elementType: Thumb,
+      getSlotProps: getThumbProps,
+      externalSlotProps: componentsProps.thumb,
+      ownerState
+    });
     const ValueLabel = (_components$ValueLabe = components.ValueLabel) != null ? _components$ValueLabe : SliderValueLabelUnstyled;
-    const valueLabelProps = appendOwnerState(ValueLabel, componentsProps.valueLabel, ownerState);
+    const valueLabelProps = useSlotProps({
+      elementType: ValueLabel,
+      externalSlotProps: componentsProps.valueLabel,
+      ownerState
+    });
     const Mark = (_components$Mark = components.Mark) != null ? _components$Mark : 'span';
-    const markProps = appendOwnerState(Mark, componentsProps.mark, ownerState);
+    const markProps = useSlotProps({
+      elementType: Mark,
+      externalSlotProps: componentsProps.mark,
+      ownerState,
+      className: classes.mark
+    });
     const MarkLabel = (_components$MarkLabel = components.MarkLabel) != null ? _components$MarkLabel : 'span';
-    const markLabelProps = appendOwnerState(MarkLabel, componentsProps.markLabel, ownerState);
+    const markLabelProps = useSlotProps({
+      elementType: MarkLabel,
+      externalSlotProps: componentsProps.markLabel,
+      ownerState
+    });
     const Input = components.Input || 'input';
-    const inputProps = appendOwnerState(Input, componentsProps.input, ownerState);
-    const hiddenInputProps = getHiddenInputProps();
-    const classes = useUtilityClasses$1M(ownerState);
-    return /*#__PURE__*/jsxRuntime_2(Root, _extends({}, rootProps, getRootProps({
-      onMouseDown
-    }), {
-      className: clsx(classes.root, rootProps.className, className),
-      children: [/*#__PURE__*/jsxRuntime_1(Rail, _extends({}, railProps, {
-        className: clsx(classes.rail, railProps.className)
-      })), /*#__PURE__*/jsxRuntime_1(Track, _extends({}, trackProps, {
-        className: clsx(classes.track, trackProps.className),
-        style: _extends({}, trackStyle, trackProps.style)
-      })), marks.filter(mark => mark.value >= min && mark.value <= max).map((mark, index) => {
+    const inputProps = useSlotProps({
+      elementType: Input,
+      getSlotProps: getHiddenInputProps,
+      externalSlotProps: componentsProps.input,
+      ownerState
+    });
+    return /*#__PURE__*/jsxRuntime_2(Root, _extends({}, rootProps, {
+      children: [/*#__PURE__*/jsxRuntime_1(Rail, _extends({}, railProps)), /*#__PURE__*/jsxRuntime_1(Track, _extends({}, trackProps)), marks.filter(mark => mark.value >= min && mark.value <= max).map((mark, index) => {
         const percent = valueToPercent(mark.value, min, max);
         const style = axisProps[axis].offset(percent);
         let markActive;
@@ -14384,7 +14846,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
             markActive
           }, {
             style: _extends({}, style, markProps.style),
-            className: clsx(classes.mark, markProps.className, markActive && classes.markActive)
+            className: clsx(markProps.className, markActive && classes.markActive)
           })), mark.label != null ? /*#__PURE__*/jsxRuntime_1(MarkLabel, _extends({
             "aria-hidden": true,
             "data-index": index
@@ -14411,23 +14873,20 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
           }, valueLabelProps, {
             className: clsx(classes.valueLabel, valueLabelProps.className),
             children: /*#__PURE__*/jsxRuntime_1(Thumb, _extends({
-              "data-index": index
-            }, thumbProps, getThumbProps(), {
-              className: clsx(classes.thumb, thumbProps.className, active === index && classes.active, focusVisible === index && classes.focusVisible),
+              "data-index": index,
+              "data-focusvisible": focusedThumbIndex === index
+            }, thumbProps, {
+              className: clsx(classes.thumb, thumbProps.className, active === index && classes.active, focusedThumbIndex === index && classes.focusVisible),
               style: _extends({}, style, {
                 pointerEvents: disableSwap && active !== index ? 'none' : undefined
               }, thumbProps.style),
-              children: /*#__PURE__*/jsxRuntime_1(Input, _extends({}, hiddenInputProps, {
+              children: /*#__PURE__*/jsxRuntime_1(Input, _extends({
                 "data-index": index,
                 "aria-label": getAriaLabel ? getAriaLabel(index) : ariaLabel,
                 "aria-valuenow": scale(value),
                 "aria-valuetext": getAriaValueText ? getAriaValueText(scale(value), index) : ariaValuetext,
                 value: values[index]
-              }, !isHostComponent(Input) && {
-                ownerState: _extends({}, ownerState, inputProps.ownerState)
-              }, inputProps, {
-                style: _extends({}, hiddenInputProps.style, inputProps.style)
-              }))
+              }, inputProps))
             }))
           }))
         }, index);
@@ -14515,14 +14974,14 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
      * @default {}
      */
     componentsProps: PropTypes.shape({
-      input: PropTypes.object,
-      mark: PropTypes.object,
-      markLabel: PropTypes.object,
-      rail: PropTypes.object,
-      root: PropTypes.object,
-      thumb: PropTypes.object,
-      track: PropTypes.object,
-      valueLabel: PropTypes.shape({
+      input: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+      mark: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+      markLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+      rail: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+      root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+      thumb: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+      track: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+      valueLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
         children: PropTypes.element,
         className: PropTypes.string,
         components: PropTypes.shape({
@@ -14532,7 +14991,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         style: PropTypes.object,
         value: PropTypes.number,
         valueLabelDisplay: PropTypes.oneOf(['auto', 'off', 'on'])
-      })
+      })])
     }),
 
     /**
@@ -14624,11 +15083,6 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
      */
     onChangeCommitted: PropTypes.func,
 
-    /**
-     * @ignore
-     */
-    onMouseDown: PropTypes.func,
-
     /**
      * The component orientation.
      * @default 'horizontal'
@@ -14716,6 +15170,11 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       transform: 'translateZ(0)'
     }
   };
+
+  function isEmpty$1(obj) {
+    return obj === undefined || obj === null || Object.keys(obj).length === 0;
+  }
+
   const TextareaAutosize = /*#__PURE__*/React__namespace.forwardRef(function TextareaAutosize(props, ref) {
     const {
       onChange,
@@ -14734,13 +15193,13 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     const shadowRef = React__namespace.useRef(null);
     const renders = React__namespace.useRef(0);
     const [state, setState] = React__namespace.useState({});
-    const syncHeight = React__namespace.useCallback(() => {
+    const getUpdatedState = 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;
+        return {};
       }
 
       const inputShallow = shadowRef.current;
@@ -14777,30 +15236,77 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
 
       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
-          };
-        }
+      return {
+        outerHeightStyle,
+        overflow
+      };
+    }, [maxRows, minRows, props.placeholder]);
 
-        {
-          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'));
-          }
+    const updateState = (prevState, newState) => {
+      const {
+        outerHeightStyle,
+        overflow
+      } = newState; // 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;
+      return prevState;
+    };
+
+    const syncHeight = React__namespace.useCallback(() => {
+      const newState = getUpdatedState();
+
+      if (isEmpty$1(newState)) {
+        return;
+      }
+
+      setState(prevState => {
+        return updateState(prevState, newState);
       });
-    }, [maxRows, minRows, props.placeholder]);
+    }, [getUpdatedState]);
+
+    const syncHeightWithFlushSycn = () => {
+      const newState = getUpdatedState();
+
+      if (isEmpty$1(newState)) {
+        return;
+      } // In React 18, state updates in a ResizeObserver's callback are happening after the paint which causes flickering
+      // when doing some visual updates in it. Using flushSync ensures that the dom will be painted after the states updates happen
+      // Related issue - https://github.com/facebook/react/issues/24331
+
+
+      ReactDOM.flushSync(() => {
+        setState(prevState => {
+          return updateState(prevState, newState);
+        });
+      });
+    };
+
     React__namespace.useEffect(() => {
       const handleResize = debounce$1(() => {
-        renders.current = 0;
-        syncHeight();
+        renders.current = 0; // If the TextareaAutosize component is replaced by Suspense with a fallback, the last
+        // ResizeObserver's handler that runs because of the change in the layout is trying to
+        // access a dom node that is no longer there (as the fallback component is being shown instead).
+        // See https://github.com/mui/material-ui/issues/32640
+        // TODO: Add tests that will ensure the component is not failing when
+        // replaced by Suspense with a fallback, once React is updated to version 18
+
+        if (inputRef.current) {
+          syncHeightWithFlushSycn();
+        }
       });
       const containerWindow = ownerWindow(inputRef.current);
       containerWindow.addEventListener('resize', handleResize);
@@ -14819,7 +15325,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
           resizeObserver.disconnect();
         }
       };
-    }, [syncHeight]);
+    });
     useEnhancedEffect$1(() => {
       syncHeight();
     });
@@ -15963,7 +16469,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   } ;
   var Paper$1 = Paper;
 
-  const _excluded$22 = ["colorSchemes"],
+  const _excluded$22 = ["colorSchemes", "cssVarPrefix"],
         _excluded2$9 = ["palette"];
   const defaultDarkOverlays = [...Array(25)].map((_, index) => {
     if (index === 0) {
@@ -15986,14 +16492,18 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     obj[key] = obj[key] || defaultValue;
   }
 
+  const createGetCssVar = (cssVarPrefix = 'mui') => createGetCssVar$1(cssVarPrefix);
   function extendTheme(options = {}, ...args) {
     var _colorSchemesInput$li, _colorSchemesInput$da, _colorSchemesInput$li2, _colorSchemesInput$li3, _colorSchemesInput$da2, _colorSchemesInput$da3;
 
     const {
-      colorSchemes: colorSchemesInput = {}
+      colorSchemes: colorSchemesInput = {},
+      cssVarPrefix = 'mui'
     } = options,
           input = _objectWithoutPropertiesLoose(options, _excluded$22);
 
+    const getCssVar = createGetCssVar(cssVarPrefix);
+
     const _createThemeWithoutVa = createTheme(_extends({}, input, colorSchemesInput.light && {
       palette: (_colorSchemesInput$li = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li.palette
     })),
@@ -16011,12 +16521,14 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     });
 
     let theme = _extends({}, muiTheme, {
+      cssVarPrefix,
+      getCssVar,
       colorSchemes: _extends({}, colorSchemesInput, {
         light: _extends({}, colorSchemesInput.light, {
           palette: lightPalette,
           opacity: _extends({
             inputPlaceholder: 0.42,
-            inputTouchBottomLine: 0.42,
+            inputUnderline: 0.42,
             switchTrackDisabled: 0.12,
             switchTrack: 0.38
           }, (_colorSchemesInput$li2 = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li2.opacity),
@@ -16026,7 +16538,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
           palette: darkPalette,
           opacity: _extends({
             inputPlaceholder: 0.5,
-            inputTouchBottomLine: 0.7,
+            inputUnderline: 0.7,
             switchTrackDisabled: 0.2,
             switchTrack: 0.3
           }, (_colorSchemesInput$da2 = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da2.opacity),
@@ -16047,14 +16559,34 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       } // assign component variables
 
 
-      assignNode(palette, ['AppBar', 'Avatar', 'Chip', 'FilledInput', 'LinearProgress', 'Skeleton', 'Slider', 'SnackbarContent', 'SpeedDialAction', 'StepConnector', 'StepContent', 'Switch', 'TableCell', 'Tooltip']);
+      assignNode(palette, ['Alert', 'AppBar', 'Avatar', 'Chip', 'FilledInput', 'LinearProgress', 'Skeleton', 'Slider', 'SnackbarContent', 'SpeedDialAction', 'StepConnector', 'StepContent', 'Switch', 'TableCell', 'Tooltip']);
 
       if (key === 'light') {
-        setColor(palette.AppBar, 'defaultBg', 'var(--mui-palette-grey-100)');
-        setColor(palette.Avatar, 'defaultBg', 'var(--mui-palette-grey-400)');
-        setColor(palette.Chip, 'defaultBorder', 'var(--mui-palette-grey-400)');
-        setColor(palette.Chip, 'defaultAvatarColor', 'var(--mui-palette-grey-700)');
-        setColor(palette.Chip, 'defaultIconColor', 'var(--mui-palette-grey-700)');
+        setColor(palette.Alert, 'errorColor', darken(palette.error.light, 0.6));
+        setColor(palette.Alert, 'infoColor', darken(palette.info.light, 0.6));
+        setColor(palette.Alert, 'successColor', darken(palette.success.light, 0.6));
+        setColor(palette.Alert, 'warningColor', darken(palette.warning.light, 0.6));
+        setColor(palette.Alert, 'errorFilledBg', getCssVar('palette-error-main'));
+        setColor(palette.Alert, 'infoFilledBg', getCssVar('palette-info-main'));
+        setColor(palette.Alert, 'successFilledBg', getCssVar('palette-success-main'));
+        setColor(palette.Alert, 'warningFilledBg', getCssVar('palette-warning-main'));
+        setColor(palette.Alert, 'errorFilledColor', lightPalette.getContrastText(palette.error.main));
+        setColor(palette.Alert, 'infoFilledColor', lightPalette.getContrastText(palette.info.main));
+        setColor(palette.Alert, 'successFilledColor', lightPalette.getContrastText(palette.success.main));
+        setColor(palette.Alert, 'warningFilledColor', lightPalette.getContrastText(palette.warning.main));
+        setColor(palette.Alert, 'errorStandardBg', lighten(palette.error.light, 0.9));
+        setColor(palette.Alert, 'infoStandardBg', lighten(palette.info.light, 0.9));
+        setColor(palette.Alert, 'successStandardBg', lighten(palette.success.light, 0.9));
+        setColor(palette.Alert, 'warningStandardBg', lighten(palette.warning.light, 0.9));
+        setColor(palette.Alert, 'errorIconColor', getCssVar('palette-error-light'));
+        setColor(palette.Alert, 'infoIconColor', getCssVar('palette-info-light'));
+        setColor(palette.Alert, 'successIconColor', getCssVar('palette-success-light'));
+        setColor(palette.Alert, 'warningIconColor', getCssVar('palette-warning-light'));
+        setColor(palette.AppBar, 'defaultBg', getCssVar('palette-grey-100'));
+        setColor(palette.Avatar, 'defaultBg', getCssVar('palette-grey-400'));
+        setColor(palette.Chip, 'defaultBorder', getCssVar('palette-grey-400'));
+        setColor(palette.Chip, 'defaultAvatarColor', getCssVar('palette-grey-700'));
+        setColor(palette.Chip, 'defaultIconColor', getCssVar('palette-grey-700'));
         setColor(palette.FilledInput, 'bg', 'rgba(0, 0, 0, 0.06)');
         setColor(palette.FilledInput, 'hoverBg', 'rgba(0, 0, 0, 0.09)');
         setColor(palette.FilledInput, 'disabledBg', 'rgba(0, 0, 0, 0.12)');
@@ -16064,19 +16596,21 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         setColor(palette.LinearProgress, 'infoBg', lighten(palette.info.main, 0.62));
         setColor(palette.LinearProgress, 'successBg', lighten(palette.success.main, 0.62));
         setColor(palette.LinearProgress, 'warningBg', lighten(palette.warning.main, 0.62));
-        setColor(palette.Skeleton, 'bg', 'rgba(var(--mui-palette-text-primaryChannel) / 0.11)');
+        setColor(palette.Skeleton, 'bg', `rgba(${getCssVar('palette-text-primaryChannel')} / 0.11)`);
         setColor(palette.Slider, 'primaryTrack', lighten(palette.primary.main, 0.62));
         setColor(palette.Slider, 'secondaryTrack', lighten(palette.secondary.main, 0.62));
         setColor(palette.Slider, 'errorTrack', lighten(palette.error.main, 0.62));
         setColor(palette.Slider, 'infoTrack', lighten(palette.info.main, 0.62));
         setColor(palette.Slider, 'successTrack', lighten(palette.success.main, 0.62));
         setColor(palette.Slider, 'warningTrack', lighten(palette.warning.main, 0.62));
-        setColor(palette.SnackbarContent, 'bg', emphasize(palette.background.default, 0.8));
+        const snackbarContentBackground = emphasize(palette.background.default, 0.8);
+        setColor(palette.SnackbarContent, 'bg', snackbarContentBackground);
+        setColor(palette.SnackbarContent, 'color', lightPalette.getContrastText(snackbarContentBackground));
         setColor(palette.SpeedDialAction, 'fabHoverBg', emphasize(palette.background.paper, 0.15));
-        setColor(palette.StepConnector, 'border', 'var(--mui-palette-grey-400)');
-        setColor(palette.StepContent, 'border', 'var(--mui-palette-grey-400)');
-        setColor(palette.Switch, 'defaultColor', 'var(--mui-palette-common-white)');
-        setColor(palette.Switch, 'defaultDisabledColor', 'var(--mui-palette-grey-100)');
+        setColor(palette.StepConnector, 'border', getCssVar('palette-grey-400'));
+        setColor(palette.StepContent, 'border', getCssVar('palette-grey-400'));
+        setColor(palette.Switch, 'defaultColor', getCssVar('palette-common-white'));
+        setColor(palette.Switch, 'defaultDisabledColor', getCssVar('palette-grey-100'));
         setColor(palette.Switch, 'primaryDisabledColor', lighten(palette.primary.main, 0.62));
         setColor(palette.Switch, 'secondaryDisabledColor', lighten(palette.secondary.main, 0.62));
         setColor(palette.Switch, 'errorDisabledColor', lighten(palette.error.main, 0.62));
@@ -16086,15 +16620,35 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         setColor(palette.TableCell, 'border', lighten(alpha(palette.divider, 1), 0.88));
         setColor(palette.Tooltip, 'bg', alpha(palette.grey[700], 0.92));
       } else {
-        setColor(palette.AppBar, 'defaultBg', 'var(--mui-palette-grey-900)');
-        setColor(palette.AppBar, 'darkBg', 'var(--mui-palette-background-paper)'); // specific for dark mode
-
-        setColor(palette.AppBar, 'darkColor', 'var(--mui-palette-text-primary)'); // specific for dark mode
-
-        setColor(palette.Avatar, 'defaultBg', 'var(--mui-palette-grey-600)');
-        setColor(palette.Chip, 'defaultBorder', 'var(--mui-palette-grey-700)');
-        setColor(palette.Chip, 'defaultAvatarColor', 'var(--mui-palette-grey-300)');
-        setColor(palette.Chip, 'defaultIconColor', 'var(--mui-palette-grey-300)');
+        setColor(palette.Alert, 'errorColor', lighten(palette.error.light, 0.6));
+        setColor(palette.Alert, 'infoColor', lighten(palette.info.light, 0.6));
+        setColor(palette.Alert, 'successColor', lighten(palette.success.light, 0.6));
+        setColor(palette.Alert, 'warningColor', lighten(palette.warning.light, 0.6));
+        setColor(palette.Alert, 'errorFilledBg', getCssVar('palette-error-dark'));
+        setColor(palette.Alert, 'infoFilledBg', getCssVar('palette-info-dark'));
+        setColor(palette.Alert, 'successFilledBg', getCssVar('palette-success-dark'));
+        setColor(palette.Alert, 'warningFilledBg', getCssVar('palette-warning-dark'));
+        setColor(palette.Alert, 'errorFilledColor', darkPalette.getContrastText(palette.error.dark));
+        setColor(palette.Alert, 'infoFilledColor', darkPalette.getContrastText(palette.info.dark));
+        setColor(palette.Alert, 'successFilledColor', darkPalette.getContrastText(palette.success.dark));
+        setColor(palette.Alert, 'warningFilledColor', darkPalette.getContrastText(palette.warning.dark));
+        setColor(palette.Alert, 'errorStandardBg', darken(palette.error.light, 0.9));
+        setColor(palette.Alert, 'infoStandardBg', darken(palette.info.light, 0.9));
+        setColor(palette.Alert, 'successStandardBg', darken(palette.success.light, 0.9));
+        setColor(palette.Alert, 'warningStandardBg', darken(palette.warning.light, 0.9));
+        setColor(palette.Alert, 'errorIconColor', getCssVar('palette-error-main'));
+        setColor(palette.Alert, 'infoIconColor', getCssVar('palette-info-main'));
+        setColor(palette.Alert, 'successIconColor', getCssVar('palette-success-main'));
+        setColor(palette.Alert, 'warningIconColor', getCssVar('palette-warning-main'));
+        setColor(palette.AppBar, 'defaultBg', getCssVar('palette-grey-900'));
+        setColor(palette.AppBar, 'darkBg', getCssVar('palette-background-paper')); // specific for dark mode
+
+        setColor(palette.AppBar, 'darkColor', getCssVar('palette-text-primary')); // specific for dark mode
+
+        setColor(palette.Avatar, 'defaultBg', getCssVar('palette-grey-600'));
+        setColor(palette.Chip, 'defaultBorder', getCssVar('palette-grey-700'));
+        setColor(palette.Chip, 'defaultAvatarColor', getCssVar('palette-grey-300'));
+        setColor(palette.Chip, 'defaultIconColor', getCssVar('palette-grey-300'));
         setColor(palette.FilledInput, 'bg', 'rgba(255, 255, 255, 0.09)');
         setColor(palette.FilledInput, 'hoverBg', 'rgba(255, 255, 255, 0.13)');
         setColor(palette.FilledInput, 'disabledBg', 'rgba(255, 255, 255, 0.12)');
@@ -16104,19 +16658,21 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         setColor(palette.LinearProgress, 'infoBg', darken(palette.info.main, 0.5));
         setColor(palette.LinearProgress, 'successBg', darken(palette.success.main, 0.5));
         setColor(palette.LinearProgress, 'warningBg', darken(palette.warning.main, 0.5));
-        setColor(palette.Skeleton, 'bg', 'rgba(var(--mui-palette-text-primaryChannel) / 0.13)');
+        setColor(palette.Skeleton, 'bg', `rgba(${getCssVar('palette-text-primaryChannel')} / 0.13)`);
         setColor(palette.Slider, 'primaryTrack', darken(palette.primary.main, 0.5));
         setColor(palette.Slider, 'secondaryTrack', darken(palette.secondary.main, 0.5));
         setColor(palette.Slider, 'errorTrack', darken(palette.error.main, 0.5));
         setColor(palette.Slider, 'infoTrack', darken(palette.info.main, 0.5));
         setColor(palette.Slider, 'successTrack', darken(palette.success.main, 0.5));
         setColor(palette.Slider, 'warningTrack', darken(palette.warning.main, 0.5));
-        setColor(palette.SnackbarContent, 'bg', emphasize(palette.background.default, 0.98));
+        const snackbarContentBackground = emphasize(palette.background.default, 0.98);
+        setColor(palette.SnackbarContent, 'bg', snackbarContentBackground);
+        setColor(palette.SnackbarContent, 'color', darkPalette.getContrastText(snackbarContentBackground));
         setColor(palette.SpeedDialAction, 'fabHoverBg', emphasize(palette.background.paper, 0.15));
-        setColor(palette.StepConnector, 'border', 'var(--mui-palette-grey-600)');
-        setColor(palette.StepContent, 'border', 'var(--mui-palette-grey-600)');
-        setColor(palette.Switch, 'defaultColor', 'var(--mui-palette-grey-300)');
-        setColor(palette.Switch, 'defaultDisabledColor', 'var(--mui-palette-grey-600)');
+        setColor(palette.StepConnector, 'border', getCssVar('palette-grey-600'));
+        setColor(palette.StepContent, 'border', getCssVar('palette-grey-600'));
+        setColor(palette.Switch, 'defaultColor', getCssVar('palette-grey-300'));
+        setColor(palette.Switch, 'defaultDisabledColor', getCssVar('palette-grey-600'));
         setColor(palette.Switch, 'primaryDisabledColor', darken(palette.primary.main, 0.55));
         setColor(palette.Switch, 'secondaryDisabledColor', darken(palette.secondary.main, 0.55));
         setColor(palette.Switch, 'errorDisabledColor', darken(palette.error.main, 0.55));
@@ -16172,9 +16728,15 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     return theme;
   }
 
+  const shouldSkipGeneratingVar = keys => {
+    var _keys$;
+
+    return !!keys[0].match(/(typography|mixins|breakpoints|direction|transitions)/) || keys[0] === 'palette' && !!((_keys$ = keys[1]) != null && _keys$.match(/(mode|contrastThreshold|tonalOffset)/));
+  };
+
   const defaultTheme$1 = extendTheme();
   const {
-    CssVarsProvider: Experimental_CssVarsProvider,
+    CssVarsProvider,
     useColorScheme,
     getInitColorSchemeScript
   } = createCssVarsProvider({
@@ -16186,7 +16748,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       light: 'light',
       dark: 'dark'
     },
-    prefix: 'mui',
     resolveTheme: theme => {
       const newTheme = _extends({}, theme, {
         typography: createTypography(theme.palette, theme.typography)
@@ -16194,7 +16755,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
       return newTheme;
     },
-    shouldSkipGeneratingVar: keys => !!keys[0].match(/(typography|mixins|breakpoints|direction|transitions)/)
+    shouldSkipGeneratingVar
   });
 
   function getSvgIconUtilityClass(slot) {
@@ -19736,22 +20297,30 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       display: 'flex',
       padding: '6px 16px'
     }, color && ownerState.variant === 'standard' && {
-      color: getColor(theme.palette[color].light, 0.6),
-      backgroundColor: getBackgroundColor(theme.palette[color].light, 0.9),
-      [`& .${alertClasses$1.icon}`]: {
+      color: theme.vars ? theme.vars.palette.Alert[`${color}Color`] : getColor(theme.palette[color].light, 0.6),
+      backgroundColor: theme.vars ? theme.vars.palette.Alert[`${color}StandardBg`] : getBackgroundColor(theme.palette[color].light, 0.9),
+      [`& .${alertClasses$1.icon}`]: theme.vars ? {
+        color: theme.vars.palette.Alert[`${color}IconColor`]
+      } : {
         color: theme.palette.mode === 'dark' ? theme.palette[color].main : theme.palette[color].light
       }
     }, color && ownerState.variant === 'outlined' && {
-      color: getColor(theme.palette[color].light, 0.6),
-      border: `1px solid ${theme.palette[color].light}`,
-      [`& .${alertClasses$1.icon}`]: {
+      color: theme.vars ? theme.vars.palette.Alert[`${color}Color`] : getColor(theme.palette[color].light, 0.6),
+      border: `1px solid ${(theme.vars || theme).palette[color].light}`,
+      [`& .${alertClasses$1.icon}`]: theme.vars ? {
+        color: theme.vars.palette.Alert[`${color}IconColor`]
+      } : {
         color: theme.palette.mode === 'dark' ? theme.palette[color].main : theme.palette[color].light
       }
-    }, color && ownerState.variant === 'filled' && {
-      color: '#fff',
-      fontWeight: theme.typography.fontWeightMedium,
-      backgroundColor: theme.palette.mode === 'dark' ? theme.palette[color].dark : theme.palette[color].main
-    });
+    }, color && ownerState.variant === 'filled' && _extends({
+      fontWeight: theme.typography.fontWeightMedium
+    }, theme.vars ? {
+      color: theme.vars.palette.Alert[`${color}FilledColor`],
+      backgroundColor: theme.vars.palette.Alert[`${color}FilledBg`]
+    } : {
+      backgroundColor: theme.palette.mode === 'dark' ? theme.palette[color].dark : theme.palette[color].main,
+      color: theme.palette.getContrastText(theme.palette.mode === 'dark' ? theme.palette[color].dark : theme.palette[color].main)
+    }));
   });
   const AlertIcon = styled$1('div', {
     name: 'MuiAlert',
@@ -22430,7 +22999,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     }
   });
   const Autocomplete = /*#__PURE__*/React__namespace.forwardRef(function Autocomplete(inProps, ref) {
-    var _componentsProps$clea, _componentsProps$pape;
+    var _componentsProps$clea, _componentsProps$popu, _componentsProps$popp, _componentsProps$pape;
 
     const props = useThemeProps({
       props: inProps,
@@ -22538,7 +23107,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
     if (multiple && value.length > 0) {
       const getCustomizedTagProps = params => _extends({
-        className: clsx(classes.tag),
+        className: classes.tag,
         disabled
       }, getTagProps(params));
 
@@ -22631,21 +23200,21 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
                 disabled: disabled,
                 "aria-label": popupOpen ? closeText : openText,
                 title: popupOpen ? closeText : openText,
-                className: clsx(classes.popupIndicator),
-                ownerState: ownerState,
+                ownerState: ownerState
+              }, componentsProps.popupIndicator, {
+                className: clsx(classes.popupIndicator, (_componentsProps$popu = componentsProps.popupIndicator) == null ? void 0 : _componentsProps$popu.className),
                 children: popupIcon
               })) : null]
             })
           }),
           inputProps: _extends({
-            className: clsx(classes.input),
+            className: classes.input,
             disabled,
             readOnly
           }, getInputProps())
         })
-      })), popupOpen && anchorEl ? /*#__PURE__*/jsxRuntime_1(AutocompletePopper, {
+      })), popupOpen && anchorEl ? /*#__PURE__*/jsxRuntime_1(AutocompletePopper, _extends({
         as: PopperComponent,
-        className: clsx(classes.popper),
         disablePortal: disablePortal,
         style: {
           width: anchorEl ? anchorEl.clientWidth : null
@@ -22653,7 +23222,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         ownerState: ownerState,
         role: "presentation",
         anchorEl: anchorEl,
-        open: true,
+        open: true
+      }, componentsProps.popper, {
+        className: clsx(classes.popper, (_componentsProps$popp = componentsProps.popper) == null ? void 0 : _componentsProps$popp.className),
         children: /*#__PURE__*/jsxRuntime_2(AutocompletePaper, _extends({
           ownerState: ownerState,
           as: PaperComponent
@@ -22690,7 +23261,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
             })
           })) : null]
         }))
-      }) : null]
+      })) : null]
     });
   });
   Autocomplete.propTypes
@@ -22792,7 +23363,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      */
     componentsProps: PropTypes.shape({
       clearIndicator: PropTypes.object,
-      paper: PropTypes.object
+      paper: PropTypes.object,
+      popper: PropTypes.object,
+      popupIndicator: PropTypes.object
     }),
 
     /**
@@ -23439,7 +24012,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var avatarGroupClasses$1 = avatarGroupClasses;
 
   const _excluded$1L = ["children", "className", "componentsProps", "max", "spacing", "total", "variant"];
-  const SPACINGS$1 = {
+  const SPACINGS$2 = {
     small: -16,
     medium: null
   };
@@ -23535,7 +24108,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     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;
+    const marginLeft = spacing && SPACINGS$2[spacing] !== undefined ? SPACINGS$2[spacing] : -spacing;
     return /*#__PURE__*/jsxRuntime_2(AvatarGroupRoot, _extends({
       ownerState: ownerState,
       className: clsx(classes.root, className),
@@ -27579,11 +28152,11 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         Backdrop: BackdropComponent
       }, components),
       componentsProps: {
-        root: _extends({}, componentsProps.root, !isHostComponent(Root) && {
+        root: () => _extends({}, resolveComponentProps(componentsProps.root, ownerState), !isHostComponent(Root) && {
           as: component,
           theme
         }),
-        backdrop: _extends({}, BackdropProps, componentsProps.backdrop)
+        backdrop: () => _extends({}, BackdropProps, resolveComponentProps(componentsProps.backdrop, ownerState))
       },
       onTransitionEnter: () => setExited(false),
       onTransitionExited: () => setExited(true),
@@ -27660,8 +28233,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * @default {}
      */
     componentsProps: PropTypes.shape({
-      backdrop: PropTypes.object,
-      root: PropTypes.object
+      backdrop: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+      root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
     }),
 
     /**
@@ -29822,7 +30395,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
       },
       '&:before': {
-        borderBottom: `1px solid ${theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / ${theme.vars.opacity.inputTouchBottomLine})` : bottomLineColor}`,
+        borderBottom: `1px solid ${theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / ${theme.vars.opacity.inputUnderline})` : bottomLineColor}`,
         left: 0,
         bottom: 0,
         // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
@@ -31185,15 +31758,15 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   function getGridUtilityClass(slot) {
     return generateUtilityClass('MuiGrid', slot);
   }
-  const SPACINGS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
-  const DIRECTIONS = ['column-reverse', 'column', 'row-reverse', 'row'];
-  const WRAPS = ['nowrap', 'wrap-reverse', 'wrap'];
-  const GRID_SIZES = ['auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+  const SPACINGS$1 = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+  const DIRECTIONS$1 = ['column-reverse', 'column', 'row-reverse', 'row'];
+  const WRAPS$1 = ['nowrap', 'wrap-reverse', 'wrap'];
+  const GRID_SIZES$1 = ['auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
   const gridClasses = generateUtilityClasses('MuiGrid', ['root', 'container', 'item', 'zeroMinWidth', // spacings
-  ...SPACINGS.map(spacing => `spacing-xs-${spacing}`), // direction values
-  ...DIRECTIONS.map(direction => `direction-xs-${direction}`), // wrap values
-  ...WRAPS.map(wrap => `wrap-xs-${wrap}`), // grid sizes for all breakpoints
-  ...GRID_SIZES.map(size => `grid-xs-${size}`), ...GRID_SIZES.map(size => `grid-sm-${size}`), ...GRID_SIZES.map(size => `grid-md-${size}`), ...GRID_SIZES.map(size => `grid-lg-${size}`), ...GRID_SIZES.map(size => `grid-xl-${size}`)]);
+  ...SPACINGS$1.map(spacing => `spacing-xs-${spacing}`), // direction values
+  ...DIRECTIONS$1.map(direction => `direction-xs-${direction}`), // wrap values
+  ...WRAPS$1.map(wrap => `wrap-xs-${wrap}`), // grid sizes for all breakpoints
+  ...GRID_SIZES$1.map(size => `grid-xs-${size}`), ...GRID_SIZES$1.map(size => `grid-sm-${size}`), ...GRID_SIZES$1.map(size => `grid-md-${size}`), ...GRID_SIZES$1.map(size => `grid-lg-${size}`), ...GRID_SIZES$1.map(size => `grid-xl-${size}`)]);
   var gridClasses$1 = gridClasses;
 
   const _excluded$1d = ["className", "columns", "columnSpacing", "component", "container", "direction", "item", "rowSpacing", "spacing", "wrap", "zeroMinWidth"];
@@ -31740,6 +32313,52 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   var Grid$1 = Grid;
 
+  const Grid2 = createGrid({
+    createStyledComponent: styled$1('div', {
+      name: 'MuiGrid2',
+      overridesResolver: (props, styles) => styles.root
+    }),
+    componentName: 'MuiGrid2',
+    // eslint-disable-next-line material-ui/mui-name-matches-component-name
+    useThemeProps: inProps => useThemeProps({
+      props: inProps,
+      name: 'MuiGrid2'
+    })
+  });
+  Grid2.propTypes
+  /* remove-proptypes */
+  = {
+    // ----------------------------- Warning --------------------------------
+    // | These PropTypes are generated from the TypeScript type definitions |
+    // |     To update them edit TypeScript types and run "yarn proptypes"  |
+    // ----------------------------------------------------------------------
+
+    /**
+     * The content of the component.
+     */
+    children: PropTypes.node,
+
+    /**
+     * @ignore
+     */
+    sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+  } ;
+  var Grid2$1 = Grid2;
+
+  function getGrid2UtilityClass(slot) {
+    return generateUtilityClass('MuiGrid2', slot);
+  }
+  const SPACINGS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+  const DIRECTIONS = ['column-reverse', 'column', 'row-reverse', 'row'];
+  const WRAPS = ['nowrap', 'wrap-reverse', 'wrap'];
+  const GRID_SIZES = ['auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+  const grid2Classes = generateUtilityClasses('MuiGrid2', ['root', 'container', 'item', 'zeroMinWidth', // spacings
+  ...SPACINGS.map(spacing => `spacing-xs-${spacing}`), // direction values
+  ...DIRECTIONS.map(direction => `direction-xs-${direction}`), // wrap values
+  ...WRAPS.map(wrap => `wrap-xs-${wrap}`), // grid sizes for all breakpoints
+  ...GRID_SIZES.map(size => `grid-xs-${size}`), ...GRID_SIZES.map(size => `grid-sm-${size}`), ...GRID_SIZES.map(size => `grid-md-${size}`), ...GRID_SIZES.map(size => `grid-lg-${size}`), ...GRID_SIZES.map(size => `grid-xl-${size}`)]);
+  var grid2Classes$1 = grid2Classes;
+
   const _excluded$1c = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
 
   function getScale(value) {
@@ -33529,7 +34148,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     let bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)';
 
     if (theme.vars) {
-      bottomLineColor = `rgba(${theme.vars.palette.common.onBackgroundChannel} / ${theme.vars.opacity.inputTouchBottomLine})`;
+      bottomLineColor = `rgba(${theme.vars.palette.common.onBackgroundChannel} / ${theme.vars.opacity.inputUnderline})`;
     }
 
     return _extends({
@@ -38316,12 +38935,27 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       muiFormControl,
       states: ['required']
     });
+
+    const ownerState = _extends({}, props, {
+      color: fcs.color || 'primary',
+      disabled: fcs.disabled,
+      error: fcs.error,
+      focused: fcs.focused,
+      formControl: muiFormControl,
+      fullWidth,
+      hiddenLabel: fcs.hiddenLabel,
+      multiline,
+      size: fcs.size,
+      type
+    });
+
     return /*#__PURE__*/jsxRuntime_1(InputBase$1, _extends({
       components: _extends({
         Root: OutlinedInputRoot,
         Input: OutlinedInputInput
       }, components),
       renderSuffix: state => /*#__PURE__*/jsxRuntime_1(NotchedOutlineRoot, {
+        ownerState: ownerState,
         className: classes.notchedOutline,
         label: label != null && label !== '' && fcs.required ? _React$Fragment || (_React$Fragment = /*#__PURE__*/jsxRuntime_2(React__namespace.Fragment, {
           children: [label, "\xA0", '*']
@@ -40526,7 +41160,12 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * 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
      */
-    enableColorScheme: PropTypes.bool
+    enableColorScheme: PropTypes.bool,
+
+    /**
+     * 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.bool])), PropTypes.func, PropTypes.object])
   } ;
   var ScopedCssBaseline$1 = ScopedCssBaseline;
 
@@ -41524,7 +42163,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * If the value is an object it must have reference equality with the option in order to be selected.
      * If the value is not an object, the string representation must match with the string representation of the option in order to be selected.
      */
-    value: PropTypes.any,
+    value: PropTypes.oneOfType([PropTypes.oneOf(['']), PropTypes.any]),
 
     /**
      * The variant to use.
@@ -42327,14 +42966,14 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * @default {}
      */
     componentsProps: PropTypes.shape({
-      input: PropTypes.object,
-      mark: PropTypes.object,
-      markLabel: PropTypes.object,
-      rail: PropTypes.object,
-      root: PropTypes.object,
-      thumb: PropTypes.object,
-      track: PropTypes.object,
-      valueLabel: PropTypes.shape({
+      input: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+      mark: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+      markLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+      rail: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+      root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+      thumb: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+      track: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+      valueLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
         children: PropTypes.element,
         className: PropTypes.string,
         components: PropTypes.shape({
@@ -42344,7 +42983,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         style: PropTypes.object,
         value: PropTypes.number,
         valueLabelDisplay: PropTypes.oneOf(['auto', 'off', 'on'])
-      })
+      })])
     }),
 
     /**
@@ -42545,7 +43184,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const emphasis = theme.palette.mode === 'light' ? 0.8 : 0.98;
     const backgroundColor = emphasize(theme.palette.background.default, emphasis);
     return _extends({}, theme.typography.body2, {
-      color: theme.vars ? theme.vars.palette.text.primary : theme.palette.getContrastText(backgroundColor),
+      color: theme.vars ? theme.vars.palette.SnackbarContent.color : theme.palette.getContrastText(backgroundColor),
       backgroundColor: theme.vars ? theme.vars.palette.SnackbarContent.bg : backgroundColor,
       display: 'flex',
       alignItems: 'center',
@@ -44189,12 +44828,15 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const handleEnter = event => {
       if (ignoreNonTouchEvents.current && event.type !== 'touchstart') {
         return;
+      } // Workaround for https://github.com/facebook/react/issues/7769
+
+
+      if (!childNode) {
+        setChildNode(event.currentTarget);
       } // Remove the title ahead of time.
       // We don't want to wait for the next render commit.
       // We would risk displaying two tooltips at the same time (native + this one).
-
-
-      if (childNode) {
+      else {
         childNode.removeAttribute('title');
       }
 
@@ -44239,8 +44881,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
     const handleFocus = event => {
       // Workaround for https://github.com/facebook/react/issues/7769
-      // The autoFocus of React might trigger the event before the componentDidMount.
-      // We need to account for this eventuality.
       if (!childNode) {
         setChildNode(event.currentTarget);
       }
@@ -50265,8 +50905,16 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     });
     React__namespace.useEffect(() => {
       const handleResize = debounce$1(() => {
-        updateIndicatorState();
-        updateScrollButtonState();
+        // If the Tabs component is replaced by Suspense with a fallback, the last
+        // ResizeObserver's handler that runs because of the change in the layout is trying to
+        // access a dom node that is no longer there (as the fallback component is being shown instead).
+        // See https://github.com/mui/material-ui/issues/33276
+        // TODO: Add tests that will ensure the component is not failing when
+        // replaced by Suspense with a fallback, once React is updated to version 18
+        if (tabsRef.current) {
+          updateIndicatorState();
+          updateScrollButtonState();
+        }
       });
       const win = ownerWindow(tabsRef.current);
       win.addEventListener('resize', handleResize);
@@ -51602,7 +52250,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   exports.DialogTitle = DialogTitle$1;
   exports.Divider = Divider$1;
   exports.Drawer = Drawer$1;
-  exports.Experimental_CssVarsProvider = Experimental_CssVarsProvider;
+  exports.Experimental_CssVarsProvider = CssVarsProvider;
   exports.Fab = Fab$1;
   exports.Fade = Fade$1;
   exports.FilledInput = FilledInput$1;
@@ -51704,6 +52352,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   exports.Toolbar = Toolbar$1;
   exports.Tooltip = Tooltip$1;
   exports.Typography = Typography$1;
+  exports.Unstable_Grid2 = Grid2$1;
   exports.Zoom = Zoom$1;
   exports.accordionActionsClasses = accordionActionsClasses$1;
   exports.accordionClasses = accordionClasses$1;
@@ -51816,6 +52465,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   exports.getFormGroupUtilityClass = getFormGroupUtilityClass;
   exports.getFormHelperTextUtilityClasses = getFormHelperTextUtilityClasses;
   exports.getFormLabelUtilityClasses = getFormLabelUtilityClasses;
+  exports.getGrid2UtilityClass = getGrid2UtilityClass;
   exports.getGridUtilityClass = getGridUtilityClass;
   exports.getIconButtonUtilityClass = getIconButtonUtilityClass;
   exports.getIconUtilityClass = getIconUtilityClass;
@@ -51888,6 +52538,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   exports.getTooltipUtilityClass = getTooltipUtilityClass;
   exports.getTouchRippleUtilityClass = getTouchRippleUtilityClass;
   exports.getTypographyUtilityClass = getTypographyUtilityClass;
+  exports.grid2Classes = grid2Classes$1;
   exports.gridClasses = gridClasses$1;
   exports.hexToRgb = hexToRgb;
   exports.hslToRgb = hslToRgb;
@@ -51936,6 +52587,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   exports.scopedCssBaselineClasses = scopedCssBaselineClasses$1;
   exports.selectClasses = selectClasses$1;
   exports.setRef = setRef;
+  exports.shouldSkipGeneratingVar = shouldSkipGeneratingVar;
   exports.skeletonClasses = skeletonClasses$1;
   exports.sliderClasses = sliderClasses;
   exports.snackbarClasses = snackbarClasses$1;