@mui/material 6.1.10 → 6.2.1

package/Autocomplete/Autocomplete.js

@@ -251,12 +251,12 @@ const AutocompleteClearIndicator = styled(IconButton, {
 const AutocompletePopupIndicator = styled(IconButton, {
   name: 'MuiAutocomplete',
   slot: 'PopupIndicator',
-  overridesResolver: ({
-    ownerState
-  }, styles) => ({
-    ...styles.popupIndicator,
-    ...(ownerState.popupOpen && styles.popupIndicatorOpen)
-  })
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.popupIndicator, ownerState.popupOpen && styles.popupIndicatorOpen];
+  }
 })({
   padding: 2,
   marginRight: -2,

package/AvatarGroup/AvatarGroup.js

@@ -30,10 +30,11 @@ const useUtilityClasses = ownerState => {
 const AvatarGroupRoot = styled('div', {
   name: 'MuiAvatarGroup',
   slot: 'Root',
-  overridesResolver: (props, styles) => ({
-    [`& .${avatarGroupClasses.avatar}`]: styles.avatar,
-    ...styles.root
-  })
+  overridesResolver: (props, styles) => {
+    return [{
+      [`& .${avatarGroupClasses.avatar}`]: styles.avatar
+    }, styles.root];
+  }
 })(memoTheme(({
   theme
 }) => ({

package/Box/Box.d.ts

@@ -18,6 +18,8 @@ declare const Box: OverridableComponent<BoxTypeMap<{}, 'div', MaterialTheme>>;
 export type BoxProps<
   RootComponent extends React.ElementType = BoxTypeMap['defaultComponent'],
   AdditionalProps = {},
-> = OverrideProps<BoxTypeMap<AdditionalProps, RootComponent, MaterialTheme>, RootComponent>;
+> = OverrideProps<BoxTypeMap<AdditionalProps, RootComponent, MaterialTheme>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default Box;

package/CHANGELOG.md

@@ -1,12 +1,82 @@
 # [Versions](https://mui.com/versions/)
 
+## 6.2.1
+
+<!-- generated comparing v6.2.0..master -->
+
+_Dec 17, 2024_
+
+A big thanks to the 10 contributors who made this release possible.
+
+### `@mui/material@6.2.1`
+
+- Update `overridesResolver` return from object to array of styles (#44752) @siddhantantil39
+- [Pagination] Use correct `aria-current` value (#44753) @jacklaurencegaray
+- [Select] Set `aria-required` & `aria-invalid` on `combobox` instead of hidden input (#44731) @ben-pomelo
+
+### `@mui/system@6.2.1`
+
+- Warns if the hex color contains trailing space (#44538) @siriwatknp
+
+### Docs
+
+- [material-ui][Dialog] Fix crashing of DraggableDialog demo (#44747) @sai6855
+- [material-ui][TextField] Update `react-number-format` demo to use the recommended prop (#44743) @siriwatknp
+- [material-ui][TextField] Add size default prop to api docs (#44714) @sai6855
+- [material-ui][TextField] Add suffix shrink demo (#44744) @siriwatknp
+
+### Core
+
+- [api-docs-builder] Preserve multiline prop descriptions with `rawDescriptions` option (#44737) @vladmoroz
+- Fix running mocha related scripts on Windows locally (#44664) @ChristopherJamesL
+- Update `eslint-plugin-jsx-a11y` (#44701) @ZeeshanTamboli
+- Add documentation to `useThemeProps`, `deepmerge` and `composeClasses` functions (#44703) @JCQuintas
+- [examples] Add Theme Mode Switch to Next.js TS example (#43576) @TurtIeSocks
+
+All contributors of this release in alphabetical order: @ben-pomelo, @ChristopherJamesL, @jacklaurencegaray, @JCQuintas, @sai6855, @siddhantantil39, @siriwatknp, @TurtIeSocks, @vladmoroz, @ZeeshanTamboli
+
+## 6.2.0
+
+<!-- generated comparing v6.1.10..master -->
+
+_Dec 10, 2024_
+
+A big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
+
+- Material UI is now compatible with React 19 (#44672) @DiegoAndai
+- Fixed incorrect `aria-orientation` for vertical sliders. <kbd>ArrowRight</kbd> now increases the value and <kbd>ArrowLeft</kbd> decreases the value in vertical sliders; they were reversed in prior versions. (#44537) @mj12albert
+
+### `@mui/material@6.2.0`
+
+- [Box] Add missing `component` to `BoxProps` type (#44643) @DiegoAndai
+- [Grid] Fix spacing when using css variables (#44663) @DiegoAndai
+- [ListItemText] Add `slots` and `slotProps` (#44571) @sai6855
+
+### Docs
+
+- Add Toolpad Core template link (#44415) @bharatkashyap
+
+### Core
+
+- [docs-infra] Allow custom annotations (#44707) @vladmoroz
+- [Box] Fix `component` prop test (#44651) @DiegoAndai
+- React 19 useRef cleanup (#44704) @DiegoAndai
+- Remove obselete lerna options (#44676) @ZeeshanTamboli
+- Fix Regular Expression Denial of Service (ReDoS) vulnerabilities (#44627) @SuperMaxine
+- Fix number of contributors (#44650) @aarongarciah
+- [docs-infra] Add support for data attributes in the API generation (#44709) @mnajdova
+- [docs-infra] Fix RTL dark mode (#41803) @alexfauquette
+- [Grid] Remove deeply nested imports (#43605) @Janpot
+
+All contributors of this release in alphabetical order: @aarongarciah, @alexfauquette, @bharatkashyap, @DiegoAndai, @Janpot, @mj12albert, @mnajdova, @sai6855, @SuperMaxine, @vladmoroz, @ZeeshanTamboli
+
 ## 6.1.10
 
 <!-- generated comparing v6.1.9..master -->
 
 _Dec 3, 2024_
 
-A big thanks to the 10 contributors who made this release possible.
+A big thanks to the 11 contributors who made this release possible.
 
 ### `@mui/material@6.1.10`
 
@@ -45,7 +115,7 @@ A big thanks to the 10 contributors who made this release possible.
 - [docs-infra] Fix TOC RTL padding regression (#44535) @oliviertassinari
 - [test-utils] Remove leftover React.ReactElement<any> from describeConformance.tsx (#44639) @sai6855
 
-All contributors of this release in alphabetical order: @albarv340, @arishoham, @DiegoAndai, @joserodolfofreitas, @MBilalShafi, @mnajdova, @oliviertassinari, @renovate[bot], @sai6855, @samuelsycamore, @siriwatknp, @ZeeshanTamboli
+All contributors of this release in alphabetical order: @albarv340, @arishoham, @DiegoAndai, @joserodolfofreitas, @MBilalShafi, @mnajdova, @oliviertassinari, @sai6855, @samuelsycamore, @siriwatknp, @ZeeshanTamboli
 
 ## 6.1.9
 

package/CardHeader/CardHeader.js

@@ -26,11 +26,13 @@ const useUtilityClasses = ownerState => {
 const CardHeaderRoot = styled('div', {
   name: 'MuiCardHeader',
   slot: 'Root',
-  overridesResolver: (props, styles) => ({
-    [`& .${cardHeaderClasses.title}`]: styles.title,
-    [`& .${cardHeaderClasses.subheader}`]: styles.subheader,
-    ...styles.root
-  })
+  overridesResolver: (props, styles) => {
+    return [{
+      [`& .${cardHeaderClasses.title}`]: styles.title
+    }, {
+      [`& .${cardHeaderClasses.subheader}`]: styles.subheader
+    }, styles.root];
+  }
 })({
   display: 'flex',
   alignItems: 'center',

package/FormControl/FormControl.js

@@ -26,14 +26,11 @@ const useUtilityClasses = ownerState => {
 const FormControlRoot = styled('div', {
   name: 'MuiFormControl',
   slot: 'Root',
-  overridesResolver: ({
-    ownerState
-  }, styles) => {
-    return {
-      ...styles.root,
-      ...styles[`margin${capitalize(ownerState.margin)}`],
-      ...(ownerState.fullWidth && styles.fullWidth)
-    };
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.root, styles[`margin${capitalize(ownerState.margin)}`], ownerState.fullWidth && styles.fullWidth];
   }
 })({
   display: 'inline-flex',

package/FormLabel/FormLabel.js

@@ -32,14 +32,11 @@ const useUtilityClasses = ownerState => {
 export const FormLabelRoot = styled('label', {
   name: 'MuiFormLabel',
   slot: 'Root',
-  overridesResolver: ({
-    ownerState
-  }, styles) => {
-    return {
-      ...styles.root,
-      ...(ownerState.color === 'secondary' && styles.colorSecondary),
-      ...(ownerState.filled && styles.filled)
-    };
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.root, ownerState.color === 'secondary' && styles.colorSecondary, ownerState.filled && styles.filled];
   }
 })(memoTheme(({
   theme

package/Grid/Grid.js

@@ -167,7 +167,7 @@ export function generateRowGap({
       const themeSpacing = theme.spacing(propValue);
       if (themeSpacing !== '0px') {
         return {
-          marginTop: `-${themeSpacing}`,
+          marginTop: `calc(-1 * ${themeSpacing})`,
           [`& > .${gridClasses.item}`]: {
             paddingTop: themeSpacing
           }
@@ -212,7 +212,7 @@ export function generateColumnGap({
     }, columnSpacingValues, (propValue, breakpoint) => {
       const themeSpacing = theme.spacing(propValue);
       if (themeSpacing !== '0px') {
-        const negativeValue = `-${themeSpacing}`;
+        const negativeValue = `calc(-1 * ${themeSpacing})`;
         return {
           width: `calc(100% + ${themeSpacing})`,
           marginLeft: negativeValue,

package/ListItemText/ListItemText.d.ts

@@ -3,11 +3,44 @@ import { SxProps } from '@mui/system';
 import { InternalStandardProps as StandardProps, Theme } from '..';
 import { TypographyProps } from '../Typography';
 import { ListItemTextClasses } from './listItemTextClasses';
+import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
+
+export interface ListItemTextSlots {
+  /**
+   * The component that renders the primary slot.
+   * @default Typography
+   */
+  primary?: React.ElementType;
+  /**
+   * The component that renders the secondary slot.
+   * @default Typography
+   */
+  secondary?: React.ElementType;
+}
+
+export type ListItemTextSlotsAndSlotProps = CreateSlotsAndSlotProps<
+  ListItemTextSlots,
+  {
+    /**
+     * Props forwared to the primary slot (as long as disableTypography is not `true`)
+     * By default, the available props are based on the [Typography](https://mui.com/material-ui/api/typography/#props) component
+     */
+    primary: SlotProps<React.ElementType<TypographyProps>, {}, ListItemTextOwnerState>;
+    /**
+     * Props forwarded to the secondary slot (as long as disableTypography is not `true`)
+     * By default, the available props are based on the [Typography](https://mui.com/material-ui/api/typography/#props) component
+     */
+    secondary: SlotProps<React.ElementType<TypographyProps>, {}, ListItemTextOwnerState>;
+  }
+>;
+
+export interface ListItemTextOwnerState extends ListItemTextProps {}
 
 export interface ListItemTextProps<
   PrimaryTypographyComponent extends React.ElementType = 'span',
   SecondaryTypographyComponent extends React.ElementType = 'p',
-> extends StandardProps<React.HTMLAttributes<HTMLDivElement>> {
+> extends StandardProps<React.HTMLAttributes<HTMLDivElement>>,
+    ListItemTextSlotsAndSlotProps {
   /**
    * Alias for the `primary` prop.
    */
@@ -37,6 +70,7 @@ export interface ListItemTextProps<
   /**
    * These props will be forwarded to the primary typography component
    * (as long as disableTypography is not `true`).
+   * @deprecated Use `slotProps.primary` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   primaryTypographyProps?: TypographyProps<
     PrimaryTypographyComponent,
@@ -49,6 +83,7 @@ export interface ListItemTextProps<
   /**
    * These props will be forwarded to the secondary typography component
    * (as long as disableTypography is not `true`).
+   * @deprecated Use `slotProps.secondary` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   secondaryTypographyProps?: TypographyProps<
     SecondaryTypographyComponent,

package/ListItemText/ListItemText.js

@@ -9,6 +9,7 @@ import ListContext from "../List/ListContext.js";
 import { styled } from "../zero-styled/index.js";
 import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import listItemTextClasses, { getListItemTextUtilityClass } from "./listItemTextClasses.js";
+import useSlot from "../utils/useSlot.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -80,6 +81,8 @@ const ListItemText = /*#__PURE__*/React.forwardRef(function ListItemText(inProps
     primaryTypographyProps,
     secondary: secondaryProp,
     secondaryTypographyProps,
+    slots = {},
+    slotProps = {},
     ...other
   } = props;
   const {
@@ -96,21 +99,39 @@ const ListItemText = /*#__PURE__*/React.forwardRef(function ListItemText(inProps
     dense
   };
   const classes = useUtilityClasses(ownerState);
+  const externalForwardedProps = {
+    slots,
+    slotProps: {
+      primary: primaryTypographyProps,
+      secondary: secondaryTypographyProps,
+      ...slotProps
+    }
+  };
+  const [PrimarySlot, primarySlotProps] = useSlot('primary', {
+    className: classes.primary,
+    elementType: Typography,
+    externalForwardedProps,
+    ownerState
+  });
+  const [SecondarySlot, secondarySlotProps] = useSlot('secondary', {
+    className: classes.secondary,
+    elementType: Typography,
+    externalForwardedProps,
+    ownerState
+  });
   if (primary != null && primary.type !== Typography && !disableTypography) {
-    primary = /*#__PURE__*/_jsx(Typography, {
+    primary = /*#__PURE__*/_jsx(PrimarySlot, {
       variant: dense ? 'body2' : 'body1',
-      className: classes.primary,
-      component: primaryTypographyProps?.variant ? undefined : 'span',
-      ...primaryTypographyProps,
+      component: primarySlotProps?.variant ? undefined : 'span',
+      ...primarySlotProps,
       children: primary
     });
   }
   if (secondary != null && secondary.type !== Typography && !disableTypography) {
-    secondary = /*#__PURE__*/_jsx(Typography, {
+    secondary = /*#__PURE__*/_jsx(SecondarySlot, {
       variant: "body2",
-      className: classes.secondary,
       color: "textSecondary",
-      ...secondaryTypographyProps,
+      ...secondarySlotProps,
       children: secondary
     });
   }
@@ -160,6 +181,7 @@ process.env.NODE_ENV !== "production" ? ListItemText.propTypes /* remove-proptyp
   /**
    * These props will be forwarded to the primary typography component
    * (as long as disableTypography is not `true`).
+   * @deprecated Use `slotProps.primary` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   primaryTypographyProps: PropTypes.object,
   /**
@@ -169,8 +191,25 @@ process.env.NODE_ENV !== "production" ? ListItemText.propTypes /* remove-proptyp
   /**
    * These props will be forwarded to the secondary typography component
    * (as long as disableTypography is not `true`).
+   * @deprecated Use `slotProps.secondary` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   secondaryTypographyProps: PropTypes.object,
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    primary: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    secondary: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    primary: PropTypes.elementType,
+    secondary: PropTypes.elementType
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/PigmentGrid/PigmentGrid.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import Grid from '@mui/material-pigment-css/Grid';
 import composeClasses from '@mui/utils/composeClasses';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
-import { generateDirectionClasses, generateSizeClassNames, generateSpacingClassNames } from '@mui/system/Grid/gridGenerator';
+import { unstable_generateDirectionClasses as generateDirectionClasses, unstable_generateSizeClassNames as generateSizeClassNames, unstable_generateSpacingClassNames as generateSpacingClassNames } from '@mui/system/Grid';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {

package/Select/SelectInput.js

@@ -133,6 +133,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     open: openProp,
     readOnly,
     renderValue,
+    required,
     SelectDisplayProps = {},
     tabIndex: tabIndexProp,
     // catching `type` from Input which makes no sense for SelectInput
@@ -449,6 +450,8 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
       "aria-label": ariaLabel,
       "aria-labelledby": [labelId, buttonId].filter(Boolean).join(' ') || undefined,
       "aria-describedby": ariaDescribedby,
+      "aria-required": required ? 'true' : undefined,
+      "aria-invalid": error ? 'true' : undefined,
       onKeyDown: handleKeyDown,
       onMouseDown: disabled || readOnly ? null : handleMouseDown,
       onBlur: handleBlur,
@@ -476,6 +479,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
       disabled: disabled,
       className: classes.nativeInput,
       autoFocus: autoFocus,
+      required: required,
       ...other,
       ownerState: ownerState
     }), /*#__PURE__*/_jsx(SelectIcon, {
@@ -641,6 +645,10 @@ process.env.NODE_ENV !== "production" ? SelectInput.propTypes = {
    * @returns {ReactNode}
    */
   renderValue: PropTypes.func,
+  /**
+   * If `true`, the component is required.
+   */
+  required: PropTypes.bool,
   /**
    * Props applied to the clickable div element.
    */

package/Slider/useSlider.js

@@ -5,6 +5,9 @@ import { unstable_ownerDocument as ownerDocument, unstable_useControlled as useC
 import extractEventHandlers from '@mui/utils/extractEventHandlers';
 import areArraysEqual from "../utils/areArraysEqual.js";
 const INTENTIONAL_DRAG_COUNT_THRESHOLD = 2;
+function getNewValue(currentValue, step, direction, min, max) {
+  return direction === 1 ? Math.min(currentValue + step, max) : Math.max(currentValue - step, min);
+}
 function asc(a, b) {
   return a - b;
 }
@@ -280,20 +283,65 @@ export function useSlider(parameters) {
     }
   };
   const createHandleHiddenInputKeyDown = otherHandlers => event => {
-    // The Shift + Up/Down keyboard shortcuts for moving the slider makes sense to be supported
-    // only if the step is defined. If the step is null, this means tha the marks are used for specifying the valid values.
-    if (step !== null) {
+    if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'PageUp', 'PageDown', 'Home', 'End'].includes(event.key)) {
+      event.preventDefault();
       const index = Number(event.currentTarget.getAttribute('data-index'));
       const value = values[index];
       let newValue = null;
-      if ((event.key === 'ArrowLeft' || event.key === 'ArrowDown') && event.shiftKey || event.key === 'PageDown') {
-        newValue = Math.max(value - shiftStep, min);
-      } else if ((event.key === 'ArrowRight' || event.key === 'ArrowUp') && event.shiftKey || event.key === 'PageUp') {
-        newValue = Math.min(value + shiftStep, max);
+      // Keys actions that change the value by more than the most granular `step`
+      // value are only applied if the step not `null`.
+      // When step is `null`, the `marks` prop is used instead to define valid values.
+      if (step != null) {
+        const stepSize = event.shiftKey ? shiftStep : step;
+        switch (event.key) {
+          case 'ArrowUp':
+            newValue = getNewValue(value, stepSize, 1, min, max);
+            break;
+          case 'ArrowRight':
+            newValue = getNewValue(value, stepSize, isRtl ? -1 : 1, min, max);
+            break;
+          case 'ArrowDown':
+            newValue = getNewValue(value, stepSize, -1, min, max);
+            break;
+          case 'ArrowLeft':
+            newValue = getNewValue(value, stepSize, isRtl ? 1 : -1, min, max);
+            break;
+          case 'PageUp':
+            newValue = getNewValue(value, shiftStep, 1, min, max);
+            break;
+          case 'PageDown':
+            newValue = getNewValue(value, shiftStep, -1, min, max);
+            break;
+          case 'Home':
+            newValue = min;
+            break;
+          case 'End':
+            newValue = max;
+            break;
+          default:
+            break;
+        }
+      } else if (marks) {
+        const maxMarksValue = marksValues[marksValues.length - 1];
+        const currentMarkIndex = marksValues.indexOf(value);
+        const decrementKeys = [isRtl ? 'ArrowRight' : 'ArrowLeft', 'ArrowDown', 'PageDown', 'Home'];
+        const incrementKeys = [isRtl ? 'ArrowLeft' : 'ArrowRight', 'ArrowUp', 'PageUp', 'End'];
+        if (decrementKeys.includes(event.key)) {
+          if (currentMarkIndex === 0) {
+            newValue = marksValues[0];
+          } else {
+            newValue = marksValues[currentMarkIndex - 1];
+          }
+        } else if (incrementKeys.includes(event.key)) {
+          if (currentMarkIndex === marksValues.length - 1) {
+            newValue = maxMarksValue;
+          } else {
+            newValue = marksValues[currentMarkIndex + 1];
+          }
+        }
       }
-      if (newValue !== null) {
+      if (newValue != null) {
         changeValue(event, newValue);
-        event.preventDefault();
       }
     }
     otherHandlers?.onKeyDown?.(event);
@@ -315,6 +363,7 @@ export function useSlider(parameters) {
   }
   const createHandleHiddenInputChange = otherHandlers => event => {
     otherHandlers.onChange?.(event);
+    // this handles value change by Pointer or Touch events
     // @ts-ignore
     changeValue(event, event.target.valueAsNumber);
   };
@@ -591,6 +640,10 @@ export function useSlider(parameters) {
       pointerEvents: active !== -1 && active !== index ? 'none' : undefined
     };
   };
+  let cssWritingMode;
+  if (orientation === 'vertical') {
+    cssWritingMode = isRtl ? 'vertical-rl' : 'vertical-lr';
+  }
   const getHiddenInputProps = (externalProps = {}) => {
     const externalHandlers = extractEventHandlers(externalProps);
     const ownEventHandlers = {
@@ -622,7 +675,8 @@ export function useSlider(parameters) {
         direction: isRtl ? 'rtl' : 'ltr',
         // So that VoiceOver's focus indicator matches the thumb's dimensions
         width: '100%',
-        height: '100%'
+        height: '100%',
+        writingMode: cssWritingMode
       }
     };
   };

package/TextField/TextField.d.ts

@@ -188,6 +188,7 @@ export interface BaseTextFieldProps
   SelectProps?: Partial<SelectProps>;
   /**
    * The size of the component.
+   * @default 'medium'
    */
   size?: OverridableStringUnion<'small' | 'medium', TextFieldPropsSizeOverrides>;
   /**

package/TextField/TextField.js

@@ -400,6 +400,7 @@ process.env.NODE_ENV !== "production" ? TextField.propTypes /* remove-proptypes
   SelectProps: PropTypes.object,
   /**
    * The size of the component.
+   * @default 'medium'
    */
   size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['medium', 'small']), PropTypes.string]),
   /**

package/index.js

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

package/modern/Autocomplete/Autocomplete.js

@@ -251,12 +251,12 @@ const AutocompleteClearIndicator = styled(IconButton, {
 const AutocompletePopupIndicator = styled(IconButton, {
   name: 'MuiAutocomplete',
   slot: 'PopupIndicator',
-  overridesResolver: ({
-    ownerState
-  }, styles) => ({
-    ...styles.popupIndicator,
-    ...(ownerState.popupOpen && styles.popupIndicatorOpen)
-  })
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.popupIndicator, ownerState.popupOpen && styles.popupIndicatorOpen];
+  }
 })({
   padding: 2,
   marginRight: -2,

package/modern/AvatarGroup/AvatarGroup.js

@@ -30,10 +30,11 @@ const useUtilityClasses = ownerState => {
 const AvatarGroupRoot = styled('div', {
   name: 'MuiAvatarGroup',
   slot: 'Root',
-  overridesResolver: (props, styles) => ({
-    [`& .${avatarGroupClasses.avatar}`]: styles.avatar,
-    ...styles.root
-  })
+  overridesResolver: (props, styles) => {
+    return [{
+      [`& .${avatarGroupClasses.avatar}`]: styles.avatar
+    }, styles.root];
+  }
 })(memoTheme(({
   theme
 }) => ({

package/modern/CardHeader/CardHeader.js

@@ -26,11 +26,13 @@ const useUtilityClasses = ownerState => {
 const CardHeaderRoot = styled('div', {
   name: 'MuiCardHeader',
   slot: 'Root',
-  overridesResolver: (props, styles) => ({
-    [`& .${cardHeaderClasses.title}`]: styles.title,
-    [`& .${cardHeaderClasses.subheader}`]: styles.subheader,
-    ...styles.root
-  })
+  overridesResolver: (props, styles) => {
+    return [{
+      [`& .${cardHeaderClasses.title}`]: styles.title
+    }, {
+      [`& .${cardHeaderClasses.subheader}`]: styles.subheader
+    }, styles.root];
+  }
 })({
   display: 'flex',
   alignItems: 'center',

package/modern/FormControl/FormControl.js

@@ -26,14 +26,11 @@ const useUtilityClasses = ownerState => {
 const FormControlRoot = styled('div', {
   name: 'MuiFormControl',
   slot: 'Root',
-  overridesResolver: ({
-    ownerState
-  }, styles) => {
-    return {
-      ...styles.root,
-      ...styles[`margin${capitalize(ownerState.margin)}`],
-      ...(ownerState.fullWidth && styles.fullWidth)
-    };
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.root, styles[`margin${capitalize(ownerState.margin)}`], ownerState.fullWidth && styles.fullWidth];
   }
 })({
   display: 'inline-flex',