@mui/material 5.0.0 → 5.0.4

package/umd/material-ui.development.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.0.0
+/** @license MUI v5.0.4
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -7,7 +7,7 @@
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('react-dom')) :
   typeof define === 'function' && define.amd ? define(['exports', 'react', 'react-dom'], factory) :
   (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.MaterialUI = {}, global.React, global.ReactDOM));
-}(this, (function (exports, React, ReactDOM) { 'use strict';
+})(this, (function (exports, React, ReactDOM) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -20,14 +20,12 @@
           var d = Object.getOwnPropertyDescriptor(e, k);
           Object.defineProperty(n, k, d.get ? d : {
             enumerable: true,
-            get: function () {
-              return e[k];
-            }
+            get: function () { return e[k]; }
           });
         }
       });
     }
-    n['default'] = e;
+    n["default"] = e;
     return Object.freeze(n);
   }
 
@@ -842,8 +840,8 @@
     }
   };
 
-  var isBrowser$5 = typeof document !== 'undefined';
-  var getServerStylisCache = isBrowser$5 ? undefined : weakMemoize(function () {
+  var isBrowser$4 = typeof document !== 'undefined';
+  var getServerStylisCache = isBrowser$4 ? undefined : weakMemoize(function () {
     return memoize$1(function () {
       var cache = {};
       return function (name) {
@@ -860,7 +858,7 @@
       throw new Error("You have to configure `key` for your cache. Please make sure it's unique (and not equal to 'css') as it's used for linking styles to your cache.\n" + "If multiple caches share the same key they might \"fight\" for each other's style elements.");
     }
 
-    if (isBrowser$5 && key === 'css') {
+    if (isBrowser$4 && key === 'css') {
       var ssrStyles = document.querySelectorAll("style[data-emotion]:not([data-s])"); // get SSRed styles out of the way of React's hydration
       // document.head is a safe place to move them to(though note document.head is not necessarily the last place they will be)
       // note this very very intentionally targets all style elements regardless of the key to ensure
@@ -897,7 +895,7 @@
     var container;
     var nodesToHydrate = [];
 
-    if (isBrowser$5) {
+    if (isBrowser$4) {
       container = options.container || document.head;
       Array.prototype.forEach.call( // this means we will ignore elements which don't have a space in them which
       // means that the style elements we're looking at are only Emotion 11 server-rendered style elements
@@ -925,7 +923,7 @@
       }), incorrectImportAlarm);
     }
 
-    if (isBrowser$5) {
+    if (isBrowser$4) {
       var currentSheet;
       var finalizingPlugins = [fe, function (element) {
         if (!element.root) {
@@ -1390,8 +1388,8 @@
 
   var hoistNonReactStatics_cjs = hoistNonReactStatics;
 
-  var isBrowser$4 = typeof document !== 'undefined';
-  function getRegisteredStyles$1(registered, registeredStyles, classNames) {
+  var isBrowser$3 = typeof document !== 'undefined';
+  function getRegisteredStyles(registered, registeredStyles, classNames) {
     var rawClassName = '';
     classNames.split(' ').forEach(function (className) {
       if (registered[className] !== undefined) {
@@ -1402,7 +1400,7 @@
     });
     return rawClassName;
   }
-  var insertStyles$1 = function insertStyles(cache, serialized, isStringTag) {
+  var insertStyles = function insertStyles(cache, serialized, isStringTag) {
     var className = cache.key + "-" + serialized.name;
 
     if ( // we only need to add the styles to the registered cache if the
@@ -1414,7 +1412,7 @@
     // in node since emotion-server relies on whether a style is in
     // the registered cache to know whether a style is global or not
     // also, note that this check will be dead code eliminated in the browser
-    isBrowser$4 === false && cache.compat !== undefined) && cache.registered[className] === undefined) {
+    isBrowser$3 === false && cache.compat !== undefined) && cache.registered[className] === undefined) {
       cache.registered[className] = serialized.styles;
     }
 
@@ -1425,14 +1423,14 @@
       do {
         var maybeStyles = cache.insert(serialized === current ? "." + className : '', current, cache.sheet, true);
 
-        if (!isBrowser$4 && maybeStyles !== undefined) {
+        if (!isBrowser$3 && maybeStyles !== undefined) {
           stylesForSSR += maybeStyles;
         }
 
         current = current.next;
       } while (current !== undefined);
 
-      if (!isBrowser$4 && stylesForSSR.length !== 0) {
+      if (!isBrowser$3 && stylesForSSR.length !== 0) {
         return stylesForSSR;
       }
     }
@@ -1541,34 +1539,34 @@
     strokeWidth: 1
   };
 
-  var ILLEGAL_ESCAPE_SEQUENCE_ERROR$2 = "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 UNDEFINED_AS_OBJECT_KEY_ERROR$1 = "You have passed in falsy value as style object's key (can happen when in example you pass unexported component as computed key).";
-  var hyphenateRegex$1 = /[A-Z]|^ms/g;
-  var animationRegex$1 = /_EMO_([^_]+?)_([^]*?)_EMO_/g;
+  var ILLEGAL_ESCAPE_SEQUENCE_ERROR$1 = "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 UNDEFINED_AS_OBJECT_KEY_ERROR = "You have passed in falsy value as style object's key (can happen when in example you pass unexported component as computed key).";
+  var hyphenateRegex = /[A-Z]|^ms/g;
+  var animationRegex = /_EMO_([^_]+?)_([^]*?)_EMO_/g;
 
-  var isCustomProperty$1 = function isCustomProperty(property) {
+  var isCustomProperty = function isCustomProperty(property) {
     return property.charCodeAt(1) === 45;
   };
 
-  var isProcessableValue$1 = function isProcessableValue(value) {
+  var isProcessableValue = function isProcessableValue(value) {
     return value != null && typeof value !== 'boolean';
   };
 
-  var processStyleName$1 = /* #__PURE__ */memoize$1(function (styleName) {
-    return isCustomProperty$1(styleName) ? styleName : styleName.replace(hyphenateRegex$1, '-$&').toLowerCase();
+  var processStyleName = /* #__PURE__ */memoize$1(function (styleName) {
+    return isCustomProperty(styleName) ? styleName : styleName.replace(hyphenateRegex, '-$&').toLowerCase();
   });
 
-  var processStyleValue$1 = function processStyleValue(key, value) {
+  var processStyleValue = function processStyleValue(key, value) {
     switch (key) {
       case 'animation':
       case 'animationName':
         {
           if (typeof value === 'string') {
-            return value.replace(animationRegex$1, function (match, p1, p2) {
-              cursor$1 = {
+            return value.replace(animationRegex, function (match, p1, p2) {
+              cursor = {
                 name: p1,
                 styles: p2,
-                next: cursor$1
+                next: cursor
               };
               return p1;
             });
@@ -1576,7 +1574,7 @@
         }
     }
 
-    if (unitlessKeys[key] !== 1 && !isCustomProperty$1(key) && typeof value === 'number' && value !== 0) {
+    if (unitlessKeys[key] !== 1 && !isCustomProperty(key) && typeof value === 'number' && value !== 0) {
       return value + 'px';
     }
 
@@ -1584,25 +1582,25 @@
   };
 
   {
-    var contentValuePattern$1 = /(attr|counters?|url|(((repeating-)?(linear|radial))|conic)-gradient)\(|(no-)?(open|close)-quote/;
-    var contentValues$1 = ['normal', 'none', 'initial', 'inherit', 'unset'];
-    var oldProcessStyleValue$1 = processStyleValue$1;
-    var msPattern$1 = /^-ms-/;
-    var hyphenPattern$1 = /-(.)/g;
-    var hyphenatedCache$1 = {};
-
-    processStyleValue$1 = function processStyleValue(key, value) {
+    var contentValuePattern = /(attr|counters?|url|(((repeating-)?(linear|radial))|conic)-gradient)\(|(no-)?(open|close)-quote/;
+    var contentValues = ['normal', 'none', 'initial', 'inherit', 'unset'];
+    var oldProcessStyleValue = processStyleValue;
+    var msPattern = /^-ms-/;
+    var hyphenPattern = /-(.)/g;
+    var hyphenatedCache = {};
+
+    processStyleValue = function processStyleValue(key, value) {
       if (key === 'content') {
-        if (typeof value !== 'string' || contentValues$1.indexOf(value) === -1 && !contentValuePattern$1.test(value) && (value.charAt(0) !== value.charAt(value.length - 1) || value.charAt(0) !== '"' && value.charAt(0) !== "'")) {
+        if (typeof value !== 'string' || contentValues.indexOf(value) === -1 && !contentValuePattern.test(value) && (value.charAt(0) !== value.charAt(value.length - 1) || value.charAt(0) !== '"' && value.charAt(0) !== "'")) {
           throw new Error("You seem to be using a value for 'content' without quotes, try replacing it with `content: '\"" + value + "\"'`");
         }
       }
 
-      var processed = oldProcessStyleValue$1(key, value);
+      var processed = oldProcessStyleValue(key, value);
 
-      if (processed !== '' && !isCustomProperty$1(key) && key.indexOf('-') !== -1 && hyphenatedCache$1[key] === undefined) {
-        hyphenatedCache$1[key] = true;
-        console.error("Using kebab-case for css properties in objects is not supported. Did you mean " + key.replace(msPattern$1, 'ms-').replace(hyphenPattern$1, function (str, _char) {
+      if (processed !== '' && !isCustomProperty(key) && key.indexOf('-') !== -1 && hyphenatedCache[key] === undefined) {
+        hyphenatedCache[key] = true;
+        console.error("Using kebab-case for css properties in objects is not supported. Did you mean " + key.replace(msPattern, 'ms-').replace(hyphenPattern, function (str, _char) {
           return _char.toUpperCase();
         }) + "?");
       }
@@ -1611,7 +1609,7 @@
     };
   }
 
-  function handleInterpolation$1(mergedProps, registered, interpolation) {
+  function handleInterpolation(mergedProps, registered, interpolation) {
     if (interpolation == null) {
       return '';
     }
@@ -1633,10 +1631,10 @@
       case 'object':
         {
           if (interpolation.anim === 1) {
-            cursor$1 = {
+            cursor = {
               name: interpolation.name,
               styles: interpolation.styles,
-              next: cursor$1
+              next: cursor
             };
             return interpolation.name;
           }
@@ -1648,10 +1646,10 @@
               // not the most efficient thing ever but this is a pretty rare case
               // and there will be very few iterations of this generally
               while (next !== undefined) {
-                cursor$1 = {
+                cursor = {
                   name: next.name,
                   styles: next.styles,
-                  next: cursor$1
+                  next: cursor
                 };
                 next = next.next;
               }
@@ -1666,16 +1664,16 @@
             return styles;
           }
 
-          return createStringFromObject$1(mergedProps, registered, interpolation);
+          return createStringFromObject(mergedProps, registered, interpolation);
         }
 
       case 'function':
         {
           if (mergedProps !== undefined) {
-            var previousCursor = cursor$1;
+            var previousCursor = cursor;
             var result = interpolation(mergedProps);
-            cursor$1 = previousCursor;
-            return handleInterpolation$1(mergedProps, registered, result);
+            cursor = previousCursor;
+            return handleInterpolation(mergedProps, registered, result);
           } else {
             console.error('Functions that are interpolated in css calls will be stringified.\n' + 'If you want to have a css call based on props, create a function that returns a css call like this\n' + 'let dynamicStyle = (props) => css`color: ${props.color}`\n' + 'It can be called directly with props or interpolated in a styled call like this\n' + "let SomeComponent = styled('div')`${dynamicStyle}`");
           }
@@ -1686,7 +1684,7 @@
       case 'string':
         {
           var matched = [];
-          var replaced = interpolation.replace(animationRegex$1, function (match, p1, p2) {
+          var replaced = interpolation.replace(animationRegex, function (match, p1, p2) {
             var fakeVarName = "animation" + matched.length;
             matched.push("const " + fakeVarName + " = keyframes`" + p2.replace(/^@keyframes animation-\w+/, '') + "`");
             return "${" + fakeVarName + "}";
@@ -1709,12 +1707,12 @@
     return cached !== undefined ? cached : interpolation;
   }
 
-  function createStringFromObject$1(mergedProps, registered, obj) {
+  function createStringFromObject(mergedProps, registered, obj) {
     var string = '';
 
     if (Array.isArray(obj)) {
       for (var i = 0; i < obj.length; i++) {
-        string += handleInterpolation$1(mergedProps, registered, obj[i]) + ";";
+        string += handleInterpolation(mergedProps, registered, obj[i]) + ";";
       }
     } else {
       for (var _key in obj) {
@@ -1723,8 +1721,8 @@
         if (typeof value !== 'object') {
           if (registered != null && registered[value] !== undefined) {
             string += _key + "{" + registered[value] + "}";
-          } else if (isProcessableValue$1(value)) {
-            string += processStyleName$1(_key) + ":" + processStyleValue$1(_key, value) + ";";
+          } else if (isProcessableValue(value)) {
+            string += processStyleName(_key) + ":" + processStyleValue(_key, value) + ";";
           }
         } else {
           if (_key === 'NO_COMPONENT_SELECTOR' && "development" !== 'production') {
@@ -1733,25 +1731,25 @@
 
           if (Array.isArray(value) && typeof value[0] === 'string' && (registered == null || registered[value[0]] === undefined)) {
             for (var _i = 0; _i < value.length; _i++) {
-              if (isProcessableValue$1(value[_i])) {
-                string += processStyleName$1(_key) + ":" + processStyleValue$1(_key, value[_i]) + ";";
+              if (isProcessableValue(value[_i])) {
+                string += processStyleName(_key) + ":" + processStyleValue(_key, value[_i]) + ";";
               }
             }
           } else {
-            var interpolated = handleInterpolation$1(mergedProps, registered, value);
+            var interpolated = handleInterpolation(mergedProps, registered, value);
 
             switch (_key) {
               case 'animation':
               case 'animationName':
                 {
-                  string += processStyleName$1(_key) + ":" + interpolated + ";";
+                  string += processStyleName(_key) + ":" + interpolated + ";";
                   break;
                 }
 
               default:
                 {
                   if (_key === 'undefined') {
-                    console.error(UNDEFINED_AS_OBJECT_KEY_ERROR$1);
+                    console.error(UNDEFINED_AS_OBJECT_KEY_ERROR);
                   }
 
                   string += _key + "{" + interpolated + "}";
@@ -1765,32 +1763,32 @@
     return string;
   }
 
-  var labelPattern$1 = /label:\s*([^\s;\n{]+)\s*(;|$)/g;
-  var sourceMapPattern$1;
+  var labelPattern = /label:\s*([^\s;\n{]+)\s*(;|$)/g;
+  var sourceMapPattern;
 
   {
-    sourceMapPattern$1 = /\/\*#\ssourceMappingURL=data:application\/json;\S+\s+\*\//g;
+    sourceMapPattern = /\/\*#\ssourceMappingURL=data:application\/json;\S+\s+\*\//g;
   } // this is the cursor for keyframes
   // keyframes are stored on the SerializedStyles object as a linked list
 
 
-  var cursor$1;
-  var serializeStyles$1 = function serializeStyles(args, registered, mergedProps) {
+  var cursor;
+  var serializeStyles = function serializeStyles(args, registered, mergedProps) {
     if (args.length === 1 && typeof args[0] === 'object' && args[0] !== null && args[0].styles !== undefined) {
       return args[0];
     }
 
     var stringMode = true;
     var styles = '';
-    cursor$1 = undefined;
+    cursor = undefined;
     var strings = args[0];
 
     if (strings == null || strings.raw === undefined) {
       stringMode = false;
-      styles += handleInterpolation$1(mergedProps, registered, strings);
+      styles += handleInterpolation(mergedProps, registered, strings);
     } else {
       if (strings[0] === undefined) {
-        console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR$2);
+        console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR$1);
       }
 
       styles += strings[0];
@@ -1798,11 +1796,11 @@
 
 
     for (var i = 1; i < args.length; i++) {
-      styles += handleInterpolation$1(mergedProps, registered, args[i]);
+      styles += handleInterpolation(mergedProps, registered, args[i]);
 
       if (stringMode) {
         if (strings[i] === undefined) {
-          console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR$2);
+          console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR$1);
         }
 
         styles += strings[i];
@@ -1812,18 +1810,18 @@
     var sourceMap;
 
     {
-      styles = styles.replace(sourceMapPattern$1, function (match) {
+      styles = styles.replace(sourceMapPattern, function (match) {
         sourceMap = match;
         return '';
       });
     } // using a global regex with .exec is stateful so lastIndex has to be reset each time
 
 
-    labelPattern$1.lastIndex = 0;
+    labelPattern.lastIndex = 0;
     var identifierName = '';
     var match; // https://esbench.com/bench/5b809c2cf2949800a0f61fb5
 
-    while ((match = labelPattern$1.exec(styles)) !== null) {
+    while ((match = labelPattern.exec(styles)) !== null) {
       identifierName += '-' + // $FlowFixMe we know it's not null
       match[1];
     }
@@ -1836,7 +1834,7 @@
         name: name,
         styles: styles,
         map: sourceMap,
-        next: cursor$1,
+        next: cursor,
         toString: function toString() {
           return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
         }
@@ -1844,7 +1842,7 @@
     }
   };
 
-  var isBrowser$3 = typeof document !== 'undefined';
+  var isBrowser$2 = typeof document !== 'undefined';
   var hasOwnProperty$1 = Object.prototype.hasOwnProperty;
 
   var EmotionCacheContext = /* #__PURE__ */React.createContext( // we're doing this to avoid preconstruct's dead code elimination in this one case
@@ -1872,7 +1870,7 @@
     });
   };
 
-  if (!isBrowser$3) {
+  if (!isBrowser$2) {
     withEmotionCache = function withEmotionCache(func) {
       return function (props) {
         var cache = React.useContext(EmotionCacheContext);
@@ -1918,22 +1916,22 @@
     var className = '';
 
     if (typeof props.className === 'string') {
-      className = getRegisteredStyles$1(cache.registered, registeredStyles, props.className);
+      className = getRegisteredStyles(cache.registered, registeredStyles, props.className);
     } else if (props.className != null) {
       className = props.className + " ";
     }
 
-    var serialized = serializeStyles$1(registeredStyles, undefined, React.useContext(ThemeContext$2));
+    var serialized = serializeStyles(registeredStyles, undefined, React.useContext(ThemeContext$2));
 
     if (serialized.name.indexOf('-') === -1) {
       var labelFromStack = props[labelPropName];
 
       if (labelFromStack) {
-        serialized = serializeStyles$1([serialized, 'label:' + labelFromStack + ';']);
+        serialized = serializeStyles([serialized, 'label:' + labelFromStack + ';']);
       }
     }
 
-    var rules = insertStyles$1(cache, serialized, typeof type === 'string');
+    var rules = insertStyles(cache, serialized, typeof type === 'string');
     className += cache.key + "-" + serialized.name;
     var newProps = {};
 
@@ -1947,7 +1945,7 @@
     newProps.className = className;
     var ele = /*#__PURE__*/React.createElement(type, newProps);
 
-    if (!isBrowser$3 && rules !== undefined) {
+    if (!isBrowser$2 && rules !== undefined) {
       var _ref;
 
       var serializedNames = serialized.name;
@@ -2061,9 +2059,9 @@
     }
 
     var styles = props.styles;
-    var serialized = serializeStyles$1([styles], undefined, React.useContext(ThemeContext$2));
+    var serialized = serializeStyles([styles], undefined, React.useContext(ThemeContext$2));
 
-    if (!isBrowser$3) {
+    if (!isBrowser$2) {
       var _ref;
 
       var serializedNames = serialized.name;
@@ -2136,7 +2134,7 @@
 
       if (serialized.next !== undefined) {
         // insert keyframes
-        insertStyles$1(cache, serialized.next, true);
+        insertStyles(cache, serialized.next, true);
       }
 
       if (sheet.tags.length) {
@@ -2160,7 +2158,7 @@
       args[_key] = arguments[_key];
     }
 
-    return serializeStyles$1(args);
+    return serializeStyles(args);
   }
 
   var keyframes = function keyframes() {
@@ -2230,7 +2228,7 @@
 
   function merge$1(registered, css, className) {
     var registeredStyles = [];
-    var rawClassName = getRegisteredStyles$1(registered, registeredStyles, className);
+    var rawClassName = getRegisteredStyles(registered, registeredStyles, className);
 
     if (registeredStyles.length < 2) {
       return className;
@@ -2253,19 +2251,19 @@
         args[_key] = arguments[_key];
       }
 
-      var serialized = serializeStyles$1(args, cache.registered);
+      var serialized = serializeStyles(args, cache.registered);
 
-      if (isBrowser$3) {
-        insertStyles$1(cache, serialized, false);
+      if (isBrowser$2) {
+        insertStyles(cache, serialized, false);
       } else {
-        var res = insertStyles$1(cache, serialized, false);
+        var res = insertStyles(cache, serialized, false);
 
         if (res !== undefined) {
           rules += res;
         }
       }
 
-      if (!isBrowser$3) {
+      if (!isBrowser$2) {
         serializedHashes += " " + serialized.name;
       }
 
@@ -2292,7 +2290,7 @@
     var ele = props.children(content);
     hasRendered = true;
 
-    if (!isBrowser$3 && rules.length !== 0) {
+    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 = {
@@ -2308,12 +2306,12 @@
   }
 
   {
-    var isBrowser$2 = typeof document !== 'undefined'; // #1727 for some reason Jest evaluates modules twice if some consuming module gets mocked with jest.mock
+    var isBrowser$1 = typeof document !== 'undefined'; // #1727 for some reason Jest evaluates modules twice if some consuming module gets mocked with jest.mock
 
     var isJest = typeof jest !== 'undefined';
 
-    if (isBrowser$2 && !isJest) {
-      var globalContext = isBrowser$2 ? window : global$1;
+    if (isBrowser$1 && !isJest) {
+      var globalContext = isBrowser$1 ? window : global$1;
       var globalKey = "__EMOTION_REACT_" + pkg.version.split('.')[0] + "__";
 
       if (globalContext[globalKey]) {
@@ -2324,357 +2322,6 @@
     }
   }
 
-  var isBrowser$1 = typeof document !== 'undefined';
-  function getRegisteredStyles(registered, registeredStyles, classNames) {
-    var rawClassName = '';
-    classNames.split(' ').forEach(function (className) {
-      if (registered[className] !== undefined) {
-        registeredStyles.push(registered[className] + ";");
-      } else {
-        rawClassName += className + " ";
-      }
-    });
-    return rawClassName;
-  }
-  var insertStyles = function insertStyles(cache, serialized, isStringTag) {
-    var className = cache.key + "-" + serialized.name;
-
-    if ( // we only need to add the styles to the registered cache if the
-    // class name could be used further down
-    // the tree but if it's a string tag, we know it won't
-    // so we don't have to add it to registered cache.
-    // this improves memory usage since we can avoid storing the whole style string
-    (isStringTag === false || // we need to always store it if we're in compat mode and
-    // in node since emotion-server relies on whether a style is in
-    // the registered cache to know whether a style is global or not
-    // also, note that this check will be dead code eliminated in the browser
-    isBrowser$1 === false && cache.compat !== undefined) && cache.registered[className] === undefined) {
-      cache.registered[className] = serialized.styles;
-    }
-
-    if (cache.inserted[serialized.name] === undefined) {
-      var stylesForSSR = '';
-      var current = serialized;
-
-      do {
-        var maybeStyles = cache.insert(serialized === current ? "." + className : '', current, cache.sheet, true);
-
-        if (!isBrowser$1 && maybeStyles !== undefined) {
-          stylesForSSR += maybeStyles;
-        }
-
-        current = current.next;
-      } while (current !== undefined);
-
-      if (!isBrowser$1 && stylesForSSR.length !== 0) {
-        return stylesForSSR;
-      }
-    }
-  };
-
-  var ILLEGAL_ESCAPE_SEQUENCE_ERROR$1 = "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 UNDEFINED_AS_OBJECT_KEY_ERROR = "You have passed in falsy value as style object's key (can happen when in example you pass unexported component as computed key).";
-  var hyphenateRegex = /[A-Z]|^ms/g;
-  var animationRegex = /_EMO_([^_]+?)_([^]*?)_EMO_/g;
-
-  var isCustomProperty = function isCustomProperty(property) {
-    return property.charCodeAt(1) === 45;
-  };
-
-  var isProcessableValue = function isProcessableValue(value) {
-    return value != null && typeof value !== 'boolean';
-  };
-
-  var processStyleName = /* #__PURE__ */memoize$1(function (styleName) {
-    return isCustomProperty(styleName) ? styleName : styleName.replace(hyphenateRegex, '-$&').toLowerCase();
-  });
-
-  var processStyleValue = function processStyleValue(key, value) {
-    switch (key) {
-      case 'animation':
-      case 'animationName':
-        {
-          if (typeof value === 'string') {
-            return value.replace(animationRegex, function (match, p1, p2) {
-              cursor = {
-                name: p1,
-                styles: p2,
-                next: cursor
-              };
-              return p1;
-            });
-          }
-        }
-    }
-
-    if (unitlessKeys[key] !== 1 && !isCustomProperty(key) && typeof value === 'number' && value !== 0) {
-      return value + 'px';
-    }
-
-    return value;
-  };
-
-  {
-    var contentValuePattern = /(attr|counters?|url|(((repeating-)?(linear|radial))|conic)-gradient)\(|(no-)?(open|close)-quote/;
-    var contentValues = ['normal', 'none', 'initial', 'inherit', 'unset'];
-    var oldProcessStyleValue = processStyleValue;
-    var msPattern = /^-ms-/;
-    var hyphenPattern = /-(.)/g;
-    var hyphenatedCache = {};
-
-    processStyleValue = function processStyleValue(key, value) {
-      if (key === 'content') {
-        if (typeof value !== 'string' || contentValues.indexOf(value) === -1 && !contentValuePattern.test(value) && (value.charAt(0) !== value.charAt(value.length - 1) || value.charAt(0) !== '"' && value.charAt(0) !== "'")) {
-          throw new Error("You seem to be using a value for 'content' without quotes, try replacing it with `content: '\"" + value + "\"'`");
-        }
-      }
-
-      var processed = oldProcessStyleValue(key, value);
-
-      if (processed !== '' && !isCustomProperty(key) && key.indexOf('-') !== -1 && hyphenatedCache[key] === undefined) {
-        hyphenatedCache[key] = true;
-        console.error("Using kebab-case for css properties in objects is not supported. Did you mean " + key.replace(msPattern, 'ms-').replace(hyphenPattern, function (str, _char) {
-          return _char.toUpperCase();
-        }) + "?");
-      }
-
-      return processed;
-    };
-  }
-
-  function handleInterpolation(mergedProps, registered, interpolation) {
-    if (interpolation == null) {
-      return '';
-    }
-
-    if (interpolation.__emotion_styles !== undefined) {
-      if (interpolation.toString() === 'NO_COMPONENT_SELECTOR') {
-        throw new Error('Component selectors can only be used in conjunction with @emotion/babel-plugin.');
-      }
-
-      return interpolation;
-    }
-
-    switch (typeof interpolation) {
-      case 'boolean':
-        {
-          return '';
-        }
-
-      case 'object':
-        {
-          if (interpolation.anim === 1) {
-            cursor = {
-              name: interpolation.name,
-              styles: interpolation.styles,
-              next: cursor
-            };
-            return interpolation.name;
-          }
-
-          if (interpolation.styles !== undefined) {
-            var next = interpolation.next;
-
-            if (next !== undefined) {
-              // not the most efficient thing ever but this is a pretty rare case
-              // and there will be very few iterations of this generally
-              while (next !== undefined) {
-                cursor = {
-                  name: next.name,
-                  styles: next.styles,
-                  next: cursor
-                };
-                next = next.next;
-              }
-            }
-
-            var styles = interpolation.styles + ";";
-
-            if (interpolation.map !== undefined) {
-              styles += interpolation.map;
-            }
-
-            return styles;
-          }
-
-          return createStringFromObject(mergedProps, registered, interpolation);
-        }
-
-      case 'function':
-        {
-          if (mergedProps !== undefined) {
-            var previousCursor = cursor;
-            var result = interpolation(mergedProps);
-            cursor = previousCursor;
-            return handleInterpolation(mergedProps, registered, result);
-          } else {
-            console.error('Functions that are interpolated in css calls will be stringified.\n' + 'If you want to have a css call based on props, create a function that returns a css call like this\n' + 'let dynamicStyle = (props) => css`color: ${props.color}`\n' + 'It can be called directly with props or interpolated in a styled call like this\n' + "let SomeComponent = styled('div')`${dynamicStyle}`");
-          }
-
-          break;
-        }
-
-      case 'string':
-        {
-          var matched = [];
-          var replaced = interpolation.replace(animationRegex, function (match, p1, p2) {
-            var fakeVarName = "animation" + matched.length;
-            matched.push("const " + fakeVarName + " = keyframes`" + p2.replace(/^@keyframes animation-\w+/, '') + "`");
-            return "${" + fakeVarName + "}";
-          });
-
-          if (matched.length) {
-            console.error('`keyframes` output got interpolated into plain string, please wrap it with `css`.\n\n' + 'Instead of doing this:\n\n' + [].concat(matched, ["`" + replaced + "`"]).join('\n') + '\n\nYou should wrap it with `css` like this:\n\n' + ("css`" + replaced + "`"));
-          }
-        }
-
-        break;
-    } // finalize string values (regular strings and functions interpolated into css calls)
-
-
-    if (registered == null) {
-      return interpolation;
-    }
-
-    var cached = registered[interpolation];
-    return cached !== undefined ? cached : interpolation;
-  }
-
-  function createStringFromObject(mergedProps, registered, obj) {
-    var string = '';
-
-    if (Array.isArray(obj)) {
-      for (var i = 0; i < obj.length; i++) {
-        string += handleInterpolation(mergedProps, registered, obj[i]) + ";";
-      }
-    } else {
-      for (var _key in obj) {
-        var value = obj[_key];
-
-        if (typeof value !== 'object') {
-          if (registered != null && registered[value] !== undefined) {
-            string += _key + "{" + registered[value] + "}";
-          } else if (isProcessableValue(value)) {
-            string += processStyleName(_key) + ":" + processStyleValue(_key, value) + ";";
-          }
-        } else {
-          if (_key === 'NO_COMPONENT_SELECTOR' && "development" !== 'production') {
-            throw new Error('Component selectors can only be used in conjunction with @emotion/babel-plugin.');
-          }
-
-          if (Array.isArray(value) && typeof value[0] === 'string' && (registered == null || registered[value[0]] === undefined)) {
-            for (var _i = 0; _i < value.length; _i++) {
-              if (isProcessableValue(value[_i])) {
-                string += processStyleName(_key) + ":" + processStyleValue(_key, value[_i]) + ";";
-              }
-            }
-          } else {
-            var interpolated = handleInterpolation(mergedProps, registered, value);
-
-            switch (_key) {
-              case 'animation':
-              case 'animationName':
-                {
-                  string += processStyleName(_key) + ":" + interpolated + ";";
-                  break;
-                }
-
-              default:
-                {
-                  if (_key === 'undefined') {
-                    console.error(UNDEFINED_AS_OBJECT_KEY_ERROR);
-                  }
-
-                  string += _key + "{" + interpolated + "}";
-                }
-            }
-          }
-        }
-      }
-    }
-
-    return string;
-  }
-
-  var labelPattern = /label:\s*([^\s;\n{]+)\s*(;|$)/g;
-  var sourceMapPattern;
-
-  {
-    sourceMapPattern = /\/\*#\ssourceMappingURL=data:application\/json;\S+\s+\*\//g;
-  } // this is the cursor for keyframes
-  // keyframes are stored on the SerializedStyles object as a linked list
-
-
-  var cursor;
-  var serializeStyles = function serializeStyles(args, registered, mergedProps) {
-    if (args.length === 1 && typeof args[0] === 'object' && args[0] !== null && args[0].styles !== undefined) {
-      return args[0];
-    }
-
-    var stringMode = true;
-    var styles = '';
-    cursor = undefined;
-    var strings = args[0];
-
-    if (strings == null || strings.raw === undefined) {
-      stringMode = false;
-      styles += handleInterpolation(mergedProps, registered, strings);
-    } else {
-      if (strings[0] === undefined) {
-        console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR$1);
-      }
-
-      styles += strings[0];
-    } // we start at 1 since we've already handled the first arg
-
-
-    for (var i = 1; i < args.length; i++) {
-      styles += handleInterpolation(mergedProps, registered, args[i]);
-
-      if (stringMode) {
-        if (strings[i] === undefined) {
-          console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR$1);
-        }
-
-        styles += strings[i];
-      }
-    }
-
-    var sourceMap;
-
-    {
-      styles = styles.replace(sourceMapPattern, function (match) {
-        sourceMap = match;
-        return '';
-      });
-    } // using a global regex with .exec is stateful so lastIndex has to be reset each time
-
-
-    labelPattern.lastIndex = 0;
-    var identifierName = '';
-    var match; // https://esbench.com/bench/5b809c2cf2949800a0f61fb5
-
-    while ((match = labelPattern.exec(styles)) !== null) {
-      identifierName += '-' + // $FlowFixMe we know it's not null
-      match[1];
-    }
-
-    var name = murmur2(styles) + identifierName;
-
-    {
-      // $FlowFixMe SerializedStyles type doesn't have toString property (and we don't want to add it)
-      return {
-        name: name,
-        styles: styles,
-        map: sourceMap,
-        next: cursor,
-        toString: function toString() {
-          return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
-        }
-      };
-    }
-  };
-
   var testOmitPropsOnStringTag = isPropValid;
 
   var testOmitPropsOnComponent = function testOmitPropsOnComponent(key) {
@@ -3654,7 +3301,7 @@
   propTypes.element;
 
   var reactJsxRuntime_production_min = createCommonjsModule(function (module, exports) {
-  var g=60103;exports.Fragment=60107;if("function"===typeof Symbol&&Symbol.for){var h=Symbol.for;g=h("react.element");exports.Fragment=h("react.fragment");}var m=React__default['default'].__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,n=Object.prototype.hasOwnProperty,p={key:!0,ref:!0,__self:!0,__source:!0};
+  var g=60103;exports.Fragment=60107;if("function"===typeof Symbol&&Symbol.for){var h=Symbol.for;g=h("react.element");exports.Fragment=h("react.fragment");}var m=React__default["default"].__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,n=Object.prototype.hasOwnProperty,p={key:!0,ref:!0,__self:!0,__source:!0};
   function q(c,a,k){var b,d={},e=null,l=null;void 0!==k&&(e=""+k);void 0!==a.key&&(e=""+a.key);void 0!==a.ref&&(l=a.ref);for(b in a)n.call(a,b)&&!p.hasOwnProperty(b)&&(d[b]=a[b]);if(c&&c.defaultProps)for(b in a=c.defaultProps,a)void 0===d[b]&&(d[b]=a[b]);return {$$typeof:g,type:c,key:e,ref:l,props:d,_owner:m.current}}exports.jsx=q;exports.jsxs=q;
   });
   reactJsxRuntime_production_min.Fragment;
@@ -3666,7 +3313,7 @@
   {
     (function() {
 
-  var React = React__default['default'];
+  var React = React__default["default"];
   var _assign = objectAssign;
 
   // ATTENTION
@@ -5980,8 +5627,8 @@
     const direction = directions[b] || '';
     return Array.isArray(direction) ? direction.map(dir => property + dir) : [property + direction];
   });
-  const marginKeys = ['m', 'mt', 'mr', 'mb', 'ml', 'mx', 'my', 'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY'];
-  const paddingKeys = ['p', 'pt', 'pr', 'pb', 'pl', 'px', 'py', 'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'paddingX', 'paddingY'];
+  const marginKeys = ['m', 'mt', 'mr', 'mb', 'ml', 'mx', 'my', 'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'marginInline', 'marginInlineStart', 'marginInlineEnd', 'marginBlock', 'marginBlockStart', 'marginBlockEnd'];
+  const paddingKeys = ['p', 'pt', 'pr', 'pb', 'pl', 'px', 'py', 'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'paddingX', 'paddingY', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd'];
   const spacingKeys = [...marginKeys, ...paddingKeys];
   function createUnaryUnit(theme, themeKey, defaultValue, propName) {
     const themeSpacing = getPath(theme, themeKey) || defaultValue;
@@ -6554,7 +6201,7 @@
 
   styleFunctionSx.filterProps = ['sx'];
 
-  const _excluded$2n = ["sx"];
+  const _excluded$2o = ["sx"];
 
   const splitProps = props => {
     const result = {
@@ -6575,7 +6222,7 @@
     const {
       sx: inSx
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$2n);
+          other = _objectWithoutPropertiesLoose(props, _excluded$2o);
 
     const {
       systemProps,
@@ -6627,7 +6274,7 @@
   	return str;
   }
 
-  const _excluded$2m = ["values", "unit", "step"];
+  const _excluded$2n = ["values", "unit", "step"];
 
   function createBreakpoints(breakpoints) {
     const {
@@ -6648,7 +6295,7 @@
       unit = 'px',
       step = 5
     } = breakpoints,
-          other = _objectWithoutPropertiesLoose(breakpoints, _excluded$2m);
+          other = _objectWithoutPropertiesLoose(breakpoints, _excluded$2n);
 
     const keys = Object.keys(values);
 
@@ -6723,7 +6370,7 @@
     return spacing;
   }
 
-  const _excluded$2l = ["breakpoints", "palette", "spacing", "shape"];
+  const _excluded$2m = ["breakpoints", "palette", "spacing", "shape"];
 
   function createTheme$1(options = {}, ...args) {
     const {
@@ -6732,7 +6379,7 @@
       spacing: spacingInput,
       shape: shapeInput = {}
     } = options,
-          other = _objectWithoutPropertiesLoose(options, _excluded$2l);
+          other = _objectWithoutPropertiesLoose(options, _excluded$2m);
 
     const breakpoints = createBreakpoints(breakpointsInput);
     const spacing = createSpacing(spacingInput);
@@ -6854,7 +6501,7 @@
     return useTheme$2(defaultTheme);
   }
 
-  const _excluded$2k = ["className", "component"];
+  const _excluded$2l = ["className", "component"];
   function createBox(options = {}) {
     const {
       defaultTheme
@@ -6868,7 +6515,7 @@
         className,
         component = 'div'
       } = _extendSxProp,
-            other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$2k);
+            other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$2l);
 
       return /*#__PURE__*/jsxRuntime_1(BoxRoot, _extends({
         as: component,
@@ -6904,7 +6551,7 @@
     return Box;
   }
 
-  const _excluded$2j = ["variant"];
+  const _excluded$2k = ["variant"];
 
   function isEmpty$2(string) {
     return string.length === 0;
@@ -6920,7 +6567,7 @@
     const {
       variant
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$2j);
+          other = _objectWithoutPropertiesLoose(props, _excluded$2k);
 
     let classKey = variant || '';
     Object.keys(other).sort().forEach(key => {
@@ -6933,7 +6580,7 @@
     return classKey;
   }
 
-  const _excluded$2i = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"],
+  const _excluded$2j = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"],
         _excluded2$c = ["theme"],
         _excluded3$1 = ["theme"];
 
@@ -7014,7 +6661,7 @@
         skipSx: inputSkipSx,
         overridesResolver
       } = inputOptions,
-            options = _objectWithoutPropertiesLoose(inputOptions, _excluded$2i); // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
+            options = _objectWithoutPropertiesLoose(inputOptions, _excluded$2j); // 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;
@@ -7512,7 +7159,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     ThemeProvider.propTypes = exactProp(ThemeProvider.propTypes) ;
   }
 
-  const _excluded$2h = ["defaultProps", "mixins", "overrides", "palette", "props", "styleOverrides"],
+  const _excluded$2i = ["defaultProps", "mixins", "overrides", "palette", "props", "styleOverrides"],
         _excluded2$b = ["type", "mode"];
   function adaptV4Theme(inputTheme) {
     {
@@ -7527,7 +7174,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       props = {},
       styleOverrides = {}
     } = inputTheme,
-          other = _objectWithoutPropertiesLoose(inputTheme, _excluded$2h);
+          other = _objectWithoutPropertiesLoose(inputTheme, _excluded$2i);
 
     const theme = _extends({}, other, {
       components: {}
@@ -8667,7 +8314,7 @@ 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$2g = ["classes", "className", "invisible", "component", "components", "componentsProps", "theme"];
+  const _excluded$2h = ["classes", "className", "invisible", "component", "components", "componentsProps", "theme"];
 
   const useUtilityClasses$1P = ownerState => {
     const {
@@ -8692,7 +8339,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$2h);
 
     const ownerState = _extends({}, props, {
       classes: classesProp,
@@ -8773,7 +8420,7 @@ 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$2f = ["anchorOrigin", "classes", "badgeContent", "component", "children", "className", "components", "componentsProps", "invisible", "max", "overlap", "showZero", "variant", "theme"];
+  const _excluded$2g = ["anchorOrigin", "classes", "badgeContent", "component", "children", "className", "components", "componentsProps", "invisible", "max", "overlap", "showZero", "variant", "theme"];
 
   const useUtilityClasses$1O = ownerState => {
     const {
@@ -8812,7 +8459,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$2f);
+          other = _objectWithoutPropertiesLoose(props, _excluded$2g);
 
     const prevProps = usePreviousProps$1({
       anchorOrigin: anchorOriginProp,
@@ -8978,13 +8625,13 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
    *
    * @param object An object to extract event handlers from.
    */
-  function extractEventHandlers(object) {
+  function extractEventHandlers(object, excludeKeys = []) {
     if (object === undefined) {
       return {};
     }
 
     const result = {};
-    Object.keys(object).filter(prop => prop.match(/^on[A-Z]/) && typeof object[prop] === 'function').forEach(prop => {
+    Object.keys(object).filter(prop => prop.match(/^on[A-Z]/) && typeof object[prop] === 'function' && !excludeKeys.includes(prop)).forEach(prop => {
       result[prop] = object[prop];
     });
     return result;
@@ -9126,12 +8773,23 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         (_otherHandlers$onClic2 = otherHandlers.onClick) == null ? void 0 : _otherHandlers$onClic2.call(otherHandlers, event);
       }
     });
+    const handleOwnRef = useForkRef(focusVisibleRef, buttonRef);
+    const handleRef = useForkRef(ref, handleOwnRef);
+    const [hostElementName, setHostElementName] = React__namespace.useState('');
+
+    const updateRef = instance => {
+      var _instance$tagName;
+
+      setHostElementName((_instance$tagName = instance == null ? void 0 : instance.tagName) != null ? _instance$tagName : '');
+      setRef(handleRef, instance);
+    };
+
     const buttonProps = {};
 
-    if (elementType === 'button') {
+    if (hostElementName === 'BUTTON') {
       buttonProps.type = type != null ? type : 'button';
       buttonProps.disabled = disabled;
-    } else {
+    } else if (hostElementName !== '') {
       if (!href && !to) {
         buttonProps.role = 'button';
       }
@@ -9141,9 +8799,6 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       }
     }
 
-    const handleOwnRef = useForkRef(focusVisibleRef, buttonRef);
-    const handleRef = useForkRef(ref, handleOwnRef);
-
     const getRootProps = otherHandlers => {
       const propsEventHandlers = extractEventHandlers(props);
 
@@ -9167,7 +8822,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       return _extends({
         tabIndex: disabled ? -1 : tabIndex,
         type,
-        ref: handleRef
+        ref: updateRef
       }, buttonProps, mergedEventHandlers);
     };
 
@@ -9198,7 +8853,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     });
   }
 
-  const _excluded$2e = ["className", "component", "components", "componentsProps", "children", "disabled", "action", "onBlur", "onClick", "onFocus", "onFocusVisible", "onKeyDown", "onKeyUp", "onMouseLeave"];
+  const _excluded$2f = ["className", "component", "components", "componentsProps", "children", "disabled", "action", "onBlur", "onClick", "onFocus", "onFocusVisible", "onKeyDown", "onKeyUp", "onMouseLeave"];
 
   const useUtilityClasses$1N = ownerState => {
     const {
@@ -9235,7 +8890,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       children,
       action
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$2e);
+          other = _objectWithoutPropertiesLoose(props, _excluded$2f);
 
     const buttonRef = React__namespace.useRef();
     const handleRef = useForkRef(buttonRef, ref);
@@ -9349,9 +9004,9 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     return generateUtilityClass('MuiFormControl', slot);
   }
   const formControlUnstyledClasses = generateUtilityClasses('MuiFormControl', ['root', 'disabled']);
-  var classes$1 = formControlUnstyledClasses;
+  var classes$2 = formControlUnstyledClasses;
 
-  const _excluded$2d = ["defaultValue", "children", "className", "component", "components", "componentsProps", "disabled", "error", "focused", "onChange", "required", "value"];
+  const _excluded$2e = ["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 !== '';
@@ -9406,7 +9061,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       required = false,
       value: incomingValue
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$2d);
+          other = _objectWithoutPropertiesLoose(props, _excluded$2e);
 
     const [value, setValue] = useControlled({
       controlled: incomingValue,
@@ -9477,7 +9132,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       children: /*#__PURE__*/jsxRuntime_1(Root, _extends({
         ref: ref
       }, rootProps, {
-        className: clsx(classes$1.root, className, rootProps == null ? void 0 : rootProps.className, disabled && classes$1.disabled),
+        className: clsx(classes$2.root, className, rootProps == null ? void 0 : rootProps.className, disabled && classes$2.disabled),
         children: children
       }))
     });
@@ -9565,6 +9220,485 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     return React__namespace.useContext(FormControlUnstyledContext$1);
   }
 
+  function getInputUnstyledUtilityClass(slot) {
+    return generateUtilityClass('MuiInput', slot);
+  }
+  const inputBaseClasses$2 = generateUtilityClasses('MuiInput', ['root', 'formControl', 'focused', 'disabled', 'error', 'multiline', 'input', 'inputMultiline', 'inputTypeSearch', 'adornedStart', 'adornedEnd']);
+  var classes$1 = inputBaseClasses$2;
+
+  function useInput(props, inputRef) {
+    const {
+      defaultValue,
+      disabled: disabledProp = false,
+      error: errorProp = false,
+      onBlur,
+      onChange,
+      onFocus,
+      required: requiredProp = false,
+      value: valueProp
+    } = props;
+    const formControlContext = useFormControlUnstyled();
+    let value;
+    let required;
+    let disabled;
+    let error;
+
+    if (formControlContext) {
+      var _formControlContext$d, _formControlContext$r, _formControlContext$e;
+
+      value = formControlContext.value;
+      disabled = (_formControlContext$d = formControlContext.disabled) != null ? _formControlContext$d : false;
+      required = (_formControlContext$r = formControlContext.required) != null ? _formControlContext$r : false;
+      error = (_formControlContext$e = formControlContext.error) != null ? _formControlContext$e : false;
+    } else {
+      value = valueProp;
+      disabled = disabledProp;
+      required = requiredProp;
+      error = errorProp;
+    }
+
+    const {
+      current: isControlled
+    } = React__namespace.useRef(value != null);
+    const handleInputRefWarning = React__namespace.useCallback(instance => {
+      {
+        if (instance && instance.nodeName !== 'INPUT' && !instance.focus) {
+          console.error(['MUI: You have provided a `components.Input` to the input component', 'that does not correctly handle the `ref` prop.', 'Make sure the `ref` prop is called with a HTMLInputElement.'].join('\n'));
+        }
+      }
+    }, []);
+    const internalInputRef = React__namespace.useRef(null);
+    const handleIncomingRef = useForkRef(inputRef, handleInputRefWarning);
+    const handleInputRef = useForkRef(internalInputRef, handleIncomingRef);
+    const [focused, setFocused] = React__namespace.useState(false); // The blur won't fire when the disabled state is set on a focused input.
+    // We need to book keep the focused state manually.
+
+    React__namespace.useEffect(() => {
+      if (!formControlContext && disabled && focused) {
+        setFocused(false); // @ts-ignore
+
+        onBlur == null ? void 0 : onBlur();
+      }
+    }, [formControlContext, disabled, focused, onBlur]);
+
+    const handleFocus = otherHandlers => event => {
+      var _otherHandlers$onFocu;
+
+      // Fix a bug with IE11 where the focus/blur events are triggered
+      // while the component is disabled.
+      if (formControlContext != null && formControlContext.disabled) {
+        event.stopPropagation();
+        return;
+      }
+
+      (_otherHandlers$onFocu = otherHandlers.onFocus) == null ? void 0 : _otherHandlers$onFocu.call(otherHandlers, event);
+
+      if (formControlContext && formControlContext.onFocus) {
+        var _formControlContext$o;
+
+        formControlContext == null ? void 0 : (_formControlContext$o = formControlContext.onFocus) == null ? void 0 : _formControlContext$o.call(formControlContext);
+      } else {
+        setFocused(true);
+      }
+    };
+
+    const handleBlur = otherHandlers => event => {
+      var _otherHandlers$onBlur;
+
+      (_otherHandlers$onBlur = otherHandlers.onBlur) == null ? void 0 : _otherHandlers$onBlur.call(otherHandlers, event);
+
+      if (formControlContext && formControlContext.onBlur) {
+        formControlContext.onBlur();
+      } else {
+        setFocused(false);
+      }
+    };
+
+    const handleChange = otherHandlers => (event, ...args) => {
+      var _formControlContext$o2, _otherHandlers$onChan;
+
+      if (!isControlled) {
+        const element = event.target || internalInputRef.current;
+
+        if (element == null) {
+          throw new Error(`MUI: Expected valid input target. Did you use a custom \`components.Input\` and forget to forward refs? See https://mui.com/r/input-component-ref-interface for more info.` );
+        }
+      }
+
+      formControlContext == null ? void 0 : (_formControlContext$o2 = formControlContext.onChange) == null ? void 0 : _formControlContext$o2.call(formControlContext, event); // @ts-ignore
+
+      (_otherHandlers$onChan = otherHandlers.onChange) == null ? void 0 : _otherHandlers$onChan.call(otherHandlers, event, ...args);
+    };
+
+    const handleClick = otherHandlers => event => {
+      var _otherHandlers$onClic;
+
+      if (internalInputRef.current && event.currentTarget === event.target) {
+        internalInputRef.current.focus();
+      }
+
+      (_otherHandlers$onClic = otherHandlers.onClick) == null ? void 0 : _otherHandlers$onClic.call(otherHandlers, event);
+    };
+
+    const getRootProps = externalProps => {
+      // onBlur, onChange and onFocus are forwarded to the input slot.
+      const propsEventHandlers = extractEventHandlers(props, ['onBlur', 'onChange', 'onFocus']);
+
+      const externalEventHandlers = _extends({}, propsEventHandlers, extractEventHandlers(externalProps));
+
+      return _extends({}, externalProps, externalEventHandlers, {
+        onClick: handleClick(externalEventHandlers)
+      });
+    };
+
+    const getInputProps = externalProps => {
+      const propsEventHandlers = {
+        onBlur,
+        onChange,
+        onFocus
+      };
+
+      const externalEventHandlers = _extends({}, propsEventHandlers, extractEventHandlers(externalProps));
+
+      const mergedEventHandlers = _extends({}, externalProps, externalEventHandlers, {
+        onBlur: handleBlur(externalEventHandlers),
+        onChange: handleChange(externalEventHandlers),
+        onFocus: handleFocus(externalEventHandlers)
+      });
+
+      return _extends({}, mergedEventHandlers, {
+        'aria-invalid': error || undefined,
+        defaultValue: defaultValue,
+        ref: handleInputRef,
+        value: value,
+        required,
+        disabled
+      });
+    };
+
+    return {
+      disabled,
+      error,
+      focused,
+      formControlContext,
+      getInputProps,
+      getRootProps,
+      required,
+      value
+    };
+  }
+
+  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 InputUnstyled = /*#__PURE__*/React__namespace.forwardRef(function InputUnstyled(props, ref) {
+    var _componentsProps$inpu, _ref, _componentsProps$root, _components$Input, _componentsProps$inpu2;
+
+    const {
+      'aria-describedby': ariaDescribedby,
+      'aria-label': ariaLabel,
+      'aria-labelledby': ariaLabelledby,
+      autoComplete,
+      autoFocus,
+      className,
+      component,
+      components = {},
+      componentsProps = {},
+      defaultValue,
+      disabled,
+      endAdornment,
+      error,
+      id,
+      maxRows,
+      minRows,
+      multiline = false,
+      name,
+      onClick,
+      onChange,
+      onKeyDown,
+      onKeyUp,
+      onFocus,
+      onBlur,
+      placeholder,
+      readOnly,
+      required,
+      rows,
+      type = 'text',
+      startAdornment,
+      value
+    } = props,
+          other = _objectWithoutPropertiesLoose(props, _excluded$2d);
+
+    const {
+      getRootProps,
+      getInputProps,
+      focused,
+      formControlContext,
+      error: errorState,
+      disabled: disabledState
+    } = useInput({
+      disabled,
+      defaultValue,
+      error,
+      onBlur,
+      onClick,
+      onChange,
+      onFocus,
+      required,
+      value
+    }, (_componentsProps$inpu = componentsProps.input) == null ? void 0 : _componentsProps$inpu.ref);
+
+    const ownerState = _extends({}, props, {
+      disabled: disabledState,
+      error: errorState,
+      focused,
+      formControlContext,
+      multiline,
+      type
+    });
+
+    const rootStateClasses = clsx(disabledState && classes$1.disabled, errorState && classes$1.error, focused && classes$1.focused, Boolean(formControlContext) && classes$1.formControl, multiline && classes$1.multiline, Boolean(startAdornment) && classes$1.adornedStart, Boolean(endAdornment) && classes$1.adornedEnd);
+    const inputStateClasses = clsx(disabledState && classes$1.disabled, multiline && classes$1.multiline);
+    const propsToForward = {
+      'aria-describedby': ariaDescribedby,
+      'aria-label': ariaLabel,
+      'aria-labelledby': ariaLabelledby,
+      autoComplete,
+      autoFocus,
+      id,
+      onKeyDown,
+      onKeyUp,
+      name,
+      placeholder,
+      readOnly,
+      type
+    };
+    const Root = (_ref = component != null ? component : components.Root) != null ? _ref : 'div';
+    const rootProps = appendOwnerState(Root, _extends({}, getRootProps(_extends({}, other, componentsProps.root)), {
+      className: clsx(classes$1.root, rootStateClasses, className, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.className)
+    }), ownerState);
+    let Input = (_components$Input = components.Input) != null ? _components$Input : 'input';
+    let inputProps = appendOwnerState(Input, _extends({}, getInputProps(_extends({}, componentsProps.input, propsToForward)), {
+      className: clsx(classes$1.input, inputStateClasses, (_componentsProps$inpu2 = componentsProps.input) == null ? void 0 : _componentsProps$inpu2.className)
+    }), ownerState);
+
+    if (multiline) {
+      var _components$Textarea, _components$Textarea2;
+
+      const hasHostTexarea = isHostComponent((_components$Textarea = components.Textarea) != null ? _components$Textarea : 'textarea');
+
+      if (rows) {
+        {
+          if (minRows || maxRows) {
+            console.warn('Material-UI: You can not use the `minRows` or `maxRows` props when the input `rows` prop is set.');
+          }
+        }
+
+        inputProps = _extends({
+          type: undefined,
+          minRows: hasHostTexarea ? undefined : rows,
+          maxRows: hasHostTexarea ? undefined : rows
+        }, inputProps);
+      } else {
+        inputProps = _extends({
+          type: undefined,
+          maxRows: hasHostTexarea ? undefined : maxRows,
+          minRows: hasHostTexarea ? undefined : minRows
+        }, inputProps);
+      }
+
+      Input = (_components$Textarea2 = components.Textarea) != null ? _components$Textarea2 : 'textarea';
+    }
+
+    return /*#__PURE__*/jsxRuntime_2(Root, _extends({}, rootProps, {
+      ref: ref,
+      children: [startAdornment, /*#__PURE__*/jsxRuntime_1(Input, _extends({}, inputProps)), endAdornment]
+    }));
+  });
+  InputUnstyled.propTypes
+  /* remove-proptypes */
+  = {
+    // ----------------------------- Warning --------------------------------
+    // | These PropTypes are generated from the TypeScript type definitions |
+    // |     To update them edit TypeScript types and run "yarn proptypes"  |
+    // ----------------------------------------------------------------------
+
+    /**
+     * @ignore
+     */
+    'aria-describedby': propTypes.string,
+
+    /**
+     * @ignore
+     */
+    'aria-label': propTypes.string,
+
+    /**
+     * @ignore
+     */
+    'aria-labelledby': propTypes.string,
+
+    /**
+     * This prop helps users to fill forms faster, especially on mobile devices.
+     * The name can be confusing, as it's more like an autofill.
+     * You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).
+     */
+    autoComplete: propTypes.string,
+
+    /**
+     * If `true`, the `input` element is focused during the first mount.
+     */
+    autoFocus: propTypes.bool,
+
+    /**
+     * @ignore
+     */
+    children: propTypes.node,
+
+    /**
+     * Class name applied to the root element.
+     */
+    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 InputBase.
+     * Either a string to use a HTML element or a component.
+     * @default {}
+     */
+    components: propTypes.shape({
+      Input: propTypes.elementType,
+      Root: propTypes.elementType,
+      Textarea: propTypes.elementType
+    }),
+
+    /**
+     * The props used for each slot inside the Input.
+     * @default {}
+     */
+    componentsProps: propTypes.object,
+
+    /**
+     * The default value. Use when the component is not controlled.
+     */
+    defaultValue: propTypes.any,
+
+    /**
+     * If `true`, the component is disabled.
+     * The prop defaults to the value (`false`) inherited from the parent FormControl component.
+     */
+    disabled: propTypes.bool,
+
+    /**
+     * Trailing adornment for this input.
+     */
+    endAdornment: propTypes.node,
+
+    /**
+     * If `true`, the `input` will indicate an error.
+     * The prop defaults to the value (`false`) inherited from the parent FormControl component.
+     */
+    error: propTypes.bool,
+
+    /**
+     * The id of the `input` element.
+     */
+    id: propTypes.string,
+
+    /**
+     * Maximum number of rows to display when multiline option is set to true.
+     */
+    maxRows: propTypes.number,
+
+    /**
+     * Minimum number of rows to display when multiline option is set to true.
+     */
+    minRows: propTypes.number,
+
+    /**
+     * If `true`, a `textarea` element is rendered.
+     * @default false
+     */
+    multiline: propTypes.bool,
+
+    /**
+     * Name attribute of the `input` element.
+     */
+    name: propTypes.string,
+
+    /**
+     * @ignore
+     */
+    onBlur: propTypes.func,
+
+    /**
+     * @ignore
+     */
+    onChange: propTypes.func,
+
+    /**
+     * @ignore
+     */
+    onClick: propTypes.func,
+
+    /**
+     * @ignore
+     */
+    onFocus: propTypes.func,
+
+    /**
+     * @ignore
+     */
+    onKeyDown: propTypes.func,
+
+    /**
+     * @ignore
+     */
+    onKeyUp: propTypes.func,
+
+    /**
+     * The short hint displayed in the `input` before the user enters a value.
+     */
+    placeholder: propTypes.string,
+
+    /**
+     * It prevents the user from changing the value of the field
+     * (not from interacting with the field).
+     */
+    readOnly: propTypes.bool,
+
+    /**
+     * If `true`, the `input` element is required.
+     * The prop defaults to the value (`false`) inherited from the parent FormControl component.
+     */
+    required: propTypes.bool,
+
+    /**
+     * Number of rows to display when multiline option is set to true.
+     */
+    rows: propTypes.number,
+
+    /**
+     * Leading adornment for this input.
+     */
+    startAdornment: propTypes.node,
+
+    /**
+     * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types).
+     * @default 'text'
+     */
+    type: propTypes.string,
+
+    /**
+     * The value of the `input` element, required for a controlled component.
+     */
+    value: propTypes.any
+  } ;
+  var InputUnstyled$1 = InputUnstyled;
+
   function getContainer$1(container) {
     return typeof container === 'function' ? container() : container;
   }
@@ -10840,18 +10974,12 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
 
   function setValueIndex({
     values,
-    source,
     newValue,
     index
   }) {
-    // Performance shortcut
-    if (source[index] === newValue) {
-      return source;
-    }
-
     const output = values.slice();
     output[index] = newValue;
-    return output;
+    return output.sort(asc);
   }
 
   function focusThumb({
@@ -11105,10 +11233,9 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         const previousValue = newValue;
         newValue = setValueIndex({
           values,
-          source: valueDerived,
           newValue,
           index
-        }).sort(asc);
+        });
         let activeIndex = index; // Potentially swap the index if needed.
 
         if (!disableSwap) {
@@ -11142,8 +11269,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     const getFingerNewValue = ({
       finger,
       move = false,
-      values: values2,
-      source
+      values: values2
     }) => {
       const {
         current: slider
@@ -11195,10 +11321,9 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         const previousValue = newValue;
         newValue = setValueIndex({
           values: values2,
-          source,
           newValue,
           index: activeIndex
-        }).sort(asc); // Potentially swap the index if needed.
+        }); // Potentially swap the index if needed.
 
         if (!(disableSwap && move)) {
           activeIndex = newValue.indexOf(previousValue);
@@ -11233,8 +11358,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       } = getFingerNewValue({
         finger,
         move: true,
-        values,
-        source: valueDerived
+        values
       });
       focusThumb({
         sliderRef,
@@ -11263,8 +11387,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         newValue
       } = getFingerNewValue({
         finger,
-        values,
-        source: valueDerived
+        values
       });
       setActive(-1);
 
@@ -11299,8 +11422,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         activeIndex
       } = getFingerNewValue({
         finger,
-        values,
-        source: valueDerived
+        values
       });
       focusThumb({
         sliderRef,
@@ -11362,8 +11484,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         activeIndex
       } = getFingerNewValue({
         finger,
-        values,
-        source: valueDerived
+        values
       });
       focusThumb({
         sliderRef,
@@ -11451,9 +11572,9 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
           children: [/*#__PURE__*/jsxRuntime_1(Mark, _extends({
             "data-index": index
           }, markProps, !isHostComponent(Mark) && {
-            ownerState: _extends({}, ownerState, markProps.ownerState)
+            ownerState: _extends({}, ownerState, markProps.ownerState),
+            markActive
           }, {
-            markActive: markActive,
             style: _extends({}, style, markProps.style),
             className: clsx(classes.mark, markProps.className, markActive && classes.markActive)
           })), mark.label != null ? /*#__PURE__*/jsxRuntime_1(MarkLabel, _extends({
@@ -13165,7 +13286,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     exitActive: propTypes.string
   })]) ;
 
-  var TransitionGroupContext = React__default['default'].createContext(null);
+  var TransitionGroupContext = React__default["default"].createContext(null);
 
   var UNMOUNTED = 'unmounted';
   var EXITED = 'exited';
@@ -13403,7 +13524,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       var enter = this.props.enter;
       var appearing = this.context ? this.context.isMounting : mounting;
 
-      var _ref2 = this.props.nodeRef ? [appearing] : [ReactDOM__default['default'].findDOMNode(this), appearing],
+      var _ref2 = this.props.nodeRef ? [appearing] : [ReactDOM__default["default"].findDOMNode(this), appearing],
           maybeNode = _ref2[0],
           maybeAppearing = _ref2[1];
 
@@ -13441,7 +13562,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
 
       var exit = this.props.exit;
       var timeouts = this.getTimeouts();
-      var maybeNode = this.props.nodeRef ? undefined : ReactDOM__default['default'].findDOMNode(this); // no exit animation skip right to EXITED
+      var maybeNode = this.props.nodeRef ? undefined : ReactDOM__default["default"].findDOMNode(this); // no exit animation skip right to EXITED
 
       if (!exit || config.disabled) {
         this.safeSetState({
@@ -13505,7 +13626,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
 
     _proto.onTransitionEnd = function onTransitionEnd(timeout, handler) {
       this.setNextCallback(handler);
-      var node = this.props.nodeRef ? this.props.nodeRef.current : ReactDOM__default['default'].findDOMNode(this);
+      var node = this.props.nodeRef ? this.props.nodeRef.current : ReactDOM__default["default"].findDOMNode(this);
       var doesNotHaveTimeoutOrListener = timeout == null && !this.props.addEndListener;
 
       if (!node || doesNotHaveTimeoutOrListener) {
@@ -13555,14 +13676,14 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       return (
         /*#__PURE__*/
         // allows for nested Transitions
-        React__default['default'].createElement(TransitionGroupContext.Provider, {
+        React__default["default"].createElement(TransitionGroupContext.Provider, {
           value: null
-        }, typeof children === 'function' ? children(status, childProps) : React__default['default'].cloneElement(React__default['default'].Children.only(children), childProps))
+        }, typeof children === 'function' ? children(status, childProps) : React__default["default"].cloneElement(React__default["default"].Children.only(children), childProps))
       );
     };
 
     return Transition;
-  }(React__default['default'].Component);
+  }(React__default["default"].Component);
 
   Transition.contextType = TransitionGroupContext;
   Transition.propTypes = {
@@ -14031,18 +14152,18 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       delete props.exit;
 
       if (Component === null) {
-        return /*#__PURE__*/React__default['default'].createElement(TransitionGroupContext.Provider, {
+        return /*#__PURE__*/React__default["default"].createElement(TransitionGroupContext.Provider, {
           value: contextValue
         }, children);
       }
 
-      return /*#__PURE__*/React__default['default'].createElement(TransitionGroupContext.Provider, {
+      return /*#__PURE__*/React__default["default"].createElement(TransitionGroupContext.Provider, {
         value: contextValue
-      }, /*#__PURE__*/React__default['default'].createElement(Component, props, children));
+      }, /*#__PURE__*/React__default["default"].createElement(Component, props, children));
     };
 
     return TransitionGroup;
-  }(React__default['default'].Component);
+  }(React__default["default"].Component);
 
   TransitionGroup.propTypes = {
     /**
@@ -14127,7 +14248,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   const collapseClasses = generateUtilityClasses('MuiCollapse', ['root', 'horizontal', 'vertical', 'entered', 'hidden', 'wrapper', 'wrapperInner']);
   var collapseClasses$1 = collapseClasses;
 
-  const _excluded$24 = ["children", "className", "collapsedSize", "component", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "orientation", "style", "timeout", "TransitionComponent"];
+  const _excluded$24 = ["addEndListener", "children", "className", "collapsedSize", "component", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "orientation", "style", "timeout", "TransitionComponent"];
 
   const useUtilityClasses$1J = ownerState => {
     const {
@@ -14211,6 +14332,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     });
 
     const {
+      addEndListener,
       children,
       className,
       collapsedSize: collapsedSizeProp = '0px',
@@ -14358,10 +14480,15 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       }
     });
 
-    const addEndListener = next => {
+    const handleAddEndListener = next => {
       if (timeout === 'auto') {
         timer.current = setTimeout(next, autoTransitionDuration.current || 0);
       }
+
+      if (addEndListener) {
+        // Old call signature before `react-transition-group` implemented `nodeRef`
+        addEndListener(nodeRef.current, next);
+      }
     };
 
     return /*#__PURE__*/jsxRuntime_1(TransitionComponent, _extends({
@@ -14372,7 +14499,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       onExit: handleExit,
       onExited: handleExited,
       onExiting: handleExiting,
-      addEndListener: addEndListener,
+      addEndListener: handleAddEndListener,
       nodeRef: nodeRef,
       timeout: timeout === 'auto' ? null : timeout
     }, other, {
@@ -14415,6 +14542,13 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     // |     To update them edit the d.ts file and run "yarn proptypes"     |
     // ----------------------------------------------------------------------
 
+    /**
+     * Add a custom transition end trigger. Called with the transitioning DOM
+     * node and a done callback. Allows for more fine grained transition end
+     * logic. Note: Timeouts are still used as a fallback if provided.
+     */
+    addEndListener: propTypes.func,
+
     /**
      * The content node to be collapsed.
      */
@@ -16745,6 +16879,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * Override the icon displayed before the children.
      * Unless provided, the icon is mapped to the value of the `severity` prop.
+     * Set to `false` to remove the `icon`.
      */
     icon: propTypes.node,
 
@@ -19957,11 +20092,12 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     });
 
     const classes = useUtilityClasses$1w(ownerState);
-    const moreProps = component === ButtonBase$1 ? {
+    const moreProps = component === ButtonBase$1 ? _extends({
       component: ComponentProp || 'div',
-      focusVisibleClassName: classes.focusVisible,
-      disableRipple: Boolean(onDelete)
-    } : {};
+      focusVisibleClassName: classes.focusVisible
+    }, onDelete && {
+      disableRipple: true
+    }) : {};
     let deleteIcon = null;
 
     if (onDelete) {
@@ -21110,7 +21246,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * Render the group.
      *
-     * @param {any} option The group to render.
+     * @param {AutocompleteRenderGroupParams} params The group to render.
      * @returns {ReactNode}
      */
     renderGroup: propTypes.func,
@@ -21410,7 +21546,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     component: propTypes.elementType,
 
     /**
-     * <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes">Attributes</a> applied to the `img` element if the component is used to display an image.
+     * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attributes) applied to the `img` element if the component is used to display an image.
      * It can be used to listen for the loading error event.
      */
     imgProps: propTypes.object,
@@ -21618,7 +21754,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   } ;
   var AvatarGroup$1 = AvatarGroup;
 
-  const _excluded$1N = ["appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
+  const _excluded$1N = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
   const styles$5 = {
     entering: {
       opacity: 1
@@ -21638,6 +21774,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
 
   const Fade = /*#__PURE__*/React__namespace.forwardRef(function Fade(props, ref) {
     const {
+      addEndListener,
       appear = true,
       children,
       easing,
@@ -21708,6 +21845,14 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       }
     });
     const handleExited = normalizedTransitionCallback(onExited);
+
+    const handleAddEndListener = next => {
+      if (addEndListener) {
+        // Old call signature before `react-transition-group` implemented `nodeRef`
+        addEndListener(nodeRef.current, next);
+      }
+    };
+
     return /*#__PURE__*/jsxRuntime_1(TransitionComponent, _extends({
       appear: appear,
       in: inProp,
@@ -21718,6 +21863,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       onExit: handleExit,
       onExited: handleExited,
       onExiting: handleExiting,
+      addEndListener: handleAddEndListener,
       timeout: timeout
     }, other, {
       children: (state, childProps) => {
@@ -21739,6 +21885,13 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     // |     To update them edit the d.ts file and run "yarn proptypes"     |
     // ----------------------------------------------------------------------
 
+    /**
+     * Add a custom transition end trigger. Called with the transitioning DOM
+     * node and a done callback. Allows for more fine grained transition end
+     * logic. Note: Timeouts are still used as a fallback if provided.
+     */
+    addEndListener: propTypes.func,
+
     /**
      * Perform the enter transition when it first mounts if `in` is also `true`.
      * Set this to `false` to disable this behavior.
@@ -21749,7 +21902,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * A single child content element.
      */
-    children: elementAcceptingRef$1,
+    children: elementAcceptingRef$1.isRequired,
 
     /**
      * The transition timing function.
@@ -24489,8 +24642,9 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
         required: required,
         ownerState: ownerState,
         tabIndex: tabIndex,
-        type: type,
-        value: value
+        type: type
+      }, type === 'checkbox' && value === undefined ? {} : {
+        value
       }, inputProps)), checked ? checkedIcon : icon]
     }));
   }); // NB: If changed, please update Checkbox, Switch and Radio
@@ -26915,7 +27069,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   } ;
   var Divider$1 = Divider;
 
-  const _excluded$1o = ["appear", "children", "container", "direction", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
+  const _excluded$1o = ["addEndListener", "appear", "children", "container", "direction", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
 
   function getTranslateValue(direction, node, resolvedContainer) {
     const rect = node.getBoundingClientRect();
@@ -26999,6 +27153,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
 
   const Slide = /*#__PURE__*/React__namespace.forwardRef(function Slide(props, ref) {
     const {
+      addEndListener,
       appear = true,
       children,
       container: containerProp,
@@ -27086,6 +27241,14 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
         onExited(node);
       }
     });
+
+    const handleAddEndListener = next => {
+      if (addEndListener) {
+        // Old call signature before `react-transition-group` implemented `nodeRef`
+        addEndListener(childrenRef.current, next);
+      }
+    };
+
     const updatePosition = React__namespace.useCallback(() => {
       if (childrenRef.current) {
         setTranslateValue(direction, childrenRef.current, containerProp);
@@ -27124,6 +27287,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       onExit: handleExit,
       onExited: handleExited,
       onExiting: handleExiting,
+      addEndListener: handleAddEndListener,
       appear: appear,
       in: inProp,
       timeout: timeout
@@ -27146,6 +27310,13 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     // |     To update them edit the d.ts file and run "yarn proptypes"     |
     // ----------------------------------------------------------------------
 
+    /**
+     * Add a custom transition end trigger. Called with the transitioning DOM
+     * node and a done callback. Allows for more fine grained transition end
+     * logic. Note: Timeouts are still used as a fallback if provided.
+     */
+    addEndListener: propTypes.func,
+
     /**
      * Perform the enter transition when it first mounts if `in` is also `true`.
      * Set this to `false` to disable this behavior.
@@ -27156,7 +27327,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * A single child content element.
      */
-    children: elementAcceptingRef$1,
+    children: elementAcceptingRef$1.isRequired,
 
     /**
      * An HTML element, or a function that returns one.
@@ -30654,7 +30825,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
 
   var Grid$1 = Grid;
 
-  const _excluded$1c = ["appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
+  const _excluded$1c = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
 
   function getScale(value) {
     return `scale(${value}, ${value ** 2})`;
@@ -30678,6 +30849,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
 
   const Grow = /*#__PURE__*/React__namespace.forwardRef(function Grow(props, ref) {
     const {
+      addEndListener,
       appear = true,
       children,
       easing,
@@ -30791,10 +30963,15 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     });
     const handleExited = normalizedTransitionCallback(onExited);
 
-    const addEndListener = next => {
+    const handleAddEndListener = next => {
       if (timeout === 'auto') {
         timer.current = setTimeout(next, autoTimeout.current || 0);
       }
+
+      if (addEndListener) {
+        // Old call signature before `react-transition-group` implemented `nodeRef`
+        addEndListener(nodeRef.current, next);
+      }
     };
 
     React__namespace.useEffect(() => {
@@ -30812,7 +30989,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       onExit: handleExit,
       onExited: handleExited,
       onExiting: handleExiting,
-      addEndListener: addEndListener,
+      addEndListener: handleAddEndListener,
       timeout: timeout === 'auto' ? null : timeout
     }, other, {
       children: (state, childProps) => {
@@ -30835,6 +31012,13 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     // |     To update them edit the d.ts file and run "yarn proptypes"     |
     // ----------------------------------------------------------------------
 
+    /**
+     * Add a custom transition end trigger. Called with the transitioning DOM
+     * node and a done callback. Allows for more fine grained transition end
+     * logic. Note: Timeouts are still used as a fallback if provided.
+     */
+    addEndListener: propTypes.func,
+
     /**
      * Perform the enter transition when it first mounts if `in` is also `true`.
      * Set this to `false` to disable this behavior.
@@ -30845,7 +31029,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * A single child content element.
      */
-    children: elementAcceptingRef$1,
+    children: elementAcceptingRef$1.isRequired,
 
     /**
      * The transition timing function.
@@ -30912,35 +31096,36 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   Grow.muiSupportAuto = true;
   var Grow$1 = Grow;
 
-  function useMediaQuery(queryInput, options = {}) {
-    const theme = useTheme$2();
-    const props = getThemeProps({
-      name: 'MuiUseMediaQuery',
-      props: {},
-      theme
-    });
-
-    {
-      if (typeof queryInput === 'function' && theme === null) {
-        console.error(['MUI: The `query` argument provided is invalid.', 'You are providing a function without a theme in the context.', 'One of the parent elements needs to use a ThemeProvider.'].join('\n'));
-      }
-    }
+  /**
+   * @deprecated Not used internally. Use `MediaQueryListEvent` from lib.dom.d.ts instead.
+   */
 
-    let query = typeof queryInput === 'function' ? queryInput(theme) : queryInput;
-    query = query.replace(/^@media( ?)/m, ''); // Wait for jsdom to support the match media feature.
+  function useMediaQuery(queryInput, options = {}) {
+    const theme = useTheme$2(); // Wait for jsdom to support the match media feature.
     // All the browsers MUI support have this built-in.
     // This defensive check is here for simplicity.
     // Most of the time, the match media logic isn't central to people tests.
 
     const supportMatchMedia = typeof window !== 'undefined' && typeof window.matchMedia !== 'undefined';
-
     const {
       defaultMatches = false,
       matchMedia = supportMatchMedia ? window.matchMedia : null,
       noSsr = false,
       ssrMatchMedia = null
-    } = _extends({}, props, options);
+    } = getThemeProps({
+      name: 'MuiUseMediaQuery',
+      props: options,
+      theme
+    });
+
+    {
+      if (typeof queryInput === 'function' && theme === null) {
+        console.error(['MUI: The `query` argument provided is invalid.', 'You are providing a function without a theme in the context.', 'One of the parent elements needs to use a ThemeProvider.'].join('\n'));
+      }
+    }
 
+    let query = typeof queryInput === 'function' ? queryInput(theme) : queryInput;
+    query = query.replace(/^@media( ?)/m, '');
     const [match, setMatch] = React__namespace.useState(() => {
       if (noSsr && supportMatchMedia) {
         return matchMedia(query).matches;
@@ -32899,7 +33084,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       } = props;
       return [{
         [`& .${formLabelClasses$1.asterisk}`]: styles.asterisk
-      }, styles.root, !ownerState.formControl && styles.formControl, ownerState.size === 'small' && styles.sizeSmall, ownerState.shrink && styles.shrink, !ownerState.disableAnimation && styles.animated, styles[ownerState.variant]];
+      }, styles.root, ownerState.formControl && styles.formControl, ownerState.size === 'small' && styles.sizeSmall, ownerState.shrink && styles.shrink, !ownerState.disableAnimation && styles.animated, styles[ownerState.variant]];
     }
   })(({
     theme,
@@ -36809,7 +36994,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     input: propTypes.element,
 
     /**
-     * <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes">Attributes</a> applied to the `select` element.
+     * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attributes) applied to the `select` element.
      */
     inputProps: propTypes.object,
 
@@ -37658,13 +37843,12 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       last: LastPageIcon
     };
     const Icon = normalizedIcons[type];
-    return type === 'start-ellipsis' || type === 'end-ellipsis' ? /*#__PURE__*/jsxRuntime_1(PaginationItemEllipsis, _extends({
+    return type === 'start-ellipsis' || type === 'end-ellipsis' ? /*#__PURE__*/jsxRuntime_1(PaginationItemEllipsis, {
       ref: ref,
       ownerState: ownerState,
-      className: clsx(classes.root, className)
-    }, other, {
+      className: clsx(classes.root, className),
       children: "\u2026"
-    })) : /*#__PURE__*/jsxRuntime_2(PaginationItemPage, _extends({
+    }) : /*#__PURE__*/jsxRuntime_2(PaginationItemPage, _extends({
       ref: ref,
       ownerState: ownerState,
       component: component,
@@ -38181,6 +38365,15 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     }
   }));
 
+  function areEqualValues$1(a, b) {
+    if (typeof b === 'object' && b !== null) {
+      return a === b;
+    } // The value could be a number, the DOM will stringify it anyway.
+
+
+    return String(a) === String(b);
+  }
+
   const defaultCheckedIcon = /*#__PURE__*/jsxRuntime_1(RadioButtonIcon, {
     checked: true
   });
@@ -38219,7 +38412,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
 
     if (radioGroup) {
       if (typeof checked === 'undefined') {
-        checked = radioGroup.value === props.value;
+        checked = areEqualValues$1(radioGroup.value, props.value);
       }
 
       if (typeof name === 'undefined') {
@@ -39312,7 +39505,8 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   function areEqualValues(a, b) {
     if (typeof b === 'object' && b !== null) {
       return a === b;
-    }
+    } // The value could be a number, the DOM will stringify it anyway.
+
 
     return String(a) === String(b);
   }
@@ -41615,7 +41809,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   } ;
   var Snackbar$1 = Snackbar;
 
-  const _excluded$y = ["appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
+  const _excluded$y = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
   const styles$1 = {
     entering: {
       transform: 'none'
@@ -41636,6 +41830,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
 
   const Zoom = /*#__PURE__*/React__namespace.forwardRef(function Zoom(props, ref) {
     const {
+      addEndListener,
       appear = true,
       children,
       easing,
@@ -41706,6 +41901,14 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       }
     });
     const handleExited = normalizedTransitionCallback(onExited);
+
+    const handleAddEndListener = next => {
+      if (addEndListener) {
+        // Old call signature before `react-transition-group` implemented `nodeRef`
+        addEndListener(nodeRef.current, next);
+      }
+    };
+
     return /*#__PURE__*/jsxRuntime_1(TransitionComponent, _extends({
       appear: appear,
       in: inProp,
@@ -41716,6 +41919,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       onExit: handleExit,
       onExited: handleExited,
       onExiting: handleExiting,
+      addEndListener: handleAddEndListener,
       timeout: timeout
     }, other, {
       children: (state, childProps) => {
@@ -41737,6 +41941,13 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     // |     To update them edit the d.ts file and run "yarn proptypes"     |
     // ----------------------------------------------------------------------
 
+    /**
+     * Add a custom transition end trigger. Called with the transitioning DOM
+     * node and a done callback. Allows for more fine grained transition end
+     * logic. Note: Timeouts are still used as a fallback if provided.
+     */
+    addEndListener: propTypes.func,
+
     /**
      * Perform the enter transition when it first mounts if `in` is also `true`.
      * Set this to `false` to disable this behavior.
@@ -41747,7 +41958,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * A single child content element.
      */
-    children: elementAcceptingRef$1,
+    children: elementAcceptingRef$1.isRequired,
 
     /**
      * The transition timing function.
@@ -42369,7 +42580,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   const tooltipClasses = generateUtilityClasses('MuiTooltip', ['popper', 'popperInteractive', 'popperArrow', 'popperClose', 'tooltip', 'tooltipArrow', 'touch', 'tooltipPlacementLeft', 'tooltipPlacementRight', 'tooltipPlacementTop', 'tooltipPlacementBottom', 'arrow']);
   var tooltipClasses$1 = tooltipClasses;
 
-  const _excluded$w = ["arrow", "children", "classes", "describeChild", "disableFocusListener", "disableHoverListener", "disableInteractive", "disableTouchListener", "enterDelay", "enterNextDelay", "enterTouchDelay", "followCursor", "id", "leaveDelay", "leaveTouchDelay", "onClose", "onOpen", "open", "placement", "PopperComponent", "PopperProps", "title", "TransitionComponent", "TransitionProps"];
+  const _excluded$w = ["arrow", "children", "classes", "components", "componentsProps", "describeChild", "disableFocusListener", "disableHoverListener", "disableInteractive", "disableTouchListener", "enterDelay", "enterNextDelay", "enterTouchDelay", "followCursor", "id", "leaveDelay", "leaveTouchDelay", "onClose", "onOpen", "open", "placement", "PopperComponent", "PopperProps", "title", "TransitionComponent", "TransitionProps"];
 
   function round(value) {
     return Math.round(value * 1e5) / 1e5;
@@ -42556,9 +42767,12 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
 
       handler(event);
     };
-  }
+  } // TODO (v6) Remove PopperComponent, PopperProps, TransitionComponent and TransitionProps.
+
 
   const Tooltip = /*#__PURE__*/React__namespace.forwardRef(function Tooltip(inProps, ref) {
+    var _components$Popper, _ref, _components$Tooltip, _components$Arrow, _componentsProps$popp;
+
     const props = useThemeProps({
       props: inProps,
       name: 'MuiTooltip'
@@ -42567,6 +42781,8 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     const {
       arrow = false,
       children,
+      components = {},
+      componentsProps = {},
       describeChild = false,
       disableFocusListener = false,
       disableHoverListener = false,
@@ -42583,10 +42799,10 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       onOpen,
       open: openProp,
       placement = 'bottom',
-      PopperComponent = Popper$1,
+      PopperComponent: PopperComponentProp,
       PopperProps = {},
       title,
-      TransitionComponent = Grow$1,
+      TransitionComponent: TransitionComponentProp = Grow$1,
       TransitionProps
     } = props,
           other = _objectWithoutPropertiesLoose(props, _excluded$w);
@@ -42920,15 +43136,22 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       arrow,
       disableInteractive,
       placement,
-      PopperComponent,
+      PopperComponentProp,
       touch: ignoreNonTouchEvents.current
     });
 
     const classes = useUtilityClasses$q(ownerState);
+    const PopperComponent = (_components$Popper = components.Popper) != null ? _components$Popper : TooltipPopper;
+    const TransitionComponent = (_ref = TransitionComponentProp != null ? TransitionComponentProp : components.Transition) != null ? _ref : Grow$1;
+    const TooltipComponent = (_components$Tooltip = components.Tooltip) != null ? _components$Tooltip : TooltipTooltip;
+    const ArrowComponent = (_components$Arrow = components.Arrow) != null ? _components$Arrow : TooltipArrow;
+    const popperProps = appendOwnerState(PopperComponent, _extends({}, PopperProps, componentsProps.popper), ownerState);
+    const transitionProps = appendOwnerState(TransitionComponent, _extends({}, TransitionProps, componentsProps.transition), ownerState);
+    const tooltipProps = appendOwnerState(TooltipComponent, _extends({}, componentsProps.tooltip), ownerState);
+    const tooltipArrowProps = appendOwnerState(ArrowComponent, _extends({}, componentsProps.arrow), ownerState);
     return /*#__PURE__*/jsxRuntime_2(React__namespace.Fragment, {
-      children: [/*#__PURE__*/React__namespace.cloneElement(children, childrenProps), /*#__PURE__*/jsxRuntime_1(TooltipPopper, _extends({
-        as: PopperComponent,
-        className: classes.popper,
+      children: [/*#__PURE__*/React__namespace.cloneElement(children, childrenProps), /*#__PURE__*/jsxRuntime_1(PopperComponent, _extends({
+        as: PopperComponentProp != null ? PopperComponentProp : Popper$1,
         placement: placement,
         anchorEl: followCursor ? {
           getBoundingClientRect: () => ({
@@ -42944,24 +43167,26 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
         open: childNode ? open : false,
         id: id,
         transition: true
-      }, interactiveWrapperListeners, PopperProps, {
+      }, interactiveWrapperListeners, popperProps, {
+        className: clsx(classes.popper, (_componentsProps$popp = componentsProps.popper) == null ? void 0 : _componentsProps$popp.className),
         popperOptions: popperOptions,
-        ownerState: ownerState,
         children: ({
           TransitionProps: TransitionPropsInner
-        }) => /*#__PURE__*/jsxRuntime_1(TransitionComponent, _extends({
-          timeout: theme.transitions.duration.shorter
-        }, TransitionPropsInner, TransitionProps, {
-          children: /*#__PURE__*/jsxRuntime_2(TooltipTooltip, {
-            className: classes.tooltip,
-            ownerState: ownerState,
-            children: [title, arrow ? /*#__PURE__*/jsxRuntime_1(TooltipArrow, {
-              className: classes.arrow,
-              ref: setArrowRef,
-              ownerState: ownerState
-            }) : null]
-          })
-        }))
+        }) => {
+          var _componentsProps$tool, _componentsProps$arro;
+
+          return /*#__PURE__*/jsxRuntime_1(TransitionComponent, _extends({
+            timeout: theme.transitions.duration.shorter
+          }, TransitionPropsInner, transitionProps, {
+            children: /*#__PURE__*/jsxRuntime_2(TooltipComponent, _extends({}, tooltipProps, {
+              className: clsx(classes.tooltip, (_componentsProps$tool = componentsProps.tooltip) == null ? void 0 : _componentsProps$tool.className),
+              children: [title, arrow ? /*#__PURE__*/jsxRuntime_1(ArrowComponent, _extends({}, tooltipArrowProps, {
+                className: clsx(classes.arrow, (_componentsProps$arro = componentsProps.arrow) == null ? void 0 : _componentsProps$arro.className),
+                ref: setArrowRef
+              })) : null]
+            }))
+          }));
+        }
       }))]
     });
   });
@@ -42994,6 +43219,24 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
      */
     className: propTypes.string,
 
+    /**
+     * The components used for each slot inside the Tooltip.
+     * Either a string to use a HTML element or a component.
+     * @default {}
+     */
+    components: propTypes.shape({
+      Arrow: propTypes.elementType,
+      Popper: propTypes.elementType,
+      Tooltip: propTypes.elementType,
+      Transition: propTypes.elementType
+    }),
+
+    /**
+     * The props used for each slot inside the Tooltip.
+     * @default {}
+     */
+    componentsProps: propTypes.object,
+
     /**
      * Set to `true` if the `title` acts as an accessible description.
      * By default the `title` acts as an accessible label for the child.
@@ -45654,7 +45897,9 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       const {
         ownerState
       } = props;
-      return [styles.switchBase, styles.input, ownerState.color !== 'default' && styles[`color${capitalize(ownerState.color)}`]];
+      return [styles.switchBase, {
+        [`& .${switchClasses$1.input}`]: styles.input
+      }, ownerState.color !== 'default' && styles[`color${capitalize(ownerState.color)}`]];
     }
   })(({
     theme
@@ -45909,7 +46154,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   function getTabUtilityClass(slot) {
     return generateUtilityClass('MuiTab', slot);
   }
-  const tabClasses = generateUtilityClasses('MuiTab', ['root', 'labelIcon', 'textColorInherit', 'textColorPrimary', 'textColorSecondary', 'selected', 'disabled', 'fullWidth', 'wrapped']);
+  const tabClasses = generateUtilityClasses('MuiTab', ['root', 'labelIcon', 'textColorInherit', 'textColorPrimary', 'textColorSecondary', 'selected', 'disabled', 'fullWidth', 'wrapped', 'iconWrapper']);
   var tabClasses$1 = tabClasses;
 
   const _excluded$i = ["className", "disabled", "disableFocusRipple", "fullWidth", "icon", "indicator", "label", "onChange", "onClick", "onFocus", "selected", "selectionFollowsFocus", "textColor", "value", "wrapped"];
@@ -45926,7 +46171,8 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       disabled
     } = ownerState;
     const slots = {
-      root: ['root', icon && label && 'labelIcon', `textColor${capitalize(textColor)}`, fullWidth && 'fullWidth', wrapped && 'wrapped', selected && 'selected', disabled && 'disabled']
+      root: ['root', icon && label && 'labelIcon', `textColor${capitalize(textColor)}`, fullWidth && 'fullWidth', wrapped && 'wrapped', selected && 'selected', disabled && 'disabled'],
+      iconWrapper: ['iconWrapper']
     };
     return composeClasses(slots, getTabUtilityClass, classes);
   };
@@ -45959,7 +46205,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     minHeight: 72,
     paddingTop: 9,
     paddingBottom: 9,
-    [`& > *:first-child`]: {
+    [`& > .${tabClasses$1.iconWrapper}`]: {
       marginBottom: 6
     }
   }, ownerState.textColor === 'inherit' && {
@@ -46008,7 +46254,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       disableFocusRipple = false,
       // eslint-disable-next-line react/prop-types
       fullWidth,
-      icon,
+      icon: iconProp,
       // eslint-disable-next-line react/prop-types
       indicator,
       label,
@@ -46030,7 +46276,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       disabled,
       disableFocusRipple,
       selected,
-      icon: !!icon,
+      icon: !!iconProp,
       label: !!label,
       fullWidth,
       textColor,
@@ -46038,6 +46284,9 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     });
 
     const classes = useUtilityClasses$f(ownerState);
+    const icon = iconProp && label && /*#__PURE__*/React__namespace.isValidElement(iconProp) ? /*#__PURE__*/React__namespace.cloneElement(iconProp, {
+      className: clsx(classes.iconWrapper, iconProp.props.className)
+    }) : iconProp;
 
     const handleClick = event => {
       if (!selected && onChange) {
@@ -50012,6 +50261,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   exports.InputAdornment = InputAdornment$1;
   exports.InputBase = InputBase$1;
   exports.InputLabel = InputLabel$1;
+  exports.InputUnstyled = InputUnstyled$1;
   exports.LinearProgress = LinearProgress$1;
   exports.Link = Link$1;
   exports.List = List$1;
@@ -50159,7 +50409,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   exports.filledInputClasses = filledInputClasses$1;
   exports.formControlClasses = formControlClasses$1;
   exports.formControlLabelClasses = formControlLabelClasses$1;
-  exports.formControlUnstyledClasses = classes$1;
+  exports.formControlUnstyledClasses = classes$2;
   exports.formGroupClasses = formGroupClasses$1;
   exports.formHelperTextClasses = formHelperTextClasses$1;
   exports.formLabelClasses = formLabelClasses$1;
@@ -50220,6 +50470,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   exports.getInputAdornmentUtilityClass = getInputAdornmentUtilityClass;
   exports.getInputBaseUtilityClass = getInputBaseUtilityClass;
   exports.getInputLabelUtilityClasses = getInputLabelUtilityClasses;
+  exports.getInputUnstyledUtilityClass = getInputUnstyledUtilityClass;
   exports.getInputUtilityClass = getInputUtilityClass;
   exports.getLinearProgressUtilityClass = getLinearProgressUtilityClass;
   exports.getLinkUtilityClass = getLinkUtilityClass;
@@ -50294,6 +50545,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   exports.inputBaseClasses = inputBaseClasses$1;
   exports.inputClasses = inputClasses$1;
   exports.inputLabelClasses = inputLabelClasses$1;
+  exports.inputUnstyledClasses = classes$1;
   exports.isHostComponent = isHostComponent;
   exports.isMuiElement = isMuiElement;
   exports.lighten = lighten;
@@ -50382,6 +50634,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   exports.useForkRef = useForkRef;
   exports.useFormControl = useFormControl;
   exports.useFormControlUnstyled = useFormControlUnstyled;
+  exports.useInput = useInput;
   exports.useIsFocusVisible = useIsFocusVisible;
   exports.useMediaQuery = useMediaQuery;
   exports.usePagination = usePagination;
@@ -50395,4 +50648,4 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
 
   Object.defineProperty(exports, '__esModule', { value: true });
 
-})));
+}));