@mui/material 9.0.0 → 9.1.0

package/Slider/Slider.js

@@ -24,6 +24,7 @@ var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _createSimplePaletteValueFilter = _interopRequireDefault(require("../utils/createSimplePaletteValueFilter"));
 var _SliderValueLabel = _interopRequireDefault(require("./SliderValueLabel"));
 var _sliderClasses = _interopRequireWildcard(require("./sliderClasses"));
+var _utils = require("../transitions/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function Identity(x) {
   return x;
@@ -138,6 +139,10 @@ const SliderRail = exports.SliderRail = (0, _zeroStyled.styled)('span', {
   borderRadius: 'inherit',
   backgroundColor: 'currentColor',
   opacity: 0.38,
+  '@media (forced-colors: active)': {
+    border: '1px solid transparent',
+    boxSizing: 'border-box'
+  },
   variants: [{
     props: {
       orientation: 'horizontal'
@@ -179,7 +184,7 @@ const SliderTrack = exports.SliderTrack = (0, _zeroStyled.styled)('span', {
     borderRadius: 'inherit',
     border: '1px solid currentColor',
     backgroundColor: 'currentColor',
-    transition: theme.transitions.create(['left', 'width', 'bottom', 'height'], {
+    ...(0, _utils.getTransitionStyles)(theme, ['left', 'width', 'bottom', 'height'], {
       duration: theme.transitions.duration.shortest
     }),
     variants: [{
@@ -187,7 +192,9 @@ const SliderTrack = exports.SliderTrack = (0, _zeroStyled.styled)('span', {
         size: 'small'
       },
       style: {
-        border: 'none'
+        '@media (forced-colors: none)': {
+          border: 'none'
+        }
       }
     }, {
       props: {
@@ -253,9 +260,12 @@ const SliderThumb = exports.SliderThumb = (0, _zeroStyled.styled)('span', {
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  transition: theme.transitions.create(['box-shadow', 'left', 'bottom'], {
+  ...(0, _utils.getTransitionStyles)(theme, ['box-shadow', 'left', 'bottom'], {
     duration: theme.transitions.duration.shortest
   }),
+  '@media (forced-colors: active)': {
+    border: '1px solid ButtonBorder'
+  },
   '&::before': {
     position: 'absolute',
     content: '""',
@@ -334,7 +344,7 @@ const SliderValueLabel = exports.SliderValueLabel = (0, _zeroStyled.styled)(_Sli
   whiteSpace: 'nowrap',
   ...theme.typography.body2,
   fontWeight: 500,
-  transition: theme.transitions.create(['transform'], {
+  ...(0, _utils.getTransitionStyles)(theme, ['transform'], {
     duration: theme.transitions.duration.shortest
   }),
   position: 'absolute',

package/Slider/Slider.mjs

@@ -17,6 +17,7 @@ import capitalize from "../utils/capitalize.mjs";
 import createSimplePaletteValueFilter from "../utils/createSimplePaletteValueFilter.mjs";
 import BaseSliderValueLabel from "./SliderValueLabel.mjs";
 import sliderClasses, { getSliderUtilityClass } from "./sliderClasses.mjs";
+import { getTransitionStyles } from "../transitions/utils.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function Identity(x) {
   return x;
@@ -131,6 +132,10 @@ export const SliderRail = styled('span', {
   borderRadius: 'inherit',
   backgroundColor: 'currentColor',
   opacity: 0.38,
+  '@media (forced-colors: active)': {
+    border: '1px solid transparent',
+    boxSizing: 'border-box'
+  },
   variants: [{
     props: {
       orientation: 'horizontal'
@@ -172,7 +177,7 @@ export const SliderTrack = styled('span', {
     borderRadius: 'inherit',
     border: '1px solid currentColor',
     backgroundColor: 'currentColor',
-    transition: theme.transitions.create(['left', 'width', 'bottom', 'height'], {
+    ...getTransitionStyles(theme, ['left', 'width', 'bottom', 'height'], {
       duration: theme.transitions.duration.shortest
     }),
     variants: [{
@@ -180,7 +185,9 @@ export const SliderTrack = styled('span', {
         size: 'small'
       },
       style: {
-        border: 'none'
+        '@media (forced-colors: none)': {
+          border: 'none'
+        }
       }
     }, {
       props: {
@@ -246,9 +253,12 @@ export const SliderThumb = styled('span', {
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  transition: theme.transitions.create(['box-shadow', 'left', 'bottom'], {
+  ...getTransitionStyles(theme, ['box-shadow', 'left', 'bottom'], {
     duration: theme.transitions.duration.shortest
   }),
+  '@media (forced-colors: active)': {
+    border: '1px solid ButtonBorder'
+  },
   '&::before': {
     position: 'absolute',
     content: '""',
@@ -327,7 +337,7 @@ const SliderValueLabel = styled(BaseSliderValueLabel, {
   whiteSpace: 'nowrap',
   ...theme.typography.body2,
   fontWeight: 500,
-  transition: theme.transitions.create(['transform'], {
+  ...getTransitionStyles(theme, ['transform'], {
     duration: theme.transitions.duration.shortest
   }),
   position: 'absolute',

package/Slider/useSlider.js

@@ -20,6 +20,7 @@ var _visuallyHidden = _interopRequireDefault(require("@mui/utils/visuallyHidden"
 var _clamp = _interopRequireDefault(require("@mui/utils/clamp"));
 var _extractEventHandlers = _interopRequireDefault(require("@mui/utils/extractEventHandlers"));
 var _areArraysEqual = _interopRequireDefault(require("../utils/areArraysEqual"));
+var _contains = _interopRequireDefault(require("../utils/contains"));
 var _getActiveElement = _interopRequireDefault(require("../utils/getActiveElement"));
 const INTENTIONAL_DRAG_COUNT_THRESHOLD = 2;
 const EMPTY_MARKS = [];
@@ -103,7 +104,7 @@ function setValueIndex(values, newValue, index) {
 function focusThumb(sliderRef, activeIndex, setActive, focusVisible) {
   const doc = (0, _ownerDocument.default)(sliderRef.current);
   const activeElement = (0, _getActiveElement.default)(doc);
-  if (!sliderRef.current?.contains(activeElement) || Number(activeElement?.getAttribute('data-index')) !== activeIndex) {
+  if (!(0, _contains.default)(sliderRef.current, activeElement) || Number(activeElement?.getAttribute('data-index')) !== activeIndex) {
     const input = sliderRef.current?.querySelector(`[type="range"][data-index="${activeIndex}"]`);
     if (input != null) {
       if (focusVisible == null) {
@@ -115,8 +116,8 @@ function focusThumb(sliderRef, activeIndex, setActive, focusVisible) {
           preventScroll: true,
           // Prevent pointer-driven focus rings in browsers that support this option.
           // Chrome 144+ supports `focusVisible` in `HTMLElement.focus()` options.
-          // @ts-expect-error `focusVisible` is not yet in TypeScript's lib.dom FocusOptions.
           focusVisible
+          // Cast can be removed once TypeScript >= 6.0 (added `focusVisible` to lib.dom FocusOptions).
         });
       }
     }
@@ -388,7 +389,7 @@ function useSlider(parameters) {
   };
   (0, _useEnhancedEffect.default)(() => {
     const activeElement = (0, _getActiveElement.default)((0, _ownerDocument.default)(sliderRef.current));
-    if (disabled && sliderRef.current?.contains(activeElement)) {
+    if (disabled && (0, _contains.default)(sliderRef.current, activeElement)) {
       // This is necessary because Firefox and Safari will keep focus
       // on a disabled element:
       // https://codesandbox.io/p/sandbox/mui-pr-22247-forked-h151h?file=/src/App.js

package/Slider/useSlider.mjs

@@ -11,6 +11,7 @@ import visuallyHidden from '@mui/utils/visuallyHidden';
 import clamp from '@mui/utils/clamp';
 import extractEventHandlers from '@mui/utils/extractEventHandlers';
 import areArraysEqual from "../utils/areArraysEqual.mjs";
+import contains from "../utils/contains.mjs";
 import getActiveElement from "../utils/getActiveElement.mjs";
 const INTENTIONAL_DRAG_COUNT_THRESHOLD = 2;
 const EMPTY_MARKS = [];
@@ -94,7 +95,7 @@ function setValueIndex(values, newValue, index) {
 function focusThumb(sliderRef, activeIndex, setActive, focusVisible) {
   const doc = ownerDocument(sliderRef.current);
   const activeElement = getActiveElement(doc);
-  if (!sliderRef.current?.contains(activeElement) || Number(activeElement?.getAttribute('data-index')) !== activeIndex) {
+  if (!contains(sliderRef.current, activeElement) || Number(activeElement?.getAttribute('data-index')) !== activeIndex) {
     const input = sliderRef.current?.querySelector(`[type="range"][data-index="${activeIndex}"]`);
     if (input != null) {
       if (focusVisible == null) {
@@ -106,8 +107,8 @@ function focusThumb(sliderRef, activeIndex, setActive, focusVisible) {
           preventScroll: true,
           // Prevent pointer-driven focus rings in browsers that support this option.
           // Chrome 144+ supports `focusVisible` in `HTMLElement.focus()` options.
-          // @ts-expect-error `focusVisible` is not yet in TypeScript's lib.dom FocusOptions.
           focusVisible
+          // Cast can be removed once TypeScript >= 6.0 (added `focusVisible` to lib.dom FocusOptions).
         });
       }
     }
@@ -378,7 +379,7 @@ export function useSlider(parameters) {
   };
   useEnhancedEffect(() => {
     const activeElement = getActiveElement(ownerDocument(sliderRef.current));
-    if (disabled && sliderRef.current?.contains(activeElement)) {
+    if (disabled && contains(sliderRef.current, activeElement)) {
       // This is necessary because Firefox and Safari will keep focus
       // on a disabled element:
       // https://codesandbox.io/p/sandbox/mui-pr-22247-forked-h151h?file=/src/App.js

package/Snackbar/Snackbar.d.mts

@@ -4,7 +4,7 @@ import ClickAwayListener from "../ClickAwayListener/index.mjs";
 import { Theme } from "../styles/index.mjs";
 import { InternalStandardProps as StandardProps } from "../internal/index.mjs";
 import { SnackbarContentProps } from "../SnackbarContent/index.mjs";
-import { TransitionProps } from "../transitions/transition.mjs";
+import { TransitionProps } from "../transitions/types.mjs";
 import { SnackbarClasses } from "./snackbarClasses.mjs";
 import { CreateSlotsAndSlotProps, SlotComponentProps, SlotProps } from "../utils/types.mjs";
 export interface SnackbarSlots {
@@ -25,7 +25,7 @@ export interface SnackbarSlots {
   clickAwayListener: React.ElementType;
   /**
    * The component that renders the transition.
-   * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
+   * [Follow this guide](/material-ui/transitions/#transition-slots) to learn more about the requirements for this component.
    * @default Grow
    */
   transition: React.ElementType;

package/Snackbar/Snackbar.d.ts

@@ -4,7 +4,7 @@ import ClickAwayListener from "../ClickAwayListener/index.js";
 import { Theme } from "../styles/index.js";
 import { InternalStandardProps as StandardProps } from "../internal/index.js";
 import { SnackbarContentProps } from "../SnackbarContent/index.js";
-import { TransitionProps } from "../transitions/transition.js";
+import { TransitionProps } from "../transitions/types.js";
 import { SnackbarClasses } from "./snackbarClasses.js";
 import { CreateSlotsAndSlotProps, SlotComponentProps, SlotProps } from "../utils/types.js";
 export interface SnackbarSlots {
@@ -25,7 +25,7 @@ export interface SnackbarSlots {
   clickAwayListener: React.ElementType;
   /**
    * The component that renders the transition.
-   * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
+   * [Follow this guide](/material-ui/transitions/#transition-slots) to learn more about the requirements for this component.
    * @default Grow
    */
   transition: React.ElementType;

package/SpeedDial/SpeedDial.d.mts

@@ -16,7 +16,7 @@ export interface SpeedDialSlots {
   root: React.ElementType;
   /**
    * The component that renders the transition.
-   * [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
+   * [Follow this guide](/material-ui/transitions/#transition-slots) to learn more about the requirements for this component.
    * @default Zoom
    */
   transition: React.ElementType;

package/SpeedDial/SpeedDial.d.ts

@@ -16,7 +16,7 @@ export interface SpeedDialSlots {
   root: React.ElementType;
   /**
    * The component that renders the transition.
-   * [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
+   * [Follow this guide](/material-ui/transitions/#transition-slots) to learn more about the requirements for this component.
    * @default Zoom
    */
   transition: React.ElementType;

package/SpeedDial/SpeedDial.js

@@ -19,6 +19,7 @@ var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _Zoom = _interopRequireDefault(require("../Zoom"));
 var _Fab = _interopRequireDefault(require("../Fab"));
+var _utils = require("../transitions/utils");
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _isMuiElement = _interopRequireDefault(require("../utils/isMuiElement"));
 var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
@@ -131,7 +132,9 @@ const SpeedDialActions = (0, _zeroStyled.styled)('div', {
     } = props;
     return [styles.actions, !ownerState.open && styles.actionsClosed];
   }
-})({
+})((0, _memoTheme.default)(({
+  theme
+}) => ({
   display: 'flex',
   pointerEvents: 'auto',
   variants: [{
@@ -140,10 +143,11 @@ const SpeedDialActions = (0, _zeroStyled.styled)('div', {
     }) => !ownerState.open,
     style: {
       transition: 'top 0s linear 0.2s',
+      ...(0, _utils.getReducedMotionStyles)(theme),
       pointerEvents: 'none'
     }
   }]
-});
+})));
 const SpeedDial = /*#__PURE__*/React.forwardRef(function SpeedDial(inProps, ref) {
   const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,

package/SpeedDial/SpeedDial.mjs

@@ -12,6 +12,7 @@ import memoTheme from "../utils/memoTheme.mjs";
 import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
 import Zoom from "../Zoom/index.mjs";
 import Fab from "../Fab/index.mjs";
+import { getReducedMotionStyles } from "../transitions/utils.mjs";
 import capitalize from "../utils/capitalize.mjs";
 import isMuiElement from "../utils/isMuiElement.mjs";
 import useForkRef from "../utils/useForkRef.mjs";
@@ -124,7 +125,9 @@ const SpeedDialActions = styled('div', {
     } = props;
     return [styles.actions, !ownerState.open && styles.actionsClosed];
   }
-})({
+})(memoTheme(({
+  theme
+}) => ({
   display: 'flex',
   pointerEvents: 'auto',
   variants: [{
@@ -133,10 +136,11 @@ const SpeedDialActions = styled('div', {
     }) => !ownerState.open,
     style: {
       transition: 'top 0s linear 0.2s',
+      ...getReducedMotionStyles(theme),
       pointerEvents: 'none'
     }
   }]
-});
+})));
 const SpeedDial = /*#__PURE__*/React.forwardRef(function SpeedDial(inProps, ref) {
   const props = useDefaultProps({
     props: inProps,

package/SpeedDialAction/SpeedDialAction.js

@@ -18,6 +18,8 @@ var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _Fab = _interopRequireDefault(require("../Fab"));
 var _Tooltip = _interopRequireDefault(require("../Tooltip"));
+var _utils = require("../transitions/utils");
+var _useReducedMotion = _interopRequireDefault(require("../transitions/useReducedMotion"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _speedDialActionClasses = _interopRequireWildcard(require("./speedDialActionClasses"));
 var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
@@ -57,6 +59,7 @@ const SpeedDialActionFab = (0, _zeroStyled.styled)(_Fab.default, {
   transition: `${theme.transitions.create('transform', {
     duration: theme.transitions.duration.shorter
   })}, opacity 0.8s`,
+  ...(0, _utils.getReducedMotionStyles)(theme),
   opacity: 1,
   variants: [{
     props: ({
@@ -84,7 +87,7 @@ const SpeedDialActionStaticTooltip = (0, _zeroStyled.styled)('span', {
   display: 'flex',
   alignItems: 'center',
   [`& .${_speedDialActionClasses.default.staticTooltipLabel}`]: {
-    transition: theme.transitions.create(['transform', 'opacity'], {
+    ...(0, _utils.getTransitionStyles)(theme, ['transform', 'opacity'], {
       duration: theme.transitions.duration.shorter
     }),
     opacity: 1
@@ -153,6 +156,8 @@ const SpeedDialAction = /*#__PURE__*/React.forwardRef(function SpeedDialAction(i
     slotProps = {},
     ...other
   } = props;
+  const theme = (0, _zeroStyled.useTheme)();
+  const reducedMotion = (0, _useReducedMotion.default)(theme.motion.reducedMotion, false);
   const resolvedTooltipSlotProps = typeof slotProps.tooltip === 'function' ? slotProps.tooltip(props) : slotProps.tooltip ?? {};
   const tooltipPlacement = resolvedTooltipSlotProps.placement ?? 'left';
   const ownerState = {
@@ -171,8 +176,12 @@ const SpeedDialAction = /*#__PURE__*/React.forwardRef(function SpeedDialAction(i
   const handleTooltipOpen = () => {
     setTooltipOpen(true);
   };
+  const transitionTiming = reducedMotion.getTransitionTiming({
+    duration: 0,
+    delay: `${delay}ms`
+  });
   const transitionStyle = {
-    transitionDelay: `${delay}ms`
+    transitionDelay: transitionTiming.delay
   };
   const [FabSlot, fabSlotProps] = (0, _useSlot.default)('fab', {
     elementType: SpeedDialActionFab,

package/SpeedDialAction/SpeedDialAction.mjs

@@ -6,11 +6,13 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import { emphasize } from '@mui/system/colorManipulator';
-import { styled } from "../zero-styled/index.mjs";
+import { styled, useTheme } from "../zero-styled/index.mjs";
 import memoTheme from "../utils/memoTheme.mjs";
 import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
 import Fab from "../Fab/index.mjs";
 import Tooltip from "../Tooltip/index.mjs";
+import { getReducedMotionStyles, getTransitionStyles } from "../transitions/utils.mjs";
+import useReducedMotion from "../transitions/useReducedMotion.mjs";
 import capitalize from "../utils/capitalize.mjs";
 import speedDialActionClasses, { getSpeedDialActionUtilityClass } from "./speedDialActionClasses.mjs";
 import useSlot from "../utils/useSlot.mjs";
@@ -50,6 +52,7 @@ const SpeedDialActionFab = styled(Fab, {
   transition: `${theme.transitions.create('transform', {
     duration: theme.transitions.duration.shorter
   })}, opacity 0.8s`,
+  ...getReducedMotionStyles(theme),
   opacity: 1,
   variants: [{
     props: ({
@@ -77,7 +80,7 @@ const SpeedDialActionStaticTooltip = styled('span', {
   display: 'flex',
   alignItems: 'center',
   [`& .${speedDialActionClasses.staticTooltipLabel}`]: {
-    transition: theme.transitions.create(['transform', 'opacity'], {
+    ...getTransitionStyles(theme, ['transform', 'opacity'], {
       duration: theme.transitions.duration.shorter
     }),
     opacity: 1
@@ -146,6 +149,8 @@ const SpeedDialAction = /*#__PURE__*/React.forwardRef(function SpeedDialAction(i
     slotProps = {},
     ...other
   } = props;
+  const theme = useTheme();
+  const reducedMotion = useReducedMotion(theme.motion.reducedMotion, false);
   const resolvedTooltipSlotProps = typeof slotProps.tooltip === 'function' ? slotProps.tooltip(props) : slotProps.tooltip ?? {};
   const tooltipPlacement = resolvedTooltipSlotProps.placement ?? 'left';
   const ownerState = {
@@ -164,8 +169,12 @@ const SpeedDialAction = /*#__PURE__*/React.forwardRef(function SpeedDialAction(i
   const handleTooltipOpen = () => {
     setTooltipOpen(true);
   };
+  const transitionTiming = reducedMotion.getTransitionTiming({
+    duration: 0,
+    delay: `${delay}ms`
+  });
   const transitionStyle = {
-    transitionDelay: `${delay}ms`
+    transitionDelay: transitionTiming.delay
   };
   const [FabSlot, fabSlotProps] = useSlot('fab', {
     elementType: SpeedDialActionFab,

package/SpeedDialIcon/SpeedDialIcon.js

@@ -16,6 +16,7 @@ var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _Add = _interopRequireDefault(require("../internal/svg-icons/Add"));
 var _speedDialIconClasses = _interopRequireWildcard(require("./speedDialIconClasses"));
+var _utils = require("../transitions/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
   const {
@@ -51,45 +52,47 @@ const SpeedDialIconRoot = (0, _zeroStyled.styled)('span', {
   }
 })((0, _memoTheme.default)(({
   theme
-}) => ({
-  height: 24,
-  [`& .${_speedDialIconClasses.default.icon}`]: {
-    transition: theme.transitions.create(['transform', 'opacity'], {
-      duration: theme.transitions.duration.short
-    })
-  },
-  [`& .${_speedDialIconClasses.default.openIcon}`]: {
-    position: 'absolute',
-    transition: theme.transitions.create(['transform', 'opacity'], {
-      duration: theme.transitions.duration.short
-    }),
-    opacity: 0,
-    transform: 'rotate(-45deg)'
-  },
-  variants: [{
-    props: ({
-      ownerState
-    }) => ownerState.open,
-    style: {
-      [`& .${_speedDialIconClasses.default.icon}`]: {
-        transform: 'rotate(45deg)'
-      },
-      [`& .${_speedDialIconClasses.default.openIcon}`]: {
-        transform: 'rotate(0deg)',
-        opacity: 1
+}) => {
+  return {
+    height: 24,
+    [`& .${_speedDialIconClasses.default.icon}`]: {
+      ...(0, _utils.getTransitionStyles)(theme, ['transform', 'opacity'], {
+        duration: theme.transitions.duration.short
+      })
+    },
+    [`& .${_speedDialIconClasses.default.openIcon}`]: {
+      position: 'absolute',
+      ...(0, _utils.getTransitionStyles)(theme, ['transform', 'opacity'], {
+        duration: theme.transitions.duration.short
+      }),
+      opacity: 0,
+      transform: 'rotate(-45deg)'
+    },
+    variants: [{
+      props: ({
+        ownerState
+      }) => ownerState.open,
+      style: {
+        [`& .${_speedDialIconClasses.default.icon}`]: {
+          transform: 'rotate(45deg)'
+        },
+        [`& .${_speedDialIconClasses.default.openIcon}`]: {
+          transform: 'rotate(0deg)',
+          opacity: 1
+        }
       }
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.open && ownerState.openIcon,
-    style: {
-      [`& .${_speedDialIconClasses.default.icon}`]: {
-        opacity: 0
+    }, {
+      props: ({
+        ownerState
+      }) => ownerState.open && ownerState.openIcon,
+      style: {
+        [`& .${_speedDialIconClasses.default.icon}`]: {
+          opacity: 0
+        }
       }
-    }
-  }]
-})));
+    }]
+  };
+}));
 const SpeedDialIcon = /*#__PURE__*/React.forwardRef(function SpeedDialIcon(inProps, ref) {
   const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,

package/SpeedDialIcon/SpeedDialIcon.mjs

@@ -9,6 +9,7 @@ import memoTheme from "../utils/memoTheme.mjs";
 import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
 import AddIcon from "../internal/svg-icons/Add.mjs";
 import speedDialIconClasses, { getSpeedDialIconUtilityClass } from "./speedDialIconClasses.mjs";
+import { getTransitionStyles } from "../transitions/utils.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -44,45 +45,47 @@ const SpeedDialIconRoot = styled('span', {
   }
 })(memoTheme(({
   theme
-}) => ({
-  height: 24,
-  [`& .${speedDialIconClasses.icon}`]: {
-    transition: theme.transitions.create(['transform', 'opacity'], {
-      duration: theme.transitions.duration.short
-    })
-  },
-  [`& .${speedDialIconClasses.openIcon}`]: {
-    position: 'absolute',
-    transition: theme.transitions.create(['transform', 'opacity'], {
-      duration: theme.transitions.duration.short
-    }),
-    opacity: 0,
-    transform: 'rotate(-45deg)'
-  },
-  variants: [{
-    props: ({
-      ownerState
-    }) => ownerState.open,
-    style: {
-      [`& .${speedDialIconClasses.icon}`]: {
-        transform: 'rotate(45deg)'
-      },
-      [`& .${speedDialIconClasses.openIcon}`]: {
-        transform: 'rotate(0deg)',
-        opacity: 1
+}) => {
+  return {
+    height: 24,
+    [`& .${speedDialIconClasses.icon}`]: {
+      ...getTransitionStyles(theme, ['transform', 'opacity'], {
+        duration: theme.transitions.duration.short
+      })
+    },
+    [`& .${speedDialIconClasses.openIcon}`]: {
+      position: 'absolute',
+      ...getTransitionStyles(theme, ['transform', 'opacity'], {
+        duration: theme.transitions.duration.short
+      }),
+      opacity: 0,
+      transform: 'rotate(-45deg)'
+    },
+    variants: [{
+      props: ({
+        ownerState
+      }) => ownerState.open,
+      style: {
+        [`& .${speedDialIconClasses.icon}`]: {
+          transform: 'rotate(45deg)'
+        },
+        [`& .${speedDialIconClasses.openIcon}`]: {
+          transform: 'rotate(0deg)',
+          opacity: 1
+        }
       }
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.open && ownerState.openIcon,
-    style: {
-      [`& .${speedDialIconClasses.icon}`]: {
-        opacity: 0
+    }, {
+      props: ({
+        ownerState
+      }) => ownerState.open && ownerState.openIcon,
+      style: {
+        [`& .${speedDialIconClasses.icon}`]: {
+          opacity: 0
+        }
       }
-    }
-  }]
-})));
+    }]
+  };
+}));
 const SpeedDialIcon = /*#__PURE__*/React.forwardRef(function SpeedDialIcon(inProps, ref) {
   const props = useDefaultProps({
     props: inProps,