@mui/material 5.10.1 → 5.10.4

package/umd/material-ui.development.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.10.1
+/** @license MUI v5.10.4
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -423,7 +423,7 @@
     function(){ return (new Date()).getTime() };
 
   function _extends() {
-    _extends = Object.assign || function (target) {
+    _extends = Object.assign ? Object.assign.bind() : function (target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i];
 
@@ -436,7 +436,6 @@
 
       return target;
     };
-
     return _extends.apply(this, arguments);
   }
 
@@ -465,7 +464,7 @@
 
   var _extends_1 = createCommonjsModule(function (module) {
   function _extends() {
-    module.exports = _extends = Object.assign || function (target) {
+    module.exports = _extends = Object.assign ? Object.assign.bind() : function (target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i];
 
@@ -676,11 +675,6 @@
     };
   };
 
-  var last = function last(arr) {
-    return arr.length ? arr[arr.length - 1] : null;
-  }; // based on https://github.com/thysultan/stylis.js/blob/e6843c373ebcbbfade25ebcc23f540ed8508da0a/src/Tokenizer.js#L239-L244
-
-
   var identifierWithPointTracking = function identifierWithPointTracking(begin, points, index) {
     var previous = 0;
     var character = 0;
@@ -808,19 +802,64 @@
   var ignoreFlag = 'emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason';
 
   var isIgnoringComment = function isIgnoringComment(element) {
-    return !!element && element.type === 'comm' && element.children.indexOf(ignoreFlag) > -1;
+    return element.type === 'comm' && element.children.indexOf(ignoreFlag) > -1;
   };
 
   var createUnsafeSelectorsAlarm = function createUnsafeSelectorsAlarm(cache) {
     return function (element, index, children) {
-      if (element.type !== 'rule') return;
+      if (element.type !== 'rule' || cache.compat) return;
       var unsafePseudoClasses = element.value.match(/(:first|:nth|:nth-last)-child/g);
 
-      if (unsafePseudoClasses && cache.compat !== true) {
-        var prevElement = index > 0 ? children[index - 1] : null;
+      if (unsafePseudoClasses) {
+        var isNested = element.parent === children[0]; // in nested rules comments become children of the "auto-inserted" rule
+        //
+        // considering this input:
+        // .a {
+        //   .b /* comm */ {}
+        //   color: hotpink;
+        // }
+        // we get output corresponding to this:
+        // .a {
+        //   & {
+        //     /* comm */
+        //     color: hotpink;
+        //   }
+        //   .b {}
+        // }
+
+        var commentContainer = isNested ? children[0].children : // global rule at the root level
+        children;
+
+        for (var i = commentContainer.length - 1; i >= 0; i--) {
+          var node = commentContainer[i];
+
+          if (node.line < element.line) {
+            break;
+          } // it is quite weird but comments are *usually* put at `column: element.column - 1`
+          // so we seek *from the end* for the node that is earlier than the rule's `element` and check that
+          // this will also match inputs like this:
+          // .a {
+          //   /* comm */
+          //   .b {}
+          // }
+          //
+          // but that is fine
+          //
+          // it would be the easiest to change the placement of the comment to be the first child of the rule:
+          // .a {
+          //   .b { /* comm */ }
+          // }
+          // with such inputs we wouldn't have to search for the comment at all
+          // TODO: consider changing this comment placement in the next major version
+
+
+          if (node.column < element.column) {
+            if (isIgnoringComment(node)) {
+              return;
+            }
 
-        if (prevElement && isIgnoringComment(last(prevElement.children))) {
-          return;
+            break;
+          }
         }
 
         unsafePseudoClasses.forEach(function (unsafePseudoClass) {
@@ -1952,13 +1991,49 @@
 
   var pkg = {
   	name: "@emotion/react",
-  	version: "11.9.3",
+  	version: "11.10.0",
   	main: "dist/emotion-react.cjs.js",
   	module: "dist/emotion-react.esm.js",
   	browser: {
-  		"./dist/emotion-react.cjs.js": "./dist/emotion-react.browser.cjs.js",
   		"./dist/emotion-react.esm.js": "./dist/emotion-react.browser.esm.js"
   	},
+  	exports: {
+  		".": {
+  			module: {
+  				worker: "./dist/emotion-react.worker.esm.js",
+  				browser: "./dist/emotion-react.browser.esm.js",
+  				"default": "./dist/emotion-react.esm.js"
+  			},
+  			"default": "./dist/emotion-react.cjs.js"
+  		},
+  		"./jsx-runtime": {
+  			module: {
+  				worker: "./jsx-runtime/dist/emotion-react-jsx-runtime.worker.esm.js",
+  				browser: "./jsx-runtime/dist/emotion-react-jsx-runtime.browser.esm.js",
+  				"default": "./jsx-runtime/dist/emotion-react-jsx-runtime.esm.js"
+  			},
+  			"default": "./jsx-runtime/dist/emotion-react-jsx-runtime.cjs.js"
+  		},
+  		"./_isolated-hnrs": {
+  			module: {
+  				worker: "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.worker.esm.js",
+  				browser: "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.browser.esm.js",
+  				"default": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.esm.js"
+  			},
+  			"default": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.cjs.js"
+  		},
+  		"./jsx-dev-runtime": {
+  			module: {
+  				worker: "./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.worker.esm.js",
+  				browser: "./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.browser.esm.js",
+  				"default": "./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.esm.js"
+  			},
+  			"default": "./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.cjs.js"
+  		},
+  		"./package.json": "./package.json",
+  		"./types/css-prop": "./types/css-prop.d.ts",
+  		"./macro": "./macro.js"
+  	},
   	types: "types/index.d.ts",
   	files: [
   		"src",
@@ -1978,12 +2053,12 @@
   		"test:typescript": "dtslint types"
   	},
   	dependencies: {
-  		"@babel/runtime": "^7.13.10",
-  		"@emotion/babel-plugin": "^11.7.1",
-  		"@emotion/cache": "^11.9.3",
-  		"@emotion/serialize": "^1.0.4",
-  		"@emotion/utils": "^1.1.0",
-  		"@emotion/weak-memoize": "^0.2.5",
+  		"@babel/runtime": "^7.18.3",
+  		"@emotion/babel-plugin": "^11.10.0",
+  		"@emotion/cache": "^11.10.0",
+  		"@emotion/serialize": "^1.1.0",
+  		"@emotion/utils": "^1.2.0",
+  		"@emotion/weak-memoize": "^0.3.0",
   		"hoist-non-react-statics": "^3.3.1"
   	},
   	peerDependencies: {
@@ -1999,12 +2074,12 @@
   		}
   	},
   	devDependencies: {
-  		"@babel/core": "^7.13.10",
+  		"@babel/core": "^7.18.5",
   		"@definitelytyped/dtslint": "0.0.112",
-  		"@emotion/css": "11.9.0",
-  		"@emotion/css-prettifier": "1.0.1",
-  		"@emotion/server": "11.4.0",
-  		"@emotion/styled": "11.9.3",
+  		"@emotion/css": "11.10.0",
+  		"@emotion/css-prettifier": "1.1.0",
+  		"@emotion/server": "11.10.0",
+  		"@emotion/styled": "11.10.0",
   		"html-tag-names": "^1.1.2",
   		react: "16.14.0",
   		"svg-tag-names": "^1.1.1",
@@ -2022,7 +2097,17 @@
   			"./jsx-dev-runtime.js",
   			"./_isolated-hnrs.js"
   		],
-  		umdName: "emotionReact"
+  		umdName: "emotionReact",
+  		exports: {
+  			envConditions: [
+  				"browser",
+  				"worker"
+  			],
+  			extra: {
+  				"./types/css-prop": "./types/css-prop.d.ts",
+  				"./macro": "./macro.js"
+  			}
+  		}
   	}
   };
 
@@ -7782,7 +7867,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     });
   }
 
-  function resolveValue(key, defaultValue) {
+  function initializeValue(key, defaultValue) {
     if (typeof window === 'undefined') {
       return undefined;
     }
@@ -7791,6 +7876,11 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
 
     try {
       value = localStorage.getItem(key) || undefined;
+
+      if (!value) {
+        // the first time that user enters the site.
+        localStorage.setItem(key, defaultValue);
+      }
     } catch (e) {// Unsupported
     }
 
@@ -7809,25 +7899,29 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     } = options;
     const joinedColorSchemes = supportedColorSchemes.join(',');
     const [state, setState] = React__namespace.useState(() => {
-      const initialMode = resolveValue(modeStorageKey, defaultMode);
+      const initialMode = initializeValue(modeStorageKey, defaultMode);
+      const lightColorScheme = initializeValue(`${colorSchemeStorageKey}-light`, defaultLightColorScheme);
+      const darkColorScheme = initializeValue(`${colorSchemeStorageKey}-dark`, defaultDarkColorScheme);
       return {
         mode: initialMode,
         systemMode: getSystemMode(initialMode),
-        lightColorScheme: resolveValue(`${colorSchemeStorageKey}-light`) || defaultLightColorScheme,
-        darkColorScheme: resolveValue(`${colorSchemeStorageKey}-dark`) || defaultDarkColorScheme
+        lightColorScheme,
+        darkColorScheme
       };
     });
     const colorScheme = getColorScheme(state);
     const setMode = React__namespace.useCallback(mode => {
       setState(currentState => {
-        const newMode = !mode ? defaultMode : mode;
-
         if (mode === currentState.mode) {
+          // do nothing if mode does not change
           return currentState;
         }
 
-        if (typeof localStorage !== 'undefined') {
+        const newMode = !mode ? defaultMode : mode;
+
+        try {
           localStorage.setItem(modeStorageKey, newMode);
+        } catch (e) {// Unsupported
         }
 
         return _extends({}, currentState, {
@@ -7837,22 +7931,31 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       });
     }, [modeStorageKey, defaultMode]);
     const setColorScheme = React__namespace.useCallback(value => {
-      if (!value || typeof value === 'string') {
+      if (!value) {
+        setState(currentState => {
+          try {
+            localStorage.setItem(`${colorSchemeStorageKey}-light`, defaultLightColorScheme);
+            localStorage.setItem(`${colorSchemeStorageKey}-dark`, defaultDarkColorScheme);
+          } catch (e) {// Unsupported
+          }
+
+          return _extends({}, currentState, {
+            lightColorScheme: defaultLightColorScheme,
+            darkColorScheme: defaultDarkColorScheme
+          });
+        });
+      } else if (typeof value === 'string') {
         if (value && !joinedColorSchemes.includes(value)) {
           console.error(`\`${value}\` does not exist in \`theme.colorSchemes\`.`);
         } else {
           setState(currentState => {
             const newState = _extends({}, currentState);
 
-            if (!value) {
-              // reset to default color scheme
-              newState.lightColorScheme = defaultLightColorScheme;
-              newState.darkColorScheme = defaultDarkColorScheme;
-              return newState;
-            }
-
             processState(currentState, mode => {
-              localStorage.setItem(`${colorSchemeStorageKey}-${mode}`, value);
+              try {
+                localStorage.setItem(`${colorSchemeStorageKey}-${mode}`, value);
+              } catch (e) {// Unsupported
+              }
 
               if (mode === 'light') {
                 newState.lightColorScheme = value;
@@ -7865,30 +7968,41 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
             return newState;
           });
         }
-      } else if (value.light && !joinedColorSchemes.includes(value.light) || value.dark && !joinedColorSchemes.includes(value.dark)) {
-        console.error(`\`${value}\` does not exist in \`theme.colorSchemes\`.`);
       } else {
         setState(currentState => {
           const newState = _extends({}, currentState);
 
-          if (value.light || value.light === null) {
-            newState.lightColorScheme = value.light === null ? defaultLightColorScheme : value.light;
+          const newLightColorScheme = value.light === null ? defaultLightColorScheme : value.light;
+          const newDarkColorScheme = value.dark === null ? defaultDarkColorScheme : value.dark;
+
+          if (newLightColorScheme) {
+            if (!joinedColorSchemes.includes(newLightColorScheme)) {
+              console.error(`\`${newLightColorScheme}\` does not exist in \`theme.colorSchemes\`.`);
+            } else {
+              newState.lightColorScheme = newLightColorScheme;
+
+              try {
+                localStorage.setItem(`${colorSchemeStorageKey}-light`, newLightColorScheme);
+              } catch (error) {// Unsupported
+              }
+            }
           }
 
-          if (value.dark || value.dark === null) {
-            newState.darkColorScheme = value.dark === null ? defaultDarkColorScheme : value.dark;
+          if (newDarkColorScheme) {
+            if (!joinedColorSchemes.includes(newDarkColorScheme)) {
+              console.error(`\`${newDarkColorScheme}\` does not exist in \`theme.colorSchemes\`.`);
+            } else {
+              newState.darkColorScheme = newDarkColorScheme;
+
+              try {
+                localStorage.setItem(`${colorSchemeStorageKey}-dark`, newDarkColorScheme);
+              } catch (error) {// Unsupported
+              }
+            }
           }
 
           return newState;
         });
-
-        if (value.light) {
-          localStorage.setItem(`${colorSchemeStorageKey}-light`, value.light);
-        }
-
-        if (value.dark) {
-          localStorage.setItem(`${colorSchemeStorageKey}-dark`, value.dark);
-        }
       }
     }, [joinedColorSchemes, colorSchemeStorageKey, defaultLightColorScheme, defaultDarkColorScheme]);
     const handleMediaQuery = React__namespace.useCallback(e => {
@@ -7910,23 +8024,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       media.addListener(handler);
       handler(media);
       return () => media.removeListener(handler);
-    }, []); // Save mode, lightColorScheme & darkColorScheme to localStorage
-
-    React__namespace.useEffect(() => {
-      if (state.mode) {
-        localStorage.setItem(modeStorageKey, state.mode);
-      }
-
-      processState(state, mode => {
-        if (mode === 'light') {
-          localStorage.setItem(`${colorSchemeStorageKey}-light`, state.lightColorScheme);
-        }
-
-        if (mode === 'dark') {
-          localStorage.setItem(`${colorSchemeStorageKey}-dark`, state.darkColorScheme);
-        }
-      });
-    }, [state, colorSchemeStorageKey, modeStorageKey]); // Handle when localStorage has changed
+    }, []); // Handle when localStorage has changed
 
     React__namespace.useEffect(() => {
       const handleStorage = event => {
@@ -10204,7 +10302,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
    *
    * Demos:
    *
-   * - [Badge](https://mui.com/base/react-badge/)
+   * - [Unstyled badge](https://mui.com/base/react-badge/)
    *
    * API:
    *
@@ -10341,7 +10439,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
    *
    * Demos:
    *
-   * - [Click away listener](https://mui.com/base/react-click-away-listener/)
+   * - [Click-away listener](https://mui.com/base/react-click-away-listener/)
    *
    * API:
    *
@@ -12529,7 +12627,9 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       return children;
     }
 
-    return mountNode ? /*#__PURE__*/ReactDOM__namespace.createPortal(children, mountNode) : mountNode;
+    return /*#__PURE__*/jsxRuntime_1(React__namespace.Fragment, {
+      children: mountNode ? /*#__PURE__*/ReactDOM__namespace.createPortal(children, mountNode) : mountNode
+    });
   });
   Portal.propTypes
   /* remove-proptypes */
@@ -17111,11 +17211,10 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   };
 
   function _setPrototypeOf(o, p) {
-    _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+    _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
       o.__proto__ = p;
       return o;
     };
-
     return _setPrototypeOf(o, p);
   }
 
@@ -20205,7 +20304,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     })
   }, !ownerState.disableRipple && {
     '&:hover': {
-      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.active} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.action.active, theme.palette.action.hoverOpacity),
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.action.active, theme.palette.action.hoverOpacity),
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
         backgroundColor: 'transparent'
@@ -21153,7 +21252,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
    * Demos:
    *
    * - [Autocomplete](https://mui.com/material-ui/react-autocomplete/)
-   * - [Menus](https://mui.com/material-ui/react-menu/)
+   * - [Menu](https://mui.com/material-ui/react-menu/)
    * - [Popper](https://mui.com/material-ui/react-popper/)
    *
    * API:
@@ -22958,7 +23057,11 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       }
     },
     [`& .${outlinedInputClasses$1.root}.${inputBaseClasses$1.sizeSmall}`]: {
-      padding: 6,
+      // Don't specify paddingRight, as it overrides the default value set when there is only
+      // one of the popup or clear icon as the specificity is equal so the latter one wins
+      paddingTop: 6,
+      paddingBottom: 6,
+      paddingLeft: 6,
       [`& .${autocompleteClasses$1.input}`]: {
         padding: '2.5px 4px 2.5px 6px'
       }
@@ -23371,7 +23474,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
             readOnly
           }, getInputProps())
         })
-      })), popupOpen && anchorEl ? /*#__PURE__*/jsxRuntime_1(AutocompletePopper, _extends({
+      })), anchorEl ? /*#__PURE__*/jsxRuntime_1(AutocompletePopper, _extends({
         as: PopperComponent,
         disablePortal: disablePortal,
         style: {
@@ -23380,7 +23483,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         ownerState: ownerState,
         role: "presentation",
         anchorEl: anchorEl,
-        open: true
+        open: popupOpen
       }, componentsProps.popper, {
         className: clsx(classes.popper, (_componentsProps$popp = componentsProps.popper) == null ? void 0 : _componentsProps$popp.className),
         children: /*#__PURE__*/jsxRuntime_2(AutocompletePaper, _extends({
@@ -24169,7 +24272,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const avatarGroupClasses = generateUtilityClasses('MuiAvatarGroup', ['root', 'avatar']);
   var avatarGroupClasses$1 = avatarGroupClasses;
 
-  const _excluded$1L = ["children", "className", "componentsProps", "max", "spacing", "total", "variant"];
+  const _excluded$1L = ["children", "className", "component", "componentsProps", "max", "spacing", "total", "variant"];
   const SPACINGS$2 = {
     small: -16,
     medium: null
@@ -24231,6 +24334,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const {
       children: childrenProp,
       className,
+      component = 'div',
       componentsProps = {},
       max = 5,
       spacing = 'medium',
@@ -24244,6 +24348,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const ownerState = _extends({}, props, {
       max,
       spacing,
+      component,
       variant
     });
 
@@ -24268,6 +24373,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const extraAvatars = Math.max(totalAvatars - clampedMax, totalAvatars - maxAvatars, 0);
     const marginLeft = spacing && SPACINGS$2[spacing] !== undefined ? SPACINGS$2[spacing] : -spacing;
     return /*#__PURE__*/jsxRuntime_2(AvatarGroupRoot, _extends({
+      as: component,
       ownerState: ownerState,
       className: clsx(classes.root, className),
       ref: ref
@@ -24317,6 +24423,12 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      */
     className: PropTypes.string,
 
+    /**
+     * The component used for the root node.
+     * Either a string to use a HTML element or a component.
+     */
+    component: PropTypes.elementType,
+
     /**
      * The props used for each slot inside the AvatarGroup.
      * @default {}
@@ -33101,10 +33213,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   var withWidth$1 = withWidth;
 
-  /**
-   * @ignore - internal component.
-   */
-
   function HiddenJs(props) {
     const {
       children,
@@ -33148,7 +33256,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       return null;
     }
 
-    return children;
+    return /*#__PURE__*/jsxRuntime_1(React__namespace.Fragment, {
+      children: children
+    });
   }
 
   HiddenJs.propTypes = {
@@ -33157,48 +33267,28 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      */
     children: PropTypes.node,
 
-    /**
-     * @ignore
-     */
-    className: PropTypes.string,
-
-    /**
-     * Specify which implementation to use.  'js' is the default, 'css' works better for
-     * server-side rendering.
-     */
-    implementation: PropTypes.oneOf(['js', 'css']),
-
-    /**
-     * You can use this prop when choosing the `js` implementation with server-side rendering.
-     *
-     * As `window.innerWidth` is unavailable on the server,
-     * we default to rendering an empty component during the first mount.
-     * You might want to use a heuristic to approximate
-     * the screen width of the client browser screen width.
-     *
-     * For instance, you could be using the user-agent or the client-hints.
-     * https://caniuse.com/#search=client%20hint
-     */
-    initialWidth: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
-
     /**
      * If `true`, screens this size and down are hidden.
      */
+    // eslint-disable-next-line react/no-unused-prop-types
     lgDown: PropTypes.bool,
 
     /**
      * If `true`, screens this size and up are hidden.
      */
+    // eslint-disable-next-line react/no-unused-prop-types
     lgUp: PropTypes.bool,
 
     /**
      * If `true`, screens this size and down are hidden.
      */
+    // eslint-disable-next-line react/no-unused-prop-types
     mdDown: PropTypes.bool,
 
     /**
      * If `true`, screens this size and up are hidden.
      */
+    // eslint-disable-next-line react/no-unused-prop-types
     mdUp: PropTypes.bool,
 
     /**
@@ -33209,11 +33299,13 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * If `true`, screens this size and down are hidden.
      */
+    // eslint-disable-next-line react/no-unused-prop-types
     smDown: PropTypes.bool,
 
     /**
      * If `true`, screens this size and up are hidden.
      */
+    // eslint-disable-next-line react/no-unused-prop-types
     smUp: PropTypes.bool,
 
     /**
@@ -33225,26 +33317,30 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * If `true`, screens this size and down are hidden.
      */
+    // eslint-disable-next-line react/no-unused-prop-types
     xlDown: PropTypes.bool,
 
     /**
      * If `true`, screens this size and up are hidden.
      */
+    // eslint-disable-next-line react/no-unused-prop-types
     xlUp: PropTypes.bool,
 
     /**
      * If `true`, screens this size and down are hidden.
      */
+    // eslint-disable-next-line react/no-unused-prop-types
     xsDown: PropTypes.bool,
 
     /**
      * If `true`, screens this size and up are hidden.
      */
+    // eslint-disable-next-line react/no-unused-prop-types
     xsUp: PropTypes.bool
-  };
+  } ;
 
   {
-    HiddenJs.propTypes = exactProp(HiddenJs.propTypes);
+    HiddenJs.propTypes = exactProp(HiddenJs.propTypes) ;
   }
 
   var HiddenJs$1 = withWidth$1()(HiddenJs);
@@ -38820,21 +38916,23 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
     const otherClasses = _objectWithoutPropertiesLoose(classesProp, _excluded2$4);
 
-    return /*#__PURE__*/React__namespace.cloneElement(input, _extends({
-      // Most of the logic is implemented in `NativeSelectInput`.
-      // The `Select` component is a simple API wrapper to expose something better to play with.
-      inputComponent: NativeSelectInput$1,
-      inputProps: _extends({
-        children,
-        classes: otherClasses,
-        IconComponent,
-        variant: fcs.variant,
-        type: undefined
-      }, inputProps, input ? input.props.inputProps : {}),
-      ref
-    }, other, {
-      className: clsx(classes.root, input.props.className, className)
-    }));
+    return /*#__PURE__*/jsxRuntime_1(React__namespace.Fragment, {
+      children: /*#__PURE__*/React__namespace.cloneElement(input, _extends({
+        // Most of the logic is implemented in `NativeSelectInput`.
+        // The `Select` component is a simple API wrapper to expose something better to play with.
+        inputComponent: NativeSelectInput$1,
+        inputProps: _extends({
+          children,
+          classes: otherClasses,
+          IconComponent,
+          variant: fcs.variant,
+          type: undefined
+        }, inputProps, input ? input.props.inputProps : {}),
+        ref
+      }, other, {
+        className: clsx(classes.root, input.props.className, className)
+      }))
+    });
   });
   NativeSelect.propTypes
   /* remove-proptypes */
@@ -42194,42 +42292,45 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
     const classes = useUtilityClasses$v(ownerState);
     const inputComponentRef = useForkRef(ref, InputComponent.ref);
-    return /*#__PURE__*/React__namespace.cloneElement(InputComponent, _extends({
-      // Most of the logic is implemented in `SelectInput`.
-      // The `Select` component is a simple API wrapper to expose something better to play with.
-      inputComponent,
-      inputProps: _extends({
-        children,
-        IconComponent,
-        variant,
-        type: undefined,
-        // We render a select. We can ignore the type provided by the `Input`.
-        multiple
-      }, native ? {
-        id
-      } : {
-        autoWidth,
-        defaultOpen,
-        displayEmpty,
-        labelId,
-        MenuProps,
-        onClose,
-        onOpen,
-        open,
-        renderValue,
-        SelectDisplayProps: _extends({
+    return /*#__PURE__*/jsxRuntime_1(React__namespace.Fragment, {
+      children: /*#__PURE__*/React__namespace.cloneElement(InputComponent, _extends({
+        // Most of the logic is implemented in `SelectInput`.
+        // The `Select` component is a simple API wrapper to expose something better to play with.
+        inputComponent,
+        inputProps: _extends({
+          children,
+          IconComponent,
+          variant,
+          type: undefined,
+          // We render a select. We can ignore the type provided by the `Input`.
+          multiple
+        }, native ? {
           id
-        }, SelectDisplayProps)
-      }, inputProps, {
-        classes: inputProps ? deepmerge(classes, inputProps.classes) : classes
-      }, input ? input.props.inputProps : {})
-    }, multiple && native && variant === 'outlined' ? {
-      notched: true
-    } : {}, {
-      ref: inputComponentRef,
-      className: clsx(InputComponent.props.className, className),
-      variant
-    }, other));
+        } : {
+          autoWidth,
+          defaultOpen,
+          displayEmpty,
+          labelId,
+          MenuProps,
+          onClose,
+          onOpen,
+          open,
+          renderValue,
+          SelectDisplayProps: _extends({
+            id
+          }, SelectDisplayProps)
+        }, inputProps, {
+          classes: inputProps ? deepmerge(classes, inputProps.classes) : classes
+        }, input ? input.props.inputProps : {})
+      }, multiple && native && variant === 'outlined' ? {
+        notched: true
+      } : {}, {
+        ref: inputComponentRef,
+        className: clsx(InputComponent.props.className, className)
+      }, !input && {
+        variant
+      }, other))
+    });
   });
   Select.propTypes
   /* remove-proptypes */
@@ -46176,7 +46277,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const stepClasses = generateUtilityClasses('MuiStep', ['root', 'horizontal', 'vertical', 'alternativeLabel', 'completed']);
   var stepClasses$1 = stepClasses;
 
-  const _excluded$s = ["active", "children", "className", "completed", "disabled", "expanded", "index", "last"];
+  const _excluded$s = ["active", "children", "className", "component", "completed", "disabled", "expanded", "index", "last"];
 
   const useUtilityClasses$n = ownerState => {
     const {
@@ -46219,6 +46320,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       active: activeProp,
       children,
       className,
+      component = 'div',
       completed: completedProp,
       disabled: disabledProp,
       expanded = false,
@@ -46260,12 +46362,14 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       alternativeLabel,
       completed,
       disabled,
-      expanded
+      expanded,
+      component
     });
 
     const classes = useUtilityClasses$n(ownerState);
 
     const newChildren = /*#__PURE__*/jsxRuntime_2(StepRoot, _extends({
+      as: component,
       className: clsx(classes.root, className),
       ref: ref,
       ownerState: ownerState
@@ -46313,6 +46417,12 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      */
     completed: PropTypes.bool,
 
+    /**
+     * The component used for the root node.
+     * Either a string to use a HTML element or a component.
+     */
+    component: PropTypes.elementType,
+
     /**
      * If `true`, the step is disabled, will also disable the button if
      * `StepButton` is a child of `Step`. Is passed to child components.
@@ -47200,7 +47310,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const stepperClasses = generateUtilityClasses('MuiStepper', ['root', 'horizontal', 'vertical', 'alternativeLabel']);
   var stepperClasses$1 = stepperClasses;
 
-  const _excluded$m = ["activeStep", "alternativeLabel", "children", "className", "connector", "nonLinear", "orientation"];
+  const _excluded$m = ["activeStep", "alternativeLabel", "children", "className", "component", "connector", "nonLinear", "orientation"];
 
   const useUtilityClasses$h = ownerState => {
     const {
@@ -47249,6 +47359,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       alternativeLabel = false,
       children,
       className,
+      component = 'div',
       connector = defaultConnector,
       nonLinear = false,
       orientation = 'horizontal'
@@ -47257,7 +47368,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
     const ownerState = _extends({}, props, {
       alternativeLabel,
-      orientation
+      orientation,
+      component
     });
 
     const classes = useUtilityClasses$h(ownerState);
@@ -47278,6 +47390,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     return /*#__PURE__*/jsxRuntime_1(StepperContext$1.Provider, {
       value: contextValue,
       children: /*#__PURE__*/jsxRuntime_1(StepperRoot, _extends({
+        as: component,
         ownerState: ownerState,
         className: clsx(classes.root, className),
         ref: ref
@@ -47323,6 +47436,12 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      */
     className: PropTypes.string,
 
+    /**
+     * The component used for the root node.
+     * Either a string to use a HTML element or a component.
+     */
+    component: PropTypes.elementType,
+
     /**
      * An element to be placed between each step.
      * @default <StepConnector />
@@ -49871,8 +49990,10 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
           id: labelId,
           children: labelRowsPerPage
         }), rowsPerPageOptions.length > 1 && /*#__PURE__*/jsxRuntime_1(TablePaginationSelect, _extends({
-          variant: "standard",
-          input: _InputBase || (_InputBase = /*#__PURE__*/jsxRuntime_1(InputBase$1, {})),
+          variant: "standard"
+        }, !SelectProps.variant && {
+          input: _InputBase || (_InputBase = /*#__PURE__*/jsxRuntime_1(InputBase$1, {}))
+        }, {
           value: rowsPerPage,
           onChange: onRowsPerPageChange,
           id: selectId,
@@ -52144,7 +52265,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * The value to associate with the button when selected in a
      * ToggleButtonGroup.
      */
-    value: PropTypes.any.isRequired
+    value: PropTypes
+    /* @typescript-to-proptypes-ignore */
+    .any.isRequired
   } ;
   var ToggleButton$1 = ToggleButton;