@mui/material 5.1.0 → 5.2.2

package/umd/material-ui.development.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.1.0
+/** @license MUI v5.2.2
  *
  * 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.7.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,15 +4998,18 @@
   const useEnhancedEffect = typeof window !== 'undefined' ? React__namespace.useLayoutEffect : React__namespace.useEffect;
   var useEnhancedEffect$1 = useEnhancedEffect;
 
+  let globalId = 0;
   function useId(idOverride) {
     const [defaultId, setDefaultId] = React__namespace.useState(idOverride);
     const id = idOverride || defaultId;
     React__namespace.useEffect(() => {
       if (defaultId == null) {
         // Fallback to this default id when possible.
-        // Use the random value for client-side rendering only.
+        // Use the incrementing value for client-side rendering only.
         // We can't use it server-side.
-        setDefaultId(`mui-${Math.round(Math.random() * 1e9)}`);
+        // If you want to use random values please consider the Birthday Problem: https://en.wikipedia.org/wiki/Birthday_problem
+        globalId += 1;
+        setDefaultId(`mui-${globalId}`);
       }
     }, [defaultId]);
     return id;
@@ -5070,7 +5098,7 @@
   // based on https://github.com/WICG/focus-visible/blob/v4.1.5/src/focus-visible.js
   let hadKeyboardEvent = true;
   let hadFocusVisibleRecently = false;
-  let hadFocusVisibleRecentlyTimeout = null;
+  let hadFocusVisibleRecentlyTimeout;
   const inputTypesWhitelist = {
     text: true,
     search: true,
@@ -5481,7 +5509,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];
@@ -6237,27 +6265,29 @@
       Object.keys(sxObject).forEach(styleKey => {
         const value = callIfFn(sxObject[styleKey], theme);
 
-        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
-              });
+        if (value !== null && value !== undefined) {
+          if (typeof value === 'object') {
+            if (propToStyleFunction[styleKey]) {
+              css = merge(css, getThemeValue(styleKey, value, theme));
             } else {
-              css = merge(css, breakpointsValues);
+              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, getThemeValue(styleKey, value, theme));
           }
-        } else {
-          css = merge(css, getThemeValue(styleKey, value, theme));
         }
       });
       return removeUnusedBreakpoints(breakpointsKeys, css);
@@ -6268,7 +6298,7 @@
 
   styleFunctionSx.filterProps = ['sx'];
 
-  const _excluded$2o = ["sx"];
+  const _excluded$2t = ["sx"];
 
   const splitProps = props => {
     const result = {
@@ -6289,7 +6319,7 @@
     const {
       sx: inSx
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$2o);
+          other = _objectWithoutPropertiesLoose(props, _excluded$2t);
 
     const {
       systemProps,
@@ -6318,6 +6348,15 @@
     });
   }
 
+  function sx(styles) {
+    return ({
+      theme
+    }) => styleFunctionSx({
+      sx: styles,
+      theme
+    });
+  }
+
   function toVal(mix) {
   	var k, y, str='';
 
@@ -6359,7 +6398,7 @@
   	return str;
   }
 
-  const _excluded$2n = ["values", "unit", "step"];
+  const _excluded$2s = ["values", "unit", "step"];
 
   function createBreakpoints(breakpoints) {
     const {
@@ -6380,7 +6419,7 @@
       unit = 'px',
       step = 5
     } = breakpoints,
-          other = _objectWithoutPropertiesLoose(breakpoints, _excluded$2n);
+          other = _objectWithoutPropertiesLoose(breakpoints, _excluded$2s);
 
     const keys = Object.keys(values);
 
@@ -6455,7 +6494,7 @@
     return spacing;
   }
 
-  const _excluded$2m = ["breakpoints", "palette", "spacing", "shape"];
+  const _excluded$2r = ["breakpoints", "palette", "spacing", "shape"];
 
   function createTheme$1(options = {}, ...args) {
     const {
@@ -6464,7 +6503,7 @@
       spacing: spacingInput,
       shape: shapeInput = {}
     } = options,
-          other = _objectWithoutPropertiesLoose(options, _excluded$2m);
+          other = _objectWithoutPropertiesLoose(options, _excluded$2r);
 
     const breakpoints = createBreakpoints(breakpointsInput);
     const spacing = createSpacing(spacingInput);
@@ -6586,7 +6625,7 @@
     return useTheme$2(defaultTheme);
   }
 
-  const _excluded$2l = ["className", "component"];
+  const _excluded$2q = ["className", "component"];
   function createBox(options = {}) {
     const {
       defaultTheme,
@@ -6602,7 +6641,7 @@
         className,
         component = 'div'
       } = _extendSxProp,
-            other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$2l);
+            other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$2q);
 
       return /*#__PURE__*/jsxRuntime_1(BoxRoot, _extends({
         as: component,
@@ -6633,12 +6672,12 @@
       /**
        * @ignore
        */
-      sx: propTypes.oneOfType([propTypes.object, propTypes.array])
+      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;
@@ -6654,7 +6693,7 @@
     const {
       variant
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$2k);
+          other = _objectWithoutPropertiesLoose(props, _excluded$2p);
 
     let classKey = variant || '';
     Object.keys(other).sort().forEach(key => {
@@ -6667,8 +6706,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) {
@@ -6748,7 +6787,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;
@@ -6785,7 +6824,7 @@
             let {
               theme: themeInput
             } = _ref,
-                other = _objectWithoutPropertiesLoose(_ref, _excluded2$c);
+                other = _objectWithoutPropertiesLoose(_ref, _excluded2$b);
 
             return stylesArg(_extends({
               theme: isEmpty$1(themeInput) ? defaultTheme : themeInput
@@ -7250,8 +7289,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'));
@@ -7265,7 +7304,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: {}
@@ -7281,7 +7320,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       const componentValue = theme.components[component] || {};
       componentValue.defaultProps = props[component];
       theme.components[component] = componentValue;
-    }); // css overrides
+    }); // CSS overrides
 
     Object.keys(styleOverrides).forEach(component => {
       const componentValue = theme.components[component] || {};
@@ -7316,7 +7355,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({
@@ -8436,9 +8475,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
@@ -8461,14 +8500,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({
@@ -8542,9 +8581,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,
@@ -8581,7 +8620,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,
@@ -8620,7 +8659,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';
@@ -8978,9 +9017,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,
@@ -9015,7 +9054,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);
@@ -9041,7 +9080,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
@@ -9131,7 +9170,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 !== '';
@@ -9181,12 +9220,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,
@@ -9513,7 +9552,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;
 
@@ -9550,7 +9589,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,
@@ -10494,9 +10533,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,
@@ -10566,7 +10605,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({});
@@ -10643,7 +10682,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;
@@ -12825,12 +12864,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;
     }
@@ -12864,6 +12901,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     const {
       anchorEl,
       children,
+      direction,
       disablePortal,
       modifiers,
       open,
@@ -12872,7 +12910,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);
@@ -12883,8 +12921,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
@@ -12978,11 +13015,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,
@@ -12993,7 +13031,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);
 
@@ -13018,6 +13056,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,
@@ -13043,7 +13082,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       }))
     });
   });
-  Popper.propTypes
+  PopperUnstyled.propTypes
   /* remove-proptypes */
   = {
     // ----------------------------- Warning --------------------------------
@@ -13093,6 +13132,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
@@ -13166,7 +13211,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);
@@ -13223,7 +13268,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) {
@@ -13383,7 +13428,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,
@@ -13445,7 +13490,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.
@@ -13875,7 +13920,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
@@ -14341,7 +14386,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.
@@ -14371,7 +14416,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,
@@ -14511,7 +14556,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;
@@ -14540,7 +14585,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
@@ -14726,6 +14771,895 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
   } ;
   var TextareaAutosize$1 = TextareaAutosize;
 
+  function getTabsUnstyledUtilityClass(slot) {
+    return generateUtilityClass('TabsUnstyled', slot);
+  }
+  const tabsUnstyledClasses = generateUtilityClasses('TabsUnstyled', ['root', 'horizontal', 'vertical']);
+  var tabsUnstyledClasses$1 = tabsUnstyledClasses;
+
+  const useTabs = props => {
+    const {
+      value: valueProp,
+      defaultValue,
+      onChange,
+      orientation,
+      direction,
+      selectionFollowsFocus
+    } = props;
+    const [value, setValue] = useControlled({
+      controlled: valueProp,
+      default: defaultValue,
+      name: 'Tabs',
+      state: 'value'
+    });
+    const idPrefix = useId();
+    const onSelected = React__namespace.useCallback((e, newValue) => {
+      setValue(newValue);
+
+      if (onChange) {
+        onChange(e, newValue);
+      }
+    }, [onChange, setValue]);
+
+    const getRootProps = () => {
+      return {};
+    };
+
+    const tabsContextValue = React__namespace.useMemo(() => {
+      return {
+        idPrefix,
+        value,
+        onSelected,
+        orientation,
+        direction,
+        selectionFollowsFocus
+      };
+    }, [idPrefix, value, onSelected, orientation, direction, selectionFollowsFocus]);
+    return {
+      getRootProps,
+      tabsContextValue
+    };
+  };
+
+  var useTabs$1 = useTabs;
+
+  /**
+   * @ignore - internal component.
+   */
+  const Context = /*#__PURE__*/React__namespace.createContext(null);
+
+  {
+    Context.displayName = 'TabsContext';
+  }
+  /**
+   * @returns {unknown}
+   */
+
+
+  function useTabContext() {
+    return React__namespace.useContext(Context);
+  }
+  function getPanelId(context, value) {
+    const {
+      idPrefix
+    } = context;
+
+    if (idPrefix === null) {
+      return null;
+    }
+
+    return `${context.idPrefix}-P-${value}`;
+  }
+  function getTabId(context, value) {
+    const {
+      idPrefix
+    } = context;
+
+    if (idPrefix === null) {
+      return null;
+    }
+
+    return `${context.idPrefix}-T-${value}`;
+  }
+  var Context$1 = Context;
+
+  const _excluded$2c = ["children", "className", "value", "defaultValue", "orientation", "direction", "component", "components", "componentsProps", "onChange", "selectionFollowsFocus"];
+
+  const useUtilityClasses$1O = ownerState => {
+    const {
+      orientation
+    } = ownerState;
+    const slots = {
+      root: ['root', orientation]
+    };
+    return composeClasses(slots, getTabsUnstyledUtilityClass, {});
+  };
+  /**
+   *
+   * Demos:
+   *
+   * - [Tabs](https://mui.com/components/tabs/)
+   *
+   * API:
+   *
+   * - [TabsUnstyled API](https://mui.com/api/tabs-unstyled/)
+   */
+
+
+  const TabsUnstyled = /*#__PURE__*/React__namespace.forwardRef((props, ref) => {
+    var _ref, _componentsProps$root;
+
+    const {
+      children,
+      className,
+      orientation = 'horizontal',
+      direction = 'ltr',
+      component,
+      components = {},
+      componentsProps = {}
+    } = props,
+          other = _objectWithoutPropertiesLoose(props, _excluded$2c);
+
+    const {
+      tabsContextValue,
+      getRootProps
+    } = useTabs$1(props);
+
+    const ownerState = _extends({}, props, {
+      orientation,
+      direction
+    });
+
+    const classes = useUtilityClasses$1O(ownerState);
+    const TabsRoot = (_ref = component != null ? component : components.Root) != null ? _ref : 'div';
+    const tabsRootProps = appendOwnerState(TabsRoot, _extends({}, other, componentsProps.root), ownerState);
+    return /*#__PURE__*/jsxRuntime_1(TabsRoot, _extends({}, getRootProps(), tabsRootProps, {
+      ref: ref,
+      className: clsx(classes.root, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.className, className),
+      children: /*#__PURE__*/jsxRuntime_1(Context$1.Provider, {
+        value: tabsContextValue,
+        children: children
+      })
+    }));
+  });
+  TabsUnstyled.propTypes
+  /* remove-proptypes */
+  = {
+    // ----------------------------- Warning --------------------------------
+    // | These PropTypes are generated from the TypeScript type definitions |
+    // |     To update them edit TypeScript types and run "yarn proptypes"  |
+    // ----------------------------------------------------------------------
+
+    /**
+     * The content of the component.
+     */
+    children: propTypes.node,
+
+    /**
+     * @ignore
+     */
+    className: propTypes.string,
+
+    /**
+     * The component used for the root node.
+     * Either a string to use a HTML element or a component.
+     */
+    component: propTypes.elementType,
+
+    /**
+     * The components used for each slot inside the Tabs.
+     * Either a string to use a HTML element or a component.
+     * @default {}
+     */
+    components: propTypes.shape({
+      Root: propTypes.elementType
+    }),
+
+    /**
+     * The props used for each slot inside the Tabs.
+     * @default {}
+     */
+    componentsProps: propTypes.object,
+
+    /**
+     * The default value. Use when the component is not controlled.
+     */
+    defaultValue: propTypes.oneOfType([propTypes.oneOf([false]), propTypes.number, propTypes.string]),
+
+    /**
+     * The direction of the text.
+     * @default 'ltr'
+     */
+    direction: propTypes.oneOf(['ltr', 'rtl']),
+
+    /**
+     * Callback invoked when new value is being set.
+     */
+    onChange: propTypes.func,
+
+    /**
+     * The component orientation (layout flow direction).
+     * @default 'horizontal'
+     */
+    orientation: propTypes.oneOf(['horizontal', 'vertical']),
+
+    /**
+     * If `true` the selected tab changes on focus. Otherwise it only
+     * changes on activation.
+     */
+    selectionFollowsFocus: propTypes.bool,
+
+    /**
+     * The value of the currently selected `Tab`.
+     * If you don't want any selected `Tab`, you can set this prop to `false`.
+     */
+    value: propTypes.oneOfType([propTypes.oneOf([false]), propTypes.number, propTypes.string])
+  } ;
+  var TabsUnstyled$1 = TabsUnstyled;
+
+  function getTabUnstyledUtilityClass(slot) {
+    return generateUtilityClass('TabUnstyled', slot);
+  }
+  const tabUnstyledClasses = generateUtilityClasses('TabUnstyled', ['root', 'selected', 'disabled']);
+  var tabUnstyledClasses$1 = tabUnstyledClasses;
+
+  const _excluded$2b = ["getRootProps"];
+
+  const useTab = props => {
+    const {
+      value: valueProp,
+      onChange,
+      onClick,
+      onFocus
+    } = props;
+
+    const _useButton = useButton(props),
+          {
+      getRootProps: getRootPropsButton
+    } = _useButton,
+          otherButtonProps = _objectWithoutPropertiesLoose(_useButton, _excluded$2b);
+
+    const context = useTabContext();
+
+    if (context === null) {
+      throw new Error('No TabContext provided');
+    }
+
+    const value = valueProp != null ? valueProp : 0;
+    const selected = context.value === value;
+    const selectionFollowsFocus = context.selectionFollowsFocus;
+    const a11yAttributes = {
+      role: 'tab',
+      'aria-controls': getPanelId(context, value),
+      id: getTabId(context, value),
+      'aria-selected': selected,
+      disabled: otherButtonProps.disabled
+    };
+
+    const handleFocus = event => {
+      if (selectionFollowsFocus && !selected) {
+        if (onChange) {
+          onChange(event, value);
+        }
+
+        context.onSelected(event, value);
+      }
+
+      if (onFocus) {
+        onFocus(event);
+      }
+    };
+
+    const handleClick = event => {
+      if (!selected) {
+        if (onChange) {
+          onChange(event, value);
+        }
+
+        context.onSelected(event, value);
+      }
+
+      if (onClick) {
+        onClick(event);
+      }
+    };
+
+    const getRootProps = otherHandlers => {
+      const buttonResolvedProps = getRootPropsButton(_extends({
+        onClick: handleClick,
+        onFocus: handleFocus
+      }, otherHandlers));
+      return _extends({}, buttonResolvedProps, a11yAttributes);
+    };
+
+    return _extends({
+      getRootProps
+    }, otherButtonProps, {
+      selected
+    });
+  };
+
+  var useTab$1 = useTab;
+
+  const _excluded$2a = ["action", "children", "value", "className", "disabled", "onChange", "onClick", "onFocus", "component", "components", "componentsProps"];
+
+  const useUtilityClasses$1N = ownerState => {
+    const {
+      selected,
+      disabled
+    } = ownerState;
+    const slots = {
+      root: ['root', selected && 'selected', disabled && 'disabled']
+    };
+    return composeClasses(slots, getTabUnstyledUtilityClass, {});
+  };
+  /**
+   *
+   * Demos:
+   *
+   * - [Tabs](https://mui.com/components/tabs/)
+   *
+   * API:
+   *
+   * - [TabUnstyled API](https://mui.com/api/tab-unstyled/)
+   */
+
+
+  const TabUnstyled = /*#__PURE__*/React__namespace.forwardRef(function TabUnstyled(props, ref) {
+    var _ref, _componentsProps$root;
+
+    const {
+      action,
+      children,
+      className,
+      disabled = false,
+      component,
+      components = {},
+      componentsProps = {}
+    } = props,
+          other = _objectWithoutPropertiesLoose(props, _excluded$2a);
+
+    const tabRef = React__namespace.useRef();
+    const handleRef = useForkRef(tabRef, ref);
+    const {
+      active,
+      focusVisible,
+      setFocusVisible,
+      selected,
+      getRootProps
+    } = useTab$1(_extends({}, props, {
+      ref: handleRef
+    }));
+    React__namespace.useImperativeHandle(action, () => ({
+      focusVisible: () => {
+        setFocusVisible(true);
+        tabRef.current.focus();
+      }
+    }), [setFocusVisible]);
+
+    const ownerState = _extends({}, props, {
+      active,
+      focusVisible,
+      disabled,
+      selected
+    });
+
+    const classes = useUtilityClasses$1N(ownerState);
+    const TabRoot = (_ref = component != null ? component : components.Root) != null ? _ref : 'button';
+    const tabRootProps = appendOwnerState(TabRoot, _extends({}, other, componentsProps.root), ownerState);
+    return /*#__PURE__*/jsxRuntime_1(TabRoot, _extends({}, getRootProps(), tabRootProps, {
+      className: clsx(classes.root, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.className, className),
+      ref: ref,
+      children: children
+    }));
+  });
+  TabUnstyled.propTypes
+  /* remove-proptypes */
+  = {
+    // ----------------------------- Warning --------------------------------
+    // | These PropTypes are generated from the TypeScript type definitions |
+    // |     To update them edit TypeScript types and run "yarn proptypes"  |
+    // ----------------------------------------------------------------------
+
+    /**
+     * A ref for imperative actions. It currently only supports `focusVisible()` action.
+     */
+    action: propTypes.oneOfType([propTypes.func, propTypes.shape({
+      current: propTypes.shape({
+        focusVisible: propTypes.func.isRequired
+      })
+    })]),
+
+    /**
+     * @ignore
+     */
+    children: propTypes.node,
+
+    /**
+     * @ignore
+     */
+    className: propTypes.string,
+
+    /**
+     * The component used for the root node.
+     * Either a string to use a HTML element or a component.
+     */
+    component: propTypes.elementType,
+
+    /**
+     * The components used for each slot inside the Tab.
+     * Either a string to use a HTML element or a component.
+     * @default {}
+     */
+    components: propTypes.shape({
+      Root: propTypes.elementType
+    }),
+
+    /**
+     * The props used for each slot inside the Tab.
+     * @default {}
+     */
+    componentsProps: propTypes.object,
+
+    /**
+     * If `true`, the component is disabled.
+     * @default false
+     */
+    disabled: propTypes.bool,
+
+    /**
+     * Callback invoked when new value is being set.
+     */
+    onChange: propTypes.func,
+
+    /**
+     * @ignore
+     */
+    onClick: propTypes.func,
+
+    /**
+     * @ignore
+     */
+    onFocus: propTypes.func,
+
+    /**
+     * You can provide your own value. Otherwise, we fall back to the child position index.
+     */
+    value: propTypes.oneOfType([propTypes.number, propTypes.string])
+  } ;
+  var TabUnstyled$1 = TabUnstyled;
+
+  function getTabsListUnstyledUtilityClass(slot) {
+    return generateUtilityClass('TabsListUnstyled', slot);
+  }
+  const tabsListUnstyledClasses = generateUtilityClasses('TabsListUnstyled', ['root', 'horizontal', 'vertical']);
+  var tabsListUnstyledClasses$1 = tabsListUnstyledClasses;
+
+  const nextItem$2 = (list, item) => {
+    if (!list) {
+      return null;
+    }
+
+    if (list === item) {
+      return list.firstChild;
+    }
+
+    if (item && item.nextElementSibling) {
+      return item.nextElementSibling;
+    }
+
+    return list.firstChild;
+  };
+
+  const previousItem$2 = (list, item) => {
+    if (!list) {
+      return null;
+    }
+
+    if (list === item) {
+      return list.lastChild;
+    }
+
+    if (item && item.previousElementSibling) {
+      return item.previousElementSibling;
+    }
+
+    return list.lastChild;
+  };
+
+  const moveFocus$2 = (list, currentFocus, traversalFunction) => {
+    let wrappedOnce = false;
+    let nextFocus = traversalFunction(list, currentFocus);
+
+    while (list && nextFocus) {
+      // Prevent infinite loop.
+      if (nextFocus === list.firstChild) {
+        if (wrappedOnce) {
+          return;
+        }
+
+        wrappedOnce = true;
+      } // Same logic as useAutocomplete.js
+
+
+      const nextFocusDisabled = nextFocus.disabled || nextFocus.getAttribute('aria-disabled') === 'true';
+
+      if (!nextFocus.hasAttribute('tabindex') || nextFocusDisabled) {
+        // Move to the next element.
+        nextFocus = traversalFunction(list, nextFocus);
+      } else {
+        nextFocus.focus();
+        return;
+      }
+    }
+  };
+
+  const useTabsList = props => {
+    const {
+      'aria-label': ariaLabel,
+      'aria-labelledby': ariaLabelledBy,
+      children,
+      ref
+    } = props;
+    const tabsListRef = /*#__PURE__*/React__namespace.createRef();
+    const handleRef = useForkRef(tabsListRef, ref);
+    const context = useTabContext();
+
+    if (context === null) {
+      throw new Error('No TabContext provided');
+    }
+
+    const {
+      value,
+      orientation = 'horizontal',
+      direction = 'ltr'
+    } = context;
+    const isRtl = direction === 'rtl';
+
+    const handleKeyDown = event => {
+      const list = tabsListRef.current;
+      const currentFocus = ownerDocument(list).activeElement; // Keyboard navigation assumes that [role="tab"] are siblings
+      // though we might warn in the future about nested, interactive elements
+      // as a a11y violation
+
+      const role = currentFocus == null ? void 0 : currentFocus.getAttribute('role');
+
+      if (role !== 'tab') {
+        return;
+      }
+
+      let previousItemKey = orientation === 'horizontal' ? 'ArrowLeft' : 'ArrowUp';
+      let nextItemKey = orientation === 'horizontal' ? 'ArrowRight' : 'ArrowDown';
+
+      if (orientation === 'horizontal' && isRtl) {
+        // swap previousItemKey with nextItemKey
+        previousItemKey = 'ArrowRight';
+        nextItemKey = 'ArrowLeft';
+      }
+
+      switch (event.key) {
+        case previousItemKey:
+          event.preventDefault();
+          moveFocus$2(list, currentFocus, previousItem$2);
+          break;
+
+        case nextItemKey:
+          event.preventDefault();
+          moveFocus$2(list, currentFocus, nextItem$2);
+          break;
+
+        case 'Home':
+          event.preventDefault();
+          moveFocus$2(list, null, nextItem$2);
+          break;
+
+        case 'End':
+          event.preventDefault();
+          moveFocus$2(list, null, previousItem$2);
+          break;
+      }
+    };
+
+    const createHandleKeyDown = otherHandlers => event => {
+      var _otherHandlers$onKeyD;
+
+      handleKeyDown(event);
+      (_otherHandlers$onKeyD = otherHandlers.onKeyDown) == null ? void 0 : _otherHandlers$onKeyD.call(otherHandlers, event);
+    };
+
+    const getRootProps = otherHandlers => {
+      const propsEventHandlers = extractEventHandlers(props);
+
+      const externalEventHandlers = _extends({}, propsEventHandlers, otherHandlers);
+
+      const ownEventHandlers = {
+        onKeyDown: createHandleKeyDown(externalEventHandlers)
+      };
+
+      const mergedEventHandlers = _extends({}, externalEventHandlers, ownEventHandlers);
+
+      return _extends({
+        'aria-label': ariaLabel,
+        'aria-labelledby': ariaLabelledBy,
+        'aria-orientation': orientation === 'vertical' ? 'vertical' : null,
+        role: 'tablist',
+        ref: handleRef
+      }, mergedEventHandlers);
+    };
+
+    const processChildren = React__namespace.useCallback(() => {
+      const valueToIndex = new Map();
+      let childIndex = 0;
+      const processedChildren = React__namespace.Children.map(children, child => {
+        if (! /*#__PURE__*/React__namespace.isValidElement(child)) {
+          return null;
+        }
+
+        {
+          if (reactIs_2(child)) {
+            console.error(["MUI: The Tabs component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
+          }
+        }
+
+        const childValue = child.props.value === undefined ? childIndex : child.props.value;
+        valueToIndex.set(childValue, childIndex);
+        childIndex += 1;
+        return /*#__PURE__*/React__namespace.cloneElement(child, _extends({
+          value: childValue
+        }, childIndex === 1 && value === false && !child.props.tabIndex || value === childValue ? {
+          tabIndex: 0
+        } : {
+          tabIndex: -1
+        }));
+      });
+      return processedChildren;
+    }, [children, value]);
+    return {
+      isRtl,
+      orientation,
+      value,
+      processChildren,
+      getRootProps
+    };
+  };
+
+  var useTabsList$1 = useTabsList;
+
+  const _excluded$29 = ["className", "children", "component", "components", "componentsProps"];
+
+  const useUtilityClasses$1M = ownerState => {
+    const {
+      orientation
+    } = ownerState;
+    const slots = {
+      root: ['root', orientation]
+    };
+    return composeClasses(slots, getTabsListUnstyledUtilityClass, {});
+  };
+  /**
+   *
+   * Demos:
+   *
+   * - [Tabs](https://mui.com/components/tabs/)
+   *
+   * API:
+   *
+   * - [TabsListUnstyled API](https://mui.com/api/tabs-list-unstyled/)
+   */
+
+
+  const TabsListUnstyled = /*#__PURE__*/React__namespace.forwardRef((props, ref) => {
+    var _ref, _componentsProps$root;
+
+    const {
+      className,
+      component,
+      components = {},
+      componentsProps = {}
+    } = props,
+          other = _objectWithoutPropertiesLoose(props, _excluded$29);
+
+    const {
+      isRtl,
+      orientation,
+      getRootProps,
+      processChildren
+    } = useTabsList$1(_extends({}, props, {
+      ref
+    }));
+
+    const ownerState = _extends({}, props, {
+      isRtl,
+      orientation
+    });
+
+    const classes = useUtilityClasses$1M(ownerState);
+    const TabsListRoot = (_ref = component != null ? component : components.Root) != null ? _ref : 'div';
+    const tabsListRootProps = appendOwnerState(TabsListRoot, _extends({}, other, componentsProps.root), ownerState);
+    const processedChildren = processChildren();
+    return /*#__PURE__*/jsxRuntime_1(TabsListRoot, _extends({}, getRootProps(), tabsListRootProps, {
+      className: clsx(className, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.className, classes.root),
+      children: processedChildren
+    }));
+  });
+  TabsListUnstyled.propTypes
+  /* remove-proptypes */
+  = {
+    // ----------------------------- Warning --------------------------------
+    // | These PropTypes are generated from the TypeScript type definitions |
+    // |     To update them edit TypeScript types and run "yarn proptypes"  |
+    // ----------------------------------------------------------------------
+
+    /**
+     * The content of the component.
+     */
+    children: propTypes.node,
+
+    /**
+     * @ignore
+     */
+    className: propTypes.string,
+
+    /**
+     * The component used for the root node.
+     * Either a string to use a HTML element or a component.
+     */
+    component: propTypes.elementType,
+
+    /**
+     * The components used for each slot inside the TabsList.
+     * Either a string to use a HTML element or a component.
+     * @default {}
+     */
+    components: propTypes.shape({
+      Root: propTypes.elementType
+    }),
+
+    /**
+     * The props used for each slot inside the TabsList.
+     * @default {}
+     */
+    componentsProps: propTypes.object
+  } ;
+  var TabsListUnstyled$1 = TabsListUnstyled;
+
+  function getTabPanelUnstyledUtilityClass(slot) {
+    return generateUtilityClass('TabPanelUnstyled', slot);
+  }
+  const tabPanelUnstyledClasses = generateUtilityClasses('TabPanelUnstyled', ['root', 'hidden']);
+  var tabPanelUnstyledClasses$1 = tabPanelUnstyledClasses;
+
+  const useTabPanel = props => {
+    const {
+      value
+    } = props;
+    const context = useTabContext();
+
+    if (context === null) {
+      throw new Error('No TabContext provided');
+    }
+
+    const hidden = value !== context.value;
+    const id = getPanelId(context, value);
+    const tabId = getTabId(context, value);
+
+    const getRootProps = () => {
+      return {
+        'aria-labelledby': tabId,
+        hidden,
+        id
+      };
+    };
+
+    return {
+      hidden,
+      getRootProps
+    };
+  };
+
+  var useTabPanel$1 = useTabPanel;
+
+  const _excluded$28 = ["children", "className", "value", "components", "componentsProps", "component"];
+
+  const useUtilityClasses$1L = ownerState => {
+    const {
+      hidden
+    } = ownerState;
+    const slots = {
+      root: ['root', hidden && 'hidden']
+    };
+    return composeClasses(slots, getTabPanelUnstyledUtilityClass, {});
+  };
+  /**
+   *
+   * Demos:
+   *
+   * - [Tabs](https://mui.com/components/tabs/)
+   *
+   * API:
+   *
+   * - [TabPanelUnstyled API](https://mui.com/api/tab-panel-unstyled/)
+   */
+
+
+  const TabPanelUnstyled = /*#__PURE__*/React__namespace.forwardRef(function TabPanelUnstyled(props, ref) {
+    var _ref, _componentsProps$root;
+
+    const {
+      children,
+      className,
+      components = {},
+      componentsProps = {},
+      component
+    } = props,
+          other = _objectWithoutPropertiesLoose(props, _excluded$28);
+
+    const {
+      hidden,
+      getRootProps
+    } = useTabPanel$1(props);
+
+    const ownerState = _extends({}, props, {
+      hidden
+    });
+
+    const classes = useUtilityClasses$1L(ownerState);
+    const TabPanelRoot = (_ref = component != null ? component : components.Root) != null ? _ref : 'div';
+    const tabPanelRootProps = appendOwnerState(TabPanelRoot, _extends({}, other, componentsProps.root), ownerState);
+    return /*#__PURE__*/jsxRuntime_1(TabPanelRoot, _extends({}, getRootProps(), {
+      ref: ref,
+      role: "tabpanel"
+    }, tabPanelRootProps, {
+      className: clsx(classes.root, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.className, className),
+      children: !hidden && children
+    }));
+  });
+  TabPanelUnstyled.propTypes
+  /* remove-proptypes */
+  = {
+    // ----------------------------- Warning --------------------------------
+    // | These PropTypes are generated from the TypeScript type definitions |
+    // |     To update them edit TypeScript types and run "yarn proptypes"  |
+    // ----------------------------------------------------------------------
+
+    /**
+     * The content of the component.
+     */
+    children: propTypes.node,
+
+    /**
+     * @ignore
+     */
+    className: propTypes.string,
+
+    /**
+     * The component used for the root node.
+     * Either a string to use a HTML element or a component.
+     */
+    component: propTypes.elementType,
+
+    /**
+     * The components used for each slot inside the TabPanel.
+     * Either a string to use a HTML element or a component.
+     * @default {}
+     */
+    components: propTypes.shape({
+      Root: propTypes.elementType
+    }),
+
+    /**
+     * The props used for each slot inside the TabPanel.
+     * @default {}
+     */
+    componentsProps: propTypes.object,
+
+    /**
+     * The value of the TabPanel. It will be shown when the Tab with the corresponding value is selected.
+     */
+    value: propTypes.oneOfType([propTypes.number, propTypes.string]).isRequired
+  } ;
+  var TabPanelUnstyled$1 = TabPanelUnstyled;
+
   function createMixins(breakpoints, spacing, mixins) {
     return _extends({
       toolbar: {
@@ -15499,7 +16433,7 @@ const theme2 = createTheme({ palette: {
     const theme = _extends({}, themeInput);
 
     theme.typography = _extends({}, theme.typography);
-    const typography = theme.typography; // Convert between css lengths e.g. em->px or px->rem
+    const typography = theme.typography; // Convert between CSS lengths e.g. em->px or px->rem
     // Set the baseFontSize for your project. Defaults to 16px (also the browser default).
 
     const convert = convertLength(typography.htmlFontSize);
@@ -19039,7 +19973,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
@@ -19056,8 +19991,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
@@ -19065,7 +20001,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' && {
@@ -19772,179 +20708,305 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     className: propTypes.string,
 
     /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
+     * The system prop that allows defining system overrides as well as additional CSS styles.
+     */
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
+  } ;
+  var AlertTitle$1 = AlertTitle;
+
+  function getAppBarUtilityClass(slot) {
+    return generateUtilityClass('MuiAppBar', slot);
+  }
+  const appBarClasses = generateUtilityClasses('MuiAppBar', ['root', 'positionFixed', 'positionAbsolute', 'positionSticky', 'positionStatic', 'positionRelative', 'colorDefault', 'colorPrimary', 'colorSecondary', 'colorInherit', 'colorTransparent']);
+  var appBarClasses$1 = appBarClasses;
+
+  const _excluded$1S = ["className", "color", "enableColorOnDark", "position"];
+
+  const useUtilityClasses$1y = ownerState => {
+    const {
+      color,
+      position,
+      classes
+    } = ownerState;
+    const slots = {
+      root: ['root', `color${capitalize(color)}`, `position${capitalize(position)}`]
+    };
+    return composeClasses(slots, getAppBarUtilityClass, classes);
+  };
+
+  const AppBarRoot = styled$1(Paper$1, {
+    name: 'MuiAppBar',
+    slot: 'Root',
+    overridesResolver: (props, styles) => {
+      const {
+        ownerState
+      } = props;
+      return [styles.root, styles[`position${capitalize(ownerState.position)}`], styles[`color${capitalize(ownerState.color)}`]];
+    }
+  })(({
+    theme,
+    ownerState
+  }) => {
+    const backgroundColorDefault = theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900];
+    return _extends({
+      display: 'flex',
+      flexDirection: 'column',
+      width: '100%',
+      boxSizing: 'border-box',
+      // Prevent padding issue with the Modal and fixed positioned AppBar.
+      flexShrink: 0
+    }, ownerState.position === 'fixed' && {
+      position: 'fixed',
+      zIndex: theme.zIndex.appBar,
+      top: 0,
+      left: 'auto',
+      right: 0,
+      '@media print': {
+        // Prevent the app bar to be visible on each printed page.
+        position: 'absolute'
+      }
+    }, ownerState.position === 'absolute' && {
+      position: 'absolute',
+      zIndex: theme.zIndex.appBar,
+      top: 0,
+      left: 'auto',
+      right: 0
+    }, ownerState.position === 'sticky' && {
+      // ⚠️ sticky is not supported by IE11.
+      position: 'sticky',
+      zIndex: theme.zIndex.appBar,
+      top: 0,
+      left: 'auto',
+      right: 0
+    }, ownerState.position === 'static' && {
+      position: 'static'
+    }, ownerState.position === 'relative' && {
+      position: 'relative'
+    }, ownerState.color === 'default' && {
+      backgroundColor: backgroundColorDefault,
+      color: theme.palette.getContrastText(backgroundColorDefault)
+    }, ownerState.color && ownerState.color !== 'default' && ownerState.color !== 'inherit' && ownerState.color !== 'transparent' && {
+      backgroundColor: theme.palette[ownerState.color].main,
+      color: theme.palette[ownerState.color].contrastText
+    }, ownerState.color === 'inherit' && {
+      color: 'inherit'
+    }, theme.palette.mode === 'dark' && !ownerState.enableColorOnDark && {
+      backgroundColor: null,
+      color: null
+    }, ownerState.color === 'transparent' && _extends({
+      backgroundColor: 'transparent',
+      color: 'inherit'
+    }, theme.palette.mode === 'dark' && {
+      backgroundImage: 'none'
+    }));
+  });
+  const AppBar = /*#__PURE__*/React__namespace.forwardRef(function AppBar(inProps, ref) {
+    const props = useThemeProps({
+      props: inProps,
+      name: 'MuiAppBar'
+    });
+
+    const {
+      className,
+      color = 'primary',
+      enableColorOnDark = false,
+      position = 'fixed'
+    } = props,
+          other = _objectWithoutPropertiesLoose(props, _excluded$1S);
+
+    const ownerState = _extends({}, props, {
+      color,
+      position,
+      enableColorOnDark
+    });
+
+    const classes = useUtilityClasses$1y(ownerState);
+    return /*#__PURE__*/jsxRuntime_1(AppBarRoot, _extends({
+      square: true,
+      component: "header",
+      ownerState: ownerState,
+      elevation: 4,
+      className: clsx(classes.root, className, position === 'fixed' && 'mui-fixed'),
+      ref: ref
+    }, other));
+  });
+  AppBar.propTypes
+  /* remove-proptypes */
+  = {
+    // ----------------------------- Warning --------------------------------
+    // | These PropTypes are generated from the TypeScript type definitions |
+    // |     To update them edit the d.ts file and run "yarn proptypes"     |
+    // ----------------------------------------------------------------------
+
+    /**
+     * The content of the component.
+     */
+    children: propTypes.node,
+
+    /**
+     * Override or extend the styles applied to the component.
+     */
+    classes: propTypes.object,
+
+    /**
+     * @ignore
+     */
+    className: propTypes.string,
+
+    /**
+     * The color of the component. It supports those theme colors that make sense for this component.
+     * @default 'primary'
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
-  } ;
-  var AlertTitle$1 = AlertTitle;
-
-  function getAppBarUtilityClass(slot) {
-    return generateUtilityClass('MuiAppBar', slot);
-  }
-  const appBarClasses = generateUtilityClasses('MuiAppBar', ['root', 'positionFixed', 'positionAbsolute', 'positionSticky', 'positionStatic', 'positionRelative', 'colorDefault', 'colorPrimary', 'colorSecondary', 'colorInherit', 'colorTransparent']);
-  var appBarClasses$1 = appBarClasses;
-
-  const _excluded$1S = ["className", "color", "enableColorOnDark", "position"];
-
-  const useUtilityClasses$1y = ownerState => {
-    const {
-      color,
-      position,
-      classes
-    } = ownerState;
-    const slots = {
-      root: ['root', `color${capitalize(color)}`, `position${capitalize(position)}`]
-    };
-    return composeClasses(slots, getAppBarUtilityClass, classes);
-  };
+    color: propTypes
+    /* @typescript-to-proptypes-ignore */
+    .oneOfType([propTypes.oneOf(['default', 'inherit', 'primary', 'secondary', 'transparent']), propTypes.string]),
 
-  const AppBarRoot = styled$1(Paper$1, {
-    name: 'MuiAppBar',
-    slot: 'Root',
-    overridesResolver: (props, styles) => {
-      const {
-        ownerState
-      } = props;
-      return [styles.root, styles[`position${capitalize(ownerState.position)}`], styles[`color${capitalize(ownerState.color)}`]];
-    }
-  })(({
-    theme,
-    ownerState
-  }) => {
-    const backgroundColorDefault = theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900];
-    return _extends({
-      display: 'flex',
-      flexDirection: 'column',
-      width: '100%',
-      boxSizing: 'border-box',
-      // Prevent padding issue with the Modal and fixed positioned AppBar.
-      flexShrink: 0
-    }, ownerState.position === 'fixed' && {
-      position: 'fixed',
-      zIndex: theme.zIndex.appBar,
-      top: 0,
-      left: 'auto',
-      right: 0,
-      '@media print': {
-        // Prevent the app bar to be visible on each printed page.
-        position: 'absolute'
-      }
-    }, ownerState.position === 'absolute' && {
-      position: 'absolute',
-      zIndex: theme.zIndex.appBar,
-      top: 0,
-      left: 'auto',
-      right: 0
-    }, ownerState.position === 'sticky' && {
-      // ⚠️ sticky is not supported by IE11.
-      position: 'sticky',
-      zIndex: theme.zIndex.appBar,
-      top: 0,
-      left: 'auto',
-      right: 0
-    }, ownerState.position === 'static' && {
-      position: 'static'
-    }, ownerState.position === 'relative' && {
-      position: 'relative'
-    }, ownerState.color === 'default' && {
-      backgroundColor: backgroundColorDefault,
-      color: theme.palette.getContrastText(backgroundColorDefault)
-    }, ownerState.color && ownerState.color !== 'default' && ownerState.color !== 'inherit' && ownerState.color !== 'transparent' && {
-      backgroundColor: theme.palette[ownerState.color].main,
-      color: theme.palette[ownerState.color].contrastText
-    }, ownerState.color === 'inherit' && {
-      color: 'inherit'
-    }, theme.palette.mode === 'dark' && !ownerState.enableColorOnDark && {
-      backgroundColor: null,
-      color: null
-    }, ownerState.color === 'transparent' && _extends({
-      backgroundColor: 'transparent',
-      color: 'inherit'
-    }, theme.palette.mode === 'dark' && {
-      backgroundImage: 'none'
-    }));
-  });
-  const AppBar = /*#__PURE__*/React__namespace.forwardRef(function AppBar(inProps, ref) {
-    const props = useThemeProps({
-      props: inProps,
-      name: 'MuiAppBar'
-    });
+    /**
+     * If true, the `color` prop is applied in dark mode.
+     * @default false
+     */
+    enableColorOnDark: propTypes.bool,
 
-    const {
-      className,
-      color = 'primary',
-      enableColorOnDark = false,
-      position = 'fixed'
-    } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$1S);
+    /**
+     * The positioning type. The behavior of the different options is described
+     * [in the MDN web docs](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning).
+     * Note: `sticky` is not universally supported and will fall back to `static` when unavailable.
+     * @default 'fixed'
+     */
+    position: propTypes.oneOf(['absolute', 'fixed', 'relative', 'static', 'sticky']),
 
-    const ownerState = _extends({}, props, {
-      color,
-      position,
-      enableColorOnDark
-    });
+    /**
+     * The system prop that allows defining system overrides as well as additional CSS styles.
+     */
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
+  } ;
+  var AppBar$1 = AppBar;
 
-    const classes = useUtilityClasses$1y(ownerState);
-    return /*#__PURE__*/jsxRuntime_1(AppBarRoot, _extends({
-      square: true,
-      component: "header",
-      ownerState: ownerState,
-      elevation: 4,
-      className: clsx(classes.root, className, position === 'fixed' && 'mui-fixed'),
+  /**
+   *
+   * Demos:
+   *
+   * - [Autocomplete](https://mui.com/components/autocomplete/)
+   * - [Menus](https://mui.com/components/menus/)
+   * - [Popper](https://mui.com/components/popper/)
+   *
+   * API:
+   *
+   * - [Popper API](https://mui.com/api/popper/)
+   */
+  const Popper = /*#__PURE__*/React__namespace.forwardRef(function Popper(props, ref) {
+    const theme = useTheme$2();
+    return /*#__PURE__*/jsxRuntime_1(PopperUnstyled$1, _extends({
+      direction: theme == null ? void 0 : theme.direction
+    }, props, {
       ref: ref
-    }, other));
+    }));
   });
-  AppBar.propTypes
+  Popper.propTypes
   /* remove-proptypes */
   = {
     // ----------------------------- Warning --------------------------------
     // | These PropTypes are generated from the TypeScript type definitions |
-    // |     To update them edit the d.ts file and run "yarn proptypes"     |
+    // |     To update them edit TypeScript types and run "yarn proptypes"  |
     // ----------------------------------------------------------------------
 
     /**
-     * The content of the component.
+     * An HTML element, [virtualElement](https://popper.js.org/docs/v2/virtual-elements/),
+     * or a function that returns either.
+     * It's used to set the position of the popper.
+     * The return value will passed as the reference object of the Popper instance.
      */
-    children: propTypes.node,
+    anchorEl: propTypes
+    /* @typescript-to-proptypes-ignore */
+    .oneOfType([HTMLElementType, propTypes.object, propTypes.func]),
 
     /**
-     * Override or extend the styles applied to the component.
+     * Popper render function or node.
      */
-    classes: propTypes.object,
+    children: propTypes
+    /* @typescript-to-proptypes-ignore */
+    .oneOfType([propTypes.node, propTypes.func]),
 
     /**
-     * @ignore
+     * An HTML element or function that returns one.
+     * The `container` will have the portal children appended to it.
+     *
+     * By default, it uses the body of the top-level document object,
+     * so it's simply `document.body` most of the time.
      */
-    className: propTypes.string,
+    container: propTypes
+    /* @typescript-to-proptypes-ignore */
+    .oneOfType([HTMLElementType, propTypes.func]),
 
     /**
-     * The color of the component. It supports those theme colors that make sense for this component.
-     * @default 'primary'
+     * The `children` will be under the DOM hierarchy of the parent component.
+     * @default false
      */
-    color: propTypes
-    /* @typescript-to-proptypes-ignore */
-    .oneOfType([propTypes.oneOf(['default', 'inherit', 'primary', 'secondary', 'transparent']), propTypes.string]),
+    disablePortal: propTypes.bool,
 
     /**
-     * If true, the `color` prop is applied in dark mode.
+     * Always keep the children in the DOM.
+     * This prop can be useful in SEO situation or
+     * when you want to maximize the responsiveness of the Popper.
      * @default false
      */
-    enableColorOnDark: propTypes.bool,
+    keepMounted: propTypes.bool,
 
     /**
-     * The positioning type. The behavior of the different options is described
-     * [in the MDN web docs](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning).
-     * Note: `sticky` is not universally supported and will fall back to `static` when unavailable.
-     * @default 'fixed'
+     * Popper.js is based on a "plugin-like" architecture,
+     * most of its features are fully encapsulated "modifiers".
+     *
+     * A modifier is a function that is called each time Popper.js needs to
+     * compute the position of the popper.
+     * For this reason, modifiers should be very performant to avoid bottlenecks.
+     * To learn how to create a modifier, [read the modifiers documentation](https://popper.js.org/docs/v2/modifiers/).
      */
-    position: propTypes.oneOf(['absolute', 'fixed', 'relative', 'static', 'sticky']),
+    modifiers: propTypes.arrayOf(propTypes.shape({
+      data: propTypes.object,
+      effect: propTypes.func,
+      enabled: propTypes.bool,
+      fn: propTypes.func,
+      name: propTypes.any.isRequired,
+      options: propTypes.object,
+      phase: propTypes.oneOf(['afterMain', 'afterRead', 'afterWrite', 'beforeMain', 'beforeRead', 'beforeWrite', 'main', 'read', 'write']),
+      requires: propTypes.arrayOf(propTypes.string),
+      requiresIfExists: propTypes.arrayOf(propTypes.string)
+    })),
 
     /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
+     * If `true`, the component is shown.
      */
-    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
+    open: propTypes.bool.isRequired,
+
+    /**
+     * Popper placement.
+     * @default 'bottom'
+     */
+    placement: propTypes.oneOf(['auto-end', 'auto-start', 'auto', 'bottom-end', 'bottom-start', 'bottom', 'left-end', 'left-start', 'left', 'right-end', 'right-start', 'right', 'top-end', 'top-start', 'top']),
+
+    /**
+     * Options provided to the [`Popper.js`](https://popper.js.org/docs/v2/constructors/#options) instance.
+     * @default {}
+     */
+    popperOptions: propTypes.shape({
+      modifiers: propTypes.array,
+      onFirstUpdate: propTypes.func,
+      placement: propTypes.oneOf(['auto-end', 'auto-start', 'auto', 'bottom-end', 'bottom-start', 'bottom', 'left-end', 'left-start', 'left', 'right-end', 'right-start', 'right', 'top-end', 'top-start', 'top']),
+      strategy: propTypes.oneOf(['absolute', 'fixed'])
+    }),
+
+    /**
+     * A ref that points to the used popper instance.
+     */
+    popperRef: refType$1,
+
+    /**
+     * Help supporting a react-transition-group/Transition component.
+     * @default false
+     */
+    transition: propTypes.bool
   } ;
-  var AppBar$1 = AppBar;
+  var Popper$1 = Popper;
 
   function getListSubheaderUtilityClass(slot) {
     return generateUtilityClass('MuiListSubheader', slot);
@@ -23131,8 +24193,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]
@@ -26149,7 +27211,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     children: propTypes.node,
 
     /**
-     * Enable `color-scheme` css property to use `theme.palette.mode`.
+     * Enable `color-scheme` CSS property to use `theme.palette.mode`.
      * For more details, check out https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme
      * For browser support, check out https://caniuse.com/?search=color-scheme
      * @default false
@@ -27360,11 +28422,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({
@@ -27858,7 +28920,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 {
@@ -28001,7 +29063,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
@@ -34568,7 +35630,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   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
@@ -34711,7 +35773,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 = {
@@ -35650,7 +36712,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;
 
@@ -35752,7 +36814,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);
@@ -36143,7 +37205,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'
@@ -36213,7 +37275,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';
@@ -36903,7 +37965,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"];
@@ -36913,10 +37975,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);
@@ -36983,7 +38046,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 = ({
@@ -37117,7 +38182,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 {
@@ -37164,7 +38229,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`.
@@ -38898,7 +39963,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) {
@@ -39198,7 +40263,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       size = 'medium',
       value: valueProp
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded2$4);
+          other = _objectWithoutPropertiesLoose(props, _excluded2$3);
 
     const name = useId(nameProp);
     const [valueDerived, setValueState] = useControlled({
@@ -39691,7 +40756,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     component: propTypes.elementType,
 
     /**
-     * Enable `color-scheme` css property to use `theme.palette.mode`.
+     * Enable `color-scheme` CSS property to use `theme.palette.mode`.
      * For more details, check out https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme
      * For browser support, check out https://caniuse.com/?search=color-scheme
      */
@@ -39702,7 +40767,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   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"];
@@ -39718,6 +40783,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, {
@@ -39775,10 +40842,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']
     };
@@ -40054,7 +41122,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 === ' ') {
@@ -40088,7 +41156,11 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     }
 
     if (computeDisplay) {
-      display = multiple ? displayMultiple.join(', ') : displaySingle;
+      if (multiple) {
+        display = displayMultiple.reduce((prev, curr) => [prev, ', ', curr]);
+      } else {
+        display = displaySingle;
+      }
     } // Avoid performing a layout computation in the render method.
 
 
@@ -40356,17 +41428,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) {
@@ -40420,9 +41488,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`.
@@ -40450,13 +41515,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
@@ -41671,7 +42736,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   var snackbarClasses$1 = snackbarClasses;
 
   const _excluded$z = ["onEnter", "onExited"],
-        _excluded2$2 = ["action", "anchorOrigin", "autoHideDuration", "children", "className", "ClickAwayListenerProps", "ContentProps", "disableWindowBlurListener", "message", "onClose", "onMouseEnter", "onMouseLeave", "open", "resumeHideDuration", "TransitionComponent", "transitionDuration", "TransitionProps"];
+        _excluded2$2 = ["action", "anchorOrigin", "autoHideDuration", "children", "className", "ClickAwayListenerProps", "ContentProps", "disableWindowBlurListener", "message", "onBlur", "onClose", "onFocus", "onMouseEnter", "onMouseLeave", "open", "resumeHideDuration", "TransitionComponent", "transitionDuration", "TransitionProps"];
 
   const useUtilityClasses$s = ownerState => {
     const {
@@ -41765,7 +42830,9 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       ContentProps,
       disableWindowBlurListener = false,
       message,
+      onBlur,
       onClose,
+      onFocus,
       onMouseEnter,
       onMouseLeave,
       open,
@@ -41835,6 +42902,14 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       }
     }, [autoHideDuration, resumeHideDuration, setAutoHideTimer]);
 
+    const handleFocus = event => {
+      if (onFocus) {
+        onFocus(event);
+      }
+
+      handlePause();
+    };
+
     const handleMouseEnter = event => {
       if (onMouseEnter) {
         onMouseEnter(event);
@@ -41843,6 +42918,14 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       handlePause();
     };
 
+    const handleBlur = event => {
+      if (onBlur) {
+        onBlur(event);
+      }
+
+      handleResume();
+    };
+
     const handleMouseLeave = event => {
       if (onMouseLeave) {
         onMouseLeave(event);
@@ -41885,7 +42968,33 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       }
 
       return undefined;
-    }, [disableWindowBlurListener, handleResume, open]); // So we only render active snackbars.
+    }, [disableWindowBlurListener, handleResume, open]);
+    React__namespace.useEffect(() => {
+      if (!open) {
+        return undefined;
+      }
+      /**
+       * @param {KeyboardEvent} nativeEvent
+       */
+
+
+      function handleKeyDown(nativeEvent) {
+        if (!nativeEvent.defaultPrevented) {
+          // IE11, Edge (prior to using Bink?) use 'Esc'
+          if (nativeEvent.key === 'Escape' || nativeEvent.key === 'Esc') {
+            // not calling `preventDefault` since we don't know if people may ignore this event e.g. a permanently open snackbar
+            if (onClose) {
+              onClose(nativeEvent, 'escapeKeyDown');
+            }
+          }
+        }
+      }
+
+      document.addEventListener('keydown', handleKeyDown);
+      return () => {
+        document.removeEventListener('keydown', handleKeyDown);
+      };
+    }, [exited, open, onClose]); // So we only render active snackbars.
 
     if (!open && exited) {
       return null;
@@ -41896,6 +43005,8 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     }, ClickAwayListenerProps, {
       children: /*#__PURE__*/jsxRuntime_1(SnackbarRoot, _extends({
         className: clsx(classes.root, className),
+        onBlur: handleBlur,
+        onFocus: handleFocus,
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
         ownerState: ownerState,
@@ -41994,6 +43105,11 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
      */
     message: propTypes.node,
 
+    /**
+     * @ignore
+     */
+    onBlur: propTypes.func,
+
     /**
      * Callback fired when the component requests to be closed.
      * Typically `onClose` is used to set state in the parent component,
@@ -42001,11 +43117,16 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
      * The `reason` parameter can optionally be used to control the response to `onClose`,
      * for example ignoring `clickaway`.
      *
-     * @param {React.SyntheticEvent<any>} event The event source of the callback.
-     * @param {string} reason Can be: `"timeout"` (`autoHideDuration` expired), `"clickaway"`.
+     * @param {React.SyntheticEvent<any> | Event} event The event source of the callback.
+     * @param {string} reason Can be: `"timeout"` (`autoHideDuration` expired), `"clickaway"`, or `"escapeKeyDown"`.
      */
     onClose: propTypes.func,
 
+    /**
+     * @ignore
+     */
+    onFocus: propTypes.func,
+
     /**
      * @ignore
      */
@@ -47816,7 +48937,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) {
@@ -48021,7 +49142,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,
@@ -49586,7 +50707,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       FormHelperTextProps,
       fullWidth = false,
       helperText,
-      id,
+      id: idOverride,
       InputLabelProps,
       inputProps,
       InputProps,
@@ -49656,6 +50777,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       InputMore['aria-describedby'] = undefined;
     }
 
+    const id = useId(idOverride);
     const helperTextId = helperText && id ? `${id}-helper-text` : undefined;
     const inputLabelId = label && id ? `${id}-label` : undefined;
     const InputComponent = variantComponent[variant];
@@ -50567,6 +51689,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;
@@ -50604,7 +51727,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;
@@ -50615,6 +51740,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;
@@ -50685,6 +51813,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   exports.easing = easing;
   exports.emphasize = emphasize;
   exports.experimentalStyled = styled$1;
+  exports.experimental_sx = sx;
   exports.extractEventHandlers = extractEventHandlers;
   exports.fabClasses = fabClasses$1;
   exports.filledInputClasses = filledInputClasses$1;
@@ -50772,6 +51901,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;
@@ -50795,7 +51925,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;
@@ -50806,6 +51939,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;
@@ -50884,7 +52019,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;
@@ -50895,6 +52032,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;
@@ -50924,6 +52063,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;