@mui/material 6.4.0 → 6.4.2

package/modern/TextareaAutosize/TextareaAutosize.js

@@ -22,8 +22,15 @@ const styles = {
     transform: 'translateZ(0)'
   }
 };
+function isObjectEmpty(object) {
+  // eslint-disable-next-line
+  for (const _ in object) {
+    return false;
+  }
+  return true;
+}
 function isEmpty(obj) {
-  return obj === undefined || obj === null || Object.keys(obj).length === 0 || obj.outerHeightStyle === 0 && !obj.overflowing;
+  return isObjectEmpty(obj) || obj.outerHeightStyle === 0 && !obj.overflowing;
 }
 
 /**
@@ -48,14 +55,18 @@ const TextareaAutosize = /*#__PURE__*/React.forwardRef(function TextareaAutosize
   const {
     current: isControlled
   } = React.useRef(value != null);
-  const inputRef = React.useRef(null);
-  const handleRef = useForkRef(forwardedRef, inputRef);
+  const textareaRef = React.useRef(null);
+  const handleRef = useForkRef(forwardedRef, textareaRef);
   const heightRef = React.useRef(null);
-  const shadowRef = React.useRef(null);
+  const hiddenTextareaRef = React.useRef(null);
   const calculateTextareaStyles = React.useCallback(() => {
-    const input = inputRef.current;
-    const containerWindow = ownerWindow(input);
-    const computedStyle = containerWindow.getComputedStyle(input);
+    const textarea = textareaRef.current;
+    const hiddenTextarea = hiddenTextareaRef.current;
+    if (!textarea || !hiddenTextarea) {
+      return undefined;
+    }
+    const containerWindow = ownerWindow(textarea);
+    const computedStyle = containerWindow.getComputedStyle(textarea);
 
     // If input's width is shrunk and it's not visible, don't sync height.
     if (computedStyle.width === '0px') {
@@ -64,25 +75,24 @@ const TextareaAutosize = /*#__PURE__*/React.forwardRef(function TextareaAutosize
         overflowing: false
       };
     }
-    const inputShallow = shadowRef.current;
-    inputShallow.style.width = computedStyle.width;
-    inputShallow.value = input.value || props.placeholder || 'x';
-    if (inputShallow.value.slice(-1) === '\n') {
+    hiddenTextarea.style.width = computedStyle.width;
+    hiddenTextarea.value = textarea.value || props.placeholder || 'x';
+    if (hiddenTextarea.value.slice(-1) === '\n') {
       // Certain fonts which overflow the line height will cause the textarea
       // to report a different scrollHeight depending on whether the last line
       // is empty. Make it non-empty to avoid this issue.
-      inputShallow.value += ' ';
+      hiddenTextarea.value += ' ';
     }
     const boxSizing = computedStyle.boxSizing;
     const padding = getStyleValue(computedStyle.paddingBottom) + getStyleValue(computedStyle.paddingTop);
     const border = getStyleValue(computedStyle.borderBottomWidth) + getStyleValue(computedStyle.borderTopWidth);
 
     // The height of the inner content
-    const innerHeight = inputShallow.scrollHeight;
+    const innerHeight = hiddenTextarea.scrollHeight;
 
     // Measure height of a textarea with a single row
-    inputShallow.value = 'x';
-    const singleRowHeight = inputShallow.scrollHeight;
+    hiddenTextarea.value = 'x';
+    const singleRowHeight = hiddenTextarea.scrollHeight;
 
     // The height of the outer content
     let outerHeight = innerHeight;
@@ -103,45 +113,45 @@ const TextareaAutosize = /*#__PURE__*/React.forwardRef(function TextareaAutosize
     };
   }, [maxRows, minRows, props.placeholder]);
   const syncHeight = React.useCallback(() => {
+    const textarea = textareaRef.current;
     const textareaStyles = calculateTextareaStyles();
-    if (isEmpty(textareaStyles)) {
+    if (!textarea || !textareaStyles || isEmpty(textareaStyles)) {
       return;
     }
     const outerHeightStyle = textareaStyles.outerHeightStyle;
-    const input = inputRef.current;
     if (heightRef.current !== outerHeightStyle) {
       heightRef.current = outerHeightStyle;
-      input.style.height = `${outerHeightStyle}px`;
+      textarea.style.height = `${outerHeightStyle}px`;
     }
-    input.style.overflow = textareaStyles.overflowing ? 'hidden' : '';
+    textarea.style.overflow = textareaStyles.overflowing ? 'hidden' : '';
   }, [calculateTextareaStyles]);
+  const frameRef = React.useRef(-1);
   useEnhancedEffect(() => {
-    const handleResize = () => {
-      syncHeight();
-    };
-    // Workaround a "ResizeObserver loop completed with undelivered notifications" error
-    // in test.
-    // Note that we might need to use this logic in production per https://github.com/WICG/resize-observer/issues/38
-    // Also see https://github.com/mui/mui-x/issues/8733
-    let rAF;
-    const rAFHandleResize = () => {
-      cancelAnimationFrame(rAF);
-      rAF = requestAnimationFrame(() => {
-        handleResize();
-      });
-    };
-    const debounceHandleResize = debounce(handleResize);
-    const input = inputRef.current;
-    const containerWindow = ownerWindow(input);
+    const debounceHandleResize = debounce(() => syncHeight());
+    const textarea = textareaRef?.current;
+    if (!textarea) {
+      return undefined;
+    }
+    const containerWindow = ownerWindow(textarea);
     containerWindow.addEventListener('resize', debounceHandleResize);
     let resizeObserver;
     if (typeof ResizeObserver !== 'undefined') {
-      resizeObserver = new ResizeObserver(process.env.NODE_ENV === 'test' ? rAFHandleResize : handleResize);
-      resizeObserver.observe(input);
+      resizeObserver = new ResizeObserver(() => {
+        // avoid "ResizeObserver loop completed with undelivered notifications" error
+        // by temporarily unobserving the textarea element while manipulating the height
+        // and reobserving one frame later
+        resizeObserver.unobserve(textarea);
+        cancelAnimationFrame(frameRef.current);
+        syncHeight();
+        frameRef.current = requestAnimationFrame(() => {
+          resizeObserver.observe(textarea);
+        });
+      });
+      resizeObserver.observe(textarea);
     }
     return () => {
       debounceHandleResize.clear();
-      cancelAnimationFrame(rAF);
+      cancelAnimationFrame(frameRef.current);
       containerWindow.removeEventListener('resize', debounceHandleResize);
       if (resizeObserver) {
         resizeObserver.disconnect();
@@ -173,7 +183,7 @@ const TextareaAutosize = /*#__PURE__*/React.forwardRef(function TextareaAutosize
       "aria-hidden": true,
       className: props.className,
       readOnly: true,
-      ref: shadowRef,
+      ref: hiddenTextareaRef,
       tabIndex: -1,
       style: {
         ...styles.shadow,

package/modern/ToggleButtonGroup/ToggleButtonGroupButtonContext.js

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

package/modern/ToggleButtonGroup/ToggleButtonGroupContext.js

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

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v6.4.0
+ * @mui/material v6.4.2
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/styles/components.js

@@ -0,0 +1 @@
+export {};

package/modern/styles/overrides.js

@@ -0,0 +1 @@
+export {};

package/modern/styles/props.js

@@ -0,0 +1 @@
+export {};

package/modern/styles/variants.js

@@ -0,0 +1 @@
+export {};

package/modern/useAutocomplete/useAutocomplete.js

@@ -47,6 +47,13 @@ const defaultFilterOptions = createFilterOptions();
 const pageSize = 5;
 const defaultIsActiveElementInListbox = listboxRef => listboxRef.current !== null && listboxRef.current.parentElement?.contains(document.activeElement);
 const MULTIPLE_DEFAULT_VALUE = [];
+function getInputValue(value, multiple, getOptionLabel) {
+  if (multiple || value == null) {
+    return '';
+  }
+  const optionLabel = getOptionLabel(value);
+  return typeof optionLabel === 'string' ? optionLabel : '';
+}
 function useAutocomplete(props) {
   const {
     // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -112,6 +119,10 @@ function useAutocomplete(props) {
   const [focusedTag, setFocusedTag] = React.useState(-1);
   const defaultHighlighted = autoHighlight ? 0 : -1;
   const highlightedIndexRef = React.useRef(defaultHighlighted);
+
+  // Calculate the initial inputValue on mount only.
+  // Using useRef since defaultValue doesn't need to update inputValue dynamically.
+  const initialInputValue = React.useRef(getInputValue(defaultValue, multiple, getOptionLabel)).current;
   const [value, setValueState] = useControlled({
     controlled: valueProp,
     default: defaultValue,
@@ -119,7 +130,7 @@ function useAutocomplete(props) {
   });
   const [inputValue, setInputValueState] = useControlled({
     controlled: inputValueProp,
-    default: '',
+    default: initialInputValue,
     name: componentName,
     state: 'inputValue'
   });
@@ -131,15 +142,7 @@ function useAutocomplete(props) {
     if (!isOptionSelected && !clearOnBlur) {
       return;
     }
-    let newInputValue;
-    if (multiple) {
-      newInputValue = '';
-    } else if (newValue == null) {
-      newInputValue = '';
-    } else {
-      const optionLabel = getOptionLabel(newValue);
-      newInputValue = typeof optionLabel === 'string' ? optionLabel : '';
-    }
+    const newInputValue = getInputValue(newValue, multiple, getOptionLabel);
     if (inputValue === newInputValue) {
       return;
     }

package/modern/version/index.js

@@ -1,6 +1,6 @@
-export const version = "6.4.0";
+export const version = "6.4.2";
 export const major = Number("6");
 export const minor = Number("4");
-export const patch = Number("0");
+export const patch = Number("2");
 export const prerelease = undefined;
 export default version;

package/node/ButtonGroup/ButtonGroupButtonContext.js

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

package/node/ButtonGroup/ButtonGroupContext.js

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

package/node/Dialog/Dialog.js

@@ -22,6 +22,7 @@ var _Backdrop = _interopRequireDefault(require("../Backdrop"));
 var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
+var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
 var _jsxRuntime = require("react/jsx-runtime");
 const DialogBackdrop = (0, _zeroStyled.styled)(_Backdrop.default, {
   name: 'MuiDialog',
@@ -225,6 +226,8 @@ const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(inProps, ref) {
     PaperComponent = _Paper.default,
     PaperProps = {},
     scroll = 'paper',
+    slots = {},
+    slotProps = {},
     TransitionComponent = _Fade.default,
     transitionDuration = defaultTransitionDuration,
     TransitionProps,
@@ -268,46 +271,89 @@ const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(inProps, ref) {
       titleId: ariaLabelledby
     };
   }, [ariaLabelledby]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(DialogRoot, {
+  const backwardCompatibleSlots = {
+    transition: TransitionComponent,
+    ...slots
+  };
+  const backwardCompatibleSlotProps = {
+    transition: TransitionProps,
+    paper: PaperProps,
+    backdrop: BackdropProps,
+    ...slotProps
+  };
+  const externalForwardedProps = {
+    slots: backwardCompatibleSlots,
+    slotProps: backwardCompatibleSlotProps
+  };
+  const [RootSlot, rootSlotProps] = (0, _useSlot.default)('root', {
+    elementType: DialogRoot,
+    shouldForwardComponentProp: true,
+    externalForwardedProps,
+    ownerState,
     className: (0, _clsx.default)(classes.root, className),
+    ref
+  });
+  const [BackdropSlot, backdropSlotProps] = (0, _useSlot.default)('backdrop', {
+    elementType: DialogBackdrop,
+    shouldForwardComponentProp: true,
+    externalForwardedProps,
+    ownerState
+  });
+  const [PaperSlot, paperSlotProps] = (0, _useSlot.default)('paper', {
+    elementType: DialogPaper,
+    shouldForwardComponentProp: true,
+    externalForwardedProps,
+    ownerState,
+    className: (0, _clsx.default)(classes.paper, PaperProps.className)
+  });
+  const [ContainerSlot, containerSlotProps] = (0, _useSlot.default)('container', {
+    elementType: DialogContainer,
+    externalForwardedProps,
+    ownerState,
+    className: (0, _clsx.default)(classes.container)
+  });
+  const [TransitionSlot, transitionSlotProps] = (0, _useSlot.default)('transition', {
+    elementType: _Fade.default,
+    externalForwardedProps,
+    ownerState,
+    additionalProps: {
+      appear: true,
+      in: open,
+      timeout: transitionDuration,
+      role: 'presentation'
+    }
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(RootSlot, {
     closeAfterTransition: true,
-    components: {
-      Backdrop: DialogBackdrop
+    slots: {
+      backdrop: BackdropSlot
     },
-    componentsProps: {
+    slotProps: {
       backdrop: {
         transitionDuration,
         as: BackdropComponent,
-        ...BackdropProps
+        ...backdropSlotProps
       }
     },
     disableEscapeKeyDown: disableEscapeKeyDown,
     onClose: onClose,
     open: open,
-    ref: ref,
     onClick: handleBackdropClick,
-    ownerState: ownerState,
+    ...rootSlotProps,
     ...other,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TransitionComponent, {
-      appear: true,
-      in: open,
-      timeout: transitionDuration,
-      role: "presentation",
-      ...TransitionProps,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DialogContainer, {
-        className: (0, _clsx.default)(classes.container),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TransitionSlot, {
+      ...transitionSlotProps,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContainerSlot, {
         onMouseDown: handleMouseDown,
-        ownerState: ownerState,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DialogPaper, {
+        ...containerSlotProps,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PaperSlot, {
           as: PaperComponent,
           elevation: 24,
           role: "dialog",
           "aria-describedby": ariaDescribedby,
           "aria-labelledby": ariaLabelledby,
           "aria-modal": ariaModal,
-          ...PaperProps,
-          className: (0, _clsx.default)(classes.paper, PaperProps.className),
-          ownerState: ownerState,
+          ...paperSlotProps,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DialogContext.default.Provider, {
             value: dialogContextValue,
             children: children
@@ -419,6 +465,7 @@ process.env.NODE_ENV !== "production" ? Dialog.propTypes /* remove-proptypes */
   /**
    * Props applied to the [`Paper`](https://mui.com/material-ui/api/paper/) element.
    * @default {}
+   * @deprecated Use `slotProps.paper` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   PaperProps: _propTypes.default.object,
   /**
@@ -426,6 +473,28 @@ process.env.NODE_ENV !== "production" ? Dialog.propTypes /* remove-proptypes */
    * @default 'paper'
    */
   scroll: _propTypes.default.oneOf(['body', 'paper']),
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: _propTypes.default.shape({
+    backdrop: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    container: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    paper: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    transition: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: _propTypes.default.shape({
+    backdrop: _propTypes.default.elementType,
+    container: _propTypes.default.elementType,
+    paper: _propTypes.default.elementType,
+    root: _propTypes.default.elementType,
+    transition: _propTypes.default.elementType
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
@@ -434,6 +503,7 @@ process.env.NODE_ENV !== "production" ? Dialog.propTypes /* remove-proptypes */
    * 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 Fade
+   * @deprecated Use `slots.transition` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   TransitionComponent: _propTypes.default.elementType,
   /**
@@ -452,6 +522,7 @@ process.env.NODE_ENV !== "production" ? Dialog.propTypes /* remove-proptypes */
   /**
    * 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: _propTypes.default.object
 } : void 0;

package/node/Dialog/DialogContext.js

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

package/node/Drawer/Drawer.js

@@ -38,7 +38,7 @@ const useUtilityClasses = ownerState => {
     variant
   } = ownerState;
   const slots = {
-    root: ['root'],
+    root: ['root', `anchor${(0, _capitalize.default)(anchor)}`],
     docked: [(variant === 'permanent' || variant === 'persistent') && 'docked'],
     modal: ['modal'],
     paper: ['paper', `paperAnchor${(0, _capitalize.default)(anchor)}`, variant !== 'temporary' && `paperAnchorDocked${(0, _capitalize.default)(anchor)}`]

package/node/Drawer/drawerClasses.js

@@ -11,5 +11,5 @@ var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateU
 function getDrawerUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiDrawer', slot);
 }
-const drawerClasses = (0, _generateUtilityClasses.default)('MuiDrawer', ['root', 'docked', 'paper', 'paperAnchorLeft', 'paperAnchorRight', 'paperAnchorTop', 'paperAnchorBottom', 'paperAnchorDockedLeft', 'paperAnchorDockedRight', 'paperAnchorDockedTop', 'paperAnchorDockedBottom', 'modal']);
+const drawerClasses = (0, _generateUtilityClasses.default)('MuiDrawer', ['root', 'docked', 'paper', 'anchorLeft', 'anchorRight', 'anchorTop', 'anchorBottom', 'paperAnchorLeft', 'paperAnchorRight', 'paperAnchorTop', 'paperAnchorBottom', 'paperAnchorDockedLeft', 'paperAnchorDockedRight', 'paperAnchorDockedTop', 'paperAnchorDockedBottom', 'modal']);
 var _default = exports.default = drawerClasses;

package/node/FormControl/FormControl.js

@@ -186,6 +186,12 @@ const FormControl = /*#__PURE__*/React.forwardRef(function FormControl(inProps,
       };
     };
   }
+  const onFilled = React.useCallback(() => {
+    setFilled(true);
+  }, []);
+  const onEmpty = React.useCallback(() => {
+    setFilled(false);
+  }, []);
   const childContext = React.useMemo(() => {
     return {
       adornedStart,
@@ -201,20 +207,16 @@ const FormControl = /*#__PURE__*/React.forwardRef(function FormControl(inProps,
       onBlur: () => {
         setFocused(false);
       },
-      onEmpty: () => {
-        setFilled(false);
-      },
-      onFilled: () => {
-        setFilled(true);
-      },
       onFocus: () => {
         setFocused(true);
       },
+      onEmpty,
+      onFilled,
       registerEffect,
       required,
       variant
     };
-  }, [adornedStart, color, disabled, error, filled, focused, fullWidth, hiddenLabel, registerEffect, required, size, variant]);
+  }, [adornedStart, color, disabled, error, filled, focused, fullWidth, hiddenLabel, registerEffect, onEmpty, onFilled, required, size, variant]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormControlContext.default.Provider, {
     value: childContext,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(FormControlRoot, {

package/node/FormControl/FormControlContext.js

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

package/node/Hidden/withWidth.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

package/node/IconButton/IconButton.js

@@ -34,7 +34,8 @@ const useUtilityClasses = ownerState => {
   } = ownerState;
   const slots = {
     root: ['root', loading && 'loading', disabled && 'disabled', color !== 'default' && `color${(0, _capitalize.default)(color)}`, edge && `edge${(0, _capitalize.default)(edge)}`, `size${(0, _capitalize.default)(size)}`],
-    loadingIndicator: ['loadingIndicator']
+    loadingIndicator: ['loadingIndicator'],
+    loadingWrapper: ['loadingWrapper']
   };
   return (0, _composeClasses.default)(slots, _iconButtonClasses.getIconButtonUtilityClass, classes);
 };
@@ -195,7 +196,7 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, re
     disableFocusRipple = false,
     size = 'medium',
     id: idProp,
-    loading = false,
+    loading = null,
     loadingIndicator: loadingIndicatorProp,
     ...other
   } = props;
@@ -225,10 +226,19 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, re
     ref: ref,
     ...other,
     ownerState: ownerState,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(IconButtonLoadingIndicator, {
-      className: classes.loadingIndicator,
-      ownerState: ownerState,
-      children: loading && loadingIndicator
+    children: [typeof loading === 'boolean' &&
+    /*#__PURE__*/
+    // use plain HTML span to minimize the runtime overhead
+    (0, _jsxRuntime.jsx)("span", {
+      className: classes.loadingWrapper,
+      style: {
+        display: 'contents'
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButtonLoadingIndicator, {
+        className: classes.loadingIndicator,
+        ownerState: ownerState,
+        children: loading && loadingIndicator
+      })
     }), children]
   });
 });
@@ -294,7 +304,8 @@ process.env.NODE_ENV !== "production" ? IconButton.propTypes /* remove-proptypes
   id: _propTypes.default.string,
   /**
    * If `true`, the loading indicator is visible and the button is disabled.
-   * @default false
+   * If `true | false`, the loading wrapper is always rendered before the children to prevent [Google Translation Crash](https://github.com/mui/material-ui/issues/27853).
+   * @default null
    */
   loading: _propTypes.default.bool,
   /**

package/node/IconButton/iconButtonClasses.js

@@ -11,5 +11,5 @@ var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateU
 function getIconButtonUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiIconButton', slot);
 }
-const iconButtonClasses = (0, _generateUtilityClasses.default)('MuiIconButton', ['root', 'disabled', 'colorInherit', 'colorPrimary', 'colorSecondary', 'colorError', 'colorInfo', 'colorSuccess', 'colorWarning', 'edgeStart', 'edgeEnd', 'sizeSmall', 'sizeMedium', 'sizeLarge', 'loading', 'loadingIndicator']);
+const iconButtonClasses = (0, _generateUtilityClasses.default)('MuiIconButton', ['root', 'disabled', 'colorInherit', 'colorPrimary', 'colorSecondary', 'colorError', 'colorInfo', 'colorSuccess', 'colorWarning', 'edgeStart', 'edgeEnd', 'sizeSmall', 'sizeMedium', 'sizeLarge', 'loading', 'loadingIndicator', 'loadingWrapper']);
 var _default = exports.default = iconButtonClasses;

package/node/OverridableComponent/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/node/RadioGroup/RadioGroupContext.js

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

package/node/Slider/useSlider.js

@@ -255,9 +255,9 @@ function useSlider(parameters) {
     let newValue = valueInput;
     if (marks && step == null) {
       const maxMarksValue = marksValues[marksValues.length - 1];
-      if (newValue > maxMarksValue) {
+      if (newValue >= maxMarksValue) {
         newValue = maxMarksValue;
-      } else if (newValue < marksValues[0]) {
+      } else if (newValue <= marksValues[0]) {
         newValue = marksValues[0];
       } else {
         newValue = newValue < value ? marksValues[marksIndex - 1] : marksValues[marksIndex + 1];

package/node/Step/StepContext.js

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

package/node/Stepper/StepperContext.js

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

package/node/Table/Tablelvl2Context.js

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