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

package/TextField/TextField.js

@@ -9,8 +9,7 @@ import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import useId from '@mui/utils/useId';
 import refType from '@mui/utils/refType';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import Input from '../Input';
 import FilledInput from '../FilledInput';
 import OutlinedInput from '../OutlinedInput';
@@ -20,6 +19,7 @@ import FormHelperText from '../FormHelperText';
 import Select from '../Select';
 import { getTextFieldUtilityClass } from './textFieldClasses';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiTextField');
 const variantComponent = {
   standard: Input,
   filled: FilledInput,

package/ToggleButtonGroup/toggleButtonGroupClasses.d.ts

@@ -10,11 +10,11 @@ export interface ToggleButtonGroupClasses {
     /** Styles applied to the children. */
     grouped: string;
     /** Styles applied to the children if `orientation="horizontal"`.
-     *  @deprecated Combine the [.MuiToggleButtonGroup-horizontal](/material-ui/api/toggle-button-group/#toggle-button-group-classes-horizontal) and [.MuiToggleButtonGroup-grouped](/material-ui/api/toggle-button-group/#toggle-button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     *  @deprecated Combine the [.MuiToggleButtonGroup-horizontal](/material-ui/api/toggle-button-group/#toggle-button-group-classes-horizontal) and [.MuiToggleButtonGroup-grouped](/material-ui/api/toggle-button-group/#toggle-button-group-classes-grouped) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     groupedHorizontal: string;
     /** Styles applied to the children if `orientation="vertical"`.
-     * @deprecated Combine the [.MuiToggleButtonGroup-vertical](/material-ui/api/toggle-button-group/#toggle-button-group-classes-vertical) and [.MuiToggleButtonGroup-grouped](/material-ui/api/toggle-button-group/#toggle-button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     * @deprecated Combine the [.MuiToggleButtonGroup-vertical](/material-ui/api/toggle-button-group/#toggle-button-group-classes-vertical) and [.MuiToggleButtonGroup-grouped](/material-ui/api/toggle-button-group/#toggle-button-group-classes-grouped) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     groupedVertical: string;
     /** Styles applied to the root element if `fullWidth={true}`. */

package/Toolbar/Toolbar.js

@@ -7,10 +7,10 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
 import { getToolbarUtilityClass } from './toolbarClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiToolbar');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -56,11 +56,7 @@ const ToolbarRoot = styled('div', {
     style: {
       minHeight: 48
     }
-  }]
-}), ({
-  theme
-}) => ({
-  variants: [{
+  }, {
     props: {
       variant: 'regular'
     },

package/Tooltip/Tooltip.js

@@ -1,7 +1,7 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 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"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -12,9 +12,8 @@ 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 { styled, createUseThemeProps } from '../zero-styled';
 import useTheme from '../styles/useTheme';
-import useThemeProps from '../styles/useThemeProps';
 import capitalize from '../utils/capitalize';
 import Grow from '../Grow';
 import Popper from '../Popper';
@@ -25,6 +24,7 @@ import useIsFocusVisible from '../utils/useIsFocusVisible';
 import useControlled from '../utils/useControlled';
 import tooltipClasses, { getTooltipUtilityClass } from './tooltipClasses';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiTooltip');
 function round(value) {
   return Math.round(value * 1e5) / 1e5;
 }
@@ -53,57 +53,99 @@ const TooltipPopper = styled(Popper, {
     return [styles.popper, !ownerState.disableInteractive && styles.popperInteractive, ownerState.arrow && styles.popperArrow, !ownerState.open && styles.popperClose];
   }
 })(({
-  theme,
-  ownerState,
-  open
-}) => _extends({
+  theme
+}) => ({
   zIndex: (theme.vars || theme).zIndex.tooltip,
-  pointerEvents: 'none'
-}, !ownerState.disableInteractive && {
-  pointerEvents: 'auto'
-}, !open && {
-  pointerEvents: 'none'
-}, ownerState.arrow && {
-  [`&[data-popper-placement*="bottom"] .${tooltipClasses.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.arrow}`]: {
-    bottom: 0,
-    marginBottom: '-0.71em',
-    '&::before': {
-      transformOrigin: '100% 0'
+  }, {
+    props: ({
+      open
+    }) => !open,
+    style: {
+      pointerEvents: 'none'
     }
-  },
-  [`&[data-popper-placement*="right"] .${tooltipClasses.arrow}`]: _extends({}, !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.arrow}`]: {
+        top: 0,
+        marginTop: '-0.71em',
+        '&::before': {
+          transformOrigin: '0 100%'
+        }
+      },
+      [`&[data-popper-placement*="top"] .${tooltipClasses.arrow}`]: {
+        bottom: 0,
+        marginBottom: '-0.71em',
+        '&::before': {
+          transformOrigin: '100% 0'
+        }
+      },
+      [`&[data-popper-placement*="right"] .${tooltipClasses.arrow}`]: {
+        height: '1em',
+        width: '0.71em',
+        '&::before': {
+          transformOrigin: '100% 100%'
+        }
+      },
+      [`&[data-popper-placement*="left"] .${tooltipClasses.arrow}`]: {
+        height: '1em',
+        width: '0.71em',
+        '&::before': {
+          transformOrigin: '0 0'
+        }
+      }
     }
-  }),
-  [`&[data-popper-placement*="left"] .${tooltipClasses.arrow}`]: _extends({}, !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.arrow}`]: {
+        left: 0,
+        marginLeft: '-0.71em'
+      }
     }
-  })
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.arrow && !!ownerState.isRtl,
+    style: {
+      [`&[data-popper-placement*="right"] .${tooltipClasses.arrow}`]: {
+        right: 0,
+        marginRight: '-0.71em'
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.arrow && !ownerState.isRtl,
+    style: {
+      [`&[data-popper-placement*="left"] .${tooltipClasses.arrow}`]: {
+        right: 0,
+        marginRight: '-0.71em'
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.arrow && !!ownerState.isRtl,
+    style: {
+      [`&[data-popper-placement*="left"] .${tooltipClasses.arrow}`]: {
+        left: 0,
+        marginLeft: '-0.71em'
+      }
+    }
+  }]
 }));
 const TooltipTooltip = styled('div', {
   name: 'MuiTooltip',
@@ -115,9 +157,8 @@ const TooltipTooltip = styled('div', {
     return [styles.tooltip, ownerState.touch && styles.touch, ownerState.arrow && styles.tooltipArrow, styles[`tooltipPlacement${capitalize(ownerState.placement.split('-')[0])}`]];
   }
 })(({
-  theme,
-  ownerState
-}) => _extends({
+  theme
+}) => ({
   backgroundColor: theme.vars ? theme.vars.palette.Tooltip.bg : alpha(theme.palette.grey[700], 0.92),
   borderRadius: (theme.vars || theme).shape.borderRadius,
   color: (theme.vars || theme).palette.common.white,
@@ -127,50 +168,106 @@ const TooltipTooltip = styled('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.popper}[data-popper-placement*="left"] &`]: _extends({
+  fontWeight: theme.typography.fontWeightMedium,
+  [`.${tooltipClasses.popper}[data-popper-placement*="left"] &`]: {
     transformOrigin: 'right center'
-  }, !ownerState.isRtl ? _extends({
-    marginRight: '14px'
-  }, ownerState.touch && {
-    marginRight: '24px'
-  }) : _extends({
-    marginLeft: '14px'
-  }, ownerState.touch && {
-    marginLeft: '24px'
-  })),
-  [`.${tooltipClasses.popper}[data-popper-placement*="right"] &`]: _extends({
+  },
+  [`.${tooltipClasses.popper}[data-popper-placement*="right"] &`]: {
     transformOrigin: 'left center'
-  }, !ownerState.isRtl ? _extends({
-    marginLeft: '14px'
-  }, ownerState.touch && {
-    marginLeft: '24px'
-  }) : _extends({
-    marginRight: '14px'
-  }, ownerState.touch && {
-    marginRight: '24px'
-  })),
-  [`.${tooltipClasses.popper}[data-popper-placement*="top"] &`]: _extends({
+  },
+  [`.${tooltipClasses.popper}[data-popper-placement*="top"] &`]: {
     transformOrigin: 'center bottom',
     marginBottom: '14px'
-  }, ownerState.touch && {
-    marginBottom: '24px'
-  }),
-  [`.${tooltipClasses.popper}[data-popper-placement*="bottom"] &`]: _extends({
+  },
+  [`.${tooltipClasses.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.popper}[data-popper-placement*="left"] &`]: {
+        marginRight: '14px'
+      },
+      [`.${tooltipClasses.popper}[data-popper-placement*="right"] &`]: {
+        marginLeft: '14px'
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !ownerState.isRtl && ownerState.touch,
+    style: {
+      [`.${tooltipClasses.popper}[data-popper-placement*="left"] &`]: {
+        marginRight: '24px'
+      },
+      [`.${tooltipClasses.popper}[data-popper-placement*="right"] &`]: {
+        marginLeft: '24px'
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !!ownerState.isRtl,
+    style: {
+      [`.${tooltipClasses.popper}[data-popper-placement*="left"] &`]: {
+        marginLeft: '14px'
+      },
+      [`.${tooltipClasses.popper}[data-popper-placement*="right"] &`]: {
+        marginRight: '14px'
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !!ownerState.isRtl && ownerState.touch,
+    style: {
+      [`.${tooltipClasses.popper}[data-popper-placement*="left"] &`]: {
+        marginLeft: '24px'
+      },
+      [`.${tooltipClasses.popper}[data-popper-placement*="right"] &`]: {
+        marginRight: '24px'
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.touch,
+    style: {
+      [`.${tooltipClasses.popper}[data-popper-placement*="top"] &`]: {
+        marginBottom: '24px'
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.touch,
+    style: {
+      [`.${tooltipClasses.popper}[data-popper-placement*="bottom"] &`]: {
+        marginTop: '24px'
+      }
+    }
+  }]
 }));
 const TooltipArrow = styled('span', {
   name: 'MuiTooltip',

package/Typography/Typography.js

@@ -1,18 +1,19 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["align", "className", "component", "gutterBottom", "noWrap", "paragraph", "variant", "variantMapping"];
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["color"],
+  _excluded2 = ["align", "className", "component", "gutterBottom", "noWrap", "paragraph", "variant", "variantMapping"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { extendSxProp } from '@mui/system/styleFunctionSx';
 import composeClasses from '@mui/utils/composeClasses';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import capitalize from '../utils/capitalize';
 import { getTypographyUtilityClass } from './typographyClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiTypography');
 const useUtilityClasses = ownerState => {
   const {
     align,
@@ -37,25 +38,62 @@ export const TypographyRoot = styled('span', {
     return [styles.root, ownerState.variant && styles[ownerState.variant], ownerState.align !== 'inherit' && styles[`align${capitalize(ownerState.align)}`], ownerState.noWrap && styles.noWrap, ownerState.gutterBottom && styles.gutterBottom, ownerState.paragraph && styles.paragraph];
   }
 })(({
-  theme,
-  ownerState
-}) => _extends({
-  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',
@@ -71,25 +109,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 = useThemeProps({
-    props: inProps,
-    name: 'MuiTypography'
-  });
-  const color = transformDeprecatedColors(themeProps.color);
-  const props = extendSxProp(_extends({}, themeProps, {
-    color
+  const _useThemeProps = useThemeProps({
+      props: inProps,
+      name: 'MuiTypography'
+    }),
+    {
+      color
+    } = _useThemeProps,
+    themeProps = _objectWithoutPropertiesLoose(_useThemeProps, _excluded);
+  const textColor = colorTransformations[color];
+  const props = extendSxProp(_extends({}, themeProps, textColor !== null && {
+    color: textColor || color
   }));
   const {
       align = 'inherit',
@@ -101,7 +144,7 @@ const Typography = /*#__PURE__*/React.forwardRef(function Typography(inProps, re
       variant = 'body1',
       variantMapping = defaultVariantMapping
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    other = _objectWithoutPropertiesLoose(props, _excluded2);
   const ownerState = _extends({}, props, {
     align,
     color,
@@ -120,7 +163,10 @@ const Typography = /*#__PURE__*/React.forwardRef(function Typography(inProps, re
     ref: ref,
     className: clsx(classes.root, className)
   }, other, {
-    ownerState: ownerState
+    ownerState: ownerState,
+    style: _extends({}, align !== 'inherit' && {
+      '--Typography-textAlign': align
+    }, other.style)
   }));
 });
 process.env.NODE_ENV !== "production" ? Typography.propTypes /* remove-proptypes */ = {
@@ -168,6 +214,10 @@ process.env.NODE_ENV !== "production" ? Typography.propTypes /* remove-proptypes
    * @default false
    */
   paragraph: PropTypes.bool,
+  /**
+   * @ignore
+   */
+  style: PropTypes.object,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/index.js

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

package/internal/SwitchBase.js

@@ -1,7 +1,7 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["autoFocus", "checked", "checkedIcon", "className", "defaultChecked", "disabled", "disableFocusRipple", "edge", "icon", "id", "inputProps", "inputRef", "name", "onBlur", "onChange", "onFocus", "readOnly", "required", "tabIndex", "type", "value"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -9,7 +9,8 @@ import clsx from 'clsx';
 import refType from '@mui/utils/refType';
 import composeClasses from '@mui/utils/composeClasses';
 import capitalize from '../utils/capitalize';
-import styled, { rootShouldForwardProp } from '../styles/styled';
+import rootShouldForwardProp from '../styles/rootShouldForwardProp';
+import { styled } from '../zero-styled';
 import useControlled from '../utils/useControlled';
 import useFormControl from '../FormControl/useFormControl';
 import ButtonBase from '../ButtonBase';
@@ -28,16 +29,43 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getSwitchBaseUtilityClass, classes);
 };
-const SwitchBaseRoot = styled(ButtonBase)(({
-  ownerState
-}) => _extends({
+const SwitchBaseRoot = styled(ButtonBase)({
   padding: 9,
-  borderRadius: '50%'
-}, ownerState.edge === 'start' && {
-  marginLeft: ownerState.size === 'small' ? -3 : -12
-}, ownerState.edge === 'end' && {
-  marginRight: ownerState.size === 'small' ? -3 : -12
-}));
+  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 = styled('input', {
   shouldForwardProp: rootShouldForwardProp
 })({

package/modern/Accordion/Accordion.js

@@ -282,13 +282,13 @@ process.env.NODE_ENV !== "production" ? Accordion.propTypes /* remove-proptypes
   /**
    * The component used for the transition.
    * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
-   * @deprecated Use `slots.transition` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+   * @deprecated Use `slots.transition` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   TransitionComponent: PropTypes.elementType,
   /**
    * Props applied to the transition element.
    * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component.
-   * @deprecated Use `slotProps.transition` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+   * @deprecated Use `slotProps.transition` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   TransitionProps: PropTypes.object
 } : void 0;