@sitecore/sc-contenthub-blok 1.0.28 → 2.0.1

package/node_modules/@mui/material/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/node_modules/@mui/material/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/node_modules/@mui/material/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/node_modules/@mui/material/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,

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

@@ -25,7 +25,7 @@ export interface StackOwnProps {
   /**
    * If `true`, the CSS flexbox `gap` is used instead of applying `margin` to children.
    *
-   * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack/#limitations),
+   * While CSS `gap` removes the known limitations,
    * it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag.
    *
    * To enable this flag globally, follow the [theme's default props](https://mui.com/material-ui/customization/theme-components/#default-props) configuration.

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

@@ -25,7 +25,7 @@ export interface StackOwnProps {
   /**
    * If `true`, the CSS flexbox `gap` is used instead of applying `margin` to children.
    *
-   * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack/#limitations),
+   * While CSS `gap` removes the known limitations,
    * it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag.
    *
    * To enable this flag globally, follow the [theme's default props](https://mui.com/material-ui/customization/theme-components/#default-props) configuration.

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

@@ -56,7 +56,7 @@ process.env.NODE_ENV !== "production" ? Stack.propTypes /* remove-proptypes */ =
   /**
    * If `true`, the CSS flexbox `gap` is used instead of applying `margin` to children.
    *
-   * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack/#limitations),
+   * While CSS `gap` removes the known limitations,
    * it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag.
    *
    * To enable this flag globally, follow the [theme's default props](https://mui.com/material-ui/customization/theme-components/#default-props) configuration.

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

@@ -50,7 +50,7 @@ process.env.NODE_ENV !== "production" ? Stack.propTypes /* remove-proptypes */ =
   /**
    * If `true`, the CSS flexbox `gap` is used instead of applying `margin` to children.
    *
-   * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack/#limitations),
+   * While CSS `gap` removes the known limitations,
    * it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag.
    *
    * To enable this flag globally, follow the [theme's default props](https://mui.com/material-ui/customization/theme-components/#default-props) configuration.

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

@@ -42,14 +42,47 @@ const StepRoot = (0, _zeroStyled.styled)('li', {
 })({
   variants: [{
     props: {
-      orientation: 'horizontal'
+      orientation: 'horizontal',
+      alternativeLabel: false,
+      hasConnector: false
+    },
+    style: {
+      paddingLeft: 8
+    }
+  }, {
+    props: {
+      orientation: 'horizontal',
+      alternativeLabel: false,
+      last: true
     },
     style: {
-      paddingLeft: 8,
       paddingRight: 8
     }
   }, {
     props: {
+      orientation: 'horizontal',
+      alternativeLabel: false,
+      hasConnector: true
+    },
+    style: {
+      flex: '1 1 auto',
+      display: 'grid',
+      gridTemplateColumns: '1fr auto',
+      alignItems: 'center',
+      gap: 8
+    }
+  }, {
+    props: {
+      orientation: 'vertical',
+      alternativeLabel: true
+    },
+    style: {
+      display: 'flex',
+      flexDirection: 'column'
+    }
+  }, {
+    props: {
+      orientation: 'horizontal',
       alternativeLabel: true
     },
     style: {
@@ -100,6 +133,7 @@ const Step = /*#__PURE__*/React.forwardRef(function Step(inProps, ref) {
     completed,
     disabled
   }), [index, last, expanded, active, completed, disabled]);
+  const hasConnector = !!connector && index !== 0;
   const ownerState = {
     ...props,
     active,
@@ -108,23 +142,21 @@ const Step = /*#__PURE__*/React.forwardRef(function Step(inProps, ref) {
     completed,
     disabled,
     expanded,
-    component
+    component,
+    hasConnector
   };
   const classes = useUtilityClasses(ownerState);
-  const newChildren = /*#__PURE__*/(0, _jsxRuntime.jsxs)(StepRoot, {
-    as: component,
-    className: (0, _clsx.default)(classes.root, className),
-    ref: ref,
-    ownerState: ownerState,
-    role: isTabList ? 'presentation' : undefined,
-    ...other,
-    children: [connector && alternativeLabel && index !== 0 ? connector : null, children]
-  });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StepContext.default.Provider, {
     value: contextValue,
-    children: connector && !alternativeLabel && index !== 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-      children: [connector, newChildren]
-    }) : newChildren
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(StepRoot, {
+      as: component,
+      className: (0, _clsx.default)(classes.root, className),
+      ref: ref,
+      ownerState: ownerState,
+      role: isTabList ? 'presentation' : undefined,
+      ...other,
+      children: [hasConnector ? connector : null, children]
+    })
   });
 });
 process.env.NODE_ENV !== "production" ? Step.propTypes /* remove-proptypes */ = {

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

@@ -35,14 +35,47 @@ const StepRoot = styled('li', {
 })({
   variants: [{
     props: {
-      orientation: 'horizontal'
+      orientation: 'horizontal',
+      alternativeLabel: false,
+      hasConnector: false
+    },
+    style: {
+      paddingLeft: 8
+    }
+  }, {
+    props: {
+      orientation: 'horizontal',
+      alternativeLabel: false,
+      last: true
     },
     style: {
-      paddingLeft: 8,
       paddingRight: 8
     }
   }, {
     props: {
+      orientation: 'horizontal',
+      alternativeLabel: false,
+      hasConnector: true
+    },
+    style: {
+      flex: '1 1 auto',
+      display: 'grid',
+      gridTemplateColumns: '1fr auto',
+      alignItems: 'center',
+      gap: 8
+    }
+  }, {
+    props: {
+      orientation: 'vertical',
+      alternativeLabel: true
+    },
+    style: {
+      display: 'flex',
+      flexDirection: 'column'
+    }
+  }, {
+    props: {
+      orientation: 'horizontal',
       alternativeLabel: true
     },
     style: {
@@ -93,6 +126,7 @@ const Step = /*#__PURE__*/React.forwardRef(function Step(inProps, ref) {
     completed,
     disabled
   }), [index, last, expanded, active, completed, disabled]);
+  const hasConnector = !!connector && index !== 0;
   const ownerState = {
     ...props,
     active,
@@ -101,23 +135,21 @@ const Step = /*#__PURE__*/React.forwardRef(function Step(inProps, ref) {
     completed,
     disabled,
     expanded,
-    component
+    component,
+    hasConnector
   };
   const classes = useUtilityClasses(ownerState);
-  const newChildren = /*#__PURE__*/_jsxs(StepRoot, {
-    as: component,
-    className: clsx(classes.root, className),
-    ref: ref,
-    ownerState: ownerState,
-    role: isTabList ? 'presentation' : undefined,
-    ...other,
-    children: [connector && alternativeLabel && index !== 0 ? connector : null, children]
-  });
   return /*#__PURE__*/_jsx(StepContext.Provider, {
     value: contextValue,
-    children: connector && !alternativeLabel && index !== 0 ? /*#__PURE__*/_jsxs(React.Fragment, {
-      children: [connector, newChildren]
-    }) : newChildren
+    children: /*#__PURE__*/_jsxs(StepRoot, {
+      as: component,
+      className: clsx(classes.root, className),
+      ref: ref,
+      ownerState: ownerState,
+      role: isTabList ? 'presentation' : undefined,
+      ...other,
+      children: [hasConnector ? connector : null, children]
+    })
   });
 });
 process.env.NODE_ENV !== "production" ? Step.propTypes /* remove-proptypes */ = {

package/node_modules/@mui/material/Step/StepContext.d.mts

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

package/node_modules/@mui/material/Step/StepContext.d.ts

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

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

@@ -12,6 +12,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _zeroStyled = require("../zero-styled");
+var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
 var _StepLabel = _interopRequireDefault(require("../StepLabel"));
@@ -43,13 +44,18 @@ const StepButtonRoot = (0, _zeroStyled.styled)(_ButtonBase.default, {
       [`& .${_stepButtonClasses.default.touchRipple}`]: styles.touchRipple
     }, styles.root, styles[ownerState.orientation]];
   }
-})({
+})((0, _memoTheme.default)(({
+  theme
+}) => ({
   width: '100%',
   padding: '24px 16px',
   margin: '-24px -16px',
   boxSizing: 'content-box',
   [`& .${_stepButtonClasses.default.touchRipple}`]: {
-    color: 'rgba(0, 0, 0, 0.3)'
+    color: 'rgba(0, 0, 0, 0.3)',
+    ...theme.applyStyles('dark', {
+      color: 'rgba(255, 255, 255, 0.3)'
+    })
   },
   variants: [{
     props: {
@@ -61,7 +67,7 @@ const StepButtonRoot = (0, _zeroStyled.styled)(_ButtonBase.default, {
       margin: '-8px'
     }
   }]
-});
+})));
 const RovingStepButton = /*#__PURE__*/React.forwardRef(function RovingStepButton(props, ref) {
   // eslint-disable-next-line react/prop-types
   const {

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

@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import { styled } from "../zero-styled/index.mjs";
+import memoTheme from "../utils/memoTheme.mjs";
 import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
 import ButtonBase from "../ButtonBase/index.mjs";
 import StepLabel from "../StepLabel/index.mjs";
@@ -36,13 +37,18 @@ const StepButtonRoot = styled(ButtonBase, {
       [`& .${stepButtonClasses.touchRipple}`]: styles.touchRipple
     }, styles.root, styles[ownerState.orientation]];
   }
-})({
+})(memoTheme(({
+  theme
+}) => ({
   width: '100%',
   padding: '24px 16px',
   margin: '-24px -16px',
   boxSizing: 'content-box',
   [`& .${stepButtonClasses.touchRipple}`]: {
-    color: 'rgba(0, 0, 0, 0.3)'
+    color: 'rgba(0, 0, 0, 0.3)',
+    ...theme.applyStyles('dark', {
+      color: 'rgba(255, 255, 255, 0.3)'
+    })
   },
   variants: [{
     props: {
@@ -54,7 +60,7 @@ const StepButtonRoot = styled(ButtonBase, {
       margin: '-8px'
     }
   }]
-});
+})));
 const RovingStepButton = /*#__PURE__*/React.forwardRef(function RovingStepButton(props, ref) {
   // eslint-disable-next-line react/prop-types
   const {

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

@@ -53,6 +53,16 @@ const StepConnectorRoot = (0, _zeroStyled.styled)('div', {
     }
   }, {
     props: {
+      orientation: 'vertical',
+      alternativeLabel: true
+    },
+    style: {
+      marginLeft: 'auto',
+      marginRight: 12 // half icon
+    }
+  }, {
+    props: {
+      orientation: 'horizontal',
       alternativeLabel: true
     },
     style: {

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

@@ -46,6 +46,16 @@ const StepConnectorRoot = styled('div', {
     }
   }, {
     props: {
+      orientation: 'vertical',
+      alternativeLabel: true
+    },
+    style: {
+      marginLeft: 'auto',
+      marginRight: 12 // half icon
+    }
+  }, {
+    props: {
+      orientation: 'horizontal',
       alternativeLabel: true
     },
     style: {

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

@@ -3,13 +3,13 @@ import { SxProps } from '@mui/system';
 import { Theme } from "../styles/index.mjs";
 import { InternalStandardProps as StandardProps } from "../internal/index.mjs";
 import { CollapseProps } from "../Collapse/index.mjs";
-import { TransitionProps } from "../transitions/transition.mjs";
+import { TransitionProps } from "../transitions/types.mjs";
 import { StepContentClasses } from "./stepContentClasses.mjs";
 import { CreateSlotsAndSlotProps, SlotComponentProps } from "../utils/types.mjs";
 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 & {