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

package/PaginationItem/PaginationItem.js

@@ -2,7 +2,7 @@
 
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["className", "color", "component", "components", "disabled", "page", "selected", "shape", "size", "slots", "type", "variant"];
+const _excluded = ["className", "color", "component", "components", "disabled", "page", "selected", "shape", "size", "slots", "slotProps", "type", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -16,6 +16,7 @@ import FirstPageIcon from '../internal/svg-icons/FirstPage';
 import LastPageIcon from '../internal/svg-icons/LastPage';
 import NavigateBeforeIcon from '../internal/svg-icons/NavigateBefore';
 import NavigateNextIcon from '../internal/svg-icons/NavigateNext';
+import useSlot from '../utils/useSlot';
 import { styled, createUseThemeProps } from '../zero-styled';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useThemeProps = createUseThemeProps('MuiPaginationItem');
@@ -281,6 +282,7 @@ const PaginationItem = /*#__PURE__*/React.forwardRef(function PaginationItem(inP
       shape = 'circular',
       size = 'medium',
       slots = {},
+      slotProps = {},
       type = 'page',
       variant = 'text'
     } = props,
@@ -296,18 +298,53 @@ const PaginationItem = /*#__PURE__*/React.forwardRef(function PaginationItem(inP
   });
   const isRtl = useRtl();
   const classes = useUtilityClasses(ownerState);
-  const normalizedIcons = isRtl ? {
-    previous: slots.next || components.next || NavigateNextIcon,
-    next: slots.previous || components.previous || NavigateBeforeIcon,
-    last: slots.first || components.first || FirstPageIcon,
-    first: slots.last || components.last || LastPageIcon
-  } : {
-    previous: slots.previous || components.previous || NavigateBeforeIcon,
-    next: slots.next || components.next || NavigateNextIcon,
-    first: slots.first || components.first || FirstPageIcon,
-    last: slots.last || components.last || LastPageIcon
+  const externalForwardedProps = {
+    slots: {
+      previous: slots.previous ?? components.previous,
+      next: slots.next ?? components.next,
+      first: slots.first ?? components.first,
+      last: slots.last ?? components.last
+    },
+    slotProps
   };
-  const Icon = normalizedIcons[type];
+  const [PreviousSlot, previousSlotProps] = useSlot('previous', {
+    elementType: NavigateBeforeIcon,
+    externalForwardedProps,
+    ownerState
+  });
+  const [NextSlot, nextSlotProps] = useSlot('next', {
+    elementType: NavigateNextIcon,
+    externalForwardedProps,
+    ownerState
+  });
+  const [FirstSlot, firstSlotProps] = useSlot('first', {
+    elementType: FirstPageIcon,
+    externalForwardedProps,
+    ownerState
+  });
+  const [LastSlot, lastSlotProps] = useSlot('last', {
+    elementType: LastPageIcon,
+    externalForwardedProps,
+    ownerState
+  });
+  const rtlAwareType = isRtl ? {
+    previous: 'next',
+    next: 'previous',
+    first: 'last',
+    last: 'first'
+  }[type] : type;
+  const IconSlot = {
+    previous: PreviousSlot,
+    next: NextSlot,
+    first: FirstSlot,
+    last: LastSlot
+  }[rtlAwareType];
+  const iconSlotProps = {
+    previous: previousSlotProps,
+    next: nextSlotProps,
+    first: firstSlotProps,
+    last: lastSlotProps
+  }[rtlAwareType];
   return type === 'start-ellipsis' || type === 'end-ellipsis' ? /*#__PURE__*/_jsx(PaginationItemEllipsis, {
     ref: ref,
     ownerState: ownerState,
@@ -320,11 +357,10 @@ const PaginationItem = /*#__PURE__*/React.forwardRef(function PaginationItem(inP
     disabled: disabled,
     className: clsx(classes.root, className)
   }, other, {
-    children: [type === 'page' && page, Icon ? /*#__PURE__*/_jsx(PaginationItemPageIcon, {
-      as: Icon,
-      ownerState: ownerState,
-      className: classes.icon
-    }) : null]
+    children: [type === 'page' && page, IconSlot ? /*#__PURE__*/_jsx(PaginationItemPageIcon, _extends({}, iconSlotProps, {
+      className: classes.icon,
+      as: IconSlot
+    })) : null]
   }));
 });
 process.env.NODE_ENV !== "production" ? PaginationItem.propTypes /* remove-proptypes */ = {
@@ -363,6 +399,7 @@ process.env.NODE_ENV !== "production" ? PaginationItem.propTypes /* remove-propt
    * It's recommended to use the `slots` prop instead.
    *
    * @default {}
+   * @deprecated use the `slots` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   components: PropTypes.shape({
     first: PropTypes.elementType,
@@ -394,11 +431,18 @@ process.env.NODE_ENV !== "production" ? PaginationItem.propTypes /* remove-propt
    * @default 'medium'
    */
   size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['small', 'medium', 'large']), PropTypes.string]),
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    first: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    last: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    next: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    previous: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
   /**
    * The components used for each slot inside.
-   *
-   * This prop is an alias for the `components` prop, which will be deprecated in the future.
-   *
    * @default {}
    */
   slots: PropTypes.shape({

package/PaginationItem/paginationItemClasses.d.ts

@@ -10,21 +10,21 @@ export interface PaginationItemClasses {
     /** Styles applied to the root element if `variant="text"`. */
     text: string;
     /** Styles applied to the root element if `variant="text"` and `color="primary"`.
-     *  @deprecated Combine the [.MuiPaginationItem-text](/material-ui/api/pagination-item/#pagination-item-classes-text) and [.MuiPaginationItem-colorPrimary](/material-ui/api/pagination-item/#pagination-item-classes-colorPrimary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+     *  @deprecated Combine the [.MuiPaginationItem-text](/material-ui/api/pagination-item/#pagination-item-classes-text) and [.MuiPaginationItem-colorPrimary](/material-ui/api/pagination-item/#pagination-item-classes-colorPrimary) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     textPrimary: string;
     /** Styles applied to the root element if `variant="text"` and `color="secondary"`.
-     *  @deprecated Combine the [.MuiPaginationItem-text](/material-ui/api/pagination-item/#pagination-item-classes-text) and [.MuiPaginationItem-colorSecondary](/material-ui/api/pagination-item/#pagination-item-classes-colorSecondary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+     *  @deprecated Combine the [.MuiPaginationItem-text](/material-ui/api/pagination-item/#pagination-item-classes-text) and [.MuiPaginationItem-colorSecondary](/material-ui/api/pagination-item/#pagination-item-classes-colorSecondary) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     textSecondary: string;
     /** Styles applied to the root element if `variant="outlined"`. */
     outlined: string;
     /** Styles applied to the root element if `variant="outlined"` and `color="primary"`.
-     * @deprecated Combine the [.MuiPaginationItem-outlined](/material-ui/api/pagination-item/#pagination-item-classes-outlined) and [.MuiPaginationItem-colorPrimary](/material-ui/api/pagination-item/#pagination-item-classes-colorPrimary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+     * @deprecated Combine the [.MuiPaginationItem-outlined](/material-ui/api/pagination-item/#pagination-item-classes-outlined) and [.MuiPaginationItem-colorPrimary](/material-ui/api/pagination-item/#pagination-item-classes-colorPrimary) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     outlinedPrimary: string;
     /** Styles applied to the root element if `variant="outlined"` and `color="secondary"`.
-     * @deprecated Combine the [.MuiPaginationItem-outlined](/material-ui/api/pagination-item/#pagination-item-classes-outlined) and [.MuiPaginationItem-colorSecondary](/material-ui/api/pagination-item/#pagination-item-classes-colorSecondary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+     * @deprecated Combine the [.MuiPaginationItem-outlined](/material-ui/api/pagination-item/#pagination-item-classes-outlined) and [.MuiPaginationItem-colorSecondary](/material-ui/api/pagination-item/#pagination-item-classes-colorSecondary) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     outlinedSecondary: string;
     /** Styles applied to the root element if `rounded="true"`. */

package/Paper/Paper.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 = ["className", "component", "elevation", "square", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -10,12 +10,12 @@ import integerPropType from '@mui/utils/integerPropType';
 import chainPropTypes from '@mui/utils/chainPropTypes';
 import composeClasses from '@mui/utils/composeClasses';
 import { alpha } from '@mui/system/colorManipulator';
-import styled from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
 import getOverlayAlpha from '../styles/getOverlayAlpha';
-import useThemeProps from '../styles/useThemeProps';
 import useTheme from '../styles/useTheme';
 import { getPaperUtilityClass } from './paperClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiPaper');
 const useUtilityClasses = ownerState => {
   const {
     square,
@@ -38,28 +38,41 @@ const PaperRoot = styled('div', {
     return [styles.root, styles[ownerState.variant], !ownerState.square && styles.rounded, ownerState.variant === 'elevation' && styles[`elevation${ownerState.elevation}`]];
   }
 })(({
-  theme,
-  ownerState
-}) => _extends({
+  theme
+}) => ({
   backgroundColor: (theme.vars || theme).palette.background.paper,
   color: (theme.vars || theme).palette.text.primary,
-  transition: theme.transitions.create('box-shadow')
-}, !ownerState.square && {
-  borderRadius: theme.shape.borderRadius
-}, ownerState.variant === 'outlined' && {
-  border: `1px solid ${(theme.vars || theme).palette.divider}`
-}, ownerState.variant === 'elevation' && _extends({
-  boxShadow: (theme.vars || theme).shadows[ownerState.elevation]
-}, !theme.vars && theme.palette.mode === 'dark' && {
-  backgroundImage: `linear-gradient(${alpha('#fff', getOverlayAlpha(ownerState.elevation))}, ${alpha('#fff', getOverlayAlpha(ownerState.elevation))})`
-}, theme.vars && {
-  backgroundImage: theme.vars.overlays?.[ownerState.elevation]
-})));
+  transition: theme.transitions.create('box-shadow'),
+  variants: [{
+    props: ({
+      ownerState
+    }) => !ownerState.square,
+    style: {
+      borderRadius: theme.shape.borderRadius
+    }
+  }, {
+    props: {
+      variant: 'outlined'
+    },
+    style: {
+      border: `1px solid ${(theme.vars || theme).palette.divider}`
+    }
+  }, {
+    props: {
+      variant: 'elevation'
+    },
+    style: {
+      boxShadow: 'var(--Paper-shadow)',
+      backgroundImage: 'var(--Paper-overlay)'
+    }
+  }]
+}));
 const Paper = /*#__PURE__*/React.forwardRef(function Paper(inProps, ref) {
   const props = useThemeProps({
     props: inProps,
     name: 'MuiPaper'
   });
+  const theme = useTheme();
   const {
       className,
       component = 'div',
@@ -76,8 +89,6 @@ const Paper = /*#__PURE__*/React.forwardRef(function Paper(inProps, ref) {
   });
   const classes = useUtilityClasses(ownerState);
   if (process.env.NODE_ENV !== 'production') {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const theme = useTheme();
     if (theme.shadows[elevation] === undefined) {
       console.error([`MUI: The elevation provided <Paper elevation={${elevation}}> is not available in the theme.`, `Please make sure that \`theme.shadows[${elevation}]\` is defined.`].join('\n'));
     }
@@ -87,7 +98,15 @@ const Paper = /*#__PURE__*/React.forwardRef(function Paper(inProps, ref) {
     ownerState: ownerState,
     className: clsx(classes.root, className),
     ref: ref
-  }, other));
+  }, other, {
+    style: _extends({}, variant === 'elevation' && _extends({
+      '--Paper-shadow': (theme.vars || theme).shadows[elevation]
+    }, theme.vars && {
+      '--Paper-overlay': theme.overlays?.[elevation]
+    }, !theme.vars && theme.palette.mode === 'dark' && {
+      '--Paper-overlay': `linear-gradient(${alpha('#fff', getOverlayAlpha(elevation))}, ${alpha('#fff', getOverlayAlpha(elevation))})`
+    }), other.style)
+  }));
 });
 process.env.NODE_ENV !== "production" ? Paper.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
@@ -131,6 +150,10 @@ process.env.NODE_ENV !== "production" ? Paper.propTypes /* remove-proptypes */ =
    * @default false
    */
   square: PropTypes.bool,
+  /**
+   * @ignore
+   */
+  style: PropTypes.object,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/Radio/Radio.js

@@ -2,7 +2,7 @@
 
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["checked", "checkedIcon", "color", "icon", "name", "onChange", "size", "className"];
+const _excluded = ["checked", "checkedIcon", "color", "icon", "name", "onChange", "size", "className", "disableRipple"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -15,7 +15,7 @@ import capitalize from '../utils/capitalize';
 import createChainedFunction from '../utils/createChainedFunction';
 import useRadioGroup from '../RadioGroup/useRadioGroup';
 import radioClasses, { getRadioUtilityClass } from './radioClasses';
-import { rootShouldForwardProp } from '../styles/styled';
+import rootShouldForwardProp from '../styles/rootShouldForwardProp';
 import { styled, createUseThemeProps } from '../zero-styled';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useThemeProps = createUseThemeProps('MuiRadio');
@@ -116,10 +116,12 @@ const Radio = /*#__PURE__*/React.forwardRef(function Radio(inProps, ref) {
       name: nameProp,
       onChange: onChangeProp,
       size = 'medium',
-      className
+      className,
+      disableRipple = false
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const ownerState = _extends({}, props, {
+    disableRipple,
     color,
     size
   });

package/Radio/RadioButtonIcon.js

@@ -5,7 +5,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import RadioButtonUncheckedIcon from '../internal/svg-icons/RadioButtonUnchecked';
 import RadioButtonCheckedIcon from '../internal/svg-icons/RadioButtonChecked';
-import { rootShouldForwardProp } from '../styles/styled';
+import rootShouldForwardProp from '../styles/rootShouldForwardProp';
 import { styled } from '../zero-styled';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const RadioButtonIconRoot = styled('span', {

package/Rating/Rating.js

@@ -15,10 +15,11 @@ import { useRtl } from '@mui/system/RtlProvider';
 import { capitalize, useForkRef, useIsFocusVisible, useControlled, unstable_useId as useId } from '../utils';
 import Star from '../internal/svg-icons/Star';
 import StarBorder from '../internal/svg-icons/StarBorder';
-import useThemeProps from '../styles/useThemeProps';
-import styled, { slotShouldForwardProp } from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
+import slotShouldForwardProp from '../styles/slotShouldForwardProp';
 import ratingClasses, { getRatingUtilityClass } from './ratingClasses';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiRating');
 function getDecimalPrecision(num) {
   const decimalPart = num.toString().split('.')[1];
   return decimalPart ? decimalPart.length : 0;

package/Select/Select.js

@@ -18,7 +18,8 @@ import FilledInput from '../FilledInput';
 import OutlinedInput from '../OutlinedInput';
 import useThemeProps from '../styles/useThemeProps';
 import useForkRef from '../utils/useForkRef';
-import styled, { rootShouldForwardProp } from '../styles/styled';
+import { styled } from '../zero-styled';
+import rootShouldForwardProp from '../styles/rootShouldForwardProp';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {

package/Select/SelectInput.js

@@ -15,14 +15,15 @@ import refType from '@mui/utils/refType';
 import ownerDocument from '../utils/ownerDocument';
 import capitalize from '../utils/capitalize';
 import Menu from '../Menu/Menu';
-import { nativeSelectSelectStyles, nativeSelectIconStyles } from '../NativeSelect/NativeSelectInput';
+import { StyledSelectSelect, StyledSelectIcon } from '../NativeSelect/NativeSelectInput';
 import { isFilled } from '../InputBase/utils';
-import styled, { slotShouldForwardProp } from '../styles/styled';
+import { styled } from '../zero-styled';
+import slotShouldForwardProp from '../styles/slotShouldForwardProp';
 import useForkRef from '../utils/useForkRef';
 import useControlled from '../utils/useControlled';
 import selectClasses, { getSelectUtilityClasses } from './selectClasses';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const SelectSelect = styled('div', {
+const SelectSelect = styled(StyledSelectSelect, {
   name: 'MuiSelect',
   slot: 'Select',
   overridesResolver: (props, styles) => {
@@ -41,7 +42,7 @@ const SelectSelect = styled('div', {
       [`&.${selectClasses.multiple}`]: styles.multiple
     }];
   }
-})(nativeSelectSelectStyles, {
+})({
   // Win specificity over the input base
   [`&.${selectClasses.select}`]: {
     height: 'auto',
@@ -53,7 +54,7 @@ const SelectSelect = styled('div', {
     overflow: 'hidden'
   }
 });
-const SelectIcon = styled('svg', {
+const SelectIcon = styled(StyledSelectIcon, {
   name: 'MuiSelect',
   slot: 'Icon',
   overridesResolver: (props, styles) => {
@@ -62,7 +63,7 @@ const SelectIcon = styled('svg', {
     } = props;
     return [styles.icon, ownerState.variant && styles[`icon${capitalize(ownerState.variant)}`], ownerState.open && styles.iconOpen];
   }
-})(nativeSelectIconStyles);
+})({});
 const SelectNativeInput = styled('input', {
   shouldForwardProp: prop => slotShouldForwardProp(prop) && prop !== 'classes',
   name: 'MuiSelect',
@@ -435,6 +436,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
   const listboxId = useId();
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [/*#__PURE__*/_jsx(SelectSelect, _extends({
+      as: "div",
       ref: handleDisplayRef,
       tabIndex: tabIndex,
       role: "combobox",

package/Skeleton/Skeleton.js

@@ -1,18 +1,17 @@
 '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 = ["animation", "className", "component", "height", "style", "variant", "width"];
 import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
-import { keyframes, css } from '@mui/system';
 import composeClasses from '@mui/utils/composeClasses';
 import { alpha, unstable_getUnit as getUnit, unstable_toUnitless as toUnitless } from '../styles';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { keyframes, css, createUseThemeProps, styled } from '../zero-styled';
 import { getSkeletonUtilityClass } from './skeletonClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiSkeleton');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -54,6 +53,16 @@ const waveKeyframe = keyframes`
     transform: translateX(100%);
   }
 `;
+
+// This implementation is for supporting both Styled-components v4+ and Pigment CSS.
+// A global animation has to be created here for Styled-components v4+ (https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/utils/errors.md#12).
+// which can be done by checking typeof indeterminate1Keyframe !== 'string' (at runtime, Pigment CSS transform keyframes`` to a string).
+const pulseAnimation = typeof pulseKeyframe !== 'string' ? css`
+        animation: ${pulseKeyframe} 2s ease-in-out 0.5s infinite;
+      ` : null;
+const waveAnimation = typeof waveKeyframe !== 'string' ? css`
+        animation: ${waveKeyframe} 2s linear 0.5s infinite;
+      ` : null;
 const SkeletonRoot = styled('span', {
   name: 'MuiSkeleton',
   slot: 'Root',
@@ -64,70 +73,109 @@ const SkeletonRoot = styled('span', {
     return [styles.root, styles[ownerState.variant], ownerState.animation !== false && styles[ownerState.animation], ownerState.hasChildren && styles.withChildren, ownerState.hasChildren && !ownerState.width && styles.fitContent, ownerState.hasChildren && !ownerState.height && styles.heightAuto];
   }
 })(({
-  theme,
-  ownerState
+  theme
 }) => {
   const radiusUnit = getUnit(theme.shape.borderRadius) || 'px';
   const radiusValue = toUnitless(theme.shape.borderRadius);
-  return _extends({
+  return {
     display: 'block',
     // Create a "on paper" color with sufficient contrast retaining the color
     backgroundColor: theme.vars ? theme.vars.palette.Skeleton.bg : alpha(theme.palette.text.primary, theme.palette.mode === 'light' ? 0.11 : 0.13),
-    height: '1.2em'
-  }, ownerState.variant === 'text' && {
-    marginTop: 0,
-    marginBottom: 0,
-    height: 'auto',
-    transformOrigin: '0 55%',
-    transform: 'scale(1, 0.60)',
-    borderRadius: `${radiusValue}${radiusUnit}/${Math.round(radiusValue / 0.6 * 10) / 10}${radiusUnit}`,
-    '&:empty:before': {
-      content: '"\\00a0"'
-    }
-  }, ownerState.variant === 'circular' && {
-    borderRadius: '50%'
-  }, ownerState.variant === 'rounded' && {
-    borderRadius: (theme.vars || theme).shape.borderRadius
-  }, ownerState.hasChildren && {
-    '& > *': {
-      visibility: 'hidden'
-    }
-  }, ownerState.hasChildren && !ownerState.width && {
-    maxWidth: 'fit-content'
-  }, ownerState.hasChildren && !ownerState.height && {
-    height: 'auto'
-  });
-}, ({
-  ownerState
-}) => ownerState.animation === 'pulse' && css`
-      animation: ${pulseKeyframe} 2s ease-in-out 0.5s infinite;
-    `, ({
-  ownerState,
-  theme
-}) => ownerState.animation === 'wave' && css`
-      position: relative;
-      overflow: hidden;
-
-      /* Fix bug in Safari https://bugs.webkit.org/show_bug.cgi?id=68196 */
-      -webkit-mask-image: -webkit-radial-gradient(white, black);
-
-      &::after {
-        animation: ${waveKeyframe} 2s linear 0.5s infinite;
-        background: linear-gradient(
-          90deg,
-          transparent,
-          ${(theme.vars || theme).palette.action.hover},
-          transparent
-        );
-        content: '';
-        position: absolute;
-        transform: translateX(-100%); /* Avoid flash during server-side hydration */
-        bottom: 0;
-        left: 0;
-        right: 0;
-        top: 0;
+    height: '1.2em',
+    variants: [{
+      props: {
+        variant: 'text'
+      },
+      style: {
+        marginTop: 0,
+        marginBottom: 0,
+        height: 'auto',
+        transformOrigin: '0 55%',
+        transform: 'scale(1, 0.60)',
+        borderRadius: `${radiusValue}${radiusUnit}/${Math.round(radiusValue / 0.6 * 10) / 10}${radiusUnit}`,
+        '&:empty:before': {
+          content: '"\\00a0"'
+        }
       }
-    `);
+    }, {
+      props: {
+        variant: 'circular'
+      },
+      style: {
+        borderRadius: '50%'
+      }
+    }, {
+      props: {
+        variant: 'rounded'
+      },
+      style: {
+        borderRadius: (theme.vars || theme).shape.borderRadius
+      }
+    }, {
+      props: ({
+        ownerState
+      }) => ownerState.hasChildren,
+      style: {
+        '& > *': {
+          visibility: 'hidden'
+        }
+      }
+    }, {
+      props: ({
+        ownerState
+      }) => ownerState.hasChildren && !ownerState.width,
+      style: {
+        maxWidth: 'fit-content'
+      }
+    }, {
+      props: ({
+        ownerState
+      }) => ownerState.hasChildren && !ownerState.height,
+      style: {
+        height: 'auto'
+      }
+    }, {
+      props: {
+        animation: 'pulse'
+      },
+      style: pulseAnimation || {
+        animation: `${pulseKeyframe} 2s ease-in-out 0.5s infinite`
+      }
+    }, {
+      props: {
+        animation: 'wave'
+      },
+      style: {
+        position: 'relative',
+        overflow: 'hidden',
+        /* Fix bug in Safari https://bugs.webkit.org/show_bug.cgi?id=68196 */
+        WebkitMaskImage: '-webkit-radial-gradient(white, black)',
+        '&::after': {
+          background: `linear-gradient(
+                90deg,
+                transparent,
+                ${(theme.vars || theme).palette.action.hover},
+                transparent
+              )`,
+          content: '""',
+          position: 'absolute',
+          transform: 'translateX(-100%)' /* Avoid flash during server-side hydration */,
+          bottom: 0,
+          left: 0,
+          right: 0,
+          top: 0
+        }
+      }
+    }, {
+      props: {
+        animation: 'wave'
+      },
+      style: waveAnimation || {
+        animation: `${waveKeyframe} 2s linear 0.5s infinite`
+      }
+    }]
+  };
+});
 const Skeleton = /*#__PURE__*/React.forwardRef(function Skeleton(inProps, ref) {
   const props = useThemeProps({
     props: inProps,

package/Slider/Slider.d.ts

@@ -46,7 +46,7 @@ export interface SliderOwnProps {
   /**
    * The components used for each slot inside.
    *
-   * @deprecated use the `slots` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+   * @deprecated use the `slots` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    *
    * @default {}
    */
@@ -64,7 +64,7 @@ export interface SliderOwnProps {
    * The extra props for the slot components.
    * You can override the existing props or add new ones.
    *
-   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    *
    * @default {}
    */

package/Slider/Slider.js

@@ -795,7 +795,7 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes /* remove-proptypes */
   /**
    * The components used for each slot inside.
    *
-   * @deprecated use the `slots` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+   * @deprecated use the `slots` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    *
    * @default {}
    */
@@ -813,7 +813,7 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes /* remove-proptypes */
    * The extra props for the slot components.
    * You can override the existing props or add new ones.
    *
-   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    *
    * @default {}
    */