@mui/material 5.11.10 → 5.11.12

package/legacy/Modal/Modal.js

@@ -2,6 +2,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import clsx from 'clsx';
 import ModalUnstyled, { modalUnstyledClasses } from '@mui/base/ModalUnstyled';
 import { isHostComponent, resolveComponentProps } from '@mui/base/utils';
 import { elementAcceptingRef, HTMLElementType } from '@mui/utils';
@@ -10,9 +11,6 @@ import useThemeProps from '../styles/useThemeProps';
 import Backdrop from '../Backdrop';
 import { jsx as _jsx } from "react/jsx-runtime";
 export var modalClasses = modalUnstyledClasses;
-var extendUtilityClasses = function extendUtilityClasses(ownerState) {
-  return ownerState.classes;
-};
 var ModalRoot = styled('div', {
   name: 'MuiModal',
   slot: 'Root',
@@ -66,6 +64,8 @@ var Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
   var _props$BackdropCompon = props.BackdropComponent,
     BackdropComponent = _props$BackdropCompon === void 0 ? ModalBackdrop : _props$BackdropCompon,
     BackdropProps = props.BackdropProps,
+    classes = props.classes,
+    className = props.className,
     _props$closeAfterTran = props.closeAfterTransition,
     closeAfterTransition = _props$closeAfterTran === void 0 ? false : _props$closeAfterTran,
     children = props.children,
@@ -93,7 +93,7 @@ var Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     slotProps = props.slotProps,
     slots = props.slots,
     theme = props.theme,
-    other = _objectWithoutProperties(props, ["BackdropComponent", "BackdropProps", "closeAfterTransition", "children", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "slotProps", "slots", "theme"]);
+    other = _objectWithoutProperties(props, ["BackdropComponent", "BackdropProps", "classes", "className", "closeAfterTransition", "children", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "slotProps", "slots", "theme"]);
   var _React$useState = React.useState(true),
     exited = _React$useState[0],
     setExited = _React$useState[1];
@@ -111,7 +111,6 @@ var Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
   var ownerState = _extends({}, props, commonProps, {
     exited: exited
   });
-  var classes = extendUtilityClasses(ownerState);
   var RootSlot = (_ref2 = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : components.Root) != null ? _ref2 : ModalRoot;
   var BackdropSlot = (_ref3 = (_slots$backdrop = slots == null ? void 0 : slots.backdrop) != null ? _slots$backdrop : components.Backdrop) != null ? _ref3 : BackdropComponent;
   var rootSlotProps = (_slotProps$root = slotProps == null ? void 0 : slotProps.root) != null ? _slotProps$root : componentsProps.root;
@@ -126,10 +125,14 @@ var Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
         return _extends({}, resolveComponentProps(rootSlotProps, ownerState), !isHostComponent(RootSlot) && {
           as: component,
           theme: theme
+        }, {
+          className: clsx(className, rootSlotProps == null ? void 0 : rootSlotProps.className, classes == null ? void 0 : classes.root, !ownerState.open && ownerState.exited && (classes == null ? void 0 : classes.hidden))
         });
       },
       backdrop: function backdrop() {
-        return _extends({}, BackdropProps, resolveComponentProps(backdropSlotProps, ownerState));
+        return _extends({}, BackdropProps, resolveComponentProps(backdropSlotProps, ownerState), {
+          className: clsx(backdropSlotProps == null ? void 0 : backdropSlotProps.className, classes == null ? void 0 : classes.backdrop)
+        });
       }
     },
     onTransitionEnter: function onTransitionEnter() {
@@ -139,9 +142,7 @@ var Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
       return setExited(true);
     },
     ref: ref
-  }, other, {
-    classes: classes
-  }, commonProps, {
+  }, other, commonProps, {
     children: children
   }));
 });
@@ -178,6 +179,10 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes /* remove-proptypes */ =
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
   /**
    * When set to true the Modal waits until a nested Transition is completed before closing.
    * @default false

package/legacy/OutlinedInput/OutlinedInput.js

@@ -161,7 +161,7 @@ var OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inProps
         ownerState: ownerState,
         className: classes.notchedOutline,
         label: label != null && label !== '' && fcs.required ? _React$Fragment || (_React$Fragment = /*#__PURE__*/_jsxs(React.Fragment, {
-          children: [label, "\xA0", '*']
+          children: [label, "\u2009", '*']
         })) : label,
         notched: typeof notched !== 'undefined' ? notched : Boolean(state.startAdornment || state.filled || state.focused)
       });

package/legacy/Rating/Rating.js

@@ -44,7 +44,7 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
     emptyValueFocused = ownerState.emptyValueFocused,
     focusVisible = ownerState.focusVisible;
   var slots = {
-    root: ['root', "size".concat(capitalize(size)), disabled && 'disabled', focusVisible && 'focusVisible', readOnly && 'readyOnly'],
+    root: ['root', "size".concat(capitalize(size)), disabled && 'disabled', focusVisible && 'focusVisible', readOnly && 'readOnly'],
     label: ['label', 'pristine'],
     labelEmptyValue: [emptyValueFocused && 'labelEmptyValueActive'],
     icon: ['icon'],
@@ -459,7 +459,7 @@ var Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
     ref: handleRef,
     onMouseMove: handleMouseMove,
     onMouseLeave: handleMouseLeave,
-    className: clsx(classes.root, className),
+    className: clsx(classes.root, className, readOnly && 'MuiRating-readOnly'),
     ownerState: ownerState,
     role: readOnly ? 'img' : null,
     "aria-label": readOnly ? getLabelText(value) : null

package/legacy/Select/SelectInput.js

@@ -336,8 +336,7 @@ var SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, ref)
       computeDisplay = true;
     }
   }
-  var items = childrenArray.map(function (child, index, arr) {
-    var _arr$, _arr$$props, _arr$2, _arr$2$props;
+  var items = childrenArray.map(function (child) {
     if (! /*#__PURE__*/React.isValidElement(child)) {
       return null;
     }
@@ -366,25 +365,6 @@ var SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, ref)
     if (selected) {
       foundMatch = true;
     }
-    if (child.props.value === undefined) {
-      return /*#__PURE__*/React.cloneElement(child, {
-        'aria-readonly': true,
-        role: 'option'
-      });
-    }
-    var isFirstSelectableElement = function isFirstSelectableElement() {
-      if (value) {
-        return selected;
-      }
-      var firstSelectableElement = arr.find(function (item) {
-        var _item$props;
-        return (item == null ? void 0 : (_item$props = item.props) == null ? void 0 : _item$props.value) !== undefined && item.props.disabled !== true;
-      });
-      if (child === firstSelectableElement) {
-        return true;
-      }
-      return selected;
-    };
     return /*#__PURE__*/React.cloneElement(child, {
       'aria-selected': selected ? 'true' : 'false',
       onClick: handleItemClick(child),
@@ -400,7 +380,7 @@ var SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, ref)
         }
       },
       role: 'option',
-      selected: ((_arr$ = arr[0]) == null ? void 0 : (_arr$$props = _arr$.props) == null ? void 0 : _arr$$props.value) === undefined || ((_arr$2 = arr[0]) == null ? void 0 : (_arr$2$props = _arr$2.props) == null ? void 0 : _arr$2$props.disabled) === true ? isFirstSelectableElement() : selected,
+      selected: selected,
       value: undefined,
       // The value is most likely not a valid HTML attribute.
       'data-value': child.props.value // Instead, we provide it as a data attribute.

package/legacy/Slider/Slider.js

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { chainPropTypes } from '@mui/utils';
 import { isHostComponent, useSlotProps, unstable_composeClasses as composeClasses } from '@mui/base';
-import { useSlider } from '@mui/base/SliderUnstyled';
+import useSlider, { valueToPercent } from '@mui/base/useSlider';
 import { alpha, lighten, darken } from '@mui/system';
 import useThemeProps from '../styles/useThemeProps';
 import styled, { slotShouldForwardProp } from '../styles/styled';
@@ -17,9 +17,6 @@ import SliderValueLabel from './SliderValueLabel';
 import sliderClasses, { getSliderUtilityClass } from './sliderClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var valueToPercent = function valueToPercent(value, min, max) {
-  return (value - min) * 100 / (max - min);
-};
 function Identity(x) {
   return x;
 }
@@ -587,7 +584,8 @@ var Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
     elementType: ThumbSlot,
     getSlotProps: getThumbProps,
     externalSlotProps: thumbSlotProps,
-    ownerState: _extends({}, ownerState, thumbSlotProps == null ? void 0 : thumbSlotProps.ownerState)
+    ownerState: _extends({}, ownerState, thumbSlotProps == null ? void 0 : thumbSlotProps.ownerState),
+    className: classes.thumb
   });
   var valueLabelProps = useSlotProps({
     elementType: ValueLabelSlot,
@@ -604,7 +602,8 @@ var Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
   var markLabelProps = useSlotProps({
     elementType: MarkLabelSlot,
     externalSlotProps: markLabelSlotProps,
-    ownerState: ownerState
+    ownerState: ownerState,
+    className: classes.markLabel
   });
   var inputSliderProps = useSlotProps({
     elementType: InputSlot,
@@ -647,8 +646,10 @@ var Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
       var percent = valueToPercent(value, min, max);
       var style = axisProps[axis].offset(percent);
       var ValueLabelComponent = valueLabelDisplay === 'off' ? Forward : ValueLabelSlot;
-      return /*#__PURE__*/_jsx(React.Fragment, {
-        children: /*#__PURE__*/_jsx(ValueLabelComponent, _extends({}, !isHostComponent(ValueLabelComponent) && {
+      return (
+        /*#__PURE__*/
+        /* TODO v6: Change component structure. It will help in avoiding the complicated React.cloneElement API added in SliderValueLabel component. Should be: Thumb -> Input, ValueLabel. Follow Joy UI's Slider structure. */
+        _jsx(ValueLabelComponent, _extends({}, !isHostComponent(ValueLabelComponent) && {
           valueLabelFormat: valueLabelFormat,
           valueLabelDisplay: valueLabelDisplay,
           value: typeof valueLabelFormat === 'function' ? valueLabelFormat(scale(value), index) : valueLabelFormat,
@@ -657,8 +658,7 @@ var Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
           disabled: disabled
         }, valueLabelProps, {
           children: /*#__PURE__*/_jsx(ThumbSlot, _extends({
-            "data-index": index,
-            "data-focusvisible": focusedThumbIndex === index
+            "data-index": index
           }, thumbProps, {
             className: clsx(classes.thumb, thumbProps.className, active === index && classes.active, focusedThumbIndex === index && classes.focusVisible),
             style: _extends({}, style, {
@@ -673,8 +673,8 @@ var Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
               value: values[index]
             }, inputSliderProps))
           }))
-        }))
-      }, index);
+        }), index)
+      );
     })]
   }));
 });
@@ -715,6 +715,10 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes /* remove-proptypes */
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
   /**
    * The color of the component.
    * It supports both default and custom theme colors, which can be added as shown in the

package/legacy/Snackbar/Snackbar.js

@@ -3,13 +3,12 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses } from '@mui/base';
+import { unstable_composeClasses as composeClasses, useSlotProps } from '@mui/base';
 import ClickAwayListener from '@mui/base/ClickAwayListener';
+import useSnackbar from '@mui/base/useSnackbar';
 import styled from '../styles/styled';
 import useTheme from '../styles/useTheme';
 import useThemeProps from '../styles/useThemeProps';
-import useEventCallback from '../utils/useEventCallback';
 import capitalize from '../utils/capitalize';
 import Grow from '../Grow';
 import SnackbarContent from '../SnackbarContent';
@@ -114,78 +113,28 @@ var Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
     anchorOrigin: {
       vertical: vertical,
       horizontal: horizontal
-    }
+    },
+    autoHideDuration: autoHideDuration,
+    disableWindowBlurListener: disableWindowBlurListener,
+    TransitionComponent: TransitionComponent,
+    transitionDuration: transitionDuration
   });
   var classes = useUtilityClasses(ownerState);
-  var timerAutoHide = React.useRef();
+  var _useSnackbar = useSnackbar(_extends({}, ownerState, {
+      ref: ref
+    })),
+    getRootProps = _useSnackbar.getRootProps,
+    onClickAway = _useSnackbar.onClickAway;
   var _React$useState = React.useState(true),
     exited = _React$useState[0],
     setExited = _React$useState[1];
-  var handleClose = useEventCallback(function () {
-    if (onClose) {
-      onClose.apply(void 0, arguments);
-    }
+  var rootProps = useSlotProps({
+    elementType: SnackbarRoot,
+    getSlotProps: getRootProps,
+    externalForwardedProps: other,
+    ownerState: ownerState,
+    className: [classes.root, className]
   });
-  var setAutoHideTimer = useEventCallback(function (autoHideDurationParam) {
-    if (!onClose || autoHideDurationParam == null) {
-      return;
-    }
-    clearTimeout(timerAutoHide.current);
-    timerAutoHide.current = setTimeout(function () {
-      handleClose(null, 'timeout');
-    }, autoHideDurationParam);
-  });
-  React.useEffect(function () {
-    if (open) {
-      setAutoHideTimer(autoHideDuration);
-    }
-    return function () {
-      clearTimeout(timerAutoHide.current);
-    };
-  }, [open, autoHideDuration, setAutoHideTimer]);
-
-  // Pause the timer when the user is interacting with the Snackbar
-  // or when the user hide the window.
-  var handlePause = function handlePause() {
-    clearTimeout(timerAutoHide.current);
-  };
-
-  // Restart the timer when the user is no longer interacting with the Snackbar
-  // or when the window is shown back.
-  var handleResume = React.useCallback(function () {
-    if (autoHideDuration != null) {
-      setAutoHideTimer(resumeHideDuration != null ? resumeHideDuration : autoHideDuration * 0.5);
-    }
-  }, [autoHideDuration, resumeHideDuration, setAutoHideTimer]);
-  var handleFocus = function handleFocus(event) {
-    if (onFocus) {
-      onFocus(event);
-    }
-    handlePause();
-  };
-  var handleMouseEnter = function handleMouseEnter(event) {
-    if (onMouseEnter) {
-      onMouseEnter(event);
-    }
-    handlePause();
-  };
-  var handleBlur = function handleBlur(event) {
-    if (onBlur) {
-      onBlur(event);
-    }
-    handleResume();
-  };
-  var handleMouseLeave = function handleMouseLeave(event) {
-    if (onMouseLeave) {
-      onMouseLeave(event);
-    }
-    handleResume();
-  };
-  var handleClickAway = function handleClickAway(event) {
-    if (onClose) {
-      onClose(event, 'clickaway');
-    }
-  };
   var handleExited = function handleExited(node) {
     setExited(true);
     if (onExited) {
@@ -198,63 +147,15 @@ var Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
       onEnter(node, isAppearing);
     }
   };
-  React.useEffect(function () {
-    // TODO: window global should be refactored here
-    if (!disableWindowBlurListener && open) {
-      window.addEventListener('focus', handleResume);
-      window.addEventListener('blur', handlePause);
-      return function () {
-        window.removeEventListener('focus', handleResume);
-        window.removeEventListener('blur', handlePause);
-      };
-    }
-    return undefined;
-  }, [disableWindowBlurListener, handleResume, open]);
-  React.useEffect(function () {
-    if (!open) {
-      return undefined;
-    }
-
-    /**
-     * @param {KeyboardEvent} nativeEvent
-     */
-    function handleKeyDown(nativeEvent) {
-      if (!nativeEvent.defaultPrevented) {
-        // IE11, Edge (prior to using Bink?) use 'Esc'
-        if (nativeEvent.key === 'Escape' || nativeEvent.key === 'Esc') {
-          // not calling `preventDefault` since we don't know if people may ignore this event e.g. a permanently open snackbar
-          if (onClose) {
-            onClose(nativeEvent, 'escapeKeyDown');
-          }
-        }
-      }
-    }
-    document.addEventListener('keydown', handleKeyDown);
-    return function () {
-      document.removeEventListener('keydown', handleKeyDown);
-    };
-  }, [exited, open, onClose]);
 
   // So we only render active snackbars.
   if (!open && exited) {
     return null;
   }
   return /*#__PURE__*/_jsx(ClickAwayListener, _extends({
-    onClickAway: handleClickAway
+    onClickAway: onClickAway
   }, ClickAwayListenerProps, {
-    children: /*#__PURE__*/_jsx(SnackbarRoot, _extends({
-      className: clsx(classes.root, className),
-      onBlur: handleBlur,
-      onFocus: handleFocus,
-      onMouseEnter: handleMouseEnter,
-      onMouseLeave: handleMouseLeave,
-      ownerState: ownerState,
-      ref: ref
-      // ClickAwayListener adds an `onClick` prop which results in the alert not being announced.
-      // See https://github.com/mui/material-ui/issues/29080
-      ,
-      role: "presentation"
-    }, other, {
+    children: /*#__PURE__*/_jsx(SnackbarRoot, _extends({}, rootProps, {
       children: /*#__PURE__*/_jsx(TransitionComponent, _extends({
         appear: true,
         in: open,

package/legacy/Stack/Stack.js

@@ -1,130 +1,21 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _typeof from "@babel/runtime/helpers/esm/typeof";
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
 import PropTypes from 'prop-types';
-import { createUnarySpacing, getValue, handleBreakpoints, mergeBreakpointsInOrder, unstable_extendSxProp as extendSxProp, unstable_resolveBreakpointValues as resolveBreakpointValues } from '@mui/system';
-import { deepmerge } from '@mui/utils';
+import { createStack } from '@mui/system';
 import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
-
-/**
- * Return an array with the separator React element interspersed between
- * each React node of the input children.
- *
- * > joinChildren([1,2,3], 0)
- * [1,0,2,0,3]
- */
-import { jsx as _jsx } from "react/jsx-runtime";
-function joinChildren(children, separator) {
-  var childrenArray = React.Children.toArray(children).filter(Boolean);
-  return childrenArray.reduce(function (output, child, index) {
-    output.push(child);
-    if (index < childrenArray.length - 1) {
-      output.push( /*#__PURE__*/React.cloneElement(separator, {
-        key: "separator-".concat(index)
-      }));
+import _useThemeProps from '../styles/useThemeProps';
+var Stack = createStack({
+  createStyledComponent: styled('div', {
+    name: 'MuiStack',
+    slot: 'Root',
+    overridesResolver: function overridesResolver(props, styles) {
+      return styles.root;
     }
-    return output;
-  }, []);
-}
-var getSideFromDirection = function getSideFromDirection(direction) {
-  return {
-    row: 'Left',
-    'row-reverse': 'Right',
-    column: 'Top',
-    'column-reverse': 'Bottom'
-  }[direction];
-};
-export var style = function style(_ref) {
-  var ownerState = _ref.ownerState,
-    theme = _ref.theme;
-  var styles = _extends({
-    display: 'flex',
-    flexDirection: 'column'
-  }, handleBreakpoints({
-    theme: theme
-  }, resolveBreakpointValues({
-    values: ownerState.direction,
-    breakpoints: theme.breakpoints.values
-  }), function (propValue) {
-    return {
-      flexDirection: propValue
-    };
-  }));
-  if (ownerState.spacing) {
-    var transformer = createUnarySpacing(theme);
-    var base = Object.keys(theme.breakpoints.values).reduce(function (acc, breakpoint) {
-      if (_typeof(ownerState.spacing) === 'object' && ownerState.spacing[breakpoint] != null || _typeof(ownerState.direction) === 'object' && ownerState.direction[breakpoint] != null) {
-        acc[breakpoint] = true;
-      }
-      return acc;
-    }, {});
-    var directionValues = resolveBreakpointValues({
-      values: ownerState.direction,
-      base: base
+  }),
+  useThemeProps: function useThemeProps(inProps) {
+    return _useThemeProps({
+      props: inProps,
+      name: 'MuiStack'
     });
-    var spacingValues = resolveBreakpointValues({
-      values: ownerState.spacing,
-      base: base
-    });
-    if (_typeof(directionValues) === 'object') {
-      Object.keys(directionValues).forEach(function (breakpoint, index, breakpoints) {
-        var directionValue = directionValues[breakpoint];
-        if (!directionValue) {
-          var previousDirectionValue = index > 0 ? directionValues[breakpoints[index - 1]] : 'column';
-          directionValues[breakpoint] = previousDirectionValue;
-        }
-      });
-    }
-    var styleFromPropValue = function styleFromPropValue(propValue, breakpoint) {
-      return {
-        '& > :not(style) + :not(style)': _defineProperty({
-          margin: 0
-        }, "margin".concat(getSideFromDirection(breakpoint ? directionValues[breakpoint] : ownerState.direction)), getValue(transformer, propValue))
-      };
-    };
-    styles = deepmerge(styles, handleBreakpoints({
-      theme: theme
-    }, spacingValues, styleFromPropValue));
-  }
-  styles = mergeBreakpointsInOrder(theme.breakpoints, styles);
-  return styles;
-};
-var StackRoot = styled('div', {
-  name: 'MuiStack',
-  slot: 'Root',
-  overridesResolver: function overridesResolver(props, styles) {
-    return [styles.root];
   }
-})(style);
-var Stack = /*#__PURE__*/React.forwardRef(function Stack(inProps, ref) {
-  var themeProps = useThemeProps({
-    props: inProps,
-    name: 'MuiStack'
-  });
-  var props = extendSxProp(themeProps);
-  var _props$component = props.component,
-    component = _props$component === void 0 ? 'div' : _props$component,
-    _props$direction = props.direction,
-    direction = _props$direction === void 0 ? 'column' : _props$direction,
-    _props$spacing = props.spacing,
-    spacing = _props$spacing === void 0 ? 0 : _props$spacing,
-    divider = props.divider,
-    children = props.children,
-    other = _objectWithoutProperties(props, ["component", "direction", "spacing", "divider", "children"]);
-  var ownerState = {
-    direction: direction,
-    spacing: spacing
-  };
-  return /*#__PURE__*/_jsx(StackRoot, _extends({
-    as: component,
-    ownerState: ownerState,
-    ref: ref
-  }, other, {
-    children: divider ? joinChildren(children, divider) : children
-  }));
 });
 process.env.NODE_ENV !== "production" ? Stack.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------

package/legacy/Stack/index.js

@@ -1 +1,2 @@
-export { default } from './Stack';
+export { default } from './Stack';
+export { default as stackClasses } from './stackClasses';

package/legacy/Stack/stackClasses.js

@@ -0,0 +1,7 @@
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
+export function getStackUtilityClass(slot) {
+  return generateUtilityClass('MuiStack', slot);
+}
+var stackClasses = generateUtilityClasses('MuiStack', ['root']);
+export default stackClasses;

package/legacy/Unstable_Grid2/Grid2.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
-import { createGrid } from '@mui/system/Unstable_Grid';
+import { createGrid as createGrid2 } from '@mui/system/Unstable_Grid';
 import { styled, useThemeProps as _useThemeProps } from '../styles';
-var Grid2 = createGrid({
+var Grid2 = createGrid2({
   createStyledComponent: styled('div', {
     name: 'MuiGrid2',
     overridesResolver: function overridesResolver(props, styles) {
@@ -9,7 +9,6 @@ var Grid2 = createGrid({
     }
   }),
   componentName: 'MuiGrid2',
-  // eslint-disable-next-line material-ui/mui-name-matches-component-name
   useThemeProps: function useThemeProps(inProps) {
     return _useThemeProps({
       props: inProps,

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.11.10
+ * @mui/material v5.11.12
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/legacy/styles/CssVarsProvider.js

@@ -3,12 +3,6 @@ import { unstable_createCssVarsProvider as createCssVarsProvider, unstable_style
 import experimental_extendTheme from './experimental_extendTheme';
 import createTypography from './createTypography';
 import excludeVariablesFromRoot from './excludeVariablesFromRoot';
-var shouldSkipGeneratingVar = function shouldSkipGeneratingVar(keys) {
-  var _keys$;
-  return !!keys[0].match(/(typography|mixins|breakpoints|direction|transitions)/) || !!keys[0].match(/sxConfig$/) ||
-  // ends with sxConfig
-  keys[0] === 'palette' && !!((_keys$ = keys[1]) != null && _keys$.match(/(mode|contrastThreshold|tonalOffset)/));
-};
 var defaultTheme = experimental_extendTheme();
 var _createCssVarsProvide = createCssVarsProvider({
     theme: defaultTheme,
@@ -31,10 +25,9 @@ var _createCssVarsProvide = createCssVarsProvider({
       };
       return newTheme;
     },
-    shouldSkipGeneratingVar: shouldSkipGeneratingVar,
     excludeVariablesFromRoot: excludeVariablesFromRoot
   }),
   CssVarsProvider = _createCssVarsProvide.CssVarsProvider,
   useColorScheme = _createCssVarsProvide.useColorScheme,
   getInitColorSchemeScript = _createCssVarsProvide.getInitColorSchemeScript;
-export { useColorScheme, getInitColorSchemeScript, shouldSkipGeneratingVar, CssVarsProvider as Experimental_CssVarsProvider };
+export { useColorScheme, getInitColorSchemeScript, CssVarsProvider as Experimental_CssVarsProvider };

package/legacy/styles/createTheme.js

@@ -47,6 +47,7 @@ function createTheme() {
     return deepmerge(acc, argument);
   }, muiTheme);
   if (process.env.NODE_ENV !== 'production') {
+    // TODO v6: Refactor to use globalStateClassesMapping from @mui/utils once `readOnly` state class is used in Rating component.
     var stateClasses = ['active', 'checked', 'completed', 'disabled', 'error', 'expanded', 'focused', 'focusVisible', 'required', 'selected'];
     var traverse = function traverse(node, component) {
       var key;