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

package/node/InputBase/InputBase.js

@@ -307,6 +307,7 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
   const [focused, setFocused] = React.useState(false);
   const muiFormControl = (0, _useFormControl.default)();
   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) {
@@ -400,6 +401,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 => {
@@ -470,7 +472,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/Modal/Modal.js

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

package/node/Modal/ModalManager.js

@@ -29,14 +29,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);
@@ -172,7 +172,7 @@ 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);
@@ -183,7 +183,7 @@ 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);

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

@@ -250,7 +250,7 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
     }
     const positioning = getPositioningStyle(element);
     if (positioning.top !== null) {
-      element.style.top = positioning.top;
+      element.style.setProperty('top', positioning.top);
     }
     if (positioning.left !== null) {
       element.style.left = positioning.left;

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/Select/SelectInput.js

@@ -187,6 +187,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
       setMenuMinWidthState(autoWidth ? null : anchorElement.clientWidth);
       displayRef.current.focus();
     }
+    // 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
   }, [displayNode, autoWidth]);
   // `isOpenControlled` is ignored because the component should never switch between controlled and uncontrolled modes.
@@ -390,6 +391,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     });
   });
   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 (!foundMatch && !multiple && value !== '') {

package/node/Skeleton/Skeleton.js

@@ -66,7 +66,9 @@ const pulseAnimation = typeof pulseKeyframe !== 'string' ? (0, _zeroStyled.css)`
         animation: ${pulseKeyframe} 2s ease-in-out 0.5s infinite;
       ` : null;
 const waveAnimation = typeof waveKeyframe !== 'string' ? (0, _zeroStyled.css)`
-        animation: ${waveKeyframe} 2s linear 0.5s infinite;
+        &::after {
+          animation: ${waveKeyframe} 2s linear 0.5s infinite;
+        }
       ` : null;
 const SkeletonRoot = (0, _zeroStyled.styled)('span', {
   name: 'MuiSkeleton',
@@ -175,8 +177,8 @@ const SkeletonRoot = (0, _zeroStyled.styled)('span', {
       props: {
         animation: 'wave'
       },
-      style: {
-        '&::after': waveAnimation || {
+      style: waveAnimation || {
+        '&::after': {
           animation: `${waveKeyframe} 2s linear 0.5s infinite`
         }
       }

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/Slider/useSlider.js

@@ -347,12 +347,12 @@ function useSlider(parameters) {
       left
     } = slider.getBoundingClientRect();
     let percent;
-    if (axis.indexOf('vertical') === 0) {
+    if (axis.startsWith('vertical')) {
       percent = (bottom - finger.y) / height;
     } else {
       percent = (finger.x - left) / width;
     }
-    if (axis.indexOf('-reverse') !== -1) {
+    if (axis.includes('-reverse')) {
       percent = 1 - percent;
     }
     let newValue;

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

@@ -210,6 +210,7 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
     if (!touchDetected.current) {
       return;
     }
+    // TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler -- claimedSwipeInstance is a singleton
     claimedSwipeInstance = null;
     touchDetected.current = false;
     ReactDOM.flushSync(() => {

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/ToggleButtonGroup/isValueSelected.js

@@ -11,7 +11,7 @@ function isValueSelected(value, candidate) {
     return false;
   }
   if (Array.isArray(candidate)) {
-    return candidate.indexOf(value) >= 0;
+    return candidate.includes(value);
   }
   return value === candidate;
 }

package/node/Tooltip/Tooltip.js

@@ -377,12 +377,14 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
   });
   let open = openState;
   if (process.env.NODE_ENV !== 'production') {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
+    // 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 -- process.env never changes
     const {
       current: isControlled
     } = React.useRef(openProp !== undefined);
 
-    // eslint-disable-next-line react-hooks/rules-of-hooks
+    // 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 -- process.env never changes
     React.useEffect(() => {
       if (childNode && childNode.disabled && !isControlled && title !== '' && childNode.tagName.toLowerCase() === 'button') {
         console.error(['MUI: You are providing a disabled `button` child to the Tooltip component.', 'A disabled element does not fire events.', "Tooltip needs to listen to the child element's events to display the title.", '', 'Add a simple wrapper element, such as a `span`.'].join('\n'));
@@ -564,7 +566,8 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
   if (process.env.NODE_ENV !== 'production') {
     childrenProps['data-mui-internal-clone-element'] = true;
 
-    // eslint-disable-next-line react-hooks/rules-of-hooks
+    // 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 -- process.env never changes
     React.useEffect(() => {
       if (childNode && !childNode.getAttribute('data-mui-internal-clone-element')) {
         console.error(['MUI: The `children` component of the Tooltip is not forwarding its props correctly.', 'Please make sure that props are spread on the same element that the ref is applied to.'].join('\n'));

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/Unstable_TrapFocus/FocusTrap.js

@@ -21,7 +21,7 @@ function getTabIndex(node) {
   }
 
   // Browsers do not return `tabIndex` correctly for contentEditable nodes;
-  // https://bugs.chromium.org/p/chromium/issues/detail?id=661108&q=contenteditable%20tabindex&can=2
+  // https://issues.chromium.org/issues/41283952
   // so if they don't have a tabindex attribute specifically set, assume it's 0.
   // in Chrome, <details/>, <audio controls/> and <video controls/> elements get a default
   //  `tabIndex` of -1 when the 'tabindex' attribute isn't specified in the DOM,

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v6.0.2
+ * @mui/material v6.1.1-dev.20240919-130050-82a6448768
  *
  * @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');

package/node/internal/svg-icons/ArrowDropDown.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: "M7 10l5 5 5-5z"
 }), 'ArrowDropDown');

package/node/internal/svg-icons/Cancel.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: "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/node/internal/svg-icons/CheckBox.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: "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/node/internal/svg-icons/CheckBoxOutlineBlank.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: "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/node/internal/svg-icons/CheckCircle.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: "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/node/internal/svg-icons/Close.js

@@ -15,6 +15,6 @@ var _jsxRuntime = require("react/jsx-runtime");
  *
  * Alias to `Clear`.
  */
-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: "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/node/internal/svg-icons/ErrorOutline.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: "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');