@mui/material 5.15.12 → 5.15.14

package/SvgIcon/SvgIcon.js

@@ -44,7 +44,7 @@ const SvgIconRoot = styled('svg', {
     height: '1em',
     display: 'inline-block',
     // the <svg> will define the property that has `currentColor`
-    // e.g. heroicons uses fill="none" and stroke="currentColor"
+    // for example 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', {

package/Switch/Switch.js

@@ -12,11 +12,11 @@ import composeClasses from '@mui/utils/composeClasses';
 import { alpha, darken, lighten } from '@mui/system/colorManipulator';
 import capitalize from '../utils/capitalize';
 import SwitchBase from '../internal/SwitchBase';
-import useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
+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";
+const useThemeProps = createUseThemeProps('MuiSwitch');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -45,9 +45,7 @@ const SwitchRoot = styled('span', {
     } = props;
     return [styles.root, ownerState.edge && styles[`edge${capitalize(ownerState.edge)}`], styles[`size${capitalize(ownerState.size)}`]];
   }
-})(({
-  ownerState
-}) => _extends({
+})({
   display: 'inline-flex',
   width: 34 + 12 * 2,
   height: 14 + 12 * 2,
@@ -62,26 +60,42 @@ const SwitchRoot = styled('span', {
   // For correct alignment with the text.
   '@media print': {
     colorAdjust: 'exact'
-  }
-}, ownerState.edge === 'start' && {
-  marginLeft: -8
-}, ownerState.edge === 'end' && {
-  marginRight: -8
-}, ownerState.size === 'small' && {
-  width: 40,
-  height: 24,
-  padding: 7,
-  [`& .${switchClasses.thumb}`]: {
-    width: 16,
-    height: 16
   },
-  [`& .${switchClasses.switchBase}`]: {
-    padding: 4,
-    [`&.${switchClasses.checked}`]: {
-      transform: 'translateX(16px)'
+  variants: [{
+    props: {
+      edge: 'start'
+    },
+    style: {
+      marginLeft: -8
     }
-  }
-}));
+  }, {
+    props: {
+      edge: 'end'
+    },
+    style: {
+      marginRight: -8
+    }
+  }, {
+    props: {
+      size: 'small'
+    },
+    style: {
+      width: 40,
+      height: 24,
+      padding: 7,
+      [`& .${switchClasses.thumb}`]: {
+        width: 16,
+        height: 16
+      },
+      [`& .${switchClasses.switchBase}`]: {
+        padding: 4,
+        [`&.${switchClasses.checked}`]: {
+          transform: 'translateX(16px)'
+        }
+      }
+    }
+  }]
+});
 const SwitchSwitchBase = styled(SwitchBase, {
   name: 'MuiSwitch',
   slot: 'SwitchBase',
@@ -122,32 +136,38 @@ const SwitchSwitchBase = styled(SwitchBase, {
     width: '300%'
   }
 }), ({
-  theme,
-  ownerState
-}) => _extends({
+  theme
+}) => ({
   '&:hover': {
     backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.action.active, theme.palette.action.hoverOpacity),
     // Reset on touch devices, it doesn't add specificity
     '@media (hover: none)': {
       backgroundColor: 'transparent'
     }
-  }
-}, ownerState.color !== 'default' && {
-  [`&.${switchClasses.checked}`]: {
-    color: (theme.vars || theme).palette[ownerState.color].main,
-    '&:hover': {
-      backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
-      '@media (hover: none)': {
-        backgroundColor: 'transparent'
-      }
+  },
+  variants: [...Object.entries(theme.palette).filter(([, value]) => value.main && value.light) // check all the used fields in the style below
+  .map(([color]) => ({
+    props: {
+      color
     },
-    [`&.${switchClasses.disabled}`]: {
-      color: theme.vars ? theme.vars.palette.Switch[`${ownerState.color}DisabledColor`] : `${theme.palette.mode === 'light' ? lighten(theme.palette[ownerState.color].main, 0.62) : darken(theme.palette[ownerState.color].main, 0.55)}`
+    style: {
+      [`&.${switchClasses.checked}`]: {
+        color: (theme.vars || theme).palette[color].main,
+        '&:hover': {
+          backgroundColor: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette[color].main, theme.palette.action.hoverOpacity),
+          '@media (hover: none)': {
+            backgroundColor: 'transparent'
+          }
+        },
+        [`&.${switchClasses.disabled}`]: {
+          color: theme.vars ? theme.vars.palette.Switch[`${color}DisabledColor`] : `${theme.palette.mode === 'light' ? lighten(theme.palette[color].main, 0.62) : darken(theme.palette[color].main, 0.55)}`
+        }
+      },
+      [`&.${switchClasses.checked} + .${switchClasses.track}`]: {
+        backgroundColor: (theme.vars || theme).palette[color].main
+      }
     }
-  },
-  [`&.${switchClasses.checked} + .${switchClasses.track}`]: {
-    backgroundColor: (theme.vars || theme).palette[ownerState.color].main
-  }
+  }))]
 }));
 const SwitchTrack = styled('span', {
   name: 'MuiSwitch',

package/TabScrollButton/TabScrollButton.js

@@ -9,10 +9,10 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { useSlotProps } from '@mui/base/utils';
 import composeClasses from '@mui/utils/composeClasses';
+import { useRtl } from '@mui/system/RtlProvider';
 import KeyboardArrowLeft from '../internal/svg-icons/KeyboardArrowLeft';
 import KeyboardArrowRight from '../internal/svg-icons/KeyboardArrowRight';
 import ButtonBase from '../ButtonBase';
-import useTheme from '../styles/useTheme';
 import useThemeProps from '../styles/useThemeProps';
 import styled from '../styles/styled';
 import tabScrollButtonClasses, { getTabScrollButtonUtilityClass } from './tabScrollButtonClasses';
@@ -66,8 +66,7 @@ const TabScrollButton = /*#__PURE__*/React.forwardRef(function TabScrollButton(i
       direction
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const theme = useTheme();
-  const isRtl = theme.direction === 'rtl';
+  const isRtl = useRtl();
   const ownerState = _extends({
     isRtl
   }, props);

package/TablePagination/TablePaginationActions.js

@@ -5,9 +5,9 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["backIconButtonProps", "count", "disabled", "getItemAriaLabel", "nextIconButtonProps", "onPageChange", "page", "rowsPerPage", "showFirstButton", "showLastButton", "slots", "slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { useRtl } from '@mui/system/RtlProvider';
 import KeyboardArrowLeft from '../internal/svg-icons/KeyboardArrowLeft';
 import KeyboardArrowRight from '../internal/svg-icons/KeyboardArrowRight';
-import useTheme from '../styles/useTheme';
 import IconButton from '../IconButton';
 import LastPageIconDefault from '../internal/svg-icons/LastPage';
 import FirstPageIconDefault from '../internal/svg-icons/FirstPage';
@@ -34,7 +34,7 @@ const TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePagin
       slotProps = {}
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const theme = useTheme();
+  const isRtl = useRtl();
   const handleFirstPageButtonClick = event => {
     onPageChange(event, 0);
   };
@@ -55,14 +55,14 @@ const TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePagin
   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 FirstButtonSlot = theme.direction === 'rtl' ? LastButton : FirstButton;
-  const PreviousButtonSlot = theme.direction === 'rtl' ? NextButton : PreviousButton;
-  const NextButtonSlot = theme.direction === 'rtl' ? PreviousButton : NextButton;
-  const LastButtonSlot = theme.direction === 'rtl' ? FirstButton : LastButton;
-  const firstButtonSlotProps = theme.direction === 'rtl' ? slotProps.lastButton : slotProps.firstButton;
-  const previousButtonSlotProps = theme.direction === 'rtl' ? slotProps.nextButton : slotProps.previousButton;
-  const nextButtonSlotProps = theme.direction === 'rtl' ? slotProps.previousButton : slotProps.nextButton;
-  const lastButtonSlotProps = theme.direction === 'rtl' ? slotProps.firstButton : slotProps.lastButton;
+  const FirstButtonSlot = isRtl ? LastButton : FirstButton;
+  const PreviousButtonSlot = isRtl ? NextButton : PreviousButton;
+  const NextButtonSlot = isRtl ? PreviousButton : NextButton;
+  const LastButtonSlot = isRtl ? FirstButton : LastButton;
+  const firstButtonSlotProps = isRtl ? slotProps.lastButton : slotProps.firstButton;
+  const previousButtonSlotProps = isRtl ? slotProps.nextButton : slotProps.previousButton;
+  const nextButtonSlotProps = isRtl ? slotProps.previousButton : slotProps.nextButton;
+  const lastButtonSlotProps = isRtl ? slotProps.firstButton : slotProps.lastButton;
   return /*#__PURE__*/_jsxs("div", _extends({
     ref: ref
   }, other, {
@@ -72,7 +72,7 @@ const TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePagin
       "aria-label": getItemAriaLabel('first', page),
       title: getItemAriaLabel('first', page)
     }, firstButtonSlotProps, {
-      children: theme.direction === 'rtl' ? /*#__PURE__*/_jsx(LastButtonIcon, _extends({}, slotProps.lastButtonIcon)) : /*#__PURE__*/_jsx(FirstButtonIcon, _extends({}, slotProps.firstButtonIcon))
+      children: isRtl ? /*#__PURE__*/_jsx(LastButtonIcon, _extends({}, slotProps.lastButtonIcon)) : /*#__PURE__*/_jsx(FirstButtonIcon, _extends({}, slotProps.firstButtonIcon))
     })), /*#__PURE__*/_jsx(PreviousButtonSlot, _extends({
       onClick: handleBackButtonClick,
       disabled: disabled || page === 0,
@@ -80,7 +80,7 @@ const TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePagin
       "aria-label": getItemAriaLabel('previous', page),
       title: getItemAriaLabel('previous', page)
     }, previousButtonSlotProps != null ? previousButtonSlotProps : backIconButtonProps, {
-      children: theme.direction === 'rtl' ? /*#__PURE__*/_jsx(NextButtonIcon, _extends({}, slotProps.nextButtonIcon)) : /*#__PURE__*/_jsx(PreviousButtonIcon, _extends({}, slotProps.previousButtonIcon))
+      children: isRtl ? /*#__PURE__*/_jsx(NextButtonIcon, _extends({}, slotProps.nextButtonIcon)) : /*#__PURE__*/_jsx(PreviousButtonIcon, _extends({}, slotProps.previousButtonIcon))
     })), /*#__PURE__*/_jsx(NextButtonSlot, _extends({
       onClick: handleNextButtonClick,
       disabled: disabled || (count !== -1 ? page >= Math.ceil(count / rowsPerPage) - 1 : false),
@@ -88,14 +88,14 @@ const TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePagin
       "aria-label": getItemAriaLabel('next', page),
       title: getItemAriaLabel('next', page)
     }, nextButtonSlotProps != null ? nextButtonSlotProps : nextIconButtonProps, {
-      children: theme.direction === 'rtl' ? /*#__PURE__*/_jsx(PreviousButtonIcon, _extends({}, slotProps.previousButtonIcon)) : /*#__PURE__*/_jsx(NextButtonIcon, _extends({}, slotProps.nextButtonIcon))
+      children: isRtl ? /*#__PURE__*/_jsx(PreviousButtonIcon, _extends({}, slotProps.previousButtonIcon)) : /*#__PURE__*/_jsx(NextButtonIcon, _extends({}, slotProps.nextButtonIcon))
     })), showLastButton && /*#__PURE__*/_jsx(LastButtonSlot, _extends({
       onClick: handleLastPageButtonClick,
       disabled: disabled || page >= Math.ceil(count / rowsPerPage) - 1,
       "aria-label": getItemAriaLabel('last', page),
       title: getItemAriaLabel('last', page)
     }, lastButtonSlotProps, {
-      children: theme.direction === 'rtl' ? /*#__PURE__*/_jsx(FirstButtonIcon, _extends({}, slotProps.firstButtonIcon)) : /*#__PURE__*/_jsx(LastButtonIcon, _extends({}, slotProps.lastButtonIcon))
+      children: isRtl ? /*#__PURE__*/_jsx(FirstButtonIcon, _extends({}, slotProps.firstButtonIcon)) : /*#__PURE__*/_jsx(LastButtonIcon, _extends({}, slotProps.lastButtonIcon))
     }))]
   }));
 });

package/Tabs/Tabs.js

@@ -10,6 +10,7 @@ import clsx from 'clsx';
 import refType from '@mui/utils/refType';
 import { useSlotProps } from '@mui/base/utils';
 import composeClasses from '@mui/utils/composeClasses';
+import { useRtl } from '@mui/system/RtlProvider';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import useTheme from '../styles/useTheme';
@@ -209,7 +210,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     name: 'MuiTabs'
   });
   const theme = useTheme();
-  const isRtl = theme.direction === 'rtl';
+  const isRtl = useRtl();
   const {
       'aria-label': ariaLabel,
       'aria-labelledby': ariaLabelledBy,
@@ -297,7 +298,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
         clientWidth: tabsNode.clientWidth,
         scrollLeft: tabsNode.scrollLeft,
         scrollTop: tabsNode.scrollTop,
-        scrollLeftNormalized: getNormalizedScrollLeft(tabsNode, theme.direction),
+        scrollLeftNormalized: getNormalizedScrollLeft(tabsNode, isRtl ? 'rtl' : 'ltr'),
         scrollWidth: tabsNode.scrollWidth,
         top: rect.top,
         bottom: rect.bottom,

package/Tooltip/Tooltip.js

@@ -11,6 +11,7 @@ import elementAcceptingRef from '@mui/utils/elementAcceptingRef';
 import { appendOwnerState } from '@mui/base/utils';
 import composeClasses from '@mui/utils/composeClasses';
 import { alpha } from '@mui/system/colorManipulator';
+import { useRtl } from '@mui/system/RtlProvider';
 import styled from '../styles/styled';
 import useTheme from '../styles/useTheme';
 import useThemeProps from '../styles/useThemeProps';
@@ -206,11 +207,11 @@ export function testReset() {
   hystersisTimer.clear();
 }
 function composeEventHandler(handler, eventHandler) {
-  return event => {
+  return (event, ...params) => {
     if (eventHandler) {
-      eventHandler(event);
+      eventHandler(event, ...params);
     }
-    handler(event);
+    handler(event, ...params);
   };
 }
 
@@ -257,7 +258,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
     children: childrenProp
   });
   const theme = useTheme();
-  const isRtl = theme.direction === 'rtl';
+  const isRtl = useRtl();
   const [childNode, setChildNode] = React.useState();
   const [arrowRef, setArrowRef] = React.useState(null);
   const ignoreNonTouchEvents = React.useRef(false);

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.15.12
+ * @mui/material v5.15.14
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

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,8 +11,7 @@ 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';
@@ -21,6 +20,7 @@ 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";
+var useThemeProps = createUseThemeProps('MuiAccordion');
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes,
     square = ownerState.square,
@@ -85,26 +85,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,19 @@
 '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";
+var useThemeProps = createUseThemeProps('MuiAccordionSummary');
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes,
     expanded = ownerState.expanded,
@@ -34,12 +34,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 +49,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 +65,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 +90,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,