@mui/material 5.15.14 → 6.0.0-alpha.0

package/FormGroup/FormGroup.js

@@ -1,18 +1,18 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["className", "row"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import { getFormGroupUtilityClass } from './formGroupClasses';
 import useFormControl from '../FormControl/useFormControl';
 import formControlState from '../FormControl/formControlState';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiFormGroup');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -33,15 +33,19 @@ const FormGroupRoot = styled('div', {
     } = props;
     return [styles.root, ownerState.row && styles.row];
   }
-})(({
-  ownerState
-}) => _extends({
+})({
   display: 'flex',
   flexDirection: 'column',
-  flexWrap: 'wrap'
-}, ownerState.row && {
-  flexDirection: 'row'
-}));
+  flexWrap: 'wrap',
+  variants: [{
+    props: {
+      row: true
+    },
+    style: {
+      flexDirection: 'row'
+    }
+  }]
+});
 
 /**
  * `FormGroup` wraps controls such as `Checkbox` and `Switch`.

package/Grid/Grid.js

@@ -170,7 +170,6 @@ export function generateRowGap({
     styles = handleBreakpoints({
       theme
     }, rowSpacingValues, (propValue, breakpoint) => {
-      var _zeroValueBreakpointK;
       const themeSpacing = theme.spacing(propValue);
       if (themeSpacing !== '0px') {
         return {
@@ -180,7 +179,7 @@ export function generateRowGap({
           }
         };
       }
-      if ((_zeroValueBreakpointK = zeroValueBreakpointKeys) != null && _zeroValueBreakpointK.includes(breakpoint)) {
+      if (zeroValueBreakpointKeys?.includes(breakpoint)) {
         return {};
       }
       return {
@@ -217,7 +216,6 @@ export function generateColumnGap({
     styles = handleBreakpoints({
       theme
     }, columnSpacingValues, (propValue, breakpoint) => {
-      var _zeroValueBreakpointK2;
       const themeSpacing = theme.spacing(propValue);
       if (themeSpacing !== '0px') {
         return {
@@ -228,7 +226,7 @@ export function generateColumnGap({
           }
         };
       }
-      if ((_zeroValueBreakpointK2 = zeroValueBreakpointKeys) != null && _zeroValueBreakpointK2.includes(breakpoint)) {
+      if (zeroValueBreakpointKeys?.includes(breakpoint)) {
         return {};
       }
       return {

package/IconButton/IconButton.js

@@ -68,12 +68,11 @@ const IconButtonRoot = styled(ButtonBase, {
   theme,
   ownerState
 }) => {
-  var _palette;
-  const palette = (_palette = (theme.vars || theme).palette) == null ? void 0 : _palette[ownerState.color];
+  const palette = (theme.vars || theme).palette?.[ownerState.color];
   return _extends({}, ownerState.color === 'inherit' && {
     color: 'inherit'
   }, ownerState.color !== 'inherit' && ownerState.color !== 'default' && _extends({
-    color: palette == null ? void 0 : palette.main
+    color: palette?.main
   }, !ownerState.disableRipple && {
     '&:hover': _extends({}, palette && {
       backgroundColor: theme.vars ? `rgba(${palette.mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(palette.main, theme.palette.action.hoverOpacity)

package/ImageListItemBar/ImageListItemBar.js

@@ -11,8 +11,7 @@ import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import capitalize from '../utils/capitalize';
 import { getImageListItemBarUtilityClass } from './imageListItemBarClasses';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
     classes,

package/Input/Input.js

@@ -108,7 +108,6 @@ const InputInput = styled(InputBaseInput, {
   overridesResolver: inputBaseInputOverridesResolver
 })({});
 const Input = /*#__PURE__*/React.forwardRef(function Input(inProps, ref) {
-  var _ref, _slots$root, _ref2, _slots$input;
   const props = useThemeProps({
     props: inProps,
     name: 'MuiInput'
@@ -134,9 +133,9 @@ const Input = /*#__PURE__*/React.forwardRef(function Input(inProps, ref) {
       ownerState
     }
   };
-  const componentsProps = (slotProps != null ? slotProps : componentsPropsProp) ? deepmerge(slotProps != null ? slotProps : componentsPropsProp, inputComponentsProps) : inputComponentsProps;
-  const RootSlot = (_ref = (_slots$root = slots.root) != null ? _slots$root : components.Root) != null ? _ref : InputRoot;
-  const InputSlot = (_ref2 = (_slots$input = slots.input) != null ? _slots$input : components.Input) != null ? _ref2 : InputInput;
+  const componentsProps = slotProps ?? componentsPropsProp ? deepmerge(slotProps ?? componentsPropsProp, inputComponentsProps) : inputComponentsProps;
+  const RootSlot = slots.root ?? components.Root ?? InputRoot;
+  const InputSlot = slots.input ?? components.Input ?? InputInput;
   return /*#__PURE__*/_jsx(InputBase, _extends({
     slots: {
       root: RootSlot,

package/InputAdornment/InputAdornment.js

@@ -15,8 +15,7 @@ import useFormControl from '../FormControl/useFormControl';
 import styled from '../styles/styled';
 import inputAdornmentClasses, { getInputAdornmentUtilityClass } from './inputAdornmentClasses';
 import useThemeProps from '../styles/useThemeProps';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const overridesResolver = (props, styles) => {
   const {
     ownerState

package/InputBase/InputBase.js

@@ -23,8 +23,7 @@ import useEnhancedEffect from '../utils/useEnhancedEffect';
 import GlobalStyles from '../GlobalStyles';
 import { isFilled } from './utils';
 import inputBaseClasses, { getInputBaseUtilityClass } from './inputBaseClasses';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const rootOverridesResolver = (props, styles) => {
   const {
     ownerState
@@ -212,7 +211,6 @@ const inputGlobalStyles = /*#__PURE__*/_jsx(GlobalStyles, {
  * It contains a load of style reset and some state logic.
  */
 const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref) {
-  var _slotProps$input;
   const props = useThemeProps({
     props: inProps,
     name: 'MuiInputBase'
@@ -431,7 +429,7 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
   const Root = slots.root || components.Root || InputBaseRoot;
   const rootProps = slotProps.root || componentsProps.root || {};
   const Input = slots.input || components.Input || InputBaseComponent;
-  inputProps = _extends({}, inputProps, (_slotProps$input = slotProps.input) != null ? _slotProps$input : componentsProps.input);
+  inputProps = _extends({}, inputProps, slotProps.input ?? componentsProps.input);
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [!disableInjectingGlobalStyles && inputGlobalStyles, /*#__PURE__*/_jsxs(Root, _extends({}, rootProps, !isHostComponent(Root) && {
       ownerState: _extends({}, ownerState, rootProps.ownerState)

package/LinearProgress/LinearProgress.js

@@ -3,13 +3,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["className", "color", "value", "valueBuffer", "variant"];
-let _ = t => t,
-  _t,
-  _t2,
-  _t3,
-  _t4,
-  _t5,
-  _t6;
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -21,10 +14,9 @@ import capitalize from '../utils/capitalize';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import { getLinearProgressUtilityClass } from './linearProgressClasses';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const TRANSITION_DURATION = 4; // seconds
-const indeterminate1Keyframe = keyframes(_t || (_t = _`
+const indeterminate1Keyframe = keyframes`
   0% {
     left: -35%;
     right: 100%;
@@ -39,8 +31,8 @@ const indeterminate1Keyframe = keyframes(_t || (_t = _`
     left: 100%;
     right: -90%;
   }
-`));
-const indeterminate2Keyframe = keyframes(_t2 || (_t2 = _`
+`;
+const indeterminate2Keyframe = keyframes`
   0% {
     left: -200%;
     right: 100%;
@@ -55,8 +47,8 @@ const indeterminate2Keyframe = keyframes(_t2 || (_t2 = _`
     left: 107%;
     right: -8%;
   }
-`));
-const bufferKeyframe = keyframes(_t3 || (_t3 = _`
+`;
+const bufferKeyframe = keyframes`
   0% {
     opacity: 1;
     background-position: 0 -23px;
@@ -71,7 +63,7 @@ const bufferKeyframe = keyframes(_t3 || (_t3 = _`
     opacity: 1;
     background-position: -200px -23px;
   }
-`));
+`;
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -161,9 +153,9 @@ const LinearProgressDashed = styled('span', {
     backgroundSize: '10px 10px',
     backgroundPosition: '0 -23px'
   });
-}, css(_t4 || (_t4 = _`
-    animation: ${0} 3s infinite linear;
-  `), bufferKeyframe));
+}, css`
+    animation: ${bufferKeyframe} 3s infinite linear;
+  `);
 const LinearProgressBar1 = styled('span', {
   name: 'MuiLinearProgress',
   slot: 'Bar1',
@@ -192,10 +184,10 @@ const LinearProgressBar1 = styled('span', {
   transition: `transform .${TRANSITION_DURATION}s linear`
 }), ({
   ownerState
-}) => (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && css(_t5 || (_t5 = _`
+}) => (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && css`
       width: auto;
-      animation: ${0} 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
-    `), indeterminate1Keyframe));
+      animation: ${indeterminate1Keyframe} 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+    `);
 const LinearProgressBar2 = styled('span', {
   name: 'MuiLinearProgress',
   slot: 'Bar2',
@@ -225,10 +217,10 @@ const LinearProgressBar2 = styled('span', {
   transition: `transform .${TRANSITION_DURATION}s linear`
 }), ({
   ownerState
-}) => (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && css(_t6 || (_t6 = _`
+}) => (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && css`
       width: auto;
-      animation: ${0} 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite;
-    `), indeterminate2Keyframe));
+      animation: ${indeterminate2Keyframe} 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite;
+    `);
 
 /**
  * ## ARIA

package/List/List.js

@@ -11,8 +11,7 @@ import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import ListContext from './ListContext';
 import { getListUtilityClass } from './listClasses';
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
     classes,

package/ListItem/ListItem.js

@@ -22,8 +22,7 @@ import ListContext from '../List/ListContext';
 import listItemClasses, { getListItemUtilityClass } from './listItemClasses';
 import { listItemButtonClasses } from '../ListItemButton';
 import ListItemSecondaryAction from '../ListItemSecondaryAction';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const overridesResolver = (props, styles) => {
   const {
     ownerState

package/ListItemText/ListItemText.js

@@ -12,8 +12,7 @@ import ListContext from '../List/ListContext';
 import useThemeProps from '../styles/useThemeProps';
 import styled from '../styles/styled';
 import listItemTextClasses, { getListItemTextUtilityClass } from './listItemTextClasses';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -88,7 +87,7 @@ const ListItemText = /*#__PURE__*/React.forwardRef(function ListItemText(inProps
     primary = /*#__PURE__*/_jsx(Typography, _extends({
       variant: dense ? 'body2' : 'body1',
       className: classes.primary,
-      component: primaryTypographyProps != null && primaryTypographyProps.variant ? undefined : 'span',
+      component: primaryTypographyProps?.variant ? undefined : 'span',
       display: "block"
     }, primaryTypographyProps, {
       children: primary

package/Menu/Menu.js

@@ -64,7 +64,6 @@ const MenuMenuList = styled(MenuList, {
   outline: 0
 });
 const Menu = /*#__PURE__*/React.forwardRef(function Menu(inProps, ref) {
-  var _slots$paper, _slotProps$paper;
   const props = useThemeProps({
     props: inProps,
     name: 'MuiMenu'
@@ -148,8 +147,8 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(inProps, ref) {
       }
     }
   });
-  const PaperSlot = (_slots$paper = slots.paper) != null ? _slots$paper : MenuPaper;
-  const paperExternalSlotProps = (_slotProps$paper = slotProps.paper) != null ? _slotProps$paper : PaperProps;
+  const PaperSlot = slots.paper ?? MenuPaper;
+  const paperExternalSlotProps = slotProps.paper ?? PaperProps;
   const rootSlotProps = useSlotProps({
     elementType: slots.root,
     externalSlotProps: slotProps.root,

package/MobileStepper/MobileStepper.js

@@ -1,7 +1,7 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["activeStep", "backButton", "className", "LinearProgressProps", "nextButton", "position", "steps", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -11,11 +11,11 @@ import composeClasses from '@mui/utils/composeClasses';
 import Paper from '../Paper';
 import capitalize from '../utils/capitalize';
 import LinearProgress from '../LinearProgress';
-import useThemeProps from '../styles/useThemeProps';
-import styled, { slotShouldForwardProp } from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
+import slotShouldForwardProp from '../styles/slotShouldForwardProp';
 import { getMobileStepperUtilityClass } from './mobileStepperClasses';
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiMobileStepper');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -40,38 +40,55 @@ const MobileStepperRoot = styled(Paper, {
     return [styles.root, styles[`position${capitalize(ownerState.position)}`]];
   }
 })(({
-  theme,
-  ownerState
-}) => _extends({
+  theme
+}) => ({
   display: 'flex',
   flexDirection: 'row',
   justifyContent: 'space-between',
   alignItems: 'center',
   background: (theme.vars || theme).palette.background.default,
-  padding: 8
-}, ownerState.position === 'bottom' && {
-  position: 'fixed',
-  bottom: 0,
-  left: 0,
-  right: 0,
-  zIndex: (theme.vars || theme).zIndex.mobileStepper
-}, ownerState.position === 'top' && {
-  position: 'fixed',
-  top: 0,
-  left: 0,
-  right: 0,
-  zIndex: (theme.vars || theme).zIndex.mobileStepper
+  padding: 8,
+  variants: [{
+    props: ({
+      position
+    }) => position === 'top' || position === 'bottom',
+    style: {
+      position: 'fixed',
+      left: 0,
+      right: 0,
+      zIndex: (theme.vars || theme).zIndex.mobileStepper
+    }
+  }, {
+    props: {
+      position: 'top'
+    },
+    style: {
+      top: 0
+    }
+  }, {
+    props: {
+      position: 'bottom'
+    },
+    style: {
+      bottom: 0
+    }
+  }]
 }));
 const MobileStepperDots = styled('div', {
   name: 'MuiMobileStepper',
   slot: 'Dots',
   overridesResolver: (props, styles) => styles.dots
-})(({
-  ownerState
-}) => _extends({}, ownerState.variant === 'dots' && {
-  display: 'flex',
-  flexDirection: 'row'
-}));
+})({
+  variants: [{
+    props: {
+      variant: 'dots'
+    },
+    style: {
+      display: 'flex',
+      flexDirection: 'row'
+    }
+  }]
+});
 const MobileStepperDot = styled('div', {
   name: 'MuiMobileStepper',
   slot: 'Dot',
@@ -83,30 +100,46 @@ const MobileStepperDot = styled('div', {
     return [styles.dot, dotActive && styles.dotActive];
   }
 })(({
-  theme,
-  ownerState,
-  dotActive
-}) => _extends({}, ownerState.variant === 'dots' && _extends({
-  transition: theme.transitions.create('background-color', {
-    duration: theme.transitions.duration.shortest
-  }),
-  backgroundColor: (theme.vars || theme).palette.action.disabled,
-  borderRadius: '50%',
-  width: 8,
-  height: 8,
-  margin: '0 2px'
-}, dotActive && {
-  backgroundColor: (theme.vars || theme).palette.primary.main
-})));
+  theme
+}) => ({
+  variants: [{
+    props: {
+      variant: 'dots'
+    },
+    style: {
+      transition: theme.transitions.create('background-color', {
+        duration: theme.transitions.duration.shortest
+      }),
+      backgroundColor: (theme.vars || theme).palette.action.disabled,
+      borderRadius: '50%',
+      width: 8,
+      height: 8,
+      margin: '0 2px'
+    }
+  }, {
+    props: {
+      variant: 'dots',
+      dotActive: true
+    },
+    style: {
+      backgroundColor: (theme.vars || theme).palette.primary.main
+    }
+  }]
+}));
 const MobileStepperProgress = styled(LinearProgress, {
   name: 'MuiMobileStepper',
   slot: 'Progress',
   overridesResolver: (props, styles) => styles.progress
-})(({
-  ownerState
-}) => _extends({}, ownerState.variant === 'progress' && {
-  width: '50%'
-}));
+})({
+  variants: [{
+    props: {
+      variant: 'progress'
+    },
+    style: {
+      width: '50%'
+    }
+  }]
+});
 const MobileStepper = /*#__PURE__*/React.forwardRef(function MobileStepper(inProps, ref) {
   const props = useThemeProps({
     props: inProps,

package/Modal/Modal.js

@@ -1,7 +1,7 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["BackdropComponent", "BackdropProps", "classes", "className", "closeAfterTransition", "children", "container", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "onBackdropClick", "onClose", "onTransitionEnter", "onTransitionExited", "open", "slotProps", "slots", "theme"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -13,12 +13,11 @@ import { unstable_useModal as useModal } from '@mui/base/unstable_useModal';
 import composeClasses from '@mui/utils/composeClasses';
 import FocusTrap from '../Unstable_TrapFocus';
 import Portal from '../Portal';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import Backdrop from '../Backdrop';
 import { getModalUtilityClass } from './modalClasses';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiModal');
 const useUtilityClasses = ownerState => {
   const {
     open,
@@ -41,17 +40,22 @@ const ModalRoot = styled('div', {
     return [styles.root, !ownerState.open && ownerState.exited && styles.hidden];
   }
 })(({
-  theme,
-  ownerState
-}) => _extends({
+  theme
+}) => ({
   position: 'fixed',
   zIndex: (theme.vars || theme).zIndex.modal,
   right: 0,
   bottom: 0,
   top: 0,
-  left: 0
-}, !ownerState.open && ownerState.exited && {
-  visibility: 'hidden'
+  left: 0,
+  variants: [{
+    props: ({
+      ownerState
+    }) => !ownerState.open && ownerState.exited,
+    style: {
+      visibility: 'hidden'
+    }
+  }]
 }));
 const ModalBackdrop = styled(Backdrop, {
   name: 'MuiModal',
@@ -77,7 +81,6 @@ const ModalBackdrop = styled(Backdrop, {
  * This component shares many concepts with [react-overlays](https://react-bootstrap.github.io/react-overlays/#modals).
  */
 const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
-  var _ref, _slots$root, _ref2, _slots$backdrop, _slotProps$root, _slotProps$backdrop;
   const props = useThemeProps({
     name: 'MuiModal',
     props: inProps
@@ -147,10 +150,10 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     childProps.onEnter = onEnter;
     childProps.onExited = onExited;
   }
-  const RootSlot = (_ref = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : components.Root) != null ? _ref : ModalRoot;
-  const BackdropSlot = (_ref2 = (_slots$backdrop = slots == null ? void 0 : slots.backdrop) != null ? _slots$backdrop : components.Backdrop) != null ? _ref2 : BackdropComponent;
-  const rootSlotProps = (_slotProps$root = slotProps == null ? void 0 : slotProps.root) != null ? _slotProps$root : componentsProps.root;
-  const backdropSlotProps = (_slotProps$backdrop = slotProps == null ? void 0 : slotProps.backdrop) != null ? _slotProps$backdrop : componentsProps.backdrop;
+  const RootSlot = slots?.root ?? components.Root ?? ModalRoot;
+  const BackdropSlot = slots?.backdrop ?? components.Backdrop ?? BackdropComponent;
+  const rootSlotProps = slotProps?.root ?? componentsProps.root;
+  const backdropSlotProps = slotProps?.backdrop ?? componentsProps.backdrop;
   const rootProps = useSlotProps({
     elementType: RootSlot,
     externalSlotProps: rootSlotProps,
@@ -161,7 +164,7 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
       as: component
     },
     ownerState,
-    className: clsx(className, rootSlotProps == null ? void 0 : rootSlotProps.className, classes == null ? void 0 : classes.root, !ownerState.open && ownerState.exited && (classes == null ? void 0 : classes.hidden))
+    className: clsx(className, rootSlotProps?.className, classes?.root, !ownerState.open && ownerState.exited && classes?.hidden)
   });
   const backdropProps = useSlotProps({
     elementType: BackdropSlot,
@@ -173,13 +176,13 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
           if (onBackdropClick) {
             onBackdropClick(e);
           }
-          if (otherHandlers != null && otherHandlers.onClick) {
+          if (otherHandlers?.onClick) {
             otherHandlers.onClick(e);
           }
         }
       }));
     },
-    className: clsx(backdropSlotProps == null ? void 0 : backdropSlotProps.className, BackdropProps == null ? void 0 : BackdropProps.className, classes == null ? void 0 : classes.backdrop),
+    className: clsx(backdropSlotProps?.className, BackdropProps?.className, classes?.backdrop),
     ownerState
   });
   if (!keepMounted && !open && (!hasTransition || exited)) {

package/NativeSelect/NativeSelectInput.js

@@ -11,8 +11,7 @@ import composeClasses from '@mui/utils/composeClasses';
 import capitalize from '../utils/capitalize';
 import nativeSelectClasses, { getNativeSelectUtilityClasses } from './nativeSelectClasses';
 import styled, { rootShouldForwardProp } from '../styles/styled';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
     classes,

package/OutlinedInput/OutlinedInput.js

@@ -14,8 +14,7 @@ import styled, { rootShouldForwardProp } from '../styles/styled';
 import outlinedInputClasses, { getOutlinedInputUtilityClass } from './outlinedInputClasses';
 import InputBase, { rootOverridesResolver as inputBaseRootOverridesResolver, inputOverridesResolver as inputBaseInputOverridesResolver, InputBaseRoot, InputBaseComponent as InputBaseInput } from '../InputBase/InputBase';
 import useThemeProps from '../styles/useThemeProps';
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -119,7 +118,7 @@ const OutlinedInputInput = styled(InputBaseInput, {
   paddingRight: 0
 }));
 const OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inProps, ref) {
-  var _ref, _slots$root, _ref2, _slots$input, _React$Fragment;
+  var _React$Fragment;
   const props = useThemeProps({
     props: inProps,
     name: 'MuiOutlinedInput'
@@ -154,8 +153,8 @@ const OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inPro
     size: fcs.size,
     type
   });
-  const RootSlot = (_ref = (_slots$root = slots.root) != null ? _slots$root : components.Root) != null ? _ref : OutlinedInputRoot;
-  const InputSlot = (_ref2 = (_slots$input = slots.input) != null ? _slots$input : components.Input) != null ? _ref2 : OutlinedInputInput;
+  const RootSlot = slots.root ?? components.Root ?? OutlinedInputRoot;
+  const InputSlot = slots.input ?? components.Input ?? OutlinedInputInput;
   return /*#__PURE__*/_jsx(InputBase, _extends({
     slots: {
       root: RootSlot,

package/PaginationItem/PaginationItem.js

@@ -18,8 +18,7 @@ import LastPageIcon from '../internal/svg-icons/LastPage';
 import NavigateBeforeIcon from '../internal/svg-icons/NavigateBefore';
 import NavigateNextIcon from '../internal/svg-icons/NavigateNext';
 import styled from '../styles/styled';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const overridesResolver = (props, styles) => {
   const {
     ownerState