@mui/material 5.15.13 → 6.0.0-alpha.0

package/SvgIcon/SvgIcon.js

@@ -11,8 +11,7 @@ import capitalize from '../utils/capitalize';
 import useThemeProps from '../styles/useThemeProps';
 import styled from '../styles/styled';
 import { getSvgIconUtilityClass } from './svgIconClasses';
-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 {
     color,
@@ -36,34 +35,31 @@ const SvgIconRoot = styled('svg', {
 })(({
   theme,
   ownerState
-}) => {
-  var _theme$transitions, _theme$transitions$cr, _theme$transitions2, _theme$typography, _theme$typography$pxT, _theme$typography2, _theme$typography2$px, _theme$typography3, _theme$typography3$px, _palette$ownerState$c, _palette, _palette2, _palette3;
-  return {
-    userSelect: 'none',
-    width: '1em',
-    height: '1em',
-    display: 'inline-block',
-    // the <svg> will define the property that has `currentColor`
-    // e.g. heroicons uses fill="none" and stroke="currentColor"
-    fill: ownerState.hasSvgAsChild ? undefined : 'currentColor',
-    flexShrink: 0,
-    transition: (_theme$transitions = theme.transitions) == null || (_theme$transitions$cr = _theme$transitions.create) == null ? void 0 : _theme$transitions$cr.call(_theme$transitions, 'fill', {
-      duration: (_theme$transitions2 = theme.transitions) == null || (_theme$transitions2 = _theme$transitions2.duration) == null ? void 0 : _theme$transitions2.shorter
-    }),
-    fontSize: {
-      inherit: 'inherit',
-      small: ((_theme$typography = theme.typography) == null || (_theme$typography$pxT = _theme$typography.pxToRem) == null ? void 0 : _theme$typography$pxT.call(_theme$typography, 20)) || '1.25rem',
-      medium: ((_theme$typography2 = theme.typography) == null || (_theme$typography2$px = _theme$typography2.pxToRem) == null ? void 0 : _theme$typography2$px.call(_theme$typography2, 24)) || '1.5rem',
-      large: ((_theme$typography3 = theme.typography) == null || (_theme$typography3$px = _theme$typography3.pxToRem) == null ? void 0 : _theme$typography3$px.call(_theme$typography3, 35)) || '2.1875rem'
-    }[ownerState.fontSize],
-    // TODO v5 deprecate, v6 remove for sx
-    color: (_palette$ownerState$c = (_palette = (theme.vars || theme).palette) == null || (_palette = _palette[ownerState.color]) == null ? void 0 : _palette.main) != null ? _palette$ownerState$c : {
-      action: (_palette2 = (theme.vars || theme).palette) == null || (_palette2 = _palette2.action) == null ? void 0 : _palette2.active,
-      disabled: (_palette3 = (theme.vars || theme).palette) == null || (_palette3 = _palette3.action) == null ? void 0 : _palette3.disabled,
-      inherit: undefined
-    }[ownerState.color]
-  };
-});
+}) => ({
+  userSelect: 'none',
+  width: '1em',
+  height: '1em',
+  display: 'inline-block',
+  // the <svg> will define the property that has `currentColor`
+  // for example heroicons uses fill="none" and stroke="currentColor"
+  fill: ownerState.hasSvgAsChild ? undefined : 'currentColor',
+  flexShrink: 0,
+  transition: theme.transitions?.create?.('fill', {
+    duration: theme.transitions?.duration?.shorter
+  }),
+  fontSize: {
+    inherit: 'inherit',
+    small: theme.typography?.pxToRem?.(20) || '1.25rem',
+    medium: theme.typography?.pxToRem?.(24) || '1.5rem',
+    large: theme.typography?.pxToRem?.(35) || '2.1875rem'
+  }[ownerState.fontSize],
+  // TODO v5 deprecate, v6 remove for sx
+  color: (theme.vars || theme).palette?.[ownerState.color]?.main ?? {
+    action: (theme.vars || theme).palette?.action?.active,
+    disabled: (theme.vars || theme).palette?.action?.disabled,
+    inherit: undefined
+  }[ownerState.color]
+}));
 const SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(inProps, ref) {
   const props = useThemeProps({
     props: inProps,

package/SwipeableDrawer/SwipeableDrawer.js

@@ -22,8 +22,7 @@ import SwipeArea from './SwipeArea';
 
 // This value is closed to what browsers are using internally to
 // trigger a native scroll.
-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 UNCERTAINTY_THRESHOLD = 3; // px
 
 // This is the part of the drawer displayed on touch start.
@@ -400,12 +399,11 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
     const currentX = calculateCurrentX(anchorRtl, nativeEvent.touches, ownerDocument(nativeEvent.currentTarget));
     const currentY = calculateCurrentY(anchorRtl, nativeEvent.touches, ownerWindow(nativeEvent.currentTarget));
     if (!open) {
-      var _paperRef$current;
       // logic for if swipe should be ignored:
       // if disableSwipeToOpen
       // if target != swipeArea, and target is not a child of paper ref
       // if is a child of paper ref, and `allowSwipeInChildren` does not allow it
-      if (disableSwipeToOpen || !(nativeEvent.target === swipeAreaRef.current || (_paperRef$current = paperRef.current) != null && _paperRef$current.contains(nativeEvent.target) && (typeof allowSwipeInChildren === 'function' ? allowSwipeInChildren(nativeEvent, swipeAreaRef.current, paperRef.current) : allowSwipeInChildren))) {
+      if (disableSwipeToOpen || !(nativeEvent.target === swipeAreaRef.current || paperRef.current?.contains(nativeEvent.target) && (typeof allowSwipeInChildren === 'function' ? allowSwipeInChildren(nativeEvent, swipeAreaRef.current, paperRef.current) : allowSwipeInChildren))) {
         return;
       }
       if (horizontalSwipe) {

package/Switch/Switch.js

@@ -14,8 +14,7 @@ import capitalize from '../utils/capitalize';
 import SwitchBase from '../internal/SwitchBase';
 import { styled, createUseThemeProps } from '../zero-styled';
 import switchClasses, { getSwitchUtilityClass } from './switchClasses';
-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('MuiSwitch');
 const useUtilityClasses = ownerState => {
   const {

package/TabScrollButton/TabScrollButton.js

@@ -54,7 +54,6 @@ const TabScrollButtonRoot = styled(ButtonBase, {
   }
 }));
 const TabScrollButton = /*#__PURE__*/React.forwardRef(function TabScrollButton(inProps, ref) {
-  var _slots$StartScrollBut, _slots$EndScrollButto;
   const props = useThemeProps({
     props: inProps,
     name: 'MuiTabScrollButton'
@@ -71,8 +70,8 @@ const TabScrollButton = /*#__PURE__*/React.forwardRef(function TabScrollButton(i
     isRtl
   }, props);
   const classes = useUtilityClasses(ownerState);
-  const StartButtonIcon = (_slots$StartScrollBut = slots.StartScrollButtonIcon) != null ? _slots$StartScrollBut : KeyboardArrowLeft;
-  const EndButtonIcon = (_slots$EndScrollButto = slots.EndScrollButtonIcon) != null ? _slots$EndScrollButto : KeyboardArrowRight;
+  const StartButtonIcon = slots.StartScrollButtonIcon ?? KeyboardArrowLeft;
+  const EndButtonIcon = slots.EndScrollButtonIcon ?? KeyboardArrowRight;
   const startButtonIconProps = useSlotProps({
     elementType: StartButtonIcon,
     externalSlotProps: slotProps.startScrollButtonIcon,

package/TablePagination/TablePagination.js

@@ -21,9 +21,8 @@ import Toolbar from '../Toolbar';
 import TablePaginationActions from './TablePaginationActions';
 import useId from '../utils/useId';
 import tablePaginationClasses, { getTablePaginationUtilityClass } from './tablePaginationClasses';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 const TablePaginationRoot = styled(TableCell, {
   name: 'MuiTablePagination',
   slot: 'Root',
@@ -145,7 +144,6 @@ const useUtilityClasses = ownerState => {
  * A `TableCell` based component for placing inside `TableFooter` for pagination.
  */
 const TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(inProps, ref) {
-  var _slotProps$select;
   const props = useThemeProps({
     props: inProps,
     name: 'MuiTablePagination'
@@ -176,7 +174,7 @@ const TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(i
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const ownerState = props;
   const classes = useUtilityClasses(ownerState);
-  const selectProps = (_slotProps$select = slotProps == null ? void 0 : slotProps.select) != null ? _slotProps$select : SelectProps;
+  const selectProps = slotProps?.select ?? SelectProps;
   const MenuItemComponent = selectProps.native ? 'option' : TablePaginationMenuItem;
   let colSpan;
   if (component === TableCell || component === 'td') {

package/TablePagination/TablePaginationActions.js

@@ -15,10 +15,8 @@ import FirstPageIconDefault from '../internal/svg-icons/FirstPage';
 /**
  * @ignore - internal component.
  */
-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 TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePaginationActions(props, ref) {
-  var _slots$firstButton, _slots$lastButton, _slots$nextButton, _slots$previousButton, _slots$firstButtonIco, _slots$lastButtonIcon, _slots$nextButtonIcon, _slots$previousButton2;
   const {
       backIconButtonProps,
       count,
@@ -47,14 +45,14 @@ const TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePagin
   const handleLastPageButtonClick = event => {
     onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
   };
-  const FirstButton = (_slots$firstButton = slots.firstButton) != null ? _slots$firstButton : IconButton;
-  const LastButton = (_slots$lastButton = slots.lastButton) != null ? _slots$lastButton : IconButton;
-  const NextButton = (_slots$nextButton = slots.nextButton) != null ? _slots$nextButton : IconButton;
-  const PreviousButton = (_slots$previousButton = slots.previousButton) != null ? _slots$previousButton : IconButton;
-  const FirstButtonIcon = (_slots$firstButtonIco = slots.firstButtonIcon) != null ? _slots$firstButtonIco : FirstPageIconDefault;
-  const LastButtonIcon = (_slots$lastButtonIcon = slots.lastButtonIcon) != null ? _slots$lastButtonIcon : LastPageIconDefault;
-  const NextButtonIcon = (_slots$nextButtonIcon = slots.nextButtonIcon) != null ? _slots$nextButtonIcon : KeyboardArrowRight;
-  const PreviousButtonIcon = (_slots$previousButton2 = slots.previousButtonIcon) != null ? _slots$previousButton2 : KeyboardArrowLeft;
+  const FirstButton = slots.firstButton ?? IconButton;
+  const LastButton = slots.lastButton ?? IconButton;
+  const NextButton = slots.nextButton ?? IconButton;
+  const PreviousButton = slots.previousButton ?? IconButton;
+  const FirstButtonIcon = slots.firstButtonIcon ?? FirstPageIconDefault;
+  const LastButtonIcon = slots.lastButtonIcon ?? LastPageIconDefault;
+  const NextButtonIcon = slots.nextButtonIcon ?? KeyboardArrowRight;
+  const PreviousButtonIcon = slots.previousButtonIcon ?? KeyboardArrowLeft;
   const FirstButtonSlot = isRtl ? LastButton : FirstButton;
   const PreviousButtonSlot = isRtl ? NextButton : PreviousButton;
   const NextButtonSlot = isRtl ? PreviousButton : NextButton;
@@ -79,7 +77,7 @@ const TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePagin
       color: "inherit",
       "aria-label": getItemAriaLabel('previous', page),
       title: getItemAriaLabel('previous', page)
-    }, previousButtonSlotProps != null ? previousButtonSlotProps : backIconButtonProps, {
+    }, previousButtonSlotProps ?? backIconButtonProps, {
       children: isRtl ? /*#__PURE__*/_jsx(NextButtonIcon, _extends({}, slotProps.nextButtonIcon)) : /*#__PURE__*/_jsx(PreviousButtonIcon, _extends({}, slotProps.previousButtonIcon))
     })), /*#__PURE__*/_jsx(NextButtonSlot, _extends({
       onClick: handleNextButtonClick,
@@ -87,7 +85,7 @@ const TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePagin
       color: "inherit",
       "aria-label": getItemAriaLabel('next', page),
       title: getItemAriaLabel('next', page)
-    }, nextButtonSlotProps != null ? nextButtonSlotProps : nextIconButtonProps, {
+    }, nextButtonSlotProps ?? nextIconButtonProps, {
       children: isRtl ? /*#__PURE__*/_jsx(PreviousButtonIcon, _extends({}, slotProps.previousButtonIcon)) : /*#__PURE__*/_jsx(NextButtonIcon, _extends({}, slotProps.nextButtonIcon))
     })), showLastButton && /*#__PURE__*/_jsx(LastButtonSlot, _extends({
       onClick: handleLastPageButtonClick,

package/TableSortLabel/TableSortLabel.js

@@ -13,8 +13,7 @@ import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import capitalize from '../utils/capitalize';
 import tableSortLabelClasses, { getTableSortLabelUtilityClass } from './tableSortLabelClasses';
-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/Tabs/Tabs.js

@@ -23,8 +23,7 @@ import useEventCallback from '../utils/useEventCallback';
 import tabsClasses, { getTabsUtilityClass } from './tabsClasses';
 import ownerDocument from '../utils/ownerDocument';
 import ownerWindow from '../utils/ownerWindow';
-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 nextItem = (list, item) => {
   if (list === item) {
     return list.firstChild;
@@ -510,12 +509,10 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     const handleMutation = records => {
       records.forEach(record => {
         record.removedNodes.forEach(item => {
-          var _resizeObserver;
-          (_resizeObserver = resizeObserver) == null || _resizeObserver.unobserve(item);
+          resizeObserver?.unobserve(item);
         });
         record.addedNodes.forEach(item => {
-          var _resizeObserver2;
-          (_resizeObserver2 = resizeObserver) == null || _resizeObserver2.observe(item);
+          resizeObserver?.observe(item);
         });
       });
       handleResize();
@@ -537,11 +534,10 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       });
     }
     return () => {
-      var _mutationObserver, _resizeObserver3;
       handleResize.clear();
       win.removeEventListener('resize', handleResize);
-      (_mutationObserver = mutationObserver) == null || _mutationObserver.disconnect();
-      (_resizeObserver3 = resizeObserver) == null || _resizeObserver3.disconnect();
+      mutationObserver?.disconnect();
+      resizeObserver?.disconnect();
     };
   }, [updateIndicatorState, updateScrollButtonState]);
 
@@ -575,7 +571,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       };
     }
     return undefined;
-  }, [scrollable, scrollButtons, updateScrollObserver, childrenProp == null ? void 0 : childrenProp.length]);
+  }, [scrollable, scrollButtons, updateScrollObserver, childrenProp?.length]);
   React.useEffect(() => {
     setMounted(true);
   }, []);

package/TextField/TextField.js

@@ -19,8 +19,7 @@ import FormControl from '../FormControl';
 import FormHelperText from '../FormHelperText';
 import Select from '../Select';
 import { getTextFieldUtilityClass } from './textFieldClasses';
-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 variantComponent = {
   standard: Input,
   filled: FilledInput,

package/Tooltip/Tooltip.js

@@ -24,8 +24,7 @@ import useId from '../utils/useId';
 import useIsFocusVisible from '../utils/useIsFocusVisible';
 import useControlled from '../utils/useControlled';
 import tooltipClasses, { getTooltipUtilityClass } from './tooltipClasses';
-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 round(value) {
   return Math.round(value * 1e5) / 1e5;
 }
@@ -217,7 +216,6 @@ function composeEventHandler(handler, eventHandler) {
 
 // TODO v6: Remove PopperComponent, PopperProps, TransitionComponent and TransitionProps.
 const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
-  var _ref, _slots$popper, _ref2, _ref3, _slots$transition, _ref4, _slots$tooltip, _ref5, _slots$arrow, _slotProps$popper, _ref6, _slotProps$popper2, _slotProps$transition, _slotProps$tooltip, _ref7, _slotProps$tooltip2, _slotProps$arrow, _ref8, _slotProps$arrow2;
   const props = useThemeProps({
     props: inProps,
     name: 'MuiTooltip'
@@ -503,7 +501,6 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
     }
   }
   const popperOptions = React.useMemo(() => {
-    var _PopperProps$popperOp;
     let tooltipModifiers = [{
       name: 'arrow',
       enabled: Boolean(arrowRef),
@@ -512,7 +509,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
         padding: 4
       }
     }];
-    if ((_PopperProps$popperOp = PopperProps.popperOptions) != null && _PopperProps$popperOp.modifiers) {
+    if (PopperProps.popperOptions?.modifiers) {
       tooltipModifiers = tooltipModifiers.concat(PopperProps.popperOptions.modifiers);
     }
     return _extends({}, PopperProps.popperOptions, {
@@ -528,23 +525,23 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
     touch: ignoreNonTouchEvents.current
   });
   const classes = useUtilityClasses(ownerState);
-  const PopperComponent = (_ref = (_slots$popper = slots.popper) != null ? _slots$popper : components.Popper) != null ? _ref : TooltipPopper;
-  const TransitionComponent = (_ref2 = (_ref3 = (_slots$transition = slots.transition) != null ? _slots$transition : components.Transition) != null ? _ref3 : TransitionComponentProp) != null ? _ref2 : Grow;
-  const TooltipComponent = (_ref4 = (_slots$tooltip = slots.tooltip) != null ? _slots$tooltip : components.Tooltip) != null ? _ref4 : TooltipTooltip;
-  const ArrowComponent = (_ref5 = (_slots$arrow = slots.arrow) != null ? _slots$arrow : components.Arrow) != null ? _ref5 : TooltipArrow;
-  const popperProps = appendOwnerState(PopperComponent, _extends({}, PopperProps, (_slotProps$popper = slotProps.popper) != null ? _slotProps$popper : componentsProps.popper, {
-    className: clsx(classes.popper, PopperProps == null ? void 0 : PopperProps.className, (_ref6 = (_slotProps$popper2 = slotProps.popper) != null ? _slotProps$popper2 : componentsProps.popper) == null ? void 0 : _ref6.className)
+  const PopperComponent = slots.popper ?? components.Popper ?? TooltipPopper;
+  const TransitionComponent = slots.transition ?? components.Transition ?? TransitionComponentProp ?? Grow;
+  const TooltipComponent = slots.tooltip ?? components.Tooltip ?? TooltipTooltip;
+  const ArrowComponent = slots.arrow ?? components.Arrow ?? TooltipArrow;
+  const popperProps = appendOwnerState(PopperComponent, _extends({}, PopperProps, slotProps.popper ?? componentsProps.popper, {
+    className: clsx(classes.popper, PopperProps?.className, (slotProps.popper ?? componentsProps.popper)?.className)
   }), ownerState);
-  const transitionProps = appendOwnerState(TransitionComponent, _extends({}, TransitionProps, (_slotProps$transition = slotProps.transition) != null ? _slotProps$transition : componentsProps.transition), ownerState);
-  const tooltipProps = appendOwnerState(TooltipComponent, _extends({}, (_slotProps$tooltip = slotProps.tooltip) != null ? _slotProps$tooltip : componentsProps.tooltip, {
-    className: clsx(classes.tooltip, (_ref7 = (_slotProps$tooltip2 = slotProps.tooltip) != null ? _slotProps$tooltip2 : componentsProps.tooltip) == null ? void 0 : _ref7.className)
+  const transitionProps = appendOwnerState(TransitionComponent, _extends({}, TransitionProps, slotProps.transition ?? componentsProps.transition), ownerState);
+  const tooltipProps = appendOwnerState(TooltipComponent, _extends({}, slotProps.tooltip ?? componentsProps.tooltip, {
+    className: clsx(classes.tooltip, (slotProps.tooltip ?? componentsProps.tooltip)?.className)
   }), ownerState);
-  const tooltipArrowProps = appendOwnerState(ArrowComponent, _extends({}, (_slotProps$arrow = slotProps.arrow) != null ? _slotProps$arrow : componentsProps.arrow, {
-    className: clsx(classes.arrow, (_ref8 = (_slotProps$arrow2 = slotProps.arrow) != null ? _slotProps$arrow2 : componentsProps.arrow) == null ? void 0 : _ref8.className)
+  const tooltipArrowProps = appendOwnerState(ArrowComponent, _extends({}, slotProps.arrow ?? componentsProps.arrow, {
+    className: clsx(classes.arrow, (slotProps.arrow ?? componentsProps.arrow)?.className)
   }), ownerState);
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [/*#__PURE__*/React.cloneElement(children, childrenProps), /*#__PURE__*/_jsx(PopperComponent, _extends({
-      as: PopperComponentProp != null ? PopperComponentProp : Popper,
+      as: PopperComponentProp ?? Popper,
       placement: placement,
       anchorEl: followCursor ? {
         getBoundingClientRect: () => ({

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.15.13
+ * @mui/material v6.0.0-alpha.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internal/SwitchBase.js

@@ -14,8 +14,7 @@ import useControlled from '../utils/useControlled';
 import useFormControl from '../FormControl/useFormControl';
 import ButtonBase from '../ButtonBase';
 import { getSwitchBaseUtilityClass } from './switchBaseClasses';
-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/legacy/Accordion/Accordion.js

@@ -1,9 +1,9 @@
 'use client';
 
+import _extends from "@babel/runtime/helpers/esm/extends";
 import _toArray from "@babel/runtime/helpers/esm/toArray";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import * as React from 'react';
 import { isFragment } from 'react-is';
@@ -11,16 +11,15 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import chainPropTypes from '@mui/utils/chainPropTypes';
 import composeClasses from '@mui/utils/composeClasses';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import Collapse from '../Collapse';
 import Paper from '../Paper';
 import AccordionContext from './AccordionContext';
 import useControlled from '../utils/useControlled';
 import useSlot from '../utils/useSlot';
 import accordionClasses, { getAccordionUtilityClass } from './accordionClasses';
-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('MuiAccordion');
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes,
     square = ownerState.square,
@@ -85,26 +84,37 @@ var AccordionRoot = styled(Paper, {
     backgroundColor: (theme.vars || theme).palette.action.disabledBackground
   });
 }, function (_ref4) {
-  var theme = _ref4.theme,
-    ownerState = _ref4.ownerState;
-  return _extends({}, !ownerState.square && {
-    borderRadius: 0,
-    '&:first-of-type': {
-      borderTopLeftRadius: (theme.vars || theme).shape.borderRadius,
-      borderTopRightRadius: (theme.vars || theme).shape.borderRadius
-    },
-    '&:last-of-type': {
-      borderBottomLeftRadius: (theme.vars || theme).shape.borderRadius,
-      borderBottomRightRadius: (theme.vars || theme).shape.borderRadius,
-      // Fix a rendering issue on Edge
-      '@supports (-ms-ime-align: auto)': {
-        borderBottomLeftRadius: 0,
-        borderBottomRightRadius: 0
+  var theme = _ref4.theme;
+  return {
+    variants: [{
+      props: function props(_props) {
+        return !_props.square;
+      },
+      style: {
+        borderRadius: 0,
+        '&:first-of-type': {
+          borderTopLeftRadius: (theme.vars || theme).shape.borderRadius,
+          borderTopRightRadius: (theme.vars || theme).shape.borderRadius
+        },
+        '&:last-of-type': {
+          borderBottomLeftRadius: (theme.vars || theme).shape.borderRadius,
+          borderBottomRightRadius: (theme.vars || theme).shape.borderRadius,
+          // Fix a rendering issue on Edge
+          '@supports (-ms-ime-align: auto)': {
+            borderBottomLeftRadius: 0,
+            borderBottomRightRadius: 0
+          }
+        }
       }
-    }
-  }, !ownerState.disableGutters && _defineProperty({}, "&.".concat(accordionClasses.expanded), {
-    margin: '16px 0'
-  }));
+    }, {
+      props: function props(_props2) {
+        return !_props2.disableGutters;
+      },
+      style: _defineProperty({}, "&.".concat(accordionClasses.expanded), {
+        margin: '16px 0'
+      })
+    }]
+  };
 });
 var Accordion = /*#__PURE__*/React.forwardRef(function Accordion(inProps, ref) {
   var props = useThemeProps({

package/legacy/AccordionActions/AccordionActions.js

@@ -1,15 +1,15 @@
 '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 { getAccordionActionsUtilityClass } from './accordionActionsClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+var useThemeProps = createUseThemeProps('MuiAccordionActions');
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes,
     disableSpacing = ownerState.disableSpacing;
@@ -25,18 +25,21 @@ var AccordionActionsRoot = styled('div', {
     var ownerState = props.ownerState;
     return [styles.root, !ownerState.disableSpacing && styles.spacing];
   }
-})(function (_ref) {
-  var ownerState = _ref.ownerState;
-  return _extends({
-    display: 'flex',
-    alignItems: 'center',
-    padding: 8,
-    justifyContent: 'flex-end'
-  }, !ownerState.disableSpacing && {
-    '& > :not(style) ~ :not(style)': {
-      marginLeft: 8
+})({
+  display: 'flex',
+  alignItems: 'center',
+  padding: 8,
+  justifyContent: 'flex-end',
+  variants: [{
+    props: function props(_props) {
+      return !_props.disableSpacing;
+    },
+    style: {
+      '& > :not(style) ~ :not(style)': {
+        marginLeft: 8
+      }
     }
-  });
+  }]
 });
 var AccordionActions = /*#__PURE__*/React.forwardRef(function AccordionActions(inProps, ref) {
   var props = useThemeProps({

package/legacy/AccordionDetails/AccordionDetails.js

@@ -6,10 +6,10 @@ 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 { getAccordionDetailsUtilityClass } from './accordionDetailsClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+var useThemeProps = createUseThemeProps('MuiAccordionDetails');
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes;
   var slots = {

package/legacy/AccordionSummary/AccordionSummary.js

@@ -1,19 +1,18 @@
 'use client';
 
+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 _extends from "@babel/runtime/helpers/esm/extends";
 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 ButtonBase from '../ButtonBase';
 import AccordionContext from '../Accordion/AccordionContext';
 import accordionSummaryClasses, { getAccordionSummaryUtilityClass } from './accordionSummaryClasses';
-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('MuiAccordionSummary');
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes,
     expanded = ownerState.expanded,
@@ -34,12 +33,11 @@ var AccordionSummaryRoot = styled(ButtonBase, {
     return styles.root;
   }
 })(function (_ref) {
-  var theme = _ref.theme,
-    ownerState = _ref.ownerState;
+  var theme = _ref.theme;
   var transition = {
     duration: theme.transitions.duration.shortest
   };
-  return _extends(_defineProperty(_defineProperty(_defineProperty({
+  return _defineProperty(_defineProperty(_defineProperty(_defineProperty({
     display: 'flex',
     minHeight: 48,
     padding: theme.spacing(0, 2),
@@ -50,9 +48,14 @@ var AccordionSummaryRoot = styled(ButtonBase, {
     opacity: (theme.vars || theme).palette.action.disabledOpacity
   }), "&:hover:not(.".concat(accordionSummaryClasses.disabled, ")"), {
     cursor: 'pointer'
-  }), !ownerState.disableGutters && _defineProperty({}, "&.".concat(accordionSummaryClasses.expanded), {
-    minHeight: 64
-  }));
+  }), "variants", [{
+    props: function props(_props) {
+      return !_props.disableGutters;
+    },
+    style: _defineProperty({}, "&.".concat(accordionSummaryClasses.expanded), {
+      minHeight: 64
+    })
+  }]);
 });
 var AccordionSummaryContent = styled('div', {
   name: 'MuiAccordionSummary',
@@ -61,19 +64,24 @@ var AccordionSummaryContent = styled('div', {
     return styles.content;
   }
 })(function (_ref3) {
-  var theme = _ref3.theme,
-    ownerState = _ref3.ownerState;
-  return _extends({
+  var theme = _ref3.theme;
+  return {
     display: 'flex',
     flexGrow: 1,
-    margin: '12px 0'
-  }, !ownerState.disableGutters && _defineProperty({
-    transition: theme.transitions.create(['margin'], {
-      duration: theme.transitions.duration.shortest
-    })
-  }, "&.".concat(accordionSummaryClasses.expanded), {
-    margin: '20px 0'
-  }));
+    margin: '12px 0',
+    variants: [{
+      props: function props(_props2) {
+        return !_props2.disableGutters;
+      },
+      style: _defineProperty({
+        transition: theme.transitions.create(['margin'], {
+          duration: theme.transitions.duration.shortest
+        })
+      }, "&.".concat(accordionSummaryClasses.expanded), {
+        margin: '20px 0'
+      })
+    }]
+  };
 });
 var AccordionSummaryExpandIconWrapper = styled('div', {
   name: 'MuiAccordionSummary',
@@ -81,8 +89,8 @@ var AccordionSummaryExpandIconWrapper = styled('div', {
   overridesResolver: function overridesResolver(props, styles) {
     return styles.expandIconWrapper;
   }
-})(function (_ref5) {
-  var theme = _ref5.theme;
+})(function (_ref4) {
+  var theme = _ref4.theme;
   return _defineProperty({
     display: 'flex',
     color: (theme.vars || theme).palette.action.active,