@mui/material 5.0.6 → 5.2.1

package/umd/material-ui.development.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.0.6
+/** @license MUI v5.2.1
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -497,7 +497,7 @@
     };
   }
 
-  var reactPropsRegex = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|download|draggable|encType|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|translate|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|fallback|inert|itemProp|itemScope|itemType|itemID|itemRef|on|option|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/; // https://esbench.com/bench/5bfee68a4cd7e6009ef61d23
+  var reactPropsRegex = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|download|draggable|encType|enterKeyHint|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|translate|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|incremental|fallback|inert|itemProp|itemScope|itemType|itemID|itemRef|on|option|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/; // https://esbench.com/bench/5bfee68a4cd7e6009ef61d23
 
   var isPropValid = /* #__PURE__ */memoize$1(function (prop) {
     return reactPropsRegex.test(prop) || prop.charCodeAt(0) === 111
@@ -570,7 +570,13 @@
         var before;
 
         if (_this.tags.length === 0) {
-          before = _this.prepend ? _this.container.firstChild : _this.before;
+          if (_this.insertionPoint) {
+            before = _this.insertionPoint.nextSibling;
+          } else if (_this.prepend) {
+            before = _this.container.firstChild;
+          } else {
+            before = _this.before;
+          }
         } else {
           before = _this.tags[_this.tags.length - 1].nextSibling;
         }
@@ -588,6 +594,7 @@
       this.key = options.key;
       this.container = options.container;
       this.prepend = options.prepend;
+      this.insertionPoint = options.insertionPoint;
       this.before = null;
     }
 
@@ -1034,7 +1041,8 @@
         container: container,
         nonce: options.nonce,
         speedy: options.speedy,
-        prepend: options.prepend
+        prepend: options.prepend,
+        insertionPoint: options.insertionPoint
       }),
       nonce: options.nonce,
       inserted: inserted,
@@ -1866,7 +1874,7 @@
   };
 
   var isBrowser$2 = typeof document !== 'undefined';
-  var hasOwnProperty$1 = Object.prototype.hasOwnProperty;
+  var hasOwnProperty$1 = {}.hasOwnProperty;
 
   var EmotionCacheContext = /* #__PURE__ */React.createContext( // we're doing this to avoid preconstruct's dead code elimination in this one case
   // because this module is primarily intended for the browser and node
@@ -1925,6 +1933,11 @@
 
   var typePropName = '__EMOTION_TYPE_PLEASE_DO_NOT_USE__';
   var labelPropName = '__EMOTION_LABEL_PLEASE_DO_NOT_USE__';
+
+  var Noop$2 = function Noop() {
+    return null;
+  };
+
   var Emotion = /* #__PURE__ */withEmotionCache(function (props, cache, ref) {
     var cssProp = props.css; // so that using `css` from `emotion` and passing the result to the css prop works
     // not passing the registered cache to serializeStyles because it would
@@ -1967,6 +1980,7 @@
     newProps.ref = ref;
     newProps.className = className;
     var ele = /*#__PURE__*/React.createElement(type, newProps);
+    var possiblyStyleElement = /*#__PURE__*/React.createElement(Noop$2, null);
 
     if (!isBrowser$2 && rules !== undefined) {
       var _ref;
@@ -1979,12 +1993,13 @@
         next = next.next;
       }
 
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("style", (_ref = {}, _ref["data-emotion"] = cache.key + " " + serializedNames, _ref.dangerouslySetInnerHTML = {
+      possiblyStyleElement = /*#__PURE__*/React.createElement("style", (_ref = {}, _ref["data-emotion"] = cache.key + " " + serializedNames, _ref.dangerouslySetInnerHTML = {
         __html: rules
-      }, _ref.nonce = cache.sheet.nonce, _ref)), ele);
-    }
+      }, _ref.nonce = cache.sheet.nonce, _ref));
+    } // Need to return the same number of siblings or else `React.useId` will cause hydration mismatches.
 
-    return ele;
+
+    return /*#__PURE__*/React.createElement(React.Fragment, null, possiblyStyleElement, ele);
   });
 
   {
@@ -1993,7 +2008,7 @@
 
   var pkg = {
   	name: "@emotion/react",
-  	version: "11.5.0",
+  	version: "11.6.0",
   	main: "dist/emotion-react.cjs.js",
   	module: "dist/emotion-react.esm.js",
   	browser: {
@@ -2006,7 +2021,7 @@
   		"dist",
   		"jsx-runtime",
   		"jsx-dev-runtime",
-  		"isolated-hoist-non-react-statics-do-not-use-this-in-your-code",
+  		"_isolated-hnrs",
   		"types/*.d.ts",
   		"macro.js",
   		"macro.d.ts",
@@ -2020,9 +2035,9 @@
   	},
   	dependencies: {
   		"@babel/runtime": "^7.13.10",
-  		"@emotion/cache": "^11.5.0",
+  		"@emotion/cache": "^11.6.0",
   		"@emotion/serialize": "^1.0.2",
-  		"@emotion/sheet": "^1.0.3",
+  		"@emotion/sheet": "^1.1.0",
   		"@emotion/utils": "^1.0.0",
   		"@emotion/weak-memoize": "^0.2.5",
   		"hoist-non-react-statics": "^3.3.1"
@@ -2044,7 +2059,7 @@
   		"@emotion/css": "11.5.0",
   		"@emotion/css-prettifier": "1.0.0",
   		"@emotion/server": "11.4.0",
-  		"@emotion/styled": "11.3.0",
+  		"@emotion/styled": "11.6.0",
   		"@types/react": "^16.9.11",
   		dtslint: "^0.3.0",
   		"html-tag-names": "^1.1.2",
@@ -2061,7 +2076,7 @@
   			"./index.js",
   			"./jsx-runtime.js",
   			"./jsx-dev-runtime.js",
-  			"./isolated-hoist-non-react-statics-do-not-use-this-in-your-code.js"
+  			"./_isolated-hnrs.js"
   		],
   		umdName: "emotionReact"
   	}
@@ -2260,6 +2275,10 @@
     return rawClassName + css(registeredStyles);
   }
 
+  var Noop$1 = function Noop() {
+    return null;
+  };
+
   var ClassNames = /* #__PURE__ */withEmotionCache(function (props, cache) {
     var rules = '';
     var serializedHashes = '';
@@ -2312,16 +2331,18 @@
     };
     var ele = props.children(content);
     hasRendered = true;
+    var possiblyStyleElement = /*#__PURE__*/React.createElement(Noop$1, null);
 
     if (!isBrowser$2 && rules.length !== 0) {
       var _ref;
 
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("style", (_ref = {}, _ref["data-emotion"] = cache.key + " " + serializedHashes.substring(1), _ref.dangerouslySetInnerHTML = {
+      possiblyStyleElement = /*#__PURE__*/React.createElement("style", (_ref = {}, _ref["data-emotion"] = cache.key + " " + serializedHashes.substring(1), _ref.dangerouslySetInnerHTML = {
         __html: rules
-      }, _ref.nonce = cache.sheet.nonce, _ref)), ele);
-    }
+      }, _ref.nonce = cache.sheet.nonce, _ref));
+    } // Need to return the same number of siblings or else `React.useId` will cause hydration mismatches.
+
 
-    return ele;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, possiblyStyleElement, ele);
   });
 
   {
@@ -2380,6 +2401,10 @@
   var ILLEGAL_ESCAPE_SEQUENCE_ERROR = "You have illegal escape sequence in your template literal, most likely inside content's property value.\nBecause you write your CSS inside a JavaScript string you actually have to do double escaping, so for example \"content: '\\00d7';\" should become \"content: '\\\\00d7';\".\nYou can read more about this here:\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences";
   var isBrowser = typeof document !== 'undefined';
 
+  var Noop = function Noop() {
+    return null;
+  };
+
   var createStyled$1 = function createStyled(tag, options) {
     {
       if (tag === undefined) {
@@ -2474,6 +2499,7 @@
         newProps.className = className;
         newProps.ref = ref;
         var ele = /*#__PURE__*/React.createElement(finalTag, newProps);
+        var possiblyStyleElement = /*#__PURE__*/React.createElement(Noop, null);
 
         if (!isBrowser && rules !== undefined) {
           var _ref;
@@ -2486,12 +2512,13 @@
             next = next.next;
           }
 
-          return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("style", (_ref = {}, _ref["data-emotion"] = cache.key + " " + serializedNames, _ref.dangerouslySetInnerHTML = {
+          possiblyStyleElement = /*#__PURE__*/React.createElement("style", (_ref = {}, _ref["data-emotion"] = cache.key + " " + serializedNames, _ref.dangerouslySetInnerHTML = {
             __html: rules
-          }, _ref.nonce = cache.sheet.nonce, _ref)), ele);
-        }
+          }, _ref.nonce = cache.sheet.nonce, _ref));
+        } // Need to return the same number of siblings or else `React.useId` will cause hydration mismatches.
 
-        return ele;
+
+        return /*#__PURE__*/React.createElement(React.Fragment, null, possiblyStyleElement, ele);
       });
       Styled.displayName = identifierName !== undefined ? identifierName : "Styled(" + (typeof baseTag === 'string' ? baseTag : baseTag.displayName || baseTag.name || 'Component') + ")";
       Styled.defaultProps = tag.defaultProps;
@@ -4632,9 +4659,7 @@
   }
 
   function isPlainObject(item) {
-    return item !== null && typeof item === 'object' && // TS thinks `item is possibly null` even though this was our first guard.
-    // @ts-expect-error
-    item.constructor === Object;
+    return item !== null && typeof item === 'object' && item.constructor === Object;
   }
   function deepmerge(target, source, options = {
     clone: true
@@ -5423,12 +5448,12 @@
     xs: 0,
     // phone
     sm: 600,
-    // tablets
+    // tablet
     md: 900,
     // small laptop
     lg: 1200,
     // desktop
-    xl: 1536 // large screens
+    xl: 1536 // large screen
 
   };
   const defaultBreakpoints = {
@@ -5481,7 +5506,7 @@
   function removeUnusedBreakpoints(breakpointKeys, style) {
     return breakpointKeys.reduce((acc, key) => {
       const breakpointOutput = acc[key];
-      const isBreakpointUnused = Object.keys(breakpointOutput).length === 0;
+      const isBreakpointUnused = !breakpointOutput || Object.keys(breakpointOutput).length === 0;
 
       if (isBreakpointUnused) {
         delete acc[key];
@@ -5490,10 +5515,40 @@
       return acc;
     }, style);
   }
+  // [1,2,3] => {xs: true, sm: true, md: true}
+  // {xs: 1, sm: 2, md: 3} => {xs: true, sm: true, md: true}
+
+  function computeBreakpointsBase(breakpointValues, themeBreakpoints) {
+    // fixed value
+    if (typeof breakpointValues !== 'object') {
+      return {};
+    }
+
+    const base = {};
+    const breakpointsKeys = Object.keys(themeBreakpoints);
+
+    if (Array.isArray(breakpointValues)) {
+      breakpointsKeys.forEach((breakpoint, i) => {
+        if (i < breakpointValues.length) {
+          base[breakpoint] = true;
+        }
+      });
+    } else {
+      breakpointsKeys.forEach(breakpoint => {
+        if (breakpointValues[breakpoint] != null) {
+          base[breakpoint] = true;
+        }
+      });
+    }
+
+    return base;
+  }
   function resolveBreakpointValues({
     values: breakpointValues,
-    base
+    breakpoints: themeBreakpoints,
+    base: customBase
   }) {
+    const base = customBase || computeBreakpointsBase(breakpointValues, themeBreakpoints);
     const keys = Object.keys(base);
 
     if (keys.length === 0) {
@@ -5501,14 +5556,15 @@
     }
 
     let previous;
-    return keys.reduce((acc, breakpoint) => {
-      if (typeof breakpointValues === 'object') {
-        acc[breakpoint] = breakpointValues[breakpoint] != null ? breakpointValues[breakpoint] : breakpointValues[previous];
+    return keys.reduce((acc, breakpoint, i) => {
+      if (Array.isArray(breakpointValues)) {
+        acc[breakpoint] = breakpointValues[i] != null ? breakpointValues[i] : breakpointValues[previous];
+        previous = i;
       } else {
-        acc[breakpoint] = breakpointValues;
+        acc[breakpoint] = breakpointValues[breakpoint] != null ? breakpointValues[breakpoint] : breakpointValues[previous] || breakpointValues;
+        previous = breakpoint;
       }
 
-      previous = breakpoint;
       return acc;
     }, {});
   }
@@ -6176,58 +6232,70 @@
 
   function styleFunctionSx(props) {
     const {
-      sx: styles,
+      sx,
       theme = {}
     } = props || {};
 
-    if (!styles) {
-      return null;
+    if (!sx) {
+      return null; // emotion & styled-components will neglect null
     }
+    /*
+     * Receive `sxInput` as object or callback
+     * and then recursively check keys & values to create media query object styles.
+     * (the result will be used in `styled`)
+     */
 
-    let stylesObject = styles;
 
-    if (typeof styles === 'function') {
-      stylesObject = styles(theme);
-    } else if (typeof styles !== 'object') {
-      // value
-      return styles;
-    }
+    function traverse(sxInput) {
+      let sxObject = sxInput;
 
-    const emptyBreakpoints = createEmptyBreakpointObject(theme.breakpoints);
-    const breakpointsKeys = Object.keys(emptyBreakpoints);
-    let css = emptyBreakpoints;
-    Object.keys(stylesObject).forEach(styleKey => {
-      const value = callIfFn(stylesObject[styleKey], theme);
+      if (typeof sxInput === 'function') {
+        sxObject = sxInput(theme);
+      } else if (typeof sxInput !== 'object') {
+        // value
+        return sxInput;
+      }
 
-      if (typeof value === 'object') {
-        if (propToStyleFunction[styleKey]) {
-          css = merge(css, getThemeValue(styleKey, value, theme));
-        } else {
-          const breakpointsValues = handleBreakpoints({
-            theme
-          }, value, x => ({
-            [styleKey]: x
-          }));
+      const emptyBreakpoints = createEmptyBreakpointObject(theme.breakpoints);
+      const breakpointsKeys = Object.keys(emptyBreakpoints);
+      let css = emptyBreakpoints;
+      Object.keys(sxObject).forEach(styleKey => {
+        const value = callIfFn(sxObject[styleKey], theme);
 
-          if (objectsHaveSameKeys(breakpointsValues, value)) {
-            css[styleKey] = styleFunctionSx({
-              sx: value,
-              theme
-            });
+        if (value !== null && value !== undefined) {
+          if (typeof value === 'object') {
+            if (propToStyleFunction[styleKey]) {
+              css = merge(css, getThemeValue(styleKey, value, theme));
+            } else {
+              const breakpointsValues = handleBreakpoints({
+                theme
+              }, value, x => ({
+                [styleKey]: x
+              }));
+
+              if (objectsHaveSameKeys(breakpointsValues, value)) {
+                css[styleKey] = styleFunctionSx({
+                  sx: value,
+                  theme
+                });
+              } else {
+                css = merge(css, breakpointsValues);
+              }
+            }
           } else {
-            css = merge(css, breakpointsValues);
+            css = merge(css, getThemeValue(styleKey, value, theme));
           }
         }
-      } else {
-        css = merge(css, getThemeValue(styleKey, value, theme));
-      }
-    });
-    return removeUnusedBreakpoints(breakpointsKeys, css);
+      });
+      return removeUnusedBreakpoints(breakpointsKeys, css);
+    }
+
+    return Array.isArray(sx) ? sx.map(traverse) : traverse(sx);
   }
 
   styleFunctionSx.filterProps = ['sx'];
 
-  const _excluded$2o = ["sx"];
+  const _excluded$2t = ["sx"];
 
   const splitProps = props => {
     const result = {
@@ -6248,14 +6316,41 @@
     const {
       sx: inSx
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$2o);
+          other = _objectWithoutPropertiesLoose(props, _excluded$2t);
 
     const {
       systemProps,
       otherProps
     } = splitProps(other);
+    let finalSx;
+
+    if (Array.isArray(inSx)) {
+      finalSx = [systemProps, ...inSx];
+    } else if (typeof inSx === 'function') {
+      finalSx = (...args) => {
+        const result = inSx(...args);
+
+        if (!isPlainObject(result)) {
+          return systemProps;
+        }
+
+        return _extends({}, systemProps, result);
+      };
+    } else {
+      finalSx = _extends({}, systemProps, inSx);
+    }
+
     return _extends({}, otherProps, {
-      sx: _extends({}, systemProps, inSx)
+      sx: finalSx
+    });
+  }
+
+  function sx(styles) {
+    return ({
+      theme
+    }) => styleFunctionSx({
+      sx: styles,
+      theme
     });
   }
 
@@ -6300,7 +6395,7 @@
   	return str;
   }
 
-  const _excluded$2n = ["values", "unit", "step"];
+  const _excluded$2s = ["values", "unit", "step"];
 
   function createBreakpoints(breakpoints) {
     const {
@@ -6310,18 +6405,18 @@
         xs: 0,
         // phone
         sm: 600,
-        // tablets
+        // tablet
         md: 900,
         // small laptop
         lg: 1200,
         // desktop
-        xl: 1536 // large screens
+        xl: 1536 // large screen
 
       },
       unit = 'px',
       step = 5
     } = breakpoints,
-          other = _objectWithoutPropertiesLoose(breakpoints, _excluded$2n);
+          other = _objectWithoutPropertiesLoose(breakpoints, _excluded$2s);
 
     const keys = Object.keys(values);
 
@@ -6396,7 +6491,7 @@
     return spacing;
   }
 
-  const _excluded$2m = ["breakpoints", "palette", "spacing", "shape"];
+  const _excluded$2r = ["breakpoints", "palette", "spacing", "shape"];
 
   function createTheme$1(options = {}, ...args) {
     const {
@@ -6405,7 +6500,7 @@
       spacing: spacingInput,
       shape: shapeInput = {}
     } = options,
-          other = _objectWithoutPropertiesLoose(options, _excluded$2m);
+          other = _objectWithoutPropertiesLoose(options, _excluded$2r);
 
     const breakpoints = createBreakpoints(breakpointsInput);
     const spacing = createSpacing(spacingInput);
@@ -6527,10 +6622,12 @@
     return useTheme$2(defaultTheme);
   }
 
-  const _excluded$2l = ["className", "component"];
+  const _excluded$2q = ["className", "component"];
   function createBox(options = {}) {
     const {
-      defaultTheme
+      defaultTheme,
+      defaultClassName = 'MuiBox-root',
+      generateClassName
     } = options;
     const BoxRoot = styled$2('div')(styleFunctionSx);
     const Box = /*#__PURE__*/React__namespace.forwardRef(function Box(inProps, ref) {
@@ -6541,12 +6638,12 @@
         className,
         component = 'div'
       } = _extendSxProp,
-            other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$2l);
+            other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$2q);
 
       return /*#__PURE__*/jsxRuntime_1(BoxRoot, _extends({
         as: component,
         ref: ref,
-        className: clsx(className, 'MuiBox-root'),
+        className: clsx(className, generateClassName ? generateClassName(defaultClassName) : defaultClassName),
         theme: theme
       }, other));
     });
@@ -6572,12 +6669,12 @@
       /**
        * @ignore
        */
-      sx: propTypes.object
+      sx: propTypes.oneOfType([propTypes.object, propTypes.array, propTypes.func])
     } ;
     return Box;
   }
 
-  const _excluded$2k = ["variant"];
+  const _excluded$2p = ["variant"];
 
   function isEmpty$2(string) {
     return string.length === 0;
@@ -6593,7 +6690,7 @@
     const {
       variant
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$2k);
+          other = _objectWithoutPropertiesLoose(props, _excluded$2p);
 
     let classKey = variant || '';
     Object.keys(other).sort().forEach(key => {
@@ -6606,8 +6703,8 @@
     return classKey;
   }
 
-  const _excluded$2j = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"],
-        _excluded2$c = ["theme"],
+  const _excluded$2o = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"],
+        _excluded2$b = ["theme"],
         _excluded3$1 = ["theme"];
 
   function isEmpty$1(obj) {
@@ -6687,7 +6784,7 @@
         skipSx: inputSkipSx,
         overridesResolver
       } = inputOptions,
-            options = _objectWithoutPropertiesLoose(inputOptions, _excluded$2j); // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
+            options = _objectWithoutPropertiesLoose(inputOptions, _excluded$2o); // 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;
@@ -6724,7 +6821,7 @@
             let {
               theme: themeInput
             } = _ref,
-                other = _objectWithoutPropertiesLoose(_ref, _excluded2$c);
+                other = _objectWithoutPropertiesLoose(_ref, _excluded2$b);
 
             return stylesArg(_extends({
               theme: isEmpty$1(themeInput) ? defaultTheme : themeInput
@@ -7189,8 +7286,8 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     ThemeProvider.propTypes = exactProp(ThemeProvider.propTypes) ;
   }
 
-  const _excluded$2i = ["defaultProps", "mixins", "overrides", "palette", "props", "styleOverrides"],
-        _excluded2$b = ["type", "mode"];
+  const _excluded$2n = ["defaultProps", "mixins", "overrides", "palette", "props", "styleOverrides"],
+        _excluded2$a = ["type", "mode"];
   function adaptV4Theme(inputTheme) {
     {
       console.warn(['MUI: adaptV4Theme() is deprecated.', 'Follow the upgrade guide on https://mui.com/r/migration-v4#theme.'].join('\n'));
@@ -7204,7 +7301,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       props = {},
       styleOverrides = {}
     } = inputTheme,
-          other = _objectWithoutPropertiesLoose(inputTheme, _excluded$2i);
+          other = _objectWithoutPropertiesLoose(inputTheme, _excluded$2n);
 
     const theme = _extends({}, other, {
       components: {}
@@ -7255,7 +7352,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       type: typeInput,
       mode: modeInput
     } = palette,
-          paletteRest = _objectWithoutPropertiesLoose(palette, _excluded2$b);
+          paletteRest = _objectWithoutPropertiesLoose(palette, _excluded2$a);
 
     const finalMode = modeInput || typeInput || 'light';
     theme.palette = _extends({
@@ -8375,9 +8472,9 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
   const backdropUnstyledClasses = generateUtilityClasses('MuiBackdrop', ['root', 'invisible']);
   var backdropUnstyledClasses$1 = backdropUnstyledClasses;
 
-  const _excluded$2h = ["classes", "className", "invisible", "component", "components", "componentsProps", "theme"];
+  const _excluded$2m = ["classes", "className", "invisible", "component", "components", "componentsProps", "theme"];
 
-  const useUtilityClasses$1P = ownerState => {
+  const useUtilityClasses$1T = ownerState => {
     const {
       classes,
       invisible
@@ -8400,14 +8497,14 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       /* eslint-disable react/prop-types */
       theme
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$2h);
+          other = _objectWithoutPropertiesLoose(props, _excluded$2m);
 
     const ownerState = _extends({}, props, {
       classes: classesProp,
       invisible
     });
 
-    const classes = useUtilityClasses$1P(ownerState);
+    const classes = useUtilityClasses$1T(ownerState);
     const Root = components.Root || component;
     const rootProps = componentsProps.root || {};
     return /*#__PURE__*/jsxRuntime_1(Root, _extends({
@@ -8481,9 +8578,9 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
   const badgeUnstyledClasses = generateUtilityClasses('MuiBadge', ['root', 'badge', 'dot', 'standard', 'anchorOriginTopLeftCircular', 'anchorOriginTopLeftRectangular', 'anchorOriginTopRightCircular', 'anchorOriginTopRightRectangular', 'anchorOriginBottomLeftCircular', 'anchorOriginBottomLeftRectangular', 'anchorOriginBottomRightCircular', 'anchorOriginBottomRightRectangular', 'invisible']);
   var badgeUnstyledClasses$1 = badgeUnstyledClasses;
 
-  const _excluded$2g = ["anchorOrigin", "classes", "badgeContent", "component", "children", "className", "components", "componentsProps", "invisible", "max", "overlap", "showZero", "variant", "theme"];
+  const _excluded$2l = ["anchorOrigin", "classes", "badgeContent", "component", "children", "className", "components", "componentsProps", "invisible", "max", "overlap", "showZero", "variant", "theme"];
 
-  const useUtilityClasses$1O = ownerState => {
+  const useUtilityClasses$1S = ownerState => {
     const {
       variant,
       anchorOrigin,
@@ -8520,7 +8617,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       /* eslint-disable react/prop-types */
       theme
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$2g);
+          other = _objectWithoutPropertiesLoose(props, _excluded$2l);
 
     const prevProps = usePreviousProps$1({
       anchorOrigin: anchorOriginProp,
@@ -8559,7 +8656,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       displayValue = badgeContent > max ? `${max}+` : badgeContent;
     }
 
-    const classes = useUtilityClasses$1O(ownerState);
+    const classes = useUtilityClasses$1S(ownerState);
     const Root = components.Root || component;
     const rootProps = componentsProps.root || {};
     const Badge = components.Badge || 'span';
@@ -8917,9 +9014,9 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     });
   }
 
-  const _excluded$2f = ["className", "component", "components", "componentsProps", "children", "disabled", "action", "onBlur", "onClick", "onFocus", "onFocusVisible", "onKeyDown", "onKeyUp", "onMouseLeave"];
+  const _excluded$2k = ["className", "component", "components", "componentsProps", "children", "disabled", "action", "onBlur", "onClick", "onFocus", "onFocusVisible", "onKeyDown", "onKeyUp", "onMouseLeave"];
 
-  const useUtilityClasses$1N = ownerState => {
+  const useUtilityClasses$1R = ownerState => {
     const {
       active,
       disabled,
@@ -8954,7 +9051,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       children,
       action
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$2f);
+          other = _objectWithoutPropertiesLoose(props, _excluded$2k);
 
     const buttonRef = React__namespace.useRef();
     const handleRef = useForkRef(buttonRef, ref);
@@ -8980,7 +9077,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
 
     const ButtonRoot = (_ref = component != null ? component : components.Root) != null ? _ref : 'button';
     const buttonRootProps = appendOwnerState(ButtonRoot, _extends({}, other, componentsProps.root), ownerState);
-    const classes = useUtilityClasses$1N(ownerState);
+    const classes = useUtilityClasses$1R(ownerState);
     return /*#__PURE__*/jsxRuntime_1(ButtonRoot, _extends({}, getRootProps(), buttonRootProps, {
       className: clsx(classes.root, className, buttonRootProps.className),
       children: children
@@ -9070,7 +9167,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
   const formControlUnstyledClasses = generateUtilityClasses('MuiFormControl', ['root', 'disabled']);
   var classes$2 = formControlUnstyledClasses;
 
-  const _excluded$2e = ["defaultValue", "children", "className", "component", "components", "componentsProps", "disabled", "error", "focused", "onChange", "required", "value"];
+  const _excluded$2j = ["defaultValue", "children", "className", "component", "components", "componentsProps", "disabled", "error", "focused", "onChange", "required", "value"];
 
   function hasValue$1(value) {
     return value != null && !(Array.isArray(value) && value.length === 0) && value !== '';
@@ -9120,12 +9217,12 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       componentsProps = {},
       disabled = false,
       error = false,
-      focused: visuallyFocused = false,
+      focused: visuallyFocused,
       onChange,
       required = false,
       value: incomingValue
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$2e);
+          other = _objectWithoutPropertiesLoose(props, _excluded$2j);
 
     const [value, setValue] = useControlled({
       controlled: incomingValue,
@@ -9452,7 +9549,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     };
   }
 
-  const _excluded$2d = ["aria-describedby", "aria-label", "aria-labelledby", "autoComplete", "autoFocus", "className", "component", "components", "componentsProps", "defaultValue", "disabled", "endAdornment", "error", "id", "maxRows", "minRows", "multiline", "name", "onClick", "onChange", "onKeyDown", "onKeyUp", "onFocus", "onBlur", "placeholder", "readOnly", "required", "rows", "type", "startAdornment", "value"];
+  const _excluded$2i = ["aria-describedby", "aria-label", "aria-labelledby", "autoComplete", "autoFocus", "className", "component", "components", "componentsProps", "defaultValue", "disabled", "endAdornment", "error", "id", "maxRows", "minRows", "multiline", "name", "onClick", "onChange", "onKeyDown", "onKeyUp", "onFocus", "onBlur", "placeholder", "readOnly", "required", "rows", "type", "startAdornment", "value"];
   const InputUnstyled = /*#__PURE__*/React__namespace.forwardRef(function InputUnstyled(props, ref) {
     var _componentsProps$inpu, _ref, _componentsProps$root, _components$Input, _componentsProps$inpu2;
 
@@ -9489,7 +9586,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       startAdornment,
       value
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$2d);
+          other = _objectWithoutPropertiesLoose(props, _excluded$2i);
 
     const {
       getRootProps,
@@ -10433,9 +10530,9 @@ 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$2c = ["BackdropComponent", "BackdropProps", "children", "classes", "className", "closeAfterTransition", "component", "components", "componentsProps", "container", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "manager", "onBackdropClick", "onClose", "onKeyDown", "open", "theme", "onTransitionEnter", "onTransitionExited"];
+  const _excluded$2h = ["BackdropComponent", "BackdropProps", "children", "classes", "className", "closeAfterTransition", "component", "components", "componentsProps", "container", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "manager", "onBackdropClick", "onClose", "onKeyDown", "open", "theme", "onTransitionEnter", "onTransitionExited"];
 
-  const useUtilityClasses$1M = ownerState => {
+  const useUtilityClasses$1Q = ownerState => {
     const {
       open,
       exited,
@@ -10505,7 +10602,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       onTransitionEnter,
       onTransitionExited
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$2c);
+          other = _objectWithoutPropertiesLoose(props, _excluded$2h);
 
     const [exited, setExited] = React__namespace.useState(true);
     const modal = React__namespace.useRef({});
@@ -10582,7 +10679,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       keepMounted
     });
 
-    const classes = useUtilityClasses$1M(ownerState);
+    const classes = useUtilityClasses$1Q(ownerState);
 
     if (!keepMounted && !open && (!hasTransition || exited)) {
       return null;
@@ -12764,12 +12861,10 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     defaultModifiers: defaultModifiers
   }); // eslint-disable-next-line import/no-unused-modules
 
-  const _excluded$2b = ["anchorEl", "children", "disablePortal", "modifiers", "open", "placement", "popperOptions", "popperRef", "TransitionProps"],
-        _excluded2$a = ["anchorEl", "children", "container", "disablePortal", "keepMounted", "modifiers", "open", "placement", "popperOptions", "popperRef", "style", "transition"];
-
-  function flipPlacement(placement, theme) {
-    const direction = theme && theme.direction || 'ltr';
+  const _excluded$2g = ["anchorEl", "children", "direction", "disablePortal", "modifiers", "open", "placement", "popperOptions", "popperRef", "TransitionProps"],
+        _excluded2$9 = ["anchorEl", "children", "container", "direction", "disablePortal", "keepMounted", "modifiers", "open", "placement", "popperOptions", "popperRef", "style", "transition"];
 
+  function flipPlacement(placement, direction) {
     if (direction === 'ltr') {
       return placement;
     }
@@ -12803,6 +12898,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     const {
       anchorEl,
       children,
+      direction,
       disablePortal,
       modifiers,
       open,
@@ -12811,7 +12907,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       popperRef: popperRefProp,
       TransitionProps
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$2b);
+          other = _objectWithoutPropertiesLoose(props, _excluded$2g);
 
     const tooltipRef = React__namespace.useRef(null);
     const ownRef = useForkRef(tooltipRef, ref);
@@ -12822,8 +12918,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       handlePopperRefRef.current = handlePopperRef;
     }, [handlePopperRef]);
     React__namespace.useImperativeHandle(popperRefProp, () => popperRef.current, []);
-    const theme = useTheme$2();
-    const rtlPlacement = flipPlacement(initialPlacement, theme);
+    const rtlPlacement = flipPlacement(initialPlacement, direction);
     /**
      * placement initialized from prop but can change during lifetime if modifiers.flip.
      * modifiers.flip is essentially a flip for controlled/uncontrolled behavior
@@ -12917,11 +13012,12 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
    * Poppers rely on the 3rd party library [Popper.js](https://popper.js.org/docs/v2/) for positioning.
    */
 
-  const Popper = /*#__PURE__*/React__namespace.forwardRef(function Popper(props, ref) {
+  const PopperUnstyled = /*#__PURE__*/React__namespace.forwardRef(function PopperUnstyled(props, ref) {
     const {
       anchorEl,
       children,
       container: containerProp,
+      direction = 'ltr',
       disablePortal = false,
       keepMounted = false,
       modifiers,
@@ -12932,7 +13028,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       style,
       transition = false
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded2$a);
+          other = _objectWithoutPropertiesLoose(props, _excluded2$9);
 
     const [exited, setExited] = React__namespace.useState(true);
 
@@ -12957,6 +13053,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       container: container,
       children: /*#__PURE__*/jsxRuntime_1(PopperTooltip, _extends({
         anchorEl: anchorEl,
+        direction: direction,
         disablePortal: disablePortal,
         modifiers: modifiers,
         ref: ref,
@@ -12982,7 +13079,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       }))
     });
   });
-  Popper.propTypes
+  PopperUnstyled.propTypes
   /* remove-proptypes */
   = {
     // ----------------------------- Warning --------------------------------
@@ -13032,6 +13129,12 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     /* @typescript-to-proptypes-ignore */
     .oneOfType([HTMLElementType, propTypes.func]),
 
+    /**
+     * Direction of the text.
+     * @default 'ltr'
+     */
+    direction: propTypes.oneOf(['ltr', 'rtl']),
+
     /**
      * The `children` will be under the DOM hierarchy of the parent component.
      * @default false
@@ -13105,7 +13208,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
      */
     transition: propTypes.bool
   } ;
-  var Popper$1 = Popper;
+  var PopperUnstyled$1 = PopperUnstyled;
 
   function getSliderUtilityClass(slot) {
     return generateUtilityClass('MuiSlider', slot);
@@ -13162,7 +13265,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     value: propTypes.node
   } ;
 
-  const _excluded$2a = ["aria-label", "aria-labelledby", "aria-valuetext", "className", "component", "classes", "defaultValue", "disableSwap", "disabled", "getAriaLabel", "getAriaValueText", "marks", "max", "min", "name", "onChange", "onChangeCommitted", "onMouseDown", "orientation", "scale", "step", "tabIndex", "track", "value", "valueLabelDisplay", "valueLabelFormat", "isRtl", "components", "componentsProps"];
+  const _excluded$2f = ["aria-label", "aria-labelledby", "aria-valuetext", "className", "component", "classes", "defaultValue", "disableSwap", "disabled", "getAriaLabel", "getAriaValueText", "marks", "max", "min", "name", "onChange", "onChangeCommitted", "onMouseDown", "orientation", "scale", "step", "tabIndex", "track", "value", "valueLabelDisplay", "valueLabelFormat", "isRtl", "components", "componentsProps"];
   const INTENTIONAL_DRAG_COUNT_THRESHOLD = 2;
 
   function asc(a, b) {
@@ -13322,7 +13425,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     return cachedSupportsTouchActionNone;
   }
 
-  const useUtilityClasses$1L = ownerState => {
+  const useUtilityClasses$1P = ownerState => {
     const {
       disabled,
       dragging,
@@ -13384,7 +13487,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       components = {},
       componentsProps = {}
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$2a);
+          other = _objectWithoutPropertiesLoose(props, _excluded$2f);
 
     const touchId = React__namespace.useRef(); // We can't use the :active browser pseudo-classes.
     // - The active state isn't triggered when clicking on the rail.
@@ -13814,7 +13917,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       valueLabelFormat
     });
 
-    const classes = useUtilityClasses$1L(ownerState);
+    const classes = useUtilityClasses$1P(ownerState);
     return /*#__PURE__*/jsxRuntime_2(Root, _extends({
       ref: handleRef,
       onMouseDown: handleMouseDown
@@ -14280,7 +14383,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
   const switchUnstyledClasses = generateUtilityClasses('MuiSwitch', ['root', 'input', 'track', 'thumb', 'checked', 'disabled', 'focusVisible', 'readOnly']);
   var classes = switchUnstyledClasses;
 
-  const _excluded$29 = ["checked", "className", "component", "components", "componentsProps", "defaultChecked", "disabled", "onBlur", "onChange", "onFocus", "onFocusVisible", "readOnly", "required"];
+  const _excluded$2e = ["checked", "className", "component", "components", "componentsProps", "defaultChecked", "disabled", "onBlur", "onChange", "onFocus", "onFocusVisible", "readOnly", "required"];
 
   /**
    * The foundation for building custom-styled switches.
@@ -14310,7 +14413,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       onFocusVisible,
       readOnly: readOnlyProp
     } = props,
-          otherProps = _objectWithoutPropertiesLoose(props, _excluded$29);
+          otherProps = _objectWithoutPropertiesLoose(props, _excluded$2e);
 
     const useSwitchProps = {
       checked: checkedProp,
@@ -14450,7 +14553,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
   } ;
   var SwitchUnstyled$1 = SwitchUnstyled;
 
-  const _excluded$28 = ["onChange", "maxRows", "minRows", "style", "value"];
+  const _excluded$2d = ["onChange", "maxRows", "minRows", "style", "value"];
 
   function getStyleValue(computedStyle, property) {
     return parseInt(computedStyle[property], 10) || 0;
@@ -14479,7 +14582,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       style,
       value
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$28);
+          other = _objectWithoutPropertiesLoose(props, _excluded$2d);
 
     const {
       current: isControlled
@@ -14665,6 +14768,895 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
   } ;
   var TextareaAutosize$1 = TextareaAutosize;
 
+  function getTabsUnstyledUtilityClass(slot) {
+    return generateUtilityClass('TabsUnstyled', slot);
+  }
+  const tabsUnstyledClasses = generateUtilityClasses('TabsUnstyled', ['root', 'horizontal', 'vertical']);
+  var tabsUnstyledClasses$1 = tabsUnstyledClasses;
+
+  const useTabs = props => {
+    const {
+      value: valueProp,
+      defaultValue,
+      onChange,
+      orientation,
+      direction,
+      selectionFollowsFocus
+    } = props;
+    const [value, setValue] = useControlled({
+      controlled: valueProp,
+      default: defaultValue,
+      name: 'Tabs',
+      state: 'value'
+    });
+    const idPrefix = useId();
+    const onSelected = React__namespace.useCallback((e, newValue) => {
+      setValue(newValue);
+
+      if (onChange) {
+        onChange(e, newValue);
+      }
+    }, [onChange, setValue]);
+
+    const getRootProps = () => {
+      return {};
+    };
+
+    const tabsContextValue = React__namespace.useMemo(() => {
+      return {
+        idPrefix,
+        value,
+        onSelected,
+        orientation,
+        direction,
+        selectionFollowsFocus
+      };
+    }, [idPrefix, value, onSelected, orientation, direction, selectionFollowsFocus]);
+    return {
+      getRootProps,
+      tabsContextValue
+    };
+  };
+
+  var useTabs$1 = useTabs;
+
+  /**
+   * @ignore - internal component.
+   */
+  const Context = /*#__PURE__*/React__namespace.createContext(null);
+
+  {
+    Context.displayName = 'TabsContext';
+  }
+  /**
+   * @returns {unknown}
+   */
+
+
+  function useTabContext() {
+    return React__namespace.useContext(Context);
+  }
+  function getPanelId(context, value) {
+    const {
+      idPrefix
+    } = context;
+
+    if (idPrefix === null) {
+      return null;
+    }
+
+    return `${context.idPrefix}-P-${value}`;
+  }
+  function getTabId(context, value) {
+    const {
+      idPrefix
+    } = context;
+
+    if (idPrefix === null) {
+      return null;
+    }
+
+    return `${context.idPrefix}-T-${value}`;
+  }
+  var Context$1 = Context;
+
+  const _excluded$2c = ["children", "className", "value", "defaultValue", "orientation", "direction", "component", "components", "componentsProps", "onChange", "selectionFollowsFocus"];
+
+  const useUtilityClasses$1O = ownerState => {
+    const {
+      orientation
+    } = ownerState;
+    const slots = {
+      root: ['root', orientation]
+    };
+    return composeClasses(slots, getTabsUnstyledUtilityClass, {});
+  };
+  /**
+   *
+   * Demos:
+   *
+   * - [Tabs](https://mui.com/components/tabs/)
+   *
+   * API:
+   *
+   * - [TabsUnstyled API](https://mui.com/api/tabs-unstyled/)
+   */
+
+
+  const TabsUnstyled = /*#__PURE__*/React__namespace.forwardRef((props, ref) => {
+    var _ref, _componentsProps$root;
+
+    const {
+      children,
+      className,
+      orientation = 'horizontal',
+      direction = 'ltr',
+      component,
+      components = {},
+      componentsProps = {}
+    } = props,
+          other = _objectWithoutPropertiesLoose(props, _excluded$2c);
+
+    const {
+      tabsContextValue,
+      getRootProps
+    } = useTabs$1(props);
+
+    const ownerState = _extends({}, props, {
+      orientation,
+      direction
+    });
+
+    const classes = useUtilityClasses$1O(ownerState);
+    const TabsRoot = (_ref = component != null ? component : components.Root) != null ? _ref : 'div';
+    const tabsRootProps = appendOwnerState(TabsRoot, _extends({}, other, componentsProps.root), ownerState);
+    return /*#__PURE__*/jsxRuntime_1(TabsRoot, _extends({}, getRootProps(), tabsRootProps, {
+      ref: ref,
+      className: clsx(classes.root, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.className, className),
+      children: /*#__PURE__*/jsxRuntime_1(Context$1.Provider, {
+        value: tabsContextValue,
+        children: children
+      })
+    }));
+  });
+  TabsUnstyled.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
+     */
+    className: propTypes.string,
+
+    /**
+     * The component used for the root node.
+     * Either a string to use a HTML element or a component.
+     */
+    component: propTypes.elementType,
+
+    /**
+     * The components used for each slot inside the Tabs.
+     * 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 Tabs.
+     * @default {}
+     */
+    componentsProps: propTypes.object,
+
+    /**
+     * The default value. Use when the component is not controlled.
+     */
+    defaultValue: propTypes.oneOfType([propTypes.oneOf([false]), propTypes.number, propTypes.string]),
+
+    /**
+     * The direction of the text.
+     * @default 'ltr'
+     */
+    direction: propTypes.oneOf(['ltr', 'rtl']),
+
+    /**
+     * Callback invoked when new value is being set.
+     */
+    onChange: propTypes.func,
+
+    /**
+     * The component orientation (layout flow direction).
+     * @default 'horizontal'
+     */
+    orientation: propTypes.oneOf(['horizontal', 'vertical']),
+
+    /**
+     * If `true` the selected tab changes on focus. Otherwise it only
+     * changes on activation.
+     */
+    selectionFollowsFocus: propTypes.bool,
+
+    /**
+     * The value of the currently selected `Tab`.
+     * If you don't want any selected `Tab`, you can set this prop to `false`.
+     */
+    value: propTypes.oneOfType([propTypes.oneOf([false]), propTypes.number, propTypes.string])
+  } ;
+  var TabsUnstyled$1 = TabsUnstyled;
+
+  function getTabUnstyledUtilityClass(slot) {
+    return generateUtilityClass('TabUnstyled', slot);
+  }
+  const tabUnstyledClasses = generateUtilityClasses('TabUnstyled', ['root', 'selected', 'disabled']);
+  var tabUnstyledClasses$1 = tabUnstyledClasses;
+
+  const _excluded$2b = ["getRootProps"];
+
+  const useTab = props => {
+    const {
+      value: valueProp,
+      onChange,
+      onClick,
+      onFocus
+    } = props;
+
+    const _useButton = useButton(props),
+          {
+      getRootProps: getRootPropsButton
+    } = _useButton,
+          otherButtonProps = _objectWithoutPropertiesLoose(_useButton, _excluded$2b);
+
+    const context = useTabContext();
+
+    if (context === null) {
+      throw new Error('No TabContext provided');
+    }
+
+    const value = valueProp != null ? valueProp : 0;
+    const selected = context.value === value;
+    const selectionFollowsFocus = context.selectionFollowsFocus;
+    const a11yAttributes = {
+      role: 'tab',
+      'aria-controls': getPanelId(context, value),
+      id: getTabId(context, value),
+      'aria-selected': selected,
+      disabled: otherButtonProps.disabled
+    };
+
+    const handleFocus = event => {
+      if (selectionFollowsFocus && !selected) {
+        if (onChange) {
+          onChange(event, value);
+        }
+
+        context.onSelected(event, value);
+      }
+
+      if (onFocus) {
+        onFocus(event);
+      }
+    };
+
+    const handleClick = event => {
+      if (!selected) {
+        if (onChange) {
+          onChange(event, value);
+        }
+
+        context.onSelected(event, value);
+      }
+
+      if (onClick) {
+        onClick(event);
+      }
+    };
+
+    const getRootProps = otherHandlers => {
+      const buttonResolvedProps = getRootPropsButton(_extends({
+        onClick: handleClick,
+        onFocus: handleFocus
+      }, otherHandlers));
+      return _extends({}, buttonResolvedProps, a11yAttributes);
+    };
+
+    return _extends({
+      getRootProps
+    }, otherButtonProps, {
+      selected
+    });
+  };
+
+  var useTab$1 = useTab;
+
+  const _excluded$2a = ["action", "children", "value", "className", "disabled", "onChange", "onClick", "onFocus", "component", "components", "componentsProps"];
+
+  const useUtilityClasses$1N = ownerState => {
+    const {
+      selected,
+      disabled
+    } = ownerState;
+    const slots = {
+      root: ['root', selected && 'selected', disabled && 'disabled']
+    };
+    return composeClasses(slots, getTabUnstyledUtilityClass, {});
+  };
+  /**
+   *
+   * Demos:
+   *
+   * - [Tabs](https://mui.com/components/tabs/)
+   *
+   * API:
+   *
+   * - [TabUnstyled API](https://mui.com/api/tab-unstyled/)
+   */
+
+
+  const TabUnstyled = /*#__PURE__*/React__namespace.forwardRef(function TabUnstyled(props, ref) {
+    var _ref, _componentsProps$root;
+
+    const {
+      action,
+      children,
+      className,
+      disabled = false,
+      component,
+      components = {},
+      componentsProps = {}
+    } = props,
+          other = _objectWithoutPropertiesLoose(props, _excluded$2a);
+
+    const tabRef = React__namespace.useRef();
+    const handleRef = useForkRef(tabRef, ref);
+    const {
+      active,
+      focusVisible,
+      setFocusVisible,
+      selected,
+      getRootProps
+    } = useTab$1(_extends({}, props, {
+      ref: handleRef
+    }));
+    React__namespace.useImperativeHandle(action, () => ({
+      focusVisible: () => {
+        setFocusVisible(true);
+        tabRef.current.focus();
+      }
+    }), [setFocusVisible]);
+
+    const ownerState = _extends({}, props, {
+      active,
+      focusVisible,
+      disabled,
+      selected
+    });
+
+    const classes = useUtilityClasses$1N(ownerState);
+    const TabRoot = (_ref = component != null ? component : components.Root) != null ? _ref : 'button';
+    const tabRootProps = appendOwnerState(TabRoot, _extends({}, other, componentsProps.root), ownerState);
+    return /*#__PURE__*/jsxRuntime_1(TabRoot, _extends({}, getRootProps(), tabRootProps, {
+      className: clsx(classes.root, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.className, className),
+      ref: ref,
+      children: children
+    }));
+  });
+  TabUnstyled.propTypes
+  /* remove-proptypes */
+  = {
+    // ----------------------------- Warning --------------------------------
+    // | These PropTypes are generated from the TypeScript type definitions |
+    // |     To update them edit TypeScript types and run "yarn proptypes"  |
+    // ----------------------------------------------------------------------
+
+    /**
+     * A ref for imperative actions. It currently only supports `focusVisible()` action.
+     */
+    action: propTypes.oneOfType([propTypes.func, propTypes.shape({
+      current: propTypes.shape({
+        focusVisible: propTypes.func.isRequired
+      })
+    })]),
+
+    /**
+     * @ignore
+     */
+    children: propTypes.node,
+
+    /**
+     * @ignore
+     */
+    className: propTypes.string,
+
+    /**
+     * The component used for the root node.
+     * Either a string to use a HTML element or a component.
+     */
+    component: propTypes.elementType,
+
+    /**
+     * The components used for each slot inside the Tab.
+     * 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 Tab.
+     * @default {}
+     */
+    componentsProps: propTypes.object,
+
+    /**
+     * If `true`, the component is disabled.
+     * @default false
+     */
+    disabled: propTypes.bool,
+
+    /**
+     * Callback invoked when new value is being set.
+     */
+    onChange: propTypes.func,
+
+    /**
+     * @ignore
+     */
+    onClick: propTypes.func,
+
+    /**
+     * @ignore
+     */
+    onFocus: propTypes.func,
+
+    /**
+     * You can provide your own value. Otherwise, we fall back to the child position index.
+     */
+    value: propTypes.oneOfType([propTypes.number, propTypes.string])
+  } ;
+  var TabUnstyled$1 = TabUnstyled;
+
+  function getTabsListUnstyledUtilityClass(slot) {
+    return generateUtilityClass('TabsListUnstyled', slot);
+  }
+  const tabsListUnstyledClasses = generateUtilityClasses('TabsListUnstyled', ['root', 'horizontal', 'vertical']);
+  var tabsListUnstyledClasses$1 = tabsListUnstyledClasses;
+
+  const nextItem$2 = (list, item) => {
+    if (!list) {
+      return null;
+    }
+
+    if (list === item) {
+      return list.firstChild;
+    }
+
+    if (item && item.nextElementSibling) {
+      return item.nextElementSibling;
+    }
+
+    return list.firstChild;
+  };
+
+  const previousItem$2 = (list, item) => {
+    if (!list) {
+      return null;
+    }
+
+    if (list === item) {
+      return list.lastChild;
+    }
+
+    if (item && item.previousElementSibling) {
+      return item.previousElementSibling;
+    }
+
+    return list.lastChild;
+  };
+
+  const moveFocus$2 = (list, currentFocus, traversalFunction) => {
+    let wrappedOnce = false;
+    let nextFocus = traversalFunction(list, currentFocus);
+
+    while (list && nextFocus) {
+      // Prevent infinite loop.
+      if (nextFocus === list.firstChild) {
+        if (wrappedOnce) {
+          return;
+        }
+
+        wrappedOnce = true;
+      } // Same logic as useAutocomplete.js
+
+
+      const nextFocusDisabled = nextFocus.disabled || nextFocus.getAttribute('aria-disabled') === 'true';
+
+      if (!nextFocus.hasAttribute('tabindex') || nextFocusDisabled) {
+        // Move to the next element.
+        nextFocus = traversalFunction(list, nextFocus);
+      } else {
+        nextFocus.focus();
+        return;
+      }
+    }
+  };
+
+  const useTabsList = props => {
+    const {
+      'aria-label': ariaLabel,
+      'aria-labelledby': ariaLabelledBy,
+      children,
+      ref
+    } = props;
+    const tabsListRef = /*#__PURE__*/React__namespace.createRef();
+    const handleRef = useForkRef(tabsListRef, ref);
+    const context = useTabContext();
+
+    if (context === null) {
+      throw new Error('No TabContext provided');
+    }
+
+    const {
+      value,
+      orientation = 'horizontal',
+      direction = 'ltr'
+    } = context;
+    const isRtl = direction === 'rtl';
+
+    const handleKeyDown = event => {
+      const list = tabsListRef.current;
+      const currentFocus = ownerDocument(list).activeElement; // Keyboard navigation assumes that [role="tab"] are siblings
+      // though we might warn in the future about nested, interactive elements
+      // as a a11y violation
+
+      const role = currentFocus == null ? void 0 : currentFocus.getAttribute('role');
+
+      if (role !== 'tab') {
+        return;
+      }
+
+      let previousItemKey = orientation === 'horizontal' ? 'ArrowLeft' : 'ArrowUp';
+      let nextItemKey = orientation === 'horizontal' ? 'ArrowRight' : 'ArrowDown';
+
+      if (orientation === 'horizontal' && isRtl) {
+        // swap previousItemKey with nextItemKey
+        previousItemKey = 'ArrowRight';
+        nextItemKey = 'ArrowLeft';
+      }
+
+      switch (event.key) {
+        case previousItemKey:
+          event.preventDefault();
+          moveFocus$2(list, currentFocus, previousItem$2);
+          break;
+
+        case nextItemKey:
+          event.preventDefault();
+          moveFocus$2(list, currentFocus, nextItem$2);
+          break;
+
+        case 'Home':
+          event.preventDefault();
+          moveFocus$2(list, null, nextItem$2);
+          break;
+
+        case 'End':
+          event.preventDefault();
+          moveFocus$2(list, null, previousItem$2);
+          break;
+      }
+    };
+
+    const createHandleKeyDown = otherHandlers => event => {
+      var _otherHandlers$onKeyD;
+
+      handleKeyDown(event);
+      (_otherHandlers$onKeyD = otherHandlers.onKeyDown) == null ? void 0 : _otherHandlers$onKeyD.call(otherHandlers, event);
+    };
+
+    const getRootProps = otherHandlers => {
+      const propsEventHandlers = extractEventHandlers(props);
+
+      const externalEventHandlers = _extends({}, propsEventHandlers, otherHandlers);
+
+      const ownEventHandlers = {
+        onKeyDown: createHandleKeyDown(externalEventHandlers)
+      };
+
+      const mergedEventHandlers = _extends({}, externalEventHandlers, ownEventHandlers);
+
+      return _extends({
+        'aria-label': ariaLabel,
+        'aria-labelledby': ariaLabelledBy,
+        'aria-orientation': orientation === 'vertical' ? 'vertical' : null,
+        role: 'tablist',
+        ref: handleRef
+      }, mergedEventHandlers);
+    };
+
+    const processChildren = React__namespace.useCallback(() => {
+      const valueToIndex = new Map();
+      let childIndex = 0;
+      const processedChildren = React__namespace.Children.map(children, child => {
+        if (! /*#__PURE__*/React__namespace.isValidElement(child)) {
+          return null;
+        }
+
+        {
+          if (reactIs_2(child)) {
+            console.error(["MUI: The Tabs component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
+          }
+        }
+
+        const childValue = child.props.value === undefined ? childIndex : child.props.value;
+        valueToIndex.set(childValue, childIndex);
+        childIndex += 1;
+        return /*#__PURE__*/React__namespace.cloneElement(child, _extends({
+          value: childValue
+        }, childIndex === 1 && value === false && !child.props.tabIndex || value === childValue ? {
+          tabIndex: 0
+        } : {
+          tabIndex: -1
+        }));
+      });
+      return processedChildren;
+    }, [children, value]);
+    return {
+      isRtl,
+      orientation,
+      value,
+      processChildren,
+      getRootProps
+    };
+  };
+
+  var useTabsList$1 = useTabsList;
+
+  const _excluded$29 = ["className", "children", "component", "components", "componentsProps"];
+
+  const useUtilityClasses$1M = ownerState => {
+    const {
+      orientation
+    } = ownerState;
+    const slots = {
+      root: ['root', orientation]
+    };
+    return composeClasses(slots, getTabsListUnstyledUtilityClass, {});
+  };
+  /**
+   *
+   * Demos:
+   *
+   * - [Tabs](https://mui.com/components/tabs/)
+   *
+   * API:
+   *
+   * - [TabsListUnstyled API](https://mui.com/api/tabs-list-unstyled/)
+   */
+
+
+  const TabsListUnstyled = /*#__PURE__*/React__namespace.forwardRef((props, ref) => {
+    var _ref, _componentsProps$root;
+
+    const {
+      className,
+      component,
+      components = {},
+      componentsProps = {}
+    } = props,
+          other = _objectWithoutPropertiesLoose(props, _excluded$29);
+
+    const {
+      isRtl,
+      orientation,
+      getRootProps,
+      processChildren
+    } = useTabsList$1(_extends({}, props, {
+      ref
+    }));
+
+    const ownerState = _extends({}, props, {
+      isRtl,
+      orientation
+    });
+
+    const classes = useUtilityClasses$1M(ownerState);
+    const TabsListRoot = (_ref = component != null ? component : components.Root) != null ? _ref : 'div';
+    const tabsListRootProps = appendOwnerState(TabsListRoot, _extends({}, other, componentsProps.root), ownerState);
+    const processedChildren = processChildren();
+    return /*#__PURE__*/jsxRuntime_1(TabsListRoot, _extends({}, getRootProps(), tabsListRootProps, {
+      className: clsx(className, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.className, classes.root),
+      children: processedChildren
+    }));
+  });
+  TabsListUnstyled.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
+     */
+    className: propTypes.string,
+
+    /**
+     * The component used for the root node.
+     * Either a string to use a HTML element or a component.
+     */
+    component: propTypes.elementType,
+
+    /**
+     * The components used for each slot inside the TabsList.
+     * 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 TabsList.
+     * @default {}
+     */
+    componentsProps: propTypes.object
+  } ;
+  var TabsListUnstyled$1 = TabsListUnstyled;
+
+  function getTabPanelUnstyledUtilityClass(slot) {
+    return generateUtilityClass('TabPanelUnstyled', slot);
+  }
+  const tabPanelUnstyledClasses = generateUtilityClasses('TabPanelUnstyled', ['root', 'hidden']);
+  var tabPanelUnstyledClasses$1 = tabPanelUnstyledClasses;
+
+  const useTabPanel = props => {
+    const {
+      value
+    } = props;
+    const context = useTabContext();
+
+    if (context === null) {
+      throw new Error('No TabContext provided');
+    }
+
+    const hidden = value !== context.value;
+    const id = getPanelId(context, value);
+    const tabId = getTabId(context, value);
+
+    const getRootProps = () => {
+      return {
+        'aria-labelledby': tabId,
+        hidden,
+        id
+      };
+    };
+
+    return {
+      hidden,
+      getRootProps
+    };
+  };
+
+  var useTabPanel$1 = useTabPanel;
+
+  const _excluded$28 = ["children", "className", "value", "components", "componentsProps", "component"];
+
+  const useUtilityClasses$1L = ownerState => {
+    const {
+      hidden
+    } = ownerState;
+    const slots = {
+      root: ['root', hidden && 'hidden']
+    };
+    return composeClasses(slots, getTabPanelUnstyledUtilityClass, {});
+  };
+  /**
+   *
+   * Demos:
+   *
+   * - [Tabs](https://mui.com/components/tabs/)
+   *
+   * API:
+   *
+   * - [TabPanelUnstyled API](https://mui.com/api/tab-panel-unstyled/)
+   */
+
+
+  const TabPanelUnstyled = /*#__PURE__*/React__namespace.forwardRef(function TabPanelUnstyled(props, ref) {
+    var _ref, _componentsProps$root;
+
+    const {
+      children,
+      className,
+      components = {},
+      componentsProps = {},
+      component
+    } = props,
+          other = _objectWithoutPropertiesLoose(props, _excluded$28);
+
+    const {
+      hidden,
+      getRootProps
+    } = useTabPanel$1(props);
+
+    const ownerState = _extends({}, props, {
+      hidden
+    });
+
+    const classes = useUtilityClasses$1L(ownerState);
+    const TabPanelRoot = (_ref = component != null ? component : components.Root) != null ? _ref : 'div';
+    const tabPanelRootProps = appendOwnerState(TabPanelRoot, _extends({}, other, componentsProps.root), ownerState);
+    return /*#__PURE__*/jsxRuntime_1(TabPanelRoot, _extends({}, getRootProps(), {
+      ref: ref,
+      role: "tabpanel"
+    }, tabPanelRootProps, {
+      className: clsx(classes.root, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.className, className),
+      children: !hidden && children
+    }));
+  });
+  TabPanelUnstyled.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
+     */
+    className: propTypes.string,
+
+    /**
+     * The component used for the root node.
+     * Either a string to use a HTML element or a component.
+     */
+    component: propTypes.elementType,
+
+    /**
+     * The components used for each slot inside the TabPanel.
+     * 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 TabPanel.
+     * @default {}
+     */
+    componentsProps: propTypes.object,
+
+    /**
+     * The value of the TabPanel. It will be shown when the Tab with the corresponding value is selected.
+     */
+    value: propTypes.oneOfType([propTypes.number, propTypes.string]).isRequired
+  } ;
+  var TabPanelUnstyled$1 = TabPanelUnstyled;
+
   function createMixins(breakpoints, spacing, mixins) {
     return _extends({
       toolbar: {
@@ -14850,7 +15842,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     }
 
     return {
-      main: '#ED6C02',
+      main: '#ed6c02',
       // closest to orange[800] that pass 3:1.
       light: orange$1[500],
       dark: orange$1[900]
@@ -15705,7 +16697,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * Provides a human-readable title for the element that contains it.
@@ -17129,7 +18121,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The duration for the transition, in milliseconds.
@@ -17301,7 +18293,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The variant to use.
@@ -17578,7 +18570,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The component used for the transition.
@@ -17690,7 +18682,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var AccordionActions$1 = AccordionActions;
 
@@ -17766,7 +18758,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var AccordionDetails$1 = AccordionDetails;
 
@@ -18705,7 +19697,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * @default 0
@@ -18923,7 +19915,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var AccordionSummary$1 = AccordionSummary;
 
@@ -18978,7 +19970,8 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     color: theme.palette.action.active,
     transition: theme.transitions.create('background-color', {
       duration: theme.transitions.duration.shortest
-    }),
+    })
+  }, !ownerState.disableRipple && {
     '&:hover': {
       backgroundColor: alpha(theme.palette.action.active, theme.palette.action.hoverOpacity),
       // Reset on touch devices, it doesn't add specificity
@@ -18995,8 +19988,9 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     ownerState
   }) => _extends({}, ownerState.color === 'inherit' && {
     color: 'inherit'
-  }, ownerState.color !== 'inherit' && ownerState.color !== 'default' && {
-    color: theme.palette[ownerState.color].main,
+  }, ownerState.color !== 'inherit' && ownerState.color !== 'default' && _extends({
+    color: theme.palette[ownerState.color].main
+  }, !ownerState.disableRipple && {
     '&:hover': {
       backgroundColor: alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
       // Reset on touch devices, it doesn't add specificity
@@ -19004,7 +19998,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
         backgroundColor: 'transparent'
       }
     }
-  }, ownerState.size === 'small' && {
+  }), ownerState.size === 'small' && {
     padding: 5,
     fontSize: theme.typography.pxToRem(18)
   }, ownerState.size === 'large' && {
@@ -19139,7 +20133,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var IconButton$1 = IconButton;
 
@@ -19413,7 +20407,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The variant to use.
@@ -19601,7 +20595,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * Applies the theme typography styles.
@@ -19711,179 +20705,305 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     className: propTypes.string,
 
     /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
+     * The system prop that allows defining system overrides as well as additional CSS styles.
+     */
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
+  } ;
+  var AlertTitle$1 = AlertTitle;
+
+  function getAppBarUtilityClass(slot) {
+    return generateUtilityClass('MuiAppBar', slot);
+  }
+  const appBarClasses = generateUtilityClasses('MuiAppBar', ['root', 'positionFixed', 'positionAbsolute', 'positionSticky', 'positionStatic', 'positionRelative', 'colorDefault', 'colorPrimary', 'colorSecondary', 'colorInherit', 'colorTransparent']);
+  var appBarClasses$1 = appBarClasses;
+
+  const _excluded$1S = ["className", "color", "enableColorOnDark", "position"];
+
+  const useUtilityClasses$1y = ownerState => {
+    const {
+      color,
+      position,
+      classes
+    } = ownerState;
+    const slots = {
+      root: ['root', `color${capitalize(color)}`, `position${capitalize(position)}`]
+    };
+    return composeClasses(slots, getAppBarUtilityClass, classes);
+  };
+
+  const AppBarRoot = styled$1(Paper$1, {
+    name: 'MuiAppBar',
+    slot: 'Root',
+    overridesResolver: (props, styles) => {
+      const {
+        ownerState
+      } = props;
+      return [styles.root, styles[`position${capitalize(ownerState.position)}`], styles[`color${capitalize(ownerState.color)}`]];
+    }
+  })(({
+    theme,
+    ownerState
+  }) => {
+    const backgroundColorDefault = theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900];
+    return _extends({
+      display: 'flex',
+      flexDirection: 'column',
+      width: '100%',
+      boxSizing: 'border-box',
+      // Prevent padding issue with the Modal and fixed positioned AppBar.
+      flexShrink: 0
+    }, ownerState.position === 'fixed' && {
+      position: 'fixed',
+      zIndex: theme.zIndex.appBar,
+      top: 0,
+      left: 'auto',
+      right: 0,
+      '@media print': {
+        // Prevent the app bar to be visible on each printed page.
+        position: 'absolute'
+      }
+    }, ownerState.position === 'absolute' && {
+      position: 'absolute',
+      zIndex: theme.zIndex.appBar,
+      top: 0,
+      left: 'auto',
+      right: 0
+    }, ownerState.position === 'sticky' && {
+      // ⚠️ sticky is not supported by IE11.
+      position: 'sticky',
+      zIndex: theme.zIndex.appBar,
+      top: 0,
+      left: 'auto',
+      right: 0
+    }, ownerState.position === 'static' && {
+      position: 'static'
+    }, ownerState.position === 'relative' && {
+      position: 'relative'
+    }, ownerState.color === 'default' && {
+      backgroundColor: backgroundColorDefault,
+      color: theme.palette.getContrastText(backgroundColorDefault)
+    }, ownerState.color && ownerState.color !== 'default' && ownerState.color !== 'inherit' && ownerState.color !== 'transparent' && {
+      backgroundColor: theme.palette[ownerState.color].main,
+      color: theme.palette[ownerState.color].contrastText
+    }, ownerState.color === 'inherit' && {
+      color: 'inherit'
+    }, theme.palette.mode === 'dark' && !ownerState.enableColorOnDark && {
+      backgroundColor: null,
+      color: null
+    }, ownerState.color === 'transparent' && _extends({
+      backgroundColor: 'transparent',
+      color: 'inherit'
+    }, theme.palette.mode === 'dark' && {
+      backgroundImage: 'none'
+    }));
+  });
+  const AppBar = /*#__PURE__*/React__namespace.forwardRef(function AppBar(inProps, ref) {
+    const props = useThemeProps({
+      props: inProps,
+      name: 'MuiAppBar'
+    });
+
+    const {
+      className,
+      color = 'primary',
+      enableColorOnDark = false,
+      position = 'fixed'
+    } = props,
+          other = _objectWithoutPropertiesLoose(props, _excluded$1S);
+
+    const ownerState = _extends({}, props, {
+      color,
+      position,
+      enableColorOnDark
+    });
+
+    const classes = useUtilityClasses$1y(ownerState);
+    return /*#__PURE__*/jsxRuntime_1(AppBarRoot, _extends({
+      square: true,
+      component: "header",
+      ownerState: ownerState,
+      elevation: 4,
+      className: clsx(classes.root, className, position === 'fixed' && 'mui-fixed'),
+      ref: ref
+    }, other));
+  });
+  AppBar.propTypes
+  /* remove-proptypes */
+  = {
+    // ----------------------------- Warning --------------------------------
+    // | These PropTypes are generated from the TypeScript type definitions |
+    // |     To update them edit the d.ts file and run "yarn proptypes"     |
+    // ----------------------------------------------------------------------
+
+    /**
+     * The content of the component.
+     */
+    children: propTypes.node,
+
+    /**
+     * Override or extend the styles applied to the component.
+     */
+    classes: propTypes.object,
+
+    /**
+     * @ignore
+     */
+    className: propTypes.string,
+
+    /**
+     * The color of the component. It supports those theme colors that make sense for this component.
+     * @default 'primary'
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
-  } ;
-  var AlertTitle$1 = AlertTitle;
-
-  function getAppBarUtilityClass(slot) {
-    return generateUtilityClass('MuiAppBar', slot);
-  }
-  const appBarClasses = generateUtilityClasses('MuiAppBar', ['root', 'positionFixed', 'positionAbsolute', 'positionSticky', 'positionStatic', 'positionRelative', 'colorDefault', 'colorPrimary', 'colorSecondary', 'colorInherit', 'colorTransparent']);
-  var appBarClasses$1 = appBarClasses;
-
-  const _excluded$1S = ["className", "color", "enableColorOnDark", "position"];
-
-  const useUtilityClasses$1y = ownerState => {
-    const {
-      color,
-      position,
-      classes
-    } = ownerState;
-    const slots = {
-      root: ['root', `color${capitalize(color)}`, `position${capitalize(position)}`]
-    };
-    return composeClasses(slots, getAppBarUtilityClass, classes);
-  };
+    color: propTypes
+    /* @typescript-to-proptypes-ignore */
+    .oneOfType([propTypes.oneOf(['default', 'inherit', 'primary', 'secondary', 'transparent']), propTypes.string]),
 
-  const AppBarRoot = styled$1(Paper$1, {
-    name: 'MuiAppBar',
-    slot: 'Root',
-    overridesResolver: (props, styles) => {
-      const {
-        ownerState
-      } = props;
-      return [styles.root, styles[`position${capitalize(ownerState.position)}`], styles[`color${capitalize(ownerState.color)}`]];
-    }
-  })(({
-    theme,
-    ownerState
-  }) => {
-    const backgroundColorDefault = theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900];
-    return _extends({
-      display: 'flex',
-      flexDirection: 'column',
-      width: '100%',
-      boxSizing: 'border-box',
-      // Prevent padding issue with the Modal and fixed positioned AppBar.
-      flexShrink: 0
-    }, ownerState.position === 'fixed' && {
-      position: 'fixed',
-      zIndex: theme.zIndex.appBar,
-      top: 0,
-      left: 'auto',
-      right: 0,
-      '@media print': {
-        // Prevent the app bar to be visible on each printed page.
-        position: 'absolute'
-      }
-    }, ownerState.position === 'absolute' && {
-      position: 'absolute',
-      zIndex: theme.zIndex.appBar,
-      top: 0,
-      left: 'auto',
-      right: 0
-    }, ownerState.position === 'sticky' && {
-      // ⚠️ sticky is not supported by IE11.
-      position: 'sticky',
-      zIndex: theme.zIndex.appBar,
-      top: 0,
-      left: 'auto',
-      right: 0
-    }, ownerState.position === 'static' && {
-      position: 'static'
-    }, ownerState.position === 'relative' && {
-      position: 'relative'
-    }, ownerState.color === 'default' && {
-      backgroundColor: backgroundColorDefault,
-      color: theme.palette.getContrastText(backgroundColorDefault)
-    }, ownerState.color && ownerState.color !== 'default' && ownerState.color !== 'inherit' && ownerState.color !== 'transparent' && {
-      backgroundColor: theme.palette[ownerState.color].main,
-      color: theme.palette[ownerState.color].contrastText
-    }, ownerState.color === 'inherit' && {
-      color: 'inherit'
-    }, theme.palette.mode === 'dark' && !ownerState.enableColorOnDark && {
-      backgroundColor: null,
-      color: null
-    }, ownerState.color === 'transparent' && _extends({
-      backgroundColor: 'transparent',
-      color: 'inherit'
-    }, theme.palette.mode === 'dark' && {
-      backgroundImage: 'none'
-    }));
-  });
-  const AppBar = /*#__PURE__*/React__namespace.forwardRef(function AppBar(inProps, ref) {
-    const props = useThemeProps({
-      props: inProps,
-      name: 'MuiAppBar'
-    });
+    /**
+     * If true, the `color` prop is applied in dark mode.
+     * @default false
+     */
+    enableColorOnDark: propTypes.bool,
 
-    const {
-      className,
-      color = 'primary',
-      enableColorOnDark = false,
-      position = 'fixed'
-    } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$1S);
+    /**
+     * The positioning type. The behavior of the different options is described
+     * [in the MDN web docs](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning).
+     * Note: `sticky` is not universally supported and will fall back to `static` when unavailable.
+     * @default 'fixed'
+     */
+    position: propTypes.oneOf(['absolute', 'fixed', 'relative', 'static', 'sticky']),
 
-    const ownerState = _extends({}, props, {
-      color,
-      position,
-      enableColorOnDark
-    });
+    /**
+     * The system prop that allows defining system overrides as well as additional CSS styles.
+     */
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
+  } ;
+  var AppBar$1 = AppBar;
 
-    const classes = useUtilityClasses$1y(ownerState);
-    return /*#__PURE__*/jsxRuntime_1(AppBarRoot, _extends({
-      square: true,
-      component: "header",
-      ownerState: ownerState,
-      elevation: 4,
-      className: clsx(classes.root, className, position === 'fixed' && 'mui-fixed'),
+  /**
+   *
+   * Demos:
+   *
+   * - [Autocomplete](https://mui.com/components/autocomplete/)
+   * - [Menus](https://mui.com/components/menus/)
+   * - [Popper](https://mui.com/components/popper/)
+   *
+   * API:
+   *
+   * - [Popper API](https://mui.com/api/popper/)
+   */
+  const Popper = /*#__PURE__*/React__namespace.forwardRef(function Popper(props, ref) {
+    const theme = useTheme$2();
+    return /*#__PURE__*/jsxRuntime_1(PopperUnstyled$1, _extends({
+      direction: theme == null ? void 0 : theme.direction
+    }, props, {
       ref: ref
-    }, other));
+    }));
   });
-  AppBar.propTypes
+  Popper.propTypes
   /* remove-proptypes */
   = {
     // ----------------------------- Warning --------------------------------
     // | These PropTypes are generated from the TypeScript type definitions |
-    // |     To update them edit the d.ts file and run "yarn proptypes"     |
+    // |     To update them edit TypeScript types and run "yarn proptypes"  |
     // ----------------------------------------------------------------------
 
     /**
-     * The content of the component.
+     * An HTML element, [virtualElement](https://popper.js.org/docs/v2/virtual-elements/),
+     * or a function that returns either.
+     * It's used to set the position of the popper.
+     * The return value will passed as the reference object of the Popper instance.
      */
-    children: propTypes.node,
+    anchorEl: propTypes
+    /* @typescript-to-proptypes-ignore */
+    .oneOfType([HTMLElementType, propTypes.object, propTypes.func]),
 
     /**
-     * Override or extend the styles applied to the component.
+     * Popper render function or node.
      */
-    classes: propTypes.object,
+    children: propTypes
+    /* @typescript-to-proptypes-ignore */
+    .oneOfType([propTypes.node, propTypes.func]),
 
     /**
-     * @ignore
+     * An HTML element or function that returns one.
+     * The `container` will have the portal children appended to it.
+     *
+     * By default, it uses the body of the top-level document object,
+     * so it's simply `document.body` most of the time.
      */
-    className: propTypes.string,
+    container: propTypes
+    /* @typescript-to-proptypes-ignore */
+    .oneOfType([HTMLElementType, propTypes.func]),
 
     /**
-     * The color of the component. It supports those theme colors that make sense for this component.
-     * @default 'primary'
+     * The `children` will be under the DOM hierarchy of the parent component.
+     * @default false
      */
-    color: propTypes
-    /* @typescript-to-proptypes-ignore */
-    .oneOfType([propTypes.oneOf(['default', 'inherit', 'primary', 'secondary', 'transparent']), propTypes.string]),
+    disablePortal: propTypes.bool,
 
     /**
-     * If true, the `color` prop is applied in dark mode.
+     * Always keep the children in the DOM.
+     * This prop can be useful in SEO situation or
+     * when you want to maximize the responsiveness of the Popper.
      * @default false
      */
-    enableColorOnDark: propTypes.bool,
+    keepMounted: propTypes.bool,
 
     /**
-     * The positioning type. The behavior of the different options is described
-     * [in the MDN web docs](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning).
-     * Note: `sticky` is not universally supported and will fall back to `static` when unavailable.
-     * @default 'fixed'
+     * Popper.js is based on a "plugin-like" architecture,
+     * most of its features are fully encapsulated "modifiers".
+     *
+     * A modifier is a function that is called each time Popper.js needs to
+     * compute the position of the popper.
+     * For this reason, modifiers should be very performant to avoid bottlenecks.
+     * To learn how to create a modifier, [read the modifiers documentation](https://popper.js.org/docs/v2/modifiers/).
      */
-    position: propTypes.oneOf(['absolute', 'fixed', 'relative', 'static', 'sticky']),
+    modifiers: propTypes.arrayOf(propTypes.shape({
+      data: propTypes.object,
+      effect: propTypes.func,
+      enabled: propTypes.bool,
+      fn: propTypes.func,
+      name: propTypes.any.isRequired,
+      options: propTypes.object,
+      phase: propTypes.oneOf(['afterMain', 'afterRead', 'afterWrite', 'beforeMain', 'beforeRead', 'beforeWrite', 'main', 'read', 'write']),
+      requires: propTypes.arrayOf(propTypes.string),
+      requiresIfExists: propTypes.arrayOf(propTypes.string)
+    })),
 
     /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
+     * If `true`, the component is shown.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    open: propTypes.bool.isRequired,
+
+    /**
+     * Popper placement.
+     * @default 'bottom'
+     */
+    placement: propTypes.oneOf(['auto-end', 'auto-start', 'auto', 'bottom-end', 'bottom-start', 'bottom', 'left-end', 'left-start', 'left', 'right-end', 'right-start', 'right', 'top-end', 'top-start', 'top']),
+
+    /**
+     * Options provided to the [`Popper.js`](https://popper.js.org/docs/v2/constructors/#options) instance.
+     * @default {}
+     */
+    popperOptions: propTypes.shape({
+      modifiers: propTypes.array,
+      onFirstUpdate: propTypes.func,
+      placement: propTypes.oneOf(['auto-end', 'auto-start', 'auto', 'bottom-end', 'bottom-start', 'bottom', 'left-end', 'left-start', 'left', 'right-end', 'right-start', 'right', 'top-end', 'top-start', 'top']),
+      strategy: propTypes.oneOf(['absolute', 'fixed'])
+    }),
+
+    /**
+     * A ref that points to the used popper instance.
+     */
+    popperRef: refType$1,
+
+    /**
+     * Help supporting a react-transition-group/Transition component.
+     * @default false
+     */
+    transition: propTypes.bool
   } ;
-  var AppBar$1 = AppBar;
+  var Popper$1 = Popper;
 
   function getListSubheaderUtilityClass(slot) {
     return generateUtilityClass('MuiListSubheader', slot);
@@ -20030,7 +21150,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var ListSubheader$1 = ListSubheader;
 
@@ -20544,7 +21664,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The variant to use.
@@ -20742,6 +21862,9 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
         padding: '2.5px 4px'
       }
     },
+    [`& .${inputBaseClasses$1.hiddenLabel}`]: {
+      paddingTop: 8
+    },
     [`& .${autocompleteClasses$1.input}`]: _extends({
       flexGrow: 1,
       textOverflow: 'ellipsis',
@@ -21608,7 +22731,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The value of the autocomplete.
@@ -21882,7 +23005,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The shape of the avatar.
@@ -22054,7 +23177,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The variant to use.
@@ -22416,7 +23539,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The duration for the transition, in milliseconds.
@@ -22718,7 +23841,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The variant to use.
@@ -22856,7 +23979,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The value of the currently selected `BottomNavigationAction`.
@@ -23036,7 +24159,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * You can provide your own value. Otherwise, we fallback to the child position index.
@@ -23051,7 +24174,9 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
    */
 
   const Box = createBox({
-    defaultTheme
+    defaultTheme,
+    defaultClassName: 'MuiBox-root',
+    generateClassName: ClassNameGenerator$1.generate
   });
   var Box$1 = Box;
 
@@ -23065,8 +24190,8 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     theme
   }) => _extends({
     display: 'flex',
-    marginLeft: theme.spacing(0.5),
-    marginRight: theme.spacing(0.5)
+    marginLeft: `calc(${theme.spacing(1)} * 0.5)`,
+    marginRight: `calc(${theme.spacing(1)} * 0.5)`
   }, theme.palette.mode === 'light' ? {
     backgroundColor: theme.palette.grey[100],
     color: theme.palette.grey[700]
@@ -23343,7 +24468,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var Breadcrumbs$1 = Breadcrumbs;
 
@@ -23353,7 +24478,18 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   const buttonClasses = generateUtilityClasses('MuiButton', ['root', 'text', 'textInherit', 'textPrimary', 'textSecondary', 'outlined', 'outlinedInherit', 'outlinedPrimary', 'outlinedSecondary', 'contained', 'containedInherit', 'containedPrimary', 'containedSecondary', 'disableElevation', 'focusVisible', 'disabled', 'colorInherit', 'textSizeSmall', 'textSizeMedium', 'textSizeLarge', 'outlinedSizeSmall', 'outlinedSizeMedium', 'outlinedSizeLarge', 'containedSizeSmall', 'containedSizeMedium', 'containedSizeLarge', 'sizeMedium', 'sizeSmall', 'sizeLarge', 'fullWidth', 'startIcon', 'endIcon', 'iconSizeSmall', 'iconSizeMedium', 'iconSizeLarge']);
   var buttonClasses$1 = buttonClasses;
 
-  const _excluded$1G = ["children", "color", "component", "disabled", "disableElevation", "disableFocusRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"];
+  /**
+   * @ignore - internal component.
+   */
+  const ButtonGroupContext = /*#__PURE__*/React__namespace.createContext({});
+
+  {
+    ButtonGroupContext.displayName = 'ButtonGroupContext';
+  }
+
+  var ButtonGroupContext$1 = ButtonGroupContext;
+
+  const _excluded$1G = ["children", "className", "color", "component", "disabled", "disableElevation", "disableFocusRipple", "disableRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"];
 
   const useUtilityClasses$1p = ownerState => {
     const {
@@ -23558,24 +24694,47 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       props: inProps,
       name: 'MuiButton'
     });
+    const {
+      className: classNameContext,
+      color: colorContext,
+      disabled: disabledContext,
+      disableElevation: disableElevationContext,
+      disableFocusRipple: disableFocusRippleContext,
+      disableRipple: disableRippleContext,
+      fullWidth: fullWidthContext,
+      size: sizeContext,
+      variant: variantContext
+    } = React__namespace.useContext(ButtonGroupContext$1);
 
     const {
       children,
-      color = 'primary',
+      className,
+      color: colorProp,
       component = 'button',
-      disabled = false,
-      disableElevation = false,
-      disableFocusRipple = false,
+      disabled: disabledProp,
+      disableElevation: disableElevationProp,
+      disableFocusRipple: disableFocusRippleProp,
+      disableRipple: disableRippleProp,
       endIcon: endIconProp,
       focusVisibleClassName,
-      fullWidth = false,
-      size = 'medium',
+      fullWidth: fullWidthProp,
+      size: sizeProp,
       startIcon: startIconProp,
       type,
-      variant = 'text'
+      variant: variantProp
     } = props,
           other = _objectWithoutPropertiesLoose(props, _excluded$1G);
 
+    const color = colorProp || colorContext || 'primary'; // TODO v6: Use nullish coalescing (??) instead of OR operator for these boolean props so that these boolean props for Button with ButtonGroup context take priority. See conversation from https://github.com/mui-org/material-ui/pull/28645#discussion_r738380902.
+
+    const disabled = disabledProp || disabledContext || false;
+    const disableElevation = disableElevationProp || disableElevationContext || false;
+    const disableFocusRipple = disableFocusRippleProp || disableFocusRippleContext || false;
+    const fullWidth = fullWidthProp || fullWidthContext || false;
+    const size = sizeProp || sizeContext || 'medium';
+    const variant = variantProp || variantContext || 'text';
+    const disableRipple = disableRippleProp || disableRippleContext || false;
+
     const ownerState = _extends({}, props, {
       color,
       component,
@@ -23604,8 +24763,10 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
 
     return /*#__PURE__*/jsxRuntime_2(ButtonRoot, _extends({
       ownerState: ownerState,
+      className: clsx(className, classNameContext),
       component: component,
       disabled: disabled,
+      disableRipple: disableRipple,
       focusRipple: !disableFocusRipple,
       focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
       ref: ref,
@@ -23633,6 +24794,11 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
      */
     classes: propTypes.object,
 
+    /**
+     * @ignore
+     */
+    className: propTypes.string,
+
     /**
      * The color of the component. It supports those theme colors that make sense for this component.
      * @default 'primary'
@@ -23713,7 +24879,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * @ignore
@@ -23832,10 +24998,14 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
         }
       }, ownerState.variant === 'contained' && ownerState.color !== 'inherit' && {
         borderColor: theme.palette[ownerState.color].dark
+      }, {
+        '&:hover': _extends({}, ownerState.variant === 'outlined' && ownerState.orientation === 'horizontal' && {
+          borderRightColor: 'currentColor'
+        }, ownerState.variant === 'outlined' && ownerState.orientation === 'vertical' && {
+          borderBottomColor: 'currentColor'
+        })
       }),
-      '&:hover': _extends({}, ownerState.variant === 'outlined' && ownerState.color !== 'inherit' && {
-        borderColor: theme.palette[ownerState.color].main
-      }, ownerState.variant === 'contained' && {
+      '&:hover': _extends({}, ownerState.variant === 'contained' && {
         boxShadow: 'none'
       })
     }, ownerState.variant === 'contained' && {
@@ -23878,6 +25048,17 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     });
 
     const classes = useUtilityClasses$1o(ownerState);
+    const context = React__namespace.useMemo(() => ({
+      className: classes.grouped,
+      color,
+      disabled,
+      disableElevation,
+      disableFocusRipple,
+      disableRipple,
+      fullWidth,
+      size,
+      variant
+    }), [color, disabled, disableElevation, disableFocusRipple, disableRipple, fullWidth, size, variant, classes.grouped]);
     return /*#__PURE__*/jsxRuntime_1(ButtonGroupRoot, _extends({
       as: component,
       role: "group",
@@ -23885,28 +25066,9 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       ref: ref,
       ownerState: ownerState
     }, other, {
-      children: React__namespace.Children.map(children, child => {
-        if (! /*#__PURE__*/React__namespace.isValidElement(child)) {
-          return null;
-        }
-
-        {
-          if (reactIs_2(child)) {
-            console.error(["MUI: The ButtonGroup component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
-          }
-        }
-
-        return /*#__PURE__*/React__namespace.cloneElement(child, {
-          className: clsx(classes.grouped, child.props.className),
-          color: child.props.color || color,
-          disabled: child.props.disabled || disabled,
-          disableElevation: child.props.disableElevation || disableElevation,
-          disableFocusRipple,
-          disableRipple,
-          fullWidth,
-          size: child.props.size || size,
-          variant: child.props.variant || variant
-        });
+      children: /*#__PURE__*/jsxRuntime_1(ButtonGroupContext$1.Provider, {
+        value: context,
+        children: children
       })
     }));
   });
@@ -23995,7 +25157,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The variant to use.
@@ -24096,7 +25258,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var Card$1 = Card;
 
@@ -24218,7 +25380,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var CardActionArea$1 = CardActionArea;
 
@@ -24316,7 +25478,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var CardActions$1 = CardActions;
 
@@ -24406,7 +25568,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var CardContent$1 = CardContent;
 
@@ -24609,7 +25771,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The content of the component.
@@ -24769,7 +25931,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var CardMedia$1 = CardMedia;
 
@@ -25315,7 +26477,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The value of the component. The DOM API casts this to a string.
@@ -25567,7 +26729,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The thickness of the circle.
@@ -25935,7 +27097,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var Container$1 = Container;
 
@@ -25961,8 +27123,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     }), propTypes.string, propTypes.bool])
   } ;
 
-  var _GlobalStyles;
-  const html = {
+  const html = (theme, enableColorScheme) => _extends({
     WebkitFontSmoothing: 'antialiased',
     // Antialiasing.
     MozOsxFontSmoothing: 'grayscale',
@@ -25972,7 +27133,9 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     boxSizing: 'border-box',
     // Fix font resize problem in iOS
     WebkitTextSizeAdjust: '100%'
-  };
+  }, enableColorScheme && {
+    colorScheme: theme.palette.mode
+  });
   const body = theme => _extends({
     color: theme.palette.text.primary
   }, theme.typography.body1, {
@@ -25982,11 +27145,11 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       backgroundColor: theme.palette.common.white
     }
   });
-  const styles$3 = theme => {
+  const styles$3 = (theme, enableColorScheme = false) => {
     var _theme$components, _theme$components$Mui;
 
     let defaultStyles = {
-      html,
+      html: html(theme, enableColorScheme),
       '*, *::before, *::after': {
         boxSizing: 'inherit'
       },
@@ -26021,12 +27184,13 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       name: 'MuiCssBaseline'
     });
     const {
-      children
+      children,
+      enableColorScheme = false
     } = props;
     return /*#__PURE__*/jsxRuntime_2(React__namespace.Fragment, {
-      children: [_GlobalStyles || (_GlobalStyles = /*#__PURE__*/jsxRuntime_1(GlobalStyles, {
-        styles: styles$3
-      })), children]
+      children: [/*#__PURE__*/jsxRuntime_1(GlobalStyles, {
+        styles: theme => styles$3(theme, enableColorScheme)
+      }), children]
     });
   }
 
@@ -26041,7 +27205,15 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * You can wrap a node.
      */
-    children: propTypes.node
+    children: propTypes.node,
+
+    /**
+     * Enable `color-scheme` css property to use `theme.palette.mode`.
+     * For more details, check out https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme
+     * For browser support, check out https://caniuse.com/?search=color-scheme
+     * @default false
+     */
+    enableColorScheme: propTypes.bool
   } ;
 
   // track, thumb and active are derieved from macOS 10.15.7
@@ -26341,7 +27513,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var Modal$1 = Modal;
 
@@ -26730,7 +27902,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The component used for the transition.
@@ -26854,7 +28026,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var DialogActions$1 = DialogActions;
 
@@ -26965,7 +28137,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var DialogContent$1 = DialogContent;
 
@@ -27034,7 +28206,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var DialogContentText$1 = DialogContentText;
 
@@ -27115,7 +28287,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var DialogTitle$1 = DialogTitle;
 
@@ -27247,11 +28419,11 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     ownerState
   }) => _extends({
     display: 'inline-block',
-    paddingLeft: theme.spacing(1.2),
-    paddingRight: theme.spacing(1.2)
+    paddingLeft: `calc(${theme.spacing(1)} * 1.2)`,
+    paddingRight: `calc(${theme.spacing(1)} * 1.2)`
   }, ownerState.orientation === 'vertical' && {
-    paddingTop: theme.spacing(1.2),
-    paddingBottom: theme.spacing(1.2)
+    paddingTop: `calc(${theme.spacing(1)} * 1.2)`,
+    paddingBottom: `calc(${theme.spacing(1)} * 1.2)`
   }));
   const Divider = /*#__PURE__*/React__namespace.forwardRef(function Divider(inProps, ref) {
     const props = useThemeProps({
@@ -27363,7 +28535,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The text alignment.
@@ -27745,7 +28917,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   var drawerClasses$1 = drawerClasses;
 
   const _excluded$1m = ["BackdropProps"],
-        _excluded2$9 = ["anchor", "BackdropProps", "children", "className", "elevation", "hideBackdrop", "ModalProps", "onClose", "open", "PaperProps", "SlideProps", "TransitionComponent", "transitionDuration", "variant"];
+        _excluded2$8 = ["anchor", "BackdropProps", "children", "className", "elevation", "hideBackdrop", "ModalProps", "onClose", "open", "PaperProps", "SlideProps", "TransitionComponent", "transitionDuration", "variant"];
 
   const overridesResolver$5 = (props, styles) => {
     const {
@@ -27888,7 +29060,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       variant = 'temporary'
     } = props,
           ModalProps = _objectWithoutPropertiesLoose(props.ModalProps, _excluded$1m),
-          other = _objectWithoutPropertiesLoose(props, _excluded2$9);
+          other = _objectWithoutPropertiesLoose(props, _excluded2$8);
 
     const theme = useTheme(); // Let's assume that the Drawer will always be rendered on user space.
     // We use this state is order to skip the appear transition during the
@@ -28042,7 +29214,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The duration for the transition, in milliseconds.
@@ -28297,7 +29469,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The variant to use.
@@ -28517,8 +29689,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       paddingTop: 0
     }, ownerState.type === 'search' && {
       // Improve type search style.
-      MozAppearance: 'textfield',
-      WebkitAppearance: 'textfield'
+      MozAppearance: 'textfield'
     });
   });
 
@@ -28821,7 +29992,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
             ownerState: _extends({}, ownerState, inputProps.ownerState)
           }, {
             ref: handleInputRef,
-            className: clsx(classes.input, inputProps.className, inputPropsProp.className),
+            className: clsx(classes.input, inputProps.className),
             onBlur: handleBlur,
             onChange: handleChange,
             onFocus: handleFocus
@@ -29047,7 +30218,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types).
@@ -29441,7 +30612,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types).
@@ -29765,7 +30936,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The variant to use.
@@ -29953,9 +31124,9 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     inputRef: refType$1,
 
     /**
-     * The text to be used in an enclosing label element.
+     * A text or an element to be used in an enclosing label element.
      */
-    label: propTypes.node,
+    label: propTypes.oneOfType([propTypes.element, propTypes.number, propTypes.string]).isRequired,
 
     /**
      * The position of the label.
@@ -29979,7 +31150,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The value of the component.
@@ -30086,7 +31257,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var FormGroup$1 = FormGroup;
 
@@ -30263,7 +31434,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The variant to use.
@@ -30444,7 +31615,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var FormLabel$1 = FormLabel;
 
@@ -30508,10 +31679,11 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     } else {
       const columnsBreakpointValues = resolveBreakpointValues({
         values: ownerState.columns,
-        base: theme.breakpoints.values
-      }); // Keep 7 significant numbers.
+        breakpoints: theme.breakpoints.values
+      });
+      const columnValue = typeof columnsBreakpointValues === 'object' ? columnsBreakpointValues[breakpoint] : columnsBreakpointValues; // Keep 7 significant numbers.
 
-      const width = `${Math.round(size / columnsBreakpointValues[breakpoint] * 10e7) / 10e5}%`;
+      const width = `${Math.round(size / columnValue * 10e7) / 10e5}%`;
       let more = {};
 
       if (ownerState.container && ownerState.item && ownerState.columnSpacing !== 0) {
@@ -30547,9 +31719,13 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     theme,
     ownerState
   }) {
+    const directionValues = resolveBreakpointValues({
+      values: ownerState.direction,
+      breakpoints: theme.breakpoints.values
+    });
     return handleBreakpoints({
       theme
-    }, ownerState.direction, propValue => {
+    }, directionValues, propValue => {
       const output = {
         flexDirection: propValue
       };
@@ -30563,7 +31739,6 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       return output;
     });
   }
-
   function generateRowGap({
     theme,
     ownerState
@@ -30575,9 +31750,13 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     let styles = {};
 
     if (container && rowSpacing !== 0) {
+      const rowSpacingValues = resolveBreakpointValues({
+        values: rowSpacing,
+        breakpoints: theme.breakpoints.values
+      });
       styles = handleBreakpoints({
         theme
-      }, rowSpacing, propValue => {
+      }, rowSpacingValues, propValue => {
         const themeSpacing = theme.spacing(propValue);
 
         if (themeSpacing !== '0px') {
@@ -30606,9 +31785,13 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     let styles = {};
 
     if (container && columnSpacing !== 0) {
+      const columnSpacingValues = resolveBreakpointValues({
+        values: columnSpacing,
+        breakpoints: theme.breakpoints.values
+      });
       styles = handleBreakpoints({
         theme
-      }, columnSpacing, propValue => {
+      }, columnSpacingValues, propValue => {
         const themeSpacing = theme.spacing(propValue);
 
         if (themeSpacing !== '0px') {
@@ -30826,18 +32009,26 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     item: propTypes.bool,
 
     /**
-     * Defines the number of grids the component is going to use.
-     * It's applied for the `lg` breakpoint and wider screens if not overridden.
+     * If a number, it sets the number of columns the grid item uses.
+     * It can't be greater than the total number of columns of the container (12 by default).
+     * If 'auto', the grid item's width matches its content.
+     * If false, the prop is ignored.
+     * If true, the grid item's width grows to use the space available in the grid container.
+     * The value is applied for the `lg` breakpoint and wider screens if not overridden.
      * @default false
      */
-    lg: propTypes.oneOfType([propTypes.oneOf(['auto', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]), propTypes.bool]),
+    lg: propTypes.oneOfType([propTypes.oneOf(['auto']), propTypes.number, propTypes.bool]),
 
     /**
-     * Defines the number of grids the component is going to use.
-     * It's applied for the `md` breakpoint and wider screens if not overridden.
+     * If a number, it sets the number of columns the grid item uses.
+     * It can't be greater than the total number of columns of the container (12 by default).
+     * If 'auto', the grid item's width matches its content.
+     * If false, the prop is ignored.
+     * If true, the grid item's width grows to use the space available in the grid container.
+     * The value is applied for the `md` breakpoint and wider screens if not overridden.
      * @default false
      */
-    md: propTypes.oneOfType([propTypes.oneOf(['auto', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]), propTypes.bool]),
+    md: propTypes.oneOfType([propTypes.oneOf(['auto']), propTypes.number, propTypes.bool]),
 
     /**
      * Defines the vertical space between the type `item` components.
@@ -30846,11 +32037,15 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     rowSpacing: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.number, propTypes.string])), propTypes.number, propTypes.object, propTypes.string]),
 
     /**
-     * Defines the number of grids the component is going to use.
-     * It's applied for the `sm` breakpoint and wider screens if not overridden.
+     * If a number, it sets the number of columns the grid item uses.
+     * It can't be greater than the total number of columns of the container (12 by default).
+     * If 'auto', the grid item's width matches its content.
+     * If false, the prop is ignored.
+     * If true, the grid item's width grows to use the space available in the grid container.
+     * The value is applied for the `sm` breakpoint and wider screens if not overridden.
      * @default false
      */
-    sm: propTypes.oneOfType([propTypes.oneOf(['auto', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]), propTypes.bool]),
+    sm: propTypes.oneOfType([propTypes.oneOf(['auto']), propTypes.number, propTypes.bool]),
 
     /**
      * Defines the space between the type `item` components.
@@ -30862,7 +32057,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * Defines the `flex-wrap` style property.
@@ -30872,18 +32067,26 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     wrap: propTypes.oneOf(['nowrap', 'wrap-reverse', 'wrap']),
 
     /**
-     * Defines the number of grids the component is going to use.
-     * It's applied for the `xl` breakpoint and wider screens.
+     * If a number, it sets the number of columns the grid item uses.
+     * It can't be greater than the total number of columns of the container (12 by default).
+     * If 'auto', the grid item's width matches its content.
+     * If false, the prop is ignored.
+     * If true, the grid item's width grows to use the space available in the grid container.
+     * The value is applied for the `xl` breakpoint and wider screens if not overridden.
      * @default false
      */
-    xl: propTypes.oneOfType([propTypes.oneOf(['auto', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]), propTypes.bool]),
+    xl: propTypes.oneOfType([propTypes.oneOf(['auto']), propTypes.number, propTypes.bool]),
 
     /**
-     * Defines the number of grids the component is going to use.
-     * It's applied for all the screen sizes with the lowest priority.
+     * If a number, it sets the number of columns the grid item uses.
+     * It can't be greater than the total number of columns of the container (12 by default).
+     * If 'auto', the grid item's width matches its content.
+     * If false, the prop is ignored.
+     * If true, the grid item's width grows to use the space available in the grid container.
+     * The value is applied for all the screen sizes with the lowest priority.
      * @default false
      */
-    xs: propTypes.oneOfType([propTypes.oneOf(['auto', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]), propTypes.bool]),
+    xs: propTypes.oneOfType([propTypes.oneOf(['auto']), propTypes.number, propTypes.bool]),
 
     /**
      * If `true`, it sets `min-width: 0` on the item.
@@ -32015,7 +33218,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   Icon.muiName = 'Icon';
   var Icon$1 = Icon;
@@ -32192,7 +33395,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The variant to use.
@@ -32380,7 +33583,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var ImageListItem$1 = ImageListItem;
 
@@ -32606,7 +33809,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * Title to be displayed.
@@ -32921,7 +34124,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types).
@@ -33116,7 +34319,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The variant to use.
@@ -33329,7 +34532,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The variant to use.
@@ -33678,7 +34881,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The value of the progress indicator for the determinate and buffer variants.
@@ -33911,7 +35114,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * `classes` prop applied to the [`Typography`](/api/typography/) element.
@@ -34079,7 +35282,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var List$1 = List;
 
@@ -34322,7 +35525,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var ListItemButton$1 = ListItemButton;
 
@@ -34418,13 +35621,13 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   ListItemSecondaryAction.muiName = 'ListItemSecondaryAction';
   var ListItemSecondaryAction$1 = ListItemSecondaryAction;
 
   const _excluded$Y = ["className"],
-        _excluded2$8 = ["alignItems", "autoFocus", "button", "children", "className", "component", "components", "componentsProps", "ContainerComponent", "ContainerProps", "dense", "disabled", "disableGutters", "disablePadding", "divider", "focusVisibleClassName", "secondaryAction", "selected"];
+        _excluded2$7 = ["alignItems", "autoFocus", "button", "children", "className", "component", "components", "componentsProps", "ContainerComponent", "ContainerProps", "dense", "disabled", "disableGutters", "disablePadding", "divider", "focusVisibleClassName", "secondaryAction", "selected"];
   const overridesResolver$2 = (props, styles) => {
     const {
       ownerState
@@ -34567,7 +35770,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       selected = false
     } = props,
           ContainerProps = _objectWithoutPropertiesLoose(props.ContainerProps, _excluded$Y),
-          other = _objectWithoutPropertiesLoose(props, _excluded2$8);
+          other = _objectWithoutPropertiesLoose(props, _excluded2$7);
 
     const context = React__namespace.useContext(ListContext$1);
     const childContext = {
@@ -34819,7 +36022,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var ListItem$1 = ListItem;
 
@@ -34913,7 +36116,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var ListItemAvatar$1 = ListItemAvatar;
 
@@ -35011,7 +36214,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var ListItemIcon$1 = ListItemIcon;
 
@@ -35193,7 +36396,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var ListItemText$1 = ListItemText;
 
@@ -35506,7 +36709,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   var popoverClasses$1 = popoverClasses;
 
   const _excluded$T = ["onEntering"],
-        _excluded2$7 = ["action", "anchorEl", "anchorOrigin", "anchorPosition", "anchorReference", "children", "className", "container", "elevation", "marginThreshold", "open", "PaperProps", "transformOrigin", "TransitionComponent", "transitionDuration", "TransitionProps"];
+        _excluded2$6 = ["action", "anchorEl", "anchorOrigin", "anchorPosition", "anchorReference", "children", "className", "container", "elevation", "marginThreshold", "open", "PaperProps", "transformOrigin", "TransitionComponent", "transitionDuration", "TransitionProps"];
   function getOffsetTop(rect, vertical) {
     let offset = 0;
 
@@ -35608,7 +36811,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       } = {}
     } = props,
           TransitionProps = _objectWithoutPropertiesLoose(props.TransitionProps, _excluded$T),
-          other = _objectWithoutPropertiesLoose(props, _excluded2$7);
+          other = _objectWithoutPropertiesLoose(props, _excluded2$6);
 
     const paperRef = React__namespace.useRef();
     const handlePaperRef = useForkRef(paperRef, PaperProps.ref);
@@ -35947,7 +37150,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * This is the point on the popover which
@@ -35999,7 +37202,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   var menuClasses$1 = menuClasses;
 
   const _excluded$S = ["onEntering"],
-        _excluded2$6 = ["autoFocus", "children", "disableAutoFocusItem", "MenuListProps", "onClose", "open", "PaperProps", "PopoverClasses", "transitionDuration", "TransitionProps", "variant"];
+        _excluded2$5 = ["autoFocus", "children", "disableAutoFocusItem", "MenuListProps", "onClose", "open", "PaperProps", "PopoverClasses", "transitionDuration", "TransitionProps", "variant"];
   const RTL_ORIGIN = {
     vertical: 'top',
     horizontal: 'right'
@@ -36069,7 +37272,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       variant = 'selectedMenu'
     } = props,
           TransitionProps = _objectWithoutPropertiesLoose(props.TransitionProps, _excluded$S),
-          other = _objectWithoutPropertiesLoose(props, _excluded2$6);
+          other = _objectWithoutPropertiesLoose(props, _excluded2$5);
 
     const theme = useTheme();
     const isRtl = theme.direction === 'rtl';
@@ -36250,7 +37453,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The length of the transition in `ms`, or 'auto'
@@ -36533,7 +37736,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * @default 0
@@ -36746,7 +37949,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The variant to use.
@@ -36759,7 +37962,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   function getNativeSelectUtilityClasses(slot) {
     return generateUtilityClass('MuiNativeSelect', slot);
   }
-  const nativeSelectClasses = generateUtilityClasses('MuiNativeSelect', ['root', 'select', 'filled', 'outlined', 'standard', 'disabled', 'icon', 'iconOpen', 'iconFilled', 'iconOutlined', 'iconStandard', 'nativeInput']);
+  const nativeSelectClasses = generateUtilityClasses('MuiNativeSelect', ['root', 'select', 'multiple', 'filled', 'outlined', 'standard', 'disabled', 'icon', 'iconOpen', 'iconFilled', 'iconOutlined', 'iconStandard', 'nativeInput']);
   var nativeSelectClasses$1 = nativeSelectClasses;
 
   const _excluded$P = ["className", "disabled", "IconComponent", "inputRef", "variant"];
@@ -36769,10 +37972,11 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       classes,
       variant,
       disabled,
+      multiple,
       open
     } = ownerState;
     const slots = {
-      select: ['select', variant, disabled && 'disabled'],
+      select: ['select', variant, disabled && 'disabled', multiple && 'multiple'],
       icon: ['icon', `icon${capitalize(variant)}`, open && 'iconOpen', disabled && 'disabled']
     };
     return composeClasses(slots, getNativeSelectUtilityClasses, classes);
@@ -36839,7 +38043,9 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       const {
         ownerState
       } = props;
-      return [styles.select, styles[ownerState.variant]];
+      return [styles.select, styles[ownerState.variant], {
+        [`&.${nativeSelectClasses$1.multiple}`]: styles.multiple
+      }];
     }
   })(nativeSelectSelectStyles);
   const nativeSelectIconStyles = ({
@@ -36973,7 +38179,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   var NativeSelectInput$1 = NativeSelectInput;
 
   const _excluded$O = ["className", "children", "classes", "IconComponent", "input", "inputProps", "variant"],
-        _excluded2$5 = ["root"];
+        _excluded2$4 = ["root"];
 
   const useUtilityClasses$D = ownerState => {
     const {
@@ -37020,7 +38226,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
 
     const classes = useUtilityClasses$D(ownerState);
 
-    const otherClasses = _objectWithoutPropertiesLoose(classesProp, _excluded2$5);
+    const otherClasses = _objectWithoutPropertiesLoose(classesProp, _excluded2$4);
 
     return /*#__PURE__*/React__namespace.cloneElement(input, _extends({
       // Most of the logic is implemented in `NativeSelectInput`.
@@ -37091,7 +38297,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The `input` value. The DOM API casts this to a string.
@@ -37128,7 +38334,9 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   })(({
     ownerState,
     theme
-  }) => _extends({}, ownerState.label === undefined && {
+  }) => _extends({
+    float: 'unset'
+  }, ownerState.label === undefined && {
     padding: 0,
     lineHeight: '11px',
     // sync with `height` in `legend` styles
@@ -37138,7 +38346,9 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     })
   }, ownerState.label !== undefined && _extends({
     display: 'block',
+    // Fix conflict with normalize.css and sanitize.css
     width: 'auto',
+    // Fix conflict with bootstrap
     padding: 0,
     height: 11,
     // sync with `lineHeight` in `legend` styles
@@ -37149,6 +38359,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       duration: 50,
       easing: theme.transitions.easing.easeOut
     }),
+    whiteSpace: 'nowrap',
     '& > span': {
       paddingLeft: 5,
       paddingRight: 5,
@@ -37534,7 +38745,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types).
@@ -37686,7 +38897,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
   }), 'NavigateNext');
 
-  const _excluded$K = ["className", "color", "component", "disabled", "page", "selected", "shape", "size", "type", "variant"];
+  const _excluded$K = ["className", "color", "component", "components", "disabled", "page", "selected", "shape", "size", "type", "variant"];
 
   const overridesResolver = (props, styles) => {
     const {
@@ -37885,6 +39096,12 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       className,
       color = 'standard',
       component,
+      components = {
+        first: FirstPageIcon,
+        last: LastPageIcon,
+        next: NavigateNextIcon,
+        previous: NavigateBeforeIcon
+      },
       disabled = false,
       page,
       selected = false,
@@ -37908,15 +39125,15 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     const theme = useTheme();
     const classes = useUtilityClasses$B(ownerState);
     const normalizedIcons = theme.direction === 'rtl' ? {
-      previous: NavigateNextIcon,
-      next: NavigateBeforeIcon,
-      last: FirstPageIcon,
-      first: LastPageIcon
+      previous: components.next || NavigateNextIcon,
+      next: components.previous || NavigateBeforeIcon,
+      last: components.first || FirstPageIcon,
+      first: components.last || LastPageIcon
     } : {
-      previous: NavigateBeforeIcon,
-      next: NavigateNextIcon,
-      first: FirstPageIcon,
-      last: LastPageIcon
+      previous: components.previous || NavigateBeforeIcon,
+      next: components.next || NavigateNextIcon,
+      first: components.first || FirstPageIcon,
+      last: components.last || LastPageIcon
     };
     const Icon = normalizedIcons[type];
     return type === 'start-ellipsis' || type === 'end-ellipsis' ? /*#__PURE__*/jsxRuntime_1(PaginationItemEllipsis, {
@@ -37975,6 +39192,22 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
      */
     component: propTypes.elementType,
 
+    /**
+     * The components used for first, last, next & previous item type
+     * @default {
+     *   first: FirstPageIcon,
+     *   last: LastPageIcon,
+     *   next: NavigateNextIcon,
+     *   previous: NavigateBeforeIcon,
+     * }
+     */
+    components: propTypes.shape({
+      first: propTypes.elementType,
+      last: propTypes.elementType,
+      next: propTypes.elementType,
+      previous: propTypes.elementType
+    }),
+
     /**
      * If `true`, the component is disabled.
      * @default false
@@ -38009,7 +39242,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The type of pagination item.
@@ -38275,7 +39508,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The variant to use.
@@ -38377,8 +39610,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   /**
    * @ignore - internal component.
    */
-
-  const RadioGroupContext = /*#__PURE__*/React__namespace.createContext();
+  const RadioGroupContext = /*#__PURE__*/React__namespace.createContext(undefined);
 
   {
     RadioGroupContext.displayName = 'RadioGroupContext';
@@ -38606,7 +39838,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The value of the component. The DOM API casts this to a string.
@@ -38728,7 +39960,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   var ratingClasses$1 = ratingClasses;
 
   const _excluded$G = ["value"],
-        _excluded2$4 = ["className", "defaultValue", "disabled", "emptyIcon", "emptyLabelText", "getLabelText", "highlightSelectedOnly", "icon", "IconContainerComponent", "max", "name", "onChange", "onChangeActive", "onMouseLeave", "onMouseMove", "precision", "readOnly", "size", "value"];
+        _excluded2$3 = ["className", "defaultValue", "disabled", "emptyIcon", "emptyLabelText", "getLabelText", "highlightSelectedOnly", "icon", "IconContainerComponent", "max", "name", "onChange", "onChangeActive", "onMouseLeave", "onMouseMove", "precision", "readOnly", "size", "value"];
 
   function clamp$1(value, min, max) {
     if (value < min) {
@@ -39028,7 +40260,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       size = 'medium',
       value: valueProp
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded2$4);
+          other = _objectWithoutPropertiesLoose(props, _excluded2$3);
 
     const name = useId(nameProp);
     const [valueDerived, setValueState] = useControlled({
@@ -39423,7 +40655,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The rating value.
@@ -39438,7 +40670,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   const scopedCssBaselineClasses = generateUtilityClasses('MuiScopedCssBaseline', ['root']);
   var scopedCssBaselineClasses$1 = scopedCssBaselineClasses;
 
-  const _excluded$F = ["className", "component"];
+  const _excluded$F = ["className", "component", "enableColorScheme"];
 
   const useUtilityClasses$x = ownerState => {
     const {
@@ -39455,15 +40687,18 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     slot: 'Root',
     overridesResolver: (props, styles) => styles.root
   })(({
-    theme
-  }) => _extends({}, html, body(theme), {
-    '& *, & *::before, & *::after': {
-      boxSizing: 'inherit'
-    },
-    '& strong, & b': {
-      fontWeight: theme.typography.fontWeightBold
-    }
-  }));
+    theme,
+    ownerState
+  }) => {
+    return _extends({}, html(theme, ownerState.enableColorScheme), body(theme), {
+      '& *, & *::before, & *::after': {
+        boxSizing: 'inherit'
+      },
+      '& strong, & b': {
+        fontWeight: theme.typography.fontWeightBold
+      }
+    });
+  });
   const ScopedCssBaseline = /*#__PURE__*/React__namespace.forwardRef(function ScopedCssBaseline(inProps, ref) {
     const props = useThemeProps({
       props: inProps,
@@ -39515,14 +40750,21 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
      * The component used for the root node.
      * Either a string to use a HTML element or a component.
      */
-    component: propTypes.elementType
+    component: propTypes.elementType,
+
+    /**
+     * Enable `color-scheme` css property to use `theme.palette.mode`.
+     * For more details, check out https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme
+     * For browser support, check out https://caniuse.com/?search=color-scheme
+     */
+    enableColorScheme: propTypes.bool
   } ;
   var ScopedCssBaseline$1 = ScopedCssBaseline;
 
   function getSelectUtilityClasses(slot) {
     return generateUtilityClass('MuiSelect', slot);
   }
-  const selectClasses = generateUtilityClasses('MuiSelect', ['root', 'select', 'filled', 'outlined', 'standard', 'disabled', 'focused', 'icon', 'iconOpen', 'iconFilled', 'iconOutlined', 'iconStandard', 'nativeInput']);
+  const selectClasses = generateUtilityClasses('MuiSelect', ['select', 'multiple', 'filled', 'outlined', 'standard', 'disabled', 'focused', 'icon', 'iconOpen', 'iconFilled', 'iconOutlined', 'iconStandard', 'nativeInput']);
   var selectClasses$1 = selectClasses;
 
   const _excluded$E = ["aria-describedby", "aria-label", "autoFocus", "autoWidth", "children", "className", "defaultValue", "disabled", "displayEmpty", "IconComponent", "inputRef", "labelId", "MenuProps", "multiple", "name", "onBlur", "onChange", "onClose", "onFocus", "onOpen", "open", "readOnly", "renderValue", "SelectDisplayProps", "tabIndex", "type", "value", "variant"];
@@ -39538,6 +40780,8 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
         [`&.${selectClasses$1.select}`]: styles.select
       }, {
         [`&.${selectClasses$1.select}`]: styles[ownerState.variant]
+      }, {
+        [`&.${selectClasses$1.multiple}`]: styles.multiple
       }];
     }
   })(nativeSelectSelectStyles, {
@@ -39595,10 +40839,11 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       classes,
       variant,
       disabled,
+      multiple,
       open
     } = ownerState;
     const slots = {
-      select: ['select', variant, disabled && 'disabled'],
+      select: ['select', variant, disabled && 'disabled', multiple && 'multiple'],
       icon: ['icon', `icon${capitalize(variant)}`, open && 'iconOpen', disabled && 'disabled'],
       nativeInput: ['nativeInput']
     };
@@ -39874,7 +41119,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       }
 
       return /*#__PURE__*/React__namespace.cloneElement(child, {
-        'aria-selected': selected ? 'true' : undefined,
+        'aria-selected': selected ? 'true' : 'false',
         onClick: handleItemClick(child),
         onKeyUp: event => {
           if (event.key === ' ') {
@@ -39908,7 +41153,11 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     }
 
     if (computeDisplay) {
-      display = multiple ? displayMultiple.join(', ') : displaySingle;
+      if (multiple) {
+        display = displayMultiple.reduce((prev, curr) => [prev, ', ', curr]);
+      } else {
+        display = displaySingle;
+      }
     } // Avoid performing a layout computation in the render method.
 
 
@@ -40176,17 +41425,13 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
 
   var _Input, _FilledInput;
 
-  const _excluded$D = ["autoWidth", "children", "classes", "className", "displayEmpty", "IconComponent", "id", "input", "inputProps", "label", "labelId", "MenuProps", "multiple", "native", "onClose", "onOpen", "open", "renderValue", "SelectDisplayProps", "variant"],
-        _excluded2$3 = ["root"];
+  const _excluded$D = ["autoWidth", "children", "classes", "className", "displayEmpty", "IconComponent", "id", "input", "inputProps", "label", "labelId", "MenuProps", "multiple", "native", "onClose", "onOpen", "open", "renderValue", "SelectDisplayProps", "variant"];
 
   const useUtilityClasses$v = ownerState => {
     const {
       classes
     } = ownerState;
-    const slots = {
-      root: ['root']
-    };
-    return composeClasses(slots, getSelectUtilityClasses, classes);
+    return classes;
   };
 
   const Select = /*#__PURE__*/React__namespace.forwardRef(function Select(inProps, ref) {
@@ -40240,9 +41485,6 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     });
 
     const classes = useUtilityClasses$v(ownerState);
-
-    const otherClasses = _objectWithoutPropertiesLoose(classesProp, _excluded2$3);
-
     const inputComponentRef = useForkRef(ref, InputComponent.ref);
     return /*#__PURE__*/React__namespace.cloneElement(InputComponent, _extends({
       // Most of the logic is implemented in `SelectInput`.
@@ -40270,13 +41512,13 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
           id
         }, SelectDisplayProps)
       }, inputProps, {
-        classes: inputProps ? deepmerge(otherClasses, inputProps.classes) : otherClasses
+        classes: inputProps ? deepmerge(classes, inputProps.classes) : classes
       }, input ? input.props.inputProps : {})
     }, multiple && native && variant === 'outlined' ? {
       notched: true
     } : {}, {
       ref: inputComponentRef,
-      className: clsx(classes.root, InputComponent.props.className, className)
+      className: clsx(InputComponent.props.className, className)
     }, other));
   });
   Select.propTypes
@@ -40429,7 +41671,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The `input` value. Providing an empty string will select no options.
@@ -40659,7 +41901,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The type of content that will be rendered.
@@ -41298,7 +42540,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * Tab index attribute of the hidden `input` element.
@@ -41480,7 +42722,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var SnackbarContent$1 = SnackbarContent;
 
@@ -41852,7 +43094,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The component used for the transition.
@@ -42618,7 +43860,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The component used for the transition.
@@ -43243,7 +44485,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
         id: id,
         transition: true
       }, interactiveWrapperListeners, popperProps, {
-        className: clsx(classes.popper, (_componentsProps$popp = componentsProps.popper) == null ? void 0 : _componentsProps$popp.className),
+        className: clsx(classes.popper, PopperProps == null ? void 0 : PopperProps.className, (_componentsProps$popp = componentsProps.popper) == null ? void 0 : _componentsProps$popp.className),
         popperOptions: popperOptions,
         children: ({
           TransitionProps: TransitionPropsInner
@@ -43308,6 +44550,8 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
 
     /**
      * The props used for each slot inside the Tooltip.
+     * Note that `componentsProps.popper` prop values win over `PopperProps`
+     * and `componentsProps.transition` prop values win over `TransitionProps` if both are applied.
      * @default {}
      */
     componentsProps: propTypes.object,
@@ -43428,7 +44672,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * Tooltip title. Zero-length titles string are never displayed.
@@ -43687,7 +44931,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * `classes` prop applied to the [`Tooltip`](/api/tooltip/) element.
@@ -43857,7 +45101,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   SpeedDialIcon.muiName = 'SpeedDialIcon';
   var SpeedDialIcon$1 = SpeedDialIcon;
@@ -43896,7 +45140,10 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       display: 'flex'
     }, handleBreakpoints({
       theme
-    }, ownerState.direction, propValue => ({
+    }, resolveBreakpointValues({
+      values: ownerState.direction,
+      breakpoints: theme.breakpoints.values
+    }), propValue => ({
       flexDirection: propValue
     })));
 
@@ -44009,7 +45256,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop, which allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var Stack$1 = Stack;
 
@@ -44207,7 +45454,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var Step$1 = Step;
 
@@ -44386,7 +45633,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var StepIcon$1 = StepIcon;
 
@@ -44620,7 +45867,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   StepLabel.muiName = 'StepLabel';
   var StepLabel$1 = StepLabel;
@@ -44754,7 +46001,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var StepButton$1 = StepButton;
 
@@ -44889,7 +46136,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var StepConnector$1 = StepConnector;
 
@@ -45025,7 +46272,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The component used for the transition.
@@ -45205,7 +46452,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var Stepper$1 = Stepper;
 
@@ -46216,7 +47463,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The value of the component. The DOM API casts this to a string.
@@ -46491,7 +47738,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * You can provide your own value. Otherwise, we fallback to the child position index.
@@ -46658,7 +47905,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var Table$1 = Table;
 
@@ -46763,7 +48010,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var TableBody$1 = TableBody;
 
@@ -46983,7 +48230,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * Specify the cell type.
@@ -47075,7 +48322,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var TableContainer$1 = TableContainer;
 
@@ -47168,7 +48415,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var TableFooter$1 = TableFooter;
 
@@ -47261,7 +48508,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var TableHead$1 = TableHead;
 
@@ -47381,7 +48628,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The variant to use.
@@ -47631,7 +48878,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     to,
     count
   }) {
-    return `${from}-${to} of ${count !== -1 ? count : `more than ${to}`}`;
+    return `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`;
   }
 
   function defaultGetAriaLabel(type) {
@@ -47836,7 +49083,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
      *
      * For localization purposes, you can use the provided [translations](/guides/localization/).
      * @default function defaultLabelDisplayedRows({ from, to, count }) {
-     *   return `${from}-${to} of ${count !== -1 ? count : `more than ${to}`}`;
+     *   return `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`;
      * }
      */
     labelDisplayedRows: propTypes.func,
@@ -47931,7 +49178,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var TablePagination$1 = TablePagination;
 
@@ -48067,7 +49314,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var TableRow$1 = TableRow;
 
@@ -48248,7 +49495,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var TableSortLabel$1 = TableSortLabel;
 
@@ -48481,7 +49728,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var TabScrollButton$1 = TabScrollButton;
 
@@ -49275,7 +50522,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * Props applied to the tab indicator element.
@@ -49722,7 +50969,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types).
@@ -49964,7 +51211,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The value to associate with the button when selected in a
@@ -50226,7 +51473,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The currently selected value within the group or an array of selected
@@ -50382,6 +51629,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   exports.Paper = Paper$1;
   exports.Popover = Popover$1;
   exports.Popper = Popper$1;
+  exports.PopperUnstyled = PopperUnstyled$1;
   exports.Portal = Portal$1;
   exports.Radio = Radio$1;
   exports.RadioGroup = RadioGroup$1;
@@ -50419,7 +51667,9 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   exports.Switch = Switch$1;
   exports.SwitchUnstyled = SwitchUnstyled$1;
   exports.Tab = Tab$1;
+  exports.TabPanelUnstyled = TabPanelUnstyled$1;
   exports.TabScrollButton = TabScrollButton$1;
+  exports.TabUnstyled = TabUnstyled$1;
   exports.Table = Table$1;
   exports.TableBody = TableBody$1;
   exports.TableCell = TableCell$1;
@@ -50430,6 +51680,9 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   exports.TableRow = TableRow$1;
   exports.TableSortLabel = TableSortLabel$1;
   exports.Tabs = Tabs$1;
+  exports.TabsContext = Context$1;
+  exports.TabsListUnstyled = TabsListUnstyled$1;
+  exports.TabsUnstyled = TabsUnstyled$1;
   exports.TextField = TextField$1;
   exports.TextareaAutosize = TextareaAutosize$1;
   exports.ThemeProvider = ThemeProvider;
@@ -50500,6 +51753,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   exports.easing = easing;
   exports.emphasize = emphasize;
   exports.experimentalStyled = styled$1;
+  exports.experimental_sx = sx;
   exports.extractEventHandlers = extractEventHandlers;
   exports.fabClasses = fabClasses$1;
   exports.filledInputClasses = filledInputClasses$1;
@@ -50587,6 +51841,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   exports.getOutlinedInputUtilityClass = getOutlinedInputUtilityClass;
   exports.getPaginationItemUtilityClass = getPaginationItemUtilityClass;
   exports.getPaginationUtilityClass = getPaginationUtilityClass;
+  exports.getPanelId = getPanelId;
   exports.getPaperUtilityClass = getPaperUtilityClass;
   exports.getPopoverUtilityClass = getPopoverUtilityClass;
   exports.getRadioUtilityClass = getRadioUtilityClass;
@@ -50610,7 +51865,10 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   exports.getSvgIconUtilityClass = getSvgIconUtilityClass;
   exports.getSwitchUnstyledUtilityClass = getSwitchUnstyledUtilityClass;
   exports.getSwitchUtilityClass = getSwitchUtilityClass;
+  exports.getTabId = getTabId;
+  exports.getTabPanelUnstyledUtilityClass = getTabPanelUnstyledUtilityClass;
   exports.getTabScrollButtonUtilityClass = getTabScrollButtonUtilityClass;
+  exports.getTabUnstyledUtilityClass = getTabUnstyledUtilityClass;
   exports.getTabUtilityClass = getTabUtilityClass;
   exports.getTableBodyUtilityClass = getTableBodyUtilityClass;
   exports.getTableCellUtilityClass = getTableCellUtilityClass;
@@ -50621,6 +51879,8 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   exports.getTableRowUtilityClass = getTableRowUtilityClass;
   exports.getTableSortLabelUtilityClass = getTableSortLabelUtilityClass;
   exports.getTableUtilityClass = getTableUtilityClass;
+  exports.getTabsListUnstyledUtilityClass = getTabsListUnstyledUtilityClass;
+  exports.getTabsUnstyledUtilityClass = getTabsUnstyledUtilityClass;
   exports.getTabsUtilityClass = getTabsUtilityClass;
   exports.getTextFieldUtilityClass = getTextFieldUtilityClass;
   exports.getToggleButtonGroupUtilityClass = getToggleButtonGroupUtilityClass;
@@ -50699,7 +51959,9 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   exports.switchClasses = switchClasses$1;
   exports.switchUnstyledClasses = classes;
   exports.tabClasses = tabClasses$1;
+  exports.tabPanelUnstyledClasses = tabPanelUnstyledClasses$1;
   exports.tabScrollButtonClasses = tabScrollButtonClasses$1;
+  exports.tabUnstyledClasses = tabUnstyledClasses$1;
   exports.tableBodyClasses = tableBodyClasses$1;
   exports.tableCellClasses = tableCellClasses$1;
   exports.tableClasses = tableClasses$1;
@@ -50710,6 +51972,8 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   exports.tableRowClasses = tableRowClasses$1;
   exports.tableSortLabelClasses = tableSortLabelClasses$1;
   exports.tabsClasses = tabsClasses$1;
+  exports.tabsListUnstyledClasses = tabsListUnstyledClasses$1;
+  exports.tabsUnstyledClasses = tabsUnstyledClasses$1;
   exports.textFieldClasses = textFieldClasses$1;
   exports.toggleButtonClasses = toggleButtonClasses$1;
   exports.toggleButtonGroupClasses = toggleButtonGroupClasses$1;
@@ -50739,6 +52003,11 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   exports.useRadioGroup = useRadioGroup;
   exports.useScrollTrigger = useScrollTrigger;
   exports.useSwitch = useSwitch;
+  exports.useTab = useTab$1;
+  exports.useTabContext = useTabContext;
+  exports.useTabPanel = useTabPanel$1;
+  exports.useTabs = useTabs$1;
+  exports.useTabsList = useTabsList$1;
   exports.useTheme = useTheme;
   exports.useThemeProps = useThemeProps;
   exports.withStyles = withStyles;