@mui/material 6.0.2 → 6.1.0

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/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/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

package/modern/ToggleButton/ToggleButton.js

@@ -11,6 +11,7 @@ import ButtonBase from "../ButtonBase/index.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 toggleButtonClasses, { getToggleButtonUtilityClass } from "./toggleButtonClasses.js";
 import ToggleButtonGroupContext from "../ToggleButtonGroup/ToggleButtonGroupContext.js";
@@ -77,7 +78,7 @@ const ToggleButtonRoot = styled(ButtonBase, {
         }
       }
     }
-  }, ...Object.entries(theme.palette).filter(([, palette]) => palette && palette.main).map(([color]) => ({
+  }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color]) => ({
     props: {
       color
     },

package/modern/Typography/Typography.js

@@ -8,6 +8,7 @@ import { styled, internal_createExtendSxProp } 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 { getTypographyUtilityClass } from "./typographyClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const v6Colors = {
@@ -64,7 +65,7 @@ export const TypographyRoot = styled('span', {
       variant
     },
     style: value
-  })), ...Object.entries(theme.palette).filter(([, value]) => value && value.main).map(([color]) => ({
+  })), ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color]) => ({
     props: {
       color
     },

package/modern/index.js

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

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

@@ -7,6 +7,6 @@ import { createSvgIcon } from "../../utils/index.js";
  * @ignore - internal component.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-export default createSvgIcon( /*#__PURE__*/_jsx("path", {
+export default createSvgIcon(/*#__PURE__*/_jsx("path", {
   d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
 }), 'Add');

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

@@ -7,6 +7,6 @@ import createSvgIcon from "../../utils/createSvgIcon.js";
  * @ignore - internal component.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-export default createSvgIcon( /*#__PURE__*/_jsx("path", {
+export default createSvgIcon(/*#__PURE__*/_jsx("path", {
   d: "M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
 }), 'ArrowDownward');

package/modern/internal/svg-icons/ArrowDropDown.js

@@ -7,6 +7,6 @@ import createSvgIcon from "../../utils/createSvgIcon.js";
  * @ignore - internal component.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-export default createSvgIcon( /*#__PURE__*/_jsx("path", {
+export default createSvgIcon(/*#__PURE__*/_jsx("path", {
   d: "M7 10l5 5 5-5z"
 }), 'ArrowDropDown');

package/modern/internal/svg-icons/Cancel.js

@@ -7,6 +7,6 @@ import createSvgIcon from "../../utils/createSvgIcon.js";
  * @ignore - internal component.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-export default createSvgIcon( /*#__PURE__*/_jsx("path", {
+export default createSvgIcon(/*#__PURE__*/_jsx("path", {
   d: "M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"
 }), 'Cancel');

package/modern/internal/svg-icons/CheckBox.js

@@ -7,6 +7,6 @@ import createSvgIcon from "../../utils/createSvgIcon.js";
  * @ignore - internal component.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-export default createSvgIcon( /*#__PURE__*/_jsx("path", {
+export default createSvgIcon(/*#__PURE__*/_jsx("path", {
   d: "M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
 }), 'CheckBox');

package/modern/internal/svg-icons/CheckBoxOutlineBlank.js

@@ -7,6 +7,6 @@ import createSvgIcon from "../../utils/createSvgIcon.js";
  * @ignore - internal component.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-export default createSvgIcon( /*#__PURE__*/_jsx("path", {
+export default createSvgIcon(/*#__PURE__*/_jsx("path", {
   d: "M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
 }), 'CheckBoxOutlineBlank');

package/modern/internal/svg-icons/CheckCircle.js

@@ -7,6 +7,6 @@ import createSvgIcon from "../../utils/createSvgIcon.js";
  * @ignore - internal component.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-export default createSvgIcon( /*#__PURE__*/_jsx("path", {
+export default createSvgIcon(/*#__PURE__*/_jsx("path", {
   d: "M12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24zm-2 17l-5-5 1.4-1.4 3.6 3.6 7.6-7.6L19 8l-9 9z"
 }), 'CheckCircle');

package/modern/internal/svg-icons/Close.js

@@ -9,6 +9,6 @@ import createSvgIcon from "../../utils/createSvgIcon.js";
  * Alias to `Clear`.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-export default createSvgIcon( /*#__PURE__*/_jsx("path", {
+export default createSvgIcon(/*#__PURE__*/_jsx("path", {
   d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
 }), 'Close');

package/modern/internal/svg-icons/ErrorOutline.js

@@ -7,6 +7,6 @@ import createSvgIcon from "../../utils/createSvgIcon.js";
  * @ignore - internal component.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-export default createSvgIcon( /*#__PURE__*/_jsx("path", {
+export default createSvgIcon(/*#__PURE__*/_jsx("path", {
   d: "M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
 }), 'ErrorOutline');

package/modern/internal/svg-icons/FirstPage.js

@@ -7,6 +7,6 @@ import createSvgIcon from "../../utils/createSvgIcon.js";
  * @ignore - internal component.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-export default createSvgIcon( /*#__PURE__*/_jsx("path", {
+export default createSvgIcon(/*#__PURE__*/_jsx("path", {
   d: "M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6zM6 6h2v12H6z"
 }), 'FirstPage');

package/modern/internal/svg-icons/IndeterminateCheckBox.js

@@ -7,6 +7,6 @@ import createSvgIcon from "../../utils/createSvgIcon.js";
  * @ignore - internal component.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-export default createSvgIcon( /*#__PURE__*/_jsx("path", {
+export default createSvgIcon(/*#__PURE__*/_jsx("path", {
   d: "M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10H7v-2h10v2z"
 }), 'IndeterminateCheckBox');

package/modern/internal/svg-icons/InfoOutlined.js

@@ -7,6 +7,6 @@ import createSvgIcon from "../../utils/createSvgIcon.js";
  * @ignore - internal component.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-export default createSvgIcon( /*#__PURE__*/_jsx("path", {
+export default createSvgIcon(/*#__PURE__*/_jsx("path", {
   d: "M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20, 12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10, 10 0 0,0 12,2M11,17H13V11H11V17Z"
 }), 'InfoOutlined');

package/modern/internal/svg-icons/KeyboardArrowLeft.js

@@ -7,6 +7,6 @@ import createSvgIcon from "../../utils/createSvgIcon.js";
  * @ignore - internal component.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-export default createSvgIcon( /*#__PURE__*/_jsx("path", {
+export default createSvgIcon(/*#__PURE__*/_jsx("path", {
   d: "M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
 }), 'KeyboardArrowLeft');