@mui/material 6.0.1 → 6.1.0

package/modern/Button/Button.js

@@ -12,6 +12,7 @@ import memoTheme from "../utils/memoTheme.js";
 import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import ButtonBase from "../ButtonBase/index.js";
 import capitalize from "../utils/capitalize.js";
+import createSimplePaletteValueFilter from "../utils/createSimplePaletteValueFilter.js";
 import buttonClasses, { getButtonUtilityClass } from "./buttonClasses.js";
 import ButtonGroupContext from "../ButtonGroup/ButtonGroupContext.js";
 import ButtonGroupButtonContext from "../ButtonGroup/ButtonGroupButtonContext.js";
@@ -146,7 +147,7 @@ const ButtonRoot = styled(ButtonBase, {
         color: `var(--variant-textColor)`,
         backgroundColor: `var(--variant-textBg)`
       }
-    }, ...Object.entries(theme.palette).filter(([, palette]) => palette && palette.main && palette.dark && palette.contrastText).map(([color]) => ({
+    }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter(['dark', 'contrastText'])).map(([color]) => ({
       props: {
         color
       },

package/modern/ButtonGroup/ButtonGroup.js

@@ -9,6 +9,7 @@ import getValidReactChildren from '@mui/utils/getValidReactChildren';
 import capitalize from "../utils/capitalize.js";
 import { styled } from "../zero-styled/index.js";
 import memoTheme from "../utils/memoTheme.js";
+import createSimplePaletteValueFilter from "../utils/createSimplePaletteValueFilter.js";
 import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import buttonGroupClasses, { getButtonGroupUtilityClass } from "./buttonGroupClasses.js";
 import ButtonGroupContext from "./ButtonGroupContext.js";
@@ -140,7 +141,7 @@ const ButtonGroupRoot = styled('div', {
         }
       }
     }
-  }, ...Object.entries(theme.palette).filter(([, value]) => value && value.main).flatMap(([color]) => [{
+  }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).flatMap(([color]) => [{
     props: {
       variant: 'text',
       color
@@ -208,7 +209,7 @@ const ButtonGroupRoot = styled('div', {
         }
       }
     }
-  }, ...Object.entries(theme.palette).filter(([, value]) => value && value.dark).map(([color]) => ({
+  }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter(['dark'])).map(([color]) => ({
     props: {
       variant: 'contained',
       color

package/modern/Checkbox/Checkbox.js

@@ -15,6 +15,7 @@ import rootShouldForwardProp from "../styles/rootShouldForwardProp.js";
 import checkboxClasses, { getCheckboxUtilityClass } from "./checkboxClasses.js";
 import { styled } from "../zero-styled/index.js";
 import memoTheme from "../utils/memoTheme.js";
+import createSimplePaletteValueFilter from "../utils/createSimplePaletteValueFilter.js";
 import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
@@ -58,7 +59,7 @@ const CheckboxRoot = styled(SwitchBase, {
         backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.action.active, theme.palette.action.hoverOpacity)
       }
     }
-  }, ...Object.entries(theme.palette).filter(([, palette]) => palette && palette.main).map(([color]) => ({
+  }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color]) => ({
     props: {
       color,
       disableRipple: false
@@ -68,7 +69,7 @@ const CheckboxRoot = styled(SwitchBase, {
         backgroundColor: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette[color].main, theme.palette.action.hoverOpacity)
       }
     }
-  })), ...Object.entries(theme.palette).filter(([, palette]) => palette && palette.main).map(([color]) => ({
+  })), ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color]) => ({
     props: {
       color
     },

package/modern/Chip/Chip.js

@@ -12,6 +12,7 @@ import capitalize from "../utils/capitalize.js";
 import ButtonBase from "../ButtonBase/index.js";
 import { styled } from "../zero-styled/index.js";
 import memoTheme from "../utils/memoTheme.js";
+import createSimplePaletteValueFilter from "../utils/createSimplePaletteValueFilter.js";
 import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import chipClasses, { getChipUtilityClass } from "./chipClasses.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -158,7 +159,7 @@ const ChipRoot = styled('div', {
           marginLeft: -4
         }
       }
-    }, ...Object.entries(theme.palette).filter(([, value]) => value && value.main && value.contrastText).map(([color]) => {
+    }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter(['contrastText'])).map(([color]) => {
       return {
         props: {
           color
@@ -197,7 +198,7 @@ const ChipRoot = styled('div', {
           backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
         }
       }
-    }, ...Object.entries(theme.palette).filter(([, value]) => value && value.dark).map(([color]) => {
+    }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter(['dark'])).map(([color]) => {
       return {
         props: {
           color,
@@ -227,7 +228,7 @@ const ChipRoot = styled('div', {
           boxShadow: (theme.vars || theme).shadows[1]
         }
       }
-    }, ...Object.entries(theme.palette).filter(([, value]) => value && value.dark).map(([color]) => ({
+    }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter(['dark'])).map(([color]) => ({
       props: {
         color,
         clickable: true
@@ -269,7 +270,7 @@ const ChipRoot = styled('div', {
           marginRight: 3
         }
       }
-    }, ...Object.entries(theme.palette).filter(([, value]) => value && value.main) // no need to check for mainChannel as it's calculated from main
+    }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()) // no need to check for mainChannel as it's calculated from main
     .map(([color]) => ({
       props: {
         variant: 'outlined',
@@ -426,7 +427,7 @@ const Chip = /*#__PURE__*/React.forwardRef(function Chip(inProps, ref) {
   } : {};
   let deleteIcon = null;
   if (onDelete) {
-    deleteIcon = deleteIconProp && /*#__PURE__*/React.isValidElement(deleteIconProp) ? ( /*#__PURE__*/React.cloneElement(deleteIconProp, {
+    deleteIcon = deleteIconProp && /*#__PURE__*/React.isValidElement(deleteIconProp) ? (/*#__PURE__*/React.cloneElement(deleteIconProp, {
       className: clsx(deleteIconProp.props.className, classes.deleteIcon),
       onClick: handleDeleteIconClick
     })) : /*#__PURE__*/_jsx(CancelIcon, {

package/modern/CircularProgress/CircularProgress.js

@@ -9,6 +9,7 @@ import { keyframes, css, styled } from "../zero-styled/index.js";
 import memoTheme from "../utils/memoTheme.js";
 import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import capitalize from "../utils/capitalize.js";
+import createSimplePaletteValueFilter from "../utils/createSimplePaletteValueFilter.js";
 import { getCircularProgressUtilityClass } from "./circularProgressClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const SIZE = 44;
@@ -88,7 +89,7 @@ const CircularProgressRoot = styled('span', {
     style: rotateAnimation || {
       animation: `${circularRotateKeyframe} 1.4s linear infinite`
     }
-  }, ...Object.entries(theme.palette).filter(([, palette]) => palette && palette.main).map(([color]) => ({
+  }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color]) => ({
     props: {
       color
     },

package/modern/Dialog/Dialog.js

@@ -106,6 +106,7 @@ const DialogPaper = styled(Paper, {
 }) => ({
   margin: 32,
   position: 'relative',
+  overflowY: 'auto',
   '@media print': {
     overflowY: 'visible',
     boxShadow: 'none'

package/modern/Fab/Fab.js

@@ -10,6 +10,7 @@ import fabClasses, { getFabUtilityClass } from "./fabClasses.js";
 import rootShouldForwardProp from "../styles/rootShouldForwardProp.js";
 import { styled } from "../zero-styled/index.js";
 import memoTheme from "../utils/memoTheme.js";
+import createSimplePaletteValueFilter from "../utils/createSimplePaletteValueFilter.js";
 import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
@@ -133,7 +134,7 @@ const FabRoot = styled(ButtonBase, {
 })), memoTheme(({
   theme
 }) => ({
-  variants: [...Object.entries(theme.palette).filter(([, value]) => value && value.main && value.dark && value.contrastText) // check all the used fields in the style below
+  variants: [...Object.entries(theme.palette).filter(createSimplePaletteValueFilter(['dark', 'contrastText'])) // check all the used fields in the style below
   .map(([color]) => ({
     props: {
       color

package/modern/FilledInput/FilledInput.js

@@ -9,6 +9,7 @@ import InputBase from "../InputBase/index.js";
 import rootShouldForwardProp from "../styles/rootShouldForwardProp.js";
 import { styled } from "../zero-styled/index.js";
 import memoTheme from "../utils/memoTheme.js";
+import createSimplePaletteValueFilter from "../utils/createSimplePaletteValueFilter.js";
 import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import filledInputClasses, { getFilledInputUtilityClass } from "./filledInputClasses.js";
 import { rootOverridesResolver as inputBaseRootOverridesResolver, inputOverridesResolver as inputBaseInputOverridesResolver, InputBaseRoot, InputBaseInput } from "../InputBase/InputBase.js";
@@ -122,7 +123,7 @@ const FilledInputRoot = styled(InputBaseRoot, {
           borderBottomStyle: 'dotted'
         }
       }
-    }, ...Object.entries(theme.palette).filter(([, value]) => value && value.main) // check all the used fields in the style below
+    }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()) // check all the used fields in the style below
     .map(([color]) => ({
       props: {
         disableUnderline: false,

package/modern/FormLabel/FormLabel.js

@@ -9,6 +9,7 @@ import useFormControl from "../FormControl/useFormControl.js";
 import capitalize from "../utils/capitalize.js";
 import { styled } from "../zero-styled/index.js";
 import memoTheme from "../utils/memoTheme.js";
+import createSimplePaletteValueFilter from "../utils/createSimplePaletteValueFilter.js";
 import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import formLabelClasses, { getFormLabelUtilityClasses } from "./formLabelClasses.js";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -48,7 +49,7 @@ export const FormLabelRoot = styled('label', {
   lineHeight: '1.4375em',
   padding: 0,
   position: 'relative',
-  variants: [...Object.entries(theme.palette).filter(([, value]) => value && value.main).map(([color]) => ({
+  variants: [...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color]) => ({
     props: {
       color
     },

package/modern/Grid/Grid.js

@@ -530,7 +530,6 @@ process.env.NODE_ENV !== "production" ? Grid.propTypes /* remove-proptypes */ =
    * Defines the `flex-wrap` style property.
    * It's applied for all screen sizes.
    * @default 'wrap'
-   * @deprecated Use `flexWrap` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   wrap: PropTypes.oneOf(['nowrap', 'wrap-reverse', 'wrap']),
   /**

package/modern/Icon/Icon.js

@@ -7,6 +7,7 @@ import composeClasses from '@mui/utils/composeClasses';
 import capitalize from "../utils/capitalize.js";
 import { styled } from "../zero-styled/index.js";
 import memoTheme from "../utils/memoTheme.js";
+import createSimplePaletteValueFilter from "../utils/createSimplePaletteValueFilter.js";
 import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import { getIconUtilityClass } from "./iconClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -93,7 +94,7 @@ const IconRoot = styled('span', {
     style: {
       color: undefined
     }
-  }, ...Object.entries(theme.palette).filter(([, palette]) => palette && palette.main).map(([color]) => ({
+  }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color]) => ({
     props: {
       color
     },

package/modern/IconButton/IconButton.js

@@ -8,6 +8,7 @@ import composeClasses from '@mui/utils/composeClasses';
 import { alpha } from '@mui/system/colorManipulator';
 import { styled } from "../zero-styled/index.js";
 import memoTheme from "../utils/memoTheme.js";
+import createSimplePaletteValueFilter from "../utils/createSimplePaletteValueFilter.js";
 import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import ButtonBase from "../ButtonBase/index.js";
 import capitalize from "../utils/capitalize.js";
@@ -101,7 +102,7 @@ const IconButtonRoot = styled(ButtonBase, {
     style: {
       color: 'inherit'
     }
-  }, ...Object.entries(theme.palette).filter(([, value]) => value && value.main) // check all the used fields in the style below
+  }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()) // check all the used fields in the style below
   .map(([color]) => ({
     props: {
       color
@@ -109,7 +110,7 @@ const IconButtonRoot = styled(ButtonBase, {
     style: {
       color: (theme.vars || theme).palette[color].main
     }
-  })), ...Object.entries(theme.palette).filter(([, value]) => value && value.main) // check all the used fields in the style below
+  })), ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()) // check all the used fields in the style below
   .map(([color]) => ({
     props: {
       color,

package/modern/Input/Input.js

@@ -9,6 +9,7 @@ import InputBase from "../InputBase/index.js";
 import rootShouldForwardProp from "../styles/rootShouldForwardProp.js";
 import { styled } from "../zero-styled/index.js";
 import memoTheme from "../utils/memoTheme.js";
+import createSimplePaletteValueFilter from "../utils/createSimplePaletteValueFilter.js";
 import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import inputClasses, { getInputUtilityClass } from "./inputClasses.js";
 import { rootOverridesResolver as inputBaseRootOverridesResolver, inputOverridesResolver as inputBaseInputOverridesResolver, InputBaseRoot, InputBaseInput } from "../InputBase/InputBase.js";
@@ -109,7 +110,7 @@ const InputRoot = styled(InputBaseRoot, {
           borderBottomStyle: 'dotted'
         }
       }
-    }, ...Object.entries(theme.palette).filter(([, value]) => value && value.main).map(([color]) => ({
+    }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color]) => ({
       props: {
         color,
         disableUnderline: false

package/modern/InputAdornment/InputAdornment.js

@@ -126,7 +126,7 @@ const InputAdornment = /*#__PURE__*/React.forwardRef(function InputAdornment(inP
         color: "textSecondary",
         children: children
       }) : /*#__PURE__*/_jsxs(React.Fragment, {
-        children: [position === 'start' ? ( /* notranslate needed while Google Translate will not fix zero-width space issue */_span || (_span = /*#__PURE__*/_jsx("span", {
+        children: [position === 'start' ? (/* notranslate needed while Google Translate will not fix zero-width space issue */_span || (_span = /*#__PURE__*/_jsx("span", {
           className: "notranslate",
           children: "\u200B"
         }))) : null, children]

package/modern/InputBase/InputBase.js

@@ -461,7 +461,7 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
     ...(slotProps.input ?? componentsProps.input)
   };
   return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [!disableInjectingGlobalStyles && typeof InputGlobalStyles === 'function' && ( // For Emotion/Styled-components, InputGlobalStyles will be a function
+    children: [!disableInjectingGlobalStyles && typeof InputGlobalStyles === 'function' && (// For Emotion/Styled-components, InputGlobalStyles will be a function
     // For Pigment CSS, this has no effect because the InputGlobalStyles will be null.
     _InputGlobalStyles || (_InputGlobalStyles = /*#__PURE__*/_jsx(InputGlobalStyles, {}))), /*#__PURE__*/_jsxs(Root, {
       ...rootProps,

package/modern/LinearProgress/LinearProgress.js

@@ -8,6 +8,7 @@ import { darken, lighten } from '@mui/system/colorManipulator';
 import { useRtl } from '@mui/system/RtlProvider';
 import { keyframes, css, styled } from "../zero-styled/index.js";
 import memoTheme from "../utils/memoTheme.js";
+import createSimplePaletteValueFilter from "../utils/createSimplePaletteValueFilter.js";
 import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import capitalize from "../utils/capitalize.js";
 import { getLinearProgressUtilityClass } from "./linearProgressClasses.js";
@@ -115,7 +116,7 @@ const LinearProgressRoot = styled('span', {
   '@media print': {
     colorAdjust: 'exact'
   },
-  variants: [...Object.entries(theme.palette).filter(([, value]) => value && value.main).map(([color]) => ({
+  variants: [...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color]) => ({
     props: {
       color
     },
@@ -180,7 +181,7 @@ const LinearProgressDashed = styled('span', {
       opacity: 0.3,
       backgroundImage: `radial-gradient(currentColor 0%, currentColor 16%, transparent 42%)`
     }
-  }, ...Object.entries(theme.palette).filter(([, value]) => value && value.main).map(([color]) => {
+  }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color]) => {
     const backgroundColor = getColorShade(theme, color);
     return {
       props: {
@@ -221,7 +222,7 @@ const LinearProgressBar1 = styled('span', {
     style: {
       backgroundColor: 'currentColor'
     }
-  }, ...Object.entries(theme.palette).filter(([, value]) => value && value.main).map(([color]) => ({
+  }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color]) => ({
     props: {
       color
     },
@@ -278,7 +279,7 @@ const LinearProgressBar2 = styled('span', {
   top: 0,
   transition: 'transform 0.2s linear',
   transformOrigin: 'left',
-  variants: [...Object.entries(theme.palette).filter(([, value]) => value && value.main).map(([color]) => ({
+  variants: [...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color]) => ({
     props: {
       color
     },
@@ -299,7 +300,7 @@ const LinearProgressBar2 = styled('span', {
     style: {
       opacity: 0.3
     }
-  }, ...Object.entries(theme.palette).filter(([, value]) => value && value.main).map(([color]) => ({
+  }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color]) => ({
     props: {
       color,
       variant: 'buffer'

package/modern/Link/Link.js

@@ -10,6 +10,7 @@ import isFocusVisible from '@mui/utils/isFocusVisible';
 import capitalize from "../utils/capitalize.js";
 import { styled, useTheme } from "../zero-styled/index.js";
 import memoTheme from "../utils/memoTheme.js";
+import createSimplePaletteValueFilter from "../utils/createSimplePaletteValueFilter.js";
 import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import Typography from "../Typography/index.js";
 import linkClasses, { getLinkUtilityClass } from "./linkClasses.js";
@@ -86,7 +87,7 @@ const LinkRoot = styled(Typography, {
       style: {
         textDecorationColor: 'var(--Link-underlineColor)'
       }
-    }, ...Object.entries(theme.palette).filter(([, value]) => value && value.main).map(([color]) => ({
+    }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color]) => ({
       props: {
         underline: 'always',
         color

package/modern/MenuList/MenuList.js

@@ -121,6 +121,14 @@ const MenuList = /*#__PURE__*/React.forwardRef(function MenuList(props, ref) {
   const handleKeyDown = event => {
     const list = listRef.current;
     const key = event.key;
+    const isModifierKeyPressed = event.ctrlKey || event.metaKey || event.altKey;
+    if (isModifierKeyPressed) {
+      if (onKeyDown) {
+        onKeyDown(event);
+      }
+      return;
+    }
+
     /**
      * @type {Element} - will always be defined since we are in a keydown handler
      * attached to an element. A keydown event is either dispatched to the activeElement

package/modern/NoSsr/NoSsr.js

@@ -9,10 +9,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
  *
  * This component can be useful in a variety of situations:
  *
- * *   Escape hatch for broken dependencies not supporting SSR.
- * *   Improve the time-to-first paint on the client by only rendering above the fold.
- * *   Reduce the rendering time on the server.
- * *   Under too heavy server load, you can turn on service degradation.
+ * * Escape hatch for broken dependencies not supporting SSR.
+ * * Improve the time-to-first paint on the client by only rendering above the fold.
+ * * Reduce the rendering time on the server.
+ * * Under too heavy server load, you can turn on service degradation.
  *
  * Demos:
  *

package/modern/OutlinedInput/OutlinedInput.js

@@ -10,6 +10,7 @@ import formControlState from "../FormControl/formControlState.js";
 import rootShouldForwardProp from "../styles/rootShouldForwardProp.js";
 import { styled } from "../zero-styled/index.js";
 import memoTheme from "../utils/memoTheme.js";
+import createSimplePaletteValueFilter from "../utils/createSimplePaletteValueFilter.js";
 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";
@@ -48,7 +49,7 @@ const OutlinedInputRoot = styled(InputBaseRoot, {
     [`&.${outlinedInputClasses.focused} .${outlinedInputClasses.notchedOutline}`]: {
       borderWidth: 2
     },
-    variants: [...Object.entries(theme.palette).filter(([, value]) => value && value.main).map(([color]) => ({
+    variants: [...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color]) => ({
       props: {
         color
       },

package/modern/PaginationItem/PaginationItem.js

@@ -9,6 +9,7 @@ import { useRtl } from '@mui/system/RtlProvider';
 import paginationItemClasses, { getPaginationItemUtilityClass } from "./paginationItemClasses.js";
 import ButtonBase from "../ButtonBase/index.js";
 import capitalize from "../utils/capitalize.js";
+import createSimplePaletteValueFilter from "../utils/createSimplePaletteValueFilter.js";
 import FirstPageIcon from "../internal/svg-icons/FirstPage.js";
 import LastPageIcon from "../internal/svg-icons/LastPage.js";
 import NavigateBeforeIcon from "../internal/svg-icons/NavigateBefore.js";
@@ -193,7 +194,7 @@ const PaginationItemPage = styled(ButtonBase, {
         }
       }
     }
-  }, ...Object.entries(theme.palette).filter(([, value]) => value && value.main && value.dark && value.contrastText).map(([color]) => ({
+  }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter(['dark', 'contrastText'])).map(([color]) => ({
     props: {
       variant: 'text',
       color
@@ -217,7 +218,7 @@ const PaginationItemPage = styled(ButtonBase, {
         }
       }
     }
-  })), ...Object.entries(theme.palette).filter(([, value]) => value && value.main && value.light).map(([color]) => ({
+  })), ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter(['light'])).map(([color]) => ({
     props: {
       variant: 'outlined',
       color

package/modern/Popover/Popover.js

@@ -419,6 +419,26 @@ process.env.NODE_ENV !== "production" ? Popover.propTypes /* remove-proptypes */
    * @default 'anchorEl'
    */
   anchorReference: PropTypes.oneOf(['anchorEl', 'anchorPosition', 'none']),
+  /**
+   * A backdrop component. This prop enables custom backdrop rendering.
+   * @deprecated Use `slotProps.root.slots.backdrop` instead. While this prop currently works, it will be removed in the next major version.
+   * Use the `slotProps.root.slots.backdrop` prop to make your application ready for the next version of Material UI.
+   * @default styled(Backdrop, {
+   *   name: 'MuiModal',
+   *   slot: 'Backdrop',
+   *   overridesResolver: (props, styles) => {
+   *     return styles.backdrop;
+   *   },
+   * })({
+   *   zIndex: -1,
+   * })
+   */
+  BackdropComponent: PropTypes.elementType,
+  /**
+   * Props applied to the [`Backdrop`](/material-ui/api/backdrop/) element.
+   * @deprecated Use `slotProps.root.slotProps.backdrop` instead.
+   */
+  BackdropProps: PropTypes.object,
   /**
    * The content of the component.
    */

package/modern/Portal/Portal.js

@@ -44,7 +44,7 @@ const Portal = /*#__PURE__*/React.forwardRef(function Portal(props, forwardedRef
     return undefined;
   }, [forwardedRef, mountNode, disablePortal]);
   if (disablePortal) {
-    if ( /*#__PURE__*/React.isValidElement(children)) {
+    if (/*#__PURE__*/React.isValidElement(children)) {
       const newProps = {
         ref: handleRef
       };

package/modern/Radio/Radio.js

@@ -10,11 +10,13 @@ import SwitchBase from "../internal/SwitchBase.js";
 import RadioButtonIcon from "./RadioButtonIcon.js";
 import capitalize from "../utils/capitalize.js";
 import createChainedFunction from "../utils/createChainedFunction.js";
+import useFormControl from "../FormControl/useFormControl.js";
 import useRadioGroup from "../RadioGroup/useRadioGroup.js";
 import radioClasses, { getRadioUtilityClass } from "./radioClasses.js";
 import rootShouldForwardProp from "../styles/rootShouldForwardProp.js";
 import { styled } from "../zero-styled/index.js";
 import memoTheme from "../utils/memoTheme.js";
+import createSimplePaletteValueFilter from "../utils/createSimplePaletteValueFilter.js";
 import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
@@ -51,6 +53,7 @@ const RadioRoot = styled(SwitchBase, {
   variants: [{
     props: {
       color: 'default',
+      disabled: false,
       disableRipple: false
     },
     style: {
@@ -58,9 +61,10 @@ const RadioRoot = styled(SwitchBase, {
         backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.action.active, theme.palette.action.hoverOpacity)
       }
     }
-  }, ...Object.entries(theme.palette).filter(([, palette]) => palette && palette.main).map(([color]) => ({
+  }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color]) => ({
     props: {
       color,
+      disabled: false,
       disableRipple: false
     },
     style: {
@@ -68,9 +72,10 @@ const RadioRoot = styled(SwitchBase, {
         backgroundColor: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette[color].main, theme.palette.action.hoverOpacity)
       }
     }
-  })), ...Object.entries(theme.palette).filter(([, palette]) => palette && palette.main).map(([color]) => ({
+  })), ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color]) => ({
     props: {
-      color
+      color,
+      disabled: false
     },
     style: {
       [`&.${radioClasses.checked}`]: {
@@ -118,11 +123,21 @@ const Radio = /*#__PURE__*/React.forwardRef(function Radio(inProps, ref) {
     onChange: onChangeProp,
     size = 'medium',
     className,
+    disabled: disabledProp,
     disableRipple = false,
     ...other
   } = props;
+  const muiFormControl = useFormControl();
+  let disabled = disabledProp;
+  if (muiFormControl) {
+    if (typeof disabled === 'undefined') {
+      disabled = muiFormControl.disabled;
+    }
+  }
+  disabled ?? (disabled = false);
   const ownerState = {
     ...props,
+    disabled,
     disableRipple,
     color,
     size
@@ -148,6 +163,7 @@ const Radio = /*#__PURE__*/React.forwardRef(function Radio(inProps, ref) {
     checkedIcon: /*#__PURE__*/React.cloneElement(checkedIcon, {
       fontSize: defaultCheckedIcon.props.fontSize ?? size
     }),
+    disabled: disabled,
     ownerState: ownerState,
     classes: classes,
     name: name,

package/modern/Slider/Slider.js

@@ -16,6 +16,7 @@ import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import slotShouldForwardProp from "../styles/slotShouldForwardProp.js";
 import shouldSpreadAdditionalProps from "../utils/shouldSpreadAdditionalProps.js";
 import capitalize from "../utils/capitalize.js";
+import createSimplePaletteValueFilter from "../utils/createSimplePaletteValueFilter.js";
 import BaseSliderValueLabel from "./SliderValueLabel.js";
 import sliderClasses, { getSliderUtilityClass } from "./sliderClasses.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -54,7 +55,7 @@ export const SliderRoot = styled('span', {
       transition: 'none'
     }
   },
-  variants: [...Object.entries(theme.palette).filter(([, palette]) => palette && palette.main).map(([color]) => ({
+  variants: [...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color]) => ({
     props: {
       color
     },
@@ -210,7 +211,7 @@ export const SliderTrack = styled('span', {
       style: {
         display: 'none'
       }
-    }, ...Object.entries(theme.palette).filter(([, palette]) => palette && palette.main).map(([color]) => ({
+    }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color]) => ({
       props: {
         color,
         track: 'inverted'
@@ -309,7 +310,7 @@ export const SliderThumb = styled('span', {
       left: '50%',
       transform: 'translate(-50%, 50%)'
     }
-  }, ...Object.entries(theme.palette).filter(([, palette]) => palette && palette.main).map(([color]) => ({
+  }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color]) => ({
     props: {
       color
     },

package/modern/SpeedDialIcon/SpeedDialIcon.js

@@ -104,7 +104,7 @@ const SpeedDialIcon = /*#__PURE__*/React.forwardRef(function SpeedDialIcon(inPro
   const ownerState = props;
   const classes = useUtilityClasses(ownerState);
   function formatIcon(icon, newClassName) {
-    if ( /*#__PURE__*/React.isValidElement(icon)) {
+    if (/*#__PURE__*/React.isValidElement(icon)) {
       return /*#__PURE__*/React.cloneElement(icon, {
         className: newClassName
       });

package/modern/StepButton/StepButton.js

@@ -82,7 +82,7 @@ const StepButton = /*#__PURE__*/React.forwardRef(function StepButton(inProps, re
     icon,
     optional
   };
-  const child = isMuiElement(children, ['StepLabel']) ? ( /*#__PURE__*/React.cloneElement(children, childProps)) : /*#__PURE__*/_jsx(StepLabel, {
+  const child = isMuiElement(children, ['StepLabel']) ? (/*#__PURE__*/React.cloneElement(children, childProps)) : /*#__PURE__*/_jsx(StepLabel, {
     ...childProps,
     children: children
   });

package/modern/Switch/Switch.js

@@ -8,6 +8,7 @@ import refType from '@mui/utils/refType';
 import composeClasses from '@mui/utils/composeClasses';
 import { alpha, darken, lighten } from '@mui/system/colorManipulator';
 import capitalize from "../utils/capitalize.js";
+import createSimplePaletteValueFilter from "../utils/createSimplePaletteValueFilter.js";
 import SwitchBase from "../internal/SwitchBase.js";
 import { styled } from "../zero-styled/index.js";
 import memoTheme from "../utils/memoTheme.js";
@@ -146,7 +147,7 @@ const SwitchSwitchBase = styled(SwitchBase, {
       backgroundColor: 'transparent'
     }
   },
-  variants: [...Object.entries(theme.palette).filter(([, value]) => value && value.main && value.light) // check all the used fields in the style below
+  variants: [...Object.entries(theme.palette).filter(createSimplePaletteValueFilter(['light'])) // check all the used fields in the style below
   .map(([color]) => ({
     props: {
       color