@mui/material 5.0.0-rc.1 → 5.0.0

package/styles/createStyles.js

@@ -2,7 +2,7 @@ let warnedOnce = false; // To remove in v6
 
 export default function createStyles(styles) {
   if (!warnedOnce) {
-    console.warn(['Material-UI: createStyles from @mui/material/styles is deprecated.', 'Please use @mui/styles/createStyles'].join('\n'));
+    console.warn(['MUI: createStyles from @mui/material/styles is deprecated.', 'Please use @mui/styles/createStyles'].join('\n'));
     warnedOnce = true;
   }
 

package/styles/createTheme.d.ts

@@ -19,7 +19,7 @@ export interface ThemeOptions extends SystemThemeOptions {
 }
 
 /**
- * Our [TypeScript guide on theme customization](https://material-ui.com/guides/typescript/#customization-of-theme) explains in detail how you would add custom properties.
+ * Our [TypeScript guide on theme customization](https://mui.com/guides/typescript/#customization-of-theme) explains in detail how you would add custom properties.
  */
 export interface Theme extends SystemTheme {
   mixins: Mixins;
@@ -42,6 +42,6 @@ export function createMuiTheme(options?: ThemeOptions, ...args: object[]): Theme
  * Generate a theme base on the options received.
  * @param options Takes an incomplete theme object and adds the missing parts.
  * @param args Deep merge the arguments with the about to be returned theme.
- * @returns A complete, ready to use theme object.
+ * @returns A complete, ready-to-use theme object.
  */
 export default function createTheme(options?: ThemeOptions, ...args: object[]): Theme;

package/styles/createTheme.js

@@ -46,11 +46,11 @@ function createTheme(options = {}, ...args) {
         if (stateClasses.indexOf(key) !== -1 && Object.keys(child).length > 0) {
           if (process.env.NODE_ENV !== 'production') {
             const stateClass = generateUtilityClass('', key);
-            console.error([`Material-UI: The \`${component}\` component increases ` + `the CSS specificity of the \`${key}\` internal state.`, 'You can not override it like this: ', JSON.stringify(node, null, 2), '', `Instead, you need to use the '&.${stateClass}' syntax:`, JSON.stringify({
+            console.error([`MUI: The \`${component}\` component increases ` + `the CSS specificity of the \`${key}\` internal state.`, 'You can not override it like this: ', JSON.stringify(node, null, 2), '', `Instead, you need to use the '&.${stateClass}' syntax:`, JSON.stringify({
               root: {
                 [`&.${stateClass}`]: child
               }
-            }, null, 2), '', 'https://material-ui.com/r/state-classes-guide'].join('\n'));
+            }, null, 2), '', 'https://mui.com/r/state-classes-guide'].join('\n'));
           } // Remove the style to prevent global conflicts.
 
 
@@ -76,7 +76,7 @@ export function createMuiTheme(...args) {
   if (process.env.NODE_ENV !== 'production') {
     if (!warnedOnce) {
       warnedOnce = true;
-      console.error(['Material-UI: the createMuiTheme function was renamed to createTheme.', '', "You should use `import { createTheme } from '@mui/material/styles'`"].join('\n'));
+      console.error(['MUI: the createMuiTheme function was renamed to createTheme.', '', "You should use `import { createTheme } from '@mui/material/styles'`"].join('\n'));
     }
   }
 

package/styles/createTransitions.js

@@ -65,23 +65,23 @@ export default function createTransitions(inputTransitions) {
       const isNumber = value => !isNaN(parseFloat(value));
 
       if (!isString(props) && !Array.isArray(props)) {
-        console.error('Material-UI: Argument "props" must be a string or Array.');
+        console.error('MUI: Argument "props" must be a string or Array.');
       }
 
       if (!isNumber(durationOption) && !isString(durationOption)) {
-        console.error(`Material-UI: Argument "duration" must be a number or a string but found ${durationOption}.`);
+        console.error(`MUI: Argument "duration" must be a number or a string but found ${durationOption}.`);
       }
 
       if (!isString(easingOption)) {
-        console.error('Material-UI: Argument "easing" must be a string.');
+        console.error('MUI: Argument "easing" must be a string.');
       }
 
       if (!isNumber(delay) && !isString(delay)) {
-        console.error('Material-UI: Argument "delay" must be a number or a string.');
+        console.error('MUI: Argument "delay" must be a number or a string.');
       }
 
       if (Object.keys(other).length !== 0) {
-        console.error(`Material-UI: Unrecognized argument(s) [${Object.keys(other).join(',')}].`);
+        console.error(`MUI: Unrecognized argument(s) [${Object.keys(other).join(',')}].`);
       }
     }
 

package/styles/createTypography.js

@@ -27,7 +27,7 @@ export default function createTypography(palette, typography) {
     fontWeightRegular = 400,
     fontWeightMedium = 500,
     fontWeightBold = 700,
-    // Tell Material-UI what's the font-size on the html element.
+    // Tell MUI what's the font-size on the html element.
     // 16px is the default font-size used by browsers.
     htmlFontSize = 16,
     // Apply the CSS properties to all the variants.
@@ -38,11 +38,11 @@ export default function createTypography(palette, typography) {
 
   if (process.env.NODE_ENV !== 'production') {
     if (typeof fontSize !== 'number') {
-      console.error('Material-UI: `fontSize` is required to be a number.');
+      console.error('MUI: `fontSize` is required to be a number.');
     }
 
     if (typeof htmlFontSize !== 'number') {
-      console.error('Material-UI: `htmlFontSize` is required to be a number.');
+      console.error('MUI: `htmlFontSize` is required to be a number.');
     }
   }
 

package/styles/makeStyles.js

@@ -1,6 +1,6 @@
 import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
 export default function makeStyles() {
-  throw new Error(process.env.NODE_ENV !== "production" ? `Material-UI: makeStyles is not longer exported from @mui/material/styles.
+  throw new Error(process.env.NODE_ENV !== "production" ? `MUI: makeStyles is not longer exported from @mui/material/styles.
 You have to import it from @mui/styles.
-See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more details.` : _formatMuiErrorMessage(14));
+See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` : _formatMuiErrorMessage(14));
 }

package/styles/responsiveFontSizes.js

@@ -32,7 +32,7 @@ export default function responsiveFontSizes(themeInput, options = {}) {
     } = style;
 
     if (!isUnitless(lineHeight) && !disableAlign) {
-      throw new Error(process.env.NODE_ENV !== "production" ? `Material-UI: Unsupported non-unitless line height with grid alignment.
+      throw new Error(process.env.NODE_ENV !== "production" ? `MUI: Unsupported non-unitless line height with grid alignment.
 Use unitless line heights instead.` : _formatMuiErrorMessage(6));
     }
 

package/styles/withStyles.js

@@ -1,6 +1,6 @@
 import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
 export default function withStyles() {
-  throw new Error(process.env.NODE_ENV !== "production" ? `Material-UI: withStyles is not longer exported from @mui/material/styles.
+  throw new Error(process.env.NODE_ENV !== "production" ? `MUI: withStyles is not longer exported from @mui/material/styles.
 You have to import it from @mui/styles.
-See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more details.` : _formatMuiErrorMessage(15));
+See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` : _formatMuiErrorMessage(15));
 }

package/styles/withTheme.js

@@ -1,6 +1,6 @@
 import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
 export default function withTheme() {
-  throw new Error(process.env.NODE_ENV !== "production" ? `Material-UI: withTheme is not longer exported from @mui/material/styles.
+  throw new Error(process.env.NODE_ENV !== "production" ? `MUI: withTheme is not longer exported from @mui/material/styles.
 You have to import it from @mui/styles.
-See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more details.` : _formatMuiErrorMessage(16));
+See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` : _formatMuiErrorMessage(16));
 }

package/umd/material-ui.development.js

@@ -1,4 +1,4 @@
-/** @license Material-UI v5.0.0-rc.1
+/** @license MUI v5.0.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -842,8 +842,8 @@
     }
   };
 
-  var isBrowser$4 = typeof document !== 'undefined';
-  var getServerStylisCache = isBrowser$4 ? undefined : weakMemoize(function () {
+  var isBrowser$5 = typeof document !== 'undefined';
+  var getServerStylisCache = isBrowser$5 ? undefined : weakMemoize(function () {
     return memoize$1(function () {
       var cache = {};
       return function (name) {
@@ -860,7 +860,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$4 && key === 'css') {
+    if (isBrowser$5 && 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 +897,7 @@
     var container;
     var nodesToHydrate = [];
 
-    if (isBrowser$4) {
+    if (isBrowser$5) {
       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 +925,7 @@
       }), incorrectImportAlarm);
     }
 
-    if (isBrowser$4) {
+    if (isBrowser$5) {
       var currentSheet;
       var finalizingPlugins = [fe, function (element) {
         if (!element.root) {
@@ -1390,8 +1390,8 @@
 
   var hoistNonReactStatics_cjs = hoistNonReactStatics;
 
-  var isBrowser$3 = typeof document !== 'undefined';
-  function getRegisteredStyles(registered, registeredStyles, classNames) {
+  var isBrowser$4 = typeof document !== 'undefined';
+  function getRegisteredStyles$1(registered, registeredStyles, classNames) {
     var rawClassName = '';
     classNames.split(' ').forEach(function (className) {
       if (registered[className] !== undefined) {
@@ -1402,7 +1402,7 @@
     });
     return rawClassName;
   }
-  var insertStyles = function insertStyles(cache, serialized, isStringTag) {
+  var insertStyles$1 = 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 +1414,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$3 === false && cache.compat !== undefined) && cache.registered[className] === undefined) {
+    isBrowser$4 === false && cache.compat !== undefined) && cache.registered[className] === undefined) {
       cache.registered[className] = serialized.styles;
     }
 
@@ -1425,14 +1425,14 @@
       do {
         var maybeStyles = cache.insert(serialized === current ? "." + className : '', current, cache.sheet, true);
 
-        if (!isBrowser$3 && maybeStyles !== undefined) {
+        if (!isBrowser$4 && maybeStyles !== undefined) {
           stylesForSSR += maybeStyles;
         }
 
         current = current.next;
       } while (current !== undefined);
 
-      if (!isBrowser$3 && stylesForSSR.length !== 0) {
+      if (!isBrowser$4 && stylesForSSR.length !== 0) {
         return stylesForSSR;
       }
     }
@@ -1541,34 +1541,34 @@
     strokeWidth: 1
   };
 
-  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 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 isCustomProperty = function isCustomProperty(property) {
+  var isCustomProperty$1 = function isCustomProperty(property) {
     return property.charCodeAt(1) === 45;
   };
 
-  var isProcessableValue = function isProcessableValue(value) {
+  var isProcessableValue$1 = 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 processStyleName$1 = /* #__PURE__ */memoize$1(function (styleName) {
+    return isCustomProperty$1(styleName) ? styleName : styleName.replace(hyphenateRegex$1, '-$&').toLowerCase();
   });
 
-  var processStyleValue = function processStyleValue(key, value) {
+  var processStyleValue$1 = function processStyleValue(key, value) {
     switch (key) {
       case 'animation':
       case 'animationName':
         {
           if (typeof value === 'string') {
-            return value.replace(animationRegex, function (match, p1, p2) {
-              cursor = {
+            return value.replace(animationRegex$1, function (match, p1, p2) {
+              cursor$1 = {
                 name: p1,
                 styles: p2,
-                next: cursor
+                next: cursor$1
               };
               return p1;
             });
@@ -1576,7 +1576,7 @@
         }
     }
 
-    if (unitlessKeys[key] !== 1 && !isCustomProperty(key) && typeof value === 'number' && value !== 0) {
+    if (unitlessKeys[key] !== 1 && !isCustomProperty$1(key) && typeof value === 'number' && value !== 0) {
       return value + 'px';
     }
 
@@ -1584,25 +1584,25 @@
   };
 
   {
-    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) {
+    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) {
       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) !== "'")) {
+        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) !== "'")) {
           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);
+      var processed = oldProcessStyleValue$1(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) {
+      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) {
           return _char.toUpperCase();
         }) + "?");
       }
@@ -1611,7 +1611,7 @@
     };
   }
 
-  function handleInterpolation(mergedProps, registered, interpolation) {
+  function handleInterpolation$1(mergedProps, registered, interpolation) {
     if (interpolation == null) {
       return '';
     }
@@ -1633,10 +1633,10 @@
       case 'object':
         {
           if (interpolation.anim === 1) {
-            cursor = {
+            cursor$1 = {
               name: interpolation.name,
               styles: interpolation.styles,
-              next: cursor
+              next: cursor$1
             };
             return interpolation.name;
           }
@@ -1648,10 +1648,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 = {
+                cursor$1 = {
                   name: next.name,
                   styles: next.styles,
-                  next: cursor
+                  next: cursor$1
                 };
                 next = next.next;
               }
@@ -1666,16 +1666,16 @@
             return styles;
           }
 
-          return createStringFromObject(mergedProps, registered, interpolation);
+          return createStringFromObject$1(mergedProps, registered, interpolation);
         }
 
       case 'function':
         {
           if (mergedProps !== undefined) {
-            var previousCursor = cursor;
+            var previousCursor = cursor$1;
             var result = interpolation(mergedProps);
-            cursor = previousCursor;
-            return handleInterpolation(mergedProps, registered, result);
+            cursor$1 = previousCursor;
+            return handleInterpolation$1(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 +1686,7 @@
       case 'string':
         {
           var matched = [];
-          var replaced = interpolation.replace(animationRegex, function (match, p1, p2) {
+          var replaced = interpolation.replace(animationRegex$1, function (match, p1, p2) {
             var fakeVarName = "animation" + matched.length;
             matched.push("const " + fakeVarName + " = keyframes`" + p2.replace(/^@keyframes animation-\w+/, '') + "`");
             return "${" + fakeVarName + "}";
@@ -1709,12 +1709,12 @@
     return cached !== undefined ? cached : interpolation;
   }
 
-  function createStringFromObject(mergedProps, registered, obj) {
+  function createStringFromObject$1(mergedProps, registered, obj) {
     var string = '';
 
     if (Array.isArray(obj)) {
       for (var i = 0; i < obj.length; i++) {
-        string += handleInterpolation(mergedProps, registered, obj[i]) + ";";
+        string += handleInterpolation$1(mergedProps, registered, obj[i]) + ";";
       }
     } else {
       for (var _key in obj) {
@@ -1723,8 +1723,8 @@
         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 (isProcessableValue$1(value)) {
+            string += processStyleName$1(_key) + ":" + processStyleValue$1(_key, value) + ";";
           }
         } else {
           if (_key === 'NO_COMPONENT_SELECTOR' && "development" !== 'production') {
@@ -1733,25 +1733,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(value[_i])) {
-                string += processStyleName(_key) + ":" + processStyleValue(_key, value[_i]) + ";";
+              if (isProcessableValue$1(value[_i])) {
+                string += processStyleName$1(_key) + ":" + processStyleValue$1(_key, value[_i]) + ";";
               }
             }
           } else {
-            var interpolated = handleInterpolation(mergedProps, registered, value);
+            var interpolated = handleInterpolation$1(mergedProps, registered, value);
 
             switch (_key) {
               case 'animation':
               case 'animationName':
                 {
-                  string += processStyleName(_key) + ":" + interpolated + ";";
+                  string += processStyleName$1(_key) + ":" + interpolated + ";";
                   break;
                 }
 
               default:
                 {
                   if (_key === 'undefined') {
-                    console.error(UNDEFINED_AS_OBJECT_KEY_ERROR);
+                    console.error(UNDEFINED_AS_OBJECT_KEY_ERROR$1);
                   }
 
                   string += _key + "{" + interpolated + "}";
@@ -1765,32 +1765,32 @@
     return string;
   }
 
-  var labelPattern = /label:\s*([^\s;\n{]+)\s*(;|$)/g;
-  var sourceMapPattern;
+  var labelPattern$1 = /label:\s*([^\s;\n{]+)\s*(;|$)/g;
+  var sourceMapPattern$1;
 
   {
-    sourceMapPattern = /\/\*#\ssourceMappingURL=data:application\/json;\S+\s+\*\//g;
+    sourceMapPattern$1 = /\/\*#\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) {
+  var cursor$1;
+  var serializeStyles$1 = 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;
+    cursor$1 = undefined;
     var strings = args[0];
 
     if (strings == null || strings.raw === undefined) {
       stringMode = false;
-      styles += handleInterpolation(mergedProps, registered, strings);
+      styles += handleInterpolation$1(mergedProps, registered, strings);
     } else {
       if (strings[0] === undefined) {
-        console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR$1);
+        console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR$2);
       }
 
       styles += strings[0];
@@ -1798,11 +1798,11 @@
 
 
     for (var i = 1; i < args.length; i++) {
-      styles += handleInterpolation(mergedProps, registered, args[i]);
+      styles += handleInterpolation$1(mergedProps, registered, args[i]);
 
       if (stringMode) {
         if (strings[i] === undefined) {
-          console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR$1);
+          console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR$2);
         }
 
         styles += strings[i];
@@ -1812,18 +1812,18 @@
     var sourceMap;
 
     {
-      styles = styles.replace(sourceMapPattern, function (match) {
+      styles = styles.replace(sourceMapPattern$1, function (match) {
         sourceMap = match;
         return '';
       });
     } // using a global regex with .exec is stateful so lastIndex has to be reset each time
 
 
-    labelPattern.lastIndex = 0;
+    labelPattern$1.lastIndex = 0;
     var identifierName = '';
     var match; // https://esbench.com/bench/5b809c2cf2949800a0f61fb5
 
-    while ((match = labelPattern.exec(styles)) !== null) {
+    while ((match = labelPattern$1.exec(styles)) !== null) {
       identifierName += '-' + // $FlowFixMe we know it's not null
       match[1];
     }
@@ -1836,7 +1836,7 @@
         name: name,
         styles: styles,
         map: sourceMap,
-        next: cursor,
+        next: cursor$1,
         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 +1844,7 @@
     }
   };
 
-  var isBrowser$2 = typeof document !== 'undefined';
+  var isBrowser$3 = 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 +1872,7 @@
     });
   };
 
-  if (!isBrowser$2) {
+  if (!isBrowser$3) {
     withEmotionCache = function withEmotionCache(func) {
       return function (props) {
         var cache = React.useContext(EmotionCacheContext);
@@ -1918,22 +1918,22 @@
     var className = '';
 
     if (typeof props.className === 'string') {
-      className = getRegisteredStyles(cache.registered, registeredStyles, props.className);
+      className = getRegisteredStyles$1(cache.registered, registeredStyles, props.className);
     } else if (props.className != null) {
       className = props.className + " ";
     }
 
-    var serialized = serializeStyles(registeredStyles, undefined, React.useContext(ThemeContext$2));
+    var serialized = serializeStyles$1(registeredStyles, undefined, React.useContext(ThemeContext$2));
 
     if (serialized.name.indexOf('-') === -1) {
       var labelFromStack = props[labelPropName];
 
       if (labelFromStack) {
-        serialized = serializeStyles([serialized, 'label:' + labelFromStack + ';']);
+        serialized = serializeStyles$1([serialized, 'label:' + labelFromStack + ';']);
       }
     }
 
-    var rules = insertStyles(cache, serialized, typeof type === 'string');
+    var rules = insertStyles$1(cache, serialized, typeof type === 'string');
     className += cache.key + "-" + serialized.name;
     var newProps = {};
 
@@ -1947,7 +1947,7 @@
     newProps.className = className;
     var ele = /*#__PURE__*/React.createElement(type, newProps);
 
-    if (!isBrowser$2 && rules !== undefined) {
+    if (!isBrowser$3 && rules !== undefined) {
       var _ref;
 
       var serializedNames = serialized.name;
@@ -2061,9 +2061,9 @@
     }
 
     var styles = props.styles;
-    var serialized = serializeStyles([styles], undefined, React.useContext(ThemeContext$2));
+    var serialized = serializeStyles$1([styles], undefined, React.useContext(ThemeContext$2));
 
-    if (!isBrowser$2) {
+    if (!isBrowser$3) {
       var _ref;
 
       var serializedNames = serialized.name;
@@ -2136,7 +2136,7 @@
 
       if (serialized.next !== undefined) {
         // insert keyframes
-        insertStyles(cache, serialized.next, true);
+        insertStyles$1(cache, serialized.next, true);
       }
 
       if (sheet.tags.length) {
@@ -2160,7 +2160,7 @@
       args[_key] = arguments[_key];
     }
 
-    return serializeStyles(args);
+    return serializeStyles$1(args);
   }
 
   var keyframes = function keyframes() {
@@ -2230,7 +2230,7 @@
 
   function merge$1(registered, css, className) {
     var registeredStyles = [];
-    var rawClassName = getRegisteredStyles(registered, registeredStyles, className);
+    var rawClassName = getRegisteredStyles$1(registered, registeredStyles, className);
 
     if (registeredStyles.length < 2) {
       return className;
@@ -2253,19 +2253,19 @@
         args[_key] = arguments[_key];
       }
 
-      var serialized = serializeStyles(args, cache.registered);
+      var serialized = serializeStyles$1(args, cache.registered);
 
-      if (isBrowser$2) {
-        insertStyles(cache, serialized, false);
+      if (isBrowser$3) {
+        insertStyles$1(cache, serialized, false);
       } else {
-        var res = insertStyles(cache, serialized, false);
+        var res = insertStyles$1(cache, serialized, false);
 
         if (res !== undefined) {
           rules += res;
         }
       }
 
-      if (!isBrowser$2) {
+      if (!isBrowser$3) {
         serializedHashes += " " + serialized.name;
       }
 
@@ -2292,7 +2292,7 @@
     var ele = props.children(content);
     hasRendered = true;
 
-    if (!isBrowser$2 && rules.length !== 0) {
+    if (!isBrowser$3 && 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 +2308,12 @@
   }
 
   {
-    var isBrowser$1 = typeof document !== 'undefined'; // #1727 for some reason Jest evaluates modules twice if some consuming module gets mocked with jest.mock
+    var isBrowser$2 = 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$1 && !isJest) {
-      var globalContext = isBrowser$1 ? window : global$1;
+    if (isBrowser$2 && !isJest) {
+      var globalContext = isBrowser$2 ? window : global$1;
       var globalKey = "__EMOTION_REACT_" + pkg.version.split('.')[0] + "__";
 
       if (globalContext[globalKey]) {
@@ -2324,6 +2324,357 @@
     }
   }
 
+  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) {
@@ -4555,7 +4906,7 @@
     /**
      * By default, the styles are injected last in the <head> element of the page.
      * As a result, they gain more specificity than any other style sheet.
-     * If you want to override Material-UI's styles, set this prop.
+     * If you want to override MUI's styles, set this prop.
      */
     injectFirst: propTypes.bool
   } ;
@@ -4587,9 +4938,9 @@
         const component = typeof tag === 'string' ? `"${tag}"` : 'component';
 
         if (styles.length === 0) {
-          console.error([`Material-UI: Seems like you called \`styled(${component})()\` without a \`style\` argument.`, 'You must provide a `styles` argument: `styled("div")(styleYouForgotToPass)`.'].join('\n'));
+          console.error([`MUI: Seems like you called \`styled(${component})()\` without a \`style\` argument.`, 'You must provide a `styles` argument: `styled("div")(styleYouForgotToPass)`.'].join('\n'));
         } else if (styles.some(style => style === undefined)) {
-          console.error(`Material-UI: the styled(${component})(...args) API requires all its args to be defined.`);
+          console.error(`MUI: the styled(${component})(...args) API requires all its args to be defined.`);
         }
 
         return stylesFactory(...styles);
@@ -4673,7 +5024,7 @@
     }
 
     if (warningHint !== undefined) {
-      return new Error(`Invalid ${location} \`${safePropName}\` supplied to \`${componentName}\`. ` + `Expected an element that can hold a ref. ${warningHint} ` + 'For more information see https://material-ui.com/r/caveat-with-refs-guide');
+      return new Error(`Invalid ${location} \`${safePropName}\` supplied to \`${componentName}\`. ` + `Expected an element that can hold a ref. ${warningHint} ` + 'For more information see https://mui.com/r/caveat-with-refs-guide');
     }
 
     return null;
@@ -4719,7 +5070,7 @@
     }
 
     if (warningHint !== undefined) {
-      return new Error(`Invalid ${location} \`${safePropName}\` supplied to \`${componentName}\`. ` + `Expected an element type that can hold a ref. ${warningHint} ` + 'For more information see https://material-ui.com/r/caveat-with-refs-guide');
+      return new Error(`Invalid ${location} \`${safePropName}\` supplied to \`${componentName}\`. ` + `Expected an element type that can hold a ref. ${warningHint} ` + 'For more information see https://mui.com/r/caveat-with-refs-guide');
     }
 
     return null;
@@ -4825,7 +5176,7 @@
   // We only handle the first word.
   function capitalize(string) {
     if (typeof string !== 'string') {
-      throw new Error(`Material-UI: \`capitalize(string)\` expects a string argument.` );
+      throw new Error(`MUI: \`capitalize(string)\` expects a string argument.` );
     }
 
     return string.charAt(0).toUpperCase() + string.slice(1);
@@ -4990,7 +5341,7 @@
     {
       React__namespace.useEffect(() => {
         if (isControlled !== (controlled !== undefined)) {
-          console.error([`Material-UI: A component is changing the ${isControlled ? '' : 'un'}controlled ${state} state of ${name} to be ${isControlled ? 'un' : ''}controlled.`, 'Elements should not switch from uncontrolled to controlled (or vice versa).', `Decide between using a controlled or uncontrolled ${name} ` + 'element for the lifetime of the component.', "The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.", 'More info: https://fb.me/react-controlled-components'].join('\n'));
+          console.error([`MUI: A component is changing the ${isControlled ? '' : 'un'}controlled ${state} state of ${name} to be ${isControlled ? 'un' : ''}controlled.`, 'Elements should not switch from uncontrolled to controlled (or vice versa).', `Decide between using a controlled or uncontrolled ${name} ` + 'element for the lifetime of the component.', "The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.", 'More info: https://fb.me/react-controlled-components'].join('\n'));
         }
       }, [state, name, controlled]);
       const {
@@ -4998,7 +5349,7 @@
       } = React__namespace.useRef(defaultProp);
       React__namespace.useEffect(() => {
         if (!isControlled && defaultValue !== defaultProp) {
-          console.error([`Material-UI: A component is changing the default ${state} state of an uncontrolled ${name} after being initialized. ` + `To suppress this warning opt to use a controlled ${name}.`].join('\n'));
+          console.error([`MUI: A component is changing the default ${state} state of an uncontrolled ${name} after being initialized. ` + `To suppress this warning opt to use a controlled ${name}.`].join('\n'));
         }
       }, [JSON.stringify(defaultProp)]);
     }
@@ -5643,7 +5994,7 @@
 
         {
           if (typeof abs !== 'number') {
-            console.error(`Material-UI: Expected ${propName} argument to be a number or a string, got ${abs}.`);
+            console.error(`MUI: Expected ${propName} argument to be a number or a string, got ${abs}.`);
           }
         }
 
@@ -5659,9 +6010,9 @@
 
         {
           if (!Number.isInteger(abs)) {
-            console.error([`Material-UI: The \`theme.${themeKey}\` array type cannot be combined with non integer values.` + `You should either use an integer value that can be used as index, or define the \`theme.${themeKey}\` as a number.`].join('\n'));
+            console.error([`MUI: The \`theme.${themeKey}\` array type cannot be combined with non integer values.` + `You should either use an integer value that can be used as index, or define the \`theme.${themeKey}\` as a number.`].join('\n'));
           } else if (abs > themeSpacing.length - 1) {
-            console.error([`Material-UI: The value provided (${abs}) overflows.`, `The supported values are: ${JSON.stringify(themeSpacing)}.`, `${abs} > ${themeSpacing.length - 1}, you need to add the missing values.`].join('\n'));
+            console.error([`MUI: The value provided (${abs}) overflows.`, `The supported values are: ${JSON.stringify(themeSpacing)}.`, `${abs} > ${themeSpacing.length - 1}, you need to add the missing values.`].join('\n'));
           }
         }
 
@@ -5674,7 +6025,7 @@
     }
 
     {
-      console.error([`Material-UI: The \`theme.${themeKey}\` value (${themeSpacing}) is invalid.`, 'It should be a number, an array or a function.'].join('\n'));
+      console.error([`MUI: The \`theme.${themeKey}\` value (${themeSpacing}) is invalid.`, 'It should be a number, an array or a function.'].join('\n'));
     }
 
     return () => undefined;
@@ -6357,7 +6708,7 @@
     const spacing = (...argsInput) => {
       {
         if (!(argsInput.length <= 4)) {
-          console.error(`Material-UI: Too many arguments provided, expected between 0 and 4, got ${argsInput.length}`);
+          console.error(`MUI: Too many arguments provided, expected between 0 and 4, got ${argsInput.length}`);
         }
       }
 
@@ -6428,7 +6779,7 @@
 
       {
         if (!mergedTheme) {
-          console.error(['Material-UI: You should return an object from your theme function, i.e.', '<ThemeProvider theme={() => ({})} />'].join('\n'));
+          console.error(['MUI: You should return an object from your theme function, i.e.', '<ThemeProvider theme={() => ({})} />'].join('\n'));
         }
       }
 
@@ -6453,7 +6804,7 @@
 
     {
       if (outerTheme === null && typeof localTheme === 'function') {
-        console.error(['Material-UI: You are providing a theme function prop to the ThemeProvider component:', '<ThemeProvider theme={outerTheme => outerTheme} />', '', 'However, no outer theme is present.', 'Make sure a theme is already injected higher in the React tree ' + 'or provide a theme object.'].join('\n'));
+        console.error(['MUI: You are providing a theme function prop to the ThemeProvider component:', '<ThemeProvider theme={outerTheme => outerTheme} />', '', 'However, no outer theme is present.', 'Make sure a theme is already injected higher in the React tree ' + 'or provide a theme object.'].join('\n'));
       }
     }
 
@@ -6830,7 +7181,7 @@
   function clamp$3(value, min = 0, max = 1) {
     {
       if (value < min || value > max) {
-        console.error(`Material-UI: The value provided ${value} is out of range [${min}, ${max}].`);
+        console.error(`MUI: The value provided ${value} is out of range [${min}, ${max}].`);
       }
     }
 
@@ -6884,7 +7235,7 @@
     const type = color.substring(0, marker);
 
     if (['rgb', 'rgba', 'hsl', 'hsla', 'color'].indexOf(type) === -1) {
-      throw new Error(`Material-UI: Unsupported \`${color}\` color.
+      throw new Error(`MUI: Unsupported \`${color}\` color.
 The following formats are supported: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().` );
     }
 
@@ -6900,7 +7251,7 @@ The following formats are supported: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
       }
 
       if (['srgb', 'display-p3', 'a98-rgb', 'prophoto-rgb', 'rec-2020'].indexOf(colorSpace) === -1) {
-        throw new Error(`Material-UI: unsupported \`${colorSpace}\` color space.
+        throw new Error(`MUI: unsupported \`${colorSpace}\` color space.
 The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rgb, rec-2020.` );
       }
     } else {
@@ -7165,7 +7516,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         _excluded2$b = ["type", "mode"];
   function adaptV4Theme(inputTheme) {
     {
-      console.warn(['Material-UI: adaptV4Theme() is deprecated.', 'Follow the upgrade guide on https://material-ui.com/r/migration-v4#theme.'].join('\n'));
+      console.warn(['MUI: adaptV4Theme() is deprecated.', 'Follow the upgrade guide on https://mui.com/r/migration-v4#theme.'].join('\n'));
     }
 
     const {
@@ -7351,7 +7702,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       if (typeof optionLabel !== 'string') {
         {
           const erroneousReturn = optionLabel === undefined ? 'undefined' : `${typeof optionLabel} (${optionLabel})`;
-          console.error(`Material-UI: The \`getOptionLabel\` method of ${componentName} returned ${erroneousReturn} instead of a string for ${JSON.stringify(option)}.`);
+          console.error(`MUI: The \`getOptionLabel\` method of ${componentName} returned ${erroneousReturn} instead of a string for ${JSON.stringify(option)}.`);
         }
 
         return String(optionLabel);
@@ -7409,10 +7760,15 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
 
       if (focused && !valueChange) {
         return;
+      } // Only reset the input's value when freeSolo if the component's value changes.
+
+
+      if (freeSolo && !valueChange) {
+        return;
       }
 
       resetInputValue(null, value);
-    }, [value, resetInputValue, focused, prevValue]);
+    }, [value, resetInputValue, focused, prevValue, freeSolo]);
     const [open, setOpenState] = useControlled({
       controlled: openProp,
       default: false,
@@ -7441,7 +7797,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         const missingValue = (multiple ? value : [value]).filter(value2 => !options.some(option => isOptionEqualToValue(option, value2)));
 
         if (missingValue.length > 0) {
-          console.warn([`Material-UI: The value provided to ${componentName} is invalid.`, `None of the options match with \`${missingValue.length > 1 ? JSON.stringify(missingValue) : JSON.stringify(missingValue[0])}\`.`, 'You can use the `isOptionEqualToValue` prop to customize the equality test.'].join('\n'));
+          console.warn([`MUI: The value provided to ${componentName} is invalid.`, `None of the options match with \`${missingValue.length > 1 ? JSON.stringify(missingValue) : JSON.stringify(missingValue[0])}\`.`, 'You can use the `isOptionEqualToValue` prop to customize the equality test.'].join('\n'));
         }
       }
     }
@@ -7704,7 +8060,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       // eslint-disable-next-line react-hooks/rules-of-hooks
       React__namespace.useEffect(() => {
         if (!inputRef.current || inputRef.current.nodeName !== 'INPUT') {
-          console.error([`Material-UI: Unable to find the input element. It was resolved to ${inputRef.current} while an HTMLInputElement was expected.`, `Instead, ${componentName} expects an input element.`, '', componentName === 'useAutocomplete' ? 'Make sure you have binded getInputProps correctly and that the normal ref/effect resolutions order is guaranteed.' : 'Make sure you have customized the input component correctly.'].join('\n'));
+          console.error([`MUI: Unable to find the input element. It was resolved to ${inputRef.current} while an HTMLInputElement was expected.`, `Instead, ${componentName} expects an input element.`, '', componentName === 'useAutocomplete' ? 'Make sure you have binded getInputProps correctly and that the normal ref/effect resolutions order is guaranteed.' : 'Make sure you have customized the input component correctly.'].join('\n'));
         }
       }, [componentName]);
     }
@@ -7763,7 +8119,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
           const matches = newValue.filter(val => isOptionEqualToValue(option, val));
 
           if (matches.length > 1) {
-            console.error([`Material-UI: The \`isOptionEqualToValue\` method of ${componentName} do not handle the arguments correctly.`, `The component expects a single value to match a given option but found ${matches.length} matches.`].join('\n'));
+            console.error([`MUI: The \`isOptionEqualToValue\` method of ${componentName} do not handle the arguments correctly.`, `The component expects a single value to match a given option but found ${matches.length} matches.`].join('\n'));
           }
         }
 
@@ -8139,7 +8495,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         } else {
           {
             if (indexBy.get(group) && !warn) {
-              console.warn(`Material-UI: The options provided combined with the \`groupBy\` method of ${componentName} returns duplicated headers.`, 'You can solve the issue by sorting the options with the output of `groupBy`.');
+              console.warn(`MUI: The options provided combined with the \`groupBy\` method of ${componentName} returns duplicated headers.`, 'You can solve the issue by sorting the options with the output of `groupBy`.');
               warn = true;
             }
 
@@ -8860,11 +9216,11 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
    *
    * Demos:
    *
-   * - [Buttons](https://material-ui.com/components/buttons/)
+   * - [Buttons](https://mui.com/components/buttons/)
    *
    * API:
    *
-   * - [ButtonUnstyled API](https://material-ui.com/api/button-unstyled/)
+   * - [ButtonUnstyled API](https://mui.com/api/button-unstyled/)
    */
 
 
@@ -9012,7 +9368,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
    * *   Input
    * *   InputLabel
    *
-   * You can find one composition example below and more going to [the demos](https://material-ui.com/components/text-fields/#components).
+   * You can find one composition example below and more going to [the demos](https://mui.com/components/text-fields/#components).
    *
    * ```jsx
    * <FormControl>
@@ -9027,11 +9383,11 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
    *
    * Demos:
    *
-   * - [Text Fields](https://material-ui.com/components/text-fields/)
+   * - [Text Fields](https://mui.com/components/text-fields/)
    *
    * API:
    *
-   * - [FormControlUnstyled API](https://material-ui.com/api/form-control-unstyled/)
+   * - [FormControlUnstyled API](https://mui.com/api/form-control-unstyled/)
    */
   const FormControlUnstyled = /*#__PURE__*/React__namespace.forwardRef(function FormControlUnstyled(props, ref) {
     var _ref;
@@ -9083,7 +9439,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
 
       registerEffect = () => {
         if (registeredInput.current) {
-          console.error(['Material-UI: There are multiple `Input` components inside a FormControl.', 'This creates visual inconsistencies, only use one `Input`.'].join('\n'));
+          console.error(['MUI: There are multiple `Input` components inside a FormControl.', 'This creates visual inconsistencies, only use one `Input`.'].join('\n'));
         }
 
         registeredInput.current = true;
@@ -9639,7 +9995,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       if (!rootRef.current.contains(doc.activeElement)) {
         if (!rootRef.current.hasAttribute('tabIndex')) {
           {
-            console.error(['Material-UI: The modal content node does not accept focus.', 'For the benefit of assistive technologies, ' + 'the tabIndex of the node is being set to "-1".'].join('\n'));
+            console.error(['MUI: The modal content node does not accept focus.', 'For the benefit of assistive technologies, ' + 'the tabIndex of the node is being set to "-1".'].join('\n'));
           }
 
           rootRef.current.setAttribute('tabIndex', -1);
@@ -11189,7 +11545,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       const range = Array.isArray(props.value || props.defaultValue);
 
       if (range && props['aria-label'] != null) {
-        return new Error('Material-UI: You need to use the `getAriaLabel` prop instead of `aria-label` when using a range slider.');
+        return new Error('MUI: You need to use the `getAriaLabel` prop instead of `aria-label` when using a range slider.');
       }
 
       return null;
@@ -11207,7 +11563,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       const range = Array.isArray(props.value || props.defaultValue);
 
       if (range && props['aria-valuetext'] != null) {
-        return new Error('Material-UI: You need to use the `getAriaValueText` prop instead of `aria-valuetext` when using a range slider.');
+        return new Error('MUI: You need to use the `getAriaValueText` prop instead of `aria-valuetext` when using a range slider.');
       }
 
       return null;
@@ -11420,7 +11776,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
    *
    * Demos:
    *
-   * - [Switches](https://material-ui.com/components/switches/)
+   * - [Switches](https://mui.com/components/switches/)
    */
   function useSwitch(props) {
     const {
@@ -11530,11 +11886,11 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
    *
    * Demos:
    *
-   * - [Switches](https://material-ui.com/components/switches/)
+   * - [Switches](https://mui.com/components/switches/)
    *
    * API:
    *
-   * - [SwitchUnstyled API](https://material-ui.com/api/switch-unstyled/)
+   * - [SwitchUnstyled API](https://mui.com/api/switch-unstyled/)
    */
   const SwitchUnstyled = /*#__PURE__*/React__namespace.forwardRef(function SwitchUnstyled(props, ref) {
     var _ref, _components$Thumb, _componentsProps$thum, _components$Input, _componentsProps$inpu, _components$Track, _componentsProps$trac;
@@ -11909,7 +12265,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         const contrast = getContrastRatio(background, contrastText);
 
         if (contrast < 3) {
-          console.error([`Material-UI: The contrast ratio of ${contrast}:1 for ${contrastText} on ${background}`, 'falls below the WCAG recommended absolute minimum contrast ratio of 3:1.', 'https://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-contrast'].join('\n'));
+          console.error([`MUI: The contrast ratio of ${contrast}:1 for ${contrastText} on ${background}`, 'falls below the WCAG recommended absolute minimum contrast ratio of 3:1.', 'https://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-contrast'].join('\n'));
         }
       }
 
@@ -11930,12 +12286,12 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       }
 
       if (!color.hasOwnProperty('main')) {
-        throw new Error(`Material-UI: The color${name ? ` (${name})` : ''} provided to augmentColor(color) is invalid.
+        throw new Error(`MUI: The color${name ? ` (${name})` : ''} provided to augmentColor(color) is invalid.
 The color object needs to have a \`main\` property or a \`${mainShade}\` property.` );
       }
 
       if (typeof color.main !== 'string') {
-        throw new Error(`Material-UI: The color${name ? ` (${name})` : ''} provided to augmentColor(color) is invalid.
+        throw new Error(`MUI: The color${name ? ` (${name})` : ''} provided to augmentColor(color) is invalid.
 \`color.main\` should be a string, but \`${JSON.stringify(color.main)}\` was provided instead.
 
 Did you intend to use one of the following approaches?
@@ -11968,7 +12324,7 @@ const theme2 = createTheme({ palette: {
 
     {
       if (!modes[mode]) {
-        console.error(`Material-UI: The palette mode \`${mode}\` is not supported.`);
+        console.error(`MUI: The palette mode \`${mode}\` is not supported.`);
       }
     }
 
@@ -12053,7 +12409,7 @@ const theme2 = createTheme({ palette: {
       fontWeightRegular = 400,
       fontWeightMedium = 500,
       fontWeightBold = 700,
-      // Tell Material-UI what's the font-size on the html element.
+      // Tell MUI what's the font-size on the html element.
       // 16px is the default font-size used by browsers.
       htmlFontSize = 16,
       // Apply the CSS properties to all the variants.
@@ -12064,11 +12420,11 @@ const theme2 = createTheme({ palette: {
 
     {
       if (typeof fontSize !== 'number') {
-        console.error('Material-UI: `fontSize` is required to be a number.');
+        console.error('MUI: `fontSize` is required to be a number.');
       }
 
       if (typeof htmlFontSize !== 'number') {
-        console.error('Material-UI: `htmlFontSize` is required to be a number.');
+        console.error('MUI: `htmlFontSize` is required to be a number.');
       }
     }
 
@@ -12193,23 +12549,23 @@ const theme2 = createTheme({ palette: {
         const isNumber = value => !isNaN(parseFloat(value));
 
         if (!isString(props) && !Array.isArray(props)) {
-          console.error('Material-UI: Argument "props" must be a string or Array.');
+          console.error('MUI: Argument "props" must be a string or Array.');
         }
 
         if (!isNumber(durationOption) && !isString(durationOption)) {
-          console.error(`Material-UI: Argument "duration" must be a number or a string but found ${durationOption}.`);
+          console.error(`MUI: Argument "duration" must be a number or a string but found ${durationOption}.`);
         }
 
         if (!isString(easingOption)) {
-          console.error('Material-UI: Argument "easing" must be a string.');
+          console.error('MUI: Argument "easing" must be a string.');
         }
 
         if (!isNumber(delay) && !isString(delay)) {
-          console.error('Material-UI: Argument "delay" must be a number or a string.');
+          console.error('MUI: Argument "delay" must be a number or a string.');
         }
 
         if (Object.keys(other).length !== 0) {
-          console.error(`Material-UI: Unrecognized argument(s) [${Object.keys(other).join(',')}].`);
+          console.error(`MUI: Unrecognized argument(s) [${Object.keys(other).join(',')}].`);
         }
       }
 
@@ -12275,11 +12631,11 @@ const theme2 = createTheme({ palette: {
           if (stateClasses.indexOf(key) !== -1 && Object.keys(child).length > 0) {
             {
               const stateClass = generateUtilityClass('', key);
-              console.error([`Material-UI: The \`${component}\` component increases ` + `the CSS specificity of the \`${key}\` internal state.`, 'You can not override it like this: ', JSON.stringify(node, null, 2), '', `Instead, you need to use the '&.${stateClass}' syntax:`, JSON.stringify({
+              console.error([`MUI: The \`${component}\` component increases ` + `the CSS specificity of the \`${key}\` internal state.`, 'You can not override it like this: ', JSON.stringify(node, null, 2), '', `Instead, you need to use the '&.${stateClass}' syntax:`, JSON.stringify({
                 root: {
                   [`&.${stateClass}`]: child
                 }
-              }, null, 2), '', 'https://material-ui.com/r/state-classes-guide'].join('\n'));
+              }, null, 2), '', 'https://mui.com/r/state-classes-guide'].join('\n'));
             } // Remove the style to prevent global conflicts.
 
 
@@ -12305,7 +12661,7 @@ const theme2 = createTheme({ palette: {
     {
       if (!warnedOnce$1) {
         warnedOnce$1 = true;
-        console.error(['Material-UI: the createMuiTheme function was renamed to createTheme.', '', "You should use `import { createTheme } from '@mui/material/styles'`"].join('\n'));
+        console.error(['MUI: the createMuiTheme function was renamed to createTheme.', '', "You should use `import { createTheme } from '@mui/material/styles'`"].join('\n'));
       }
     }
 
@@ -12322,7 +12678,7 @@ const theme2 = createTheme({ palette: {
 
   function createStyles(styles) {
     if (!warnedOnce) {
-      console.warn(['Material-UI: createStyles from @mui/material/styles is deprecated.', 'Please use @mui/styles/createStyles'].join('\n'));
+      console.warn(['MUI: createStyles from @mui/material/styles is deprecated.', 'Please use @mui/styles/createStyles'].join('\n'));
       warnedOnce = true;
     }
 
@@ -12486,7 +12842,7 @@ const theme2 = createTheme({ palette: {
       } = style;
 
       if (!isUnitless(lineHeight) && !disableAlign) {
-        throw new Error(`Material-UI: Unsupported non-unitless line height with grid alignment.
+        throw new Error(`MUI: Unsupported non-unitless line height with grid alignment.
 Use unitless line heights instead.` );
       }
 
@@ -12554,21 +12910,21 @@ Use unitless line heights instead.` );
   var styled$1 = styled;
 
   function makeStyles() {
-    throw new Error(`Material-UI: makeStyles is not longer exported from @mui/material/styles.
+    throw new Error(`MUI: makeStyles is not longer exported from @mui/material/styles.
 You have to import it from @mui/styles.
-See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more details.` );
+See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` );
   }
 
   function withStyles() {
-    throw new Error(`Material-UI: withStyles is not longer exported from @mui/material/styles.
+    throw new Error(`MUI: withStyles is not longer exported from @mui/material/styles.
 You have to import it from @mui/styles.
-See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more details.` );
+See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` );
   }
 
   function withTheme() {
-    throw new Error(`Material-UI: withTheme is not longer exported from @mui/material/styles.
+    throw new Error(`MUI: withTheme is not longer exported from @mui/material/styles.
 You have to import it from @mui/styles.
-See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more details.` );
+See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` );
   }
 
   function getSvgIconUtilityClass(slot) {
@@ -14249,7 +14605,7 @@ See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more det
       const theme = useTheme();
 
       if (theme.shadows[elevation] === undefined) {
-        console.error([`Material-UI: The elevation provided <Paper elevation={${elevation}}> is not available in the theme.`, `Please make sure that \`theme.shadows[${elevation}]\` is defined.`].join('\n'));
+        console.error([`MUI: The elevation provided <Paper elevation={${elevation}}> is not available in the theme.`, `Please make sure that \`theme.shadows[${elevation}]\` is defined.`].join('\n'));
       }
     }
 
@@ -14301,7 +14657,7 @@ See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more det
       } = props;
 
       if (elevation > 0 && variant === 'outlined') {
-        return new Error(`Material-UI: Combining \`elevation={${elevation}}\` with \`variant="${variant}"\` has no effect. Either use \`elevation={0}\` or use a different \`variant\`.`);
+        return new Error(`MUI: Combining \`elevation={${elevation}}\` with \`variant="${variant}"\` has no effect. Either use \`elevation={0}\` or use a different \`variant\`.`);
       }
 
       return null;
@@ -14330,7 +14686,7 @@ See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more det
 
   /**
    * @ignore - internal component.
-   * @type {React.Context<{} | {expanded: boolean, disabled: boolean, disableGutters: boolean, toggle: () => void}>}
+   * @type {React.Context<{} | {expanded: boolean, disabled: boolean, toggle: () => void}>}
    */
 
   const AccordionContext = /*#__PURE__*/React__namespace.createContext({});
@@ -14532,11 +14888,11 @@ See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more det
       const summary = React__namespace.Children.toArray(props.children)[0];
 
       if (reactIs_2(summary)) {
-        return new Error("Material-UI: The Accordion doesn't accept a Fragment as a child. " + 'Consider providing an array instead.');
+        return new Error("MUI: The Accordion doesn't accept a Fragment as a child. " + 'Consider providing an array instead.');
       }
 
       if (! /*#__PURE__*/React__namespace.isValidElement(summary)) {
-        return new Error('Material-UI: Expected the first child of Accordion to be a valid element.');
+        return new Error('MUI: Expected the first child of Accordion to be a valid element.');
       }
 
       return null;
@@ -14604,7 +14960,7 @@ See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more det
 
     /**
      * Props applied to the transition element.
-     * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition) component.
+     * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition) component.
      */
     TransitionProps: propTypes.object
   } ;
@@ -15220,109 +15576,6 @@ See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more det
   const buttonBaseClasses = generateUtilityClasses('MuiButtonBase', ['root', 'disabled', 'focusVisible']);
   var buttonBaseClasses$1 = buttonBaseClasses;
 
-  const useTouchRipple = props => {
-    const {
-      disabled,
-      disableFocusRipple,
-      disableRipple,
-      disableTouchRipple,
-      focusVisible,
-      rippleRef
-    } = props;
-    React__namespace.useEffect(() => {
-      if (focusVisible && !disableFocusRipple && !disableRipple) {
-        var _rippleRef$current;
-
-        (_rippleRef$current = rippleRef.current) == null ? void 0 : _rippleRef$current.pulsate();
-      }
-    }, [rippleRef, focusVisible, disableFocusRipple, disableRipple]);
-
-    function useRippleHandler(rippleAction, skipRippleAction = disableTouchRipple) {
-      return useEventCallback(event => {
-        if (!skipRippleAction && rippleRef.current) {
-          rippleRef.current[rippleAction](event);
-        }
-
-        return true;
-      });
-    }
-
-    const keydownRef = React__namespace.useRef(false);
-    const handleKeyDown = useEventCallback(event => {
-      if (!disableFocusRipple && !keydownRef.current && focusVisible && rippleRef.current && event.key === ' ') {
-        keydownRef.current = true;
-        rippleRef.current.stop(event, () => {
-          var _rippleRef$current2;
-
-          rippleRef == null ? void 0 : (_rippleRef$current2 = rippleRef.current) == null ? void 0 : _rippleRef$current2.start(event);
-        });
-      }
-    });
-    const handleKeyUp = useEventCallback(event => {
-      // calling preventDefault in keyUp on a <button> will not dispatch a click event if Space is pressed
-      // https://codesandbox.io/s/button-keyup-preventdefault-dn7f0
-      if (!disableFocusRipple && event.key === ' ' && rippleRef.current && focusVisible && !event.defaultPrevented) {
-        keydownRef.current = false;
-        rippleRef.current.stop(event, () => {
-          var _rippleRef$current3;
-
-          rippleRef == null ? void 0 : (_rippleRef$current3 = rippleRef.current) == null ? void 0 : _rippleRef$current3.pulsate(event);
-        });
-      }
-    });
-    const handleBlur = useRippleHandler('stop', false);
-    const handleMouseDown = useRippleHandler('start');
-    const handleContextMenu = useRippleHandler('stop');
-    const handleDragLeave = useRippleHandler('stop');
-    const handleMouseUp = useRippleHandler('stop');
-    const handleMouseLeave = useRippleHandler('stop');
-    const handleTouchStart = useRippleHandler('start');
-    const handleTouchEnd = useRippleHandler('stop');
-    const handleTouchMove = useRippleHandler('stop');
-    const [mountedState, setMountedState] = React__namespace.useState(false);
-    React__namespace.useEffect(() => {
-      setMountedState(true);
-    }, []);
-    const enableTouchRipple = mountedState && !disableRipple && !disabled;
-    const getRippleHandlers = React__namespace.useMemo(() => {
-      const rippleHandlers = {
-        onBlur: handleBlur,
-        onKeyDown: handleKeyDown,
-        onKeyUp: handleKeyUp,
-        onMouseDown: handleMouseDown,
-        onMouseUp: handleMouseUp,
-        onMouseLeave: handleMouseLeave,
-        onContextMenu: handleContextMenu,
-        onDragLeave: handleDragLeave,
-        onTouchStart: handleTouchStart,
-        onTouchEnd: handleTouchEnd,
-        onTouchMove: handleTouchMove
-      };
-      return (otherEvents = {}) => {
-        const eventNames = Object.keys(rippleHandlers);
-        const wrappedEvents = eventNames.map(eventName => ({
-          name: eventName,
-          handler: ev => {
-            var _otherEvents$eventNam;
-
-            (_otherEvents$eventNam = otherEvents[eventName]) == null ? void 0 : _otherEvents$eventNam.call(otherEvents, ev);
-            rippleHandlers[eventName](ev);
-          }
-        }));
-        return wrappedEvents.reduce((acc, current) => {
-          acc[current.name] = current.handler;
-          return acc;
-        }, {});
-      };
-    }, [handleBlur, handleKeyDown, handleKeyUp, handleMouseDown, handleMouseUp, handleMouseLeave, handleContextMenu, handleDragLeave, handleTouchStart, handleTouchEnd, handleTouchMove]);
-    return {
-      enableTouchRipple,
-      getRippleHandlers
-    };
-  };
-
-  var useTouchRipple$1 = useTouchRipple;
-
   const _excluded$1_ = ["action", "centerRipple", "children", "className", "component", "disabled", "disableRipple", "disableTouchRipple", "focusRipple", "focusVisibleClassName", "LinkComponent", "onBlur", "onClick", "onContextMenu", "onDragLeave", "onFocus", "onFocusVisible", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseLeave", "onMouseUp", "onTouchEnd", "onTouchMove", "onTouchStart", "tabIndex", "TouchRippleProps", "type"];
 
   const useUtilityClasses$1E = ownerState => {
@@ -15411,51 +15664,205 @@ See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more det
       disableTouchRipple = false,
       focusRipple = false,
       LinkComponent = 'a',
+      onBlur,
+      onClick,
+      onContextMenu,
+      onDragLeave,
+      onFocus,
+      onFocusVisible,
+      onKeyDown,
+      onKeyUp,
+      onMouseDown,
+      onMouseLeave,
+      onMouseUp,
+      onTouchEnd,
+      onTouchMove,
+      onTouchStart,
       tabIndex = 0,
-      TouchRippleProps
+      TouchRippleProps,
+      type
     } = props,
           other = _objectWithoutPropertiesLoose(props, _excluded$1_);
 
     const buttonRef = React__namespace.useRef(null);
-    const handleRef = useForkRef(buttonRef, ref);
     const rippleRef = React__namespace.useRef(null);
-    let ComponentProp = component;
+    const {
+      isFocusVisibleRef,
+      onFocus: handleFocusVisible,
+      onBlur: handleBlurVisible,
+      ref: focusVisibleRef
+    } = useIsFocusVisible();
+    const [focusVisible, setFocusVisible] = React__namespace.useState(false);
 
-    if (ComponentProp === 'button' && (other.href || other.to)) {
-      ComponentProp = LinkComponent;
+    if (disabled && focusVisible) {
+      setFocusVisible(false);
     }
 
-    const {
-      focusVisible,
-      setFocusVisible,
-      getRootProps
-    } = useButton(_extends({}, props, {
-      component: ComponentProp,
-      ref: handleRef
-    }));
     React__namespace.useImperativeHandle(action, () => ({
       focusVisible: () => {
         setFocusVisible(true);
         buttonRef.current.focus();
       }
-    }), [setFocusVisible]);
-    const {
-      enableTouchRipple,
-      getRippleHandlers
-    } = useTouchRipple$1({
-      disabled,
-      disableFocusRipple: !focusRipple,
-      disableRipple,
-      disableTouchRipple,
-      focusVisible,
-      rippleRef
+    }), []);
+    React__namespace.useEffect(() => {
+      if (focusVisible && focusRipple && !disableRipple) {
+        rippleRef.current.pulsate();
+      }
+    }, [disableRipple, focusRipple, focusVisible]);
+
+    function useRippleHandler(rippleAction, eventCallback, skipRippleAction = disableTouchRipple) {
+      return useEventCallback(event => {
+        if (eventCallback) {
+          eventCallback(event);
+        }
+
+        const ignore = skipRippleAction;
+
+        if (!ignore && rippleRef.current) {
+          rippleRef.current[rippleAction](event);
+        }
+
+        return true;
+      });
+    }
+
+    const handleMouseDown = useRippleHandler('start', onMouseDown);
+    const handleContextMenu = useRippleHandler('stop', onContextMenu);
+    const handleDragLeave = useRippleHandler('stop', onDragLeave);
+    const handleMouseUp = useRippleHandler('stop', onMouseUp);
+    const handleMouseLeave = useRippleHandler('stop', event => {
+      if (focusVisible) {
+        event.preventDefault();
+      }
+
+      if (onMouseLeave) {
+        onMouseLeave(event);
+      }
+    });
+    const handleTouchStart = useRippleHandler('start', onTouchStart);
+    const handleTouchEnd = useRippleHandler('stop', onTouchEnd);
+    const handleTouchMove = useRippleHandler('stop', onTouchMove);
+    const handleBlur = useRippleHandler('stop', event => {
+      handleBlurVisible(event);
+
+      if (isFocusVisibleRef.current === false) {
+        setFocusVisible(false);
+      }
+
+      if (onBlur) {
+        onBlur(event);
+      }
+    }, false);
+    const handleFocus = useEventCallback(event => {
+      // Fix for https://github.com/facebook/react/issues/7769
+      if (!buttonRef.current) {
+        buttonRef.current = event.currentTarget;
+      }
+
+      handleFocusVisible(event);
+
+      if (isFocusVisibleRef.current === true) {
+        setFocusVisible(true);
+
+        if (onFocusVisible) {
+          onFocusVisible(event);
+        }
+      }
+
+      if (onFocus) {
+        onFocus(event);
+      }
+    });
+
+    const isNonNativeButton = () => {
+      const button = buttonRef.current;
+      return component && component !== 'button' && !(button.tagName === 'A' && button.href);
+    };
+    /**
+     * IE11 shim for https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/repeat
+     */
+
+
+    const keydownRef = React__namespace.useRef(false);
+    const handleKeyDown = useEventCallback(event => {
+      // Check if key is already down to avoid repeats being counted as multiple activations
+      if (focusRipple && !keydownRef.current && focusVisible && rippleRef.current && event.key === ' ') {
+        keydownRef.current = true;
+        rippleRef.current.stop(event, () => {
+          rippleRef.current.start(event);
+        });
+      }
+
+      if (event.target === event.currentTarget && isNonNativeButton() && event.key === ' ') {
+        event.preventDefault();
+      }
+
+      if (onKeyDown) {
+        onKeyDown(event);
+      } // Keyboard accessibility for non interactive elements
+
+
+      if (event.target === event.currentTarget && isNonNativeButton() && event.key === 'Enter' && !disabled) {
+        event.preventDefault();
+
+        if (onClick) {
+          onClick(event);
+        }
+      }
+    });
+    const handleKeyUp = useEventCallback(event => {
+      // calling preventDefault in keyUp on a <button> will not dispatch a click event if Space is pressed
+      // https://codesandbox.io/s/button-keyup-preventdefault-dn7f0
+      if (focusRipple && event.key === ' ' && rippleRef.current && focusVisible && !event.defaultPrevented) {
+        keydownRef.current = false;
+        rippleRef.current.stop(event, () => {
+          rippleRef.current.pulsate(event);
+        });
+      }
+
+      if (onKeyUp) {
+        onKeyUp(event);
+      } // Keyboard accessibility for non interactive elements
+
+
+      if (onClick && event.target === event.currentTarget && isNonNativeButton() && event.key === ' ' && !event.defaultPrevented) {
+        onClick(event);
+      }
     });
+    let ComponentProp = component;
+
+    if (ComponentProp === 'button' && (other.href || other.to)) {
+      ComponentProp = LinkComponent;
+    }
+
+    const buttonProps = {};
+
+    if (ComponentProp === 'button') {
+      buttonProps.type = type === undefined ? 'button' : type;
+      buttonProps.disabled = disabled;
+    } else {
+      if (!other.href && !other.to) {
+        buttonProps.role = 'button';
+      }
+
+      if (disabled) {
+        buttonProps['aria-disabled'] = disabled;
+      }
+    }
+
+    const handleOwnRef = useForkRef(focusVisibleRef, buttonRef);
+    const handleRef = useForkRef(ref, handleOwnRef);
+    const [mountedState, setMountedState] = React__namespace.useState(false);
+    React__namespace.useEffect(() => {
+      setMountedState(true);
+    }, []);
+    const enableTouchRipple = mountedState && !disableRipple && !disabled;
 
     {
       // eslint-disable-next-line react-hooks/rules-of-hooks
       React__namespace.useEffect(() => {
         if (enableTouchRipple && !rippleRef.current) {
-          console.error(['Material-UI: The `component` prop provided to ButtonBase is invalid.', 'Please make sure the children prop is rendered in this custom component.'].join('\n'));
+          console.error(['MUI: The `component` prop provided to ButtonBase is invalid.', 'Please make sure the children prop is rendered in this custom component.'].join('\n'));
         }
       }, [enableTouchRipple]);
     }
@@ -15475,8 +15882,24 @@ See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more det
     return /*#__PURE__*/jsxRuntime_2(ButtonBaseRoot, _extends({
       as: ComponentProp,
       className: clsx(classes.root, className),
-      ownerState: ownerState
-    }, getRootProps(getRippleHandlers(props)), other, {
+      ownerState: ownerState,
+      onBlur: handleBlur,
+      onClick: onClick,
+      onContextMenu: handleContextMenu,
+      onFocus: handleFocus,
+      onKeyDown: handleKeyDown,
+      onKeyUp: handleKeyUp,
+      onMouseDown: handleMouseDown,
+      onMouseLeave: handleMouseLeave,
+      onMouseUp: handleMouseUp,
+      onDragLeave: handleDragLeave,
+      onTouchEnd: handleTouchEnd,
+      onTouchMove: handleTouchMove,
+      onTouchStart: handleTouchStart,
+      ref: handleRef,
+      tabIndex: disabled ? -1 : tabIndex,
+      type: type
+    }, buttonProps, other, {
       children: [children, enableTouchRipple ?
       /*#__PURE__*/
 
@@ -16021,7 +16444,7 @@ See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more det
       const found = React__namespace.Children.toArray(props.children).some(child => /*#__PURE__*/React__namespace.isValidElement(child) && child.props.onClick);
 
       if (found) {
-        return new Error(['Material-UI: You are providing an onClick event listener to a child of a button element.', 'Prefer applying it to the IconButton directly.', 'This guarantees that the whole <button> will be responsive to click events.'].join('\n'));
+        return new Error(['MUI: You are providing an onClick event listener to a child of a button element.', 'Prefer applying it to the IconButton directly.', 'This guarantees that the whole <button> will be responsive to click events.'].join('\n'));
       }
 
       return null;
@@ -18783,7 +19206,7 @@ See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more det
           const box = resolvedAnchorEl.getBoundingClientRect();
 
           if (box.top === 0 && box.left === 0 && box.right === 0 && box.bottom === 0) {
-            console.warn(['Material-UI: The `anchorEl` prop provided to the component is invalid.', 'The anchor element should be part of the document layout.', "Make sure the element is present in the document or that it's not display none."].join('\n'));
+            console.warn(['MUI: The `anchorEl` prop provided to the component is invalid.', 'The anchor element should be part of the document layout.', "Make sure the element is present in the document or that it's not display none."].join('\n'));
           }
         }
       }
@@ -18936,10 +19359,10 @@ See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more det
           const box = resolvedAnchorEl.getBoundingClientRect();
 
           if (box.top === 0 && box.left === 0 && box.right === 0 && box.bottom === 0) {
-            return new Error(['Material-UI: The `anchorEl` prop provided to the component is invalid.', 'The anchor element should be part of the document layout.', "Make sure the element is present in the document or that it's not display none."].join('\n'));
+            return new Error(['MUI: The `anchorEl` prop provided to the component is invalid.', 'The anchor element should be part of the document layout.', "Make sure the element is present in the document or that it's not display none."].join('\n'));
           }
         } else if (!resolvedAnchorEl || typeof resolvedAnchorEl.getBoundingClientRect !== 'function' || resolvedAnchorEl.contextElement != null && resolvedAnchorEl.contextElement.nodeType !== 1) {
-          return new Error(['Material-UI: The `anchorEl` prop provided to the component is invalid.', 'It should be an HTML element instance or a virtualElement ', '(https://popper.js.org/docs/v2/virtual-elements/).'].join('\n'));
+          return new Error(['MUI: The `anchorEl` prop provided to the component is invalid.', 'It should be an HTML element instance or a virtualElement ', '(https://popper.js.org/docs/v2/virtual-elements/).'].join('\n'));
         }
       }
 
@@ -19570,7 +19993,7 @@ See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more det
 
     {
       if (avatar && icon) {
-        console.error('Material-UI: The Chip component can not handle the avatar ' + 'and the icon prop at the same time. Pick one.');
+        console.error('MUI: The Chip component can not handle the avatar ' + 'and the icon prop at the same time. Pick one.');
       }
     }
 
@@ -20404,7 +20827,7 @@ See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more det
      */
     defaultValue: chainPropTypes(propTypes.any, props => {
       if (props.multiple && props.defaultValue !== undefined && !Array.isArray(props.defaultValue)) {
-        return new Error(['Material-UI: The Autocomplete expects the `defaultValue` prop to be an array when `multiple={true}` or undefined.', `However, ${props.defaultValue} was provided.`].join('\n'));
+        return new Error(['MUI: The Autocomplete expects the `defaultValue` prop to be an array when `multiple={true}` or undefined.', `However, ${props.defaultValue} was provided.`].join('\n'));
       }
 
       return null;
@@ -20747,7 +21170,7 @@ See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more det
      */
     value: chainPropTypes(propTypes.any, props => {
       if (props.multiple && props.value !== undefined && !Array.isArray(props.value)) {
-        return new Error(['Material-UI: The Autocomplete expects the `value` prop to be an array when `multiple={true}` or undefined.', `However, ${props.value} was provided.`].join('\n'));
+        return new Error(['MUI: The Autocomplete expects the `value` prop to be an array when `multiple={true}` or undefined.', `However, ${props.value} was provided.`].join('\n'));
       }
 
       return null;
@@ -21107,7 +21530,7 @@ See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more det
     const children = React__namespace.Children.toArray(childrenProp).filter(child => {
       {
         if (reactIs_2(child)) {
-          console.error(["Material-UI: The AvatarGroup component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
+          console.error(["MUI: The AvatarGroup component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
         }
       }
 
@@ -21168,7 +21591,7 @@ See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more det
      */
     max: chainPropTypes(propTypes.number, props => {
       if (props.max < 2) {
-        return new Error(['Material-UI: The prop `max` should be equal to 2 or above.', 'A value below is clamped to 2.'].join('\n'));
+        return new Error(['MUI: The prop `max` should be equal to 2 or above.', 'A value below is clamped to 2.'].join('\n'));
       }
 
       return null;
@@ -21907,7 +22330,7 @@ See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more det
 
         {
           if (reactIs_2(child)) {
-            console.error(["Material-UI: The BottomNavigation component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
+            console.error(["MUI: The BottomNavigation component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
           }
         }
 
@@ -22350,7 +22773,7 @@ See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more det
 
       if (itemsBeforeCollapse + itemsAfterCollapse >= allItems.length) {
         {
-          console.error(['Material-UI: You have provided an invalid combination of props to the Breadcrumbs.', `itemsAfterCollapse={${itemsAfterCollapse}} + itemsBeforeCollapse={${itemsBeforeCollapse}} >= maxItems={${maxItems}}`].join('\n'));
+          console.error(['MUI: You have provided an invalid combination of props to the Breadcrumbs.', `itemsAfterCollapse={${itemsAfterCollapse}} + itemsBeforeCollapse={${itemsBeforeCollapse}} >= maxItems={${maxItems}}`].join('\n'));
         }
 
         return allItems;
@@ -22365,7 +22788,7 @@ See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more det
     const allItems = React__namespace.Children.toArray(children).filter(child => {
       {
         if (reactIs_2(child)) {
-          console.error(["Material-UI: The Breadcrumbs component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
+          console.error(["MUI: The Breadcrumbs component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
         }
       }
 
@@ -23004,7 +23427,7 @@ See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more det
 
         {
           if (reactIs_2(child)) {
-            console.error(["Material-UI: The ButtonGroup component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
+            console.error(["MUI: The ButtonGroup component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
           }
         }
 
@@ -23199,7 +23622,7 @@ See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more det
      */
     raised: chainPropTypes(propTypes.bool, props => {
       if (props.raised && props.variant === 'outlined') {
-        return new Error('Material-UI: Combining `raised={true}` with `variant="outlined"` has no effect.');
+        return new Error('MUI: Combining `raised={true}` with `variant="outlined"` has no effect.');
       }
 
       return null;
@@ -23837,7 +24260,7 @@ See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more det
      */
     children: chainPropTypes(propTypes.node, props => {
       if (!props.children && !props.image && !props.src && !props.component) {
-        return new Error('Material-UI: Either `children`, `image`, `src` or `component` prop must be specified.');
+        return new Error('MUI: Either `children`, `image`, `src` or `component` prop must be specified.');
       }
 
       return null;
@@ -24348,7 +24771,7 @@ See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more det
      */
     color: propTypes
     /* @typescript-to-proptypes-ignore */
-    .oneOfType([propTypes.oneOf(['default', 'primary', 'secondary', 'error', 'info', 'succes', 'warning']), propTypes.string]),
+    .oneOfType([propTypes.oneOf(['default', 'primary', 'secondary', 'error', 'info', 'success', 'warning']), propTypes.string]),
 
     /**
      * The default checked state. Use when the component is not controlled.
@@ -24656,7 +25079,7 @@ See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more det
      */
     disableShrink: chainPropTypes(propTypes.bool, props => {
       if (props.disableShrink && props.variant && props.variant !== 'indeterminate') {
-        return new Error('Material-UI: You have provided the `disableShrink` prop ' + 'with a variant other than `indeterminate`. This will have no effect.');
+        return new Error('MUI: You have provided the `disableShrink` prop ' + 'with a variant other than `indeterminate`. This will have no effect.');
       }
 
       return null;
@@ -24716,12 +25139,12 @@ See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more det
    *
    * Demos:
    *
-   * - [Click Away Listener](https://material-ui.com/components/click-away-listener/)
-   * - [Menus](https://material-ui.com/components/menus/)
+   * - [Click Away Listener](https://mui.com/components/click-away-listener/)
+   * - [Menus](https://mui.com/components/menus/)
    *
    * API:
    *
-   * - [ClickAwayListener API](https://material-ui.com/api/click-away-listener/)
+   * - [ClickAwayListener API](https://mui.com/api/click-away-listener/)
    */
   function ClickAwayListener(props) {
     const {
@@ -25863,7 +26286,7 @@ See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more det
 
     /**
      * Props applied to the transition element.
-     * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition) component.
+     * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition) component.
      */
     TransitionProps: propTypes.object
   } ;
@@ -26747,10 +27170,10 @@ See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more det
           const box = resolvedContainer.getBoundingClientRect();
 
           if (box.top === 0 && box.left === 0 && box.right === 0 && box.bottom === 0) {
-            return new Error(['Material-UI: The `container` prop provided to the component is invalid.', 'The anchor element should be part of the document layout.', "Make sure the element is present in the document or that it's not display none."].join('\n'));
+            return new Error(['MUI: The `container` prop provided to the component is invalid.', 'The anchor element should be part of the document layout.', "Make sure the element is present in the document or that it's not display none."].join('\n'));
           }
         } else if (!resolvedContainer || typeof resolvedContainer.getBoundingClientRect !== 'function' || resolvedContainer.contextElement != null && resolvedContainer.contextElement.nodeType !== 1) {
-          return new Error(['Material-UI: The `container` prop provided to the component is invalid.', 'It should be an HTML element instance.'].join('\n'));
+          return new Error(['MUI: The `container` prop provided to the component is invalid.', 'It should be an HTML element instance.'].join('\n'));
         }
       }
 
@@ -27516,7 +27939,7 @@ See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more det
 
         {
           if (renders.current === 20) {
-            console.error(['Material-UI: Too many re-renders. The layout is unstable.', 'TextareaAutosize limits the number of renders to prevent an infinite loop.'].join('\n'));
+            console.error(['MUI: Too many re-renders. The layout is unstable.', 'TextareaAutosize limits the number of renders to prevent an infinite loop.'].join('\n'));
           }
         }
 
@@ -27908,7 +28331,7 @@ See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more det
     const handleInputRefWarning = React__namespace.useCallback(instance => {
       {
         if (instance && instance.nodeName !== 'INPUT' && !instance.focus) {
-          console.error(['Material-UI: You have provided a `inputComponent` to the input component', 'that does not correctly handle the `ref` prop.', 'Make sure the `ref` prop is called with a HTMLInputElement.'].join('\n'));
+          console.error(['MUI: You have provided a `inputComponent` to the input component', 'that does not correctly handle the `ref` prop.', 'Make sure the `ref` prop is called with a HTMLInputElement.'].join('\n'));
         }
       }
     }, []);
@@ -28009,7 +28432,7 @@ See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more det
         const element = event.target || inputRef.current;
 
         if (element == null) {
-          throw new Error(`Material-UI: Expected valid input target. Did you use a custom \`inputComponent\` and forget to forward refs? See https://material-ui.com/r/input-component-ref-interface for more info.` );
+          throw new Error(`MUI: Expected valid input target. Did you use a custom \`inputComponent\` and forget to forward refs? See https://mui.com/r/input-component-ref-interface for more info.` );
         }
 
         checkDirty({
@@ -28050,7 +28473,7 @@ See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more det
       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.');
+            console.warn('MUI: You can not use the `minRows` or `maxRows` props when the input `rows` prop is set.');
           }
         }
 
@@ -28947,7 +29370,7 @@ See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more det
 
       registerEffect = () => {
         if (registeredInput.current) {
-          console.error(['Material-UI: There are multiple `InputBase` components inside a FormControl.', 'This creates visual inconsistencies, only use one `InputBase`.'].join('\n'));
+          console.error(['MUI: There are multiple `InputBase` components inside a FormControl.', 'This creates visual inconsistencies, only use one `InputBase`.'].join('\n'));
         }
 
         registeredInput.current = true;
@@ -30499,13 +30922,13 @@ See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more det
 
     {
       if (typeof queryInput === 'function' && theme === null) {
-        console.error(['Material-UI: 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'));
+        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, ''); // Wait for jsdom to support the match media feature.
-    // All the browsers Material-UI support have this built-in.
+    // 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.
 
@@ -30904,7 +31327,7 @@ See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more det
       });
 
       if (unknownProps.length > 0) {
-        console.error(`Material-UI: Unsupported props received by \`<Hidden implementation="css" />\`: ${unknownProps.join(', ')}. Did you forget to wrap this component in a ThemeProvider declaring these breakpoints?`);
+        console.error(`MUI: Unsupported props received by \`<Hidden implementation="css" />\`: ${unknownProps.join(', ')}. Did you forget to wrap this component in a ThemeProvider declaring these breakpoints?`);
       }
     }
 
@@ -31409,7 +31832,7 @@ See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more det
       {
         // Detect Internet Explorer 8+
         if (document !== undefined && 'objectFit' in document.documentElement.style === false) {
-          console.error(['Material-UI: ImageList v5+ no longer natively supports Internet Explorer.', 'Use v4 of this component instead, or polyfill CSS object-fit.'].join('\n'));
+          console.error(['MUI: ImageList v5+ no longer natively supports Internet Explorer.', 'Use v4 of this component instead, or polyfill CSS object-fit.'].join('\n'));
         }
       }
     }, []);
@@ -31505,9 +31928,7 @@ See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more det
      * The variant to use.
      * @default 'standard'
      */
-    variant: propTypes
-    /* @typescript-to-proptypes-ignore */
-    .oneOfType([propTypes.oneOf(['masonry', 'quilted', 'standard', 'woven']), propTypes.string])
+    variant: propTypes.oneOf(['masonry', 'quilted', 'standard', 'woven'])
   } ;
   var ImageList$1 = ImageList;
 
@@ -31626,7 +32047,7 @@ See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more det
 
         {
           if (reactIs_2(child)) {
-            console.error(["Material-UI: The ImageListItem component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
+            console.error(["MUI: The ImageListItem component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
           }
         }
 
@@ -32335,7 +32756,7 @@ See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more det
     if (variantProp && muiFormControl.variant) {
       {
         if (variantProp === muiFormControl.variant) {
-          console.error('Material-UI: The `InputAdornment` variant infers the variant prop ' + 'you do not have to provide one.');
+          console.error('MUI: The `InputAdornment` variant infers the variant prop ' + 'you do not have to provide one.');
         }
       }
     }
@@ -32925,7 +33346,7 @@ See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more det
 
         inlineStyles.bar1.transform = `translateX(${transform}%)`;
       } else {
-        console.error('Material-UI: You need to provide a value prop ' + 'when using the determinate or buffer variant of LinearProgress .');
+        console.error('MUI: You need to provide a value prop ' + 'when using the determinate or buffer variant of LinearProgress .');
       }
     }
 
@@ -32939,7 +33360,7 @@ See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more det
 
         inlineStyles.bar2.transform = `translateX(${transform}%)`;
       } else {
-        console.error('Material-UI: You need to provide a valueBuffer prop ' + 'when using the buffer variant of LinearProgress.');
+        console.error('MUI: You need to provide a valueBuffer prop ' + 'when using the buffer variant of LinearProgress.');
       }
     }
 
@@ -33527,7 +33948,7 @@ See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more det
         if (listItemRef.current) {
           listItemRef.current.focus();
         } else {
-          console.error('Material-UI: Unable to set focus to a ListItemButton whose component has not been rendered.');
+          console.error('MUI: Unable to set focus to a ListItemButton whose component has not been rendered.');
         }
       }
     }, [autoFocus]);
@@ -33896,7 +34317,7 @@ See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more det
         if (listItemRef.current) {
           listItemRef.current.focus();
         } else {
-          console.error('Material-UI: Unable to set focus to a ListItem whose component has not been rendered.');
+          console.error('MUI: Unable to set focus to a ListItem whose component has not been rendered.');
         }
       }
     }, [autoFocus]);
@@ -34031,7 +34452,7 @@ See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more det
 
 
       if (secondaryActionIndex !== -1 && secondaryActionIndex !== children.length - 1) {
-        return new Error('Material-UI: You used an element after ListItemSecondaryAction. ' + 'For ListItem to detect that it has a secondary action ' + 'you must pass it as the last child to ListItem.');
+        return new Error('MUI: You used an element after ListItemSecondaryAction. ' + 'For ListItem to detect that it has a secondary action ' + 'you must pass it as the last child to ListItem.');
       }
 
       return null;
@@ -34718,7 +35139,7 @@ See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more det
 
       {
         if (reactIs_2(child)) {
-          console.error(["Material-UI: The Menu component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
+          console.error(["MUI: The Menu component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
         }
       }
 
@@ -34947,7 +35368,7 @@ See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more det
       if (anchorReference === 'anchorPosition') {
         {
           if (!anchorPosition) {
-            console.error('Material-UI: You need to provide a `anchorPosition` prop when using ' + '<Popover anchorReference="anchorPosition" />.');
+            console.error('MUI: You need to provide a `anchorPosition` prop when using ' + '<Popover anchorReference="anchorPosition" />.');
           }
         }
 
@@ -34963,7 +35384,7 @@ See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more det
         const box = anchorElement.getBoundingClientRect();
 
         if (box.top === 0 && box.left === 0 && box.right === 0 && box.bottom === 0) {
-          console.warn(['Material-UI: The `anchorEl` prop provided to the component is invalid.', 'The anchor element should be part of the document layout.', "Make sure the element is present in the document or that it's not display none."].join('\n'));
+          console.warn(['MUI: The `anchorEl` prop provided to the component is invalid.', 'The anchor element should be part of the document layout.', "Make sure the element is present in the document or that it's not display none."].join('\n'));
         }
       }
 
@@ -35020,7 +35441,7 @@ See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more det
 
       {
         if (elemRect.height > heightThreshold && elemRect.height && heightThreshold) {
-          console.error(['Material-UI: The popover component is too tall.', `Some part of it can not be seen on the screen (${elemRect.height - heightThreshold}px).`, 'Please consider adding a `max-height` to improve the user-experience.'].join('\n'));
+          console.error(['MUI: The popover component is too tall.', `Some part of it can not be seen on the screen (${elemRect.height - heightThreshold}px).`, 'Please consider adding a `max-height` to improve the user-experience.'].join('\n'));
         }
       } // Check if the horizontal axis needs shifting
 
@@ -35156,10 +35577,10 @@ See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more det
           const box = resolvedAnchorEl.getBoundingClientRect();
 
           if (box.top === 0 && box.left === 0 && box.right === 0 && box.bottom === 0) {
-            return new Error(['Material-UI: The `anchorEl` prop provided to the component is invalid.', 'The anchor element should be part of the document layout.', "Make sure the element is present in the document or that it's not display none."].join('\n'));
+            return new Error(['MUI: The `anchorEl` prop provided to the component is invalid.', 'The anchor element should be part of the document layout.', "Make sure the element is present in the document or that it's not display none."].join('\n'));
           }
         } else {
-          return new Error(['Material-UI: The `anchorEl` prop provided to the component is invalid.', `It should be an Element instance but it's \`${resolvedAnchorEl}\` instead.`].join('\n'));
+          return new Error(['MUI: The `anchorEl` prop provided to the component is invalid.', `It should be an Element instance but it's \`${resolvedAnchorEl}\` instead.`].join('\n'));
         }
       }
 
@@ -35300,7 +35721,7 @@ See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more det
 
     /**
      * Props applied to the transition element.
-     * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition) component.
+     * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition) component.
      * @default {}
      */
     TransitionProps: propTypes.object
@@ -35441,7 +35862,7 @@ See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more det
 
       {
         if (reactIs_2(child)) {
-          console.error(["Material-UI: The Menu component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
+          console.error(["MUI: The Menu component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
         }
       }
 
@@ -35579,7 +36000,7 @@ See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more det
 
     /**
      * Props applied to the transition element.
-     * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition) component.
+     * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition) component.
      * @default {}
      */
     TransitionProps: propTypes.object,
@@ -35732,7 +36153,7 @@ See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more det
         if (menuItemRef.current) {
           menuItemRef.current.focus();
         } else {
-          console.error('Material-UI: Unable to set focus to a MenuItem whose component has not been rendered.');
+          console.error('MUI: Unable to set focus to a MenuItem whose component has not been rendered.');
         }
       }
     }, [autoFocus]);
@@ -38711,7 +39132,7 @@ See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more det
      */
     precision: chainPropTypes(propTypes.number, props => {
       if (props.precision < 0.1) {
-        return new Error(['Material-UI: The prop `precision` should be above 0.1.', 'A value below this limit has an imperceptible impact.'].join('\n'));
+        return new Error(['MUI: The prop `precision` should be above 0.1.', 'A value below this limit has an imperceptible impact.'].join('\n'));
       }
 
       return null;
@@ -39155,7 +39576,7 @@ See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more det
 
       {
         if (reactIs_2(child)) {
-          console.error(["Material-UI: The Select component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
+          console.error(["MUI: The Select component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
         }
       }
 
@@ -39163,7 +39584,7 @@ See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more det
 
       if (multiple) {
         if (!Array.isArray(value)) {
-          throw new Error(`Material-UI: The \`value\` prop must be an array when using the \`Select\` component with \`multiple\`.` );
+          throw new Error(`MUI: The \`value\` prop must be an array when using the \`Select\` component with \`multiple\`.` );
         }
 
         selected = value.some(v => areEqualValues(v, child.props.value));
@@ -39212,7 +39633,7 @@ See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more det
       React__namespace.useEffect(() => {
         if (!foundMatch && !multiple && value !== '') {
           const values = childrenArray.map(child => child.props.value);
-          console.warn([`Material-UI: You have provided an out-of-range value \`${value}\` for the select ${name ? `(name="${name}") ` : ''}component.`, "Consider providing a value that matches one of the available options or ''.", `The available values are ${values.filter(x => x != null).map(x => `\`${x}\``).join(', ') || '""'}.`].join('\n'));
+          console.warn([`MUI: You have provided an out-of-range value \`${value}\` for the select ${name ? `(name="${name}") ` : ''}component.`, "Consider providing a value that matches one of the available options or ''.", `The available values are ${values.filter(x => x != null).map(x => `\`${x}\``).join(', ') || '""'}.`].join('\n'));
         }
       }, [foundMatch, childrenArray, multiple, name, value]);
     }
@@ -40425,7 +40846,7 @@ See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more det
       const range = Array.isArray(props.value || props.defaultValue);
 
       if (range && props['aria-label'] != null) {
-        return new Error('Material-UI: You need to use the `getAriaLabel` prop instead of `aria-label` when using a range slider.');
+        return new Error('MUI: You need to use the `getAriaLabel` prop instead of `aria-label` when using a range slider.');
       }
 
       return null;
@@ -40443,7 +40864,7 @@ See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more det
       const range = Array.isArray(props.value || props.defaultValue);
 
       if (range && props['aria-valuetext'] != null) {
-        return new Error('Material-UI: You need to use the `getAriaValueText` prop instead of `aria-valuetext` when using a range slider.');
+        return new Error('MUI: You need to use the `getAriaValueText` prop instead of `aria-valuetext` when using a range slider.');
       }
 
       return null;
@@ -41187,7 +41608,7 @@ See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more det
 
     /**
      * Props applied to the transition element.
-     * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition) component.
+     * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition) component.
      * @default {}
      */
     TransitionProps: propTypes.object
@@ -41736,7 +42157,7 @@ See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more det
     const allItems = React__namespace.Children.toArray(childrenProp).filter(child => {
       {
         if (reactIs_2(child)) {
-          console.error(["Material-UI: The SpeedDial component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
+          console.error(["MUI: The SpeedDial component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
         }
       }
 
@@ -41936,7 +42357,7 @@ See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more det
 
     /**
      * Props applied to the transition element.
-     * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition) component.
+     * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition) component.
      */
     TransitionProps: propTypes.object
   } ;
@@ -42196,7 +42617,7 @@ See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more det
 
       React__namespace.useEffect(() => {
         if (childNode && childNode.disabled && !isControlled && title !== '' && childNode.tagName.toLowerCase() === 'button') {
-          console.error(['Material-UI: You are providing a disabled `button` child to the Tooltip component.', 'A disabled element does not fire events.', "Tooltip needs to listen to the child element's events to display the title.", '', 'Add a simple wrapper element, such as a `span`.'].join('\n'));
+          console.error(['MUI: You are providing a disabled `button` child to the Tooltip component.', 'A disabled element does not fire events.', "Tooltip needs to listen to the child element's events to display the title.", '', 'Add a simple wrapper element, such as a `span`.'].join('\n'));
         }
       }, [title, childNode, isControlled]);
     }
@@ -42352,7 +42773,7 @@ See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more det
         children.props.onTouchEnd(event);
       }
 
-      clearTimeout(touchTimer.current);
+      stopTouchInteraction();
       clearTimeout(leaveTimer.current);
       leaveTimer.current = setTimeout(() => {
         handleClose(event);
@@ -42435,7 +42856,7 @@ See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more det
 
       React__namespace.useEffect(() => {
         if (childNode && !childNode.getAttribute('data-mui-internal-clone-element')) {
-          console.error(['Material-UI: The `children` component of the Tooltip is not forwarding its props correctly.', 'Please make sure that props are spread on the same element that the ref is applied to.'].join('\n'));
+          console.error(['MUI: The `children` component of the Tooltip is not forwarding its props correctly.', 'Please make sure that props are spread on the same element that the ref is applied to.'].join('\n'));
         }
       }, [childNode]);
     }
@@ -42469,7 +42890,7 @@ See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more det
 
     {
       if (children.props.title) {
-        console.error(['Material-UI: You have provided a `title` prop to the child of <Tooltip />.', `Remove this title prop \`${children.props.title}\` or the Tooltip component.`].join('\n'));
+        console.error(['MUI: You have provided a `title` prop to the child of <Tooltip />.', `Remove this title prop \`${children.props.title}\` or the Tooltip component.`].join('\n'));
       }
     }
 
@@ -42707,7 +43128,7 @@ See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more det
 
     /**
      * Props applied to the transition element.
-     * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition) component.
+     * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition) component.
      */
     TransitionProps: propTypes.object
   } ;
@@ -44233,7 +44654,7 @@ See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more det
 
     {
       if (orientation !== 'vertical') {
-        console.error('Material-UI: <StepContent /> is only designed for use with the vertical stepper.');
+        console.error('MUI: <StepContent /> is only designed for use with the vertical stepper.');
       }
     }
 
@@ -44310,7 +44731,7 @@ See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more det
 
     /**
      * Props applied to the transition element.
-     * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition) component.
+     * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition) component.
      */
     TransitionProps: propTypes.object
   } ;
@@ -47121,7 +47542,7 @@ See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more det
       const newLastPage = Math.max(0, Math.ceil(count / rowsPerPage) - 1);
 
       if (page < 0 || page > newLastPage) {
-        return new Error('Material-UI: The page prop of a TablePagination is out of range ' + `(0 to ${newLastPage}, but page is ${page}).`);
+        return new Error('MUI: The page prop of a TablePagination is out of range ' + `(0 to ${newLastPage}, but page is ${page}).`);
       }
 
       return null;
@@ -47985,7 +48406,7 @@ See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more det
 
     {
       if (centered && scrollable) {
-        console.error('Material-UI: You can not use the `centered={true}` and `variant="scrollable"` properties ' + 'at the same time on a `Tabs` component.');
+        console.error('MUI: You can not use the `centered={true}` and `variant="scrollable"` properties ' + 'at the same time on a `Tabs` component.');
       }
     }
 
@@ -48033,7 +48454,7 @@ See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more det
 
           {
             if (!tab) {
-              console.error([`Material-UI: The \`value\` provided to the Tabs component is invalid.`, `None of the Tabs' children match with "${value}".`, valueToIndex.keys ? `You can provide one of the following values: ${Array.from(valueToIndex.keys()).join(', ')}.` : null].join('\n'));
+              console.error([`MUI: The \`value\` provided to the Tabs component is invalid.`, `None of the Tabs' children match with "${value}".`, valueToIndex.keys ? `You can provide one of the following values: ${Array.from(valueToIndex.keys()).join(', ')}.` : null].join('\n'));
             }
           }
 
@@ -48042,7 +48463,7 @@ See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more det
           {
             if (!warnedOnceTabPresent && tabMeta && tabMeta.width === 0 && tabMeta.height === 0) {
               tabsMeta = null;
-              console.error(['Material-UI: The `value` provided to the Tabs component is invalid.', `The Tab with this \`value\` ("${value}") is not part of the document layout.`, "Make sure the tab item is present in the document or that it's not `display: none`."].join('\n'));
+              console.error(['MUI: The `value` provided to the Tabs component is invalid.', `The Tab with this \`value\` ("${value}") is not part of the document layout.`, "Make sure the tab item is present in the document or that it's not `display: none`."].join('\n'));
               warnedOnceTabPresent = true;
             }
           }
@@ -48302,7 +48723,7 @@ See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more det
 
       {
         if (reactIs_2(child)) {
-          console.error(["Material-UI: The Tabs component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
+          console.error(["MUI: The Tabs component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
         }
       }
 
@@ -48676,7 +49097,7 @@ See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more det
 
     {
       if (select && !children) {
-        console.error('Material-UI: `children` must be passed when using the `TextField` component with `select`.');
+        console.error('MUI: `children` must be passed when using the `TextField` component with `select`.');
       }
     }
 
@@ -48962,7 +49383,9 @@ See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more det
     /**
      * 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).
      */
-    type: propTypes.string,
+    type: propTypes
+    /* @typescript-to-proptypes-ignore */
+    .string,
 
     /**
      * The value of the `input` element, required for a controlled component.
@@ -49367,7 +49790,7 @@ See https://material-ui.com/r/migration-v4/#material-ui-core-styles for more det
 
         {
           if (reactIs_2(child)) {
-            console.error(["Material-UI: The ToggleButtonGroup component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
+            console.error(["MUI: The ToggleButtonGroup component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
           }
         }