@mui/material 5.15.14 → 6.0.0-alpha.0

package/legacy/FormControl/FormControl.js

@@ -6,14 +6,14 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
 import { isFilled, isAdornedStart } from '../InputBase/utils';
 import capitalize from '../utils/capitalize';
 import isMuiElement from '../utils/isMuiElement';
 import FormControlContext from './FormControlContext';
 import { getFormControlUtilityClasses } from './formControlClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+var useThemeProps = createUseThemeProps('MuiFormControl');
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes,
     margin = ownerState.margin,
@@ -30,27 +30,41 @@ var FormControlRoot = styled('div', {
     var ownerState = _ref.ownerState;
     return _extends({}, styles.root, styles["margin".concat(capitalize(ownerState.margin))], ownerState.fullWidth && styles.fullWidth);
   }
-})(function (_ref2) {
-  var ownerState = _ref2.ownerState;
-  return _extends({
-    display: 'inline-flex',
-    flexDirection: 'column',
-    position: 'relative',
-    // Reset fieldset default style.
-    minWidth: 0,
-    padding: 0,
-    margin: 0,
-    border: 0,
-    verticalAlign: 'top'
-  }, ownerState.margin === 'normal' && {
-    marginTop: 16,
-    marginBottom: 8
-  }, ownerState.margin === 'dense' && {
-    marginTop: 8,
-    marginBottom: 4
-  }, ownerState.fullWidth && {
-    width: '100%'
-  });
+})({
+  display: 'inline-flex',
+  flexDirection: 'column',
+  position: 'relative',
+  // Reset fieldset default style.
+  minWidth: 0,
+  padding: 0,
+  margin: 0,
+  border: 0,
+  verticalAlign: 'top',
+  // Fix alignment issue on Safari.
+  variants: [{
+    props: {
+      margin: 'normal'
+    },
+    style: {
+      marginTop: 16,
+      marginBottom: 8
+    }
+  }, {
+    props: {
+      margin: 'dense'
+    },
+    style: {
+      marginTop: 8,
+      marginBottom: 4
+    }
+  }, {
+    props: {
+      fullWidth: true
+    },
+    style: {
+      width: '100%'
+    }
+  }]
 });
 
 /**

package/legacy/FormControlLabel/FormControlLabel.js

@@ -1,7 +1,7 @@
 'use client';
 
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -9,15 +9,14 @@ import clsx from 'clsx';
 import refType from '@mui/utils/refType';
 import composeClasses from '@mui/utils/composeClasses';
 import { useFormControl } from '../FormControl';
+import { styled, createUseThemeProps } from '../zero-styled';
 import Stack from '../Stack';
 import Typography from '../Typography';
 import capitalize from '../utils/capitalize';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
 import formControlLabelClasses, { getFormControlLabelUtilityClasses } from './formControlLabelClasses';
 import formControlState from '../FormControl/formControlState';
-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";
+var useThemeProps = createUseThemeProps('MuiFormControlLabel');
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes,
     disabled = ownerState.disabled,
@@ -39,9 +38,8 @@ export var FormControlLabelRoot = styled('label', {
     return [_defineProperty({}, "& .".concat(formControlLabelClasses.label), styles.label), styles.root, styles["labelPlacement".concat(capitalize(ownerState.labelPlacement))]];
   }
 })(function (_ref2) {
-  var theme = _ref2.theme,
-    ownerState = _ref2.ownerState;
-  return _extends(_defineProperty({
+  var theme = _ref2.theme;
+  return _defineProperty(_defineProperty(_defineProperty({
     display: 'inline-flex',
     alignItems: 'center',
     cursor: 'pointer',
@@ -52,20 +50,39 @@ export var FormControlLabelRoot = styled('label', {
     marginRight: 16
   }, "&.".concat(formControlLabelClasses.disabled), {
     cursor: 'default'
-  }), ownerState.labelPlacement === 'start' && {
-    flexDirection: 'row-reverse',
-    marginLeft: 16,
-    // used for row presentation of radio/checkbox
-    marginRight: -11
-  }, ownerState.labelPlacement === 'top' && {
-    flexDirection: 'column-reverse',
-    marginLeft: 16
-  }, ownerState.labelPlacement === 'bottom' && {
-    flexDirection: 'column',
-    marginLeft: 16
-  }, _defineProperty({}, "& .".concat(formControlLabelClasses.label), _defineProperty({}, "&.".concat(formControlLabelClasses.disabled), {
+  }), "& .".concat(formControlLabelClasses.label), _defineProperty({}, "&.".concat(formControlLabelClasses.disabled), {
     color: (theme.vars || theme).palette.text.disabled
-  })));
+  })), "variants", [{
+    props: {
+      labelPlacement: 'start'
+    },
+    style: {
+      flexDirection: 'row-reverse',
+      marginRight: -11
+    }
+  }, {
+    props: {
+      labelPlacement: 'top'
+    },
+    style: {
+      flexDirection: 'column-reverse'
+    }
+  }, {
+    props: {
+      labelPlacement: 'bottom'
+    },
+    style: {
+      flexDirection: 'column'
+    }
+  }, {
+    props: function props(_ref3) {
+      var labelPlacement = _ref3.labelPlacement;
+      return labelPlacement === 'start' || labelPlacement === 'top' || labelPlacement === 'bottom';
+    },
+    style: {
+      marginLeft: 16 // used for row presentation of radio/checkbox
+    }
+  }]);
 });
 var AsteriskComponent = styled('span', {
   name: 'MuiFormControlLabel',
@@ -73,8 +90,8 @@ var AsteriskComponent = styled('span', {
   overridesResolver: function overridesResolver(props, styles) {
     return styles.asterisk;
   }
-})(function (_ref3) {
-  var theme = _ref3.theme;
+})(function (_ref5) {
+  var theme = _ref5.theme;
   return _defineProperty({}, "&.".concat(formControlLabelClasses.error), {
     color: (theme.vars || theme).palette.error.main
   });
@@ -85,7 +102,7 @@ var AsteriskComponent = styled('span', {
  * Use this component if you want to display an extra label.
  */
 var FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel(inProps, ref) {
-  var _ref5, _slotProps$typography;
+  var _ref7, _slotProps$typography;
   var props = useThemeProps({
     props: inProps,
     name: 'MuiFormControlLabel'
@@ -109,7 +126,7 @@ var FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel(i
     value = props.value,
     other = _objectWithoutProperties(props, ["checked", "className", "componentsProps", "control", "disabled", "disableTypography", "inputRef", "label", "labelPlacement", "name", "onChange", "required", "slotProps", "value"]);
   var muiFormControl = useFormControl();
-  var disabled = (_ref5 = disabledProp != null ? disabledProp : control.props.disabled) != null ? _ref5 : muiFormControl == null ? void 0 : muiFormControl.disabled;
+  var disabled = (_ref7 = disabledProp != null ? disabledProp : control.props.disabled) != null ? _ref7 : muiFormControl == null ? void 0 : muiFormControl.disabled;
   var required = requiredProp != null ? requiredProp : control.props.required;
   var controlProps = {
     disabled: disabled,

package/legacy/FormGroup/FormGroup.js

@@ -1,17 +1,17 @@
 'use client';
 
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 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";
+var useThemeProps = createUseThemeProps('MuiFormGroup');
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes,
     row = ownerState.row,
@@ -28,15 +28,18 @@ var FormGroupRoot = styled('div', {
     var ownerState = props.ownerState;
     return [styles.root, ownerState.row && styles.row];
   }
-})(function (_ref) {
-  var ownerState = _ref.ownerState;
-  return _extends({
-    display: 'flex',
-    flexDirection: 'column',
-    flexWrap: 'wrap'
-  }, ownerState.row && {
-    flexDirection: 'row'
-  });
+})({
+  display: 'flex',
+  flexDirection: 'column',
+  flexWrap: 'wrap',
+  variants: [{
+    props: {
+      row: true
+    },
+    style: {
+      flexDirection: 'row'
+    }
+  }]
 });
 
 /**

package/legacy/ImageListItemBar/ImageListItemBar.js

@@ -10,8 +10,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";
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes,
     position = ownerState.position,

package/legacy/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";
 var overridesResolver = function overridesResolver(props, styles) {
   var ownerState = props.ownerState;
   return [styles.root, styles["position".concat(capitalize(ownerState.position))], ownerState.disablePointerEvents === true && styles.disablePointerEvents, styles[ownerState.variant]];

package/legacy/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 var rootOverridesResolver = function rootOverridesResolver(props, styles) {
   var ownerState = props.ownerState;
   return [styles.root, ownerState.formControl && styles.formControl, ownerState.startAdornment && styles.adornedStart, ownerState.endAdornment && styles.adornedEnd, ownerState.error && styles.error, ownerState.size === 'small' && styles.sizeSmall, ownerState.multiline && styles.multiline, ownerState.color && styles["color".concat(capitalize(ownerState.color))], ownerState.fullWidth && styles.fullWidth, ownerState.hiddenLabel && styles.hiddenLabel];

package/legacy/LinearProgress/LinearProgress.js

@@ -15,8 +15,7 @@ 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";
 var TRANSITION_DURATION = 4; // seconds
 var indeterminate1Keyframe = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    left: -35%;\n    right: 100%;\n  }\n\n  60% {\n    left: 100%;\n    right: -90%;\n  }\n\n  100% {\n    left: 100%;\n    right: -90%;\n  }\n"])));
 var indeterminate2Keyframe = keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  0% {\n    left: -200%;\n    right: 100%;\n  }\n\n  60% {\n    left: 107%;\n    right: -8%;\n  }\n\n  100% {\n    left: 107%;\n    right: -8%;\n  }\n"])));

package/legacy/List/List.js

@@ -10,8 +10,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";
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes,
     disablePadding = ownerState.disablePadding,

package/legacy/ListItem/ListItem.js

@@ -21,8 +21,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 var overridesResolver = function overridesResolver(props, styles) {
   var ownerState = props.ownerState;
   return [styles.root, ownerState.dense && styles.dense, ownerState.alignItems === 'flex-start' && styles.alignItemsFlexStart, ownerState.divider && styles.divider, !ownerState.disableGutters && styles.gutters, !ownerState.disablePadding && styles.padding, ownerState.button && styles.button, ownerState.hasSecondaryAction && styles.secondaryAction];

package/legacy/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";
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes,
     inset = ownerState.inset,

package/legacy/MobileStepper/MobileStepper.js

@@ -1,8 +1,8 @@
 'use client';
 
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -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";
+var useThemeProps = createUseThemeProps('MuiMobileStepper');
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes,
     position = ownerState.position;
@@ -36,28 +36,41 @@ var MobileStepperRoot = styled(Paper, {
     return [styles.root, styles["position".concat(capitalize(ownerState.position))]];
   }
 })(function (_ref) {
-  var theme = _ref.theme,
-    ownerState = _ref.ownerState;
-  return _extends({
+  var theme = _ref.theme;
+  return {
     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: function props(_ref2) {
+        var position = _ref2.position;
+        return 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
+      }
+    }]
+  };
 });
 var MobileStepperDots = styled('div', {
   name: 'MuiMobileStepper',
@@ -65,12 +78,16 @@ var MobileStepperDots = styled('div', {
   overridesResolver: function overridesResolver(props, styles) {
     return styles.dots;
   }
-})(function (_ref2) {
-  var ownerState = _ref2.ownerState;
-  return _extends({}, ownerState.variant === 'dots' && {
-    display: 'flex',
-    flexDirection: 'row'
-  });
+})({
+  variants: [{
+    props: {
+      variant: 'dots'
+    },
+    style: {
+      display: 'flex',
+      flexDirection: 'row'
+    }
+  }]
 });
 var MobileStepperDot = styled('div', {
   name: 'MuiMobileStepper',
@@ -83,21 +100,32 @@ var MobileStepperDot = styled('div', {
     return [styles.dot, dotActive && styles.dotActive];
   }
 })(function (_ref3) {
-  var theme = _ref3.theme,
-    ownerState = _ref3.ownerState,
-    dotActive = _ref3.dotActive;
-  return _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
-  }));
+  var theme = _ref3.theme;
+  return {
+    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
+      }
+    }]
+  };
 });
 var MobileStepperProgress = styled(LinearProgress, {
   name: 'MuiMobileStepper',
@@ -105,11 +133,15 @@ var MobileStepperProgress = styled(LinearProgress, {
   overridesResolver: function overridesResolver(props, styles) {
     return styles.progress;
   }
-})(function (_ref4) {
-  var ownerState = _ref4.ownerState;
-  return _extends({}, ownerState.variant === 'progress' && {
-    width: '50%'
-  });
+})({
+  variants: [{
+    props: {
+      variant: 'progress'
+    },
+    style: {
+      width: '50%'
+    }
+  }]
 });
 var MobileStepper = /*#__PURE__*/React.forwardRef(function MobileStepper(inProps, ref) {
   var props = useThemeProps({

package/legacy/Modal/Modal.js

@@ -1,7 +1,7 @@
 'use client';
 
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -12,12 +12,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";
+var useThemeProps = createUseThemeProps('MuiModal');
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var open = ownerState.open,
     exited = ownerState.exited,
@@ -36,18 +35,24 @@ var ModalRoot = styled('div', {
     return [styles.root, !ownerState.open && ownerState.exited && styles.hidden];
   }
 })(function (_ref) {
-  var theme = _ref.theme,
-    ownerState = _ref.ownerState;
-  return _extends({
+  var theme = _ref.theme;
+  return {
     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: function props(_ref2) {
+        var ownerState = _ref2.ownerState;
+        return !ownerState.open && ownerState.exited;
+      },
+      style: {
+        visibility: 'hidden'
+      }
+    }]
+  };
 });
 var ModalBackdrop = styled(Backdrop, {
   name: 'MuiModal',
@@ -73,7 +78,7 @@ var ModalBackdrop = styled(Backdrop, {
  * This component shares many concepts with [react-overlays](https://react-bootstrap.github.io/react-overlays/#modals).
  */
 var Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
-  var _ref2, _slots$root, _ref3, _slots$backdrop, _slotProps$root, _slotProps$backdrop;
+  var _ref3, _slots$root, _ref4, _slots$backdrop, _slotProps$root, _slotProps$backdrop;
   var props = useThemeProps({
     name: 'MuiModal',
     props: inProps
@@ -155,8 +160,8 @@ var Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     childProps.onEnter = onEnter;
     childProps.onExited = onExited;
   }
-  var RootSlot = (_ref2 = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : components.Root) != null ? _ref2 : ModalRoot;
-  var BackdropSlot = (_ref3 = (_slots$backdrop = slots == null ? void 0 : slots.backdrop) != null ? _slots$backdrop : components.Backdrop) != null ? _ref3 : BackdropComponent;
+  var RootSlot = (_ref3 = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : components.Root) != null ? _ref3 : ModalRoot;
+  var BackdropSlot = (_ref4 = (_slots$backdrop = slots == null ? void 0 : slots.backdrop) != null ? _slots$backdrop : components.Backdrop) != null ? _ref4 : BackdropComponent;
   var rootSlotProps = (_slotProps$root = slotProps == null ? void 0 : slotProps.root) != null ? _slotProps$root : componentsProps.root;
   var backdropSlotProps = (_slotProps$backdrop = slotProps == null ? void 0 : slotProps.backdrop) != null ? _slotProps$backdrop : componentsProps.backdrop;
   var rootProps = useSlotProps({

package/legacy/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";
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes,
     variant = ownerState.variant,

package/legacy/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";
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes;
   var slots = {

package/legacy/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";
 var overridesResolver = function overridesResolver(props, styles) {
   var ownerState = props.ownerState;
   return [styles.root, styles[ownerState.variant], styles["size".concat(capitalize(ownerState.size))], ownerState.variant === 'text' && styles["text".concat(capitalize(ownerState.color))], ownerState.variant === 'outlined' && styles["outlined".concat(capitalize(ownerState.color))], ownerState.shape === 'rounded' && styles.rounded, ownerState.type === 'page' && styles.page, (ownerState.type === 'start-ellipsis' || ownerState.type === 'end-ellipsis') && styles.ellipsis, (ownerState.type === 'previous' || ownerState.type === 'next') && styles.previousNext, (ownerState.type === 'first' || ownerState.type === 'last') && styles.firstLast];

package/legacy/Popover/Popover.js

@@ -12,8 +12,7 @@ import refType from '@mui/utils/refType';
 import elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef';
 import integerPropType from '@mui/utils/integerPropType';
 import chainPropTypes from '@mui/utils/chainPropTypes';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import debounce from '../utils/debounce';
 import ownerDocument from '../utils/ownerDocument';
 import ownerWindow from '../utils/ownerWindow';
@@ -23,6 +22,7 @@ import Modal from '../Modal';
 import PaperBase from '../Paper';
 import { getPopoverUtilityClass } from './popoverClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+var useThemeProps = createUseThemeProps('MuiPopover');
 export function getOffsetTop(rect, vertical) {
   var offset = 0;
   if (typeof vertical === 'number') {

package/legacy/Radio/RadioButtonIcon.js

@@ -6,8 +6,7 @@ import PropTypes from 'prop-types';
 import RadioButtonUncheckedIcon from '../internal/svg-icons/RadioButtonUnchecked';
 import RadioButtonCheckedIcon from '../internal/svg-icons/RadioButtonChecked';
 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";
 var RadioButtonIconRoot = styled('span', {
   shouldForwardProp: rootShouldForwardProp
 })({