@sitecore/sc-contenthub-blok 0.0.37 → 0.0.38

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

@@ -84,8 +84,8 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['root', `color${capitalize(color)}`, variant],
     dashed: ['dashed', `dashedColor${capitalize(color)}`],
-    bar1: ['bar', `barColor${capitalize(color)}`, (variant === 'indeterminate' || variant === 'query') && 'bar1Indeterminate', variant === 'determinate' && 'bar1Determinate', variant === 'buffer' && 'bar1Buffer'],
-    bar2: ['bar', variant !== 'buffer' && `barColor${capitalize(color)}`, variant === 'buffer' && `color${capitalize(color)}`, (variant === 'indeterminate' || variant === 'query') && 'bar2Indeterminate', variant === 'buffer' && 'bar2Buffer']
+    bar1: ['bar', 'bar1', `barColor${capitalize(color)}`, (variant === 'indeterminate' || variant === 'query') && 'bar1Indeterminate', variant === 'determinate' && 'bar1Determinate', variant === 'buffer' && 'bar1Buffer'],
+    bar2: ['bar', 'bar2', variant !== 'buffer' && `barColor${capitalize(color)}`, variant === 'buffer' && `color${capitalize(color)}`, (variant === 'indeterminate' || variant === 'query') && 'bar2Indeterminate', variant === 'buffer' && 'bar2Buffer']
   };
   return composeClasses(slots, getLinearProgressUtilityClass, classes);
 };
@@ -203,7 +203,7 @@ const LinearProgressBar1 = styled('span', {
     const {
       ownerState
     } = props;
-    return [styles.bar, styles[`barColor${capitalize(ownerState.color)}`], (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && styles.bar1Indeterminate, ownerState.variant === 'determinate' && styles.bar1Determinate, ownerState.variant === 'buffer' && styles.bar1Buffer];
+    return [styles.bar, styles.bar1, styles[`barColor${capitalize(ownerState.color)}`], (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && styles.bar1Indeterminate, ownerState.variant === 'determinate' && styles.bar1Determinate, ownerState.variant === 'buffer' && styles.bar1Buffer];
   }
 })(memoTheme(({
   theme
@@ -267,7 +267,7 @@ const LinearProgressBar2 = styled('span', {
     const {
       ownerState
     } = props;
-    return [styles.bar, styles[`barColor${capitalize(ownerState.color)}`], (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && styles.bar2Indeterminate, ownerState.variant === 'buffer' && styles.bar2Buffer];
+    return [styles.bar, styles.bar2, styles[`barColor${capitalize(ownerState.color)}`], (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && styles.bar2Indeterminate, ownerState.variant === 'buffer' && styles.bar2Buffer];
   }
 })(memoTheme(({
   theme

package/node_modules/@mui/material/LinearProgress/linearProgressClasses.d.ts

@@ -15,25 +15,47 @@ export interface LinearProgressClasses {
     query: string;
     /** Styles applied to the additional bar element if `variant="buffer"`. */
     dashed: string;
-    /** Styles applied to the additional bar element if `variant="buffer"` and `color="primary"`. */
+    /** Styles applied to the additional bar element if `variant="buffer"` and `color="primary"`.
+     * @deprecated Combine the [.MuiLinearProgress-dashed](/material-ui/api/linear-progress/#linear-progress-classes-dashed) and [.MuiLinearProgress-colorPrimary](/material-ui/api/linear-progress/#linear-progress-classes-colorPrimary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     */
     dashedColorPrimary: string;
-    /** Styles applied to the additional bar element if `variant="buffer"` and `color="secondary"`. */
+    /** Styles applied to the additional bar element if `variant="buffer"` and `color="secondary"`.
+     * @deprecated Combine the [.MuiLinearProgress-dashed](/material-ui/api/linear-progress/#linear-progress-classes-dashed) and [.MuiLinearProgress-colorSecondary](/material-ui/api/linear-progress/#linear-progress-classes-colorSecondary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     */
     dashedColorSecondary: string;
     /** Styles applied to the layered bar1 and bar2 elements. */
     bar: string;
-    /** Styles applied to the bar elements if `color="primary"`; bar2 if `variant` not "buffer". */
+    /** Styles applied to the bar1 element. */
+    bar1: string;
+    /** Styles applied to the bar2 element. */
+    bar2: string;
+    /** Styles applied to the bar elements if `color="primary"`; bar2 if `variant` not "buffer".
+     * @deprecated Use the [.MuiLinearProgress-bar](/material-ui/api/linear-progress/#linear-progress-classes-bar) and [.MuiLinearProgress-colorPrimary](/material-ui/api/linear-progress/#linear-progress-classes-colorPrimary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     */
     barColorPrimary: string;
-    /** Styles applied to the bar elements if `color="secondary"`; bar2 if `variant` not "buffer". */
+    /** Styles applied to the bar elements if `color="secondary"`; bar2 if `variant` not "buffer".
+     * @deprecated Use the [.MuiLinearProgress-bar](/material-ui/api/linear-progress/#linear-progress-classes-bar) and [.MuiLinearProgress-colorSecondary](/material-ui/api/linear-progress/#linear-progress-classes-colorSecondary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     */
     barColorSecondary: string;
-    /** Styles applied to the bar1 element if `variant="indeterminate or query"`. */
+    /** Styles applied to the bar1 element if `variant="indeterminate or query"`.
+     * @deprecated Use the [.MuiLinearProgress-bar1](/material-ui/api/linear-progress/#linear-progress-classes-bar1) and [.MuiLinearProgress-indeterminate](/material-ui/api/linear-progress/#linear-progress-classes-indeterminate) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     */
     bar1Indeterminate: string;
-    /** Styles applied to the bar1 element if `variant="determinate"`. */
+    /** Styles applied to the bar1 element if `variant="determinate"`.
+     * @deprecated Use the [.MuiLinearProgress-bar1](/material-ui/api/linear-progress/#linear-progress-classes-bar1) and [.MuiLinearProgress-determinate](/material-ui/api/linear-progress/#linear-progress-classes-determinate) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     */
     bar1Determinate: string;
-    /** Styles applied to the bar1 element if `variant="buffer"`. */
+    /** Styles applied to the bar1 element if `variant="buffer"`.
+     * @deprecated Use the [.MuiLinearProgress-bar1](/material-ui/api/linear-progress/#linear-progress-classes-bar1) and [.MuiLinearProgress-buffer](/material-ui/api/linear-progress/#linear-progress-classes-buffer) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     */
     bar1Buffer: string;
-    /** Styles applied to the bar2 element if `variant="indeterminate or query"`. */
+    /** Styles applied to the bar2 element if `variant="indeterminate or query"`.
+     * @deprecated Use the [.MuiLinearProgress-bar2](/material-ui/api/linear-progress/#linear-progress-classes-bar2) and [.MuiLinearProgress-indeterminate](/material-ui/api/linear-progress/#linear-progress-classes-indeterminate) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     */
     bar2Indeterminate: string;
-    /** Styles applied to the bar2 element if `variant="buffer"`. */
+    /** Styles applied to the bar2 element if `variant="buffer"`.
+     * @deprecated Use the [.MuiLinearProgress-bar2](/material-ui/api/linear-progress/#linear-progress-classes-bar2) and [.MuiLinearProgress-buffer](/material-ui/api/linear-progress/#linear-progress-classes-buffer) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     */
     bar2Buffer: string;
 }
 export type LinearProgressClassKey = keyof LinearProgressClasses;

package/node_modules/@mui/material/LinearProgress/linearProgressClasses.js

@@ -3,5 +3,5 @@ import generateUtilityClass from '@mui/utils/generateUtilityClass';
 export function getLinearProgressUtilityClass(slot) {
   return generateUtilityClass('MuiLinearProgress', slot);
 }
-const linearProgressClasses = generateUtilityClasses('MuiLinearProgress', ['root', 'colorPrimary', 'colorSecondary', 'determinate', 'indeterminate', 'buffer', 'query', 'dashed', 'dashedColorPrimary', 'dashedColorSecondary', 'bar', 'barColorPrimary', 'barColorSecondary', 'bar1Indeterminate', 'bar1Determinate', 'bar1Buffer', 'bar2Indeterminate', 'bar2Buffer']);
+const linearProgressClasses = generateUtilityClasses('MuiLinearProgress', ['root', 'colorPrimary', 'colorSecondary', 'determinate', 'indeterminate', 'buffer', 'query', 'dashed', 'dashedColorPrimary', 'dashedColorSecondary', 'bar', 'bar1', 'bar2', 'barColorPrimary', 'barColorSecondary', 'bar1Indeterminate', 'bar1Determinate', 'bar1Buffer', 'bar2Indeterminate', 'bar2Buffer']);
 export default linearProgressClasses;

package/node_modules/@mui/material/Link/getTextDecoration.js

@@ -5,8 +5,9 @@ const getTextDecoration = ({
   ownerState
 }) => {
   const transformedColor = ownerState.color;
-  const color = getPath(theme, `palette.${transformedColor}`, false) || ownerState.color;
-  const channelColor = getPath(theme, `palette.${transformedColor}Channel`);
+  // check the `main` color first for a custom palette, then fallback to the color itself
+  const color = getPath(theme, `palette.${transformedColor}.main`, false) || getPath(theme, `palette.${transformedColor}`, false) || ownerState.color;
+  const channelColor = getPath(theme, `palette.${transformedColor}.mainChannel`) || getPath(theme, `palette.${transformedColor}Channel`);
   if ('vars' in theme && channelColor) {
     return `rgba(${channelColor} / 0.4)`;
   }

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

@@ -3,11 +3,44 @@ import { SxProps } from '@mui/system';
 import { InternalStandardProps as StandardProps, Theme } from '..';
 import { TypographyProps } from '../Typography';
 import { ListItemTextClasses } from './listItemTextClasses';
+import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
+
+export interface ListItemTextSlots {
+  /**
+   * The component that renders the primary slot.
+   * @default Typography
+   */
+  primary?: React.ElementType;
+  /**
+   * The component that renders the secondary slot.
+   * @default Typography
+   */
+  secondary?: React.ElementType;
+}
+
+export type ListItemTextSlotsAndSlotProps = CreateSlotsAndSlotProps<
+  ListItemTextSlots,
+  {
+    /**
+     * Props forwared to the primary slot (as long as disableTypography is not `true`)
+     * By default, the available props are based on the [Typography](https://mui.com/material-ui/api/typography/#props) component
+     */
+    primary: SlotProps<React.ElementType<TypographyProps>, {}, ListItemTextOwnerState>;
+    /**
+     * Props forwarded to the secondary slot (as long as disableTypography is not `true`)
+     * By default, the available props are based on the [Typography](https://mui.com/material-ui/api/typography/#props) component
+     */
+    secondary: SlotProps<React.ElementType<TypographyProps>, {}, ListItemTextOwnerState>;
+  }
+>;
+
+export interface ListItemTextOwnerState extends ListItemTextProps {}
 
 export interface ListItemTextProps<
   PrimaryTypographyComponent extends React.ElementType = 'span',
   SecondaryTypographyComponent extends React.ElementType = 'p',
-> extends StandardProps<React.HTMLAttributes<HTMLDivElement>> {
+> extends StandardProps<React.HTMLAttributes<HTMLDivElement>>,
+    ListItemTextSlotsAndSlotProps {
   /**
    * Alias for the `primary` prop.
    */
@@ -37,6 +70,7 @@ export interface ListItemTextProps<
   /**
    * These props will be forwarded to the primary typography component
    * (as long as disableTypography is not `true`).
+   * @deprecated Use `slotProps.primary` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   primaryTypographyProps?: TypographyProps<
     PrimaryTypographyComponent,
@@ -49,6 +83,7 @@ export interface ListItemTextProps<
   /**
    * These props will be forwarded to the secondary typography component
    * (as long as disableTypography is not `true`).
+   * @deprecated Use `slotProps.secondary` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   secondaryTypographyProps?: TypographyProps<
     SecondaryTypographyComponent,

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

@@ -9,6 +9,7 @@ import ListContext from "../List/ListContext.js";
 import { styled } from "../zero-styled/index.js";
 import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import listItemTextClasses, { getListItemTextUtilityClass } from "./listItemTextClasses.js";
+import useSlot from "../utils/useSlot.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -80,6 +81,8 @@ const ListItemText = /*#__PURE__*/React.forwardRef(function ListItemText(inProps
     primaryTypographyProps,
     secondary: secondaryProp,
     secondaryTypographyProps,
+    slots = {},
+    slotProps = {},
     ...other
   } = props;
   const {
@@ -96,21 +99,39 @@ const ListItemText = /*#__PURE__*/React.forwardRef(function ListItemText(inProps
     dense
   };
   const classes = useUtilityClasses(ownerState);
+  const externalForwardedProps = {
+    slots,
+    slotProps: {
+      primary: primaryTypographyProps,
+      secondary: secondaryTypographyProps,
+      ...slotProps
+    }
+  };
+  const [PrimarySlot, primarySlotProps] = useSlot('primary', {
+    className: classes.primary,
+    elementType: Typography,
+    externalForwardedProps,
+    ownerState
+  });
+  const [SecondarySlot, secondarySlotProps] = useSlot('secondary', {
+    className: classes.secondary,
+    elementType: Typography,
+    externalForwardedProps,
+    ownerState
+  });
   if (primary != null && primary.type !== Typography && !disableTypography) {
-    primary = /*#__PURE__*/_jsx(Typography, {
+    primary = /*#__PURE__*/_jsx(PrimarySlot, {
       variant: dense ? 'body2' : 'body1',
-      className: classes.primary,
-      component: primaryTypographyProps?.variant ? undefined : 'span',
-      ...primaryTypographyProps,
+      component: primarySlotProps?.variant ? undefined : 'span',
+      ...primarySlotProps,
       children: primary
     });
   }
   if (secondary != null && secondary.type !== Typography && !disableTypography) {
-    secondary = /*#__PURE__*/_jsx(Typography, {
+    secondary = /*#__PURE__*/_jsx(SecondarySlot, {
       variant: "body2",
-      className: classes.secondary,
       color: "textSecondary",
-      ...secondaryTypographyProps,
+      ...secondarySlotProps,
       children: secondary
     });
   }
@@ -160,6 +181,7 @@ process.env.NODE_ENV !== "production" ? ListItemText.propTypes /* remove-proptyp
   /**
    * These props will be forwarded to the primary typography component
    * (as long as disableTypography is not `true`).
+   * @deprecated Use `slotProps.primary` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   primaryTypographyProps: PropTypes.object,
   /**
@@ -169,8 +191,25 @@ process.env.NODE_ENV !== "production" ? ListItemText.propTypes /* remove-proptyp
   /**
    * These props will be forwarded to the secondary typography component
    * (as long as disableTypography is not `true`).
+   * @deprecated Use `slotProps.secondary` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   secondaryTypographyProps: PropTypes.object,
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    primary: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    secondary: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    primary: PropTypes.elementType,
+    secondary: PropTypes.elementType
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

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

@@ -406,7 +406,5 @@ process.env.NODE_ENV !== "production" ? OutlinedInput.propTypes /* remove-propty
    */
   value: PropTypes.any
 } : void 0;
-if (OutlinedInput) {
-  OutlinedInput.muiName = 'Input';
-}
+OutlinedInput.muiName = 'Input';
 export default OutlinedInput;

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

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import Grid from '@mui/material-pigment-css/Grid';
 import composeClasses from '@mui/utils/composeClasses';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
-import { generateDirectionClasses, generateSizeClassNames, generateSpacingClassNames } from '@mui/system/Grid/gridGenerator';
+import { unstable_generateDirectionClasses as generateDirectionClasses, unstable_generateSizeClassNames as generateSizeClassNames, unstable_generateSpacingClassNames as generateSpacingClassNames } from '@mui/system/Grid';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {

package/node_modules/@mui/material/RadioGroup/RadioGroupContext.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 /**
  * @ignore - internal component.

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

@@ -4,6 +4,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import deepmerge from '@mui/utils/deepmerge';
+import composeClasses from '@mui/utils/composeClasses';
 import getReactElementRef from '@mui/utils/getReactElementRef';
 import SelectInput from "./SelectInput.js";
 import formControlState from "../FormControl/formControlState.js";
@@ -17,12 +18,20 @@ import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import useForkRef from "../utils/useForkRef.js";
 import { styled } from "../zero-styled/index.js";
 import rootShouldForwardProp from "../styles/rootShouldForwardProp.js";
+import { getSelectUtilityClasses } from "./selectClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
     classes
   } = ownerState;
-  return classes;
+  const slots = {
+    root: ['root']
+  };
+  const composedClasses = composeClasses(slots, getSelectUtilityClasses, classes);
+  return {
+    ...classes,
+    ...composedClasses
+  };
 };
 const styledRootConfig = {
   name: 'MuiSelect',

package/node_modules/@mui/material/Select/SelectInput.js

@@ -133,6 +133,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     open: openProp,
     readOnly,
     renderValue,
+    required,
     SelectDisplayProps = {},
     tabIndex: tabIndexProp,
     // catching `type` from Input which makes no sense for SelectInput
@@ -442,13 +443,15 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
       ref: handleDisplayRef,
       tabIndex: tabIndex,
       role: "combobox",
-      "aria-controls": listboxId,
+      "aria-controls": open ? listboxId : undefined,
       "aria-disabled": disabled ? 'true' : undefined,
       "aria-expanded": open ? 'true' : 'false',
       "aria-haspopup": "listbox",
       "aria-label": ariaLabel,
       "aria-labelledby": [labelId, buttonId].filter(Boolean).join(' ') || undefined,
       "aria-describedby": ariaDescribedby,
+      "aria-required": required ? 'true' : undefined,
+      "aria-invalid": error ? 'true' : undefined,
       onKeyDown: handleKeyDown,
       onMouseDown: disabled || readOnly ? null : handleMouseDown,
       onBlur: handleBlur,
@@ -476,6 +479,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
       disabled: disabled,
       className: classes.nativeInput,
       autoFocus: autoFocus,
+      required: required,
       ...other,
       ownerState: ownerState
     }), /*#__PURE__*/_jsx(SelectIcon, {
@@ -641,6 +645,10 @@ process.env.NODE_ENV !== "production" ? SelectInput.propTypes = {
    * @returns {ReactNode}
    */
   renderValue: PropTypes.func,
+  /**
+   * If `true`, the component is required.
+   */
+  required: PropTypes.bool,
   /**
    * Props applied to the clickable div element.
    */

package/node_modules/@mui/material/Select/selectClasses.d.ts

@@ -19,11 +19,17 @@ export interface SelectClasses {
     icon: string;
     /** Styles applied to the icon component if the popup is open. */
     iconOpen: string;
-    /** Styles applied to the icon component if `variant="filled"`. */
+    /** Styles applied to the icon component if `variant="filled"`.
+     * @deprecated Combine the [.MuiSelect-icon](/material-ui/api/select/#select-classes-icon) and [.MuiSelect-filled](/material-ui/api/select/#select-classes-filled) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+     */
     iconFilled: string;
-    /** Styles applied to the icon component if `variant="outlined"`. */
+    /** Styles applied to the icon component if `variant="outlined"`.
+     * @deprecated Combine the [.MuiSelect-icon](/material-ui/api/select/#select-classes-icon) and [.MuiSelect-outlined](/material-ui/api/select/#select-classes-outlined) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+     */
     iconOutlined: string;
-    /** Styles applied to the icon component if `variant="standard"`. */
+    /** Styles applied to the icon component if `variant="standard"`.
+     * @deprecated Combine the [.MuiSelect-icon](/material-ui/api/select/#select-classes-icon) and [.MuiSelect-standard](/material-ui/api/select/#select-classes-standard) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+     */
     iconStandard: string;
     /** Styles applied to the underlying native input component. */
     nativeInput: string;

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

@@ -217,7 +217,10 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
     in: inProp,
     timeout: timeout,
     ...other,
-    children: (state, childProps) => {
+    children: (state, {
+      ownerState,
+      ...restChildProps
+    }) => {
       return /*#__PURE__*/React.cloneElement(children, {
         ref: handleRef,
         style: {
@@ -225,7 +228,7 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
           ...style,
           ...children.props.style
         },
-        ...childProps
+        ...restChildProps
       });
     }
   });

package/node_modules/@mui/material/Slider/useSlider.js

@@ -5,6 +5,9 @@ import { unstable_ownerDocument as ownerDocument, unstable_useControlled as useC
 import extractEventHandlers from '@mui/utils/extractEventHandlers';
 import areArraysEqual from "../utils/areArraysEqual.js";
 const INTENTIONAL_DRAG_COUNT_THRESHOLD = 2;
+function getNewValue(currentValue, step, direction, min, max) {
+  return direction === 1 ? Math.min(currentValue + step, max) : Math.max(currentValue - step, min);
+}
 function asc(a, b) {
   return a - b;
 }
@@ -185,6 +188,8 @@ export function useSlider(parameters) {
   const [open, setOpen] = React.useState(-1);
   const [dragging, setDragging] = React.useState(false);
   const moveCount = React.useRef(0);
+  // lastChangedValue is updated whenever onChange is triggered.
+  const lastChangedValue = React.useRef(null);
   const [valueDerived, setValueState] = useControlled({
     controlled: valueProp,
     default: defaultValue ?? min,
@@ -205,6 +210,7 @@ export function useSlider(parameters) {
         name
       }
     });
+    lastChangedValue.current = value;
     onChange(clonedEvent, value, thumbIndex);
   });
   const range = Array.isArray(valueDerived);
@@ -276,24 +282,69 @@ export function useSlider(parameters) {
       handleChange(event, newValue, index);
     }
     if (onChangeCommitted) {
-      onChangeCommitted(event, newValue);
+      onChangeCommitted(event, lastChangedValue.current ?? newValue);
     }
   };
   const createHandleHiddenInputKeyDown = otherHandlers => event => {
-    // The Shift + Up/Down keyboard shortcuts for moving the slider makes sense to be supported
-    // only if the step is defined. If the step is null, this means tha the marks are used for specifying the valid values.
-    if (step !== null) {
+    if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'PageUp', 'PageDown', 'Home', 'End'].includes(event.key)) {
+      event.preventDefault();
       const index = Number(event.currentTarget.getAttribute('data-index'));
       const value = values[index];
       let newValue = null;
-      if ((event.key === 'ArrowLeft' || event.key === 'ArrowDown') && event.shiftKey || event.key === 'PageDown') {
-        newValue = Math.max(value - shiftStep, min);
-      } else if ((event.key === 'ArrowRight' || event.key === 'ArrowUp') && event.shiftKey || event.key === 'PageUp') {
-        newValue = Math.min(value + shiftStep, max);
+      // Keys actions that change the value by more than the most granular `step`
+      // value are only applied if the step not `null`.
+      // When step is `null`, the `marks` prop is used instead to define valid values.
+      if (step != null) {
+        const stepSize = event.shiftKey ? shiftStep : step;
+        switch (event.key) {
+          case 'ArrowUp':
+            newValue = getNewValue(value, stepSize, 1, min, max);
+            break;
+          case 'ArrowRight':
+            newValue = getNewValue(value, stepSize, isRtl ? -1 : 1, min, max);
+            break;
+          case 'ArrowDown':
+            newValue = getNewValue(value, stepSize, -1, min, max);
+            break;
+          case 'ArrowLeft':
+            newValue = getNewValue(value, stepSize, isRtl ? 1 : -1, min, max);
+            break;
+          case 'PageUp':
+            newValue = getNewValue(value, shiftStep, 1, min, max);
+            break;
+          case 'PageDown':
+            newValue = getNewValue(value, shiftStep, -1, min, max);
+            break;
+          case 'Home':
+            newValue = min;
+            break;
+          case 'End':
+            newValue = max;
+            break;
+          default:
+            break;
+        }
+      } else if (marks) {
+        const maxMarksValue = marksValues[marksValues.length - 1];
+        const currentMarkIndex = marksValues.indexOf(value);
+        const decrementKeys = [isRtl ? 'ArrowRight' : 'ArrowLeft', 'ArrowDown', 'PageDown', 'Home'];
+        const incrementKeys = [isRtl ? 'ArrowLeft' : 'ArrowRight', 'ArrowUp', 'PageUp', 'End'];
+        if (decrementKeys.includes(event.key)) {
+          if (currentMarkIndex === 0) {
+            newValue = marksValues[0];
+          } else {
+            newValue = marksValues[currentMarkIndex - 1];
+          }
+        } else if (incrementKeys.includes(event.key)) {
+          if (currentMarkIndex === marksValues.length - 1) {
+            newValue = maxMarksValue;
+          } else {
+            newValue = marksValues[currentMarkIndex + 1];
+          }
+        }
       }
-      if (newValue !== null) {
+      if (newValue != null) {
         changeValue(event, newValue);
-        event.preventDefault();
       }
     }
     otherHandlers?.onKeyDown?.(event);
@@ -315,6 +366,7 @@ export function useSlider(parameters) {
   }
   const createHandleHiddenInputChange = otherHandlers => event => {
     otherHandlers.onChange?.(event);
+    // this handles value change by Pointer or Touch events
     // @ts-ignore
     changeValue(event, event.target.valueAsNumber);
   };
@@ -435,7 +487,7 @@ export function useSlider(parameters) {
       setOpen(-1);
     }
     if (onChangeCommitted) {
-      onChangeCommitted(nativeEvent, newValue);
+      onChangeCommitted(nativeEvent, lastChangedValue.current ?? newValue);
     }
     touchId.current = undefined;
 
@@ -591,6 +643,10 @@ export function useSlider(parameters) {
       pointerEvents: active !== -1 && active !== index ? 'none' : undefined
     };
   };
+  let cssWritingMode;
+  if (orientation === 'vertical') {
+    cssWritingMode = isRtl ? 'vertical-rl' : 'vertical-lr';
+  }
   const getHiddenInputProps = (externalProps = {}) => {
     const externalHandlers = extractEventHandlers(externalProps);
     const ownEventHandlers = {
@@ -622,7 +678,8 @@ export function useSlider(parameters) {
         direction: isRtl ? 'rtl' : 'ltr',
         // So that VoiceOver's focus indicator matches the thumb's dimensions
         width: '100%',
-        height: '100%'
+        height: '100%',
+        writingMode: cssWritingMode
       }
     };
   };

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

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 /**
  * Provides information about the current step in Stepper.

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

@@ -1,11 +1,38 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
-import { InternalStandardProps as StandardProps } from '..';
+import { CollapseProps, InternalStandardProps as StandardProps } from '..';
 import { Theme } from '../styles';
 import { TransitionProps } from '../transitions/transition';
 import { StepContentClasses } from './stepContentClasses';
+import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
 
-export interface StepContentProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>> {
+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.
+   * @default Collapse
+   */
+  transition?: React.JSXElementConstructor<
+    TransitionProps & { children?: React.ReactElement<unknown, any> }
+  >;
+}
+
+export type StepContentSlotsAndSlotProps = CreateSlotsAndSlotProps<
+  StepContentSlots,
+  {
+    /**
+     * Props forwared to the transition slot.
+     * By default, the available props are based on the [Collapse](https://mui.com/material-ui/api/collapse/#props) component
+     */
+    transition: SlotProps<React.ElementType<CollapseProps>, {}, StepContentOwnerState>;
+  }
+>;
+
+export interface StepContentOwnerState extends StepContentProps {}
+
+export interface StepContentProps
+  extends StandardProps<React.HTMLAttributes<HTMLDivElement>>,
+    StepContentSlotsAndSlotProps {
   /**
    * The content of the component.
    */
@@ -22,6 +49,7 @@ export interface StepContentProps extends StandardProps<React.HTMLAttributes<HTM
    * The component used for the transition.
    * [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
    * @default Collapse
+   * @deprecated Use `slots.transition` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    */
   TransitionComponent?: React.JSXElementConstructor<
     TransitionProps & { children: React.ReactElement<unknown, any> }
@@ -37,6 +65,7 @@ export interface StepContentProps extends StandardProps<React.HTMLAttributes<HTM
   /**
    * Props applied to the transition element.
    * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component.
+   * @deprecated Use `slotProps.transition` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   TransitionProps?: TransitionProps;
 }