@mui/material 5.13.7 → 5.14.1

package/node/useTouchRipple/index.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {

package/node/useTouchRipple/useTouchRipple.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -37,7 +38,7 @@ const useTouchRipple = props => {
       keydownRef.current = true;
       rippleRef.current.stop(event, () => {
         var _rippleRef$current2;
-        rippleRef == null ? void 0 : (_rippleRef$current2 = rippleRef.current) == null ? void 0 : _rippleRef$current2.start(event);
+        rippleRef == null || (_rippleRef$current2 = rippleRef.current) == null ? void 0 : _rippleRef$current2.start(event);
       });
     }
   });
@@ -48,7 +49,7 @@ const useTouchRipple = props => {
       keydownRef.current = false;
       rippleRef.current.stop(event, () => {
         var _rippleRef$current3;
-        rippleRef == null ? void 0 : (_rippleRef$current3 = rippleRef.current) == null ? void 0 : _rippleRef$current3.pulsate(event);
+        rippleRef == null || (_rippleRef$current3 = rippleRef.current) == null ? void 0 : _rippleRef$current3.pulsate(event);
       });
     }
   });

package/node/utils/createSvgIcon.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {

package/node/utils/index.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {

package/node/utils/useControlled.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 Object.defineProperty(exports, "__esModule", {
   value: true

package/node/utils/useEnhancedEffect.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 Object.defineProperty(exports, "__esModule", {
   value: true

package/node/utils/useEventCallback.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 Object.defineProperty(exports, "__esModule", {
   value: true

package/node/utils/useForkRef.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 Object.defineProperty(exports, "__esModule", {
   value: true

package/node/utils/useId.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 Object.defineProperty(exports, "__esModule", {
   value: true

package/node/utils/useIsFocusVisible.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 Object.defineProperty(exports, "__esModule", {
   value: true

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "5.13.7",
+  "version": "5.14.1",
   "private": false,
   "author": "MUI Team",
   "description": "React components that implement Google's Material Design.",
@@ -45,12 +45,12 @@
     }
   },
   "dependencies": {
-    "@babel/runtime": "^7.22.5",
-    "@mui/base": "5.0.0-beta.6",
-    "@mui/core-downloads-tracker": "^5.13.7",
-    "@mui/system": "^5.13.7",
+    "@babel/runtime": "^7.22.6",
+    "@mui/base": "5.0.0-beta.8",
+    "@mui/core-downloads-tracker": "^5.14.1",
+    "@mui/system": "^5.14.1",
     "@mui/types": "^7.2.4",
-    "@mui/utils": "^5.13.7",
+    "@mui/utils": "^5.14.1",
     "@types/react-transition-group": "^4.4.6",
     "clsx": "^1.2.1",
     "csstype": "^3.1.2",

package/styles/CssVarsProvider.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { unstable_createCssVarsProvider as createCssVarsProvider, unstable_styleFunctionSx as styleFunctionSx } from '@mui/system';
 import experimental_extendTheme from './experimental_extendTheme';

package/styles/ThemeProvider.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["theme"];

package/styles/components.d.ts

@@ -338,6 +338,11 @@ export interface Components<Theme = unknown> {
     styleOverrides?: ComponentsOverrides<Theme>['MuiMenuItem'];
     variants?: ComponentsVariants['MuiMenuItem'];
   };
+  MuiMenuList?: {
+    defaultProps?: ComponentsProps['MuiMenuList'];
+    styleOverrides?: ComponentsOverrides<Theme>['MuiMenuList'];
+    variants?: ComponentsVariants['MuiMenuList'];
+  };
   MuiMobileStepper?: {
     defaultProps?: ComponentsProps['MuiMobileStepper'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiMobileStepper'];

package/styles/createTransitions.js

@@ -69,6 +69,9 @@ export default function createTransitions(inputTransitions) {
       if (!isNumber(delay) && !isString(delay)) {
         console.error('MUI: Argument "delay" must be a number or a string.');
       }
+      if (typeof options !== 'object') {
+        console.error(['MUI: Secong argument of transition.create must be an object.', "Arguments should be either `create('prop1', options)` or `create(['prop1', 'prop2'], options)`"].join('\n'));
+      }
       if (Object.keys(other).length !== 0) {
         console.error(`MUI: Unrecognized argument(s) [${Object.keys(other).join(',')}].`);
       }

package/styles/defaultTheme.js

@@ -1,3 +1,5 @@
+'use client';
+
 import createTheme from './createTheme';
 const defaultTheme = createTheme();
 export default defaultTheme;

package/styles/index.js

@@ -1,3 +1,5 @@
+'use client';
+
 import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
 export { default as THEME_ID } from './identifier';
 export { default as adaptV4Theme } from './adaptV4Theme';

package/styles/overrides.d.ts

@@ -66,6 +66,7 @@ import { ListItemTextClassKey } from '../ListItemText';
 import { ListSubheaderClassKey } from '../ListSubheader';
 import { MenuClassKey } from '../Menu';
 import { MenuItemClassKey } from '../MenuItem';
+import { MenuListClassKey } from '../MenuList';
 import { MobileStepperClassKey } from '../MobileStepper';
 import { ModalClassKey } from '../Modal';
 import { NativeSelectClassKey } from '../NativeSelect';
@@ -204,6 +205,7 @@ export interface ComponentNameToClassKey {
   MuiListSubheader: ListSubheaderClassKey;
   MuiMenu: MenuClassKey;
   MuiMenuItem: MenuItemClassKey;
+  MuiMenuList: MenuListClassKey;
   MuiMobileStepper: MobileStepperClassKey;
   MuiModal: ModalClassKey;
   MuiNativeSelect: NativeSelectClassKey;

package/styles/props.d.ts

@@ -179,7 +179,7 @@ export interface ComponentsPropsList {
   MuiInputBase: InputBaseProps;
   MuiInputLabel: InputLabelProps;
   MuiLinearProgress: LinearProgressProps;
-  MuiLink: LinkProps;
+  MuiLink: LinkProps<React.ElementType>;
   MuiList: ListProps;
   MuiListItem: ListItemProps;
   MuiListItemButton: ListItemButtonProps;

package/styles/styled.js

@@ -1,3 +1,5 @@
+'use client';
+
 import { createStyled, shouldForwardProp } from '@mui/system';
 import defaultTheme from './defaultTheme';
 import THEME_ID from './identifier';

package/styles/useTheme.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { useTheme as useThemeSystem } from '@mui/system';
 import defaultTheme from './defaultTheme';

package/styles/useThemeProps.js

@@ -1,3 +1,5 @@
+'use client';
+
 import { useThemeProps as systemUseThemeProps } from '@mui/system';
 import defaultTheme from './defaultTheme';
 import THEME_ID from './identifier';

package/umd/material-ui.development.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.13.7
+ * @mui/material v5.14.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -11,6 +11,8 @@
   (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.MaterialUI = {}, global.React, global.ReactDOM));
 })(this, (function (exports, React, ReactDOM) { 'use strict';
 
+  'use client';
+
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
   function _interopNamespace(e) {
@@ -2129,6 +2131,7 @@
   /**
    * https://github.com/facebook/react/issues/14099#issuecomment-440013892
    */
+
   function useEventCallback(fn) {
     const ref = React__namespace.useRef(fn);
     useEnhancedEffect$1(() => {
@@ -2159,7 +2162,6 @@
     }, refs);
   }
 
-  // based on https://github.com/WICG/focus-visible/blob/v4.1.5/src/focus-visible.js
   let hadKeyboardEvent = true;
   let hadFocusVisibleRecently = false;
   let hadFocusVisibleRecentlyTimeout;
@@ -6956,8 +6958,8 @@
   const maxWidth = props => {
     if (props.maxWidth !== undefined && props.maxWidth !== null) {
       const styleFromPropValue = propValue => {
-        var _props$theme, _props$theme$breakpoi, _props$theme$breakpoi2;
-        const breakpoint = ((_props$theme = props.theme) == null ? void 0 : (_props$theme$breakpoi = _props$theme.breakpoints) == null ? void 0 : (_props$theme$breakpoi2 = _props$theme$breakpoi.values) == null ? void 0 : _props$theme$breakpoi2[propValue]) || values$1[propValue];
+        var _props$theme;
+        const breakpoint = ((_props$theme = props.theme) == null || (_props$theme = _props$theme.breakpoints) == null || (_props$theme = _props$theme.values) == null ? void 0 : _props$theme[propValue]) || values$1[propValue];
         return {
           maxWidth: breakpoint || sizingTransform(propValue)
         };
@@ -7483,7 +7485,7 @@
       systemProps: {},
       otherProps: {}
     };
-    const config = (_props$theme$unstable = props == null ? void 0 : (_props$theme = props.theme) == null ? void 0 : _props$theme.unstable_sxConfig) != null ? _props$theme$unstable : defaultSxConfig$1;
+    const config = (_props$theme$unstable = props == null || (_props$theme = props.theme) == null ? void 0 : _props$theme.unstable_sxConfig) != null ? _props$theme$unstable : defaultSxConfig$1;
     Object.keys(props).forEach(prop => {
       if (config[prop]) {
         result.systemProps[prop] = props[prop];
@@ -7610,12 +7612,12 @@
     return variantsStyles;
   };
   const variantsResolver = (props, styles, theme, name) => {
-    var _theme$components, _theme$components$nam;
+    var _theme$components;
     const {
       ownerState = {}
     } = props;
     const variantsStyles = [];
-    const themeVariants = theme == null ? void 0 : (_theme$components = theme.components) == null ? void 0 : (_theme$components$nam = _theme$components[name]) == null ? void 0 : _theme$components$nam.variants;
+    const themeVariants = theme == null || (_theme$components = theme.components) == null || (_theme$components = _theme$components[name]) == null ? void 0 : _theme$components.variants;
     if (themeVariants) {
       themeVariants.forEach(themeVariant => {
         let isMatch = true;
@@ -10359,6 +10361,9 @@ const theme2 = createTheme({ palette: {
         if (!isNumber(delay) && !isString(delay)) {
           console.error('MUI: Argument "delay" must be a number or a string.');
         }
+        if (typeof options !== 'object') {
+          console.error(['MUI: Secong argument of transition.create must be an object.', "Arguments should be either `create('prop1', options)` or `create(['prop1', 'prop2'], options)`"].join('\n'));
+        }
         if (Object.keys(other).length !== 0) {
           console.error(`MUI: Unrecognized argument(s) [${Object.keys(other).join(',')}].`);
         }
@@ -11501,7 +11506,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     ClickAwayListener['propTypes' + ''] = exactProp(ClickAwayListener.propTypes);
   }
 
-  /* eslint-disable consistent-return, jsx-a11y/no-noninteractive-tabindex */
   // Inspired by https://github.com/focus-trap/tabbable
   const candidatesSelector = ['input', 'select', 'textarea', 'a[href]', 'button', '[tabindex]', 'audio[controls]', 'video[controls]', '[contenteditable]:not([contenteditable="false"])'].join(',');
   function getTabIndex(node) {
@@ -14802,7 +14806,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   }) {
     var _sliderRef$current, _doc$activeElement;
     const doc = ownerDocument(sliderRef.current);
-    if (!((_sliderRef$current = sliderRef.current) != null && _sliderRef$current.contains(doc.activeElement)) || Number(doc == null ? void 0 : (_doc$activeElement = doc.activeElement) == null ? void 0 : _doc$activeElement.getAttribute('data-index')) !== activeIndex) {
+    if (!((_sliderRef$current = sliderRef.current) != null && _sliderRef$current.contains(doc.activeElement)) || Number(doc == null || (_doc$activeElement = doc.activeElement) == null ? void 0 : _doc$activeElement.getAttribute('data-index')) !== activeIndex) {
       var _sliderRef$current2;
       (_sliderRef$current2 = sliderRef.current) == null ? void 0 : _sliderRef$current2.querySelector(`[type="range"][data-index="${activeIndex}"]`).focus();
     }
@@ -14953,7 +14957,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         setFocusedThumbIndex(index);
       }
       setOpen(index);
-      otherHandlers == null ? void 0 : (_otherHandlers$onFocu = otherHandlers.onFocus) == null ? void 0 : _otherHandlers$onFocu.call(otherHandlers, event);
+      otherHandlers == null || (_otherHandlers$onFocu = otherHandlers.onFocus) == null ? void 0 : _otherHandlers$onFocu.call(otherHandlers, event);
     };
     const createHandleHiddenInputBlur = otherHandlers => event => {
       var _otherHandlers$onBlur;
@@ -14962,7 +14966,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         setFocusedThumbIndex(-1);
       }
       setOpen(-1);
-      otherHandlers == null ? void 0 : (_otherHandlers$onBlur = otherHandlers.onBlur) == null ? void 0 : _otherHandlers$onBlur.call(otherHandlers, event);
+      otherHandlers == null || (_otherHandlers$onBlur = otherHandlers.onBlur) == null ? void 0 : _otherHandlers$onBlur.call(otherHandlers, event);
     };
     useEnhancedEffect$1(() => {
       if (disabled && sliderRef.current.contains(document.activeElement)) {
@@ -16018,10 +16022,10 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
       // Scroll active descendant into view.
       // Logic copied from https://www.w3.org/WAI/content-assets/wai-aria-practices/patterns/combobox/examples/js/select-only.js
-      //
+      // In case of mouse clicks and touch (in mobile devices) we avoid scrolling the element and keep both behaviors same.
       // Consider this API instead once it has a better browser support:
       // .scrollIntoView({ scrollMode: 'if-needed', block: 'nearest' });
-      if (listboxNode.scrollHeight > listboxNode.clientHeight && reason !== 'mouse') {
+      if (listboxNode.scrollHeight > listboxNode.clientHeight && reason !== 'mouse' && reason !== 'touch') {
         const element = option;
         const scrollBottom = listboxNode.clientHeight + listboxNode.scrollTop;
         const elementBottom = element.offsetTop + element.offsetHeight;
@@ -16733,7 +16737,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     theme,
     ownerState
   }) => {
-    var _theme$transitions, _theme$transitions$cr, _theme$transitions2, _theme$transitions2$d, _theme$typography, _theme$typography$pxT, _theme$typography2, _theme$typography2$px, _theme$typography3, _theme$typography3$px, _palette$ownerState$c, _palette, _palette$ownerState$c2, _palette2, _palette2$action, _palette3, _palette3$action;
+    var _theme$transitions, _theme$transitions$cr, _theme$transitions2, _theme$typography, _theme$typography$pxT, _theme$typography2, _theme$typography2$px, _theme$typography3, _theme$typography3$px, _palette$ownerState$c, _palette, _palette2, _palette3;
     return {
       userSelect: 'none',
       width: '1em',
@@ -16743,19 +16747,19 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       // e.g. heroicons uses fill="none" and stroke="currentColor"
       fill: ownerState.hasSvgAsChild ? undefined : 'currentColor',
       flexShrink: 0,
-      transition: (_theme$transitions = theme.transitions) == null ? void 0 : (_theme$transitions$cr = _theme$transitions.create) == null ? void 0 : _theme$transitions$cr.call(_theme$transitions, 'fill', {
-        duration: (_theme$transitions2 = theme.transitions) == null ? void 0 : (_theme$transitions2$d = _theme$transitions2.duration) == null ? void 0 : _theme$transitions2$d.shorter
+      transition: (_theme$transitions = theme.transitions) == null || (_theme$transitions$cr = _theme$transitions.create) == null ? void 0 : _theme$transitions$cr.call(_theme$transitions, 'fill', {
+        duration: (_theme$transitions2 = theme.transitions) == null || (_theme$transitions2 = _theme$transitions2.duration) == null ? void 0 : _theme$transitions2.shorter
       }),
       fontSize: {
         inherit: 'inherit',
-        small: ((_theme$typography = theme.typography) == null ? void 0 : (_theme$typography$pxT = _theme$typography.pxToRem) == null ? void 0 : _theme$typography$pxT.call(_theme$typography, 20)) || '1.25rem',
-        medium: ((_theme$typography2 = theme.typography) == null ? void 0 : (_theme$typography2$px = _theme$typography2.pxToRem) == null ? void 0 : _theme$typography2$px.call(_theme$typography2, 24)) || '1.5rem',
-        large: ((_theme$typography3 = theme.typography) == null ? void 0 : (_theme$typography3$px = _theme$typography3.pxToRem) == null ? void 0 : _theme$typography3$px.call(_theme$typography3, 35)) || '2.1875rem'
+        small: ((_theme$typography = theme.typography) == null || (_theme$typography$pxT = _theme$typography.pxToRem) == null ? void 0 : _theme$typography$pxT.call(_theme$typography, 20)) || '1.25rem',
+        medium: ((_theme$typography2 = theme.typography) == null || (_theme$typography2$px = _theme$typography2.pxToRem) == null ? void 0 : _theme$typography2$px.call(_theme$typography2, 24)) || '1.5rem',
+        large: ((_theme$typography3 = theme.typography) == null || (_theme$typography3$px = _theme$typography3.pxToRem) == null ? void 0 : _theme$typography3$px.call(_theme$typography3, 35)) || '2.1875rem'
       }[ownerState.fontSize],
       // TODO v5 deprecate, v6 remove for sx
-      color: (_palette$ownerState$c = (_palette = (theme.vars || theme).palette) == null ? void 0 : (_palette$ownerState$c2 = _palette[ownerState.color]) == null ? void 0 : _palette$ownerState$c2.main) != null ? _palette$ownerState$c : {
-        action: (_palette2 = (theme.vars || theme).palette) == null ? void 0 : (_palette2$action = _palette2.action) == null ? void 0 : _palette2$action.active,
-        disabled: (_palette3 = (theme.vars || theme).palette) == null ? void 0 : (_palette3$action = _palette3.action) == null ? void 0 : _palette3$action.disabled,
+      color: (_palette$ownerState$c = (_palette = (theme.vars || theme).palette) == null || (_palette = _palette[ownerState.color]) == null ? void 0 : _palette.main) != null ? _palette$ownerState$c : {
+        action: (_palette2 = (theme.vars || theme).palette) == null || (_palette2 = _palette2.action) == null ? void 0 : _palette2.active,
+        disabled: (_palette3 = (theme.vars || theme).palette) == null || (_palette3 = _palette3.action) == null ? void 0 : _palette3.disabled,
         inherit: undefined
       }[ownerState.color]
     };
@@ -22975,7 +22979,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         selected: optionProps['aria-selected'],
         index,
         inputValue
-      });
+      }, ownerState);
     };
     const clearIndicatorSlotProps = (_slotProps$clearIndic = slotProps.clearIndicator) != null ? _slotProps$clearIndic : componentsProps.clearIndicator;
     const paperSlotProps = (_slotProps$paper = slotProps.paper) != null ? _slotProps$paper : componentsProps.paper;
@@ -23444,7 +23448,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      *
      * @param {object} props The props to apply on the li element.
      * @param {T} option The option to render.
-     * @param {object} state The state of the component.
+     * @param {object} state The state of each option.
+     * @param {object} ownerState The state of the Autocomplete component.
      * @returns {ReactNode}
      */
     renderOption: PropTypes.func,
@@ -25607,7 +25612,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * The component used for the root node.
      * Either a string to use a HTML element or a component.
      */
-    component: PropTypes.elementType,
+    component: PropTypes /* @typescript-to-proptypes-ignore */.elementType,
     /**
      * If `true`, the component is disabled.
      * @default false
@@ -27412,7 +27417,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     }
   });
   const styles$3 = (theme, enableColorScheme = false) => {
-    var _theme$components, _theme$components$Mui;
+    var _theme$components;
     const colorSchemeStyles = {};
     if (enableColorScheme && theme.colorSchemes) {
       Object.entries(theme.colorSchemes).forEach(([key, scheme]) => {
@@ -27440,7 +27445,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         }
       })
     }, colorSchemeStyles);
-    const themeOverrides = (_theme$components = theme.components) == null ? void 0 : (_theme$components$Mui = _theme$components.MuiCssBaseline) == null ? void 0 : _theme$components$Mui.styleOverrides;
+    const themeOverrides = (_theme$components = theme.components) == null || (_theme$components = _theme$components.MuiCssBaseline) == null ? void 0 : _theme$components.styleOverrides;
     if (themeOverrides) {
       defaultStyles = [defaultStyles, themeOverrides];
     }
@@ -29564,7 +29569,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * The component used for the root node.
      * Either a string to use a HTML element or a component.
      */
-    component: PropTypes.elementType,
+    component: PropTypes /* @typescript-to-proptypes-ignore */.elementType,
     /**
      * If `true`, the component is disabled.
      * @default false
@@ -30301,6 +30306,66 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   } ;
   var FormControl$1 = FormControl;
 
+  const Stack = createStack({
+    createStyledComponent: styled$1('div', {
+      name: 'MuiStack',
+      slot: 'Root',
+      overridesResolver: (props, styles) => styles.root
+    }),
+    useThemeProps: inProps => useThemeProps({
+      props: inProps,
+      name: 'MuiStack'
+    })
+  });
+  Stack.propTypes /* remove-proptypes */ = {
+    // ----------------------------- Warning --------------------------------
+    // | These PropTypes are generated from the TypeScript type definitions |
+    // |     To update them edit the d.ts file and run "yarn proptypes"     |
+    // ----------------------------------------------------------------------
+    /**
+     * The content of the component.
+     */
+    children: PropTypes.node,
+    /**
+     * The component used for the root node.
+     * Either a string to use a HTML element or a component.
+     */
+    component: PropTypes.elementType,
+    /**
+     * Defines the `flex-direction` style property.
+     * It is applied for all screen sizes.
+     * @default 'column'
+     */
+    direction: PropTypes.oneOfType([PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), PropTypes.object]),
+    /**
+     * Add an element between each child.
+     */
+    divider: PropTypes.node,
+    /**
+     * Defines the space between immediate children.
+     * @default 0
+     */
+    spacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
+    /**
+     * The system prop, which allows defining system overrides as well as additional CSS styles.
+     */
+    sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+    /**
+     * 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),
+     * 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.
+     * @default false
+     */
+    useFlexGap: PropTypes.bool
+  } ;
+  var Stack$1 = Stack;
+
+  const stackClasses = generateUtilityClasses('MuiStack', ['root']);
+  var stackClasses$1 = stackClasses;
+
   function getFormControlLabelUtilityClasses(slot) {
     return generateUtilityClass('MuiFormControlLabel', slot);
   }
@@ -30441,12 +30506,16 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       ownerState: ownerState,
       ref: ref
     }, other, {
-      children: [/*#__PURE__*/React__namespace.cloneElement(control, controlProps), label, required && /*#__PURE__*/jsxRuntime_2(AsteriskComponent$1, {
-        ownerState: ownerState,
-        "aria-hidden": true,
-        className: classes.asterisk,
-        children: ["\u2009", '*']
-      })]
+      children: [/*#__PURE__*/React__namespace.cloneElement(control, controlProps), required ? /*#__PURE__*/jsxRuntime_2(Stack$1, {
+        direction: "row",
+        alignItems: "center",
+        children: [label, /*#__PURE__*/jsxRuntime_2(AsteriskComponent$1, {
+          ownerState: ownerState,
+          "aria-hidden": true,
+          className: classes.asterisk,
+          children: ["\u2009", '*']
+        })]
+      }) : label]
     }));
   });
   FormControlLabel.propTypes /* remove-proptypes */ = {
@@ -34700,7 +34769,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * The component used for the root node.
      * Either a string to use a HTML element or a component.
      */
-    component: PropTypes.elementType,
+    component: PropTypes /* @typescript-to-proptypes-ignore */.elementType,
     /**
      * If `true`, compact vertical padding designed for keyboard and mouse input is used.
      * The prop defaults to the value inherited from the parent List component.
@@ -35126,7 +35195,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * The component used for the root node.
      * Either a string to use a HTML element or a component.
      */
-    component: PropTypes.elementType,
+    component: PropTypes /* @typescript-to-proptypes-ignore */.elementType,
     /**
      * The components used for each slot inside.
      *
@@ -36788,7 +36857,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * The component used for the root node.
      * Either a string to use a HTML element or a component.
      */
-    component: PropTypes.elementType,
+    component: PropTypes /* @typescript-to-proptypes-ignore */.elementType,
     /**
      * If `true`, compact vertical padding designed for keyboard and mouse input is used.
      * The prop defaults to the value inherited from the parent Menu component.
@@ -43975,66 +44044,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   SpeedDialIcon.muiName = 'SpeedDialIcon';
   var SpeedDialIcon$1 = SpeedDialIcon;
 
-  const Stack = createStack({
-    createStyledComponent: styled$1('div', {
-      name: 'MuiStack',
-      slot: 'Root',
-      overridesResolver: (props, styles) => styles.root
-    }),
-    useThemeProps: inProps => useThemeProps({
-      props: inProps,
-      name: 'MuiStack'
-    })
-  });
-  Stack.propTypes /* remove-proptypes */ = {
-    // ----------------------------- Warning --------------------------------
-    // | These PropTypes are generated from the TypeScript type definitions |
-    // |     To update them edit the d.ts file and run "yarn proptypes"     |
-    // ----------------------------------------------------------------------
-    /**
-     * The content of the component.
-     */
-    children: PropTypes.node,
-    /**
-     * The component used for the root node.
-     * Either a string to use a HTML element or a component.
-     */
-    component: PropTypes.elementType,
-    /**
-     * Defines the `flex-direction` style property.
-     * It is applied for all screen sizes.
-     * @default 'column'
-     */
-    direction: PropTypes.oneOfType([PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), PropTypes.object]),
-    /**
-     * Add an element between each child.
-     */
-    divider: PropTypes.node,
-    /**
-     * Defines the space between immediate children.
-     * @default 0
-     */
-    spacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
-    /**
-     * The system prop, which allows defining system overrides as well as additional CSS styles.
-     */
-    sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-    /**
-     * 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),
-     * 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.
-     * @default false
-     */
-    useFlexGap: PropTypes.bool
-  } ;
-  var Stack$1 = Stack;
-
-  const stackClasses = generateUtilityClasses('MuiStack', ['root']);
-  var stackClasses$1 = stackClasses;
-
   /**
    * Provides information about the current step in Stepper.
    */