@mui/material 5.8.7 → 5.9.2

package/umd/material-ui.development.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.8.7
+/** @license MUI v5.9.2
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -659,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
@@ -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;
 
@@ -3367,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) {
 
@@ -3381,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') {
@@ -3450,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);
+      }
     }
   }
 
@@ -3468,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
@@ -3482,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') {
@@ -3492,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;
       }
     }
@@ -3506,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;
@@ -3522,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.');
       }
     }
 
@@ -3535,7 +3516,7 @@
     }
 
     switch (type) {
-      case exports.Fragment:
+      case REACT_FRAGMENT_TYPE:
         return 'Fragment';
 
       case REACT_PORTAL_TYPE:
@@ -3552,6 +3533,7 @@
 
       case REACT_SUSPENSE_LIST_TYPE:
         return 'SuspenseList';
+
     }
 
     if (typeof type === 'object') {
@@ -3568,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:
           {
@@ -3580,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.
@@ -3654,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
           })
         });
@@ -3713,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 '';
     }
 
@@ -3822,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') {
@@ -3907,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;
@@ -3927,6 +3920,8 @@
     return '';
   }
 
+  var hasOwnProperty = Object.prototype.hasOwnProperty;
+
   var loggedTypeFailures = {};
   var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
 
@@ -3945,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)) {
@@ -3957,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;
@@ -3990,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,
@@ -4037,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;
         }
@@ -4179,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;
       }
 
@@ -4253,6 +4329,7 @@
    * @final
    */
 
+
   function isValidElement(object) {
     {
       return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
@@ -4262,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 + '`.';
@@ -4342,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);
@@ -4369,7 +4446,7 @@
         return;
       }
 
-      if (Array.isArray(node)) {
+      if (isArray(node)) {
         for (var i = 0; i < node.length; i++) {
           var child = node[i];
 
@@ -4432,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');
       }
@@ -4504,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;
@@ -4533,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);
               }
@@ -4550,7 +4627,7 @@
         }
       }
 
-      if (type === exports.Fragment) {
+      if (type === REACT_FRAGMENT_TYPE) {
         validateFragmentProps(element);
       } else {
         validatePropTypes(element);
@@ -4579,6 +4656,7 @@
 
   var jsxs =  jsxWithValidationStatic ;
 
+  exports.Fragment = REACT_FRAGMENT_TYPE;
   exports.jsx = jsx;
   exports.jsxs = jsxs;
     })();
@@ -5623,7 +5701,7 @@
   function createEmptyBreakpointObject(breakpointsInput = {}) {
     var _breakpointsInput$key;
 
-    const breakpointsInOrder = breakpointsInput == null ? void 0 : (_breakpointsInput$key = breakpointsInput.keys) == null ? void 0 : _breakpointsInput$key.reduce((acc, key) => {
+    const breakpointsInOrder = (_breakpointsInput$key = breakpointsInput.keys) == null ? void 0 : _breakpointsInput$key.reduce((acc, key) => {
       const breakpointStyleKey = breakpointsInput.up(key);
       acc[breakpointStyleKey] = {};
       return acc;
@@ -6461,7 +6539,7 @@
   styleFunctionSx.filterProps = ['sx'];
   var defaultStyleFunctionSx = styleFunctionSx;
 
-  const _excluded$2m = ["sx"];
+  const _excluded$2n = ["sx"];
 
   const splitProps = props => {
     const result = {
@@ -6482,7 +6560,7 @@
     const {
       sx: inSx
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$2m);
+          other = _objectWithoutPropertiesLoose(props, _excluded$2n);
 
     const {
       systemProps,
@@ -6520,48 +6598,9 @@
     });
   }
 
-  function toVal(mix) {
-  	var k, y, 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}
 
-  	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;
-  }
-
-  const _excluded$2l = ["values", "unit", "step"];
+  const _excluded$2m = ["values", "unit", "step"];
 
   const sortBreakpointsValues = values => {
     const breakpointsAsArray = Object.keys(values).map(key => ({
@@ -6597,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);
@@ -6689,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 {
@@ -6698,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);
@@ -6820,7 +6859,7 @@
     return useTheme$2(defaultTheme);
   }
 
-  const _excluded$2j = ["className", "component"];
+  const _excluded$2k = ["className", "component"];
   function createBox(options = {}) {
     const {
       defaultTheme,
@@ -6837,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,
@@ -6849,7 +6888,7 @@
     return Box;
   }
 
-  const _excluded$2i = ["variant"];
+  const _excluded$2j = ["variant"];
 
   function isEmpty$3(string) {
     return string.length === 0;
@@ -6865,7 +6904,7 @@
     const {
       variant
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$2i);
+          other = _objectWithoutPropertiesLoose(props, _excluded$2j);
 
     let classKey = variant || '';
     Object.keys(other).sort().forEach(key => {
@@ -6878,7 +6917,7 @@
     return classKey;
   }
 
-  const _excluded$2h = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"],
+  const _excluded$2i = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"],
         _excluded2$c = ["theme"],
         _excluded3$1 = ["theme"];
 
@@ -6961,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;
@@ -7824,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
@@ -7897,7 +7936,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     });
   }
 
-  const _excluded$2g = ["colorSchemes", "components", "cssVarPrefix"];
+  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 {
@@ -7952,7 +7991,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         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;
@@ -8234,9 +8273,9 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     return getCssVar;
   }
 
-  const _excluded$2f = ["className", "component", "disableGutters", "fixed", "maxWidth", "classes"];
-  const defaultTheme$4 = createTheme$1();
-  const defaultCreateStyledComponent = systemStyled('div', {
+  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) => {
@@ -8247,13 +8286,13 @@ 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) => {
+  const useUtilityClasses$1Q = (ownerState, componentName) => {
     const getContainerUtilityClass = slot => {
       return generateUtilityClass(componentName, slot);
     };
@@ -8273,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(({
@@ -8336,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,
@@ -8346,7 +8385,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       }); // @ts-ignore module augmentation fails if custom breakpoints are used
 
 
-      const classes = useUtilityClasses$1P(ownerState, componentName);
+      const classes = useUtilityClasses$1Q(ownerState, componentName);
       return (
         /*#__PURE__*/
         // @ts-ignore theme is injected by the styled util
@@ -8376,6 +8415,407 @@ 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.disableEqualOverflow && {
+      margin: `calc(var(--Grid-rowSpacing) * -1) 0px 0px calc(var(--Grid-columnSpacing) * -1)`
+    }, ownerState.nested ? _extends({
+      padding: `calc(var(--Grid-nested-rowSpacing) / 2) calc(var(--Grid-nested-columnSpacing) / 2)`
+    }, (ownerState.disableEqualOverflow || ownerState.parentDisableEqualOverflow) && {
+      padding: `calc(var(--Grid-nested-rowSpacing)) 0px 0px calc(var(--Grid-nested-columnSpacing))`
+    }) : {
+      '--Grid-nested-rowSpacing': 'var(--Grid-rowSpacing)',
+      '--Grid-nested-columnSpacing': 'var(--Grid-columnSpacing)'
+    }) : _extends({
+      padding: `calc(var(--Grid-rowSpacing) / 2) calc(var(--Grid-columnSpacing) / 2)`
+    }, ownerState.disableEqualOverflow && {
+      padding: `calc(var(--Grid-rowSpacing)) 0px 0px calc(var(--Grid-columnSpacing))`
+    }));
+  };
+  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", "disableEqualOverflow"];
+  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 OverflowContext = /*#__PURE__*/React__namespace.createContext(undefined);
+
+    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, _ref3, _disableEqualOverflow;
+
+      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 overflow = React__namespace.useContext(OverflowContext);
+
+      const {
+        className,
+        columns: columnsProp = 12,
+        container = false,
+        component = 'div',
+        direction = 'row',
+        wrap = 'wrap',
+        spacing: spacingProp = 0,
+        rowSpacing: rowSpacingProp = spacingProp,
+        columnSpacing: columnSpacingProp = spacingProp,
+        disableEqualOverflow: themeDisableEqualOverflow
+      } = props,
+            rest = _objectWithoutPropertiesLoose(props, _excluded$2f); // Because `disableEqualOverflow` can be set from the theme's defaultProps, the **nested** grid should look at the instance props instead.
+
+
+      let disableEqualOverflow = themeDisableEqualOverflow;
+
+      if (nested && themeDisableEqualOverflow !== undefined) {
+        disableEqualOverflow = inProps.disableEqualOverflow;
+      } // collect breakpoints related props because they can be customized 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,
+        disableEqualOverflow: (_ref3 = (_disableEqualOverflow = disableEqualOverflow) != null ? _disableEqualOverflow : overflow) != null ? _ref3 : false,
+        // use context value if exists.
+        parentDisableEqualOverflow: overflow // for nested grid
+
+      });
+
+      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
+        });
+      }
+
+      if (disableEqualOverflow !== undefined && disableEqualOverflow !== (overflow != null ? overflow : false)) {
+        // There are 2 possibilities that should wrap with the OverflowContext to communicate with the nested grids:
+        // 1. It is the root grid with `disableEqualOverflow`.
+        // 2. It is a nested grid with different `disableEqualOverflow` from the context.
+        result = /*#__PURE__*/jsxRuntime_1(OverflowContext.Provider, {
+          value: disableEqualOverflow,
+          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]),
+      disableEqualOverflow: PropTypes.bool,
+      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) {
@@ -8586,8 +9026,12 @@ 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 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);
 
@@ -8627,11 +9071,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;
   }
@@ -9199,7 +9647,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         option
       });
 
-      if (!disableCloseOnSelect && !event.ctrlKey && !event.metaKey) {
+      if (!disableCloseOnSelect && (!event || !event.ctrlKey && !event.metaKey)) {
         handleClose(event, reason);
       }
 
@@ -9711,7 +10159,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
 
   const _excluded$2c = ["badgeContent", "component", "children", "components", "componentsProps", "invisible", "max", "showZero"];
 
-  const useUtilityClasses$1O = ownerState => {
+  const useUtilityClasses$1P = ownerState => {
     const {
       invisible
     } = ownerState;
@@ -9760,7 +10208,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       showZero
     });
 
-    const classes = useUtilityClasses$1O(ownerState);
+    const classes = useUtilityClasses$1P(ownerState);
     const Root = component || components.Root || 'span';
     const rootProps = useSlotProps({
       elementType: Root,
@@ -12079,7 +12527,12 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
 
   var Portal$1 = Portal;
 
-  const _excluded$2b = ["anchorEl", "children", "direction", "disablePortal", "modifiers", "open", "ownerState", "placement", "popperOptions", "popperRef", "TransitionProps"],
+  function getPopperUnstyledUtilityClass(slot) {
+    return generateUtilityClass('MuiPopperUnstyled', slot);
+  }
+  generateUtilityClasses('MuiPopperUnstyled', ['root']);
+
+  const _excluded$2b = ["anchorEl", "children", "component", "components", "componentsProps", "direction", "disablePortal", "modifiers", "open", "ownerState", "placement", "popperOptions", "popperRef", "TransitionProps"],
         _excluded2$a = ["anchorEl", "children", "container", "direction", "disablePortal", "keepMounted", "modifiers", "open", "placement", "popperOptions", "popperRef", "style", "transition"];
 
   function flipPlacement(placement, direction) {
@@ -12109,17 +12562,30 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     return typeof anchorEl === 'function' ? anchorEl() : anchorEl;
   }
 
+  const useUtilityClasses$1O = () => {
+    const slots = {
+      root: ['root']
+    };
+    return composeClasses(slots, getPopperUnstyledUtilityClass, {});
+  };
+
   const defaultPopperOptions = {};
   /* eslint-disable react/prop-types */
 
   const PopperTooltip = /*#__PURE__*/React__namespace.forwardRef(function PopperTooltip(props, ref) {
+    var _ref;
+
     const {
       anchorEl,
       children,
+      component,
+      components = {},
+      componentsProps = {},
       direction,
       disablePortal,
       modifiers,
       open,
+      ownerState,
       placement: initialPlacement,
       popperOptions,
       popperRef: popperRefProp,
@@ -12217,10 +12683,20 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       childProps.TransitionProps = TransitionProps;
     }
 
-    return /*#__PURE__*/jsxRuntime_1("div", _extends({
-      ref: ownRef,
-      role: "tooltip"
-    }, other, {
+    const classes = useUtilityClasses$1O();
+    const Root = (_ref = component != null ? component : components.Root) != null ? _ref : 'div';
+    const rootProps = useSlotProps({
+      elementType: Root,
+      externalSlotProps: componentsProps.root,
+      externalForwardedProps: other,
+      additionalProps: {
+        role: 'tooltip',
+        ref: ownRef
+      },
+      ownerState: _extends({}, props, ownerState),
+      className: classes.root
+    });
+    return /*#__PURE__*/jsxRuntime_1(Root, _extends({}, rootProps, {
       children: typeof children === 'function' ? children(childProps) : children
     }));
   });
@@ -12336,6 +12812,23 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     /* @typescript-to-proptypes-ignore */
     .oneOfType([PropTypes.node, PropTypes.func]),
 
+    /**
+     * The components used for each slot inside the Popper.
+     * Either a string to use a HTML element or a component.
+     * @default {}
+     */
+    components: PropTypes.shape({
+      Root: PropTypes.elementType
+    }),
+
+    /**
+     * The props used for each slot inside the Popper.
+     * @default {}
+     */
+    componentsProps: PropTypes.shape({
+      root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+    }),
+
     /**
      * An HTML element or function that returns one.
      * The `container` will have the portal children appended to it.
@@ -13034,7 +13527,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 {
@@ -13074,12 +13567,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 = {},
@@ -13185,10 +13677,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);
 
@@ -13261,19 +13749,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,
@@ -13308,11 +13811,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
@@ -13340,8 +13838,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])
     }),
 
     /**
@@ -18737,7 +19235,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         const {
           clientX,
           clientY
-        } = event.touches ? event.touches[0] : event;
+        } = event.touches && event.touches.length > 0 ? event.touches[0] : event;
         rippleX = Math.round(clientX - rect.left);
         rippleY = Math.round(clientY - rect.top);
       }
@@ -20641,6 +21139,30 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /* @typescript-to-proptypes-ignore */
     .oneOfType([PropTypes.node, PropTypes.func]),
 
+    /**
+     * @ignore
+     */
+    component: PropTypes
+    /* @typescript-to-proptypes-ignore */
+    .elementType,
+
+    /**
+     * The components used for each slot inside the Popper.
+     * Either a string to use a HTML element or a component.
+     * @default {}
+     */
+    components: PropTypes.shape({
+      Root: PropTypes.elementType
+    }),
+
+    /**
+     * The props used for each slot inside the Popper.
+     * @default {}
+     */
+    componentsProps: PropTypes.shape({
+      root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+    }),
+
     /**
      * An HTML element or function that returns one.
      * The `container` will have the portal children appended to it.
@@ -22685,7 +23207,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));
 
@@ -22786,7 +23308,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
             })
           }),
           inputProps: _extends({
-            className: clsx(classes.input),
+            className: classes.input,
             disabled,
             readOnly
           }, getInputProps())
@@ -23590,7 +24112,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
   };
@@ -23686,7 +24208,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),
@@ -27730,11 +28252,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),
@@ -27755,7 +28277,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
     /**
      * A backdrop component. This prop enables custom backdrop rendering.
-     * @deprecated Use `components.Backdrop` instead.
+     * @deprecated Use `components.Backdrop` instead. While this prop currently works, it will be removed in the next major version.
+     * Use the `components.Backdrop` prop to make your application ready for the next version of Material UI.
      * @default styled(Backdrop, {
      *   name: 'MuiModal',
      *   slot: 'Backdrop',
@@ -27811,8 +28334,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])
     }),
 
     /**
@@ -28201,7 +28724,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
     /**
      * A backdrop component. This prop enables custom backdrop rendering.
-     * @deprecated Use `components.Backdrop` instead.
+     * @deprecated Use `components.Backdrop` instead. While this prop currently works, it will be removed in the next major version.
+     * Use the `components.Backdrop` prop to make your application ready for the next version of Material UI.
      * @default styled(Backdrop, {
      *   name: 'MuiModal',
      *   slot: 'Backdrop',
@@ -31139,7 +31663,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * The variant to use.
      */
-    variant: PropTypes.oneOf(['filled', 'outlined', 'standard'])
+    variant: PropTypes
+    /* @typescript-to-proptypes-ignore */
+    .oneOfType([PropTypes.oneOf(['filled', 'outlined', 'standard']), PropTypes.string])
   } ;
   var FormHelperText$1 = FormHelperText;
 
@@ -31336,15 +31862,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"];
@@ -31891,6 +32417,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) {
@@ -33268,9 +33840,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   })(({
     ownerState
   }) => _extends({
-    display: 'inline-block',
-    position: 'relative',
-    lineHeight: 0
+    display: 'block',
+    position: 'relative'
   }, ownerState.variant === 'standard' && {
     // For titlebar under list item
     display: 'flex',
@@ -33285,7 +33856,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     [`& .${imageListItemClasses$1.img}`]: _extends({
       objectFit: 'cover',
       width: '100%',
-      height: '100%'
+      height: '100%',
+      display: 'block'
     }, ownerState.variant === 'standard' && {
       height: 'auto',
       flexGrow: 1
@@ -40692,7 +41264,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;
 
@@ -42201,7 +42778,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     transition: theme.transitions.create(['transform'], {
       duration: theme.transitions.duration.shortest
     }),
-    transformOrigin: 'bottom center',
     transform: 'translateY(-100%) scale(0)',
     position: 'absolute',
     backgroundColor: (theme.vars || theme).palette.grey[600],
@@ -42213,6 +42789,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     padding: '0.25rem 0.75rem'
   }, ownerState.orientation === 'horizontal' && {
     top: '-10px',
+    transformOrigin: 'bottom center',
     '&:before': {
       position: 'absolute',
       content: '""',
@@ -42225,7 +42802,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     }
   }, ownerState.orientation === 'vertical' && {
     right: '30px',
-    top: '25px',
+    top: '24px',
+    transformOrigin: 'right center',
     '&:before': {
       position: 'absolute',
       content: '""',
@@ -45286,7 +45864,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     theme
   }) => {
     let styles = _extends({
-      display: 'flex'
+      display: 'flex',
+      flexDirection: 'column'
     }, handleBreakpoints({
       theme
     }, resolveBreakpointValues({
@@ -45314,6 +45893,17 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         base
       });
 
+      if (typeof directionValues === 'object') {
+        Object.keys(directionValues).forEach((breakpoint, index, breakpoints) => {
+          const directionValue = directionValues[breakpoint];
+
+          if (!directionValue) {
+            const previousDirectionValue = index > 0 ? directionValues[breakpoints[index - 1]] : 'column';
+            directionValues[breakpoint] = previousDirectionValue;
+          }
+        });
+      }
+
       const styleFromPropValue = (propValue, breakpoint) => {
         return {
           '& > :not(style) + :not(style)': {
@@ -50662,7 +51252,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * Determines the color of the indicator.
      * @default 'primary'
      */
-    indicatorColor: PropTypes.oneOf(['primary', 'secondary']),
+    indicatorColor: PropTypes
+    /* @typescript-to-proptypes-ignore */
+    .oneOfType([PropTypes.oneOf(['primary', 'secondary']), PropTypes.string]),
 
     /**
      * Callback fired when the value changes.
@@ -51878,6 +52470,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;
@@ -51990,6 +52583,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;
@@ -52062,6 +52656,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;