@mui/material 5.15.6 → 5.15.7

package/umd/material-ui.development.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.15.6
+ * @mui/material v5.15.7
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -5764,9 +5764,104 @@
     }, refs);
   }
 
+  var UNINITIALIZED = {};
+
+  /**
+   * A React.useRef() that is initialized lazily with a function. Note that it accepts an optional
+   * initialization argument, so the initialization function doesn't need to be an inline closure.
+   *
+   * @usage
+   *   const ref = useLazyRef(sortColumns, columns)
+   */
+  function useLazyRef(init, initArg) {
+    var ref = React__namespace.useRef(UNINITIALIZED);
+    if (ref.current === UNINITIALIZED) {
+      ref.current = init(initArg);
+    }
+    return ref;
+  }
+
+  function _classCallCheck(instance, Constructor) {
+    if (!(instance instanceof Constructor)) {
+      throw new TypeError("Cannot call a class as a function");
+    }
+  }
+
+  function _defineProperties(target, props) {
+    for (var i = 0; i < props.length; i++) {
+      var descriptor = props[i];
+      descriptor.enumerable = descriptor.enumerable || false;
+      descriptor.configurable = true;
+      if ("value" in descriptor) descriptor.writable = true;
+      Object.defineProperty(target, toPropertyKey(descriptor.key), descriptor);
+    }
+  }
+  function _createClass(Constructor, protoProps, staticProps) {
+    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+    if (staticProps) _defineProperties(Constructor, staticProps);
+    Object.defineProperty(Constructor, "prototype", {
+      writable: false
+    });
+    return Constructor;
+  }
+
+  var EMPTY = [];
+
+  /**
+   * A React.useEffect equivalent that runs once, when the component is mounted.
+   */
+  function useOnMount(fn) {
+    /* eslint-disable react-hooks/exhaustive-deps */
+    React__namespace.useEffect(fn, EMPTY);
+    /* eslint-enable react-hooks/exhaustive-deps */
+  }
+
+  var Timeout = /*#__PURE__*/function () {
+    function Timeout() {
+      var _this = this;
+      _classCallCheck(this, Timeout);
+      this.currentId = 0;
+      this.clear = function () {
+        if (_this.currentId !== 0) {
+          clearTimeout(_this.currentId);
+          _this.currentId = 0;
+        }
+      };
+      this.disposeEffect = function () {
+        return _this.clear;
+      };
+    }
+    _createClass(Timeout, [{
+      key: "start",
+      value:
+      /**
+       * Executes `fn` after `delay`, clearing any previously scheduled call.
+       */
+      function start(delay, fn) {
+        var _this2 = this;
+        this.clear();
+        this.currentId = setTimeout(function () {
+          _this2.currentId = 0;
+          fn();
+        }, delay);
+      }
+    }], [{
+      key: "create",
+      value: function create() {
+        return new Timeout();
+      }
+    }]);
+    return Timeout;
+  }();
+  function useTimeout() {
+    var timeout = useLazyRef(Timeout.create).current;
+    useOnMount(timeout.disposeEffect);
+    return timeout;
+  }
+
   var hadKeyboardEvent = true;
   var hadFocusVisibleRecently = false;
-  var hadFocusVisibleRecentlyTimeout;
+  var hadFocusVisibleRecentlyTimeout = new Timeout();
   var inputTypesWhitelist = {
     text: true,
     search: true,
@@ -5886,10 +5981,9 @@
         // If we don't see a visibility change within 100ms, it's probably a
         // regular focus change.
         hadFocusVisibleRecently = true;
-        window.clearTimeout(hadFocusVisibleRecentlyTimeout);
-        hadFocusVisibleRecentlyTimeout = window.setTimeout(function () {
+        hadFocusVisibleRecentlyTimeout.start(100, function () {
           hadFocusVisibleRecently = false;
-        }, 100);
+        });
         isFocusVisibleRef.current = false;
         return true;
       }
@@ -7405,6 +7499,79 @@
   styleFunctionSx.filterProps = ['sx'];
   var styleFunctionSx$1 = styleFunctionSx;
 
+  /**
+   * A universal utility to style components with multiple color modes. Always use it from the theme object.
+   * It works with:
+   *  - [Basic theme](https://mui.com/material-ui/customization/dark-mode/)
+   *  - [CSS theme variables](https://mui.com/material-ui/experimental-api/css-theme-variables/overview/)
+   *  - Zero-runtime engine
+   *
+   * Tips: Use an array over object spread and place `theme.applyStyles()` last.
+   *
+   * ✅ [{ background: '#e5e5e5' }, theme.applyStyles('dark', { background: '#1c1c1c' })]
+   *
+   * 🚫 { background: '#e5e5e5', ...theme.applyStyles('dark', { background: '#1c1c1c' })}
+   *
+   * @example
+   * 1. using with `styled`:
+   * ```jsx
+   *   const Component = styled('div')(({ theme }) => [
+   *     { background: '#e5e5e5' },
+   *     theme.applyStyles('dark', {
+   *       background: '#1c1c1c',
+   *       color: '#fff',
+   *     }),
+   *   ]);
+   * ```
+   *
+   * @example
+   * 2. using with `sx` prop:
+   * ```jsx
+   *   <Box sx={theme => [
+   *     { background: '#e5e5e5' },
+   *     theme.applyStyles('dark', {
+   *        background: '#1c1c1c',
+   *        color: '#fff',
+   *      }),
+   *     ]}
+   *   />
+   * ```
+   *
+   * @example
+   * 3. theming a component:
+   * ```jsx
+   *   extendTheme({
+   *     components: {
+   *       MuiButton: {
+   *         styleOverrides: {
+   *           root: ({ theme }) => [
+   *             { background: '#e5e5e5' },
+   *             theme.applyStyles('dark', {
+   *               background: '#1c1c1c',
+   *               color: '#fff',
+   *             }),
+   *           ],
+   *         },
+   *       }
+   *     }
+   *   })
+   *```
+   */
+  function applyStyles$2(key, styles) {
+    // @ts-expect-error this is 'any' type
+    var theme = this;
+    if (theme.vars && typeof theme.getColorSchemeSelector === 'function') {
+      // If CssVarsProvider is used as a provider,
+      // returns '* :where([data-mui-color-scheme="light|dark"]) &'
+      var selector = theme.getColorSchemeSelector(key).replace(/(\[[^\]]+\])/, '*:where($1)');
+      return _defineProperty({}, selector, styles);
+    }
+    if (theme.palette.mode === key) {
+      return styles;
+    }
+    return {};
+  }
+
   function createTheme$1() {
     var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     var _options$breakpoints = options.breakpoints,
@@ -7428,6 +7595,7 @@
       spacing: spacing,
       shape: _extends({}, shape$1, shapeInput)
     }, other);
+    muiTheme.applyStyles = applyStyles$2;
     for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
       args[_key - 1] = arguments[_key];
     }
@@ -7918,7 +8086,7 @@
     return resolveProps(theme.components[name].defaultProps, props);
   }
 
-  function useThemeProps$1(_ref) {
+  function useThemeProps$2(_ref) {
     var props = _ref.props,
       name = _ref.name,
       defaultTheme = _ref.defaultTheme,
@@ -9243,7 +9411,7 @@
     }
   });
   var useThemePropsDefault$2 = function useThemePropsDefault(inProps) {
-    return useThemeProps$1({
+    return useThemeProps$2({
       props: inProps,
       name: 'MuiContainer',
       defaultTheme: defaultTheme$6
@@ -9631,7 +9799,7 @@
     }
   });
   function useThemePropsDefault$1(props) {
-    return useThemeProps$1({
+    return useThemeProps$2({
       props: props,
       name: 'MuiGrid',
       defaultTheme: defaultTheme$5
@@ -9795,7 +9963,7 @@
     }
   });
   function useThemePropsDefault(props) {
-    return useThemeProps$1({
+    return useThemeProps$2({
       props: props,
       name: 'MuiStack',
       defaultTheme: defaultTheme$4
@@ -10565,19 +10733,7 @@
       shadows: shadows$1.slice(),
       typography: createTypography(palette, typographyInput),
       transitions: createTransitions(transitionsInput),
-      zIndex: _extends({}, zIndex$1),
-      applyDarkStyles: function applyDarkStyles(css) {
-        if (this.vars) {
-          // If CssVarsProvider is used as a provider,
-          // returns ':where([data-mui-color-scheme="light|dark"]) &'
-          var selector = this.getColorSchemeSelector('dark').replace(/(\[[^\]]+\])/, ':where($1)');
-          return _defineProperty({}, selector, css);
-        }
-        if (this.palette.mode === 'dark') {
-          return css;
-        }
-        return {};
-      }
+      zIndex: _extends({}, zIndex$1)
     });
     muiTheme = deepmerge(muiTheme, other);
     for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
@@ -10849,10 +11005,10 @@
     return theme[THEME_ID] || theme;
   }
 
-  function useThemeProps(_ref) {
+  function useThemeProps$1(_ref) {
     var props = _ref.props,
       name = _ref.name;
-    return useThemeProps$1({
+    return useThemeProps$2({
       props: props,
       name: name,
       defaultTheme: defaultTheme$3,
@@ -11343,7 +11499,7 @@
     };
   });
   var SvgIcon = /*#__PURE__*/React__namespace.forwardRef(function SvgIcon(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiSvgIcon'
     });
@@ -12587,7 +12743,7 @@
    * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
    */
   var Collapse = /*#__PURE__*/React__namespace.forwardRef(function Collapse(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiCollapse'
     });
@@ -12619,17 +12775,12 @@
     });
     var classes = useUtilityClasses$1N(ownerState);
     var theme = useTheme();
-    var timer = React__namespace.useRef();
+    var timer = useTimeout();
     var wrapperRef = React__namespace.useRef(null);
     var autoTransitionDuration = React__namespace.useRef();
     var collapsedSize = typeof collapsedSizeProp === 'number' ? "".concat(collapsedSizeProp, "px") : collapsedSizeProp;
     var isHorizontal = orientation === 'horizontal';
     var size = isHorizontal ? 'width' : 'height';
-    React__namespace.useEffect(function () {
-      return function () {
-        clearTimeout(timer.current);
-      };
-    }, []);
     var nodeRef = React__namespace.useRef(null);
     var handleRef = useForkRef(ref, nodeRef);
     var normalizedTransitionCallback = function normalizedTransitionCallback(callback) {
@@ -12728,7 +12879,7 @@
     });
     var handleAddEndListener = function handleAddEndListener(next) {
       if (timeout === 'auto') {
-        timer.current = setTimeout(next, autoTransitionDuration.current || 0);
+        timer.start(autoTransitionDuration.current || 0, next);
       }
       if (addEndListener) {
         // Old call signature before `react-transition-group` implemented `nodeRef`
@@ -12920,7 +13071,7 @@
     }));
   });
   var Paper = /*#__PURE__*/React__namespace.forwardRef(function Paper(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiPaper'
     });
@@ -13380,7 +13531,7 @@
     }));
   });
   var Accordion = /*#__PURE__*/React__namespace.forwardRef(function Accordion(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiAccordion'
     });
@@ -13604,7 +13755,7 @@
     });
   });
   var AccordionActions = /*#__PURE__*/React__namespace.forwardRef(function AccordionActions(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiAccordionActions'
     });
@@ -13677,7 +13828,7 @@
     };
   });
   var AccordionDetails = /*#__PURE__*/React__namespace.forwardRef(function AccordionDetails(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiAccordionDetails'
     });
@@ -13858,7 +14009,7 @@
    * TODO v5: Make private
    */
   var TouchRipple = /*#__PURE__*/React__namespace.forwardRef(function TouchRipple(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiTouchRipple'
     });
@@ -13884,18 +14035,11 @@
     var ignoringMouseDown = React__namespace.useRef(false);
     // We use a timer in order to only show the ripples for touch "click" like events.
     // We don't want to display the ripple for touch scroll events.
-    var startTimer = React__namespace.useRef(0);
+    var startTimer = useTimeout();
 
     // This is the hook called once the previous timeout is ready.
     var startTimerCommit = React__namespace.useRef(null);
     var container = React__namespace.useRef(null);
-    React__namespace.useEffect(function () {
-      return function () {
-        if (startTimer.current) {
-          clearTimeout(startTimer.current);
-        }
-      };
-    }, []);
     var startCommit = React__namespace.useCallback(function (params) {
       var pulsate = params.pulsate,
         rippleX = params.rippleX,
@@ -13991,12 +14135,13 @@
             });
           };
           // Delay the execution of the ripple effect.
-          startTimer.current = setTimeout(function () {
+          // We have to make a tradeoff with this delay value.
+          startTimer.start(DELAY_RIPPLE, function () {
             if (startTimerCommit.current) {
               startTimerCommit.current();
               startTimerCommit.current = null;
             }
-          }, DELAY_RIPPLE); // We have to make a tradeoff with this value.
+          });
         }
       } else {
         startCommit({
@@ -14007,21 +14152,21 @@
           cb: cb
         });
       }
-    }, [centerProp, startCommit]);
+    }, [centerProp, startCommit, startTimer]);
     var pulsate = React__namespace.useCallback(function () {
       start({}, {
         pulsate: true
       });
     }, [start]);
     var stop = React__namespace.useCallback(function (event, cb) {
-      clearTimeout(startTimer.current);
+      startTimer.clear();
 
       // The touch interaction occurs too quickly.
       // We still want to show ripple effect.
       if ((event == null ? void 0 : event.type) === 'touchend' && startTimerCommit.current) {
         startTimerCommit.current();
         startTimerCommit.current = null;
-        startTimer.current = setTimeout(function () {
+        startTimer.start(0, function () {
           stop(event, cb);
         });
         return;
@@ -14034,7 +14179,7 @@
         return oldRipples;
       });
       rippleCallback.current = cb;
-    }, []);
+    }, [startTimer]);
     React__namespace.useImperativeHandle(ref, function () {
       return {
         pulsate: pulsate,
@@ -14141,7 +14286,7 @@
    * It contains a load of style reset and some focus/ripple logic.
    */
   var ButtonBase = /*#__PURE__*/React__namespace.forwardRef(function ButtonBase(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiButtonBase'
     });
@@ -14633,7 +14778,7 @@
     });
   });
   var AccordionSummary = /*#__PURE__*/React__namespace.forwardRef(function AccordionSummary(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiAccordionSummary'
     });
@@ -14820,7 +14965,7 @@
    * regarding the available icon options.
    */
   var IconButton = /*#__PURE__*/React__namespace.forwardRef(function IconButton(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiIconButton'
     });
@@ -15054,7 +15199,7 @@
   };
   var Alert = /*#__PURE__*/React__namespace.forwardRef(function Alert(inProps, ref) {
     var _ref4, _slots$closeButton, _ref5, _slots$closeIcon, _slotProps$closeButto, _slotProps$closeIcon;
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiAlert'
     });
@@ -15328,7 +15473,7 @@
     return colorTransformations$1[color] || color;
   };
   var Typography = /*#__PURE__*/React__namespace.forwardRef(function Typography(inProps, ref) {
-    var themeProps = useThemeProps({
+    var themeProps = useThemeProps$1({
       props: inProps,
       name: 'MuiTypography'
     });
@@ -15475,7 +15620,7 @@
     };
   });
   var AlertTitle = /*#__PURE__*/React__namespace.forwardRef(function AlertTitle(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiAlertTitle'
     });
@@ -15613,7 +15758,7 @@
     }));
   });
   var AppBar = /*#__PURE__*/React__namespace.forwardRef(function AppBar(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiAppBar'
     });
@@ -18511,30 +18656,6 @@
     transition: PropTypes.bool
   } ;
 
-  function _classCallCheck(instance, Constructor) {
-    if (!(instance instanceof Constructor)) {
-      throw new TypeError("Cannot call a class as a function");
-    }
-  }
-
-  function _defineProperties(target, props) {
-    for (var i = 0; i < props.length; i++) {
-      var descriptor = props[i];
-      descriptor.enumerable = descriptor.enumerable || false;
-      descriptor.configurable = true;
-      if ("value" in descriptor) descriptor.writable = true;
-      Object.defineProperty(target, toPropertyKey(descriptor.key), descriptor);
-    }
-  }
-  function _createClass(Constructor, protoProps, staticProps) {
-    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
-    if (staticProps) _defineProperties(Constructor, staticProps);
-    Object.defineProperty(Constructor, "prototype", {
-      writable: false
-    });
-    return Constructor;
-  }
-
   // Is a vertical scrollbar displayed?
   function isOverflowing(container) {
     var doc = ownerDocument(container);
@@ -19718,7 +19839,7 @@
       onClose = parameters.onClose,
       open = parameters.open,
       resumeHideDuration = parameters.resumeHideDuration;
-    var timerAutoHide = React__namespace.useRef();
+    var timerAutoHide = useTimeout();
     React__namespace.useEffect(function () {
       if (!open) {
         return undefined;
@@ -19748,28 +19869,23 @@
       if (!onClose || autoHideDurationParam == null) {
         return;
       }
-      clearTimeout(timerAutoHide.current);
-      timerAutoHide.current = setTimeout(function () {
+      timerAutoHide.start(autoHideDurationParam, function () {
         handleClose(null, 'timeout');
-      }, autoHideDurationParam);
+      });
     });
     React__namespace.useEffect(function () {
       if (open) {
         setAutoHideTimer(autoHideDuration);
       }
-      return function () {
-        clearTimeout(timerAutoHide.current);
-      };
-    }, [open, autoHideDuration, setAutoHideTimer]);
+      return timerAutoHide.clear;
+    }, [open, autoHideDuration, setAutoHideTimer, timerAutoHide]);
     var handleClickAway = function handleClickAway(event) {
       onClose == null || onClose(event, 'clickaway');
     };
 
     // 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);
-    };
+    var handlePause = timerAutoHide.clear;
 
     // Restart the timer when the user is no longer interacting with the Snackbar
     // or when the window is shown back.
@@ -19817,7 +19933,7 @@
         };
       }
       return undefined;
-    }, [disableWindowBlurListener, handleResume, open]);
+    }, [disableWindowBlurListener, open, handleResume, handlePause]);
     var getRootProps = function getRootProps() {
       var externalProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       var externalEventHandlers = _extends({}, extractEventHandlers(parameters), extractEventHandlers(externalProps));
@@ -21181,7 +21297,7 @@
   var Popper = /*#__PURE__*/React__namespace.forwardRef(function Popper(inProps, ref) {
     var _slots$root;
     var theme = useTheme$3();
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiPopper'
     });
@@ -21406,7 +21522,7 @@
     });
   });
   var ListSubheader = /*#__PURE__*/React__namespace.forwardRef(function ListSubheader(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiListSubheader'
     });
@@ -21705,7 +21821,7 @@
    * Chips represent complex entities in small blocks, such as a contact.
    */
   var Chip = /*#__PURE__*/React__namespace.forwardRef(function Chip(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiChip'
     });
@@ -22193,7 +22309,7 @@
    */
   var InputBase = /*#__PURE__*/React__namespace.forwardRef(function InputBase(inProps, ref) {
     var _slotProps$input;
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiInputBase'
     });
@@ -23031,7 +23147,7 @@
   }));
   var Autocomplete = /*#__PURE__*/React__namespace.forwardRef(function Autocomplete(inProps, ref) {
     var _slotProps$clearIndic, _slotProps$paper, _slotProps$popper, _slotProps$popupIndic;
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiAutocomplete'
     });
@@ -23855,7 +23971,7 @@
           backgroundColor: theme.vars.palette.Avatar.defaultBg
         } : _extends({
           backgroundColor: theme.palette.grey[400]
-        }, theme.applyDarkStyles({
+        }, theme.applyStyles('dark', {
           backgroundColor: theme.palette.grey[600]
         })))
       }]
@@ -23928,7 +24044,7 @@
     return loaded;
   }
   var Avatar = /*#__PURE__*/React__namespace.forwardRef(function Avatar(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiAvatar'
     });
@@ -23968,7 +24084,7 @@
         ownerState: ownerState,
         className: classes.img
       }, imgProps));
-    } else if (childrenProp != null) {
+    } else if (childrenProp != null && childrenProp !== '' && typeof childrenProp !== 'boolean') {
       children = childrenProp;
     } else if (hasImg && alt) {
       children = alt[0];
@@ -24070,36 +24186,21 @@
       return _extends(_defineProperty({}, "& .".concat(avatarGroupClasses$1.avatar), styles.avatar), styles.root);
     }
   })(function (_ref) {
-    var theme = _ref.theme;
+    var theme = _ref.theme,
+      ownerState = _ref.ownerState;
+    var marginValue = ownerState.spacing && SPACINGS$2[ownerState.spacing] !== undefined ? SPACINGS$2[ownerState.spacing] : -ownerState.spacing;
     return _defineProperty(_defineProperty(_defineProperty({}, "& .".concat(avatarClasses$1.root), {
       border: "2px solid ".concat((theme.vars || theme).palette.background["default"]),
       boxSizing: 'content-box',
-      marginLeft: -8,
+      marginLeft: marginValue != null ? marginValue : -8,
       '&:last-child': {
         marginLeft: 0
       }
     }), "display", 'flex'), "flexDirection", 'row-reverse');
   });
-  var AvatarGroupAvatar = styled$1(Avatar$1, {
-    name: 'MuiAvatarGroup',
-    slot: 'Avatar',
-    overridesResolver: function overridesResolver(props, styles) {
-      return styles.avatar;
-    }
-  })(function (_ref3) {
-    var theme = _ref3.theme;
-    return {
-      border: "2px solid ".concat((theme.vars || theme).palette.background["default"]),
-      boxSizing: 'content-box',
-      marginLeft: -8,
-      '&:last-child': {
-        marginLeft: 0
-      }
-    };
-  });
   var AvatarGroup = /*#__PURE__*/React__namespace.forwardRef(function AvatarGroup(inProps, ref) {
     var _slotProps$additional;
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiAvatarGroup'
     });
@@ -24144,7 +24245,6 @@
     var maxAvatars = Math.min(children.length, clampedMax - 1);
     var extraAvatars = Math.max(totalAvatars - clampedMax, totalAvatars - maxAvatars, 0);
     var extraAvatarsElement = renderSurplus ? renderSurplus(extraAvatars) : "+".concat(extraAvatars);
-    var marginLeft = spacing && SPACINGS$2[spacing] !== undefined ? SPACINGS$2[spacing] : -spacing;
     var additionalAvatarSlotProps = (_slotProps$additional = slotProps.additionalAvatar) != null ? _slotProps$additional : componentsProps.additionalAvatar;
     return /*#__PURE__*/jsxRuntime_2(AvatarGroupRoot, _extends({
       as: component,
@@ -24152,23 +24252,14 @@
       className: clsx(classes.root, className),
       ref: ref
     }, other, {
-      children: [extraAvatars ? /*#__PURE__*/jsxRuntime_1(AvatarGroupAvatar, _extends({
-        ownerState: ownerState,
+      children: [extraAvatars ? /*#__PURE__*/jsxRuntime_1(Avatar$1, _extends({
         variant: variant
       }, additionalAvatarSlotProps, {
         className: clsx(classes.avatar, additionalAvatarSlotProps == null ? void 0 : additionalAvatarSlotProps.className),
-        style: _extends({
-          marginLeft: marginLeft
-        }, additionalAvatarSlotProps == null ? void 0 : additionalAvatarSlotProps.style),
         children: extraAvatarsElement
-      })) : null, children.slice(0, maxAvatars).reverse().map(function (child, index) {
+      })) : null, children.slice(0, maxAvatars).reverse().map(function (child) {
         return /*#__PURE__*/React__namespace.cloneElement(child, {
           className: clsx(child.props.className, classes.avatar),
-          style: _extends({
-            // Consistent with "&:last-child" styling for the default spacing,
-            // we do not apply custom marginLeft spacing on the last child
-            marginLeft: index === maxAvatars - 1 ? undefined : marginLeft
-          }, child.props.style),
           variant: child.props.variant || variant
         });
       })]
@@ -24491,7 +24582,7 @@
   });
   var Backdrop = /*#__PURE__*/React__namespace.forwardRef(function Backdrop(inProps, ref) {
     var _slotProps$root, _ref2, _slots$root;
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiBackdrop'
     });
@@ -24634,6 +24725,11 @@
   } ;
   var Backdrop$1 = Backdrop;
 
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  function createUseThemeProps(name) {
+    return useThemeProps$1;
+  }
+
   function getBadgeUtilityClass(slot) {
     return generateUtilityClass$1('MuiBadge', slot);
   }
@@ -24644,6 +24740,7 @@
 
   var RADIUS_STANDARD = 10;
   var RADIUS_DOT = 4;
+  var useThemeProps = createUseThemeProps();
   var useUtilityClasses$1t = function useUtilityClasses(ownerState) {
     var color = ownerState.color,
       anchorOrigin = ownerState.anchorOrigin,
@@ -25095,7 +25192,7 @@
     };
   });
   var BottomNavigation = /*#__PURE__*/React__namespace.forwardRef(function BottomNavigation(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiBottomNavigation'
     });
@@ -25251,7 +25348,7 @@
     }));
   });
   var BottomNavigationAction = /*#__PURE__*/React__namespace.forwardRef(function BottomNavigationAction(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiBottomNavigationAction'
     });
@@ -25518,7 +25615,7 @@
     }, []);
   }
   var Breadcrumbs = /*#__PURE__*/React__namespace.forwardRef(function Breadcrumbs(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiBreadcrumbs'
     });
@@ -25917,7 +26014,7 @@
     var contextProps = React__namespace.useContext(ButtonGroupContext$1);
     var buttonGroupButtonContextPositionClassName = React__namespace.useContext(ButtonGroupButtonContext$1);
     var resolvedProps = resolveProps(contextProps, inProps);
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: resolvedProps,
       name: 'MuiButton'
     });
@@ -26178,7 +26275,7 @@
     })));
   });
   var ButtonGroup = /*#__PURE__*/React__namespace.forwardRef(function ButtonGroup(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiButtonGroup'
     });
@@ -26367,7 +26464,7 @@
     };
   });
   var Card = /*#__PURE__*/React__namespace.forwardRef(function Card(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiCard'
     });
@@ -26482,7 +26579,7 @@
     };
   });
   var CardActionArea = /*#__PURE__*/React__namespace.forwardRef(function CardActionArea(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiCardActionArea'
     });
@@ -26566,7 +26663,7 @@
     });
   });
   var CardActions = /*#__PURE__*/React__namespace.forwardRef(function CardActions(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiCardActions'
     });
@@ -26641,7 +26738,7 @@
     };
   });
   var CardContent = /*#__PURE__*/React__namespace.forwardRef(function CardContent(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiCardContent'
     });
@@ -26752,7 +26849,7 @@
     flex: '1 1 auto'
   });
   var CardHeader = /*#__PURE__*/React__namespace.forwardRef(function CardHeader(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiCardHeader'
     });
@@ -26921,7 +27018,7 @@
   var MEDIA_COMPONENTS = ['video', 'audio', 'picture', 'iframe', 'img'];
   var IMAGE_COMPONENTS = ['picture', 'img'];
   var CardMedia = /*#__PURE__*/React__namespace.forwardRef(function CardMedia(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiCardMedia'
     });
@@ -27333,7 +27430,7 @@
   var defaultIndeterminateIcon = /*#__PURE__*/jsxRuntime_1(IndeterminateCheckBoxIcon, {});
   var Checkbox = /*#__PURE__*/React__namespace.forwardRef(function Checkbox(inProps, ref) {
     var _icon$props$fontSize, _indeterminateIcon$pr;
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiCheckbox'
     });
@@ -27565,7 +27662,7 @@
    * attribute to `true` on that region until it has finished loading.
    */
   var CircularProgress = /*#__PURE__*/React__namespace.forwardRef(function CircularProgress(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiCircularProgress'
     });
@@ -27705,8 +27802,8 @@
         return [styles.root, styles["maxWidth".concat(capitalize(String(ownerState.maxWidth)))], ownerState.fixed && styles.fixed, ownerState.disableGutters && styles.disableGutters];
       }
     }),
-    useThemeProps: function useThemeProps$1(inProps) {
-      return useThemeProps({
+    useThemeProps: function useThemeProps(inProps) {
+      return useThemeProps$1({
         props: inProps,
         name: 'MuiContainer'
       });
@@ -27829,7 +27926,7 @@
     return defaultStyles;
   };
   function CssBaseline(inProps) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiCssBaseline'
     });
@@ -27958,7 +28055,7 @@
    */
   var Modal = /*#__PURE__*/React__namespace.forwardRef(function Modal(inProps, ref) {
     var _ref2, _slots$root, _ref3, _slots$backdrop, _slotProps$root, _slotProps$backdrop;
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       name: 'MuiModal',
       props: inProps
     });
@@ -28412,7 +28509,7 @@
    * Dialogs are overlaid modal paper based components with a backdrop.
    */
   var Dialog = /*#__PURE__*/React__namespace.forwardRef(function Dialog(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiDialog'
     });
@@ -28696,7 +28793,7 @@
     });
   });
   var DialogActions = /*#__PURE__*/React__namespace.forwardRef(function DialogActions(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiDialogActions'
     });
@@ -28788,7 +28885,7 @@
     }));
   });
   var DialogContent = /*#__PURE__*/React__namespace.forwardRef(function DialogContent(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiDialogContent'
     });
@@ -28860,7 +28957,7 @@
     }
   })({});
   var DialogContentText = /*#__PURE__*/React__namespace.forwardRef(function DialogContentText(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiDialogContentText'
     });
@@ -28921,7 +29018,7 @@
     flex: '0 0 auto'
   });
   var DialogTitle = /*#__PURE__*/React__namespace.forwardRef(function DialogTitle(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiDialogTitle'
     });
@@ -29101,7 +29198,7 @@
     });
   });
   var Divider = /*#__PURE__*/React__namespace.forwardRef(function Divider(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiDivider'
     });
@@ -29647,7 +29744,7 @@
    * when `variant="temporary"` is set.
    */
   var Drawer = /*#__PURE__*/React__namespace.forwardRef(function Drawer(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiDrawer'
     });
@@ -29944,7 +30041,7 @@
     });
   });
   var Fab = /*#__PURE__*/React__namespace.forwardRef(function Fab(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiFab'
     });
@@ -30215,7 +30312,7 @@
   });
   var FilledInput = /*#__PURE__*/React__namespace.forwardRef(function FilledInput(inProps, ref) {
     var _ref5, _slots$root, _ref6, _slots$input;
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiFilledInput'
     });
@@ -30535,7 +30632,7 @@
    * For instance, only one input can be focused at the same time, the state shouldn't be shared.
    */
   var FormControl = /*#__PURE__*/React__namespace.forwardRef(function FormControl(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiFormControl'
     });
@@ -30765,8 +30862,8 @@
         return styles.root;
       }
     }),
-    useThemeProps: function useThemeProps$1(inProps) {
-      return useThemeProps({
+    useThemeProps: function useThemeProps(inProps) {
+      return useThemeProps$1({
         props: inProps,
         name: 'MuiStack'
       });
@@ -30895,7 +30992,7 @@
    */
   var FormControlLabel = /*#__PURE__*/React__namespace.forwardRef(function FormControlLabel(inProps, ref) {
     var _ref5, _slotProps$typography;
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiFormControlLabel'
     });
@@ -31088,7 +31185,7 @@
    * For the `Radio`, you should be using the `RadioGroup` component instead of this one.
    */
   var FormGroup = /*#__PURE__*/React__namespace.forwardRef(function FormGroup(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiFormGroup'
     });
@@ -31193,7 +31290,7 @@
     });
   });
   var FormHelperText = /*#__PURE__*/React__namespace.forwardRef(function FormHelperText(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiFormHelperText'
     });
@@ -31357,7 +31454,7 @@
     });
   });
   var FormLabel = /*#__PURE__*/React__namespace.forwardRef(function FormLabel(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiFormLabel'
     });
@@ -31813,7 +31910,7 @@
     return composeClasses(slots, getGridUtilityClass, classes);
   };
   var Grid = /*#__PURE__*/React__namespace.forwardRef(function Grid(inProps, ref) {
-    var themeProps = useThemeProps({
+    var themeProps = useThemeProps$1({
       props: inProps,
       name: 'MuiGrid'
     });
@@ -32030,8 +32127,8 @@
       }
     }),
     componentName: 'MuiGrid2',
-    useThemeProps: function useThemeProps$1(inProps) {
-      return useThemeProps({
+    useThemeProps: function useThemeProps(inProps) {
+      return useThemeProps$1({
         props: inProps,
         name: 'MuiGrid2'
       });
@@ -32123,7 +32220,7 @@
       _props$TransitionComp = props.TransitionComponent,
       TransitionComponent = _props$TransitionComp === void 0 ? Transition$1 : _props$TransitionComp,
       other = _objectWithoutProperties(props, ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"]);
-    var timer = React__namespace.useRef();
+    var timer = useTimeout();
     var autoTimeout = React__namespace.useRef();
     var theme = useTheme();
     var nodeRef = React__namespace.useRef(null);
@@ -32211,18 +32308,13 @@
     var handleExited = normalizedTransitionCallback(onExited);
     var handleAddEndListener = function handleAddEndListener(next) {
       if (timeout === 'auto') {
-        timer.current = setTimeout(next, autoTimeout.current || 0);
+        timer.start(autoTimeout.current || 0, next);
       }
       if (addEndListener) {
         // Old call signature before `react-transition-group` implemented `nodeRef`
         addEndListener(nodeRef.current, next);
       }
     };
-    React__namespace.useEffect(function () {
-      return function () {
-        clearTimeout(timer.current);
-      };
-    }, []);
     return /*#__PURE__*/jsxRuntime_1(TransitionComponent, _extends({
       appear: appear,
       "in": inProp,
@@ -33026,7 +33118,7 @@
     };
   });
   var Icon = /*#__PURE__*/React__namespace.forwardRef(function Icon(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiIcon'
     });
@@ -33151,7 +33243,7 @@
     });
   });
   var ImageList = /*#__PURE__*/React__namespace.forwardRef(function ImageList(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiImageList'
     });
@@ -33312,7 +33404,7 @@
     })));
   });
   var ImageListItem = /*#__PURE__*/React__namespace.forwardRef(function ImageListItem(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiImageListItem'
     });
@@ -33540,7 +33632,7 @@
     });
   });
   var ImageListItemBar = /*#__PURE__*/React__namespace.forwardRef(function ImageListItemBar(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiImageListItemBar'
     });
@@ -33714,7 +33806,7 @@
   })({});
   var Input = /*#__PURE__*/React__namespace.forwardRef(function Input(inProps, ref) {
     var _ref3, _slots$root, _ref4, _slots$input;
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiInput'
     });
@@ -34002,7 +34094,7 @@
     });
   });
   var InputAdornment = /*#__PURE__*/React__namespace.forwardRef(function InputAdornment(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiInputAdornment'
     });
@@ -34202,7 +34294,7 @@
     }));
   });
   var InputLabel = /*#__PURE__*/React__namespace.forwardRef(function InputLabel(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       name: 'MuiInputLabel',
       props: inProps
     });
@@ -34474,7 +34566,7 @@
    * attribute to `true` on that region until it has finished loading.
    */
   var LinearProgress = /*#__PURE__*/React__namespace.forwardRef(function LinearProgress(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiLinearProgress'
     });
@@ -34681,7 +34773,7 @@
     }));
   });
   var Link = /*#__PURE__*/React__namespace.forwardRef(function Link(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiLink'
     });
@@ -34852,7 +34944,7 @@
     });
   });
   var List = /*#__PURE__*/React__namespace.forwardRef(function List(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiList'
     });
@@ -35025,7 +35117,7 @@
     });
   });
   var ListItemButton = /*#__PURE__*/React__namespace.forwardRef(function ListItemButton(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiListItemButton'
     });
@@ -35208,7 +35300,7 @@
    * Must be used as the last child of ListItem to function properly.
    */
   var ListItemSecondaryAction = /*#__PURE__*/React__namespace.forwardRef(function ListItemSecondaryAction(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiListItemSecondaryAction'
     });
@@ -35353,7 +35445,7 @@
    * Uses an additional container component if `ListItemSecondaryAction` is the last child.
    */
   var ListItem = /*#__PURE__*/React__namespace.forwardRef(function ListItem(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiListItem'
     });
@@ -35687,7 +35779,7 @@
    * A simple wrapper to apply `List` styles to an `Avatar`.
    */
   var ListItemAvatar = /*#__PURE__*/React__namespace.forwardRef(function ListItemAvatar(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiListItemAvatar'
     });
@@ -35766,7 +35858,7 @@
    * A simple wrapper to apply `List` styles to an `Icon` or `SvgIcon`.
    */
   var ListItemIcon = /*#__PURE__*/React__namespace.forwardRef(function ListItemIcon(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiListItemIcon'
     });
@@ -35849,7 +35941,7 @@
     });
   });
   var ListItemText = /*#__PURE__*/React__namespace.forwardRef(function ListItemText(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiListItemText'
     });
@@ -36304,7 +36396,7 @@
   });
   var Popover = /*#__PURE__*/React__namespace.forwardRef(function Popover(inProps, ref) {
     var _slotProps$paper, _slots$root, _slots$paper;
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiPopover'
     });
@@ -36821,7 +36913,7 @@
   });
   var Menu = /*#__PURE__*/React__namespace.forwardRef(function Menu(inProps, ref) {
     var _slots$paper, _slotProps$paper;
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiMenu'
     });
@@ -37164,7 +37256,7 @@
     })));
   });
   var MenuItem = /*#__PURE__*/React__namespace.forwardRef(function MenuItem(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiMenuItem'
     });
@@ -37406,7 +37498,7 @@
     });
   });
   var MobileStepper = /*#__PURE__*/React__namespace.forwardRef(function MobileStepper(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiMobileStepper'
     });
@@ -37724,7 +37816,7 @@
    * An alternative to `<Select native />` with a much smaller bundle size footprint.
    */
   var NativeSelect = /*#__PURE__*/React__namespace.forwardRef(function NativeSelect(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       name: 'MuiNativeSelect',
       props: inProps
     });
@@ -38050,7 +38142,7 @@
   });
   var OutlinedInput = /*#__PURE__*/React__namespace.forwardRef(function OutlinedInput(inProps, ref) {
     var _ref5, _slots$root, _ref6, _slots$input, _React$Fragment;
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiOutlinedInput'
     });
@@ -38600,7 +38692,7 @@
     });
   });
   var PaginationItem = /*#__PURE__*/React__namespace.forwardRef(function PaginationItem(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiPaginationItem'
     });
@@ -38803,7 +38895,7 @@
     return "Go to ".concat(type, " page");
   }
   var Pagination = /*#__PURE__*/React__namespace.forwardRef(function Pagination(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiPagination'
     });
@@ -39159,7 +39251,7 @@
   var defaultIcon$1 = /*#__PURE__*/jsxRuntime_1(RadioButtonIcon, {});
   var Radio = /*#__PURE__*/React__namespace.forwardRef(function Radio(inProps, ref) {
     var _defaultIcon$props$fo, _defaultCheckedIcon$p;
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiRadio'
     });
@@ -39640,7 +39732,7 @@
     return "".concat(value, " Star").concat(value !== 1 ? 's' : '');
   }
   var Rating = /*#__PURE__*/React__namespace.forwardRef(function Rating(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       name: 'MuiRating',
       props: inProps
     });
@@ -40081,7 +40173,7 @@
     }, colorSchemeStyles);
   });
   var ScopedCssBaseline = /*#__PURE__*/React__namespace.forwardRef(function ScopedCssBaseline(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiScopedCssBaseline'
     });
@@ -40804,7 +40896,7 @@
   var StyledOutlinedInput = styled$1(OutlinedInput$1, styledRootConfig)('');
   var StyledFilledInput = styled$1(FilledInput$1, styledRootConfig)('');
   var Select = /*#__PURE__*/React__namespace.forwardRef(function Select(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       name: 'MuiSelect',
       props: inProps
     });
@@ -40897,7 +40989,7 @@
         }, inputProps, {
           classes: inputProps ? deepmerge(restOfClasses, inputProps.classes) : restOfClasses
         }, input ? input.props.inputProps : {})
-      }, multiple && _native && variant === 'outlined' ? {
+      }, (multiple && _native || displayEmpty) && variant === 'outlined' ? {
         notched: true
       } : {}, {
         ref: inputComponentRef,
@@ -41127,7 +41219,7 @@
     return ownerState.animation === 'wave' && css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      position: relative;\n      overflow: hidden;\n\n      /* Fix bug in Safari https://bugs.webkit.org/show_bug.cgi?id=68196 */\n      -webkit-mask-image: -webkit-radial-gradient(white, black);\n\n      &::after {\n        animation: ", " 2s linear 0.5s infinite;\n        background: linear-gradient(\n          90deg,\n          transparent,\n          ", ",\n          transparent\n        );\n        content: '';\n        position: absolute;\n        transform: translateX(-100%); /* Avoid flash during server-side hydration */\n        bottom: 0;\n        left: 0;\n        right: 0;\n        top: 0;\n      }\n    "])), waveKeyframe, (theme.vars || theme).palette.action.hover);
   });
   var Skeleton = /*#__PURE__*/React__namespace.forwardRef(function Skeleton(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiSkeleton'
     });
@@ -41615,7 +41707,7 @@
   };
   var Slider = /*#__PURE__*/React__namespace.forwardRef(function Slider(inputProps, ref) {
     var _ref9, _slots$root, _ref10, _slots$rail, _ref11, _slots$track, _ref12, _slots$thumb, _ref13, _slots$valueLabel, _ref14, _slots$mark, _ref15, _slots$markLabel, _ref16, _slots$input, _slotProps$root, _slotProps$rail, _slotProps$track, _slotProps$thumb, _slotProps$valueLabel, _slotProps$mark, _slotProps$markLabel, _slotProps$input;
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inputProps,
       name: 'MuiSlider'
     });
@@ -42187,7 +42279,7 @@
     marginRight: -8
   });
   var SnackbarContent = /*#__PURE__*/React__namespace.forwardRef(function SnackbarContent(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiSnackbarContent'
     });
@@ -42309,7 +42401,7 @@
     })));
   });
   var Snackbar = /*#__PURE__*/React__namespace.forwardRef(function Snackbar(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiSnackbar'
     });
@@ -42844,7 +42936,7 @@
     });
   });
   var SpeedDial = /*#__PURE__*/React__namespace.forwardRef(function SpeedDial(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiSpeedDial'
     });
@@ -42894,12 +42986,7 @@
       direction: direction
     });
     var classes = useUtilityClasses$r(ownerState);
-    var eventTimer = React__namespace.useRef();
-    React__namespace.useEffect(function () {
-      return function () {
-        clearTimeout(eventTimer.current);
-      };
-    }, []);
+    var eventTimer = useTimeout();
 
     /**
      * an index in actions.current
@@ -42982,9 +43069,9 @@
       if (event.type === 'blur' && onBlur) {
         onBlur(event);
       }
-      clearTimeout(eventTimer.current);
+      eventTimer.clear();
       if (event.type === 'blur') {
-        eventTimer.current = setTimeout(function () {
+        eventTimer.start(0, function () {
           setOpenState(false);
           if (onClose) {
             onClose(event, 'blur');
@@ -43001,7 +43088,7 @@
       if (FabProps.onClick) {
         FabProps.onClick(event);
       }
-      clearTimeout(eventTimer.current);
+      eventTimer.clear();
       if (open) {
         setOpenState(false);
         if (onClose) {
@@ -43025,10 +43112,10 @@
       // When moving the focus between two items,
       // a chain if blur and focus event is triggered.
       // We only handle the last event.
-      clearTimeout(eventTimer.current);
+      eventTimer.clear();
       if (!open) {
         // Wait for a future focus or click event
-        eventTimer.current = setTimeout(function () {
+        eventTimer.start(0, function () {
           setOpenState(true);
           if (onOpen) {
             var eventMap = {
@@ -43391,7 +43478,7 @@
     };
   });
   var hystersisOpen = false;
-  var hystersisTimer = null;
+  var hystersisTimer = new Timeout();
   var cursorPosition = {
     x: 0,
     y: 0
@@ -43408,7 +43495,7 @@
   // TODO v6: Remove PopperComponent, PopperProps, TransitionComponent and TransitionProps.
   var Tooltip = /*#__PURE__*/React__namespace.forwardRef(function Tooltip(inProps, ref) {
     var _ref5, _slots$popper, _ref6, _ref7, _slots$transition, _ref8, _slots$tooltip, _ref9, _slots$arrow, _slotProps$popper, _ref10, _slotProps$popper2, _slotProps$transition, _slotProps$tooltip, _ref11, _slotProps$tooltip2, _slotProps$arrow, _ref12, _slotProps$arrow2;
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiTooltip'
     });
@@ -43473,10 +43560,10 @@
       setArrowRef = _React$useState2[1];
     var ignoreNonTouchEvents = React__namespace.useRef(false);
     var disableInteractive = disableInteractiveProp || followCursor;
-    var closeTimer = React__namespace.useRef();
-    var enterTimer = React__namespace.useRef();
-    var leaveTimer = React__namespace.useRef();
-    var touchTimer = React__namespace.useRef();
+    var closeTimer = useTimeout();
+    var enterTimer = useTimeout();
+    var leaveTimer = useTimeout();
+    var touchTimer = useTimeout();
     var _useControlled = useControlled({
         controlled: openProp,
         "default": false,
@@ -43499,23 +43586,18 @@
     }
     var id = useId(idProp);
     var prevUserSelect = React__namespace.useRef();
-    var stopTouchInteraction = React__namespace.useCallback(function () {
+    var stopTouchInteraction = useEventCallback(function () {
       if (prevUserSelect.current !== undefined) {
         document.body.style.WebkitUserSelect = prevUserSelect.current;
         prevUserSelect.current = undefined;
       }
-      clearTimeout(touchTimer.current);
-    }, []);
+      touchTimer.clear();
+    });
     React__namespace.useEffect(function () {
-      return function () {
-        clearTimeout(closeTimer.current);
-        clearTimeout(enterTimer.current);
-        clearTimeout(leaveTimer.current);
-        stopTouchInteraction();
-      };
+      return stopTouchInteraction;
     }, [stopTouchInteraction]);
     var handleOpen = function handleOpen(event) {
-      clearTimeout(hystersisTimer);
+      hystersisTimer.clear();
       hystersisOpen = true;
 
       // The mouseover event will trigger for every nested element in the tooltip.
@@ -43531,18 +43613,16 @@
      * @param {React.SyntheticEvent | Event} event
      */
     function (event) {
-      clearTimeout(hystersisTimer);
-      hystersisTimer = setTimeout(function () {
+      hystersisTimer.start(800 + leaveDelay, function () {
         hystersisOpen = false;
-      }, 800 + leaveDelay);
+      });
       setOpenState(false);
       if (onClose && open) {
         onClose(event);
       }
-      clearTimeout(closeTimer.current);
-      closeTimer.current = setTimeout(function () {
+      closeTimer.start(theme.transitions.duration.shortest, function () {
         ignoreNonTouchEvents.current = false;
-      }, theme.transitions.duration.shortest);
+      });
     });
     var handleEnter = function handleEnter(event) {
       if (ignoreNonTouchEvents.current && event.type !== 'touchstart') {
@@ -43555,22 +43635,21 @@
       if (childNode) {
         childNode.removeAttribute('title');
       }
-      clearTimeout(enterTimer.current);
-      clearTimeout(leaveTimer.current);
+      enterTimer.clear();
+      leaveTimer.clear();
       if (enterDelay || hystersisOpen && enterNextDelay) {
-        enterTimer.current = setTimeout(function () {
+        enterTimer.start(hystersisOpen ? enterNextDelay : enterDelay, function () {
           handleOpen(event);
-        }, hystersisOpen ? enterNextDelay : enterDelay);
+        });
       } else {
         handleOpen(event);
       }
     };
     var handleLeave = function handleLeave(event) {
-      clearTimeout(enterTimer.current);
-      clearTimeout(leaveTimer.current);
-      leaveTimer.current = setTimeout(function () {
+      enterTimer.clear();
+      leaveTimer.start(leaveDelay, function () {
         handleClose(event);
-      }, leaveDelay);
+      });
     };
     var _useIsFocusVisible = useIsFocusVisible(),
       isFocusVisibleRef = _useIsFocusVisible.isFocusVisibleRef,
@@ -43611,26 +43690,25 @@
     var handleMouseLeave = handleLeave;
     var handleTouchStart = function handleTouchStart(event) {
       detectTouchStart(event);
-      clearTimeout(leaveTimer.current);
-      clearTimeout(closeTimer.current);
+      leaveTimer.clear();
+      closeTimer.clear();
       stopTouchInteraction();
       prevUserSelect.current = document.body.style.WebkitUserSelect;
       // Prevent iOS text selection on long-tap.
       document.body.style.WebkitUserSelect = 'none';
-      touchTimer.current = setTimeout(function () {
+      touchTimer.start(enterTouchDelay, function () {
         document.body.style.WebkitUserSelect = prevUserSelect.current;
         handleEnter(event);
-      }, enterTouchDelay);
+      });
     };
     var handleTouchEnd = function handleTouchEnd(event) {
       if (children.props.onTouchEnd) {
         children.props.onTouchEnd(event);
       }
       stopTouchInteraction();
-      clearTimeout(leaveTimer.current);
-      leaveTimer.current = setTimeout(function () {
+      leaveTimer.start(leaveTouchDelay, function () {
         handleClose(event);
-      }, leaveTouchDelay);
+      });
     };
     React__namespace.useEffect(function () {
       if (!open) {
@@ -44091,7 +44169,7 @@
     });
   });
   var SpeedDialAction = /*#__PURE__*/React__namespace.forwardRef(function SpeedDialAction(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiSpeedDialAction'
     });
@@ -44285,7 +44363,7 @@
     }));
   });
   var SpeedDialIcon = /*#__PURE__*/React__namespace.forwardRef(function SpeedDialIcon(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiSpeedDialIcon'
     });
@@ -44416,7 +44494,7 @@
     });
   });
   var Step = /*#__PURE__*/React__namespace.forwardRef(function Step(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiStep'
     });
@@ -44607,7 +44685,7 @@
     };
   });
   var StepIcon = /*#__PURE__*/React__namespace.forwardRef(function StepIcon(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiStepIcon'
     });
@@ -44806,7 +44884,7 @@
   });
   var StepLabel = /*#__PURE__*/React__namespace.forwardRef(function StepLabel(inProps, ref) {
     var _slotProps$label;
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiStepLabel'
     });
@@ -44970,7 +45048,7 @@
     }));
   });
   var StepButton = /*#__PURE__*/React__namespace.forwardRef(function StepButton(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiStepButton'
     });
@@ -45104,7 +45182,7 @@
     });
   });
   var StepConnector = /*#__PURE__*/React__namespace.forwardRef(function StepConnector(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiStepConnector'
     });
@@ -45201,7 +45279,7 @@
     }
   })({});
   var StepContent = /*#__PURE__*/React__namespace.forwardRef(function StepContent(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiStepContent'
     });
@@ -45333,7 +45411,7 @@
   });
   var defaultConnector = /*#__PURE__*/jsxRuntime_1(StepConnector$1, {});
   var Stepper = /*#__PURE__*/React__namespace.forwardRef(function Stepper(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiStepper'
     });
@@ -45599,7 +45677,7 @@
   }
   var iOS = typeof navigator !== 'undefined' && /iPad|iPhone|iPod/.test(navigator.userAgent);
   var SwipeableDrawer = /*#__PURE__*/React__namespace.forwardRef(function SwipeableDrawer(inProps, ref) {
-    var props = useThemeProps$1({
+    var props = useThemeProps$2({
       name: 'MuiSwipeableDrawer',
       props: inProps
     });
@@ -46262,7 +46340,7 @@
     };
   });
   var Switch = /*#__PURE__*/React__namespace.forwardRef(function Switch(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiSwitch'
     });
@@ -46487,7 +46565,7 @@
     });
   });
   var Tab = /*#__PURE__*/React__namespace.forwardRef(function Tab(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiTab'
     });
@@ -46691,7 +46769,7 @@
   });
   var defaultComponent$4 = 'table';
   var Table = /*#__PURE__*/React__namespace.forwardRef(function Table(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiTable'
     });
@@ -46812,7 +46890,7 @@
   };
   var defaultComponent$3 = 'tbody';
   var TableBody = /*#__PURE__*/React__namespace.forwardRef(function TableBody(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiTableBody'
     });
@@ -46947,7 +47025,7 @@
    * or otherwise a `<td>` element.
    */
   var TableCell = /*#__PURE__*/React__namespace.forwardRef(function TableCell(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiTableCell'
     });
@@ -47086,7 +47164,7 @@
     overflowX: 'auto'
   });
   var TableContainer = /*#__PURE__*/React__namespace.forwardRef(function TableContainer(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiTableContainer'
     });
@@ -47161,7 +47239,7 @@
   };
   var defaultComponent$2 = 'tfoot';
   var TableFooter = /*#__PURE__*/React__namespace.forwardRef(function TableFooter(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiTableFooter'
     });
@@ -47240,7 +47318,7 @@
   };
   var defaultComponent$1 = 'thead';
   var TableHead = /*#__PURE__*/React__namespace.forwardRef(function TableHead(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiTableHead'
     });
@@ -47336,7 +47414,7 @@
     return ownerState.variant === 'regular' && theme.mixins.toolbar;
   });
   var Toolbar = /*#__PURE__*/React__namespace.forwardRef(function Toolbar(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiToolbar'
     });
@@ -47710,7 +47788,7 @@
    */
   var TablePagination = /*#__PURE__*/React__namespace.forwardRef(function TablePagination(inProps, ref) {
     var _slotProps$select;
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiTablePagination'
     });
@@ -48066,7 +48144,7 @@
    * based on the material table element parent (head, body, etc).
    */
   var TableRow = /*#__PURE__*/React__namespace.forwardRef(function TableRow(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiTableRow'
     });
@@ -48214,7 +48292,7 @@
    * A button based label for placing inside `TableCell` for column sorting.
    */
   var TableSortLabel = /*#__PURE__*/React__namespace.forwardRef(function TableSortLabel(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiTableSortLabel'
     });
@@ -48425,7 +48503,7 @@
   });
   var TabScrollButton = /*#__PURE__*/React__namespace.forwardRef(function TabScrollButton(inProps, ref) {
     var _slots$StartScrollBut, _slots$EndScrollButto;
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiTabScrollButton'
     });
@@ -48703,7 +48781,7 @@
   var defaultIndicatorStyle = {};
   var warnedOnceTabPresent = false;
   var Tabs = /*#__PURE__*/React__namespace.forwardRef(function Tabs(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiTabs'
     });
@@ -49414,7 +49492,7 @@
    * - using the underlying components directly as shown in the demos
    */
   var TextField = /*#__PURE__*/React__namespace.forwardRef(function TextField(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiTextField'
     });
@@ -49830,7 +49908,7 @@
     var resolvedProps = resolveProps(_extends({}, contextProps, {
       selected: isValueSelected(inProps.value, contextValue)
     }), inProps);
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: resolvedProps,
       name: 'MuiToggleButton'
     });
@@ -50034,7 +50112,7 @@
     }));
   });
   var ToggleButtonGroup = /*#__PURE__*/React__namespace.forwardRef(function ToggleButtonGroup(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiToggleButtonGroup'
     });
@@ -50703,7 +50781,7 @@
   exports.useStepContext = useStepContext;
   exports.useStepperContext = useStepperContext;
   exports.useTheme = useTheme;
-  exports.useThemeProps = useThemeProps;
+  exports.useThemeProps = useThemeProps$1;
   exports.withStyles = withStyles;
   exports.withTheme = withTheme;