@mui/material 6.1.1 → 6.1.3

package/modern/Portal/Portal.js

@@ -3,7 +3,7 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
-import { exactProp, HTMLElementType, unstable_useEnhancedEffect as useEnhancedEffect, unstable_useForkRef as useForkRef, unstable_setRef as setRef, unstable_getReactNodeRef as getReactNodeRef } from '@mui/utils';
+import { exactProp, HTMLElementType, unstable_useEnhancedEffect as useEnhancedEffect, unstable_useForkRef as useForkRef, unstable_setRef as setRef, unstable_getReactElementRef as getReactElementRef } from '@mui/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 function getContainer(container) {
   return typeof container === 'function' ? container() : container;
@@ -28,7 +28,7 @@ const Portal = /*#__PURE__*/React.forwardRef(function Portal(props, forwardedRef
     disablePortal = false
   } = props;
   const [mountNode, setMountNode] = React.useState(null);
-  const handleRef = useForkRef(getReactNodeRef(children), forwardedRef);
+  const handleRef = useForkRef(/*#__PURE__*/React.isValidElement(children) ? getReactElementRef(children) : null, forwardedRef);
   useEnhancedEffect(() => {
     if (!disablePortal) {
       setMountNode(getContainer(container) || document.body);

package/modern/Rating/Rating.js

@@ -226,7 +226,12 @@ function RatingItem(props) {
   const isHovered = itemValue <= hover;
   const isFocused = itemValue <= focus;
   const isChecked = itemValue === ratingValueRounded;
-  const id = useId();
+
+  // "name" ensures unique IDs across different Rating components in React 17,
+  // preventing one component from affecting another. React 18's useId already handles this.
+  // Update to const id = useId(); when React 17 support is dropped.
+  // More details: https://github.com/mui/material-ui/issues/40997
+  const id = `${name}-${useId()}`;
   const container = /*#__PURE__*/_jsx(RatingIcon, {
     as: IconContainerComponent,
     value: itemValue,
@@ -619,7 +624,7 @@ process.env.NODE_ENV !== "production" ? Rating.propTypes /* remove-proptypes */
   /**
    * The name attribute of the radio `input` elements.
    * This input `name` should be unique within the page.
-   * Being unique within a form is insufficient since the `name` is used to generated IDs.
+   * Being unique within a form is insufficient since the `name` is used to generate IDs.
    */
   name: PropTypes.string,
   /**

package/modern/Select/Select.js

@@ -4,7 +4,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import deepmerge from '@mui/utils/deepmerge';
-import getReactNodeRef from '@mui/utils/getReactNodeRef';
+import getReactElementRef from '@mui/utils/getReactElementRef';
 import SelectInput from "./SelectInput.js";
 import formControlState from "../FormControl/formControlState.js";
 import useFormControl from "../FormControl/useFormControl.js";
@@ -92,7 +92,7 @@ const Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
       ownerState: ownerState
     })
   }[variant];
-  const inputComponentRef = useForkRef(ref, getReactNodeRef(InputComponent));
+  const inputComponentRef = useForkRef(ref, getReactElementRef(InputComponent));
   return /*#__PURE__*/_jsx(React.Fragment, {
     children: /*#__PURE__*/React.cloneElement(InputComponent, {
       // Most of the logic is implemented in `SelectInput`.

package/modern/Select/SelectInput.js

@@ -347,7 +347,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     let selected;
     if (multiple) {
       if (!Array.isArray(value)) {
-        throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The \`value\` prop must be an array when using the \`Select\` component with \`multiple\`.` : _formatMuiErrorMessage(2));
+        throw new Error(process.env.NODE_ENV !== "production" ? 'MUI: The `value` prop must be an array ' + 'when using the `Select` component with `multiple`.' : _formatMuiErrorMessage(2));
       }
       selected = value.some(v => areEqualValues(v, child.props.value));
       if (selected && computeDisplay) {

package/modern/Slide/Slide.js

@@ -6,7 +6,7 @@ import { Transition } from 'react-transition-group';
 import chainPropTypes from '@mui/utils/chainPropTypes';
 import HTMLElementType from '@mui/utils/HTMLElementType';
 import elementAcceptingRef from '@mui/utils/elementAcceptingRef';
-import getReactNodeRef from '@mui/utils/getReactNodeRef';
+import getReactElementRef from '@mui/utils/getReactElementRef';
 import debounce from "../utils/debounce.js";
 import useForkRef from "../utils/useForkRef.js";
 import { useTheme } from "../zero-styled/index.js";
@@ -106,7 +106,7 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
     ...other
   } = props;
   const childrenRef = React.useRef(null);
-  const handleRef = useForkRef(getReactNodeRef(children), childrenRef, ref);
+  const handleRef = useForkRef(getReactElementRef(children), childrenRef, ref);
   const normalizedTransitionCallback = callback => isAppearing => {
     if (callback) {
       // onEnterXxx and onExitXxx callbacks have a different arguments.length value.

package/modern/Tooltip/Tooltip.js

@@ -10,7 +10,7 @@ import { alpha } from '@mui/system/colorManipulator';
 import { useRtl } from '@mui/system/RtlProvider';
 import isFocusVisible from '@mui/utils/isFocusVisible';
 import appendOwnerState from '@mui/utils/appendOwnerState';
-import getReactNodeRef from '@mui/utils/getReactNodeRef';
+import getReactElementRef from '@mui/utils/getReactElementRef';
 import { styled, useTheme } from "../zero-styled/index.js";
 import memoTheme from "../utils/memoTheme.js";
 import { useDefaultProps } from "../DefaultPropsProvider/index.js";
@@ -514,7 +514,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
       document.removeEventListener('keydown', handleKeyDown);
     };
   }, [handleClose, open]);
-  const handleRef = useForkRef(getReactNodeRef(children), setChildNode, ref);
+  const handleRef = useForkRef(getReactElementRef(children), setChildNode, ref);
 
   // There is no point in displaying an empty tooltip.
   // So we exclude all falsy values, except 0, which is valid.

package/modern/Unstable_TrapFocus/FocusTrap.js

@@ -3,7 +3,7 @@
 /* eslint-disable consistent-return, jsx-a11y/no-noninteractive-tabindex */
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { exactProp, elementAcceptingRef, unstable_useForkRef as useForkRef, unstable_ownerDocument as ownerDocument, unstable_getReactNodeRef as getReactNodeRef } from '@mui/utils';
+import { exactProp, elementAcceptingRef, unstable_useForkRef as useForkRef, unstable_ownerDocument as ownerDocument, unstable_getReactElementRef as getReactElementRef } from '@mui/utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Inspired by https://github.com/focus-trap/tabbable
 const candidatesSelector = ['input', 'select', 'textarea', 'a[href]', 'button', '[tabindex]', 'audio[controls]', 'video[controls]', '[contenteditable]:not([contenteditable="false"])'].join(',');
@@ -14,7 +14,7 @@ function getTabIndex(node) {
   }
 
   // Browsers do not return `tabIndex` correctly for contentEditable nodes;
-  // https://bugs.chromium.org/p/chromium/issues/detail?id=661108&q=contenteditable%20tabindex&can=2
+  // https://issues.chromium.org/issues/41283952
   // so if they don't have a tabindex attribute specifically set, assume it's 0.
   // in Chrome, <details/>, <audio controls/> and <video controls/> elements get a default
   //  `tabIndex` of -1 when the 'tabindex' attribute isn't specified in the DOM,
@@ -92,7 +92,7 @@ function FocusTrap(props) {
   // It waits for the active element to move into the component to activate.
   const activated = React.useRef(false);
   const rootRef = React.useRef(null);
-  const handleRef = useForkRef(getReactNodeRef(children), rootRef);
+  const handleRef = useForkRef(getReactElementRef(children), rootRef);
   const lastKeydown = React.useRef(null);
   React.useEffect(() => {
     // We might render an empty child.

package/modern/Zoom/Zoom.js

@@ -4,7 +4,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { Transition } from 'react-transition-group';
 import elementAcceptingRef from '@mui/utils/elementAcceptingRef';
-import getReactNodeRef from '@mui/utils/getReactNodeRef';
+import getReactElementRef from '@mui/utils/getReactElementRef';
 import { useTheme } from "../zero-styled/index.js";
 import { reflow, getTransitionProps } from "../transitions/utils.js";
 import useForkRef from "../utils/useForkRef.js";
@@ -48,7 +48,7 @@ const Zoom = /*#__PURE__*/React.forwardRef(function Zoom(props, ref) {
     ...other
   } = props;
   const nodeRef = React.useRef(null);
-  const handleRef = useForkRef(nodeRef, getReactNodeRef(children), ref);
+  const handleRef = useForkRef(nodeRef, getReactElementRef(children), ref);
   const normalizedTransitionCallback = callback => maybeIsAppearing => {
     if (callback) {
       const node = nodeRef.current;

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v6.1.1
+ * @mui/material v6.1.3
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/styles/createGetSelector.js

@@ -1,5 +1,6 @@
 import excludeVariablesFromRoot from "./excludeVariablesFromRoot.js";
 export default theme => (colorScheme, css) => {
+  const root = theme.rootSelector || ':root';
   const selector = theme.colorSchemeSelector;
   let rule = selector;
   if (selector === 'class') {
@@ -21,33 +22,33 @@ export default theme => (colorScheme, css) => {
       });
       if (rule === 'media') {
         return {
-          ':root': css,
+          [root]: css,
           [`@media (prefers-color-scheme: dark)`]: {
-            ':root': excludedVariables
+            [root]: excludedVariables
           }
         };
       }
       if (rule) {
         return {
           [rule.replace('%s', colorScheme)]: excludedVariables,
-          [`:root, ${rule.replace('%s', colorScheme)}`]: css
+          [`${root}, ${rule.replace('%s', colorScheme)}`]: css
         };
       }
       return {
-        ':root': {
+        [root]: {
           ...css,
           ...excludedVariables
         }
       };
     }
     if (rule && rule !== 'media') {
-      return `:root, ${rule.replace('%s', String(colorScheme))}`;
+      return `${root}, ${rule.replace('%s', String(colorScheme))}`;
     }
   } else if (colorScheme) {
     if (rule === 'media') {
       return {
         [`@media (prefers-color-scheme: ${String(colorScheme)})`]: {
-          ':root': css
+          [root]: css
         }
       };
     }
@@ -55,5 +56,5 @@ export default theme => (colorScheme, css) => {
       return rule.replace('%s', String(colorScheme));
     }
   }
-  return ':root';
+  return root;
 };

package/modern/styles/createPalette.js

@@ -212,24 +212,10 @@ export default function createPalette(palette) {
       color.main = color[mainShade];
     }
     if (!color.hasOwnProperty('main')) {
-      throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The color${name ? ` (${name})` : ''} provided to augmentColor(color) is invalid.
-The color object needs to have a \`main\` property or a \`${mainShade}\` property.` : _formatMuiErrorMessage(11, name ? ` (${name})` : '', mainShade));
+      throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The color${name ? ` (${name})` : ''} provided to augmentColor(color) is invalid.\n` + `The color object needs to have a \`main\` property or a \`${mainShade}\` property.` : _formatMuiErrorMessage(11, name ? ` (${name})` : '', mainShade));
     }
     if (typeof color.main !== 'string') {
-      throw new Error(process.env.NODE_ENV !== "production" ? `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?
-
-import { green } from "@mui/material/colors";
-
-const theme1 = createTheme({ palette: {
-  primary: green,
-} });
-
-const theme2 = createTheme({ palette: {
-  primary: { main: green[500] },
-} });` : _formatMuiErrorMessage(12, name ? ` (${name})` : '', JSON.stringify(color.main)));
+      throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The color${name ? ` (${name})` : ''} provided to augmentColor(color) is invalid.\n` + `\`color.main\` should be a string, but \`${JSON.stringify(color.main)}\` was provided instead.\n` + '\n' + 'Did you intend to use one of the following approaches?\n' + '\n' + 'import { green } from "@mui/material/colors";\n' + '\n' + 'const theme1 = createTheme({ palette: {\n' + '  primary: green,\n' + '} });\n' + '\n' + 'const theme2 = createTheme({ palette: {\n' + '  primary: { main: green[500] },\n' + '} });' : _formatMuiErrorMessage(12, name ? ` (${name})` : '', JSON.stringify(color.main)));
     }
     addLightOrDark(color, 'light', lightShade, tonalOffset);
     addLightOrDark(color, 'dark', darkShade, tonalOffset);

package/modern/styles/createThemeNoVars.js

@@ -21,8 +21,7 @@ function createThemeNoVars(options = {}, ...args) {
     ...other
   } = options;
   if (options.vars) {
-    throw new Error(process.env.NODE_ENV !== "production" ? `MUI: \`vars\` is a private field used for CSS variables support.
-Please use another name.` : _formatMuiErrorMessage(20));
+    throw new Error(process.env.NODE_ENV !== "production" ? 'MUI: `vars` is a private field used for CSS variables support.\n' + 'Please use another name.' : _formatMuiErrorMessage(20));
   }
   const palette = createPalette(paletteInput);
   const systemTheme = systemCreateTheme(options);

package/modern/styles/createThemeWithVars.js

@@ -109,6 +109,7 @@ export default function createThemeWithVars(options = {}, ...args) {
     cssVarPrefix = 'mui',
     shouldSkipGeneratingVar = defaultShouldSkipGeneratingVar,
     colorSchemeSelector: selector = colorSchemesInput.light && colorSchemesInput.dark ? 'media' : undefined,
+    rootSelector = ':root',
     ...input
   } = options;
   const firstColorScheme = Object.keys(colorSchemesInput)[0];
@@ -146,6 +147,7 @@ export default function createThemeWithVars(options = {}, ...args) {
     ...muiTheme,
     cssVarPrefix,
     colorSchemeSelector: selector,
+    rootSelector,
     getCssVar,
     colorSchemes,
     font: {

package/modern/styles/index.js

@@ -6,7 +6,7 @@ export { unstable_createBreakpoints } from '@mui/system/createBreakpoints';
 // TODO: Remove this function in v6.
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export function experimental_sx() {
-  throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The \`experimental_sx\` has been moved to \`theme.unstable_sx\`.For more details, see https://github.com/mui/material-ui/pull/35150.` : _formatMuiErrorMessage(19));
+  throw new Error(process.env.NODE_ENV !== "production" ? 'MUI: The `experimental_sx` has been moved to `theme.unstable_sx`.' + 'For more details, see https://github.com/mui/material-ui/pull/35150.' : _formatMuiErrorMessage(19));
 }
 export { default as createTheme, createMuiTheme } from "./createTheme.js";
 export { default as unstable_createMuiStrictModeTheme } from "./createMuiStrictModeTheme.js";

package/modern/styles/makeStyles.js

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

package/modern/styles/responsiveFontSizes.js

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

package/modern/styles/shouldSkipGeneratingVar.js

@@ -1,5 +1,5 @@
 export default function shouldSkipGeneratingVar(keys) {
-  return !!keys[0].match(/(cssVarPrefix|colorSchemeSelector|typography|mixins|breakpoints|direction|transitions)/) || !!keys[0].match(/sxConfig$/) ||
+  return !!keys[0].match(/(cssVarPrefix|colorSchemeSelector|rootSelector|typography|mixins|breakpoints|direction|transitions)/) || !!keys[0].match(/sxConfig$/) ||
   // ends with sxConfig
   keys[0] === 'palette' && !!keys[1]?.match(/(mode|contrastThreshold|tonalOffset)/);
 }

package/modern/styles/withStyles.js

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

package/modern/styles/withTheme.js

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

package/modern/useAutocomplete/useAutocomplete.js

@@ -838,6 +838,7 @@ function useAutocomplete(props) {
   const handleInputMouseDown = event => {
     if (!disabledProp && (inputValue === '' || !open)) {
       handlePopupIndicator(event);
+      event.stopPropagation();
     }
   };
   let dirty = freeSolo && inputValue.length > 0;
@@ -914,7 +915,8 @@ function useAutocomplete(props) {
     getPopupIndicatorProps: () => ({
       tabIndex: -1,
       type: 'button',
-      onClick: handlePopupIndicator
+      onClick: handlePopupIndicator,
+      onMouseDown: event => event.stopPropagation()
     }),
     getTagProps: ({
       index

package/modern/utils/memoTheme.js

@@ -1,24 +1,3 @@
-// We need to pass an argument as `{ theme }` for PigmentCSS, but we don't want to
-// allocate more objects.
-const arg = {
-  theme: undefined
-};
-
-/**
- * Memoize style function on theme.
- * Intended to be used in styled() calls that only need access to the theme.
- */
-export default function memoTheme(styleFn) {
-  let lastValue;
-  let lastTheme;
-  return props => {
-    let value = lastValue;
-    if (value === undefined || props.theme !== lastTheme) {
-      arg.theme = props.theme;
-      value = styleFn(arg);
-      lastValue = value;
-      lastTheme = props.theme;
-    }
-    return value;
-  };
-}
+import { unstable_memoTheme } from '@mui/system';
+const memoTheme = unstable_memoTheme;
+export default memoTheme;

package/modern/version/index.js

@@ -1,6 +1,6 @@
-export const version = "6.1.1";
+export const version = "6.1.3";
 export const major = Number("6");
 export const minor = Number("1");
-export const patch = Number("1");
+export const patch = Number("3");
 export const prerelease = undefined;
 export default version;

package/node/Autocomplete/Autocomplete.js

@@ -722,11 +722,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
           ref: setAnchorEl,
           className: classes.inputRoot,
           startAdornment,
-          onClick: event => {
-            if (event.target === event.currentTarget) {
-              handleInputMouseDown(event);
-            }
-          },
+          onMouseDown: event => handleInputMouseDown(event),
           ...((hasClearIcon || hasPopupIcon) && {
             endAdornment: /*#__PURE__*/(0, _jsxRuntime.jsxs)(AutocompleteEndAdornment, {
               className: classes.endAdornment,

package/node/Badge/Badge.js

@@ -217,16 +217,19 @@ const BadgeBadge = (0, _zeroStyled.styled)('span', {
     }
   }]
 })));
+function getAnchorOrigin(anchorOrigin) {
+  return {
+    vertical: anchorOrigin?.vertical ?? 'top',
+    horizontal: anchorOrigin?.horizontal ?? 'right'
+  };
+}
 const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
   const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiBadge'
   });
   const {
-    anchorOrigin: anchorOriginProp = {
-      vertical: 'top',
-      horizontal: 'right'
-    },
+    anchorOrigin: anchorOriginProp,
     className,
     classes: classesProp,
     component,
@@ -256,7 +259,7 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
     showZero
   });
   const prevProps = (0, _usePreviousProps.default)({
-    anchorOrigin: anchorOriginProp,
+    anchorOrigin: getAnchorOrigin(anchorOriginProp),
     color: colorProp,
     overlap: overlapProp,
     variant: variantProp,
@@ -266,9 +269,10 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
   const {
     color = colorProp,
     overlap = overlapProp,
-    anchorOrigin = anchorOriginProp,
+    anchorOrigin: anchorOriginPropProp,
     variant = variantProp
   } = invisible ? prevProps : props;
+  const anchorOrigin = getAnchorOrigin(anchorOriginPropProp);
   const displayValue = variant !== 'dot' ? displayValueFromHook : undefined;
   const ownerState = {
     ...props,
@@ -327,8 +331,8 @@ process.env.NODE_ENV !== "production" ? Badge.propTypes /* remove-proptypes */ =
    * }
    */
   anchorOrigin: _propTypes.default.shape({
-    horizontal: _propTypes.default.oneOf(['left', 'right']).isRequired,
-    vertical: _propTypes.default.oneOf(['bottom', 'top']).isRequired
+    horizontal: _propTypes.default.oneOf(['left', 'right']),
+    vertical: _propTypes.default.oneOf(['bottom', 'top'])
   }),
   /**
    * The content rendered within the badge.

package/node/Button/Button.js

@@ -154,7 +154,7 @@ const ButtonRoot = (0, _zeroStyled.styled)(_ButtonBase.default, {
         color: `var(--variant-textColor)`,
         backgroundColor: `var(--variant-textBg)`
       }
-    }, ...Object.entries(theme.palette).filter((0, _createSimplePaletteValueFilter.default)(['dark', 'contrastText'])).map(([color]) => ({
+    }, ...Object.entries(theme.palette).filter((0, _createSimplePaletteValueFilter.default)()).map(([color]) => ({
       props: {
         color
       },
@@ -178,9 +178,8 @@ const ButtonRoot = (0, _zeroStyled.styled)(_ButtonBase.default, {
         color: 'inherit'
       },
       style: {
-        '--variant-containedColor': theme.vars ?
-        // this is safe because grey does not change between default light/dark mode
-        theme.vars.palette.text.primary : theme.palette.getContrastText?.(inheritContainedBackgroundColor),
+        color: 'inherit',
+        borderColor: 'currentColor',
         '--variant-containedBg': theme.vars ? theme.vars.palette.Button.inheritContainedBg : inheritContainedBackgroundColor,
         '@media (hover: hover)': {
           '&:hover': {

package/node/ClickAwayListener/ClickAwayListener.js

@@ -10,7 +10,7 @@ exports.ClickAwayListener = ClickAwayListener;
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("@mui/utils");
-var _getReactNodeRef = _interopRequireDefault(require("@mui/utils/getReactNodeRef"));
+var _getReactElementRef = _interopRequireDefault(require("@mui/utils/getReactElementRef"));
 var _jsxRuntime = require("react/jsx-runtime");
 // TODO: return `EventHandlerName extends `on${infer EventName}` ? Lowercase<EventName> : never` once generatePropTypes runs with TS 4.1
 function mapEventPropToEvent(eventProp) {
@@ -54,7 +54,7 @@ function ClickAwayListener(props) {
       activatedRef.current = false;
     };
   }, []);
-  const handleRef = (0, _utils.unstable_useForkRef)((0, _getReactNodeRef.default)(children), nodeRef);
+  const handleRef = (0, _utils.unstable_useForkRef)((0, _getReactElementRef.default)(children), nodeRef);
 
   // The handler doesn't take event.defaultPrevented into account:
   //

package/node/Fade/Fade.js

@@ -11,7 +11,7 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactTransitionGroup = require("react-transition-group");
 var _elementAcceptingRef = _interopRequireDefault(require("@mui/utils/elementAcceptingRef"));
-var _getReactNodeRef = _interopRequireDefault(require("@mui/utils/getReactNodeRef"));
+var _getReactElementRef = _interopRequireDefault(require("@mui/utils/getReactElementRef"));
 var _zeroStyled = require("../zero-styled");
 var _utils = require("../transitions/utils");
 var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
@@ -55,7 +55,7 @@ const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
   } = props;
   const enableStrictModeCompat = true;
   const nodeRef = React.useRef(null);
-  const handleRef = (0, _useForkRef.default)(nodeRef, (0, _getReactNodeRef.default)(children), ref);
+  const handleRef = (0, _useForkRef.default)(nodeRef, (0, _getReactElementRef.default)(children), ref);
   const normalizedTransitionCallback = callback => maybeIsAppearing => {
     if (callback) {
       const node = nodeRef.current;

package/node/Grid2/Grid2.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Grid = require("@mui/system/Grid");
+var _requirePropFactory = _interopRequireDefault(require("../utils/requirePropFactory"));
 var _styles = require("../styles");
 /**
  *
@@ -87,24 +88,29 @@ process.env.NODE_ENV !== "production" ? Grid2.propTypes /* remove-proptypes */ =
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
   /**
    * @internal
-   * The level of the grid starts from `0`
-   * and increases when the grid nests inside another grid regardless of container or item.
+   * The level of the grid starts from `0` and increases when the grid nests
+   * inside another grid. Nesting is defined as a container Grid being a direct
+   * child of a container Grid.
    *
    * ```js
-   * <Grid> // level 0
-   *   <Grid> // level 1
-   *     <Grid> // level 2
-   *   <Grid> // level 1
+   * <Grid container> // level 0
+   *   <Grid container> // level 1
+   *     <Grid container> // level 2
    * ```
    *
-   * Only consecutive grid is considered nesting.
-   * A grid container will start at `0` if there are non-Grid element above it.
+   * Only consecutive grid is considered nesting. A grid container will start at
+   * `0` if there are non-Grid container element above it.
    *
    * ```js
-   * <Grid> // level 0
+   * <Grid container> // level 0
    *   <div>
-   *     <Grid> // level 0
-   *       <Grid> // level 1
+   *     <Grid container> // level 0
+   * ```
+   *
+   * ```js
+   * <Grid container> // level 0
+   *   <Grid>
+   *     <Grid container> // level 0
    * ```
    */
   unstable_level: _propTypes.default.number,
@@ -115,4 +121,16 @@ process.env.NODE_ENV !== "production" ? Grid2.propTypes /* remove-proptypes */ =
    */
   wrap: _propTypes.default.oneOf(['nowrap', 'wrap-reverse', 'wrap'])
 } : void 0;
+if (process.env.NODE_ENV !== 'production') {
+  const Component = Grid2;
+  const requireProp = (0, _requirePropFactory.default)('Grid2', Component);
+  // eslint-disable-next-line no-useless-concat
+  Component['propTypes' + ''] = {
+    // eslint-disable-next-line react/forbid-foreign-prop-types
+    ...Component.propTypes,
+    direction: requireProp('container'),
+    spacing: requireProp('container'),
+    wrap: requireProp('container')
+  };
+}
 var _default = exports.default = Grid2;

package/node/Grow/Grow.js

@@ -11,7 +11,7 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useTimeout = _interopRequireDefault(require("@mui/utils/useTimeout"));
 var _elementAcceptingRef = _interopRequireDefault(require("@mui/utils/elementAcceptingRef"));
-var _getReactNodeRef = _interopRequireDefault(require("@mui/utils/getReactNodeRef"));
+var _getReactElementRef = _interopRequireDefault(require("@mui/utils/getReactElementRef"));
 var _reactTransitionGroup = require("react-transition-group");
 var _zeroStyled = require("../zero-styled");
 var _utils = require("../transitions/utils");
@@ -65,7 +65,7 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
   const autoTimeout = React.useRef();
   const theme = (0, _zeroStyled.useTheme)();
   const nodeRef = React.useRef(null);
-  const handleRef = (0, _useForkRef.default)(nodeRef, (0, _getReactNodeRef.default)(children), ref);
+  const handleRef = (0, _useForkRef.default)(nodeRef, (0, _getReactElementRef.default)(children), ref);
   const normalizedTransitionCallback = callback => maybeIsAppearing => {
     if (callback) {
       const node = nodeRef.current;

package/node/Icon/Icon.js

@@ -44,7 +44,7 @@ const IconRoot = (0, _zeroStyled.styled)('span', {
   userSelect: 'none',
   width: '1em',
   height: '1em',
-  // Chrome fix for https://bugs.chromium.org/p/chromium/issues/detail?id=820541
+  // Chrome fix for https://issues.chromium.org/issues/41375697
   // To remove at some point.
   overflow: 'hidden',
   display: 'inline-block',

package/node/InputBase/InputBase.js

@@ -381,7 +381,7 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
     if (!isControlled) {
       const element = event.target || inputRef.current;
       if (element == null) {
-        throw new Error(process.env.NODE_ENV !== "production" ? `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.` : (0, _formatMuiErrorMessage2.default)(1));
+        throw new Error(process.env.NODE_ENV !== "production" ? '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.' : (0, _formatMuiErrorMessage2.default)(1));
       }
       checkDirty({
         value: element.value