@mui/material 5.10.5 → 5.10.7

package/umd/material-ui.development.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.10.5
+/** @license MUI v5.10.7
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -1838,6 +1838,16 @@
   };
 
   var isBrowser$3 = typeof document !== 'undefined';
+
+  var syncFallback = function syncFallback(create) {
+    return create();
+  };
+
+  var useInsertionEffect = React__namespace['useInsertion' + 'Effect'] ? React__namespace['useInsertion' + 'Effect'] : false;
+  var useInsertionEffectAlwaysWithSyncFallback = !isBrowser$3 ? syncFallback : useInsertionEffect || syncFallback;
+  var useInsertionEffectWithLayoutFallback = useInsertionEffect || React.useLayoutEffect;
+
+  var isBrowser$2 = typeof document !== 'undefined';
   var hasOwnProperty$1 = {}.hasOwnProperty;
 
   var EmotionCacheContext = /* #__PURE__ */React.createContext( // we're doing this to avoid preconstruct's dead code elimination in this one case
@@ -1865,7 +1875,7 @@
     });
   };
 
-  if (!isBrowser$3) {
+  if (!isBrowser$2) {
     withEmotionCache = function withEmotionCache(func) {
       return function (props) {
         var cache = React.useContext(EmotionCacheContext);
@@ -1895,18 +1905,6 @@
     ThemeContext$2.displayName = 'EmotionThemeContext';
   }
 
-  var isBrowser$1$1 = typeof document !== 'undefined';
-  var useInsertionEffect$2 = React__namespace['useInsertion' + 'Effect'] ? React__namespace['useInsertion' + 'Effect'] : function useInsertionEffect(create) {
-    create();
-  };
-  function useInsertionEffectMaybe$1(create) {
-    if (!isBrowser$1$1) {
-      return create();
-    }
-
-    useInsertionEffect$2(create);
-  }
-
   var typePropName = '__EMOTION_TYPE_PLEASE_DO_NOT_USE__';
   var labelPropName = '__EMOTION_LABEL_PLEASE_DO_NOT_USE__';
 
@@ -1915,11 +1913,11 @@
         serialized = _ref.serialized,
         isStringTag = _ref.isStringTag;
     registerStyles(cache, serialized, isStringTag);
-    var rules = useInsertionEffectMaybe$1(function () {
+    var rules = useInsertionEffectAlwaysWithSyncFallback(function () {
       return insertStyles(cache, serialized, isStringTag);
     });
 
-    if (!isBrowser$3 && rules !== undefined) {
+    if (!isBrowser$2 && rules !== undefined) {
       var _ref2;
 
       var serializedNames = serialized.name;
@@ -1991,7 +1989,7 @@
 
   var pkg = {
   	name: "@emotion/react",
-  	version: "11.10.0",
+  	version: "11.10.4",
   	main: "dist/emotion-react.cjs.js",
   	module: "dist/emotion-react.esm.js",
   	browser: {
@@ -2057,6 +2055,7 @@
   		"@emotion/babel-plugin": "^11.10.0",
   		"@emotion/cache": "^11.10.0",
   		"@emotion/serialize": "^1.1.0",
+  		"@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
   		"@emotion/utils": "^1.2.0",
   		"@emotion/weak-memoize": "^0.3.0",
   		"hoist-non-react-statics": "^3.3.1"
@@ -2079,7 +2078,7 @@
   		"@emotion/css": "11.10.0",
   		"@emotion/css-prettifier": "1.1.0",
   		"@emotion/server": "11.10.0",
-  		"@emotion/styled": "11.10.0",
+  		"@emotion/styled": "11.10.4",
   		"html-tag-names": "^1.1.2",
   		react: "16.14.0",
   		"svg-tag-names": "^1.1.1",
@@ -2111,7 +2110,6 @@
   	}
   };
 
-  var useInsertionEffect$1 = React__namespace['useInsertion' + 'Effect'] ? React__namespace['useInsertion' + 'Effect'] : React.useLayoutEffect;
   var warnedAboutCssPropForGlobal = false; // maintain place over rerenders.
   // initial render from browser, insertBefore context.sheet.tags[0] or if a style hasn't been inserted there yet, appendChild
   // initial client-side render from SSR, use place of hydrating tag
@@ -2129,7 +2127,7 @@
     var styles = props.styles;
     var serialized = serializeStyles([styles], undefined, React.useContext(ThemeContext$2));
 
-    if (!isBrowser$3) {
+    if (!isBrowser$2) {
       var _ref;
 
       var serializedNames = serialized.name;
@@ -2162,7 +2160,7 @@
 
 
     var sheetRef = React.useRef();
-    useInsertionEffect$1(function () {
+    useInsertionEffectWithLayoutFallback(function () {
       var key = cache.key + "-global"; // use case of https://github.com/emotion-js/emotion/issues/2675
 
       var sheet = new cache.sheet.constructor({
@@ -2191,7 +2189,7 @@
         sheet.flush();
       };
     }, [cache]);
-    useInsertionEffect$1(function () {
+    useInsertionEffectWithLayoutFallback(function () {
       var sheetRefCurrent = sheetRef.current;
       var sheet = sheetRefCurrent[0],
           rehydrating = sheetRefCurrent[1];
@@ -2309,23 +2307,23 @@
   var Insertion$1 = function Insertion(_ref) {
     var cache = _ref.cache,
         serializedArr = _ref.serializedArr;
-    var rules = useInsertionEffectMaybe$1(function () {
+    var rules = useInsertionEffectAlwaysWithSyncFallback(function () {
       var rules = '';
 
       for (var i = 0; i < serializedArr.length; i++) {
         var res = insertStyles(cache, serializedArr[i], false);
 
-        if (!isBrowser$3 && res !== undefined) {
+        if (!isBrowser$2 && res !== undefined) {
           rules += res;
         }
       }
 
-      if (!isBrowser$3) {
+      if (!isBrowser$2) {
         return rules;
       }
     });
 
-    if (!isBrowser$3 && rules.length !== 0) {
+    if (!isBrowser$2 && rules.length !== 0) {
       var _ref2;
 
       return /*#__PURE__*/React.createElement("style", (_ref2 = {}, _ref2["data-emotion"] = cache.key + " " + serializedArr.map(function (serialized) {
@@ -2388,15 +2386,15 @@
   }
 
   {
-    var isBrowser$2 = typeof document !== 'undefined'; // #1727 for some reason Jest evaluates modules twice if some consuming module gets mocked with jest.mock
+    var isBrowser$1 = typeof document !== 'undefined'; // #1727 for some reason Jest evaluates modules twice if some consuming module gets mocked with jest.mock
 
     var isJest = typeof jest !== 'undefined';
 
-    if (isBrowser$2 && !isJest) {
+    if (isBrowser$1 && !isJest) {
       // globalThis has wide browser support - https://caniuse.com/?search=globalThis, Node.js 12 and later
       var globalContext = // $FlowIgnore
       typeof globalThis !== 'undefined' ? globalThis // eslint-disable-line no-undef
-      : isBrowser$2 ? window : global$1;
+      : isBrowser$1 ? window : global$1;
       var globalKey = "__EMOTION_REACT_" + pkg.version.split('.')[0] + "__";
 
       if (globalContext[globalKey]) {
@@ -2436,31 +2434,19 @@
     return shouldForwardProp;
   };
 
-  var isBrowser = typeof document !== 'undefined';
-  var useInsertionEffect = React__namespace['useInsertion' + 'Effect'] ? React__namespace['useInsertion' + 'Effect'] : function useInsertionEffect(create) {
-    create();
-  };
-  function useInsertionEffectMaybe(create) {
-    if (!isBrowser) {
-      return create();
-    }
-
-    useInsertionEffect(create);
-  }
-
   var ILLEGAL_ESCAPE_SEQUENCE_ERROR = "You have illegal escape sequence in your template literal, most likely inside content's property value.\nBecause you write your CSS inside a JavaScript string you actually have to do double escaping, so for example \"content: '\\00d7';\" should become \"content: '\\\\00d7';\".\nYou can read more about this here:\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences";
-  var isBrowser$1 = typeof document !== 'undefined';
+  var isBrowser = typeof document !== 'undefined';
 
   var Insertion = function Insertion(_ref) {
     var cache = _ref.cache,
         serialized = _ref.serialized,
         isStringTag = _ref.isStringTag;
     registerStyles(cache, serialized, isStringTag);
-    var rules = useInsertionEffectMaybe(function () {
+    var rules = useInsertionEffectAlwaysWithSyncFallback(function () {
       return insertStyles(cache, serialized, isStringTag);
     });
 
-    if (!isBrowser$1 && rules !== undefined) {
+    if (!isBrowser && rules !== undefined) {
       var _ref2;
 
       var serializedNames = serialized.name;
@@ -7018,7 +7004,7 @@
   }
 
   const _excluded$2i = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"],
-        _excluded2$d = ["theme"],
+        _excluded2$c = ["theme"],
         _excluded3$1 = ["theme"];
 
   function isEmpty$2(obj) {
@@ -7159,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
@@ -7477,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
@@ -7784,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,
@@ -7796,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) {
@@ -8078,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]) {
@@ -8209,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;
@@ -8946,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'));
@@ -9011,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({
@@ -10439,7 +10435,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
    *
    * Demos:
    *
-   * - [Click-away listener](https://mui.com/base/react-click-away-listener/)
+   * - [Click-Away Listener](https://mui.com/base/react-click-away-listener/)
    *
    * API:
    *
@@ -10610,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';
@@ -12675,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') {
@@ -12864,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);
 
@@ -13306,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);
   }
@@ -13924,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,
@@ -14162,8 +14158,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     const {
       children,
       className,
-      value,
-      theme
+      value
     } = props;
     const classes = useValueLabelClasses(props);
     return /*#__PURE__*/React__namespace.cloneElement(children, {
@@ -14171,7 +14166,6 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     }, /*#__PURE__*/jsxRuntime_2(React__namespace.Fragment, {
       children: [children.props.children, /*#__PURE__*/jsxRuntime_1("span", {
         className: clsx(classes.offset, className),
-        theme: theme,
         "aria-hidden": true,
         children: /*#__PURE__*/jsxRuntime_1("span", {
           className: classes.circle,
@@ -14540,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
@@ -14579,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.
@@ -14629,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,
@@ -14643,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);
       }
     });
@@ -14659,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);
 
@@ -14700,8 +14691,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
           newValue,
           activeIndex
         } = getFingerNewValue({
-          finger,
-          values
+          finger
         });
         focusThumb({
           sliderRef,
@@ -14775,8 +14765,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
           newValue,
           activeIndex
         } = getFingerNewValue({
-          finger,
-          values
+          finger
         });
         focusThumb({
           sliderRef,
@@ -14946,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, {
@@ -15519,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();
@@ -16693,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;
@@ -16733,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
@@ -16951,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$;
 
@@ -16978,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) {
@@ -17030,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 : {
@@ -17078,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]
@@ -21563,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"];
@@ -25875,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 {
@@ -26120,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,
@@ -26140,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,
@@ -27124,9 +27114,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * The component used for the root node.
      * Either a string to use a HTML element or a component.
      */
-    component: PropTypes
-    /* @typescript-to-proptypes-ignore */
-    .elementType,
+    component: PropTypes.elementType,
 
     /**
      * If `true`, `subheader` and `title` won't be wrapped by a Typography component.
@@ -27630,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 {
@@ -27698,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);
 
@@ -27724,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
     }));
@@ -27753,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
@@ -29251,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 {
@@ -29276,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({
@@ -29284,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
     }));
@@ -29307,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.
      */
@@ -34971,7 +34975,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 {
@@ -35071,7 +35075,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);
 
@@ -35101,7 +35106,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
     }));
@@ -35124,6 +35130,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
@@ -35977,7 +35988,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
@@ -36079,7 +36090,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$_);
 
@@ -36117,7 +36129,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
@@ -36156,6 +36169,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.
@@ -38174,7 +38192,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
@@ -38296,7 +38314,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);
 
@@ -38337,7 +38356,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
@@ -38369,6 +38389,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.
@@ -39027,6 +39052,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   }) => _extends({
     float: 'unset',
     // Fix conflict with bootstrap
+    width: 'auto',
+    // Fix conflict with bootstrap
     overflow: 'hidden'
   }, !ownerState.withLabel && {
     padding: 0,
@@ -39039,8 +39066,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   }, ownerState.withLabel && _extends({
     display: 'block',
     // Fix conflict with normalize.css and sanitize.css
-    width: 'auto',
-    // Fix conflict with bootstrap
     padding: 0,
     height: 11,
     // sync with `lineHeight` in `legend` styles
@@ -40361,7 +40386,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 {
@@ -40436,7 +40461,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);
 
@@ -40474,7 +40500,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
@@ -40501,6 +40528,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
@@ -45293,7 +45325,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;
     }
 
@@ -45635,11 +45667,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.
@@ -46656,7 +46686,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);
   };
@@ -46705,7 +46735,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}`]: {
@@ -46733,7 +46762,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({
@@ -52735,6 +52767,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 = FocusTrap;
   exports.Zoom = Zoom$1;
   exports.accordionActionsClasses = accordionActionsClasses$1;
   exports.accordionClasses = accordionClasses$1;