@mui/material 6.4.11 → 6.5.0

package/OutlinedInput/OutlinedInput.js

@@ -14,6 +14,7 @@ import createSimplePaletteValueFilter from "../utils/createSimplePaletteValueFil
 import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import outlinedInputClasses, { getOutlinedInputUtilityClass } from "./outlinedInputClasses.js";
 import InputBase, { rootOverridesResolver as inputBaseRootOverridesResolver, inputOverridesResolver as inputBaseInputOverridesResolver, InputBaseRoot, InputBaseInput } from "../InputBase/InputBase.js";
+import useSlot from "../utils/useSlot.js";
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -178,7 +179,6 @@ const OutlinedInputInput = styled(InputBaseInput, {
   }]
 })));
 const OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inProps, ref) {
-  var _React$Fragment;
   const props = useDefaultProps({
     props: inProps,
     name: 'MuiOutlinedInput'
@@ -191,6 +191,7 @@ const OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inPro
     multiline = false,
     notched,
     slots = {},
+    slotProps = {},
     type = 'text',
     ...other
   } = props;
@@ -216,17 +217,29 @@ const OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inPro
   };
   const RootSlot = slots.root ?? components.Root ?? OutlinedInputRoot;
   const InputSlot = slots.input ?? components.Input ?? OutlinedInputInput;
+  const [NotchedSlot, notchedProps] = useSlot('notchedOutline', {
+    elementType: NotchedOutlineRoot,
+    className: classes.notchedOutline,
+    shouldForwardComponentProp: true,
+    ownerState,
+    externalForwardedProps: {
+      slots,
+      slotProps
+    },
+    additionalProps: {
+      label: label != null && label !== '' && fcs.required ? /*#__PURE__*/_jsxs(React.Fragment, {
+        children: [label, "\u2009", '*']
+      }) : label
+    }
+  });
   return /*#__PURE__*/_jsx(InputBase, {
     slots: {
       root: RootSlot,
       input: InputSlot
     },
-    renderSuffix: state => /*#__PURE__*/_jsx(NotchedOutlineRoot, {
-      ownerState: ownerState,
-      className: classes.notchedOutline,
-      label: label != null && label !== '' && fcs.required ? _React$Fragment || (_React$Fragment = /*#__PURE__*/_jsxs(React.Fragment, {
-        children: [label, "\u2009", '*']
-      })) : label,
+    slotProps: slotProps,
+    renderSuffix: state => /*#__PURE__*/_jsx(NotchedSlot, {
+      ...notchedProps,
       notched: typeof notched !== 'undefined' ? notched : Boolean(state.startAdornment || state.filled || state.focused)
     }),
     fullWidth: fullWidth,
@@ -377,15 +390,22 @@ process.env.NODE_ENV !== "production" ? OutlinedInput.propTypes /* remove-propty
    * Number of rows to display when multiline option is set to true.
    */
   rows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    input: PropTypes.object,
+    notchedOutline: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.object
+  }),
   /**
    * The components used for each slot inside.
-   *
-   * This prop is an alias for the `components` prop, which will be deprecated in the future.
-   *
    * @default {}
    */
   slots: PropTypes.shape({
     input: PropTypes.elementType,
+    notchedOutline: PropTypes.elementType,
     root: PropTypes.elementType
   }),
   /**

package/Radio/RadioButtonIcon.js

@@ -9,16 +9,21 @@ import { styled } from "../zero-styled/index.js";
 import memoTheme from "../utils/memoTheme.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const RadioButtonIconRoot = styled('span', {
+  name: 'MuiRadioButtonIcon',
   shouldForwardProp: rootShouldForwardProp
 })({
   position: 'relative',
   display: 'flex'
 });
-const RadioButtonIconBackground = styled(RadioButtonUncheckedIcon)({
+const RadioButtonIconBackground = styled(RadioButtonUncheckedIcon, {
+  name: 'MuiRadioButtonIcon'
+})({
   // Scale applied to prevent dot misalignment in Safari
   transform: 'scale(1)'
 });
-const RadioButtonIconDot = styled(RadioButtonCheckedIcon)(memoTheme(({
+const RadioButtonIconDot = styled(RadioButtonCheckedIcon, {
+  name: 'MuiRadioButtonIcon'
+})(memoTheme(({
   theme
 }) => ({
   left: 0,

package/SwipeableDrawer/SwipeArea.js

@@ -10,6 +10,7 @@ import capitalize from "../utils/capitalize.js";
 import { isHorizontal } from "../Drawer/Drawer.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const SwipeAreaRoot = styled('div', {
+  name: 'MuiSwipeArea',
   shouldForwardProp: rootShouldForwardProp
 })(memoTheme(({
   theme

package/index.js

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

package/internal/SwitchBase.js

@@ -26,7 +26,9 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getSwitchBaseUtilityClass, classes);
 };
-const SwitchBaseRoot = styled(ButtonBase)({
+const SwitchBaseRoot = styled(ButtonBase, {
+  name: 'MuiSwitchBase'
+})({
   padding: 9,
   borderRadius: '50%',
   variants: [{
@@ -64,6 +66,7 @@ const SwitchBaseRoot = styled(ButtonBase)({
   }]
 });
 const SwitchBaseInput = styled('input', {
+  name: 'MuiSwitchBase',
   shouldForwardProp: rootShouldForwardProp
 })({
   cursor: 'inherit',

package/modern/Badge/Badge.js

@@ -5,7 +5,6 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import usePreviousProps from '@mui/utils/usePreviousProps';
 import composeClasses from '@mui/utils/composeClasses';
-import useSlotProps from '@mui/utils/useSlotProps';
 import useBadge from "./useBadge.js";
 import { styled } from "../zero-styled/index.js";
 import memoTheme from "../utils/memoTheme.js";
@@ -13,6 +12,7 @@ import createSimplePaletteValueFilter from "../utils/createSimplePaletteValueFil
 import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import capitalize from "../utils/capitalize.js";
 import badgeClasses, { getBadgeUtilityClass } from "./badgeClasses.js";
+import useSlot from "../utils/useSlot.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const RADIUS_STANDARD = 10;
 const RADIUS_DOT = 4;
@@ -282,26 +282,34 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
   const classes = useUtilityClasses(ownerState);
 
   // support both `slots` and `components` for backward compatibility
-  const RootSlot = slots?.root ?? components.Root ?? BadgeRoot;
-  const BadgeSlot = slots?.badge ?? components.Badge ?? BadgeBadge;
-  const rootSlotProps = slotProps?.root ?? componentsProps.root;
-  const badgeSlotProps = slotProps?.badge ?? componentsProps.badge;
-  const rootProps = useSlotProps({
-    elementType: RootSlot,
-    externalSlotProps: rootSlotProps,
-    externalForwardedProps: other,
-    additionalProps: {
-      ref,
-      as: component
+  const externalForwardedProps = {
+    slots: {
+      root: slots?.root ?? components.Root,
+      badge: slots?.badge ?? components.Badge
+    },
+    slotProps: {
+      root: slotProps?.root ?? componentsProps.root,
+      badge: slotProps?.badge ?? componentsProps.badge
+    }
+  };
+  const [RootSlot, rootProps] = useSlot('root', {
+    elementType: BadgeRoot,
+    externalForwardedProps: {
+      ...externalForwardedProps,
+      ...other
     },
     ownerState,
-    className: clsx(rootSlotProps?.className, classes.root, className)
+    className: clsx(classes.root, className),
+    ref,
+    additionalProps: {
+      as: component
+    }
   });
-  const badgeProps = useSlotProps({
-    elementType: BadgeSlot,
-    externalSlotProps: badgeSlotProps,
+  const [BadgeSlot, badgeProps] = useSlot('badge', {
+    elementType: BadgeBadge,
+    externalForwardedProps,
     ownerState,
-    className: clsx(classes.badge, badgeSlotProps?.className)
+    className: classes.badge
   });
   return /*#__PURE__*/_jsxs(RootSlot, {
     ...rootProps,
@@ -399,7 +407,7 @@ process.env.NODE_ENV !== "production" ? Badge.propTypes /* remove-proptypes */ =
    */
   showZero: PropTypes.bool,
   /**
-   * The props used for each slot inside the Badge.
+   * The props used for each slot inside.
    * @default {}
    */
   slotProps: PropTypes.shape({
@@ -407,8 +415,7 @@ process.env.NODE_ENV !== "production" ? Badge.propTypes /* remove-proptypes */ =
     root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
   }),
   /**
-   * The components used for each slot inside the Badge.
-   * Either a string to use a HTML element or a component.
+   * The components used for each slot inside.
    * @default {}
    */
   slots: PropTypes.shape({

package/modern/BottomNavigationAction/BottomNavigationAction.js

@@ -10,6 +10,7 @@ import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import ButtonBase from "../ButtonBase/index.js";
 import unsupportedProp from "../utils/unsupportedProp.js";
 import bottomNavigationActionClasses, { getBottomNavigationActionUtilityClass } from "./bottomNavigationActionClasses.js";
+import useSlot from "../utils/useSlot.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -107,6 +108,8 @@ const BottomNavigationAction = /*#__PURE__*/React.forwardRef(function BottomNavi
     selected,
     showLabel,
     value,
+    slots = {},
+    slotProps = {},
     ...other
   } = props;
   const ownerState = props;
@@ -119,16 +122,41 @@ const BottomNavigationAction = /*#__PURE__*/React.forwardRef(function BottomNavi
       onClick(event);
     }
   };
-  return /*#__PURE__*/_jsxs(BottomNavigationActionRoot, {
-    ref: ref,
+  const externalForwardedProps = {
+    slots,
+    slotProps
+  };
+  const [RootSlot, rootProps] = useSlot('root', {
+    elementType: BottomNavigationActionRoot,
+    externalForwardedProps: {
+      ...externalForwardedProps,
+      ...other
+    },
+    shouldForwardComponentProp: true,
+    ownerState,
+    ref,
     className: clsx(classes.root, className),
-    focusRipple: true,
-    onClick: handleChange,
-    ownerState: ownerState,
-    ...other,
-    children: [icon, /*#__PURE__*/_jsx(BottomNavigationActionLabel, {
-      className: classes.label,
-      ownerState: ownerState,
+    additionalProps: {
+      focusRipple: true
+    },
+    getSlotProps: handlers => ({
+      ...handlers,
+      onClick: event => {
+        handlers.onClick?.(event);
+        handleChange(event);
+      }
+    })
+  });
+  const [LabelSlot, labelProps] = useSlot('label', {
+    elementType: BottomNavigationActionLabel,
+    externalForwardedProps,
+    ownerState,
+    className: classes.label
+  });
+  return /*#__PURE__*/_jsxs(RootSlot, {
+    ...rootProps,
+    children: [icon, /*#__PURE__*/_jsx(LabelSlot, {
+      ...labelProps,
       children: label
     })]
   });
@@ -175,6 +203,22 @@ process.env.NODE_ENV !== "production" ? BottomNavigationAction.propTypes /* remo
    * The prop defaults to the value (`false`) inherited from the parent BottomNavigation component.
    */
   showLabel: PropTypes.bool,
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    label: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    label: PropTypes.elementType,
+    root: PropTypes.elementType
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/modern/Breadcrumbs/BreadcrumbCollapsed.js

@@ -8,7 +8,9 @@ import memoTheme from "../utils/memoTheme.js";
 import MoreHorizIcon from "../internal/svg-icons/MoreHoriz.js";
 import ButtonBase from "../ButtonBase/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const BreadcrumbCollapsedButton = styled(ButtonBase)(memoTheme(({
+const BreadcrumbCollapsedButton = styled(ButtonBase, {
+  name: 'MuiBreadcrumbCollapsed'
+})(memoTheme(({
   theme
 }) => ({
   display: 'flex',

package/modern/CardActionArea/CardActionArea.js

@@ -9,6 +9,7 @@ import memoTheme from "../utils/memoTheme.js";
 import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import cardActionAreaClasses, { getCardActionAreaUtilityClass } from "./cardActionAreaClasses.js";
 import ButtonBase from "../ButtonBase/index.js";
+import useSlot from "../utils/useSlot.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -72,19 +73,41 @@ const CardActionArea = /*#__PURE__*/React.forwardRef(function CardActionArea(inP
     children,
     className,
     focusVisibleClassName,
+    slots = {},
+    slotProps = {},
     ...other
   } = props;
   const ownerState = props;
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsxs(CardActionAreaRoot, {
+  const externalForwardedProps = {
+    slots,
+    slotProps
+  };
+  const [RootSlot, rootProps] = useSlot('root', {
+    elementType: CardActionAreaRoot,
+    externalForwardedProps: {
+      ...externalForwardedProps,
+      ...other
+    },
+    shouldForwardComponentProp: true,
+    ownerState,
+    ref,
     className: clsx(classes.root, className),
-    focusVisibleClassName: clsx(focusVisibleClassName, classes.focusVisible),
-    ref: ref,
-    ownerState: ownerState,
-    ...other,
-    children: [children, /*#__PURE__*/_jsx(CardActionAreaFocusHighlight, {
-      className: classes.focusHighlight,
-      ownerState: ownerState
+    additionalProps: {
+      focusVisibleClassName: clsx(focusVisibleClassName, classes.focusVisible)
+    }
+  });
+  const [FocusHighlightSlot, focusHighlightProps] = useSlot('focusHighlight', {
+    elementType: CardActionAreaFocusHighlight,
+    externalForwardedProps,
+    ownerState,
+    ref,
+    className: classes.focusHighlight
+  });
+  return /*#__PURE__*/_jsxs(RootSlot, {
+    ...rootProps,
+    children: [children, /*#__PURE__*/_jsx(FocusHighlightSlot, {
+      ...focusHighlightProps
     })]
   });
 });
@@ -109,6 +132,22 @@ process.env.NODE_ENV !== "production" ? CardActionArea.propTypes /* remove-propt
    * @ignore
    */
   focusVisibleClassName: PropTypes.string,
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    focusHighlight: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    focusHighlight: PropTypes.elementType,
+    root: PropTypes.elementType
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/modern/NativeSelect/NativeSelectInput.js

@@ -25,7 +25,9 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getNativeSelectUtilityClasses, classes);
 };
-export const StyledSelectSelect = styled('select')(({
+export const StyledSelectSelect = styled('select', {
+  name: 'MuiNativeSelect'
+})(({
   theme
 }) => ({
   // Reset
@@ -99,7 +101,9 @@ const NativeSelectSelect = styled(StyledSelectSelect, {
     }];
   }
 })({});
-export const StyledSelectIcon = styled('svg')(({
+export const StyledSelectIcon = styled('svg', {
+  name: 'MuiNativeSelect'
+})(({
   theme
 }) => ({
   // We use a position absolute over a flexbox in order to forward the pointer events

package/modern/OutlinedInput/NotchedOutline.js

@@ -8,6 +8,7 @@ import { styled } from "../zero-styled/index.js";
 import memoTheme from "../utils/memoTheme.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const NotchedOutlineRoot = styled('fieldset', {
+  name: 'MuiNotchedOutlined',
   shouldForwardProp: rootShouldForwardProp
 })({
   textAlign: 'left',
@@ -26,6 +27,7 @@ const NotchedOutlineRoot = styled('fieldset', {
   minWidth: '0%'
 });
 const NotchedOutlineLegend = styled('legend', {
+  name: 'MuiNotchedOutlined',
   shouldForwardProp: rootShouldForwardProp
 })(memoTheme(({
   theme

package/modern/OutlinedInput/OutlinedInput.js

@@ -14,6 +14,7 @@ import createSimplePaletteValueFilter from "../utils/createSimplePaletteValueFil
 import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import outlinedInputClasses, { getOutlinedInputUtilityClass } from "./outlinedInputClasses.js";
 import InputBase, { rootOverridesResolver as inputBaseRootOverridesResolver, inputOverridesResolver as inputBaseInputOverridesResolver, InputBaseRoot, InputBaseInput } from "../InputBase/InputBase.js";
+import useSlot from "../utils/useSlot.js";
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -178,7 +179,6 @@ const OutlinedInputInput = styled(InputBaseInput, {
   }]
 })));
 const OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inProps, ref) {
-  var _React$Fragment;
   const props = useDefaultProps({
     props: inProps,
     name: 'MuiOutlinedInput'
@@ -191,6 +191,7 @@ const OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inPro
     multiline = false,
     notched,
     slots = {},
+    slotProps = {},
     type = 'text',
     ...other
   } = props;
@@ -216,17 +217,29 @@ const OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inPro
   };
   const RootSlot = slots.root ?? components.Root ?? OutlinedInputRoot;
   const InputSlot = slots.input ?? components.Input ?? OutlinedInputInput;
+  const [NotchedSlot, notchedProps] = useSlot('notchedOutline', {
+    elementType: NotchedOutlineRoot,
+    className: classes.notchedOutline,
+    shouldForwardComponentProp: true,
+    ownerState,
+    externalForwardedProps: {
+      slots,
+      slotProps
+    },
+    additionalProps: {
+      label: label != null && label !== '' && fcs.required ? /*#__PURE__*/_jsxs(React.Fragment, {
+        children: [label, "\u2009", '*']
+      }) : label
+    }
+  });
   return /*#__PURE__*/_jsx(InputBase, {
     slots: {
       root: RootSlot,
       input: InputSlot
     },
-    renderSuffix: state => /*#__PURE__*/_jsx(NotchedOutlineRoot, {
-      ownerState: ownerState,
-      className: classes.notchedOutline,
-      label: label != null && label !== '' && fcs.required ? _React$Fragment || (_React$Fragment = /*#__PURE__*/_jsxs(React.Fragment, {
-        children: [label, "\u2009", '*']
-      })) : label,
+    slotProps: slotProps,
+    renderSuffix: state => /*#__PURE__*/_jsx(NotchedSlot, {
+      ...notchedProps,
       notched: typeof notched !== 'undefined' ? notched : Boolean(state.startAdornment || state.filled || state.focused)
     }),
     fullWidth: fullWidth,
@@ -377,15 +390,22 @@ process.env.NODE_ENV !== "production" ? OutlinedInput.propTypes /* remove-propty
    * Number of rows to display when multiline option is set to true.
    */
   rows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    input: PropTypes.object,
+    notchedOutline: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.object
+  }),
   /**
    * The components used for each slot inside.
-   *
-   * This prop is an alias for the `components` prop, which will be deprecated in the future.
-   *
    * @default {}
    */
   slots: PropTypes.shape({
     input: PropTypes.elementType,
+    notchedOutline: PropTypes.elementType,
     root: PropTypes.elementType
   }),
   /**

package/modern/Radio/RadioButtonIcon.js

@@ -9,16 +9,21 @@ import { styled } from "../zero-styled/index.js";
 import memoTheme from "../utils/memoTheme.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const RadioButtonIconRoot = styled('span', {
+  name: 'MuiRadioButtonIcon',
   shouldForwardProp: rootShouldForwardProp
 })({
   position: 'relative',
   display: 'flex'
 });
-const RadioButtonIconBackground = styled(RadioButtonUncheckedIcon)({
+const RadioButtonIconBackground = styled(RadioButtonUncheckedIcon, {
+  name: 'MuiRadioButtonIcon'
+})({
   // Scale applied to prevent dot misalignment in Safari
   transform: 'scale(1)'
 });
-const RadioButtonIconDot = styled(RadioButtonCheckedIcon)(memoTheme(({
+const RadioButtonIconDot = styled(RadioButtonCheckedIcon, {
+  name: 'MuiRadioButtonIcon'
+})(memoTheme(({
   theme
 }) => ({
   left: 0,

package/modern/SwipeableDrawer/SwipeArea.js

@@ -10,6 +10,7 @@ import capitalize from "../utils/capitalize.js";
 import { isHorizontal } from "../Drawer/Drawer.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const SwipeAreaRoot = styled('div', {
+  name: 'MuiSwipeArea',
   shouldForwardProp: rootShouldForwardProp
 })(memoTheme(({
   theme

package/modern/index.js

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

package/modern/internal/SwitchBase.js

@@ -26,7 +26,9 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getSwitchBaseUtilityClass, classes);
 };
-const SwitchBaseRoot = styled(ButtonBase)({
+const SwitchBaseRoot = styled(ButtonBase, {
+  name: 'MuiSwitchBase'
+})({
   padding: 9,
   borderRadius: '50%',
   variants: [{
@@ -64,6 +66,7 @@ const SwitchBaseRoot = styled(ButtonBase)({
   }]
 });
 const SwitchBaseInput = styled('input', {
+  name: 'MuiSwitchBase',
   shouldForwardProp: rootShouldForwardProp
 })({
   cursor: 'inherit',

package/modern/styles/ThemeProvider.js

@@ -9,27 +9,27 @@ export default function ThemeProvider({
   theme,
   ...props
 }) {
-  if (typeof theme === 'function') {
-    return /*#__PURE__*/_jsx(ThemeProviderNoVars, {
-      theme: theme,
-      ...props
-    });
-  }
-  const muiTheme = THEME_ID in theme ? theme[THEME_ID] : theme;
-  if (!('colorSchemes' in muiTheme)) {
-    if (!('vars' in muiTheme)) {
-      // For non-CSS variables themes, set `vars` to null to prevent theme inheritance from the upper theme.
-      // The example use case is the docs demo that uses ThemeProvider to customize the theme while the upper theme is using CSS variables.
-      return /*#__PURE__*/_jsx(ThemeProviderNoVars, {
-        theme: {
+  const noVarsTheme = React.useMemo(() => {
+    if (typeof theme === 'function') {
+      return theme;
+    }
+    const muiTheme = THEME_ID in theme ? theme[THEME_ID] : theme;
+    if (!('colorSchemes' in muiTheme)) {
+      if (!('vars' in muiTheme)) {
+        // For non-CSS variables themes, set `vars` to null to prevent theme inheritance from the upper theme.
+        // The example use case is the docs demo that uses ThemeProvider to customize the theme while the upper theme is using CSS variables.
+        return {
           ...theme,
           vars: null
-        },
-        ...props
-      });
+        };
+      }
+      return theme;
     }
+    return null;
+  }, [theme]);
+  if (noVarsTheme) {
     return /*#__PURE__*/_jsx(ThemeProviderNoVars, {
-      theme: theme,
+      theme: noVarsTheme,
       ...props
     });
   }

package/modern/styles/shouldSkipGeneratingVar.js

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

package/modern/version/index.js

@@ -1,6 +1,6 @@
-export const version = "6.4.11";
+export const version = "6.5.0";
 export const major = Number("6");
-export const minor = Number("4");
-export const patch = Number("11");
+export const minor = Number("5");
+export const patch = Number("0");
 export const prerelease = undefined;
 export default version;