@mui/material 6.0.2 → 6.1.1-dev.20240919-130050-82a6448768

package/internal/svg-icons/SuccessOutlined.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,12A8,8 0 0,1 12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4C12.76,4 13.5,4.11 14.2, 4.31L15.77,2.74C14.61,2.26 13.34,2 12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0, 0 22,12M7.91,10.08L6.5,11.5L11,16L21,6L19.59,4.58L11,13.17L7.91,10.08Z"
 }), 'SuccessOutlined');

package/internal/svg-icons/Warning.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: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"
 }), 'Warning');

package/modern/Alert/Alert.js

@@ -10,6 +10,7 @@ import memoTheme from "../utils/memoTheme.js";
 import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import useSlot from "../utils/useSlot.js";
 import capitalize from "../utils/capitalize.js";
+import createSimplePaletteValueFilter from "../utils/createSimplePaletteValueFilter.js";
 import Paper from "../Paper/index.js";
 import alertClasses, { getAlertUtilityClass } from "./alertClasses.js";
 import IconButton from "../IconButton/index.js";
@@ -53,7 +54,7 @@ const AlertRoot = styled(Paper, {
     backgroundColor: 'transparent',
     display: 'flex',
     padding: '6px 16px',
-    variants: [...Object.entries(theme.palette).filter(([, value]) => value && value.main && value.light).map(([color]) => ({
+    variants: [...Object.entries(theme.palette).filter(createSimplePaletteValueFilter(['light'])).map(([color]) => ({
       props: {
         colorSeverity: color,
         variant: 'standard'
@@ -67,7 +68,7 @@ const AlertRoot = styled(Paper, {
           color: theme.palette[color].main
         }
       }
-    })), ...Object.entries(theme.palette).filter(([, value]) => value && value.main && value.light).map(([color]) => ({
+    })), ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter(['light'])).map(([color]) => ({
       props: {
         colorSeverity: color,
         variant: 'outlined'
@@ -81,7 +82,7 @@ const AlertRoot = styled(Paper, {
           color: theme.palette[color].main
         }
       }
-    })), ...Object.entries(theme.palette).filter(([, value]) => value && value.main && value.dark).map(([color]) => ({
+    })), ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter(['dark'])).map(([color]) => ({
       props: {
         colorSeverity: color,
         variant: 'filled'

package/modern/AppBar/AppBar.js

@@ -8,6 +8,7 @@ import { 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 Paper from "../Paper/index.js";
 import { getAppBarUtilityClass } from "./appBarClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -114,7 +115,7 @@ const AppBarRoot = styled(Paper, {
         '--AppBar-color': theme.vars ? theme.vars.palette.text.primary : theme.palette.getContrastText(theme.palette.grey[900])
       })
     }
-  }, ...Object.entries(theme.palette).filter(([, palette]) => palette && palette.main && palette.contrastText).map(([color]) => ({
+  }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter(['contrastText'])).map(([color]) => ({
     props: {
       color
     },

package/modern/Autocomplete/Autocomplete.js

@@ -604,7 +604,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     const more = startAdornment.length - limitTags;
     if (!focused && more > 0) {
       startAdornment = startAdornment.splice(0, limitTags);
-      startAdornment.push( /*#__PURE__*/_jsx("span", {
+      startAdornment.push(/*#__PURE__*/_jsx("span", {
         className: classes.tag,
         children: getLimitTagsText(more)
       }, startAdornment.length));
@@ -662,7 +662,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
   });
   let autocompletePopper = null;
   if (groupedOptions.length > 0) {
-    autocompletePopper = renderAutocompletePopperChildren( /*#__PURE__*/_jsx(AutocompleteListbox, {
+    autocompletePopper = renderAutocompletePopperChildren(/*#__PURE__*/_jsx(AutocompleteListbox, {
       as: ListboxSlot,
       ...listboxProps,
       children: groupedOptions.map((option, index) => {
@@ -677,13 +677,13 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
       })
     }));
   } else if (loading && groupedOptions.length === 0) {
-    autocompletePopper = renderAutocompletePopperChildren( /*#__PURE__*/_jsx(AutocompleteLoading, {
+    autocompletePopper = renderAutocompletePopperChildren(/*#__PURE__*/_jsx(AutocompleteLoading, {
       className: classes.loading,
       ownerState: ownerState,
       children: loadingText
     }));
   } else if (groupedOptions.length === 0 && !freeSolo && !loading) {
-    autocompletePopper = renderAutocompletePopperChildren( /*#__PURE__*/_jsx(AutocompleteNoOptions, {
+    autocompletePopper = renderAutocompletePopperChildren(/*#__PURE__*/_jsx(AutocompleteNoOptions, {
       className: classes.noOptions,
       ownerState: ownerState,
       role: "presentation",

package/modern/Backdrop/Backdrop.js

@@ -10,6 +10,13 @@ import useSlot from "../utils/useSlot.js";
 import Fade from "../Fade/index.js";
 import { getBackdropUtilityClass } from "./backdropClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+const removeOwnerState = props => {
+  const {
+    ownerState,
+    ...rest
+  } = props;
+  return rest;
+};
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -98,12 +105,12 @@ const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
     externalForwardedProps,
     ownerState
   });
-  delete transitionProps.ownerState;
+  const transitionPropsRemoved = removeOwnerState(transitionProps);
   return /*#__PURE__*/_jsx(TransitionSlot, {
     in: open,
     timeout: transitionDuration,
     ...other,
-    ...transitionProps,
+    ...transitionPropsRemoved,
     children: /*#__PURE__*/_jsx(RootSlot, {
       "aria-hidden": true,
       ...rootProps,

package/modern/Badge/Badge.js

@@ -9,6 +9,7 @@ import useSlotProps from '@mui/utils/useSlotProps';
 import useBadge from "./useBadge.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 capitalize from "../utils/capitalize.js";
 import badgeClasses, { getBadgeUtilityClass } from "./badgeClasses.js";
@@ -75,7 +76,7 @@ const BadgeBadge = styled('span', {
     easing: theme.transitions.easing.easeInOut,
     duration: theme.transitions.duration.enteringScreen
   }),
-  variants: [...Object.entries(theme.palette).filter(([, palette]) => palette && palette.main && palette.contrastText).map(([color]) => ({
+  variants: [...Object.entries(theme.palette).filter(createSimplePaletteValueFilter(['contrastText'])).map(([color]) => ({
     props: {
       color
     },

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/ClickAwayListener/ClickAwayListener.js

@@ -79,7 +79,7 @@ function ClickAwayListener(props) {
 
     // If not enough, can use https://github.com/DieterHolvoet/event-propagation-path/blob/master/propagationPath.js
     if (event.composedPath) {
-      insideDOM = event.composedPath().indexOf(nodeRef.current) > -1;
+      insideDOM = event.composedPath().includes(nodeRef.current);
     } else {
       insideDOM = !doc.documentElement.contains(
       // @ts-expect-error returns `false` as intended when not dispatched from a Node

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/FormControl/FormControl.js

@@ -170,9 +170,8 @@ const FormControl = /*#__PURE__*/React.forwardRef(function FormControl(inProps,
   }
   const focused = visuallyFocused !== undefined && !disabled ? visuallyFocused : focusedState;
   let registerEffect;
+  const registeredInput = React.useRef(false);
   if (process.env.NODE_ENV !== 'production') {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const registeredInput = React.useRef(false);
     registerEffect = () => {
       if (registeredInput.current) {
         console.error(['MUI: There are multiple `InputBase` components inside a FormControl.', 'This creates visual inconsistencies, only use one `InputBase`.'].join('\n'));

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/Hidden/withWidth.js

@@ -53,6 +53,7 @@ const withWidth = (options = {}) => Component => {
      */
     const keys = theme.breakpoints.keys.slice().reverse();
     const widthComputed = keys.reduce((output, key) => {
+      // TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler
       // eslint-disable-next-line react-hooks/rules-of-hooks
       const matches = useMediaQuery(theme.breakpoints.up(key));
       return !output && matches ? key : output;

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";
@@ -36,7 +37,7 @@ const IconRoot = styled('span', {
   userSelect: 'none',
   width: '1em',
   height: '1em',
-  // Chrome fix for https://bugs.chromium.org/p/chromium/issues/detail?id=820541
+  // Chrome fix for https://issues.chromium.org/issues/41375697
   // To remove at some point.
   overflow: 'hidden',
   display: 'inline-block',
@@ -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

@@ -298,6 +298,7 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
   const [focused, setFocused] = React.useState(false);
   const muiFormControl = useFormControl();
   if (process.env.NODE_ENV !== 'production') {
+    // TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler
     // eslint-disable-next-line react-hooks/rules-of-hooks
     React.useEffect(() => {
       if (muiFormControl) {
@@ -391,6 +392,7 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
   // or auto filled by the browser before the hydration (for SSR).
   React.useEffect(() => {
     checkDirty(inputRef.current);
+    // TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   const handleClick = event => {
@@ -461,7 +463,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/Modal/Modal.js

@@ -158,6 +158,7 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     childProps.onExited = onExited;
   }
   const externalForwardedProps = {
+    ...other,
     slots: {
       root: components.Root,
       backdrop: components.Backdrop,
@@ -209,7 +210,6 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     disablePortal: disablePortal,
     children: /*#__PURE__*/_jsxs(RootSlot, {
       ...rootProps,
-      ...other,
       children: [!hideBackdrop && BackdropComponent ? /*#__PURE__*/_jsx(BackdropSlot, {
         ...backdropProps,
         ref: backdropRef

package/modern/Modal/ModalManager.js

@@ -22,14 +22,14 @@ function isAriaHiddenForbiddenOnElement(element) {
   // can be children of body and can't have aria-hidden attribute.
   // cf. https://www.w3.org/TR/html-aria/#docconformance
   const forbiddenTagNames = ['TEMPLATE', 'SCRIPT', 'STYLE', 'LINK', 'MAP', 'META', 'NOSCRIPT', 'PICTURE', 'COL', 'COLGROUP', 'PARAM', 'SLOT', 'SOURCE', 'TRACK'];
-  const isForbiddenTagName = forbiddenTagNames.indexOf(element.tagName) !== -1;
+  const isForbiddenTagName = forbiddenTagNames.includes(element.tagName);
   const isInputHidden = element.tagName === 'INPUT' && element.getAttribute('type') === 'hidden';
   return isForbiddenTagName || isInputHidden;
 }
 function ariaHiddenSiblings(container, mountElement, currentElement, elementsToExclude, show) {
   const blacklist = [mountElement, currentElement, ...elementsToExclude];
   [].forEach.call(container.children, element => {
-    const isNotExcludedElement = blacklist.indexOf(element) === -1;
+    const isNotExcludedElement = !blacklist.includes(element);
     const isNotForbiddenElement = !isAriaHiddenForbiddenOnElement(element);
     if (isNotExcludedElement && isNotForbiddenElement) {
       ariaHidden(element, show);
@@ -165,7 +165,7 @@ export class ModalManager {
     return modalIndex;
   }
   mount(modal, props) {
-    const containerIndex = findIndexOf(this.containers, item => item.modals.indexOf(modal) !== -1);
+    const containerIndex = findIndexOf(this.containers, item => item.modals.includes(modal));
     const containerInfo = this.containers[containerIndex];
     if (!containerInfo.restore) {
       containerInfo.restore = handleContainer(containerInfo, props);
@@ -176,7 +176,7 @@ export class ModalManager {
     if (modalIndex === -1) {
       return modalIndex;
     }
-    const containerIndex = findIndexOf(this.containers, item => item.modals.indexOf(modal) !== -1);
+    const containerIndex = findIndexOf(this.containers, item => item.modals.includes(modal));
     const containerInfo = this.containers[containerIndex];
     containerInfo.modals.splice(containerInfo.modals.indexOf(modal), 1);
     this.modals.splice(modalIndex, 1);