@sitecore/sc-contenthub-blok 1.0.28 → 2.0.1

package/node_modules/@mui/material/StepContent/StepContent.d.ts

@@ -3,13 +3,13 @@ import { SxProps } from '@mui/system';
 import { Theme } from "../styles/index.js";
 import { InternalStandardProps as StandardProps } from "../internal/index.js";
 import { CollapseProps } from "../Collapse/index.js";
-import { TransitionProps } from "../transitions/transition.js";
+import { TransitionProps } from "../transitions/types.js";
 import { StepContentClasses } from "./stepContentClasses.js";
 import { CreateSlotsAndSlotProps, SlotComponentProps } from "../utils/types.js";
 export interface StepContentSlots {
   /**
    * The component that renders the transition slot.
-   * [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 Collapse
    */
   transition?: React.JSXElementConstructor<TransitionProps & {

package/node_modules/@mui/material/StepContent/StepContent.js

@@ -56,6 +56,28 @@ const StepContentRoot = (0, _zeroStyled.styled)('div', {
     style: {
       borderLeft: 'none'
     }
+  }, {
+    props: {
+      alternativeLabel: true
+    },
+    style: {
+      marginLeft: 0,
+      marginRight: 12,
+      // half icon
+      paddingLeft: 8,
+      paddingRight: 8 + 12,
+      // margin + half icon
+      borderLeft: 'none',
+      borderRight: theme.vars ? `1px solid ${theme.vars.palette.StepContent.border}` : `1px solid ${theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600]}`
+    }
+  }, {
+    props: {
+      alternativeLabel: true,
+      last: true
+    },
+    style: {
+      borderRight: 'none'
+    }
   }]
 })));
 const StepContentTransition = (0, _zeroStyled.styled)(_Collapse.default, {
@@ -76,7 +98,8 @@ const StepContent = /*#__PURE__*/React.forwardRef(function StepContent(inProps,
     ...other
   } = props;
   const {
-    orientation
+    orientation,
+    alternativeLabel
   } = (0, _StepperContext.useStepperContext)();
   const {
     active,
@@ -85,7 +108,8 @@ const StepContent = /*#__PURE__*/React.forwardRef(function StepContent(inProps,
   } = React.useContext(_StepContext.default);
   const ownerState = {
     ...props,
-    last
+    last,
+    alternativeLabel
   };
   const classes = useUtilityClasses(ownerState);
   if (process.env.NODE_ENV !== 'production') {

package/node_modules/@mui/material/StepContent/StepContent.mjs

@@ -49,6 +49,28 @@ const StepContentRoot = styled('div', {
     style: {
       borderLeft: 'none'
     }
+  }, {
+    props: {
+      alternativeLabel: true
+    },
+    style: {
+      marginLeft: 0,
+      marginRight: 12,
+      // half icon
+      paddingLeft: 8,
+      paddingRight: 8 + 12,
+      // margin + half icon
+      borderLeft: 'none',
+      borderRight: theme.vars ? `1px solid ${theme.vars.palette.StepContent.border}` : `1px solid ${theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600]}`
+    }
+  }, {
+    props: {
+      alternativeLabel: true,
+      last: true
+    },
+    style: {
+      borderRight: 'none'
+    }
   }]
 })));
 const StepContentTransition = styled(Collapse, {
@@ -69,7 +91,8 @@ const StepContent = /*#__PURE__*/React.forwardRef(function StepContent(inProps,
     ...other
   } = props;
   const {
-    orientation
+    orientation,
+    alternativeLabel
   } = useStepperContext();
   const {
     active,
@@ -78,7 +101,8 @@ const StepContent = /*#__PURE__*/React.forwardRef(function StepContent(inProps,
   } = React.useContext(StepContext);
   const ownerState = {
     ...props,
-    last
+    last,
+    alternativeLabel
   };
   const classes = useUtilityClasses(ownerState);
   if (process.env.NODE_ENV !== 'production') {

package/node_modules/@mui/material/StepIcon/StepIcon.js

@@ -18,6 +18,7 @@ var _CheckCircle = _interopRequireDefault(require("../internal/svg-icons/CheckCi
 var _Warning = _interopRequireDefault(require("../internal/svg-icons/Warning"));
 var _SvgIcon = _interopRequireDefault(require("../SvgIcon"));
 var _stepIconClasses = _interopRequireWildcard(require("./stepIconClasses"));
+var _utils = require("../transitions/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 var _circle;
 const useUtilityClasses = ownerState => {
@@ -40,7 +41,7 @@ const StepIconRoot = (0, _zeroStyled.styled)(_SvgIcon.default, {
   theme
 }) => ({
   display: 'block',
-  transition: theme.transitions.create('color', {
+  ...(0, _utils.getTransitionStyles)(theme, 'color', {
     duration: theme.transitions.duration.shortest
   }),
   color: (theme.vars || theme).palette.text.disabled,

package/node_modules/@mui/material/StepIcon/StepIcon.mjs

@@ -12,6 +12,7 @@ import CheckCircle from "../internal/svg-icons/CheckCircle.mjs";
 import Warning from "../internal/svg-icons/Warning.mjs";
 import SvgIcon from "../SvgIcon/index.mjs";
 import stepIconClasses, { getStepIconUtilityClass } from "./stepIconClasses.mjs";
+import { getTransitionStyles } from "../transitions/utils.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -33,7 +34,7 @@ const StepIconRoot = styled(SvgIcon, {
   theme
 }) => ({
   display: 'block',
-  transition: theme.transitions.create('color', {
+  ...getTransitionStyles(theme, 'color', {
     duration: theme.transitions.duration.shortest
   }),
   color: (theme.vars || theme).palette.text.disabled,

package/node_modules/@mui/material/StepLabel/StepLabel.js

@@ -19,6 +19,7 @@ var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _stepLabelClasses = _interopRequireWildcard(require("./stepLabelClasses"));
 var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
+var _utils = require("../transitions/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
   const {
@@ -50,9 +51,6 @@ const StepLabelRoot = (0, _zeroStyled.styled)('span', {
 })({
   display: 'flex',
   alignItems: 'center',
-  [`&.${_stepLabelClasses.default.alternativeLabel}`]: {
-    flexDirection: 'column'
-  },
   [`&.${_stepLabelClasses.default.disabled}`]: {
     cursor: 'default'
   },
@@ -64,6 +62,21 @@ const StepLabelRoot = (0, _zeroStyled.styled)('span', {
       textAlign: 'left',
       padding: '8px 0'
     }
+  }, {
+    props: {
+      alternativeLabel: true
+    },
+    style: {
+      flexDirection: 'column'
+    }
+  }, {
+    props: {
+      orientation: 'vertical',
+      alternativeLabel: true
+    },
+    style: {
+      flexDirection: 'row-reverse'
+    }
   }]
 });
 const StepLabelLabel = (0, _zeroStyled.styled)('span', {
@@ -74,7 +87,7 @@ const StepLabelLabel = (0, _zeroStyled.styled)('span', {
 }) => ({
   ...theme.typography.body2,
   display: 'block',
-  transition: theme.transitions.create('color', {
+  ...(0, _utils.getTransitionStyles)(theme, 'color', {
     duration: theme.transitions.duration.shortest
   }),
   [`&.${_stepLabelClasses.default.active}, &.${_stepLabelClasses.default.completed}`]: {
@@ -86,7 +99,18 @@ const StepLabelLabel = (0, _zeroStyled.styled)('span', {
   },
   [`&.${_stepLabelClasses.default.error}`]: {
     color: (theme.vars || theme).palette.error.main
-  }
+  },
+  variants: [{
+    props: {
+      orientation: 'vertical',
+      alternativeLabel: true
+    },
+    style: {
+      [`&.${_stepLabelClasses.default.alternativeLabel}`]: {
+        marginTop: 0
+      }
+    }
+  }]
 })));
 const StepLabelIconContainer = (0, _zeroStyled.styled)('span', {
   name: 'MuiStepLabel',
@@ -97,7 +121,17 @@ const StepLabelIconContainer = (0, _zeroStyled.styled)('span', {
   paddingRight: 8,
   [`&.${_stepLabelClasses.default.alternativeLabel}`]: {
     paddingRight: 0
-  }
+  },
+  variants: [{
+    props: {
+      orientation: 'vertical',
+      alternativeLabel: true
+    },
+    style: {
+      paddingRight: 0,
+      paddingLeft: 8
+    }
+  }]
 });
 const StepLabelLabelContainer = (0, _zeroStyled.styled)('span', {
   name: 'MuiStepLabel',
@@ -109,7 +143,18 @@ const StepLabelLabelContainer = (0, _zeroStyled.styled)('span', {
   color: (theme.vars || theme).palette.text.secondary,
   [`&.${_stepLabelClasses.default.alternativeLabel}`]: {
     textAlign: 'center'
-  }
+  },
+  variants: [{
+    props: {
+      orientation: 'vertical',
+      alternativeLabel: true
+    },
+    style: {
+      [`&.${_stepLabelClasses.default.alternativeLabel}`]: {
+        textAlign: 'right'
+      }
+    }
+  }]
 })));
 const StepLabel = /*#__PURE__*/React.forwardRef(function StepLabel(inProps, ref) {
   const props = (0, _DefaultPropsProvider.useDefaultProps)({

package/node_modules/@mui/material/StepLabel/StepLabel.mjs

@@ -12,6 +12,7 @@ import memoTheme from "../utils/memoTheme.mjs";
 import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
 import stepLabelClasses, { getStepLabelUtilityClass } from "./stepLabelClasses.mjs";
 import useSlot from "../utils/useSlot.mjs";
+import { getTransitionStyles } from "../transitions/utils.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -43,9 +44,6 @@ const StepLabelRoot = styled('span', {
 })({
   display: 'flex',
   alignItems: 'center',
-  [`&.${stepLabelClasses.alternativeLabel}`]: {
-    flexDirection: 'column'
-  },
   [`&.${stepLabelClasses.disabled}`]: {
     cursor: 'default'
   },
@@ -57,6 +55,21 @@ const StepLabelRoot = styled('span', {
       textAlign: 'left',
       padding: '8px 0'
     }
+  }, {
+    props: {
+      alternativeLabel: true
+    },
+    style: {
+      flexDirection: 'column'
+    }
+  }, {
+    props: {
+      orientation: 'vertical',
+      alternativeLabel: true
+    },
+    style: {
+      flexDirection: 'row-reverse'
+    }
   }]
 });
 const StepLabelLabel = styled('span', {
@@ -67,7 +80,7 @@ const StepLabelLabel = styled('span', {
 }) => ({
   ...theme.typography.body2,
   display: 'block',
-  transition: theme.transitions.create('color', {
+  ...getTransitionStyles(theme, 'color', {
     duration: theme.transitions.duration.shortest
   }),
   [`&.${stepLabelClasses.active}, &.${stepLabelClasses.completed}`]: {
@@ -79,7 +92,18 @@ const StepLabelLabel = styled('span', {
   },
   [`&.${stepLabelClasses.error}`]: {
     color: (theme.vars || theme).palette.error.main
-  }
+  },
+  variants: [{
+    props: {
+      orientation: 'vertical',
+      alternativeLabel: true
+    },
+    style: {
+      [`&.${stepLabelClasses.alternativeLabel}`]: {
+        marginTop: 0
+      }
+    }
+  }]
 })));
 const StepLabelIconContainer = styled('span', {
   name: 'MuiStepLabel',
@@ -90,7 +114,17 @@ const StepLabelIconContainer = styled('span', {
   paddingRight: 8,
   [`&.${stepLabelClasses.alternativeLabel}`]: {
     paddingRight: 0
-  }
+  },
+  variants: [{
+    props: {
+      orientation: 'vertical',
+      alternativeLabel: true
+    },
+    style: {
+      paddingRight: 0,
+      paddingLeft: 8
+    }
+  }]
 });
 const StepLabelLabelContainer = styled('span', {
   name: 'MuiStepLabel',
@@ -102,7 +136,18 @@ const StepLabelLabelContainer = styled('span', {
   color: (theme.vars || theme).palette.text.secondary,
   [`&.${stepLabelClasses.alternativeLabel}`]: {
     textAlign: 'center'
-  }
+  },
+  variants: [{
+    props: {
+      orientation: 'vertical',
+      alternativeLabel: true
+    },
+    style: {
+      [`&.${stepLabelClasses.alternativeLabel}`]: {
+        textAlign: 'right'
+      }
+    }
+  }]
 })));
 const StepLabel = /*#__PURE__*/React.forwardRef(function StepLabel(inProps, ref) {
   const props = useDefaultProps({

package/node_modules/@mui/material/Stepper/Stepper.d.mts

@@ -15,6 +15,8 @@ export interface StepperOwnProps extends Pick<PaperProps, 'elevation' | 'square'
   /**
    * If set to 'true' and orientation is horizontal,
    * then the step label will be positioned under the icon.
+   * If set to 'true' and orientation is vertical,
+   * it reverses the position of the label and content.
    * @default false
    */
   alternativeLabel?: boolean | undefined;

package/node_modules/@mui/material/Stepper/Stepper.d.ts

@@ -15,6 +15,8 @@ export interface StepperOwnProps extends Pick<PaperProps, 'elevation' | 'square'
   /**
    * If set to 'true' and orientation is horizontal,
    * then the step label will be positioned under the icon.
+   * If set to 'true' and orientation is vertical,
+   * it reverses the position of the label and content.
    * @default false
    */
   alternativeLabel?: boolean | undefined;

package/node_modules/@mui/material/Stepper/Stepper.js

@@ -55,6 +55,14 @@ const StepperRoot = (0, _zeroStyled.styled)('ol', {
       flexDirection: 'row',
       alignItems: 'center'
     }
+  }, {
+    props: {
+      orientation: 'horizontal',
+      alternativeLabel: false
+    },
+    style: {
+      gap: 8
+    }
   }, {
     props: {
       orientation: 'vertical'
@@ -69,6 +77,14 @@ const StepperRoot = (0, _zeroStyled.styled)('ol', {
     style: {
       alignItems: 'flex-start'
     }
+  }, {
+    props: {
+      orientation: 'vertical',
+      alternativeLabel: true
+    },
+    style: {
+      alignItems: 'flex-end'
+    }
   }]
 });
 const defaultConnector = /*#__PURE__*/(0, _jsxRuntime.jsx)(_StepConnector.default, {});
@@ -88,7 +104,7 @@ function RovingStepper(props) {
     orientation,
     isRtl
   });
-  const rovingContainerProps = rovingContainer.getContainerProps(forwardedRef);
+  const rovingContainerProps = rovingContainer.getContainerProps(forwardedRef, other.onFocus, other.onKeyDown);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_useRovingTabIndex.RovingTabIndexContext.Provider, {
     value: rovingContainer,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StepperRoot, {
@@ -97,8 +113,8 @@ function RovingStepper(props) {
       className: className,
       role: "tablist",
       "aria-orientation": orientation,
-      ...rovingContainerProps,
       ...other,
+      ...rovingContainerProps,
       children: children
     })
   });
@@ -200,6 +216,8 @@ process.env.NODE_ENV !== "production" ? Stepper.propTypes /* remove-proptypes */
   /**
    * If set to 'true' and orientation is horizontal,
    * then the step label will be positioned under the icon.
+   * If set to 'true' and orientation is vertical,
+   * it reverses the position of the label and content.
    * @default false
    */
   alternativeLabel: _propTypes.default.bool,

package/node_modules/@mui/material/Stepper/Stepper.mjs

@@ -48,6 +48,14 @@ const StepperRoot = styled('ol', {
       flexDirection: 'row',
       alignItems: 'center'
     }
+  }, {
+    props: {
+      orientation: 'horizontal',
+      alternativeLabel: false
+    },
+    style: {
+      gap: 8
+    }
   }, {
     props: {
       orientation: 'vertical'
@@ -62,6 +70,14 @@ const StepperRoot = styled('ol', {
     style: {
       alignItems: 'flex-start'
     }
+  }, {
+    props: {
+      orientation: 'vertical',
+      alternativeLabel: true
+    },
+    style: {
+      alignItems: 'flex-end'
+    }
   }]
 });
 const defaultConnector = /*#__PURE__*/_jsx(StepConnector, {});
@@ -81,7 +97,7 @@ function RovingStepper(props) {
     orientation,
     isRtl
   });
-  const rovingContainerProps = rovingContainer.getContainerProps(forwardedRef);
+  const rovingContainerProps = rovingContainer.getContainerProps(forwardedRef, other.onFocus, other.onKeyDown);
   return /*#__PURE__*/_jsx(RovingTabIndexContext.Provider, {
     value: rovingContainer,
     children: /*#__PURE__*/_jsx(StepperRoot, {
@@ -90,8 +106,8 @@ function RovingStepper(props) {
       className: className,
       role: "tablist",
       "aria-orientation": orientation,
-      ...rovingContainerProps,
       ...other,
+      ...rovingContainerProps,
       children: children
     })
   });
@@ -193,6 +209,8 @@ process.env.NODE_ENV !== "production" ? Stepper.propTypes /* remove-proptypes */
   /**
    * If set to 'true' and orientation is horizontal,
    * then the step label will be positioned under the icon.
+   * If set to 'true' and orientation is vertical,
+   * it reverses the position of the label and content.
    * @default false
    */
   alternativeLabel: PropTypes.bool,

package/node_modules/@mui/material/Stepper/StepperContext.d.mts

@@ -11,7 +11,7 @@ export interface StepperContextType {
 /**
  * Provides information about the current step in Stepper.
  */
-declare const StepperContext: React.Context<{} | StepperContextType>;
+declare const StepperContext: React.Context<StepperContextType | {}>;
 /**
  * Returns the current StepperContext or an empty object if no StepperContext
  * has been defined in the component tree.

package/node_modules/@mui/material/Stepper/StepperContext.d.ts

@@ -11,7 +11,7 @@ export interface StepperContextType {
 /**
  * Provides information about the current step in Stepper.
  */
-declare const StepperContext: React.Context<{} | StepperContextType>;
+declare const StepperContext: React.Context<StepperContextType | {}>;
 /**
  * Returns the current StepperContext or an empty object if no StepperContext
  * has been defined in the component tree.

package/node_modules/@mui/material/SvgIcon/SvgIcon.js

@@ -16,6 +16,7 @@ var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _svgIconClasses = require("./svgIconClasses");
+var _utils = require("../transitions/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
   const {
@@ -45,7 +46,7 @@ const SvgIconRoot = (0, _zeroStyled.styled)('svg', {
   height: '1em',
   display: 'inline-block',
   flexShrink: 0,
-  transition: theme.transitions?.create?.('fill', {
+  ...(0, _utils.getTransitionStyles)(theme, 'fill', {
     duration: (theme.vars ?? theme).transitions?.duration?.shorter
   }),
   variants: [{

package/node_modules/@mui/material/SvgIcon/SvgIcon.mjs

@@ -9,6 +9,7 @@ import { styled } from "../zero-styled/index.mjs";
 import memoTheme from "../utils/memoTheme.mjs";
 import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
 import { getSvgIconUtilityClass } from "./svgIconClasses.mjs";
+import { getTransitionStyles } from "../transitions/utils.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -38,7 +39,7 @@ const SvgIconRoot = styled('svg', {
   height: '1em',
   display: 'inline-block',
   flexShrink: 0,
-  transition: theme.transitions?.create?.('fill', {
+  ...getTransitionStyles(theme, 'fill', {
     duration: (theme.vars ?? theme).transitions?.duration?.shorter
   }),
   variants: [{

package/node_modules/@mui/material/SwipeableDrawer/SwipeableDrawer.js

@@ -21,6 +21,7 @@ var _useEnhancedEffect = _interopRequireDefault(require("../utils/useEnhancedEff
 var _zeroStyled = require("../zero-styled");
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _utils = require("../transitions/utils");
+var _useReducedMotion = _interopRequireDefault(require("../transitions/useReducedMotion"));
 var _utils2 = require("../utils");
 var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
 var _SwipeArea = _interopRequireDefault(require("./SwipeArea"));
@@ -152,6 +153,7 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
     slotProps = {},
     ...other
   } = props;
+  const reducedMotion = (0, _useReducedMotion.default)(theme.motion.reducedMotion, false);
   const [maybeSwiping, setMaybeSwiping] = React.useState(false);
   const swipeInstance = React.useRef({
     isSwiping: null
@@ -184,13 +186,22 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
     drawerStyle.transform = transform;
     let transition = '';
     if (mode) {
-      transition = theme.transitions.create('all', (0, _utils.getTransitionProps)({
+      const transitionProps = (0, _utils.getTransitionProps)({
         easing: undefined,
         style: undefined,
         timeout: transitionDuration
       }, {
         mode
-      }));
+      });
+      const transitionTiming = reducedMotion.getTransitionTiming({
+        duration: transitionProps.duration,
+        delay: transitionProps.delay
+      });
+      transition = theme.transitions.create('all', {
+        ...transitionProps,
+        duration: transitionTiming.duration,
+        delay: transitionTiming.delay
+      });
     }
     if (changeTransition) {
       drawerStyle.transition = transition;
@@ -202,7 +213,7 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
         backdropStyle.transition = transition;
       }
     }
-  }, [anchor, disableBackdropTransition, hideBackdrop, theme, transitionDuration]);
+  }, [anchor, disableBackdropTransition, hideBackdrop, reducedMotion, theme, transitionDuration]);
   const handleBodyTouchEnd = (0, _useEventCallback.default)(nativeEvent => {
     if (!touchDetected.current) {
       return;

package/node_modules/@mui/material/SwipeableDrawer/SwipeableDrawer.mjs

@@ -13,6 +13,7 @@ import useEnhancedEffect from "../utils/useEnhancedEffect.mjs";
 import { useTheme } from "../zero-styled/index.mjs";
 import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
 import { getTransitionProps } from "../transitions/utils.mjs";
+import useReducedMotion from "../transitions/useReducedMotion.mjs";
 import { mergeSlotProps } from "../utils/index.mjs";
 import useSlot from "../utils/useSlot.mjs";
 import SwipeArea from "./SwipeArea.mjs";
@@ -145,6 +146,7 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
     slotProps = {},
     ...other
   } = props;
+  const reducedMotion = useReducedMotion(theme.motion.reducedMotion, false);
   const [maybeSwiping, setMaybeSwiping] = React.useState(false);
   const swipeInstance = React.useRef({
     isSwiping: null
@@ -177,13 +179,22 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
     drawerStyle.transform = transform;
     let transition = '';
     if (mode) {
-      transition = theme.transitions.create('all', getTransitionProps({
+      const transitionProps = getTransitionProps({
         easing: undefined,
         style: undefined,
         timeout: transitionDuration
       }, {
         mode
-      }));
+      });
+      const transitionTiming = reducedMotion.getTransitionTiming({
+        duration: transitionProps.duration,
+        delay: transitionProps.delay
+      });
+      transition = theme.transitions.create('all', {
+        ...transitionProps,
+        duration: transitionTiming.duration,
+        delay: transitionTiming.delay
+      });
     }
     if (changeTransition) {
       drawerStyle.transition = transition;
@@ -195,7 +206,7 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
         backdropStyle.transition = transition;
       }
     }
-  }, [anchor, disableBackdropTransition, hideBackdrop, theme, transitionDuration]);
+  }, [anchor, disableBackdropTransition, hideBackdrop, reducedMotion, theme, transitionDuration]);
   const handleBodyTouchEnd = useEventCallback(nativeEvent => {
     if (!touchDetected.current) {
       return;

package/node_modules/@mui/material/Switch/Switch.js

@@ -21,6 +21,7 @@ var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _switchClasses = _interopRequireWildcard(require("./switchClasses"));
 var _utils = require("../utils");
 var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
+var _utils2 = require("../transitions/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
   const {
@@ -125,7 +126,7 @@ const SwitchSwitchBase = (0, _zeroStyled.styled)(_SwitchBase.default, {
   zIndex: 1,
   // Render above the focus ripple.
   color: theme.vars ? theme.vars.palette.Switch.defaultColor : `${theme.palette.mode === 'light' ? theme.palette.common.white : theme.palette.grey[300]}`,
-  transition: theme.transitions.create(['left', 'transform'], {
+  ...(0, _utils2.getTransitionStyles)(theme, ['left', 'transform'], {
     duration: theme.transitions.duration.shortest
   }),
   [`&.${_switchClasses.default.checked}`]: {
@@ -188,7 +189,7 @@ const SwitchTrack = (0, _zeroStyled.styled)('span', {
   width: '100%',
   borderRadius: 14 / 2,
   zIndex: -1,
-  transition: theme.transitions.create(['opacity', 'background-color'], {
+  ...(0, _utils2.getTransitionStyles)(theme, ['opacity', 'background-color'], {
     duration: theme.transitions.duration.shortest
   }),
   '@media (forced-colors: active)': {