@mui/material 5.10.6 → 5.10.8

package/umd/material-ui.development.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.10.6
+/** @license MUI v5.10.8
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -7004,7 +7004,7 @@
   }
 
   const _excluded$2i = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"],
-        _excluded2$d = ["theme"],
+        _excluded2$c = ["theme"],
         _excluded3$1 = ["theme"];
 
   function isEmpty$2(obj) {
@@ -7145,7 +7145,7 @@
             let {
               theme: themeInput
             } = _ref,
-                other = _objectWithoutPropertiesLoose(_ref, _excluded2$d);
+                other = _objectWithoutPropertiesLoose(_ref, _excluded2$c);
 
             return stylesArg(_extends({
               theme: isEmpty$2(themeInput) ? defaultTheme : themeInput
@@ -7463,7 +7463,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
 
   function getLuminance(color) {
     color = decomposeColor(color);
-    let rgb = color.type === 'hsl' ? decomposeColor(hslToRgb(color)).values : color.values;
+    let rgb = color.type === 'hsl' || color.type === 'hsla' ? decomposeColor(hslToRgb(color)).values : color.values;
     rgb = rgb.map(val => {
       if (color.type !== 'color') {
         val /= 255; // normalized
@@ -7770,7 +7770,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
   function getInitColorSchemeScript$1(options) {
     const {
       enableColorScheme = true,
-      enableSystem = false,
+      defaultMode = 'light',
       defaultLightColorScheme = 'light',
       defaultDarkColorScheme = 'dark',
       modeStorageKey = DEFAULT_MODE_STORAGE_KEY,
@@ -7782,10 +7782,10 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       // eslint-disable-next-line react/no-danger
       dangerouslySetInnerHTML: {
         __html: `(function() { try {
-        var mode = localStorage.getItem('${modeStorageKey}');
+        var mode = localStorage.getItem('${modeStorageKey}') || '${defaultMode}';
         var cssColorScheme = mode;
         var colorScheme = '';
-        if (mode === 'system' || (!mode && !!${enableSystem})) {
+        if (mode === 'system') {
           // handle system mode
           var mql = window.matchMedia('(prefers-color-scheme: dark)');
           if (mql.matches) {
@@ -8064,7 +8064,8 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       disableTransitionOnChange: designSystemTransitionOnChange = false,
       enableColorScheme: designSystemEnableColorScheme = true,
       shouldSkipGeneratingVar: designSystemShouldSkipGeneratingVar,
-      resolveTheme
+      resolveTheme,
+      excludeVariablesFromRoot
     } = options;
 
     if (!defaultTheme.colorSchemes || typeof designSystemColorScheme === 'string' && !defaultTheme.colorSchemes[designSystemColorScheme] || typeof designSystemColorScheme === 'object' && !defaultTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.light] || typeof designSystemColorScheme === 'object' && !defaultTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.dark]) {
@@ -8195,6 +8196,15 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         })();
 
         if (key === resolvedDefaultColorScheme) {
+          if (excludeVariablesFromRoot) {
+            const excludedVariables = {};
+            excludeVariablesFromRoot(cssVarPrefix).forEach(cssVar => {
+              excludedVariables[cssVar] = css[cssVar];
+              delete css[cssVar];
+            });
+            defaultColorSchemeStyleSheet[`[${attribute}="${key}"]`] = excludedVariables;
+          }
+
           defaultColorSchemeStyleSheet[`${colorSchemeSelector}, [${attribute}="${key}"]`] = css;
         } else {
           otherColorSchemesStyleSheet[`${colorSchemeSelector === ':root' ? '' : colorSchemeSelector}[${attribute}="${key}"]`] = css;
@@ -8932,7 +8942,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
   }
 
   const _excluded$2e = ["defaultProps", "mixins", "overrides", "palette", "props", "styleOverrides"],
-        _excluded2$c = ["type", "mode"];
+        _excluded2$b = ["type", "mode"];
   function adaptV4Theme(inputTheme) {
     {
       console.warn(['MUI: adaptV4Theme() is deprecated.', 'Follow the upgrade guide on https://mui.com/r/migration-v4#theme.'].join('\n'));
@@ -8997,7 +9007,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       type: typeInput,
       mode: modeInput
     } = palette,
-          paletteRest = _objectWithoutPropertiesLoose(palette, _excluded2$c);
+          paletteRest = _objectWithoutPropertiesLoose(palette, _excluded2$b);
 
     const finalMode = modeInput || typeInput || 'light';
     theme.palette = _extends({
@@ -9228,7 +9238,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         input = stripDiacritics(input);
       }
 
-      const filteredOptions = options.filter(option => {
+      const filteredOptions = !input ? options : options.filter(option => {
         let candidate = (stringify || getOptionLabel)(option);
 
         if (ignoreCase) {
@@ -10596,6 +10606,363 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     ClickAwayListener['propTypes' + ''] = exactProp(ClickAwayListener.propTypes);
   }
 
+  const candidatesSelector = ['input', 'select', 'textarea', 'a[href]', 'button', '[tabindex]', 'audio[controls]', 'video[controls]', '[contenteditable]:not([contenteditable="false"])'].join(',');
+
+  function getTabIndex(node) {
+    const tabindexAttr = parseInt(node.getAttribute('tabindex'), 10);
+
+    if (!Number.isNaN(tabindexAttr)) {
+      return tabindexAttr;
+    } // Browsers do not return `tabIndex` correctly for contentEditable nodes;
+    // https://bugs.chromium.org/p/chromium/issues/detail?id=661108&q=contenteditable%20tabindex&can=2
+    // so if they don't have a tabindex attribute specifically set, assume it's 0.
+    // in Chrome, <details/>, <audio controls/> and <video controls/> elements get a default
+    //  `tabIndex` of -1 when the 'tabindex' attribute isn't specified in the DOM,
+    //  yet they are still part of the regular tab order; in FF, they get a default
+    //  `tabIndex` of 0; since Chrome still puts those elements in the regular tab
+    //  order, consider their tab index to be 0.
+
+
+    if (node.contentEditable === 'true' || (node.nodeName === 'AUDIO' || node.nodeName === 'VIDEO' || node.nodeName === 'DETAILS') && node.getAttribute('tabindex') === null) {
+      return 0;
+    }
+
+    return node.tabIndex;
+  }
+
+  function isNonTabbableRadio(node) {
+    if (node.tagName !== 'INPUT' || node.type !== 'radio') {
+      return false;
+    }
+
+    if (!node.name) {
+      return false;
+    }
+
+    const getRadio = selector => node.ownerDocument.querySelector(`input[type="radio"]${selector}`);
+
+    let roving = getRadio(`[name="${node.name}"]:checked`);
+
+    if (!roving) {
+      roving = getRadio(`[name="${node.name}"]`);
+    }
+
+    return roving !== node;
+  }
+
+  function isNodeMatchingSelectorFocusable(node) {
+    if (node.disabled || node.tagName === 'INPUT' && node.type === 'hidden' || isNonTabbableRadio(node)) {
+      return false;
+    }
+
+    return true;
+  }
+
+  function defaultGetTabbable(root) {
+    const regularTabNodes = [];
+    const orderedTabNodes = [];
+    Array.from(root.querySelectorAll(candidatesSelector)).forEach((node, i) => {
+      const nodeTabIndex = getTabIndex(node);
+
+      if (nodeTabIndex === -1 || !isNodeMatchingSelectorFocusable(node)) {
+        return;
+      }
+
+      if (nodeTabIndex === 0) {
+        regularTabNodes.push(node);
+      } else {
+        orderedTabNodes.push({
+          documentOrder: i,
+          tabIndex: nodeTabIndex,
+          node
+        });
+      }
+    });
+    return orderedTabNodes.sort((a, b) => a.tabIndex === b.tabIndex ? a.documentOrder - b.documentOrder : a.tabIndex - b.tabIndex).map(a => a.node).concat(regularTabNodes);
+  }
+
+  function defaultIsEnabled() {
+    return true;
+  }
+  /**
+   * Utility component that locks focus inside the component.
+   */
+
+
+  function FocusTrap(props) {
+    const {
+      children,
+      disableAutoFocus = false,
+      disableEnforceFocus = false,
+      disableRestoreFocus = false,
+      getTabbable = defaultGetTabbable,
+      isEnabled = defaultIsEnabled,
+      open
+    } = props;
+    const ignoreNextEnforceFocus = React__namespace.useRef();
+    const sentinelStart = React__namespace.useRef(null);
+    const sentinelEnd = React__namespace.useRef(null);
+    const nodeToRestore = React__namespace.useRef(null);
+    const reactFocusEventTarget = React__namespace.useRef(null); // This variable is useful when disableAutoFocus is true.
+    // It waits for the active element to move into the component to activate.
+
+    const activated = React__namespace.useRef(false);
+    const rootRef = React__namespace.useRef(null);
+    const handleRef = useForkRef(children.ref, rootRef);
+    const lastKeydown = React__namespace.useRef(null);
+    React__namespace.useEffect(() => {
+      // We might render an empty child.
+      if (!open || !rootRef.current) {
+        return;
+      }
+
+      activated.current = !disableAutoFocus;
+    }, [disableAutoFocus, open]);
+    React__namespace.useEffect(() => {
+      // We might render an empty child.
+      if (!open || !rootRef.current) {
+        return;
+      }
+
+      const doc = ownerDocument(rootRef.current);
+
+      if (!rootRef.current.contains(doc.activeElement)) {
+        if (!rootRef.current.hasAttribute('tabIndex')) {
+          {
+            console.error(['MUI: The modal content node does not accept focus.', 'For the benefit of assistive technologies, ' + 'the tabIndex of the node is being set to "-1".'].join('\n'));
+          }
+
+          rootRef.current.setAttribute('tabIndex', -1);
+        }
+
+        if (activated.current) {
+          rootRef.current.focus();
+        }
+      }
+
+      return () => {
+        // restoreLastFocus()
+        if (!disableRestoreFocus) {
+          // In IE11 it is possible for document.activeElement to be null resulting
+          // in nodeToRestore.current being null.
+          // Not all elements in IE11 have a focus method.
+          // Once IE11 support is dropped the focus() call can be unconditional.
+          if (nodeToRestore.current && nodeToRestore.current.focus) {
+            ignoreNextEnforceFocus.current = true;
+            nodeToRestore.current.focus();
+          }
+
+          nodeToRestore.current = null;
+        }
+      }; // Missing `disableRestoreFocus` which is fine.
+      // We don't support changing that prop on an open FocusTrap
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open]);
+    React__namespace.useEffect(() => {
+      // We might render an empty child.
+      if (!open || !rootRef.current) {
+        return;
+      }
+
+      const doc = ownerDocument(rootRef.current);
+
+      const contain = nativeEvent => {
+        const {
+          current: rootElement
+        } = rootRef; // Cleanup functions are executed lazily in React 17.
+        // Contain can be called between the component being unmounted and its cleanup function being run.
+
+        if (rootElement === null) {
+          return;
+        }
+
+        if (!doc.hasFocus() || disableEnforceFocus || !isEnabled() || ignoreNextEnforceFocus.current) {
+          ignoreNextEnforceFocus.current = false;
+          return;
+        }
+
+        if (!rootElement.contains(doc.activeElement)) {
+          // if the focus event is not coming from inside the children's react tree, reset the refs
+          if (nativeEvent && reactFocusEventTarget.current !== nativeEvent.target || doc.activeElement !== reactFocusEventTarget.current) {
+            reactFocusEventTarget.current = null;
+          } else if (reactFocusEventTarget.current !== null) {
+            return;
+          }
+
+          if (!activated.current) {
+            return;
+          }
+
+          let tabbable = [];
+
+          if (doc.activeElement === sentinelStart.current || doc.activeElement === sentinelEnd.current) {
+            tabbable = getTabbable(rootRef.current);
+          }
+
+          if (tabbable.length > 0) {
+            var _lastKeydown$current, _lastKeydown$current2;
+
+            const isShiftTab = Boolean(((_lastKeydown$current = lastKeydown.current) == null ? void 0 : _lastKeydown$current.shiftKey) && ((_lastKeydown$current2 = lastKeydown.current) == null ? void 0 : _lastKeydown$current2.key) === 'Tab');
+            const focusNext = tabbable[0];
+            const focusPrevious = tabbable[tabbable.length - 1];
+
+            if (isShiftTab) {
+              focusPrevious.focus();
+            } else {
+              focusNext.focus();
+            }
+          } else {
+            rootElement.focus();
+          }
+        }
+      };
+
+      const loopFocus = nativeEvent => {
+        lastKeydown.current = nativeEvent;
+
+        if (disableEnforceFocus || !isEnabled() || nativeEvent.key !== 'Tab') {
+          return;
+        } // Make sure the next tab starts from the right place.
+        // doc.activeElement referes to the origin.
+
+
+        if (doc.activeElement === rootRef.current && nativeEvent.shiftKey) {
+          // We need to ignore the next contain as
+          // it will try to move the focus back to the rootRef element.
+          ignoreNextEnforceFocus.current = true;
+          sentinelEnd.current.focus();
+        }
+      };
+
+      doc.addEventListener('focusin', contain);
+      doc.addEventListener('keydown', loopFocus, true); // With Edge, Safari and Firefox, no focus related events are fired when the focused area stops being a focused area.
+      // e.g. https://bugzilla.mozilla.org/show_bug.cgi?id=559561.
+      // Instead, we can look if the active element was restored on the BODY element.
+      //
+      // The whatwg spec defines how the browser should behave but does not explicitly mention any events:
+      // https://html.spec.whatwg.org/multipage/interaction.html#focus-fixup-rule.
+
+      const interval = setInterval(() => {
+        if (doc.activeElement.tagName === 'BODY') {
+          contain();
+        }
+      }, 50);
+      return () => {
+        clearInterval(interval);
+        doc.removeEventListener('focusin', contain);
+        doc.removeEventListener('keydown', loopFocus, true);
+      };
+    }, [disableAutoFocus, disableEnforceFocus, disableRestoreFocus, isEnabled, open, getTabbable]);
+
+    const onFocus = event => {
+      if (nodeToRestore.current === null) {
+        nodeToRestore.current = event.relatedTarget;
+      }
+
+      activated.current = true;
+      reactFocusEventTarget.current = event.target;
+      const childrenPropsHandler = children.props.onFocus;
+
+      if (childrenPropsHandler) {
+        childrenPropsHandler(event);
+      }
+    };
+
+    const handleFocusSentinel = event => {
+      if (nodeToRestore.current === null) {
+        nodeToRestore.current = event.relatedTarget;
+      }
+
+      activated.current = true;
+    };
+
+    return /*#__PURE__*/jsxRuntime_2(React__namespace.Fragment, {
+      children: [/*#__PURE__*/jsxRuntime_1("div", {
+        tabIndex: open ? 0 : -1,
+        onFocus: handleFocusSentinel,
+        ref: sentinelStart,
+        "data-testid": "sentinelStart"
+      }), /*#__PURE__*/React__namespace.cloneElement(children, {
+        ref: handleRef,
+        onFocus
+      }), /*#__PURE__*/jsxRuntime_1("div", {
+        tabIndex: open ? 0 : -1,
+        onFocus: handleFocusSentinel,
+        ref: sentinelEnd,
+        "data-testid": "sentinelEnd"
+      })]
+    });
+  }
+
+  FocusTrap.propTypes
+  /* remove-proptypes */
+  = {
+    // ----------------------------- Warning --------------------------------
+    // | These PropTypes are generated from the TypeScript type definitions |
+    // |     To update them edit the d.ts file and run "yarn proptypes"     |
+    // ----------------------------------------------------------------------
+
+    /**
+     * A single child content element.
+     */
+    children: elementAcceptingRef$1,
+
+    /**
+     * If `true`, the focus trap will not automatically shift focus to itself when it opens, and
+     * replace it to the last focused element when it closes.
+     * This also works correctly with any focus trap children that have the `disableAutoFocus` prop.
+     *
+     * Generally this should never be set to `true` as it makes the focus trap less
+     * accessible to assistive technologies, like screen readers.
+     * @default false
+     */
+    disableAutoFocus: PropTypes.bool,
+
+    /**
+     * If `true`, the focus trap will not prevent focus from leaving the focus trap while open.
+     *
+     * Generally this should never be set to `true` as it makes the focus trap less
+     * accessible to assistive technologies, like screen readers.
+     * @default false
+     */
+    disableEnforceFocus: PropTypes.bool,
+
+    /**
+     * If `true`, the focus trap will not restore focus to previously focused element once
+     * focus trap is hidden or unmounted.
+     * @default false
+     */
+    disableRestoreFocus: PropTypes.bool,
+
+    /**
+     * Returns an array of ordered tabbable nodes (i.e. in tab order) within the root.
+     * For instance, you can provide the "tabbable" npm dependency.
+     * @param {HTMLElement} root
+     */
+    getTabbable: PropTypes.func,
+
+    /**
+     * This prop extends the `open` prop.
+     * It allows to toggle the open state without having to wait for a rerender when changing the `open` prop.
+     * This prop should be memoized.
+     * It can be used to support multiple focus trap mounted at the same time.
+     * @default function defaultIsEnabled() {
+     *   return true;
+     * }
+     */
+    isEnabled: PropTypes.func,
+
+    /**
+     * If `true`, focus is locked.
+     */
+    open: PropTypes.bool.isRequired
+  } ;
+
+  {
+    // eslint-disable-next-line
+    FocusTrap['propTypes' + ''] = exactProp(FocusTrap.propTypes);
+  }
+
   var top = 'top';
   var bottom = 'bottom';
   var right = 'right';
@@ -12661,7 +13028,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
   generateUtilityClasses('MuiPopperUnstyled', ['root']);
 
   const _excluded$2b = ["anchorEl", "children", "component", "components", "componentsProps", "direction", "disablePortal", "modifiers", "open", "ownerState", "placement", "popperOptions", "popperRef", "TransitionProps"],
-        _excluded2$b = ["anchorEl", "children", "container", "direction", "disablePortal", "keepMounted", "modifiers", "open", "placement", "popperOptions", "popperRef", "style", "transition"];
+        _excluded2$a = ["anchorEl", "children", "container", "direction", "disablePortal", "keepMounted", "modifiers", "open", "placement", "popperOptions", "popperRef", "style", "transition"];
 
   function flipPlacement(placement, direction) {
     if (direction === 'ltr') {
@@ -12850,7 +13217,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       style,
       transition = false
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded2$b);
+          other = _objectWithoutPropertiesLoose(props, _excluded2$a);
 
     const [exited, setExited] = React__namespace.useState(true);
 
@@ -13292,363 +13659,6 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
 
   }
 
-  const candidatesSelector = ['input', 'select', 'textarea', 'a[href]', 'button', '[tabindex]', 'audio[controls]', 'video[controls]', '[contenteditable]:not([contenteditable="false"])'].join(',');
-
-  function getTabIndex(node) {
-    const tabindexAttr = parseInt(node.getAttribute('tabindex'), 10);
-
-    if (!Number.isNaN(tabindexAttr)) {
-      return tabindexAttr;
-    } // Browsers do not return `tabIndex` correctly for contentEditable nodes;
-    // https://bugs.chromium.org/p/chromium/issues/detail?id=661108&q=contenteditable%20tabindex&can=2
-    // so if they don't have a tabindex attribute specifically set, assume it's 0.
-    // in Chrome, <details/>, <audio controls/> and <video controls/> elements get a default
-    //  `tabIndex` of -1 when the 'tabindex' attribute isn't specified in the DOM,
-    //  yet they are still part of the regular tab order; in FF, they get a default
-    //  `tabIndex` of 0; since Chrome still puts those elements in the regular tab
-    //  order, consider their tab index to be 0.
-
-
-    if (node.contentEditable === 'true' || (node.nodeName === 'AUDIO' || node.nodeName === 'VIDEO' || node.nodeName === 'DETAILS') && node.getAttribute('tabindex') === null) {
-      return 0;
-    }
-
-    return node.tabIndex;
-  }
-
-  function isNonTabbableRadio(node) {
-    if (node.tagName !== 'INPUT' || node.type !== 'radio') {
-      return false;
-    }
-
-    if (!node.name) {
-      return false;
-    }
-
-    const getRadio = selector => node.ownerDocument.querySelector(`input[type="radio"]${selector}`);
-
-    let roving = getRadio(`[name="${node.name}"]:checked`);
-
-    if (!roving) {
-      roving = getRadio(`[name="${node.name}"]`);
-    }
-
-    return roving !== node;
-  }
-
-  function isNodeMatchingSelectorFocusable(node) {
-    if (node.disabled || node.tagName === 'INPUT' && node.type === 'hidden' || isNonTabbableRadio(node)) {
-      return false;
-    }
-
-    return true;
-  }
-
-  function defaultGetTabbable(root) {
-    const regularTabNodes = [];
-    const orderedTabNodes = [];
-    Array.from(root.querySelectorAll(candidatesSelector)).forEach((node, i) => {
-      const nodeTabIndex = getTabIndex(node);
-
-      if (nodeTabIndex === -1 || !isNodeMatchingSelectorFocusable(node)) {
-        return;
-      }
-
-      if (nodeTabIndex === 0) {
-        regularTabNodes.push(node);
-      } else {
-        orderedTabNodes.push({
-          documentOrder: i,
-          tabIndex: nodeTabIndex,
-          node
-        });
-      }
-    });
-    return orderedTabNodes.sort((a, b) => a.tabIndex === b.tabIndex ? a.documentOrder - b.documentOrder : a.tabIndex - b.tabIndex).map(a => a.node).concat(regularTabNodes);
-  }
-
-  function defaultIsEnabled() {
-    return true;
-  }
-  /**
-   * Utility component that locks focus inside the component.
-   */
-
-
-  function TrapFocus(props) {
-    const {
-      children,
-      disableAutoFocus = false,
-      disableEnforceFocus = false,
-      disableRestoreFocus = false,
-      getTabbable = defaultGetTabbable,
-      isEnabled = defaultIsEnabled,
-      open
-    } = props;
-    const ignoreNextEnforceFocus = React__namespace.useRef();
-    const sentinelStart = React__namespace.useRef(null);
-    const sentinelEnd = React__namespace.useRef(null);
-    const nodeToRestore = React__namespace.useRef(null);
-    const reactFocusEventTarget = React__namespace.useRef(null); // This variable is useful when disableAutoFocus is true.
-    // It waits for the active element to move into the component to activate.
-
-    const activated = React__namespace.useRef(false);
-    const rootRef = React__namespace.useRef(null);
-    const handleRef = useForkRef(children.ref, rootRef);
-    const lastKeydown = React__namespace.useRef(null);
-    React__namespace.useEffect(() => {
-      // We might render an empty child.
-      if (!open || !rootRef.current) {
-        return;
-      }
-
-      activated.current = !disableAutoFocus;
-    }, [disableAutoFocus, open]);
-    React__namespace.useEffect(() => {
-      // We might render an empty child.
-      if (!open || !rootRef.current) {
-        return;
-      }
-
-      const doc = ownerDocument(rootRef.current);
-
-      if (!rootRef.current.contains(doc.activeElement)) {
-        if (!rootRef.current.hasAttribute('tabIndex')) {
-          {
-            console.error(['MUI: The modal content node does not accept focus.', 'For the benefit of assistive technologies, ' + 'the tabIndex of the node is being set to "-1".'].join('\n'));
-          }
-
-          rootRef.current.setAttribute('tabIndex', -1);
-        }
-
-        if (activated.current) {
-          rootRef.current.focus();
-        }
-      }
-
-      return () => {
-        // restoreLastFocus()
-        if (!disableRestoreFocus) {
-          // In IE11 it is possible for document.activeElement to be null resulting
-          // in nodeToRestore.current being null.
-          // Not all elements in IE11 have a focus method.
-          // Once IE11 support is dropped the focus() call can be unconditional.
-          if (nodeToRestore.current && nodeToRestore.current.focus) {
-            ignoreNextEnforceFocus.current = true;
-            nodeToRestore.current.focus();
-          }
-
-          nodeToRestore.current = null;
-        }
-      }; // Missing `disableRestoreFocus` which is fine.
-      // We don't support changing that prop on an open TrapFocus
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [open]);
-    React__namespace.useEffect(() => {
-      // We might render an empty child.
-      if (!open || !rootRef.current) {
-        return;
-      }
-
-      const doc = ownerDocument(rootRef.current);
-
-      const contain = nativeEvent => {
-        const {
-          current: rootElement
-        } = rootRef; // Cleanup functions are executed lazily in React 17.
-        // Contain can be called between the component being unmounted and its cleanup function being run.
-
-        if (rootElement === null) {
-          return;
-        }
-
-        if (!doc.hasFocus() || disableEnforceFocus || !isEnabled() || ignoreNextEnforceFocus.current) {
-          ignoreNextEnforceFocus.current = false;
-          return;
-        }
-
-        if (!rootElement.contains(doc.activeElement)) {
-          // if the focus event is not coming from inside the children's react tree, reset the refs
-          if (nativeEvent && reactFocusEventTarget.current !== nativeEvent.target || doc.activeElement !== reactFocusEventTarget.current) {
-            reactFocusEventTarget.current = null;
-          } else if (reactFocusEventTarget.current !== null) {
-            return;
-          }
-
-          if (!activated.current) {
-            return;
-          }
-
-          let tabbable = [];
-
-          if (doc.activeElement === sentinelStart.current || doc.activeElement === sentinelEnd.current) {
-            tabbable = getTabbable(rootRef.current);
-          }
-
-          if (tabbable.length > 0) {
-            var _lastKeydown$current, _lastKeydown$current2;
-
-            const isShiftTab = Boolean(((_lastKeydown$current = lastKeydown.current) == null ? void 0 : _lastKeydown$current.shiftKey) && ((_lastKeydown$current2 = lastKeydown.current) == null ? void 0 : _lastKeydown$current2.key) === 'Tab');
-            const focusNext = tabbable[0];
-            const focusPrevious = tabbable[tabbable.length - 1];
-
-            if (isShiftTab) {
-              focusPrevious.focus();
-            } else {
-              focusNext.focus();
-            }
-          } else {
-            rootElement.focus();
-          }
-        }
-      };
-
-      const loopFocus = nativeEvent => {
-        lastKeydown.current = nativeEvent;
-
-        if (disableEnforceFocus || !isEnabled() || nativeEvent.key !== 'Tab') {
-          return;
-        } // Make sure the next tab starts from the right place.
-        // doc.activeElement referes to the origin.
-
-
-        if (doc.activeElement === rootRef.current && nativeEvent.shiftKey) {
-          // We need to ignore the next contain as
-          // it will try to move the focus back to the rootRef element.
-          ignoreNextEnforceFocus.current = true;
-          sentinelEnd.current.focus();
-        }
-      };
-
-      doc.addEventListener('focusin', contain);
-      doc.addEventListener('keydown', loopFocus, true); // With Edge, Safari and Firefox, no focus related events are fired when the focused area stops being a focused area.
-      // e.g. https://bugzilla.mozilla.org/show_bug.cgi?id=559561.
-      // Instead, we can look if the active element was restored on the BODY element.
-      //
-      // The whatwg spec defines how the browser should behave but does not explicitly mention any events:
-      // https://html.spec.whatwg.org/multipage/interaction.html#focus-fixup-rule.
-
-      const interval = setInterval(() => {
-        if (doc.activeElement.tagName === 'BODY') {
-          contain();
-        }
-      }, 50);
-      return () => {
-        clearInterval(interval);
-        doc.removeEventListener('focusin', contain);
-        doc.removeEventListener('keydown', loopFocus, true);
-      };
-    }, [disableAutoFocus, disableEnforceFocus, disableRestoreFocus, isEnabled, open, getTabbable]);
-
-    const onFocus = event => {
-      if (nodeToRestore.current === null) {
-        nodeToRestore.current = event.relatedTarget;
-      }
-
-      activated.current = true;
-      reactFocusEventTarget.current = event.target;
-      const childrenPropsHandler = children.props.onFocus;
-
-      if (childrenPropsHandler) {
-        childrenPropsHandler(event);
-      }
-    };
-
-    const handleFocusSentinel = event => {
-      if (nodeToRestore.current === null) {
-        nodeToRestore.current = event.relatedTarget;
-      }
-
-      activated.current = true;
-    };
-
-    return /*#__PURE__*/jsxRuntime_2(React__namespace.Fragment, {
-      children: [/*#__PURE__*/jsxRuntime_1("div", {
-        tabIndex: open ? 0 : -1,
-        onFocus: handleFocusSentinel,
-        ref: sentinelStart,
-        "data-testid": "sentinelStart"
-      }), /*#__PURE__*/React__namespace.cloneElement(children, {
-        ref: handleRef,
-        onFocus
-      }), /*#__PURE__*/jsxRuntime_1("div", {
-        tabIndex: open ? 0 : -1,
-        onFocus: handleFocusSentinel,
-        ref: sentinelEnd,
-        "data-testid": "sentinelEnd"
-      })]
-    });
-  }
-
-  TrapFocus.propTypes
-  /* remove-proptypes */
-  = {
-    // ----------------------------- Warning --------------------------------
-    // | These PropTypes are generated from the TypeScript type definitions |
-    // |     To update them edit the d.ts file and run "yarn proptypes"     |
-    // ----------------------------------------------------------------------
-
-    /**
-     * A single child content element.
-     */
-    children: elementAcceptingRef$1,
-
-    /**
-     * If `true`, the trap focus will not automatically shift focus to itself when it opens, and
-     * replace it to the last focused element when it closes.
-     * This also works correctly with any trap focus children that have the `disableAutoFocus` prop.
-     *
-     * Generally this should never be set to `true` as it makes the trap focus less
-     * accessible to assistive technologies, like screen readers.
-     * @default false
-     */
-    disableAutoFocus: PropTypes.bool,
-
-    /**
-     * If `true`, the trap focus will not prevent focus from leaving the trap focus while open.
-     *
-     * Generally this should never be set to `true` as it makes the trap focus less
-     * accessible to assistive technologies, like screen readers.
-     * @default false
-     */
-    disableEnforceFocus: PropTypes.bool,
-
-    /**
-     * If `true`, the trap focus will not restore focus to previously focused element once
-     * trap focus is hidden or unmounted.
-     * @default false
-     */
-    disableRestoreFocus: PropTypes.bool,
-
-    /**
-     * Returns an array of ordered tabbable nodes (i.e. in tab order) within the root.
-     * For instance, you can provide the "tabbable" npm dependency.
-     * @param {HTMLElement} root
-     */
-    getTabbable: PropTypes.func,
-
-    /**
-     * This prop extends the `open` prop.
-     * It allows to toggle the open state without having to wait for a rerender when changing the `open` prop.
-     * This prop should be memoized.
-     * It can be used to support multiple trap focus mounted at the same time.
-     * @default function defaultIsEnabled() {
-     *   return true;
-     * }
-     */
-    isEnabled: PropTypes.func,
-
-    /**
-     * If `true`, focus is locked.
-     */
-    open: PropTypes.bool.isRequired
-  } ;
-
-  {
-    // eslint-disable-next-line
-    TrapFocus['propTypes' + ''] = exactProp(TrapFocus.propTypes);
-  }
-
   function getModalUtilityClass(slot) {
     return generateUtilityClass('MuiModal', slot);
   }
@@ -13910,7 +13920,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       container: container,
       disablePortal: disablePortal,
       children: /*#__PURE__*/jsxRuntime_2(Root, _extends({}, rootProps, {
-        children: [!hideBackdrop && BackdropComponent ? /*#__PURE__*/jsxRuntime_1(BackdropComponent, _extends({}, backdropProps)) : null, /*#__PURE__*/jsxRuntime_1(TrapFocus, {
+        children: [!hideBackdrop && BackdropComponent ? /*#__PURE__*/jsxRuntime_1(BackdropComponent, _extends({}, backdropProps)) : null, /*#__PURE__*/jsxRuntime_1(FocusTrap, {
           disableEnforceFocus: disableEnforceFocus,
           disableAutoFocus: disableAutoFocus,
           disableRestoreFocus: disableRestoreFocus,
@@ -14524,8 +14534,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
 
     const getFingerNewValue = ({
       finger,
-      move = false,
-      values: values2
+      move = false
     }) => {
       const {
         current: slider
@@ -14563,19 +14572,19 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
 
       if (range) {
         if (!move) {
-          activeIndex = findClosest(values2, newValue);
+          activeIndex = findClosest(values, newValue);
         } else {
           activeIndex = previousIndex.current;
         } // Bound the new value to the thumb's neighbours.
 
 
         if (disableSwap) {
-          newValue = clamp$2(newValue, values2[activeIndex - 1] || -Infinity, values2[activeIndex + 1] || Infinity);
+          newValue = clamp$2(newValue, values[activeIndex - 1] || -Infinity, values[activeIndex + 1] || Infinity);
         }
 
         const previousValue = newValue;
         newValue = setValueIndex({
-          values: values2,
+          values,
           newValue,
           index: activeIndex
         }); // Potentially swap the index if needed.
@@ -14613,8 +14622,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         activeIndex
       } = getFingerNewValue({
         finger,
-        move: true,
-        values
+        move: true
       });
       focusThumb({
         sliderRef,
@@ -14627,7 +14635,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         setDragging(true);
       }
 
-      if (handleChange) {
+      if (handleChange && newValue !== valueDerived) {
         handleChange(nativeEvent, newValue, activeIndex);
       }
     });
@@ -14643,8 +14651,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         newValue
       } = getFingerNewValue({
         finger,
-        move: true,
-        values
+        move: true
       });
       setActive(-1);
 
@@ -14684,8 +14691,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
           newValue,
           activeIndex
         } = getFingerNewValue({
-          finger,
-          values
+          finger
         });
         focusThumb({
           sliderRef,
@@ -14759,8 +14765,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
           newValue,
           activeIndex
         } = getFingerNewValue({
-          finger,
-          values
+          finger
         });
         focusThumb({
           sliderRef,
@@ -14930,7 +14935,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       componentsProps = {}
     } = props,
           other = _objectWithoutPropertiesLoose(props, _excluded$29); // all props with defaults
-    // consider extracting to hook an reusing the lint rule for the varints
+    // consider extracting to hook an reusing the lint rule for the variants
 
 
     const ownerState = _extends({}, props, {
@@ -15059,7 +15064,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
             className: clsx(classes.markLabel, markLabelProps.className, markActive && classes.markLabelActive),
             children: mark.label
           })) : null]
-        }, mark.value);
+        }, index);
       }), values.map((value, index) => {
         const percent = valueToPercent(value, min, max);
         const style = axisProps[axis].offset(percent);
@@ -15503,8 +15508,6 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         // ResizeObserver's handler that runs because of the change in the layout is trying to
         // access a dom node that is no longer there (as the fallback component is being shown instead).
         // See https://github.com/mui/material-ui/issues/32640
-        // TODO: Add tests that will ensure the component is not failing when
-        // replaced by Suspense with a fallback, once React is updated to version 18
 
         if (inputRef.current) {
           syncHeightWithFlushSycn();
@@ -16677,7 +16680,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var Paper$1 = Paper;
 
   const _excluded$22 = ["colorSchemes", "cssVarPrefix"],
-        _excluded2$a = ["palette"];
+        _excluded2$9 = ["palette"];
   const defaultDarkOverlays = [...Array(25)].map((_, index) => {
     if (index === 0) {
       return undefined;
@@ -16717,7 +16720,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
           {
       palette: lightPalette
     } = _createThemeWithoutVa,
-          muiTheme = _objectWithoutPropertiesLoose(_createThemeWithoutVa, _excluded2$a);
+          muiTheme = _objectWithoutPropertiesLoose(_createThemeWithoutVa, _excluded2$9);
 
     const {
       palette: darkPalette
@@ -16935,6 +16938,13 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     return theme;
   }
 
+  /**
+   * @internal These variables should not appear in the :root stylesheet when the `defaultMode="dark"`
+   */
+  const excludeVariablesFromRoot = cssVarPrefix => [...[...Array(24)].map((_, index) => `--${cssVarPrefix ? `${cssVarPrefix}-` : ''}overlays-${index + 1}`), `--${cssVarPrefix ? `${cssVarPrefix}-` : ''}palette-AppBar-darkBg`, `--${cssVarPrefix ? `${cssVarPrefix}-` : ''}palette-AppBar-darkColor`];
+
+  var excludeVariablesFromRoot$1 = excludeVariablesFromRoot;
+
   const shouldSkipGeneratingVar = keys => {
     var _keys$;
 
@@ -16962,7 +16972,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
       return newTheme;
     },
-    shouldSkipGeneratingVar
+    shouldSkipGeneratingVar,
+    excludeVariablesFromRoot: excludeVariablesFromRoot$1
   });
 
   function getSvgIconUtilityClass(slot) {
@@ -17014,7 +17025,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         inherit: 'inherit',
         small: ((_theme$typography = theme.typography) == null ? void 0 : (_theme$typography$pxT = _theme$typography.pxToRem) == null ? void 0 : _theme$typography$pxT.call(_theme$typography, 20)) || '1.25rem',
         medium: ((_theme$typography2 = theme.typography) == null ? void 0 : (_theme$typography2$px = _theme$typography2.pxToRem) == null ? void 0 : _theme$typography2$px.call(_theme$typography2, 24)) || '1.5rem',
-        large: ((_theme$typography3 = theme.typography) == null ? void 0 : (_theme$typography3$px = _theme$typography3.pxToRem) == null ? void 0 : _theme$typography3$px.call(_theme$typography3, 35)) || '2.1875'
+        large: ((_theme$typography3 = theme.typography) == null ? void 0 : (_theme$typography3$px = _theme$typography3.pxToRem) == null ? void 0 : _theme$typography3$px.call(_theme$typography3, 35)) || '2.1875rem'
       }[ownerState.fontSize],
       // TODO v5 deprecate, v6 remove for sx
       color: (_palette$ownerState$c = (_palette = (theme.vars || theme).palette) == null ? void 0 : (_palette$ownerState$c2 = _palette[ownerState.color]) == null ? void 0 : _palette$ownerState$c2.main) != null ? _palette$ownerState$c : {
@@ -17062,13 +17073,13 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     return /*#__PURE__*/jsxRuntime_2(SvgIconRoot, _extends({
       as: component,
       className: clsx(classes.root, className),
-      ownerState: ownerState,
       focusable: "false",
       color: htmlColor,
       "aria-hidden": titleAccess ? undefined : true,
       role: titleAccess ? 'img' : undefined,
       ref: ref
     }, more, other, {
+      ownerState: ownerState,
       children: [children, titleAccess ? /*#__PURE__*/jsxRuntime_1("title", {
         children: titleAccess
       }) : null]
@@ -21547,7 +21558,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   function getChipUtilityClass(slot) {
     return generateUtilityClass('MuiChip', slot);
   }
-  const chipClasses = generateUtilityClasses('MuiChip', ['root', 'sizeSmall', 'sizeMedium', 'colorPrimary', 'colorSecondary', 'disabled', 'clickable', 'clickableColorPrimary', 'clickableColorSecondary', 'deletable', 'deletableColorPrimary', 'deletableColorSecondary', 'outlined', 'filled', 'outlinedPrimary', 'outlinedSecondary', 'filledPrimary', 'filledSecondary', 'avatar', 'avatarSmall', 'avatarMedium', 'avatarColorPrimary', 'avatarColorSecondary', 'icon', 'iconSmall', 'iconMedium', 'iconColorPrimary', 'iconColorSecondary', 'label', 'labelSmall', 'labelMedium', 'deleteIcon', 'deleteIconSmall', 'deleteIconMedium', 'deleteIconColorPrimary', 'deleteIconColorSecondary', 'deleteIconOutlinedColorPrimary', 'deleteIconOutlinedColorSecondary', 'deleteIconFilledColorPrimary', 'deleteIconFilledColorSecondary', 'focusVisible']);
+  const chipClasses = generateUtilityClasses('MuiChip', ['root', 'sizeSmall', 'sizeMedium', 'colorError', 'colorInfo', 'colorPrimary', 'colorSecondary', 'colorSuccess', 'colorWarning', 'disabled', 'clickable', 'clickableColorPrimary', 'clickableColorSecondary', 'deletable', 'deletableColorPrimary', 'deletableColorSecondary', 'outlined', 'filled', 'outlinedPrimary', 'outlinedSecondary', 'filledPrimary', 'filledSecondary', 'avatar', 'avatarSmall', 'avatarMedium', 'avatarColorPrimary', 'avatarColorSecondary', 'icon', 'iconSmall', 'iconMedium', 'iconColorPrimary', 'iconColorSecondary', 'label', 'labelSmall', 'labelMedium', 'deleteIcon', 'deleteIconSmall', 'deleteIconMedium', 'deleteIconColorPrimary', 'deleteIconColorSecondary', 'deleteIconOutlinedColorPrimary', 'deleteIconOutlinedColorSecondary', 'deleteIconFilledColorPrimary', 'deleteIconFilledColorSecondary', 'focusVisible']);
   var chipClasses$1 = chipClasses;
 
   const _excluded$1P = ["avatar", "className", "clickable", "color", "component", "deleteIcon", "disabled", "icon", "label", "onClick", "onDelete", "onKeyDown", "onKeyUp", "size", "variant"];
@@ -25859,8 +25870,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   var ButtonGroupContext$1 = ButtonGroupContext;
 
-  const _excluded$1E = ["children", "color", "component", "className", "disabled", "disableElevation", "disableFocusRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"],
-        _excluded2$9 = ["root"];
+  const _excluded$1E = ["children", "color", "component", "className", "disabled", "disableElevation", "disableFocusRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"];
 
   const useUtilityClasses$1n = ownerState => {
     const {
@@ -26104,11 +26114,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       variant
     });
 
-    const _useUtilityClasses = useUtilityClasses$1n(ownerState),
-          {
-      root: classesRoot
-    } = _useUtilityClasses,
-          classes = _objectWithoutPropertiesLoose(_useUtilityClasses, _excluded2$9);
+    const classes = useUtilityClasses$1n(ownerState);
 
     const startIcon = startIconProp && /*#__PURE__*/jsxRuntime_1(ButtonStartIcon, {
       className: classes.startIcon,
@@ -26124,7 +26130,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
     return /*#__PURE__*/jsxRuntime_2(ButtonRoot, _extends({
       ownerState: ownerState,
-      className: clsx(contextProps.className, classesRoot, className),
+      className: clsx(contextProps.className, classes.root, className),
       component: component,
       disabled: disabled,
       focusRipple: !disableFocusRipple,
@@ -27612,7 +27618,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const checkboxClasses = generateUtilityClasses('MuiCheckbox', ['root', 'checked', 'disabled', 'indeterminate', 'colorPrimary', 'colorSecondary']);
   var checkboxClasses$1 = checkboxClasses;
 
-  const _excluded$1v = ["checkedIcon", "color", "icon", "indeterminate", "indeterminateIcon", "inputProps", "size"];
+  const _excluded$1v = ["checkedIcon", "color", "icon", "indeterminate", "indeterminateIcon", "inputProps", "size", "className"];
 
   const useUtilityClasses$1e = ownerState => {
     const {
@@ -27680,7 +27686,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       indeterminate = false,
       indeterminateIcon: indeterminateIconProp = defaultIndeterminateIcon,
       inputProps,
-      size = 'medium'
+      size = 'medium',
+      className
     } = props,
           other = _objectWithoutPropertiesLoose(props, _excluded$1v);
 
@@ -27706,7 +27713,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         fontSize: (_indeterminateIcon$pr = indeterminateIcon.props.fontSize) != null ? _indeterminateIcon$pr : size
       }),
       ownerState: ownerState,
-      ref: ref
+      ref: ref,
+      className: clsx(classes.root, className)
     }, other, {
       classes: classes
     }));
@@ -27735,6 +27743,11 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      */
     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
@@ -29233,7 +29246,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const dialogContentTextClasses = generateUtilityClasses('MuiDialogContentText', ['root']);
   var dialogContentTextClasses$1 = dialogContentTextClasses;
 
-  const _excluded$1p = ["children"];
+  const _excluded$1p = ["children", "className"];
 
   const useUtilityClasses$19 = ownerState => {
     const {
@@ -29258,7 +29271,10 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       name: 'MuiDialogContentText'
     });
 
-    const ownerState = _objectWithoutPropertiesLoose(props, _excluded$1p);
+    const {
+      className
+    } = props,
+          ownerState = _objectWithoutPropertiesLoose(props, _excluded$1p);
 
     const classes = useUtilityClasses$19(ownerState);
     return /*#__PURE__*/jsxRuntime_1(DialogContentTextRoot, _extends({
@@ -29266,7 +29282,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       variant: "body1",
       color: "text.secondary",
       ref: ref,
-      ownerState: ownerState
+      ownerState: ownerState,
+      className: clsx(classes.root, className)
     }, props, {
       classes: classes
     }));
@@ -29289,6 +29306,11 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      */
     classes: PropTypes.object,
 
+    /**
+     * @ignore
+     */
+    className: PropTypes.string,
+
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
@@ -30343,12 +30365,14 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const slots = {
       root: ['root', variant, `size${capitalize(size)}`, color === 'inherit' ? 'colorInherit' : color]
     };
-    return composeClasses(slots, getFabUtilityClass, classes);
+    const composedClasses = composeClasses(slots, getFabUtilityClass, classes);
+    return _extends({}, classes, composedClasses);
   };
 
   const FabRoot = styled$1(ButtonBase$1, {
     name: 'MuiFab',
     slot: 'Root',
+    shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes',
     overridesResolver: (props, styles) => {
       const {
         ownerState
@@ -30474,6 +30498,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       ownerState: ownerState,
       ref: ref
     }, other, {
+      classes: classes,
       children: children
     }));
   });
@@ -34953,7 +34978,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const inputLabelClasses = generateUtilityClasses('MuiInputLabel', ['root', 'focused', 'disabled', 'error', 'required', 'asterisk', 'formControl', 'sizeSmall', 'shrink', 'animated', 'standard', 'filled', 'outlined']);
   var inputLabelClasses$1 = inputLabelClasses;
 
-  const _excluded$12 = ["disableAnimation", "margin", "shrink", "variant"];
+  const _excluded$12 = ["disableAnimation", "margin", "shrink", "variant", "className"];
 
   const useUtilityClasses$S = ownerState => {
     const {
@@ -35053,7 +35078,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
     const {
       disableAnimation = false,
-      shrink: shrinkProp
+      shrink: shrinkProp,
+      className
     } = props,
           other = _objectWithoutPropertiesLoose(props, _excluded$12);
 
@@ -35083,7 +35109,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     return /*#__PURE__*/jsxRuntime_1(InputLabelRoot, _extends({
       "data-shrink": shrink,
       ownerState: ownerState,
-      ref: ref
+      ref: ref,
+      className: clsx(classes.root, className)
     }, other, {
       classes: classes
     }));
@@ -35106,6 +35133,11 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      */
     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
@@ -35959,7 +35991,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const listItemButtonClasses = generateUtilityClasses('MuiListItemButton', ['root', 'focusVisible', 'dense', 'alignItemsFlexStart', 'disabled', 'divider', 'gutters', 'selected']);
   var listItemButtonClasses$1 = listItemButtonClasses;
 
-  const _excluded$_ = ["alignItems", "autoFocus", "component", "children", "dense", "disableGutters", "divider", "focusVisibleClassName", "selected"];
+  const _excluded$_ = ["alignItems", "autoFocus", "component", "children", "dense", "disableGutters", "divider", "focusVisibleClassName", "selected", "className"];
   const overridesResolver$3 = (props, styles) => {
     const {
       ownerState
@@ -36061,7 +36093,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       disableGutters = false,
       divider = false,
       focusVisibleClassName,
-      selected = false
+      selected = false,
+      className
     } = props,
           other = _objectWithoutPropertiesLoose(props, _excluded$_);
 
@@ -36099,7 +36132,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         href: other.href || other.to,
         component: (other.href || other.to) && component === 'div' ? 'a' : component,
         focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
-        ownerState: ownerState
+        ownerState: ownerState,
+        className: clsx(classes.root, className)
       }, other, {
         classes: classes,
         children: children
@@ -36138,6 +36172,11 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      */
     classes: PropTypes.object,
 
+    /**
+     * @ignore
+     */
+    className: PropTypes.string,
+
     /**
      * The component used for the root node.
      * Either a string to use a HTML element or a component.
@@ -37683,6 +37722,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         }, PaperProps, {
           ref: handlePaperRef,
           className: clsx(classes.paper, PaperProps.className),
+          ownerState: ownerState,
           children: children
         }))
       }))
@@ -38156,7 +38196,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const menuItemClasses = generateUtilityClasses('MuiMenuItem', ['root', 'focusVisible', 'dense', 'disabled', 'divider', 'gutters', 'selected']);
   var menuItemClasses$1 = menuItemClasses;
 
-  const _excluded$R = ["autoFocus", "component", "dense", "divider", "disableGutters", "focusVisibleClassName", "role", "tabIndex"];
+  const _excluded$R = ["autoFocus", "component", "dense", "divider", "disableGutters", "focusVisibleClassName", "role", "tabIndex", "className"];
   const overridesResolver$1 = (props, styles) => {
     const {
       ownerState
@@ -38278,7 +38318,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       disableGutters = false,
       focusVisibleClassName,
       role = 'menuitem',
-      tabIndex: tabIndexProp
+      tabIndex: tabIndexProp,
+      className
     } = props,
           other = _objectWithoutPropertiesLoose(props, _excluded$R);
 
@@ -38319,7 +38360,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         role: role,
         tabIndex: tabIndex,
         component: component,
-        focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName)
+        focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
+        className: clsx(classes.root, className)
       }, other, {
         ownerState: ownerState,
         classes: classes
@@ -38351,6 +38393,11 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      */
     classes: PropTypes.object,
 
+    /**
+     * @ignore
+     */
+    className: PropTypes.string,
+
     /**
      * The component used for the root node.
      * Either a string to use a HTML element or a component.
@@ -40343,7 +40390,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const radioClasses = generateUtilityClasses('MuiRadio', ['root', 'checked', 'disabled', 'colorPrimary', 'colorSecondary']);
   var radioClasses$1 = radioClasses;
 
-  const _excluded$I = ["checked", "checkedIcon", "color", "icon", "name", "onChange", "size"];
+  const _excluded$I = ["checked", "checkedIcon", "color", "icon", "name", "onChange", "size", "className"];
 
   const useUtilityClasses$z = ownerState => {
     const {
@@ -40418,7 +40465,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       icon = defaultIcon$1,
       name: nameProp,
       onChange: onChangeProp,
-      size = 'medium'
+      size = 'medium',
+      className
     } = props,
           other = _objectWithoutPropertiesLoose(props, _excluded$I);
 
@@ -40456,7 +40504,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       name: name,
       checked: checked,
       onChange: onChange,
-      ref: ref
+      ref: ref,
+      className: clsx(classes.root, className)
     }, other));
   });
   Radio.propTypes
@@ -40483,6 +40532,11 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      */
     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
@@ -45275,7 +45329,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const handleFocusRef = useForkRef(focusVisibleRef, handleUseRef);
     const handleRef = useForkRef(children.ref, handleFocusRef); // There is no point in displaying an empty tooltip.
 
-    if (title === '') {
+    if (typeof title !== 'number' && !title) {
       open = false;
     }
 
@@ -45617,11 +45671,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
 
     /**
-     * Tooltip title. Zero-length titles string are never displayed.
+     * Tooltip title. Zero-length titles string, undefined, null and false are never displayed.
      */
-    title: PropTypes
-    /* @typescript-to-proptypes-ignore */
-    .node.isRequired,
+    title: PropTypes.node,
 
     /**
      * The component used for the transition.
@@ -46638,7 +46690,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       root: ['root', orientation, error && 'error', disabled && 'disabled', alternativeLabel && 'alternativeLabel'],
       label: ['label', active && 'active', completed && 'completed', error && 'error', disabled && 'disabled', alternativeLabel && 'alternativeLabel'],
       iconContainer: ['iconContainer', active && 'active', completed && 'completed', error && 'error', disabled && 'disabled', alternativeLabel && 'alternativeLabel'],
-      labelContainer: ['labelContainer']
+      labelContainer: ['labelContainer', alternativeLabel && 'alternativeLabel']
     };
     return composeClasses(slots, getStepLabelUtilityClass, classes);
   };
@@ -46687,7 +46739,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       fontWeight: 500
     },
     [`&.${stepLabelClasses$1.alternativeLabel}`]: {
-      textAlign: 'center',
       marginTop: 16
     },
     [`&.${stepLabelClasses$1.error}`]: {
@@ -46715,7 +46766,10 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     theme
   }) => ({
     width: '100%',
-    color: (theme.vars || theme).palette.text.secondary
+    color: (theme.vars || theme).palette.text.secondary,
+    [`&.${stepLabelClasses$1.alternativeLabel}`]: {
+      textAlign: 'center'
+    }
   }));
   const StepLabel = /*#__PURE__*/React__namespace.forwardRef(function StepLabel(inProps, ref) {
     const props = useThemeProps({
@@ -52717,7 +52771,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   exports.Tooltip = Tooltip$1;
   exports.Typography = Typography$1;
   exports.Unstable_Grid2 = Grid2$1;
-  exports.Unstable_TrapFocus = TrapFocus;
+  exports.Unstable_TrapFocus = FocusTrap;
   exports.Zoom = Zoom$1;
   exports.accordionActionsClasses = accordionActionsClasses$1;
   exports.accordionClasses = accordionClasses$1;