@mui/material 6.0.0-alpha.2 → 6.0.0-alpha.4

package/node/StepLabel/StepLabel.js

@@ -165,27 +165,34 @@ const StepLabel = /*#__PURE__*/React.forwardRef(function StepLabel(inProps, ref)
   const classes = useUtilityClasses(ownerState);
   const externalForwardedProps = {
     slots,
-    slotProps: (0, _extends2.default)({}, componentsProps, slotProps)
+    slotProps: (0, _extends2.default)({
+      stepIcon: StepIconProps
+    }, componentsProps, slotProps)
   };
   const [LabelSlot, labelProps] = (0, _useSlot.default)('label', {
     elementType: StepLabelLabel,
     externalForwardedProps,
     ownerState
   });
+  const [StepIconSlot, stepIconProps] = (0, _useSlot.default)('stepIcon', {
+    elementType: StepIconComponent,
+    externalForwardedProps,
+    ownerState
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(StepLabelRoot, (0, _extends2.default)({
     className: (0, _clsx.default)(classes.root, className),
     ref: ref,
     ownerState: ownerState
   }, other, {
-    children: [icon || StepIconComponent ? /*#__PURE__*/(0, _jsxRuntime.jsx)(StepLabelIconContainer, {
+    children: [icon || StepIconSlot ? /*#__PURE__*/(0, _jsxRuntime.jsx)(StepLabelIconContainer, {
       className: classes.iconContainer,
       ownerState: ownerState,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StepIconComponent, (0, _extends2.default)({
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StepIconSlot, (0, _extends2.default)({
         completed: completed,
         active: active,
         error: error,
         icon: icon
-      }, StepIconProps))
+      }, stepIconProps))
     }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(StepLabelLabelContainer, {
       className: classes.labelContainer,
       ownerState: ownerState,
@@ -239,21 +246,25 @@ process.env.NODE_ENV !== "production" ? StepLabel.propTypes /* remove-proptypes
    * @default {}
    */
   slotProps: _propTypes.default.shape({
-    label: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
+    label: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    stepIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
   }),
   /**
    * The components used for each slot inside.
    * @default {}
    */
   slots: _propTypes.default.shape({
-    label: _propTypes.default.elementType
+    label: _propTypes.default.elementType,
+    stepIcon: _propTypes.default.elementType
   }),
   /**
    * The component to render in place of the [`StepIcon`](/material-ui/api/step-icon/).
+   * @deprecated Use `slots.stepIcon` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    */
   StepIconComponent: _propTypes.default.elementType,
   /**
    * Props applied to the [`StepIcon`](/material-ui/api/step-icon/) element.
+   * @deprecated Use `slotProps.stepIcon` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    */
   StepIconProps: _propTypes.default.object,
   /**

package/node/Table/Table.js

@@ -40,9 +40,8 @@ const TableRoot = (0, _styled.default)('table', {
     return [styles.root, ownerState.stickyHeader && styles.stickyHeader];
   }
 })(({
-  theme,
-  ownerState
-}) => (0, _extends2.default)({
+  theme
+}) => ({
   display: 'table',
   width: '100%',
   borderCollapse: 'collapse',
@@ -52,9 +51,15 @@ const TableRoot = (0, _styled.default)('table', {
     color: (theme.vars || theme).palette.text.secondary,
     textAlign: 'left',
     captionSide: 'bottom'
-  })
-}, ownerState.stickyHeader && {
-  borderCollapse: 'separate'
+  }),
+  variants: [{
+    props: ({
+      ownerState
+    }) => ownerState.stickyHeader,
+    style: {
+      borderCollapse: 'separate'
+    }
+  }]
 }));
 const defaultComponent = 'table';
 const Table = /*#__PURE__*/React.forwardRef(function Table(inProps, ref) {

package/node/TableCell/TableCell.js

@@ -47,8 +47,7 @@ const TableCellRoot = (0, _styled.default)('td', {
     return [styles.root, styles[ownerState.variant], styles[`size${(0, _capitalize.default)(ownerState.size)}`], ownerState.padding !== 'normal' && styles[`padding${(0, _capitalize.default)(ownerState.padding)}`], ownerState.align !== 'inherit' && styles[`align${(0, _capitalize.default)(ownerState.align)}`], ownerState.stickyHeader && styles.stickyHeader];
   }
 })(({
-  theme,
-  ownerState
+  theme
 }) => (0, _extends2.default)({}, theme.typography.body2, {
   display: 'table-cell',
   verticalAlign: 'inherit',
@@ -57,47 +56,103 @@ const TableCellRoot = (0, _styled.default)('td', {
   borderBottom: theme.vars ? `1px solid ${theme.vars.palette.TableCell.border}` : `1px solid
     ${theme.palette.mode === 'light' ? (0, _colorManipulator.lighten)((0, _colorManipulator.alpha)(theme.palette.divider, 1), 0.88) : (0, _colorManipulator.darken)((0, _colorManipulator.alpha)(theme.palette.divider, 1), 0.68)}`,
   textAlign: 'left',
-  padding: 16
-}, ownerState.variant === 'head' && {
-  color: (theme.vars || theme).palette.text.primary,
-  lineHeight: theme.typography.pxToRem(24),
-  fontWeight: theme.typography.fontWeightMedium
-}, ownerState.variant === 'body' && {
-  color: (theme.vars || theme).palette.text.primary
-}, ownerState.variant === 'footer' && {
-  color: (theme.vars || theme).palette.text.secondary,
-  lineHeight: theme.typography.pxToRem(21),
-  fontSize: theme.typography.pxToRem(12)
-}, ownerState.size === 'small' && {
-  padding: '6px 16px',
-  [`&.${_tableCellClasses.default.paddingCheckbox}`]: {
-    width: 24,
-    // prevent the checkbox column from growing
-    padding: '0 12px 0 16px',
-    '& > *': {
+  padding: 16,
+  variants: [{
+    props: {
+      variant: 'head'
+    },
+    style: {
+      color: (theme.vars || theme).palette.text.primary,
+      lineHeight: theme.typography.pxToRem(24),
+      fontWeight: theme.typography.fontWeightMedium
+    }
+  }, {
+    props: {
+      variant: 'body'
+    },
+    style: {
+      color: (theme.vars || theme).palette.text.primary
+    }
+  }, {
+    props: {
+      variant: 'footer'
+    },
+    style: {
+      color: (theme.vars || theme).palette.text.secondary,
+      lineHeight: theme.typography.pxToRem(21),
+      fontSize: theme.typography.pxToRem(12)
+    }
+  }, {
+    props: {
+      size: 'small'
+    },
+    style: {
+      padding: '6px 16px',
+      [`&.${_tableCellClasses.default.paddingCheckbox}`]: {
+        width: 24,
+        // prevent the checkbox column from growing
+        padding: '0 12px 0 16px',
+        '& > *': {
+          padding: 0
+        }
+      }
+    }
+  }, {
+    props: {
+      padding: 'checkbox'
+    },
+    style: {
+      width: 48,
+      // prevent the checkbox column from growing
+      padding: '0 0 0 4px'
+    }
+  }, {
+    props: {
+      padding: 'none'
+    },
+    style: {
       padding: 0
     }
-  }
-}, ownerState.padding === 'checkbox' && {
-  width: 48,
-  // prevent the checkbox column from growing
-  padding: '0 0 0 4px'
-}, ownerState.padding === 'none' && {
-  padding: 0
-}, ownerState.align === 'left' && {
-  textAlign: 'left'
-}, ownerState.align === 'center' && {
-  textAlign: 'center'
-}, ownerState.align === 'right' && {
-  textAlign: 'right',
-  flexDirection: 'row-reverse'
-}, ownerState.align === 'justify' && {
-  textAlign: 'justify'
-}, ownerState.stickyHeader && {
-  position: 'sticky',
-  top: 0,
-  zIndex: 2,
-  backgroundColor: (theme.vars || theme).palette.background.default
+  }, {
+    props: {
+      align: 'left'
+    },
+    style: {
+      textAlign: 'left'
+    }
+  }, {
+    props: {
+      align: 'center'
+    },
+    style: {
+      textAlign: 'center'
+    }
+  }, {
+    props: {
+      align: 'right'
+    },
+    style: {
+      textAlign: 'right',
+      flexDirection: 'row-reverse'
+    }
+  }, {
+    props: {
+      align: 'justify'
+    },
+    style: {
+      textAlign: 'justify'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.stickyHeader,
+    style: {
+      position: 'sticky',
+      top: 0,
+      zIndex: 2,
+      backgroundColor: (theme.vars || theme).palette.background.default
+    }
+  }]
 }));
 
 /**

package/node/TableSortLabel/TableSortLabel.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -78,9 +78,8 @@ const TableSortLabelIcon = (0, _styled.default)('span', {
     return [styles.icon, styles[`iconDirection${(0, _capitalize.default)(ownerState.direction)}`]];
   }
 })(({
-  theme,
-  ownerState
-}) => (0, _extends2.default)({
+  theme
+}) => ({
   fontSize: 18,
   marginRight: 4,
   marginLeft: 4,
@@ -88,11 +87,22 @@ const TableSortLabelIcon = (0, _styled.default)('span', {
   transition: theme.transitions.create(['opacity', 'transform'], {
     duration: theme.transitions.duration.shorter
   }),
-  userSelect: 'none'
-}, ownerState.direction === 'desc' && {
-  transform: 'rotate(0deg)'
-}, ownerState.direction === 'asc' && {
-  transform: 'rotate(180deg)'
+  userSelect: 'none',
+  variants: [{
+    props: {
+      direction: 'desc'
+    },
+    style: {
+      transform: 'rotate(0deg)'
+    }
+  }, {
+    props: {
+      direction: 'asc'
+    },
+    style: {
+      transform: 'rotate(180deg)'
+    }
+  }]
 }));
 
 /**

package/node/ToggleButton/ToggleButton.js

@@ -14,11 +14,10 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _resolveProps = _interopRequireDefault(require("@mui/utils/resolveProps"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _styles = require("../styles");
+var _colorManipulator = require("@mui/system/colorManipulator");
 var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
-var _styled = _interopRequireDefault(require("../styles/styled"));
+var _zeroStyled = require("../zero-styled");
 var _toggleButtonClasses = _interopRequireWildcard(require("./toggleButtonClasses"));
 var _ToggleButtonGroupContext = _interopRequireDefault(require("../ToggleButtonGroup/ToggleButtonGroupContext"));
 var _ToggleButtonGroupButtonContext = _interopRequireDefault(require("../ToggleButtonGroup/ToggleButtonGroupButtonContext"));
@@ -28,6 +27,7 @@ const _excluded = ["value"],
   _excluded2 = ["children", "className", "color", "disabled", "disableFocusRipple", "fullWidth", "onChange", "onClick", "selected", "size", "value"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiToggleButton');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -42,7 +42,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _toggleButtonClasses.getToggleButtonUtilityClass, classes);
 };
-const ToggleButtonRoot = (0, _styled.default)(_ButtonBase.default, {
+const ToggleButtonRoot = (0, _zeroStyled.styled)(_ButtonBase.default, {
   name: 'MuiToggleButton',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -52,54 +52,83 @@ const ToggleButtonRoot = (0, _styled.default)(_ButtonBase.default, {
     return [styles.root, styles[`size${(0, _capitalize.default)(ownerState.size)}`]];
   }
 })(({
-  theme,
-  ownerState
-}) => {
-  let selectedColor = ownerState.color === 'standard' ? theme.palette.text.primary : theme.palette[ownerState.color].main;
-  let selectedColorChannel;
-  if (theme.vars) {
-    selectedColor = ownerState.color === 'standard' ? theme.vars.palette.text.primary : theme.vars.palette[ownerState.color].main;
-    selectedColorChannel = ownerState.color === 'standard' ? theme.vars.palette.text.primaryChannel : theme.vars.palette[ownerState.color].mainChannel;
-  }
-  return (0, _extends2.default)({}, theme.typography.button, {
-    borderRadius: (theme.vars || theme).shape.borderRadius,
-    padding: 11,
-    border: `1px solid ${(theme.vars || theme).palette.divider}`,
-    color: (theme.vars || theme).palette.action.active
-  }, ownerState.fullWidth && {
-    width: '100%'
-  }, {
-    [`&.${_toggleButtonClasses.default.disabled}`]: {
-      color: (theme.vars || theme).palette.action.disabled,
-      border: `1px solid ${(theme.vars || theme).palette.action.disabledBackground}`
+  theme
+}) => (0, _extends2.default)({}, theme.typography.button, {
+  borderRadius: (theme.vars || theme).shape.borderRadius,
+  padding: 11,
+  border: `1px solid ${(theme.vars || theme).palette.divider}`,
+  color: (theme.vars || theme).palette.action.active,
+  [`&.${_toggleButtonClasses.default.disabled}`]: {
+    color: (theme.vars || theme).palette.action.disabled,
+    border: `1px solid ${(theme.vars || theme).palette.action.disabledBackground}`
+  },
+  '&:hover': {
+    textDecoration: 'none',
+    // Reset on mouse devices
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.hoverOpacity})` : (0, _colorManipulator.alpha)(theme.palette.text.primary, theme.palette.action.hoverOpacity),
+    '@media (hover: none)': {
+      backgroundColor: 'transparent'
+    }
+  },
+  variants: [{
+    props: {
+      color: 'standard'
     },
-    '&:hover': {
-      textDecoration: 'none',
-      // Reset on mouse devices
-      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.hoverOpacity})` : (0, _styles.alpha)(theme.palette.text.primary, theme.palette.action.hoverOpacity),
-      '@media (hover: none)': {
-        backgroundColor: 'transparent'
+    style: {
+      [`&.${_toggleButtonClasses.default.selected}`]: {
+        color: (theme.vars || theme).palette.text.primary,
+        backgroundColor: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.selectedOpacity})` : (0, _colorManipulator.alpha)(theme.palette.text.primary, theme.palette.action.selectedOpacity),
+        '&:hover': {
+          backgroundColor: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : (0, _colorManipulator.alpha)(theme.palette.text.primary, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
+          // Reset on touch devices, it doesn't add specificity
+          '@media (hover: none)': {
+            backgroundColor: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.selectedOpacity})` : (0, _colorManipulator.alpha)(theme.palette.text.primary, theme.palette.action.selectedOpacity)
+          }
+        }
       }
+    }
+  }, ...Object.keys((theme.vars || theme).palette).filter(key => theme.vars ? theme.vars.palette[key].main && theme.vars.palette[key].mainChannel : theme.palette[key].main).map(color => ({
+    props: {
+      color
     },
-    [`&.${_toggleButtonClasses.default.selected}`]: {
-      color: selectedColor,
-      backgroundColor: theme.vars ? `rgba(${selectedColorChannel} / ${theme.vars.palette.action.selectedOpacity})` : (0, _styles.alpha)(selectedColor, theme.palette.action.selectedOpacity),
-      '&:hover': {
-        backgroundColor: theme.vars ? `rgba(${selectedColorChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : (0, _styles.alpha)(selectedColor, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
-        // Reset on touch devices, it doesn't add specificity
-        '@media (hover: none)': {
-          backgroundColor: theme.vars ? `rgba(${selectedColorChannel} / ${theme.vars.palette.action.selectedOpacity})` : (0, _styles.alpha)(selectedColor, theme.palette.action.selectedOpacity)
+    style: {
+      [`&.${_toggleButtonClasses.default.selected}`]: {
+        color: (theme.vars || theme).palette[color].main,
+        backgroundColor: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : (0, _colorManipulator.alpha)(theme.palette[color].main, theme.palette.action.selectedOpacity),
+        '&:hover': {
+          backgroundColor: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : (0, _colorManipulator.alpha)(theme.palette[color].main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
+          // Reset on touch devices, it doesn't add specificity
+          '@media (hover: none)': {
+            backgroundColor: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : (0, _colorManipulator.alpha)(theme.palette[color].main, theme.palette.action.selectedOpacity)
+          }
         }
       }
     }
-  }, ownerState.size === 'small' && {
-    padding: 7,
-    fontSize: theme.typography.pxToRem(13)
-  }, ownerState.size === 'large' && {
-    padding: 15,
-    fontSize: theme.typography.pxToRem(15)
-  });
-});
+  })), {
+    props: {
+      fullWidth: true
+    },
+    style: {
+      width: '100%'
+    }
+  }, {
+    props: {
+      size: 'small'
+    },
+    style: {
+      padding: 7,
+      fontSize: theme.typography.pxToRem(13)
+    }
+  }, {
+    props: {
+      size: 'large'
+    },
+    style: {
+      padding: 15,
+      fontSize: theme.typography.pxToRem(15)
+    }
+  }]
+}));
 const ToggleButton = /*#__PURE__*/React.forwardRef(function ToggleButton(inProps, ref) {
   // props priority: `inProps` > `contextProps` > `themeDefaultProps`
   const _React$useContext = React.useContext(_ToggleButtonGroupContext.default),
@@ -111,7 +140,7 @@ const ToggleButton = /*#__PURE__*/React.forwardRef(function ToggleButton(inProps
   const resolvedProps = (0, _resolveProps.default)((0, _extends2.default)({}, contextProps, {
     selected: (0, _isValueSelected.default)(inProps.value, contextValue)
   }), inProps);
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: resolvedProps,
     name: 'MuiToggleButton'
   });

package/node/ToggleButtonGroup/ToggleButtonGroup.js

@@ -6,16 +6,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _reactIs = require("react-is");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _getValidReactChildren = _interopRequireDefault(require("@mui/utils/getValidReactChildren"));
-var _styled = _interopRequireDefault(require("../styles/styled"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
+var _zeroStyled = require("../zero-styled");
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _toggleButtonGroupClasses = _interopRequireWildcard(require("./toggleButtonGroupClasses"));
 var _ToggleButtonGroupContext = _interopRequireDefault(require("./ToggleButtonGroupContext"));
@@ -25,6 +24,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["children", "className", "color", "disabled", "exclusive", "fullWidth", "onChange", "orientation", "size", "value"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiToggleButtonGroup');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -33,7 +33,7 @@ const useUtilityClasses = ownerState => {
     disabled
   } = ownerState;
   const slots = {
-    root: ['root', orientation === 'vertical' && 'vertical', fullWidth && 'fullWidth'],
+    root: ['root', orientation, fullWidth && 'fullWidth'],
     grouped: ['grouped', `grouped${(0, _capitalize.default)(orientation)}`, disabled && 'disabled'],
     firstButton: ['firstButton'],
     lastButton: ['lastButton'],
@@ -41,7 +41,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _toggleButtonGroupClasses.getToggleButtonGroupUtilityClass, classes);
 };
-const ToggleButtonGroupRoot = (0, _styled.default)('div', {
+const ToggleButtonGroupRoot = (0, _zeroStyled.styled)('div', {
   name: 'MuiToggleButtonGroup',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -61,60 +61,72 @@ const ToggleButtonGroupRoot = (0, _styled.default)('div', {
     }, styles.root, ownerState.orientation === 'vertical' && styles.vertical, ownerState.fullWidth && styles.fullWidth];
   }
 })(({
-  ownerState,
   theme
-}) => (0, _extends2.default)({
+}) => ({
   display: 'inline-flex',
-  borderRadius: (theme.vars || theme).shape.borderRadius
-}, ownerState.orientation === 'vertical' && {
-  flexDirection: 'column'
-}, ownerState.fullWidth && {
-  width: '100%'
-}, {
-  [`& .${_toggleButtonGroupClasses.default.grouped}`]: (0, _extends2.default)({}, ownerState.orientation === 'horizontal' ? {
-    [`&.${_toggleButtonGroupClasses.default.selected} + .${_toggleButtonGroupClasses.default.grouped}.${_toggleButtonGroupClasses.default.selected}`]: {
-      borderLeft: 0,
-      marginLeft: 0
+  borderRadius: (theme.vars || theme).shape.borderRadius,
+  variants: [{
+    props: {
+      orientation: 'vertical'
+    },
+    style: {
+      flexDirection: 'column',
+      [`& .${_toggleButtonGroupClasses.default.grouped}`]: {
+        [`&.${_toggleButtonGroupClasses.default.selected} + .${_toggleButtonGroupClasses.default.grouped}.${_toggleButtonGroupClasses.default.selected}`]: {
+          borderTop: 0,
+          marginTop: 0
+        }
+      },
+      [`& .${_toggleButtonGroupClasses.default.firstButton},& .${_toggleButtonGroupClasses.default.middleButton}`]: {
+        borderBottomLeftRadius: 0,
+        borderBottomRightRadius: 0
+      },
+      [`& .${_toggleButtonGroupClasses.default.lastButton},& .${_toggleButtonGroupClasses.default.middleButton}`]: {
+        marginTop: -1,
+        borderTop: '1px solid transparent',
+        borderTopLeftRadius: 0,
+        borderTopRightRadius: 0
+      },
+      [`& .${_toggleButtonGroupClasses.default.lastButton}.${_toggleButtonClasses.default.disabled},& .${_toggleButtonGroupClasses.default.middleButton}.${_toggleButtonClasses.default.disabled}`]: {
+        borderTop: '1px solid transparent'
+      }
     }
-  } : {
-    [`&.${_toggleButtonGroupClasses.default.selected} + .${_toggleButtonGroupClasses.default.grouped}.${_toggleButtonGroupClasses.default.selected}`]: {
-      borderTop: 0,
-      marginTop: 0
+  }, {
+    props: {
+      fullWidth: true
+    },
+    style: {
+      width: '100%'
     }
-  })
-}, ownerState.orientation === 'horizontal' ? {
-  [`& .${_toggleButtonGroupClasses.default.firstButton},& .${_toggleButtonGroupClasses.default.middleButton}`]: {
-    borderTopRightRadius: 0,
-    borderBottomRightRadius: 0
-  },
-  [`& .${_toggleButtonGroupClasses.default.lastButton},& .${_toggleButtonGroupClasses.default.middleButton}`]: {
-    marginLeft: -1,
-    borderLeft: '1px solid transparent',
-    borderTopLeftRadius: 0,
-    borderBottomLeftRadius: 0
-  }
-} : {
-  [`& .${_toggleButtonGroupClasses.default.firstButton},& .${_toggleButtonGroupClasses.default.middleButton}`]: {
-    borderBottomLeftRadius: 0,
-    borderBottomRightRadius: 0
-  },
-  [`& .${_toggleButtonGroupClasses.default.lastButton},& .${_toggleButtonGroupClasses.default.middleButton}`]: {
-    marginTop: -1,
-    borderTop: '1px solid transparent',
-    borderTopLeftRadius: 0,
-    borderTopRightRadius: 0
-  }
-}, ownerState.orientation === 'horizontal' ? {
-  [`& .${_toggleButtonGroupClasses.default.lastButton}.${_toggleButtonClasses.default.disabled},& .${_toggleButtonGroupClasses.default.middleButton}.${_toggleButtonClasses.default.disabled}`]: {
-    borderLeft: '1px solid transparent'
-  }
-} : {
-  [`& .${_toggleButtonGroupClasses.default.lastButton}.${_toggleButtonClasses.default.disabled},& .${_toggleButtonGroupClasses.default.middleButton}.${_toggleButtonClasses.default.disabled}`]: {
-    borderTop: '1px solid transparent'
-  }
+  }, {
+    props: {
+      orientation: 'horizontal'
+    },
+    style: {
+      [`& .${_toggleButtonGroupClasses.default.grouped}`]: {
+        [`&.${_toggleButtonGroupClasses.default.selected} + .${_toggleButtonGroupClasses.default.grouped}.${_toggleButtonGroupClasses.default.selected}`]: {
+          borderLeft: 0,
+          marginLeft: 0
+        }
+      },
+      [`& .${_toggleButtonGroupClasses.default.firstButton},& .${_toggleButtonGroupClasses.default.middleButton}`]: {
+        borderTopRightRadius: 0,
+        borderBottomRightRadius: 0
+      },
+      [`& .${_toggleButtonGroupClasses.default.lastButton},& .${_toggleButtonGroupClasses.default.middleButton}`]: {
+        marginLeft: -1,
+        borderLeft: '1px solid transparent',
+        borderTopLeftRadius: 0,
+        borderBottomLeftRadius: 0
+      },
+      [`& .${_toggleButtonGroupClasses.default.lastButton}.${_toggleButtonClasses.default.disabled},& .${_toggleButtonGroupClasses.default.middleButton}.${_toggleButtonClasses.default.disabled}`]: {
+        borderLeft: '1px solid transparent'
+      }
+    }
+  }]
 }));
 const ToggleButtonGroup = /*#__PURE__*/React.forwardRef(function ToggleButtonGroup(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiToggleButtonGroup'
   });

package/node/ToggleButtonGroup/toggleButtonGroupClasses.js

@@ -11,5 +11,5 @@ var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateU
 function getToggleButtonGroupUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiToggleButtonGroup', slot);
 }
-const toggleButtonGroupClasses = (0, _generateUtilityClasses.default)('MuiToggleButtonGroup', ['root', 'selected', 'vertical', 'disabled', 'grouped', 'groupedHorizontal', 'groupedVertical', 'fullWidth', 'firstButton', 'lastButton', 'middleButton']);
+const toggleButtonGroupClasses = (0, _generateUtilityClasses.default)('MuiToggleButtonGroup', ['root', 'selected', 'horizontal', 'vertical', 'disabled', 'grouped', 'groupedHorizontal', 'groupedVertical', 'fullWidth', 'firstButton', 'lastButton', 'middleButton']);
 var _default = exports.default = toggleButtonGroupClasses;