@mui/material 5.15.13 → 6.0.0-alpha.0

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
 })({

package/legacy/Rating/Rating.js

@@ -18,8 +18,7 @@ import StarBorder from '../internal/svg-icons/StarBorder';
 import useThemeProps from '../styles/useThemeProps';
 import styled, { slotShouldForwardProp } from '../styles/styled';
 import ratingClasses, { getRatingUtilityClass } from './ratingClasses';
-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";
 function getDecimalPrecision(num) {
   var decimalPart = num.toString().split('.')[1];
   return decimalPart ? decimalPart.length : 0;

package/legacy/Select/SelectInput.js

@@ -23,8 +23,7 @@ import styled, { slotShouldForwardProp } from '../styles/styled';
 import useForkRef from '../utils/useForkRef';
 import useControlled from '../utils/useControlled';
 import selectClasses, { getSelectUtilityClasses } from './selectClasses';
-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 SelectSelect = styled('div', {
   name: 'MuiSelect',
   slot: 'Select',