@mui/material 5.0.5 → 5.2.0

package/umd/material-ui.development.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.0.5
+/** @license MUI v5.2.0
  *
  * 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
@@ -4973,7 +4998,7 @@
   const useEnhancedEffect = typeof window !== 'undefined' ? React__namespace.useLayoutEffect : React__namespace.useEffect;
   var useEnhancedEffect$1 = useEnhancedEffect;
 
-  function useId(idOverride) {
+  function useRandomId(idOverride) {
     const [defaultId, setDefaultId] = React__namespace.useState(idOverride);
     const id = idOverride || defaultId;
     React__namespace.useEffect(() => {
@@ -4986,6 +5011,24 @@
     }, [defaultId]);
     return id;
   }
+  /**
+   *
+   * @example <div id={useId()} />
+   * @param idOverride
+   * @returns {string}
+   */
+
+
+  function useReactId(idOverride) {
+    // TODO: Remove `React as any` once `useId` is part of stable types.
+    if (React__namespace.useId !== undefined) {
+      const reactId = React__namespace.useId();
+      return idOverride != null ? idOverride : reactId;
+    } // eslint-disable-next-line react-hooks/rules-of-hooks -- `React.useId` is invariant at runtime.
+
+
+    return useRandomId(idOverride);
+  }
 
   function unsupportedProp(props, propName, componentName, location, propFullName) {
 
@@ -5423,12 +5466,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 +5524,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 +5533,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 +5574,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 +6250,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 +6334,32 @@
     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
     });
   }
 
@@ -6300,7 +6404,7 @@
   	return str;
   }
 
-  const _excluded$2n = ["values", "unit", "step"];
+  const _excluded$2s = ["values", "unit", "step"];
 
   function createBreakpoints(breakpoints) {
     const {
@@ -6310,18 +6414,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 +6500,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 +6509,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 +6631,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 +6647,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 +6678,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 +6699,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 +6712,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 +6793,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;
@@ -6716,11 +6822,15 @@
 
       const muiStyledResolver = (styleArg, ...expressions) => {
         const expressionsWithDefaultTheme = expressions ? expressions.map(stylesArg => {
-          return typeof stylesArg === 'function' ? _ref => {
+          // On the server emotion doesn't use React.forwardRef for creating components, so the created
+          // component stays as a function. This condition makes sure that we do not interpolate functions
+          // which are basically components used as a selectors.
+          // eslint-disable-next-line no-underscore-dangle
+          return typeof stylesArg === 'function' && stylesArg.__emotion_real !== stylesArg ? _ref => {
             let {
               theme: themeInput
             } = _ref,
-                other = _objectWithoutPropertiesLoose(_ref, _excluded2$c);
+                other = _objectWithoutPropertiesLoose(_ref, _excluded2$b);
 
             return stylesArg(_extends({
               theme: isEmpty$1(themeInput) ? defaultTheme : themeInput
@@ -7185,8 +7295,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'));
@@ -7200,7 +7310,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: {}
@@ -7251,7 +7361,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({
@@ -7366,7 +7476,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       selectOnFocus = !props.freeSolo,
       value: valueProp
     } = props;
-    const id = useId(idProp);
+    const id = useReactId(idProp);
     let getOptionLabel = getOptionLabelProp;
 
     getOptionLabel = option => {
@@ -7405,6 +7515,14 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     });
     const [focused, setFocused] = React__namespace.useState(false);
     const resetInputValue = React__namespace.useCallback((event, newValue) => {
+      // retain current `inputValue` if new option isn't selected and `clearOnBlur` is false
+      // When `multiple` is enabled, `newValue` is an array of all selected items including the newly selected item
+      const isOptionSelected = multiple ? value.length < newValue.length : newValue !== null;
+
+      if (!isOptionSelected && !clearOnBlur) {
+        return;
+      }
+
       let newInputValue;
 
       if (multiple) {
@@ -7425,7 +7543,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       if (onInputChange) {
         onInputChange(event, newInputValue, 'reset');
       }
-    }, [getOptionLabel, inputValue, multiple, onInputChange, setInputValueState]);
+    }, [getOptionLabel, inputValue, multiple, onInputChange, setInputValueState, clearOnBlur, value]);
     const prevValue = React__namespace.useRef();
     React__namespace.useEffect(() => {
       const valueChange = value !== prevValue.current;
@@ -8363,9 +8481,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
@@ -8388,14 +8506,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({
@@ -8469,9 +8587,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,
@@ -8508,7 +8626,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,
@@ -8547,7 +8665,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';
@@ -8905,9 +9023,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,
@@ -8942,7 +9060,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);
@@ -8968,7 +9086,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
@@ -9058,7 +9176,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 !== '';
@@ -9108,12 +9226,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,
@@ -9440,7 +9558,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;
 
@@ -9477,7 +9595,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,
@@ -10421,9 +10539,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,
@@ -10493,7 +10611,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({});
@@ -10570,7 +10688,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;
@@ -12752,12 +12870,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;
     }
@@ -12791,6 +12907,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     const {
       anchorEl,
       children,
+      direction,
       disablePortal,
       modifiers,
       open,
@@ -12799,7 +12916,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);
@@ -12810,8 +12927,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
@@ -12905,11 +13021,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,
@@ -12920,7 +13037,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);
 
@@ -12945,6 +13062,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,
@@ -12970,7 +13088,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       }))
     });
   });
-  Popper.propTypes
+  PopperUnstyled.propTypes
   /* remove-proptypes */
   = {
     // ----------------------------- Warning --------------------------------
@@ -13020,6 +13138,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
@@ -13093,7 +13217,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);
@@ -13150,7 +13274,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) {
@@ -13310,7 +13434,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,
@@ -13372,7 +13496,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.
@@ -13802,7 +13926,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
@@ -14268,7 +14392,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.
@@ -14298,7 +14422,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,
@@ -14438,7 +14562,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;
@@ -14467,7 +14591,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
@@ -14653,6 +14777,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 = useReactId();
+    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: {
@@ -14838,7 +15851,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]
@@ -15693,7 +16706,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.
@@ -17117,7 +18130,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.
@@ -17289,7 +18302,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.
@@ -17566,7 +18579,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.
@@ -17678,7 +18691,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;
 
@@ -17754,7 +18767,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;
 
@@ -18693,7 +19706,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
@@ -18911,7 +19924,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;
 
@@ -18966,7 +19979,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
@@ -18983,8 +19997,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
@@ -18992,7 +20007,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' && {
@@ -19127,7 +20142,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;
 
@@ -19401,7 +20416,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.
@@ -19589,7 +20604,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.
@@ -19701,7 +20716,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 AlertTitle$1 = AlertTitle;
 
@@ -19869,10 +20884,136 @@ 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 AppBar$1 = AppBar;
 
+  /**
+   *
+   * 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
+    }));
+  });
+  Popper.propTypes
+  /* remove-proptypes */
+  = {
+    // ----------------------------- Warning --------------------------------
+    // | These PropTypes are generated from the TypeScript type definitions |
+    // |     To update them edit TypeScript types and run "yarn proptypes"  |
+    // ----------------------------------------------------------------------
+
+    /**
+     * 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.
+     */
+    anchorEl: propTypes
+    /* @typescript-to-proptypes-ignore */
+    .oneOfType([HTMLElementType, propTypes.object, propTypes.func]),
+
+    /**
+     * Popper render function or node.
+     */
+    children: propTypes
+    /* @typescript-to-proptypes-ignore */
+    .oneOfType([propTypes.node, propTypes.func]),
+
+    /**
+     * 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.
+     */
+    container: propTypes
+    /* @typescript-to-proptypes-ignore */
+    .oneOfType([HTMLElementType, propTypes.func]),
+
+    /**
+     * The `children` will be under the DOM hierarchy of the parent component.
+     * @default false
+     */
+    disablePortal: propTypes.bool,
+
+    /**
+     * 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
+     */
+    keepMounted: propTypes.bool,
+
+    /**
+     * 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/).
+     */
+    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)
+    })),
+
+    /**
+     * If `true`, the component is shown.
+     */
+    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 Popper$1 = Popper;
+
   function getListSubheaderUtilityClass(slot) {
     return generateUtilityClass('MuiListSubheader', slot);
   }
@@ -20018,7 +21159,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;
 
@@ -20532,7 +21673,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.
@@ -20730,6 +21871,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',
@@ -21596,7 +22740,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.
@@ -21870,7 +23014,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.
@@ -22042,7 +23186,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.
@@ -22404,7 +23548,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.
@@ -22706,7 +23850,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.
@@ -22844,7 +23988,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`.
@@ -23024,7 +24168,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.
@@ -23039,7 +24183,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;
 
@@ -23053,8 +24199,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]
@@ -23331,7 +24477,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;
 
@@ -23341,7 +24487,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 {
@@ -23546,24 +24703,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,
@@ -23592,8 +24772,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,
@@ -23621,6 +24803,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'
@@ -23701,7 +24888,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
@@ -23820,10 +25007,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' && {
@@ -23866,6 +25057,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",
@@ -23873,28 +25075,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
       })
     }));
   });
@@ -23983,7 +25166,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.
@@ -24084,7 +25267,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;
 
@@ -24206,7 +25389,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;
 
@@ -24304,7 +25487,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;
 
@@ -24394,7 +25577,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;
 
@@ -24597,7 +25780,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.
@@ -24757,7 +25940,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;
 
@@ -25303,7 +26486,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.
@@ -25555,7 +26738,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.
@@ -25923,7 +27106,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;
 
@@ -25949,8 +27132,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',
@@ -25960,7 +27142,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, {
@@ -25970,11 +27154,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'
       },
@@ -26009,12 +27193,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]
     });
   }
 
@@ -26029,7 +27214,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
@@ -26329,7 +27522,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;
 
@@ -26548,7 +27741,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       }
     };
 
-    const ariaLabelledby = useId(ariaLabelledbyProp);
+    const ariaLabelledby = useReactId(ariaLabelledbyProp);
     const dialogContextValue = React__namespace.useMemo(() => {
       return {
         titleId: ariaLabelledby
@@ -26718,7 +27911,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.
@@ -26842,7 +28035,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;
 
@@ -26953,7 +28146,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;
 
@@ -27022,7 +28215,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;
 
@@ -27103,7 +28296,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;
 
@@ -27235,11 +28428,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({
@@ -27351,7 +28544,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.
@@ -27733,7 +28926,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 {
@@ -27876,7 +29069,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
@@ -28030,7 +29223,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.
@@ -28285,7 +29478,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.
@@ -28505,8 +29698,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'
     });
   });
 
@@ -28809,7 +30001,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
@@ -29035,7 +30227,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).
@@ -29429,7 +30621,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).
@@ -29753,7 +30945,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.
@@ -29941,9 +31133,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.
@@ -29967,7 +31159,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.
@@ -30074,7 +31266,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;
 
@@ -30251,7 +31443,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.
@@ -30432,7 +31624,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;
 
@@ -30496,10 +31688,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) {
@@ -30535,9 +31728,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
       };
@@ -30551,7 +31748,6 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       return output;
     });
   }
-
   function generateRowGap({
     theme,
     ownerState
@@ -30563,9 +31759,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') {
@@ -30594,9 +31794,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') {
@@ -30814,18 +32018,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.
@@ -30834,11 +32046,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.
@@ -30850,7 +32066,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.
@@ -30860,18 +32076,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.
@@ -31173,32 +32397,8 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
    * @deprecated Not used internally. Use `MediaQueryListEvent` from lib.dom.d.ts instead.
    */
 
-  function useMediaQuery(queryInput, options = {}) {
-    const theme = useTheme$2(); // Wait for jsdom to support the match media feature.
-    // All the browsers MUI support have this built-in.
-    // This defensive check is here for simplicity.
-    // Most of the time, the match media logic isn't central to people tests.
-
+  function useMediaQueryOld(query, defaultMatches, matchMedia, ssrMatchMedia, noSsr) {
     const supportMatchMedia = typeof window !== 'undefined' && typeof window.matchMedia !== 'undefined';
-    const {
-      defaultMatches = false,
-      matchMedia = supportMatchMedia ? window.matchMedia : null,
-      noSsr = false,
-      ssrMatchMedia = null
-    } = getThemeProps({
-      name: 'MuiUseMediaQuery',
-      props: options,
-      theme
-    });
-
-    {
-      if (typeof queryInput === 'function' && theme === null) {
-        console.error(['MUI: The `query` argument provided is invalid.', 'You are providing a function without a theme in the context.', 'One of the parent elements needs to use a ThemeProvider.'].join('\n'));
-      }
-    }
-
-    let query = typeof queryInput === 'function' ? queryInput(theme) : queryInput;
-    query = query.replace(/^@media( ?)/m, '');
     const [match, setMatch] = React__namespace.useState(() => {
       if (noSsr && supportMatchMedia) {
         return matchMedia(query).matches;
@@ -31230,13 +32430,76 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
         }
       };
 
-      updateMatch();
+      updateMatch(); // TODO: Use `addEventListener` once support for Safari < 14 is dropped
+
       queryList.addListener(updateMatch);
       return () => {
         active = false;
         queryList.removeListener(updateMatch);
       };
     }, [query, matchMedia, supportMatchMedia]);
+    return match;
+  }
+
+  function useMediaQueryNew(query, defaultMatches, matchMedia, ssrMatchMedia) {
+    const getDefaultSnapshot = React__namespace.useCallback(() => defaultMatches, [defaultMatches]);
+    const getServerSnapshot = React__namespace.useMemo(() => {
+      if (ssrMatchMedia !== null) {
+        const {
+          matches
+        } = ssrMatchMedia(query);
+        return () => matches;
+      }
+
+      return getDefaultSnapshot;
+    }, [getDefaultSnapshot, query, ssrMatchMedia]);
+    const [getSnapshot, subscribe] = React__namespace.useMemo(() => {
+      if (matchMedia === null) {
+        return [getDefaultSnapshot, () => () => {}];
+      }
+
+      const mediaQueryList = matchMedia(query);
+      return [() => mediaQueryList.matches, notify => {
+        // TODO: Use `addEventListener` once support for Safari < 14 is dropped
+        mediaQueryList.addListener(notify);
+        return () => {
+          mediaQueryList.removeListener(notify);
+        };
+      }];
+    }, [getDefaultSnapshot, matchMedia, query]);
+    const match = React__namespace.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+    return match;
+  }
+
+  function useMediaQuery(queryInput, options = {}) {
+    const theme = useTheme$2(); // Wait for jsdom to support the match media feature.
+    // All the browsers MUI support have this built-in.
+    // This defensive check is here for simplicity.
+    // Most of the time, the match media logic isn't central to people tests.
+
+    const supportMatchMedia = typeof window !== 'undefined' && typeof window.matchMedia !== 'undefined';
+    const {
+      defaultMatches = false,
+      matchMedia = supportMatchMedia ? window.matchMedia : null,
+      ssrMatchMedia = null,
+      noSsr
+    } = getThemeProps({
+      name: 'MuiUseMediaQuery',
+      props: options,
+      theme
+    });
+
+    {
+      if (typeof queryInput === 'function' && theme === null) {
+        console.error(['MUI: The `query` argument provided is invalid.', 'You are providing a function without a theme in the context.', 'One of the parent elements needs to use a ThemeProvider.'].join('\n'));
+      }
+    }
+
+    let query = typeof queryInput === 'function' ? queryInput(theme) : queryInput;
+    query = query.replace(/^@media( ?)/m, ''); // TODO: Drop `useMediaQueryOld` and use  `use-sync-external-store` shim in `useMediaQueryNew` once the package is stable
+
+    const useMediaQueryImplementation = React__namespace.useSyncExternalStore !== undefined ? useMediaQueryNew : useMediaQueryOld;
+    const match = useMediaQueryImplementation(query, defaultMatches, matchMedia, ssrMatchMedia, noSsr);
 
     {
       // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -32003,7 +33266,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;
@@ -32180,7 +33443,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.
@@ -32368,7 +33631,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;
 
@@ -32594,7 +33857,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.
@@ -32909,7 +34172,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).
@@ -33104,7 +34367,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.
@@ -33317,7 +34580,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.
@@ -33666,7 +34929,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.
@@ -33899,7 +35162,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.
@@ -34067,7 +35330,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;
 
@@ -34310,7 +35573,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;
 
@@ -34406,13 +35669,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
@@ -34555,7 +35818,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 = {
@@ -34807,7 +36070,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;
 
@@ -34901,7 +36164,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;
 
@@ -34999,7 +36262,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;
 
@@ -35181,7 +36444,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;
 
@@ -35494,7 +36757,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;
 
@@ -35596,7 +36859,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);
@@ -35935,7 +37198,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
@@ -35987,7 +37250,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'
@@ -36057,7 +37320,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';
@@ -36238,7 +37501,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'
@@ -36521,7 +37784,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
@@ -36734,7 +37997,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.
@@ -36747,7 +38010,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"];
@@ -36757,10 +38020,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);
@@ -36827,7 +38091,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 = ({
@@ -36961,7 +38227,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 {
@@ -37008,7 +38274,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`.
@@ -37079,7 +38345,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.
@@ -37116,7 +38382,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
@@ -37126,7 +38394,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
@@ -37137,6 +38407,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,
@@ -37522,7 +38793,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).
@@ -37674,7 +38945,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 {
@@ -37873,6 +39144,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,
@@ -37896,15 +39173,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, {
@@ -37963,6 +39240,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
@@ -37997,7 +39290,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.
@@ -38263,7 +39556,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.
@@ -38365,8 +39658,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';
@@ -38594,7 +39886,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.
@@ -38646,7 +39938,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       }
     };
 
-    const name = useId(nameProp);
+    const name = useReactId(nameProp);
     return /*#__PURE__*/jsxRuntime_1(RadioGroupContext$1.Provider, {
       value: {
         name,
@@ -38716,7 +40008,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) {
@@ -38904,7 +40196,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     const isHovered = itemValue <= hover;
     const isFocused = itemValue <= focus;
     const isChecked = itemValue === ratingValueRounded;
-    const id = useId();
+    const id = useReactId();
 
     const container = /*#__PURE__*/jsxRuntime_1(RatingIcon, {
       as: IconContainerComponent,
@@ -39016,9 +40308,9 @@ 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 name = useReactId(nameProp);
     const [valueDerived, setValueState] = useControlled({
       controlled: valueProp,
       default: defaultValue,
@@ -39237,7 +40529,6 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
                   style: items.length - 1 === indexDecimal ? {} : {
                     width: itemDecimalValue === value ? `${(indexDecimal + 1) * precision * 100}%` : '0%',
                     overflow: 'hidden',
-                    zIndex: 1,
                     position: 'absolute'
                   }
                 }
@@ -39412,7 +40703,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.
@@ -39427,7 +40718,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 {
@@ -39444,15 +40735,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,
@@ -39504,14 +40798,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"];
@@ -39527,6 +40828,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, {
@@ -39584,10 +40887,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']
     };
@@ -39863,7 +41167,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 === ' ') {
@@ -40165,17 +41469,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) {
@@ -40229,9 +41529,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`.
@@ -40259,13 +41556,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
@@ -40418,7 +41715,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.
@@ -40648,7 +41945,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.
@@ -41287,7 +42584,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.
@@ -41469,7 +42766,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;
 
@@ -41841,7 +43138,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.
@@ -42607,7 +43904,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.
@@ -42902,7 +44199,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       }, [title, childNode, isControlled]);
     }
 
-    const id = useId(idProp);
+    const id = useReactId(idProp);
     const prevUserSelect = React__namespace.useRef();
     const stopTouchInteraction = React__namespace.useCallback(() => {
       if (prevUserSelect.current !== undefined) {
@@ -43232,7 +44529,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
@@ -43297,6 +44594,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,
@@ -43417,7 +44716,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.
@@ -43676,7 +44975,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.
@@ -43846,7 +45145,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;
@@ -43885,7 +45184,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
     })));
 
@@ -43998,7 +45300,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;
 
@@ -44196,7 +45498,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;
 
@@ -44375,7 +45677,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;
 
@@ -44609,7 +45911,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;
@@ -44743,7 +46045,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;
 
@@ -44878,7 +46180,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;
 
@@ -45014,7 +46316,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.
@@ -45194,7 +46496,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;
 
@@ -46205,7 +47507,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.
@@ -46480,7 +47782,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.
@@ -46647,7 +47949,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;
 
@@ -46752,7 +48054,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;
 
@@ -46972,7 +48274,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.
@@ -47064,7 +48366,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;
 
@@ -47157,7 +48459,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;
 
@@ -47250,7 +48552,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;
 
@@ -47370,7 +48672,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.
@@ -47620,7 +48922,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) {
@@ -47687,8 +48989,8 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       colSpan = colSpanProp || 1000; // col-span over everything
     }
 
-    const selectId = useId(SelectProps.id);
-    const labelId = useId(SelectProps.labelId);
+    const selectId = useReactId(SelectProps.id);
+    const labelId = useReactId(SelectProps.labelId);
 
     const getLabelDisplayedRowsTo = () => {
       if (count === -1) {
@@ -47825,7 +49127,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,
@@ -47920,7 +49222,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;
 
@@ -48056,7 +49358,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;
 
@@ -48237,7 +49539,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;
 
@@ -48470,7 +49772,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;
 
@@ -49264,7 +50566,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.
@@ -49711,7 +51013,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).
@@ -49953,7 +51255,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
@@ -50215,7 +51517,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
@@ -50371,6 +51673,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;
@@ -50408,7 +51711,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;
@@ -50419,6 +51724,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;
@@ -50576,6 +51884,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;
@@ -50599,7 +51908,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;
@@ -50610,6 +51922,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;
@@ -50688,7 +52002,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;
@@ -50699,6 +52015,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;
@@ -50712,7 +52030,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   exports.unstable_getUnit = getUnit;
   exports.unstable_toUnitless = toUnitless;
   exports.unstable_useEnhancedEffect = useEnhancedEffect$1;
-  exports.unstable_useId = useId;
+  exports.unstable_useId = useReactId;
   exports.unsupportedProp = unsupportedProp;
   exports.useAutocomplete = useAutocomplete;
   exports.useButton = useButton;
@@ -50728,6 +52046,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;