@mui/material 6.0.1 → 6.1.0

package/node/Chip/Chip.js

@@ -19,6 +19,7 @@ var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
 var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
+var _createSimplePaletteValueFilter = _interopRequireDefault(require("../utils/createSimplePaletteValueFilter"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _chipClasses = _interopRequireWildcard(require("./chipClasses"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -165,7 +166,7 @@ const ChipRoot = (0, _zeroStyled.styled)('div', {
           marginLeft: -4
         }
       }
-    }, ...Object.entries(theme.palette).filter(([, value]) => value && value.main && value.contrastText).map(([color]) => {
+    }, ...Object.entries(theme.palette).filter((0, _createSimplePaletteValueFilter.default)(['contrastText'])).map(([color]) => {
       return {
         props: {
           color
@@ -204,7 +205,7 @@ const ChipRoot = (0, _zeroStyled.styled)('div', {
           backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : (0, _colorManipulator.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((0, _createSimplePaletteValueFilter.default)(['dark'])).map(([color]) => {
       return {
         props: {
           color,
@@ -234,7 +235,7 @@ const ChipRoot = (0, _zeroStyled.styled)('div', {
           boxShadow: (theme.vars || theme).shadows[1]
         }
       }
-    }, ...Object.entries(theme.palette).filter(([, value]) => value && value.dark).map(([color]) => ({
+    }, ...Object.entries(theme.palette).filter((0, _createSimplePaletteValueFilter.default)(['dark'])).map(([color]) => ({
       props: {
         color,
         clickable: true
@@ -276,7 +277,7 @@ const ChipRoot = (0, _zeroStyled.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((0, _createSimplePaletteValueFilter.default)()) // no need to check for mainChannel as it's calculated from main
     .map(([color]) => ({
       props: {
         variant: 'outlined',
@@ -433,7 +434,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: (0, _clsx.default)(deleteIconProp.props.className, classes.deleteIcon),
       onClick: handleDeleteIconClick
     })) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Cancel.default, {

package/node/CircularProgress/CircularProgress.js

@@ -16,6 +16,7 @@ var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
+var _createSimplePaletteValueFilter = _interopRequireDefault(require("../utils/createSimplePaletteValueFilter"));
 var _circularProgressClasses = require("./circularProgressClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const SIZE = 44;
@@ -95,7 +96,7 @@ const CircularProgressRoot = (0, _zeroStyled.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((0, _createSimplePaletteValueFilter.default)()).map(([color]) => ({
     props: {
       color
     },

package/node/Dialog/Dialog.js

@@ -113,6 +113,7 @@ const DialogPaper = (0, _zeroStyled.styled)(_Paper.default, {
 }) => ({
   margin: 32,
   position: 'relative',
+  overflowY: 'auto',
   '@media print': {
     overflowY: 'visible',
     boxShadow: 'none'

package/node/Fab/Fab.js

@@ -17,6 +17,7 @@ var _fabClasses = _interopRequireWildcard(require("./fabClasses"));
 var _rootShouldForwardProp = _interopRequireDefault(require("../styles/rootShouldForwardProp"));
 var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
+var _createSimplePaletteValueFilter = _interopRequireDefault(require("../utils/createSimplePaletteValueFilter"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
@@ -140,7 +141,7 @@ const FabRoot = (0, _zeroStyled.styled)(_ButtonBase.default, {
 })), (0, _memoTheme.default)(({
   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((0, _createSimplePaletteValueFilter.default)(['dark', 'contrastText'])) // check all the used fields in the style below
   .map(([color]) => ({
     props: {
       color

package/node/FilledInput/FilledInput.js

@@ -16,6 +16,7 @@ var _InputBase = _interopRequireDefault(require("../InputBase"));
 var _rootShouldForwardProp = _interopRequireDefault(require("../styles/rootShouldForwardProp"));
 var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
+var _createSimplePaletteValueFilter = _interopRequireDefault(require("../utils/createSimplePaletteValueFilter"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _filledInputClasses = _interopRequireWildcard(require("./filledInputClasses"));
 var _InputBase2 = require("../InputBase/InputBase");
@@ -129,7 +130,7 @@ const FilledInputRoot = (0, _zeroStyled.styled)(_InputBase2.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((0, _createSimplePaletteValueFilter.default)()) // check all the used fields in the style below
     .map(([color]) => ({
       props: {
         disableUnderline: false,

package/node/FormLabel/FormLabel.js

@@ -16,6 +16,7 @@ var _useFormControl = _interopRequireDefault(require("../FormControl/useFormCont
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
+var _createSimplePaletteValueFilter = _interopRequireDefault(require("../utils/createSimplePaletteValueFilter"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _formLabelClasses = _interopRequireWildcard(require("./formLabelClasses"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -55,7 +56,7 @@ const FormLabelRoot = exports.FormLabelRoot = (0, _zeroStyled.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((0, _createSimplePaletteValueFilter.default)()).map(([color]) => ({
     props: {
       color
     },

package/node/Grid/Grid.js

@@ -543,7 +543,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.default.oneOf(['nowrap', 'wrap-reverse', 'wrap']),
   /**

package/node/Icon/Icon.js

@@ -14,6 +14,7 @@ var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
+var _createSimplePaletteValueFilter = _interopRequireDefault(require("../utils/createSimplePaletteValueFilter"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _iconClasses = require("./iconClasses");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -100,7 +101,7 @@ const IconRoot = (0, _zeroStyled.styled)('span', {
     style: {
       color: undefined
     }
-  }, ...Object.entries(theme.palette).filter(([, palette]) => palette && palette.main).map(([color]) => ({
+  }, ...Object.entries(theme.palette).filter((0, _createSimplePaletteValueFilter.default)()).map(([color]) => ({
     props: {
       color
     },

package/node/IconButton/IconButton.js

@@ -15,6 +15,7 @@ var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"
 var _colorManipulator = require("@mui/system/colorManipulator");
 var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
+var _createSimplePaletteValueFilter = _interopRequireDefault(require("../utils/createSimplePaletteValueFilter"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
@@ -108,7 +109,7 @@ const IconButtonRoot = (0, _zeroStyled.styled)(_ButtonBase.default, {
     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((0, _createSimplePaletteValueFilter.default)()) // check all the used fields in the style below
   .map(([color]) => ({
     props: {
       color
@@ -116,7 +117,7 @@ const IconButtonRoot = (0, _zeroStyled.styled)(_ButtonBase.default, {
     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((0, _createSimplePaletteValueFilter.default)()) // check all the used fields in the style below
   .map(([color]) => ({
     props: {
       color,

package/node/Input/Input.js

@@ -16,6 +16,7 @@ var _InputBase = _interopRequireDefault(require("../InputBase"));
 var _rootShouldForwardProp = _interopRequireDefault(require("../styles/rootShouldForwardProp"));
 var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
+var _createSimplePaletteValueFilter = _interopRequireDefault(require("../utils/createSimplePaletteValueFilter"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _inputClasses = _interopRequireWildcard(require("./inputClasses"));
 var _InputBase2 = require("../InputBase/InputBase");
@@ -116,7 +117,7 @@ const InputRoot = (0, _zeroStyled.styled)(_InputBase2.InputBaseRoot, {
           borderBottomStyle: 'dotted'
         }
       }
-    }, ...Object.entries(theme.palette).filter(([, value]) => value && value.main).map(([color]) => ({
+    }, ...Object.entries(theme.palette).filter((0, _createSimplePaletteValueFilter.default)()).map(([color]) => ({
       props: {
         color,
         disableUnderline: false

package/node/InputAdornment/InputAdornment.js

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

package/node/InputBase/InputBase.js

@@ -470,7 +470,7 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
     ...(slotProps.input ?? componentsProps.input)
   };
   return /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(InputGlobalStyles, {}))), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, {
       ...rootProps,

package/node/LinearProgress/LinearProgress.js

@@ -15,6 +15,7 @@ var _colorManipulator = require("@mui/system/colorManipulator");
 var _RtlProvider = require("@mui/system/RtlProvider");
 var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
+var _createSimplePaletteValueFilter = _interopRequireDefault(require("../utils/createSimplePaletteValueFilter"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _linearProgressClasses = require("./linearProgressClasses");
@@ -122,7 +123,7 @@ const LinearProgressRoot = (0, _zeroStyled.styled)('span', {
   '@media print': {
     colorAdjust: 'exact'
   },
-  variants: [...Object.entries(theme.palette).filter(([, value]) => value && value.main).map(([color]) => ({
+  variants: [...Object.entries(theme.palette).filter((0, _createSimplePaletteValueFilter.default)()).map(([color]) => ({
     props: {
       color
     },
@@ -187,7 +188,7 @@ const LinearProgressDashed = (0, _zeroStyled.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((0, _createSimplePaletteValueFilter.default)()).map(([color]) => {
     const backgroundColor = getColorShade(theme, color);
     return {
       props: {
@@ -228,7 +229,7 @@ const LinearProgressBar1 = (0, _zeroStyled.styled)('span', {
     style: {
       backgroundColor: 'currentColor'
     }
-  }, ...Object.entries(theme.palette).filter(([, value]) => value && value.main).map(([color]) => ({
+  }, ...Object.entries(theme.palette).filter((0, _createSimplePaletteValueFilter.default)()).map(([color]) => ({
     props: {
       color
     },
@@ -285,7 +286,7 @@ const LinearProgressBar2 = (0, _zeroStyled.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((0, _createSimplePaletteValueFilter.default)()).map(([color]) => ({
     props: {
       color
     },
@@ -306,7 +307,7 @@ const LinearProgressBar2 = (0, _zeroStyled.styled)('span', {
     style: {
       opacity: 0.3
     }
-  }, ...Object.entries(theme.palette).filter(([, value]) => value && value.main).map(([color]) => ({
+  }, ...Object.entries(theme.palette).filter((0, _createSimplePaletteValueFilter.default)()).map(([color]) => ({
     props: {
       color,
       variant: 'buffer'

package/node/Link/Link.js

@@ -17,6 +17,7 @@ var _isFocusVisible = _interopRequireDefault(require("@mui/utils/isFocusVisible"
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
+var _createSimplePaletteValueFilter = _interopRequireDefault(require("../utils/createSimplePaletteValueFilter"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _Typography = _interopRequireDefault(require("../Typography"));
 var _linkClasses = _interopRequireWildcard(require("./linkClasses"));
@@ -93,7 +94,7 @@ const LinkRoot = (0, _zeroStyled.styled)(_Typography.default, {
       style: {
         textDecorationColor: 'var(--Link-underlineColor)'
       }
-    }, ...Object.entries(theme.palette).filter(([, value]) => value && value.main).map(([color]) => ({
+    }, ...Object.entries(theme.palette).filter((0, _createSimplePaletteValueFilter.default)()).map(([color]) => ({
       props: {
         underline: 'always',
         color

package/node/MenuList/MenuList.js

@@ -128,6 +128,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/node/NoSsr/NoSsr.js

@@ -16,10 +16,10 @@ var _jsxRuntime = require("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/node/OutlinedInput/OutlinedInput.js

@@ -17,6 +17,7 @@ var _formControlState = _interopRequireDefault(require("../FormControl/formContr
 var _rootShouldForwardProp = _interopRequireDefault(require("../styles/rootShouldForwardProp"));
 var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
+var _createSimplePaletteValueFilter = _interopRequireDefault(require("../utils/createSimplePaletteValueFilter"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _outlinedInputClasses = _interopRequireWildcard(require("./outlinedInputClasses"));
 var _InputBase = _interopRequireWildcard(require("../InputBase/InputBase"));
@@ -55,7 +56,7 @@ const OutlinedInputRoot = (0, _zeroStyled.styled)(_InputBase.InputBaseRoot, {
     [`&.${_outlinedInputClasses.default.focused} .${_outlinedInputClasses.default.notchedOutline}`]: {
       borderWidth: 2
     },
-    variants: [...Object.entries(theme.palette).filter(([, value]) => value && value.main).map(([color]) => ({
+    variants: [...Object.entries(theme.palette).filter((0, _createSimplePaletteValueFilter.default)()).map(([color]) => ({
       props: {
         color
       },

package/node/PaginationItem/PaginationItem.js

@@ -16,6 +16,7 @@ var _RtlProvider = require("@mui/system/RtlProvider");
 var _paginationItemClasses = _interopRequireWildcard(require("./paginationItemClasses"));
 var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
+var _createSimplePaletteValueFilter = _interopRequireDefault(require("../utils/createSimplePaletteValueFilter"));
 var _FirstPage = _interopRequireDefault(require("../internal/svg-icons/FirstPage"));
 var _LastPage = _interopRequireDefault(require("../internal/svg-icons/LastPage"));
 var _NavigateBefore = _interopRequireDefault(require("../internal/svg-icons/NavigateBefore"));
@@ -200,7 +201,7 @@ const PaginationItemPage = (0, _zeroStyled.styled)(_ButtonBase.default, {
         }
       }
     }
-  }, ...Object.entries(theme.palette).filter(([, value]) => value && value.main && value.dark && value.contrastText).map(([color]) => ({
+  }, ...Object.entries(theme.palette).filter((0, _createSimplePaletteValueFilter.default)(['dark', 'contrastText'])).map(([color]) => ({
     props: {
       variant: 'text',
       color
@@ -224,7 +225,7 @@ const PaginationItemPage = (0, _zeroStyled.styled)(_ButtonBase.default, {
         }
       }
     }
-  })), ...Object.entries(theme.palette).filter(([, value]) => value && value.main && value.light).map(([color]) => ({
+  })), ...Object.entries(theme.palette).filter((0, _createSimplePaletteValueFilter.default)(['light'])).map(([color]) => ({
     props: {
       variant: 'outlined',
       color

package/node/Popover/Popover.js

@@ -428,6 +428,26 @@ process.env.NODE_ENV !== "production" ? Popover.propTypes /* remove-proptypes */
    * @default 'anchorEl'
    */
   anchorReference: _propTypes.default.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.default.elementType,
+  /**
+   * Props applied to the [`Backdrop`](/material-ui/api/backdrop/) element.
+   * @deprecated Use `slotProps.root.slotProps.backdrop` instead.
+   */
+  BackdropProps: _propTypes.default.object,
   /**
    * The content of the component.
    */

package/node/Portal/Portal.js

@@ -51,7 +51,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/node/Radio/Radio.js

@@ -17,11 +17,13 @@ var _SwitchBase = _interopRequireDefault(require("../internal/SwitchBase"));
 var _RadioButtonIcon = _interopRequireDefault(require("./RadioButtonIcon"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _createChainedFunction = _interopRequireDefault(require("../utils/createChainedFunction"));
+var _useFormControl = _interopRequireDefault(require("../FormControl/useFormControl"));
 var _useRadioGroup = _interopRequireDefault(require("../RadioGroup/useRadioGroup"));
 var _radioClasses = _interopRequireWildcard(require("./radioClasses"));
 var _rootShouldForwardProp = _interopRequireDefault(require("../styles/rootShouldForwardProp"));
 var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
+var _createSimplePaletteValueFilter = _interopRequireDefault(require("../utils/createSimplePaletteValueFilter"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
@@ -58,6 +60,7 @@ const RadioRoot = (0, _zeroStyled.styled)(_SwitchBase.default, {
   variants: [{
     props: {
       color: 'default',
+      disabled: false,
       disableRipple: false
     },
     style: {
@@ -65,9 +68,10 @@ const RadioRoot = (0, _zeroStyled.styled)(_SwitchBase.default, {
         backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})` : (0, _colorManipulator.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((0, _createSimplePaletteValueFilter.default)()).map(([color]) => ({
     props: {
       color,
+      disabled: false,
       disableRipple: false
     },
     style: {
@@ -75,9 +79,10 @@ const RadioRoot = (0, _zeroStyled.styled)(_SwitchBase.default, {
         backgroundColor: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : (0, _colorManipulator.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((0, _createSimplePaletteValueFilter.default)()).map(([color]) => ({
     props: {
-      color
+      color,
+      disabled: false
     },
     style: {
       [`&.${_radioClasses.default.checked}`]: {
@@ -125,11 +130,21 @@ const Radio = /*#__PURE__*/React.forwardRef(function Radio(inProps, ref) {
     onChange: onChangeProp,
     size = 'medium',
     className,
+    disabled: disabledProp,
     disableRipple = false,
     ...other
   } = props;
+  const muiFormControl = (0, _useFormControl.default)();
+  let disabled = disabledProp;
+  if (muiFormControl) {
+    if (typeof disabled === 'undefined') {
+      disabled = muiFormControl.disabled;
+    }
+  }
+  disabled ?? (disabled = false);
   const ownerState = {
     ...props,
+    disabled,
     disableRipple,
     color,
     size
@@ -155,6 +170,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/node/Slider/Slider.js

@@ -23,6 +23,7 @@ var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _slotShouldForwardProp = _interopRequireDefault(require("../styles/slotShouldForwardProp"));
 var _shouldSpreadAdditionalProps = _interopRequireDefault(require("../utils/shouldSpreadAdditionalProps"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
+var _createSimplePaletteValueFilter = _interopRequireDefault(require("../utils/createSimplePaletteValueFilter"));
 var _SliderValueLabel = _interopRequireDefault(require("./SliderValueLabel"));
 var _sliderClasses = _interopRequireWildcard(require("./sliderClasses"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -61,7 +62,7 @@ const SliderRoot = exports.SliderRoot = (0, _zeroStyled.styled)('span', {
       transition: 'none'
     }
   },
-  variants: [...Object.entries(theme.palette).filter(([, palette]) => palette && palette.main).map(([color]) => ({
+  variants: [...Object.entries(theme.palette).filter((0, _createSimplePaletteValueFilter.default)()).map(([color]) => ({
     props: {
       color
     },
@@ -217,7 +218,7 @@ const SliderTrack = exports.SliderTrack = (0, _zeroStyled.styled)('span', {
       style: {
         display: 'none'
       }
-    }, ...Object.entries(theme.palette).filter(([, palette]) => palette && palette.main).map(([color]) => ({
+    }, ...Object.entries(theme.palette).filter((0, _createSimplePaletteValueFilter.default)()).map(([color]) => ({
       props: {
         color,
         track: 'inverted'
@@ -316,7 +317,7 @@ const SliderThumb = exports.SliderThumb = (0, _zeroStyled.styled)('span', {
       left: '50%',
       transform: 'translate(-50%, 50%)'
     }
-  }, ...Object.entries(theme.palette).filter(([, palette]) => palette && palette.main).map(([color]) => ({
+  }, ...Object.entries(theme.palette).filter((0, _createSimplePaletteValueFilter.default)()).map(([color]) => ({
     props: {
       color
     },

package/node/SpeedDialIcon/SpeedDialIcon.js

@@ -111,7 +111,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/node/StepButton/StepButton.js

@@ -89,7 +89,7 @@ const StepButton = /*#__PURE__*/React.forwardRef(function StepButton(inProps, re
     icon,
     optional
   };
-  const child = (0, _isMuiElement.default)(children, ['StepLabel']) ? ( /*#__PURE__*/React.cloneElement(children, childProps)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_StepLabel.default, {
+  const child = (0, _isMuiElement.default)(children, ['StepLabel']) ? (/*#__PURE__*/React.cloneElement(children, childProps)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_StepLabel.default, {
     ...childProps,
     children: children
   });

package/node/Switch/Switch.js

@@ -15,6 +15,7 @@ var _refType = _interopRequireDefault(require("@mui/utils/refType"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _colorManipulator = require("@mui/system/colorManipulator");
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
+var _createSimplePaletteValueFilter = _interopRequireDefault(require("../utils/createSimplePaletteValueFilter"));
 var _SwitchBase = _interopRequireDefault(require("../internal/SwitchBase"));
 var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
@@ -153,7 +154,7 @@ const SwitchSwitchBase = (0, _zeroStyled.styled)(_SwitchBase.default, {
       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((0, _createSimplePaletteValueFilter.default)(['light'])) // check all the used fields in the style below
   .map(([color]) => ({
     props: {
       color

package/node/ToggleButton/ToggleButton.js

@@ -18,6 +18,7 @@ var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
+var _createSimplePaletteValueFilter = _interopRequireDefault(require("../utils/createSimplePaletteValueFilter"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _toggleButtonClasses = _interopRequireWildcard(require("./toggleButtonClasses"));
 var _ToggleButtonGroupContext = _interopRequireDefault(require("../ToggleButtonGroup/ToggleButtonGroupContext"));
@@ -84,7 +85,7 @@ const ToggleButtonRoot = (0, _zeroStyled.styled)(_ButtonBase.default, {
         }
       }
     }
-  }, ...Object.entries(theme.palette).filter(([, palette]) => palette && palette.main).map(([color]) => ({
+  }, ...Object.entries(theme.palette).filter((0, _createSimplePaletteValueFilter.default)()).map(([color]) => ({
     props: {
       color
     },

package/node/Typography/Typography.js

@@ -15,6 +15,7 @@ var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
+var _createSimplePaletteValueFilter = _interopRequireDefault(require("../utils/createSimplePaletteValueFilter"));
 var _typographyClasses = require("./typographyClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const v6Colors = {
@@ -71,7 +72,7 @@ const TypographyRoot = exports.TypographyRoot = (0, _zeroStyled.styled)('span',
       variant
     },
     style: value
-  })), ...Object.entries(theme.palette).filter(([, value]) => value && value.main).map(([color]) => ({
+  })), ...Object.entries(theme.palette).filter((0, _createSimplePaletteValueFilter.default)()).map(([color]) => ({
     props: {
       color
     },

package/node/index.js

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

package/node/internal/svg-icons/Add.js

@@ -12,6 +12,6 @@ var _jsxRuntime = require("react/jsx-runtime");
 /**
  * @ignore - internal component.
  */
-var _default = exports.default = (0, _utils.createSvgIcon)( /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+var _default = exports.default = (0, _utils.createSvgIcon)(/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
   d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
 }), 'Add');

package/node/internal/svg-icons/ArrowDownward.js

@@ -13,6 +13,6 @@ var _jsxRuntime = require("react/jsx-runtime");
 /**
  * @ignore - internal component.
  */
-var _default = exports.default = (0, _createSvgIcon.default)( /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+var _default = exports.default = (0, _createSvgIcon.default)(/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
   d: "M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
 }), 'ArrowDownward');