@mui/material 6.0.0-alpha.5 → 6.0.0-alpha.7

package/node/Tooltip/Tooltip.js

@@ -7,8 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 exports.testReset = testReset;
-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 _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
@@ -18,9 +18,8 @@ var _utils = require("@mui/base/utils");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _colorManipulator = require("@mui/system/colorManipulator");
 var _RtlProvider = require("@mui/system/RtlProvider");
-var _styled = _interopRequireDefault(require("../styles/styled"));
+var _zeroStyled = require("../zero-styled");
 var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _Grow = _interopRequireDefault(require("../Grow"));
 var _Popper = _interopRequireDefault(require("../Popper"));
@@ -34,6 +33,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["arrow", "children", "classes", "components", "componentsProps", "describeChild", "disableFocusListener", "disableHoverListener", "disableInteractive", "disableTouchListener", "enterDelay", "enterNextDelay", "enterTouchDelay", "followCursor", "id", "leaveDelay", "leaveTouchDelay", "onClose", "onOpen", "open", "placement", "PopperComponent", "PopperProps", "slotProps", "slots", "title", "TransitionComponent", "TransitionProps"];
 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)('MuiTooltip');
 function round(value) {
   return Math.round(value * 1e5) / 1e5;
 }
@@ -52,7 +52,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _tooltipClasses.getTooltipUtilityClass, classes);
 };
-const TooltipPopper = (0, _styled.default)(_Popper.default, {
+const TooltipPopper = (0, _zeroStyled.styled)(_Popper.default, {
   name: 'MuiTooltip',
   slot: 'Popper',
   overridesResolver: (props, styles) => {
@@ -62,59 +62,101 @@ const TooltipPopper = (0, _styled.default)(_Popper.default, {
     return [styles.popper, !ownerState.disableInteractive && styles.popperInteractive, ownerState.arrow && styles.popperArrow, !ownerState.open && styles.popperClose];
   }
 })(({
-  theme,
-  ownerState,
-  open
-}) => (0, _extends2.default)({
+  theme
+}) => ({
   zIndex: (theme.vars || theme).zIndex.tooltip,
-  pointerEvents: 'none'
-}, !ownerState.disableInteractive && {
-  pointerEvents: 'auto'
-}, !open && {
-  pointerEvents: 'none'
-}, ownerState.arrow && {
-  [`&[data-popper-placement*="bottom"] .${_tooltipClasses.default.arrow}`]: {
-    top: 0,
-    marginTop: '-0.71em',
-    '&::before': {
-      transformOrigin: '0 100%'
+  pointerEvents: 'none',
+  variants: [{
+    props: ({
+      ownerState
+    }) => !ownerState.disableInteractive,
+    style: {
+      pointerEvents: 'auto'
     }
-  },
-  [`&[data-popper-placement*="top"] .${_tooltipClasses.default.arrow}`]: {
-    bottom: 0,
-    marginBottom: '-0.71em',
-    '&::before': {
-      transformOrigin: '100% 0'
+  }, {
+    props: ({
+      open
+    }) => !open,
+    style: {
+      pointerEvents: 'none'
     }
-  },
-  [`&[data-popper-placement*="right"] .${_tooltipClasses.default.arrow}`]: (0, _extends2.default)({}, !ownerState.isRtl ? {
-    left: 0,
-    marginLeft: '-0.71em'
-  } : {
-    right: 0,
-    marginRight: '-0.71em'
   }, {
-    height: '1em',
-    width: '0.71em',
-    '&::before': {
-      transformOrigin: '100% 100%'
+    props: ({
+      ownerState
+    }) => ownerState.arrow,
+    style: {
+      [`&[data-popper-placement*="bottom"] .${_tooltipClasses.default.arrow}`]: {
+        top: 0,
+        marginTop: '-0.71em',
+        '&::before': {
+          transformOrigin: '0 100%'
+        }
+      },
+      [`&[data-popper-placement*="top"] .${_tooltipClasses.default.arrow}`]: {
+        bottom: 0,
+        marginBottom: '-0.71em',
+        '&::before': {
+          transformOrigin: '100% 0'
+        }
+      },
+      [`&[data-popper-placement*="right"] .${_tooltipClasses.default.arrow}`]: {
+        height: '1em',
+        width: '0.71em',
+        '&::before': {
+          transformOrigin: '100% 100%'
+        }
+      },
+      [`&[data-popper-placement*="left"] .${_tooltipClasses.default.arrow}`]: {
+        height: '1em',
+        width: '0.71em',
+        '&::before': {
+          transformOrigin: '0 0'
+        }
+      }
     }
-  }),
-  [`&[data-popper-placement*="left"] .${_tooltipClasses.default.arrow}`]: (0, _extends2.default)({}, !ownerState.isRtl ? {
-    right: 0,
-    marginRight: '-0.71em'
-  } : {
-    left: 0,
-    marginLeft: '-0.71em'
   }, {
-    height: '1em',
-    width: '0.71em',
-    '&::before': {
-      transformOrigin: '0 0'
+    props: ({
+      ownerState
+    }) => ownerState.arrow && !ownerState.isRtl,
+    style: {
+      [`&[data-popper-placement*="right"] .${_tooltipClasses.default.arrow}`]: {
+        left: 0,
+        marginLeft: '-0.71em'
+      }
     }
-  })
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.arrow && !!ownerState.isRtl,
+    style: {
+      [`&[data-popper-placement*="right"] .${_tooltipClasses.default.arrow}`]: {
+        right: 0,
+        marginRight: '-0.71em'
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.arrow && !ownerState.isRtl,
+    style: {
+      [`&[data-popper-placement*="left"] .${_tooltipClasses.default.arrow}`]: {
+        right: 0,
+        marginRight: '-0.71em'
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.arrow && !!ownerState.isRtl,
+    style: {
+      [`&[data-popper-placement*="left"] .${_tooltipClasses.default.arrow}`]: {
+        left: 0,
+        marginLeft: '-0.71em'
+      }
+    }
+  }]
 }));
-const TooltipTooltip = (0, _styled.default)('div', {
+const TooltipTooltip = (0, _zeroStyled.styled)('div', {
   name: 'MuiTooltip',
   slot: 'Tooltip',
   overridesResolver: (props, styles) => {
@@ -124,9 +166,8 @@ const TooltipTooltip = (0, _styled.default)('div', {
     return [styles.tooltip, ownerState.touch && styles.touch, ownerState.arrow && styles.tooltipArrow, styles[`tooltipPlacement${(0, _capitalize.default)(ownerState.placement.split('-')[0])}`]];
   }
 })(({
-  theme,
-  ownerState
-}) => (0, _extends2.default)({
+  theme
+}) => ({
   backgroundColor: theme.vars ? theme.vars.palette.Tooltip.bg : (0, _colorManipulator.alpha)(theme.palette.grey[700], 0.92),
   borderRadius: (theme.vars || theme).shape.borderRadius,
   color: (theme.vars || theme).palette.common.white,
@@ -136,52 +177,108 @@ const TooltipTooltip = (0, _styled.default)('div', {
   maxWidth: 300,
   margin: 2,
   wordWrap: 'break-word',
-  fontWeight: theme.typography.fontWeightMedium
-}, ownerState.arrow && {
-  position: 'relative',
-  margin: 0
-}, ownerState.touch && {
-  padding: '8px 16px',
-  fontSize: theme.typography.pxToRem(14),
-  lineHeight: `${round(16 / 14)}em`,
-  fontWeight: theme.typography.fontWeightRegular
-}, {
-  [`.${_tooltipClasses.default.popper}[data-popper-placement*="left"] &`]: (0, _extends2.default)({
+  fontWeight: theme.typography.fontWeightMedium,
+  [`.${_tooltipClasses.default.popper}[data-popper-placement*="left"] &`]: {
     transformOrigin: 'right center'
-  }, !ownerState.isRtl ? (0, _extends2.default)({
-    marginRight: '14px'
-  }, ownerState.touch && {
-    marginRight: '24px'
-  }) : (0, _extends2.default)({
-    marginLeft: '14px'
-  }, ownerState.touch && {
-    marginLeft: '24px'
-  })),
-  [`.${_tooltipClasses.default.popper}[data-popper-placement*="right"] &`]: (0, _extends2.default)({
+  },
+  [`.${_tooltipClasses.default.popper}[data-popper-placement*="right"] &`]: {
     transformOrigin: 'left center'
-  }, !ownerState.isRtl ? (0, _extends2.default)({
-    marginLeft: '14px'
-  }, ownerState.touch && {
-    marginLeft: '24px'
-  }) : (0, _extends2.default)({
-    marginRight: '14px'
-  }, ownerState.touch && {
-    marginRight: '24px'
-  })),
-  [`.${_tooltipClasses.default.popper}[data-popper-placement*="top"] &`]: (0, _extends2.default)({
+  },
+  [`.${_tooltipClasses.default.popper}[data-popper-placement*="top"] &`]: {
     transformOrigin: 'center bottom',
     marginBottom: '14px'
-  }, ownerState.touch && {
-    marginBottom: '24px'
-  }),
-  [`.${_tooltipClasses.default.popper}[data-popper-placement*="bottom"] &`]: (0, _extends2.default)({
+  },
+  [`.${_tooltipClasses.default.popper}[data-popper-placement*="bottom"] &`]: {
     transformOrigin: 'center top',
     marginTop: '14px'
-  }, ownerState.touch && {
-    marginTop: '24px'
-  })
+  },
+  variants: [{
+    props: ({
+      ownerState
+    }) => ownerState.arrow,
+    style: {
+      position: 'relative',
+      margin: 0
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.touch,
+    style: {
+      padding: '8px 16px',
+      fontSize: theme.typography.pxToRem(14),
+      lineHeight: `${round(16 / 14)}em`,
+      fontWeight: theme.typography.fontWeightRegular
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !ownerState.isRtl,
+    style: {
+      [`.${_tooltipClasses.default.popper}[data-popper-placement*="left"] &`]: {
+        marginRight: '14px'
+      },
+      [`.${_tooltipClasses.default.popper}[data-popper-placement*="right"] &`]: {
+        marginLeft: '14px'
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !ownerState.isRtl && ownerState.touch,
+    style: {
+      [`.${_tooltipClasses.default.popper}[data-popper-placement*="left"] &`]: {
+        marginRight: '24px'
+      },
+      [`.${_tooltipClasses.default.popper}[data-popper-placement*="right"] &`]: {
+        marginLeft: '24px'
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !!ownerState.isRtl,
+    style: {
+      [`.${_tooltipClasses.default.popper}[data-popper-placement*="left"] &`]: {
+        marginLeft: '14px'
+      },
+      [`.${_tooltipClasses.default.popper}[data-popper-placement*="right"] &`]: {
+        marginRight: '14px'
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !!ownerState.isRtl && ownerState.touch,
+    style: {
+      [`.${_tooltipClasses.default.popper}[data-popper-placement*="left"] &`]: {
+        marginLeft: '24px'
+      },
+      [`.${_tooltipClasses.default.popper}[data-popper-placement*="right"] &`]: {
+        marginRight: '24px'
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.touch,
+    style: {
+      [`.${_tooltipClasses.default.popper}[data-popper-placement*="top"] &`]: {
+        marginBottom: '24px'
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.touch,
+    style: {
+      [`.${_tooltipClasses.default.popper}[data-popper-placement*="bottom"] &`]: {
+        marginTop: '24px'
+      }
+    }
+  }]
 }));
-const TooltipArrow = (0, _styled.default)('span', {
+const TooltipArrow = (0, _zeroStyled.styled)('span', {
   name: 'MuiTooltip',
   slot: 'Arrow',
   overridesResolver: (props, styles) => styles.arrow
@@ -226,7 +323,7 @@ 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 = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiTooltip'
   });

package/node/Typography/Typography.js

@@ -6,21 +6,22 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.TypographyRoot = 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 _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _styleFunctionSx = require("@mui/system/styleFunctionSx");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _styled = _interopRequireDefault(require("../styles/styled"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
+var _zeroStyled = require("../zero-styled");
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _typographyClasses = require("./typographyClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["align", "className", "component", "gutterBottom", "noWrap", "paragraph", "variant", "variantMapping"];
+const _excluded = ["color"],
+  _excluded2 = ["align", "className", "component", "gutterBottom", "noWrap", "paragraph", "variant", "variantMapping"];
 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)('MuiTypography');
 const useUtilityClasses = ownerState => {
   const {
     align,
@@ -35,7 +36,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _typographyClasses.getTypographyUtilityClass, classes);
 };
-const TypographyRoot = exports.TypographyRoot = (0, _styled.default)('span', {
+const TypographyRoot = exports.TypographyRoot = (0, _zeroStyled.styled)('span', {
   name: 'MuiTypography',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -45,25 +46,62 @@ const TypographyRoot = exports.TypographyRoot = (0, _styled.default)('span', {
     return [styles.root, ownerState.variant && styles[ownerState.variant], ownerState.align !== 'inherit' && styles[`align${(0, _capitalize.default)(ownerState.align)}`], ownerState.noWrap && styles.noWrap, ownerState.gutterBottom && styles.gutterBottom, ownerState.paragraph && styles.paragraph];
   }
 })(({
-  theme,
-  ownerState
-}) => (0, _extends2.default)({
-  margin: 0
-}, ownerState.variant === 'inherit' && {
-  // Some elements, like <button> on Chrome have default font that doesn't inherit, reset this.
-  font: 'inherit',
-  lineHeight: 'inherit',
-  letterSpacing: 'inherit'
-}, ownerState.variant !== 'inherit' && theme.typography[ownerState.variant], ownerState.align !== 'inherit' && {
-  textAlign: ownerState.align
-}, ownerState.noWrap && {
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap'
-}, ownerState.gutterBottom && {
-  marginBottom: '0.35em'
-}, ownerState.paragraph && {
-  marginBottom: 16
+  theme
+}) => ({
+  margin: 0,
+  variants: [{
+    props: {
+      variant: 'inherit'
+    },
+    style: {
+      // Some elements, like <button> on Chrome have default font that doesn't inherit, reset this.
+      font: 'inherit',
+      lineHeight: 'inherit',
+      letterSpacing: 'inherit'
+    }
+  }, ...Object.entries(theme.typography).filter(([variant, value]) => variant !== 'inherit' && value && typeof value === 'object').map(([variant, value]) => ({
+    props: {
+      variant
+    },
+    style: value
+  })), ...Object.entries(theme.palette).filter(([, value]) => value.main).map(([color]) => ({
+    props: {
+      color
+    },
+    style: {
+      color: (theme.vars || theme).palette[color].main
+    }
+  })), {
+    props: ({
+      ownerState
+    }) => ownerState.align !== 'inherit',
+    style: {
+      textAlign: 'var(--Typography-textAlign)'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.noWrap,
+    style: {
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.gutterBottom,
+    style: {
+      marginBottom: '0.35em'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.paragraph,
+    style: {
+      marginBottom: 16
+    }
+  }]
 }));
 const defaultVariantMapping = {
   h1: 'h1',
@@ -79,25 +117,30 @@ const defaultVariantMapping = {
   inherit: 'p'
 };
 
-// TODO v6: deprecate these color values in v5.x and remove the transformation in v6
+// TODO v7: remove this transformation and `extendSxProp`
 const colorTransformations = {
-  primary: 'primary.main',
   textPrimary: 'text.primary',
-  secondary: 'secondary.main',
   textSecondary: 'text.secondary',
-  error: 'error.main'
-};
-const transformDeprecatedColors = color => {
-  return colorTransformations[color] || color;
+  // For the main palette, the color will be applied by the `...Object.entries(theme.palette)` clause in the TypographyRoot's styles
+  primary: null,
+  secondary: null,
+  error: null,
+  info: null,
+  success: null,
+  warning: null
 };
 const Typography = /*#__PURE__*/React.forwardRef(function Typography(inProps, ref) {
-  const themeProps = (0, _useThemeProps.default)({
-    props: inProps,
-    name: 'MuiTypography'
-  });
-  const color = transformDeprecatedColors(themeProps.color);
-  const props = (0, _styleFunctionSx.extendSxProp)((0, _extends2.default)({}, themeProps, {
-    color
+  const _useThemeProps = useThemeProps({
+      props: inProps,
+      name: 'MuiTypography'
+    }),
+    {
+      color
+    } = _useThemeProps,
+    themeProps = (0, _objectWithoutPropertiesLoose2.default)(_useThemeProps, _excluded);
+  const textColor = colorTransformations[color];
+  const props = (0, _styleFunctionSx.extendSxProp)((0, _extends2.default)({}, themeProps, textColor !== null && {
+    color: textColor || color
   }));
   const {
       align = 'inherit',
@@ -109,7 +152,7 @@ const Typography = /*#__PURE__*/React.forwardRef(function Typography(inProps, re
       variant = 'body1',
       variantMapping = defaultVariantMapping
     } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded2);
   const ownerState = (0, _extends2.default)({}, props, {
     align,
     color,
@@ -128,7 +171,10 @@ const Typography = /*#__PURE__*/React.forwardRef(function Typography(inProps, re
     ref: ref,
     className: (0, _clsx.default)(classes.root, className)
   }, other, {
-    ownerState: ownerState
+    ownerState: ownerState,
+    style: (0, _extends2.default)({}, align !== 'inherit' && {
+      '--Typography-textAlign': align
+    }, other.style)
   }));
 });
 process.env.NODE_ENV !== "production" ? Typography.propTypes /* remove-proptypes */ = {
@@ -176,6 +222,10 @@ process.env.NODE_ENV !== "production" ? Typography.propTypes /* remove-proptypes
    * @default false
    */
   paragraph: _propTypes.default.bool,
+  /**
+   * @ignore
+   */
+  style: _propTypes.default.object,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/node/index.js

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

package/node/internal/SwitchBase.js

@@ -6,15 +6,16 @@ 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 _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _refType = _interopRequireDefault(require("@mui/utils/refType"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
-var _styled = _interopRequireWildcard(require("../styles/styled"));
+var _rootShouldForwardProp = _interopRequireDefault(require("../styles/rootShouldForwardProp"));
+var _zeroStyled = require("../zero-styled");
 var _useControlled = _interopRequireDefault(require("../utils/useControlled"));
 var _useFormControl = _interopRequireDefault(require("../FormControl/useFormControl"));
 var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
@@ -36,18 +37,45 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _switchBaseClasses.getSwitchBaseUtilityClass, classes);
 };
-const SwitchBaseRoot = (0, _styled.default)(_ButtonBase.default)(({
-  ownerState
-}) => (0, _extends2.default)({
+const SwitchBaseRoot = (0, _zeroStyled.styled)(_ButtonBase.default)({
   padding: 9,
-  borderRadius: '50%'
-}, ownerState.edge === 'start' && {
-  marginLeft: ownerState.size === 'small' ? -3 : -12
-}, ownerState.edge === 'end' && {
-  marginRight: ownerState.size === 'small' ? -3 : -12
-}));
-const SwitchBaseInput = (0, _styled.default)('input', {
-  shouldForwardProp: _styled.rootShouldForwardProp
+  borderRadius: '50%',
+  variants: [{
+    props: {
+      edge: 'start',
+      size: 'small'
+    },
+    style: {
+      marginLeft: -3
+    }
+  }, {
+    props: ({
+      edge,
+      ownerState
+    }) => edge === 'start' && ownerState.size !== 'small',
+    style: {
+      marginLeft: -12
+    }
+  }, {
+    props: {
+      edge: 'end',
+      size: 'small'
+    },
+    style: {
+      marginRight: -3
+    }
+  }, {
+    props: ({
+      edge,
+      ownerState
+    }) => edge === 'end' && ownerState.size !== 'small',
+    style: {
+      marginRight: -12
+    }
+  }]
+});
+const SwitchBaseInput = (0, _zeroStyled.styled)('input', {
+  shouldForwardProp: _rootShouldForwardProp.default
 })({
   cursor: 'inherit',
   position: 'absolute',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "6.0.0-alpha.5",
+  "version": "6.0.0-alpha.7",
   "private": false,
   "author": "MUI Team",
   "description": "Material UI is an open-source React component library that implements Google's Material Design. It's comprehensive and can be used in production out of the box.",
@@ -27,18 +27,18 @@
     "url": "https://opencollective.com/mui-org"
   },
   "dependencies": {
-    "@babel/runtime": "^7.24.4",
+    "@babel/runtime": "^7.24.5",
     "@types/react-transition-group": "^4.4.10",
     "clsx": "^2.1.1",
     "csstype": "^3.1.3",
     "prop-types": "^15.8.1",
     "react-is": "^18.2.0",
     "react-transition-group": "^4.4.5",
-    "@mui/core-downloads-tracker": "^6.0.0-alpha.5",
     "@mui/types": "^7.2.14",
-    "@mui/utils": "^6.0.0-alpha.5",
-    "@mui/system": "^6.0.0-alpha.5",
-    "@mui/base": "5.0.0-beta.43"
+    "@mui/system": "^6.0.0-alpha.6",
+    "@mui/base": "5.0.0-beta.45",
+    "@mui/core-downloads-tracker": "^6.0.0-alpha.7",
+    "@mui/utils": "^6.0.0-alpha.6"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",