@mui/material 5.10.3 → 5.10.4

package/modern/Step/Step.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["active", "children", "className", "completed", "disabled", "expanded", "index", "last"];
+const _excluded = ["active", "children", "className", "component", "completed", "disabled", "expanded", "index", "last"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -55,6 +55,7 @@ const Step = /*#__PURE__*/React.forwardRef(function Step(inProps, ref) {
     active: activeProp,
     children,
     className,
+    component = 'div',
     completed: completedProp,
     disabled: disabledProp,
     expanded = false,
@@ -96,12 +97,14 @@ const Step = /*#__PURE__*/React.forwardRef(function Step(inProps, ref) {
     alternativeLabel,
     completed,
     disabled,
-    expanded
+    expanded,
+    component
   });
 
   const classes = useUtilityClasses(ownerState);
 
   const newChildren = /*#__PURE__*/_jsxs(StepRoot, _extends({
+    as: component,
     className: clsx(classes.root, className),
     ref: ref,
     ownerState: ownerState
@@ -149,6 +152,12 @@ process.env.NODE_ENV !== "production" ? Step.propTypes
    */
   completed: PropTypes.bool,
 
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: PropTypes.elementType,
+
   /**
    * If `true`, the step is disabled, will also disable the button if
    * `StepButton` is a child of `Step`. Is passed to child components.

package/modern/Stepper/Stepper.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["activeStep", "alternativeLabel", "children", "className", "connector", "nonLinear", "orientation"];
+const _excluded = ["activeStep", "alternativeLabel", "children", "className", "component", "connector", "nonLinear", "orientation"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -60,6 +60,7 @@ const Stepper = /*#__PURE__*/React.forwardRef(function Stepper(inProps, ref) {
     alternativeLabel = false,
     children,
     className,
+    component = 'div',
     connector = defaultConnector,
     nonLinear = false,
     orientation = 'horizontal'
@@ -68,7 +69,8 @@ const Stepper = /*#__PURE__*/React.forwardRef(function Stepper(inProps, ref) {
 
   const ownerState = _extends({}, props, {
     alternativeLabel,
-    orientation
+    orientation,
+    component
   });
 
   const classes = useUtilityClasses(ownerState);
@@ -89,6 +91,7 @@ const Stepper = /*#__PURE__*/React.forwardRef(function Stepper(inProps, ref) {
   return /*#__PURE__*/_jsx(StepperContext.Provider, {
     value: contextValue,
     children: /*#__PURE__*/_jsx(StepperRoot, _extends({
+      as: component,
       ownerState: ownerState,
       className: clsx(classes.root, className),
       ref: ref
@@ -134,6 +137,12 @@ process.env.NODE_ENV !== "production" ? Stepper.propTypes
    */
   className: PropTypes.string,
 
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: PropTypes.elementType,
+
   /**
    * An element to be placed between each step.
    * @default <StepConnector />

package/modern/ToggleButton/ToggleButton.js

@@ -247,6 +247,8 @@ process.env.NODE_ENV !== "production" ? ToggleButton.propTypes
    * The value to associate with the button when selected in a
    * ToggleButtonGroup.
    */
-  value: PropTypes.any.isRequired
+  value: PropTypes
+  /* @typescript-to-proptypes-ignore */
+  .any.isRequired
 } : void 0;
 export default ToggleButton;

package/modern/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.10.3
+/** @license MUI v5.10.4
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "5.10.3",
+  "version": "5.10.4",
   "private": false,
   "author": "MUI Team",
   "description": "React components that implement Google's Material Design.",
@@ -46,9 +46,9 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.9",
-    "@mui/base": "5.0.0-alpha.95",
-    "@mui/core-downloads-tracker": "^5.10.3",
-    "@mui/system": "^5.10.3",
+    "@mui/base": "5.0.0-alpha.96",
+    "@mui/core-downloads-tracker": "^5.10.4",
+    "@mui/system": "^5.10.4",
     "@mui/types": "^7.2.0",
     "@mui/utils": "^5.10.3",
     "@types/react-transition-group": "^4.4.5",

package/styles/CssVarsProvider.d.ts

@@ -1,14 +1,14 @@
-/// <reference types="react" />
-import { SupportedColorScheme } from './experimental_extendTheme';
-declare const shouldSkipGeneratingVar: (keys: string[]) => boolean;
-declare const CssVarsProvider: (props: import("react").PropsWithChildren<Partial<import("@mui/system").CssVarsProviderConfig<SupportedColorScheme>> & {
-    theme?: {
-        cssVarPrefix?: string | undefined;
-        colorSchemes: Record<SupportedColorScheme, Record<string, any>>;
-    } | undefined;
-    documentNode?: Document | null | undefined;
-    colorSchemeNode?: Document | HTMLElement | null | undefined;
-    colorSchemeSelector?: string | undefined;
-    storageWindow?: Window | null | undefined;
-}>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>, useColorScheme: () => import("@mui/system").ColorSchemeContextValue<SupportedColorScheme>, getInitColorSchemeScript: typeof import("@mui/system").getInitColorSchemeScript;
-export { useColorScheme, getInitColorSchemeScript, shouldSkipGeneratingVar, CssVarsProvider as Experimental_CssVarsProvider, };
+/// <reference types="react" />
+import { SupportedColorScheme } from './experimental_extendTheme';
+declare const shouldSkipGeneratingVar: (keys: string[]) => boolean;
+declare const CssVarsProvider: (props: import("react").PropsWithChildren<Partial<import("@mui/system").CssVarsProviderConfig<SupportedColorScheme>> & {
+    theme?: {
+        cssVarPrefix?: string | undefined;
+        colorSchemes: Record<SupportedColorScheme, Record<string, any>>;
+    } | undefined;
+    documentNode?: Document | null | undefined;
+    colorSchemeNode?: Document | HTMLElement | null | undefined;
+    colorSchemeSelector?: string | undefined;
+    storageWindow?: Window | null | undefined;
+}>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>, useColorScheme: () => import("@mui/system").ColorSchemeContextValue<SupportedColorScheme>, getInitColorSchemeScript: typeof import("@mui/system").getInitColorSchemeScript;
+export { useColorScheme, getInitColorSchemeScript, shouldSkipGeneratingVar, CssVarsProvider as Experimental_CssVarsProvider, };

package/transitions/index.d.ts

@@ -1 +1 @@
-export * from './transition';
+export * from './transition';

package/transitions/transition.d.ts

@@ -1,13 +1,13 @@
-import { TransitionProps as _TransitionProps, TransitionActions } from 'react-transition-group/Transition';
-import * as React from 'react';
-export declare type TransitionHandlerKeys = 'onEnter' | 'onEntering' | 'onEntered' | 'onExit' | 'onExiting' | 'onExited';
-export declare type TransitionHandlerProps = Pick<_TransitionProps, TransitionHandlerKeys>;
-export interface EasingProps {
-    easing: string | {
-        enter?: string;
-        exit?: string;
-    };
-}
-export declare type TransitionKeys = 'in' | 'mountOnEnter' | 'unmountOnExit' | 'timeout' | 'easing' | 'addEndListener' | TransitionHandlerKeys;
-export interface TransitionProps extends TransitionActions, Partial<Pick<_TransitionProps & EasingProps, TransitionKeys>>, React.HTMLAttributes<HTMLElement> {
-}
+import { TransitionProps as _TransitionProps, TransitionActions } from 'react-transition-group/Transition';
+import * as React from 'react';
+export declare type TransitionHandlerKeys = 'onEnter' | 'onEntering' | 'onEntered' | 'onExit' | 'onExiting' | 'onExited';
+export declare type TransitionHandlerProps = Pick<_TransitionProps, TransitionHandlerKeys>;
+export interface EasingProps {
+    easing: string | {
+        enter?: string;
+        exit?: string;
+    };
+}
+export declare type TransitionKeys = 'in' | 'mountOnEnter' | 'unmountOnExit' | 'timeout' | 'easing' | 'addEndListener' | TransitionHandlerKeys;
+export interface TransitionProps extends TransitionActions, Partial<Pick<_TransitionProps & EasingProps, TransitionKeys>>, React.HTMLAttributes<HTMLElement> {
+}

package/transitions/utils.d.ts

@@ -1,23 +1,23 @@
-import * as React from 'react';
-export declare const reflow: (node: Element) => number;
-interface ComponentProps {
-    easing: string | {
-        enter?: string;
-        exit?: string;
-    } | undefined;
-    style: React.CSSProperties | undefined;
-    timeout: number | {
-        enter?: number;
-        exit?: number;
-    };
-}
-interface Options {
-    mode: 'enter' | 'exit';
-}
-interface TransitionProps {
-    duration: string | number;
-    easing: string | undefined;
-    delay: string | undefined;
-}
-export declare function getTransitionProps(props: ComponentProps, options: Options): TransitionProps;
-export {};
+import * as React from 'react';
+export declare const reflow: (node: Element) => number;
+interface ComponentProps {
+    easing: string | {
+        enter?: string;
+        exit?: string;
+    } | undefined;
+    style: React.CSSProperties | undefined;
+    timeout: number | {
+        enter?: number;
+        exit?: number;
+    };
+}
+interface Options {
+    mode: 'enter' | 'exit';
+}
+interface TransitionProps {
+    duration: string | number;
+    easing: string | undefined;
+    delay: string | undefined;
+}
+export declare function getTransitionProps(props: ComponentProps, options: Options): TransitionProps;
+export {};

package/umd/material-ui.development.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.10.3
+/** @license MUI v5.10.4
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -10302,7 +10302,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
    *
    * Demos:
    *
-   * - [Badge](https://mui.com/base/react-badge/)
+   * - [Unstyled badge](https://mui.com/base/react-badge/)
    *
    * API:
    *
@@ -10439,7 +10439,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
    *
    * Demos:
    *
-   * - [Click away listener](https://mui.com/base/react-click-away-listener/)
+   * - [Click-away listener](https://mui.com/base/react-click-away-listener/)
    *
    * API:
    *
@@ -12627,7 +12627,9 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       return children;
     }
 
-    return mountNode ? /*#__PURE__*/ReactDOM__namespace.createPortal(children, mountNode) : mountNode;
+    return /*#__PURE__*/jsxRuntime_1(React__namespace.Fragment, {
+      children: mountNode ? /*#__PURE__*/ReactDOM__namespace.createPortal(children, mountNode) : mountNode
+    });
   });
   Portal.propTypes
   /* remove-proptypes */
@@ -21250,7 +21252,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
    * Demos:
    *
    * - [Autocomplete](https://mui.com/material-ui/react-autocomplete/)
-   * - [Menus](https://mui.com/material-ui/react-menu/)
+   * - [Menu](https://mui.com/material-ui/react-menu/)
    * - [Popper](https://mui.com/material-ui/react-popper/)
    *
    * API:
@@ -24270,7 +24272,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const avatarGroupClasses = generateUtilityClasses('MuiAvatarGroup', ['root', 'avatar']);
   var avatarGroupClasses$1 = avatarGroupClasses;
 
-  const _excluded$1L = ["children", "className", "componentsProps", "max", "spacing", "total", "variant"];
+  const _excluded$1L = ["children", "className", "component", "componentsProps", "max", "spacing", "total", "variant"];
   const SPACINGS$2 = {
     small: -16,
     medium: null
@@ -24332,6 +24334,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const {
       children: childrenProp,
       className,
+      component = 'div',
       componentsProps = {},
       max = 5,
       spacing = 'medium',
@@ -24345,6 +24348,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const ownerState = _extends({}, props, {
       max,
       spacing,
+      component,
       variant
     });
 
@@ -24369,6 +24373,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const extraAvatars = Math.max(totalAvatars - clampedMax, totalAvatars - maxAvatars, 0);
     const marginLeft = spacing && SPACINGS$2[spacing] !== undefined ? SPACINGS$2[spacing] : -spacing;
     return /*#__PURE__*/jsxRuntime_2(AvatarGroupRoot, _extends({
+      as: component,
       ownerState: ownerState,
       className: clsx(classes.root, className),
       ref: ref
@@ -24418,6 +24423,12 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      */
     className: PropTypes.string,
 
+    /**
+     * The component used for the root node.
+     * Either a string to use a HTML element or a component.
+     */
+    component: PropTypes.elementType,
+
     /**
      * The props used for each slot inside the AvatarGroup.
      * @default {}
@@ -33202,10 +33213,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   var withWidth$1 = withWidth;
 
-  /**
-   * @ignore - internal component.
-   */
-
   function HiddenJs(props) {
     const {
       children,
@@ -33249,7 +33256,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       return null;
     }
 
-    return children;
+    return /*#__PURE__*/jsxRuntime_1(React__namespace.Fragment, {
+      children: children
+    });
   }
 
   HiddenJs.propTypes = {
@@ -33258,48 +33267,28 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      */
     children: PropTypes.node,
 
-    /**
-     * @ignore
-     */
-    className: PropTypes.string,
-
-    /**
-     * Specify which implementation to use.  'js' is the default, 'css' works better for
-     * server-side rendering.
-     */
-    implementation: PropTypes.oneOf(['js', 'css']),
-
-    /**
-     * You can use this prop when choosing the `js` implementation with server-side rendering.
-     *
-     * As `window.innerWidth` is unavailable on the server,
-     * we default to rendering an empty component during the first mount.
-     * You might want to use a heuristic to approximate
-     * the screen width of the client browser screen width.
-     *
-     * For instance, you could be using the user-agent or the client-hints.
-     * https://caniuse.com/#search=client%20hint
-     */
-    initialWidth: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
-
     /**
      * If `true`, screens this size and down are hidden.
      */
+    // eslint-disable-next-line react/no-unused-prop-types
     lgDown: PropTypes.bool,
 
     /**
      * If `true`, screens this size and up are hidden.
      */
+    // eslint-disable-next-line react/no-unused-prop-types
     lgUp: PropTypes.bool,
 
     /**
      * If `true`, screens this size and down are hidden.
      */
+    // eslint-disable-next-line react/no-unused-prop-types
     mdDown: PropTypes.bool,
 
     /**
      * If `true`, screens this size and up are hidden.
      */
+    // eslint-disable-next-line react/no-unused-prop-types
     mdUp: PropTypes.bool,
 
     /**
@@ -33310,11 +33299,13 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * If `true`, screens this size and down are hidden.
      */
+    // eslint-disable-next-line react/no-unused-prop-types
     smDown: PropTypes.bool,
 
     /**
      * If `true`, screens this size and up are hidden.
      */
+    // eslint-disable-next-line react/no-unused-prop-types
     smUp: PropTypes.bool,
 
     /**
@@ -33326,26 +33317,30 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * If `true`, screens this size and down are hidden.
      */
+    // eslint-disable-next-line react/no-unused-prop-types
     xlDown: PropTypes.bool,
 
     /**
      * If `true`, screens this size and up are hidden.
      */
+    // eslint-disable-next-line react/no-unused-prop-types
     xlUp: PropTypes.bool,
 
     /**
      * If `true`, screens this size and down are hidden.
      */
+    // eslint-disable-next-line react/no-unused-prop-types
     xsDown: PropTypes.bool,
 
     /**
      * If `true`, screens this size and up are hidden.
      */
+    // eslint-disable-next-line react/no-unused-prop-types
     xsUp: PropTypes.bool
-  };
+  } ;
 
   {
-    HiddenJs.propTypes = exactProp(HiddenJs.propTypes);
+    HiddenJs.propTypes = exactProp(HiddenJs.propTypes) ;
   }
 
   var HiddenJs$1 = withWidth$1()(HiddenJs);
@@ -38921,21 +38916,23 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
     const otherClasses = _objectWithoutPropertiesLoose(classesProp, _excluded2$4);
 
-    return /*#__PURE__*/React__namespace.cloneElement(input, _extends({
-      // Most of the logic is implemented in `NativeSelectInput`.
-      // The `Select` component is a simple API wrapper to expose something better to play with.
-      inputComponent: NativeSelectInput$1,
-      inputProps: _extends({
-        children,
-        classes: otherClasses,
-        IconComponent,
-        variant: fcs.variant,
-        type: undefined
-      }, inputProps, input ? input.props.inputProps : {}),
-      ref
-    }, other, {
-      className: clsx(classes.root, input.props.className, className)
-    }));
+    return /*#__PURE__*/jsxRuntime_1(React__namespace.Fragment, {
+      children: /*#__PURE__*/React__namespace.cloneElement(input, _extends({
+        // Most of the logic is implemented in `NativeSelectInput`.
+        // The `Select` component is a simple API wrapper to expose something better to play with.
+        inputComponent: NativeSelectInput$1,
+        inputProps: _extends({
+          children,
+          classes: otherClasses,
+          IconComponent,
+          variant: fcs.variant,
+          type: undefined
+        }, inputProps, input ? input.props.inputProps : {}),
+        ref
+      }, other, {
+        className: clsx(classes.root, input.props.className, className)
+      }))
+    });
   });
   NativeSelect.propTypes
   /* remove-proptypes */
@@ -42295,43 +42292,45 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
     const classes = useUtilityClasses$v(ownerState);
     const inputComponentRef = useForkRef(ref, InputComponent.ref);
-    return /*#__PURE__*/React__namespace.cloneElement(InputComponent, _extends({
-      // Most of the logic is implemented in `SelectInput`.
-      // The `Select` component is a simple API wrapper to expose something better to play with.
-      inputComponent,
-      inputProps: _extends({
-        children,
-        IconComponent,
-        variant,
-        type: undefined,
-        // We render a select. We can ignore the type provided by the `Input`.
-        multiple
-      }, native ? {
-        id
-      } : {
-        autoWidth,
-        defaultOpen,
-        displayEmpty,
-        labelId,
-        MenuProps,
-        onClose,
-        onOpen,
-        open,
-        renderValue,
-        SelectDisplayProps: _extends({
+    return /*#__PURE__*/jsxRuntime_1(React__namespace.Fragment, {
+      children: /*#__PURE__*/React__namespace.cloneElement(InputComponent, _extends({
+        // Most of the logic is implemented in `SelectInput`.
+        // The `Select` component is a simple API wrapper to expose something better to play with.
+        inputComponent,
+        inputProps: _extends({
+          children,
+          IconComponent,
+          variant,
+          type: undefined,
+          // We render a select. We can ignore the type provided by the `Input`.
+          multiple
+        }, native ? {
           id
-        }, SelectDisplayProps)
-      }, inputProps, {
-        classes: inputProps ? deepmerge(classes, inputProps.classes) : classes
-      }, input ? input.props.inputProps : {})
-    }, multiple && native && variant === 'outlined' ? {
-      notched: true
-    } : {}, {
-      ref: inputComponentRef,
-      className: clsx(InputComponent.props.className, className)
-    }, !input && {
-      variant
-    }, other));
+        } : {
+          autoWidth,
+          defaultOpen,
+          displayEmpty,
+          labelId,
+          MenuProps,
+          onClose,
+          onOpen,
+          open,
+          renderValue,
+          SelectDisplayProps: _extends({
+            id
+          }, SelectDisplayProps)
+        }, inputProps, {
+          classes: inputProps ? deepmerge(classes, inputProps.classes) : classes
+        }, input ? input.props.inputProps : {})
+      }, multiple && native && variant === 'outlined' ? {
+        notched: true
+      } : {}, {
+        ref: inputComponentRef,
+        className: clsx(InputComponent.props.className, className)
+      }, !input && {
+        variant
+      }, other))
+    });
   });
   Select.propTypes
   /* remove-proptypes */
@@ -46278,7 +46277,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const stepClasses = generateUtilityClasses('MuiStep', ['root', 'horizontal', 'vertical', 'alternativeLabel', 'completed']);
   var stepClasses$1 = stepClasses;
 
-  const _excluded$s = ["active", "children", "className", "completed", "disabled", "expanded", "index", "last"];
+  const _excluded$s = ["active", "children", "className", "component", "completed", "disabled", "expanded", "index", "last"];
 
   const useUtilityClasses$n = ownerState => {
     const {
@@ -46321,6 +46320,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       active: activeProp,
       children,
       className,
+      component = 'div',
       completed: completedProp,
       disabled: disabledProp,
       expanded = false,
@@ -46362,12 +46362,14 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       alternativeLabel,
       completed,
       disabled,
-      expanded
+      expanded,
+      component
     });
 
     const classes = useUtilityClasses$n(ownerState);
 
     const newChildren = /*#__PURE__*/jsxRuntime_2(StepRoot, _extends({
+      as: component,
       className: clsx(classes.root, className),
       ref: ref,
       ownerState: ownerState
@@ -46415,6 +46417,12 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      */
     completed: PropTypes.bool,
 
+    /**
+     * The component used for the root node.
+     * Either a string to use a HTML element or a component.
+     */
+    component: PropTypes.elementType,
+
     /**
      * If `true`, the step is disabled, will also disable the button if
      * `StepButton` is a child of `Step`. Is passed to child components.
@@ -47302,7 +47310,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const stepperClasses = generateUtilityClasses('MuiStepper', ['root', 'horizontal', 'vertical', 'alternativeLabel']);
   var stepperClasses$1 = stepperClasses;
 
-  const _excluded$m = ["activeStep", "alternativeLabel", "children", "className", "connector", "nonLinear", "orientation"];
+  const _excluded$m = ["activeStep", "alternativeLabel", "children", "className", "component", "connector", "nonLinear", "orientation"];
 
   const useUtilityClasses$h = ownerState => {
     const {
@@ -47351,6 +47359,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       alternativeLabel = false,
       children,
       className,
+      component = 'div',
       connector = defaultConnector,
       nonLinear = false,
       orientation = 'horizontal'
@@ -47359,7 +47368,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
     const ownerState = _extends({}, props, {
       alternativeLabel,
-      orientation
+      orientation,
+      component
     });
 
     const classes = useUtilityClasses$h(ownerState);
@@ -47380,6 +47390,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     return /*#__PURE__*/jsxRuntime_1(StepperContext$1.Provider, {
       value: contextValue,
       children: /*#__PURE__*/jsxRuntime_1(StepperRoot, _extends({
+        as: component,
         ownerState: ownerState,
         className: clsx(classes.root, className),
         ref: ref
@@ -47425,6 +47436,12 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      */
     className: PropTypes.string,
 
+    /**
+     * The component used for the root node.
+     * Either a string to use a HTML element or a component.
+     */
+    component: PropTypes.elementType,
+
     /**
      * An element to be placed between each step.
      * @default <StepConnector />
@@ -52248,7 +52265,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * The value to associate with the button when selected in a
      * ToggleButtonGroup.
      */
-    value: PropTypes.any.isRequired
+    value: PropTypes
+    /* @typescript-to-proptypes-ignore */
+    .any.isRequired
   } ;
   var ToggleButton$1 = ToggleButton;