@mui/material 5.6.1 → 5.6.4

package/umd/material-ui.development.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.6.1
+/** @license MUI v5.6.4
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -5706,9 +5706,24 @@
   function getPath(obj, path) {
     if (!path || typeof path !== 'string') {
       return null;
+    } // Check if CSS variables are used
+
+
+    if (obj && obj.vars) {
+      const val = `vars.${path}`.split('.').reduce((acc, item) => acc && acc[item] ? acc[item] : null, obj);
+
+      if (val != null) {
+        return val;
+      }
     }
 
-    return path.split('.').reduce((acc, item) => acc && acc[item] ? acc[item] : null, obj);
+    return path.split('.').reduce((acc, item) => {
+      if (acc && acc[item] != null) {
+        return acc[item];
+      }
+
+      return null;
+    }, obj);
   }
 
   function getValue$1(themeMapping, transform, propValueFinal, userValue = propValueFinal) {
@@ -5847,7 +5862,9 @@
   const paddingKeys = ['p', 'pt', 'pr', 'pb', 'pl', 'px', 'py', 'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'paddingX', 'paddingY', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd'];
   const spacingKeys = [...marginKeys, ...paddingKeys];
   function createUnaryUnit(theme, themeKey, defaultValue, propName) {
-    const themeSpacing = getPath(theme, themeKey) || defaultValue;
+    var _getPath;
+
+    const themeSpacing = (_getPath = getPath(theme, themeKey)) != null ? _getPath : defaultValue;
 
     if (typeof themeSpacing === 'number') {
       return abs => {
@@ -6834,30 +6851,6 @@
         theme: theme
       }, other));
     });
-    Box.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"     |
-      // ----------------------------------------------------------------------
-
-      /**
-       * @ignore
-       */
-      children: PropTypes.node,
-
-      /**
-       * The component used for the root node.
-       * Either a string to use a HTML element or a component.
-       */
-      component: PropTypes.elementType,
-
-      /**
-       * @ignore
-       */
-      sx: PropTypes.oneOfType([PropTypes.object, PropTypes.array, PropTypes.func])
-    } ;
     return Box;
   }
 
@@ -6891,8 +6884,8 @@
   }
 
   const _excluded$2g = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"],
-        _excluded2$d = ["theme"],
-        _excluded3$2 = ["theme"];
+        _excluded2$c = ["theme"],
+        _excluded3$1 = ["theme"];
 
   function isEmpty$1(obj) {
     return Object.keys(obj).length === 0;
@@ -7010,7 +7003,7 @@
             let {
               theme: themeInput
             } = _ref,
-                other = _objectWithoutPropertiesLoose(_ref, _excluded2$d);
+                other = _objectWithoutPropertiesLoose(_ref, _excluded2$c);
 
             return stylesArg(_extends({
               theme: isEmpty$1(themeInput) ? defaultTheme : themeInput
@@ -7027,7 +7020,9 @@
             if (styleOverrides) {
               const resolvedStyleOverrides = {};
               Object.entries(styleOverrides).forEach(([slotKey, slotStyle]) => {
-                resolvedStyleOverrides[slotKey] = typeof slotStyle === 'function' ? slotStyle(props) : slotStyle;
+                resolvedStyleOverrides[slotKey] = typeof slotStyle === 'function' ? slotStyle(_extends({}, props, {
+                  theme
+                })) : slotStyle;
               });
               return overridesResolver(props, resolvedStyleOverrides);
             }
@@ -7069,7 +7064,7 @@
             let {
               theme: themeInput
             } = _ref2,
-                other = _objectWithoutPropertiesLoose(_ref2, _excluded3$2);
+                other = _objectWithoutPropertiesLoose(_ref2, _excluded3$1);
 
             return styleArg(_extends({
               theme: isEmpty$1(themeInput) ? defaultTheme : themeInput
@@ -7468,7 +7463,14 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     });
   }
 
-  ThemeProvider.propTypes = {
+  ThemeProvider.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"     |
+    // ----------------------------------------------------------------------
+
     /**
      * Your component tree.
      */
@@ -7477,7 +7479,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     /**
      * A theme object. You can provide a function to extend the outer theme.
      */
-    theme: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).isRequired
+    theme: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired
   } ;
 
   {
@@ -7501,16 +7503,18 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
    * assignNestedKeys(source, ['palette', 'secondary'], 'var(--palette-secondary)')
    * console.log(source) // { palette: { primary: 'var(--palette-primary)', secondary: 'var(--palette-secondary)' } }
    */
-  const assignNestedKeys = (obj, keys, value) => {
+  const assignNestedKeys = (obj, keys, value, arrayKeys = []) => {
     let temp = obj;
     keys.forEach((k, index) => {
       if (index === keys.length - 1) {
-        if (temp && typeof temp === 'object') {
+        if (Array.isArray(temp)) {
+          temp[Number(k)] = value;
+        } else if (temp && typeof temp === 'object') {
           temp[k] = value;
         }
       } else if (temp && typeof temp === 'object') {
         if (!temp[k]) {
-          temp[k] = {};
+          temp[k] = arrayKeys.includes(k) ? [] : {};
         }
 
         temp = temp[k];
@@ -7530,14 +7534,14 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
    */
 
   const walkObjectDeep = (obj, callback, shouldSkipPaths) => {
-    function recurse(object, parentKeys = []) {
+    function recurse(object, parentKeys = [], arrayKeys = []) {
       Object.entries(object).forEach(([key, value]) => {
         if (!shouldSkipPaths || shouldSkipPaths && !shouldSkipPaths([...parentKeys, key])) {
           if (value !== undefined && value !== null) {
             if (typeof value === 'object' && Object.keys(value).length > 0) {
-              recurse(value, [...parentKeys, key]);
+              recurse(value, [...parentKeys, key], Array.isArray(value) ? [...arrayKeys, key] : arrayKeys);
             } else {
-              callback([...parentKeys, key], value, object);
+              callback([...parentKeys, key], value, arrayKeys);
             }
           }
         }
@@ -7604,7 +7608,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     const css = {};
     const vars = {};
     const parsedTheme = {};
-    walkObjectDeep(theme, (keys, value) => {
+    walkObjectDeep(theme, (keys, value, arrayKeys) => {
       if (typeof value === 'string' || typeof value === 'number') {
         if (typeof value === 'string' && value.match(/var\(\s*--/)) {
           // for CSS variable, apply prefix or remove basePrefix from the variable
@@ -7622,11 +7626,11 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
           Object.assign(css, {
             [cssVar]: getCssValue(keys, value)
           });
-          assignNestedKeys(vars, keys, `var(${cssVar})`);
+          assignNestedKeys(vars, keys, `var(${cssVar})`, arrayKeys);
         }
       }
 
-      assignNestedKeys(parsedTheme, keys, value);
+      assignNestedKeys(parsedTheme, keys, value, arrayKeys);
     }, keys => keys[0] === 'vars' // skip 'vars/*' paths
     );
     return {
@@ -7919,15 +7923,11 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     return getCssVar;
   }
 
-  const _excluded$2f = ["colorSchemes"],
-        _excluded2$c = ["colorSchemes"],
-        _excluded3$1 = ["components"];
+  const _excluded$2f = ["colorSchemes", "components"];
   const DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}';
   function createCssVarsProvider(options) {
-    var _baseTheme$breakpoint;
-
     const {
-      theme: baseTheme = {},
+      theme: defaultTheme = {},
       defaultMode: desisgnSystemMode = 'light',
       defaultColorScheme: designSystemColorScheme,
       disableTransitionOnChange: designSystemTransitionOnChange = false,
@@ -7936,10 +7936,8 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       shouldSkipGeneratingVar,
       resolveTheme
     } = options;
-    const systemSpacing = createSpacing(baseTheme.spacing);
-    const systemBreakpoints = createBreakpoints((_baseTheme$breakpoint = baseTheme.breakpoints) != null ? _baseTheme$breakpoint : {});
 
-    if (!baseTheme.colorSchemes || typeof designSystemColorScheme === 'string' && !baseTheme.colorSchemes[designSystemColorScheme] || typeof designSystemColorScheme === 'object' && !baseTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.light] || typeof designSystemColorScheme === 'object' && !baseTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.dark]) {
+    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]) {
       console.error(`MUI: \`${designSystemColorScheme}\` does not exist in \`theme.colorSchemes\`.`);
     }
 
@@ -7957,7 +7955,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
 
     function CssVarsProvider({
       children,
-      theme: themeProp = {},
+      theme: themeProp = defaultTheme,
       prefix = designSystemPrefix,
       modeStorageKey = DEFAULT_MODE_STORAGE_KEY,
       attribute = DEFAULT_ATTRIBUTE,
@@ -7966,25 +7964,14 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       disableTransitionOnChange = designSystemTransitionOnChange,
       enableColorScheme = designSystemEnableColorScheme
     }) {
-      const {
-        colorSchemes: baseColorSchemes = {}
-      } = baseTheme,
-            restBaseTheme = _objectWithoutPropertiesLoose(baseTheme, _excluded$2f);
+      const hasMounted = React__namespace.useRef(false);
 
       const {
-        colorSchemes: colorSchemesProp = {}
-      } = themeProp,
-            restThemeProp = _objectWithoutPropertiesLoose(themeProp, _excluded2$c);
-
-      const hasMounted = React__namespace.useRef(false); // eslint-disable-next-line prefer-const
-
-      let _deepmerge = deepmerge(restBaseTheme, restThemeProp),
-          {
+        colorSchemes = {},
         components = {}
-      } = _deepmerge,
-          mergedTheme = _objectWithoutPropertiesLoose(_deepmerge, _excluded3$1);
+      } = themeProp,
+            restThemeProp = _objectWithoutPropertiesLoose(themeProp, _excluded$2f);
 
-      const colorSchemes = deepmerge(baseColorSchemes, colorSchemesProp);
       const allColorSchemes = Object.keys(colorSchemes);
       const defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
       const defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
@@ -8018,22 +8005,21 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         return colorScheme;
       })();
 
+      let theme = restThemeProp;
       const {
         css: rootCss,
         vars: rootVars,
         parsedTheme
-      } = cssVarsParser(mergedTheme, {
+      } = cssVarsParser(theme, {
         prefix,
         basePrefix: designSystemPrefix,
         shouldSkipGeneratingVar
       });
-      mergedTheme = _extends({}, parsedTheme, {
+      theme = _extends({}, parsedTheme, {
         components,
         colorSchemes,
         prefix,
         vars: rootVars,
-        spacing: themeProp.spacing ? createSpacing(themeProp.spacing) : systemSpacing,
-        breakpoints: themeProp.breakpoints ? createBreakpoints(themeProp.breakpoints) : systemBreakpoints,
         getCssVar: createGetCssVar(prefix)
       });
       const styleSheet = {};
@@ -8047,10 +8033,16 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
           basePrefix: designSystemPrefix,
           shouldSkipGeneratingVar
         });
-        mergedTheme.vars = deepmerge(mergedTheme.vars, vars);
+        theme.vars = deepmerge(theme.vars, vars);
 
         if (key === resolvedColorScheme) {
-          mergedTheme = _extends({}, mergedTheme, parsedScheme);
+          theme = _extends({}, theme, parsedScheme);
+
+          if (theme.palette) {
+            // assign runtime mode & colorScheme
+            theme.palette.mode = mode;
+            theme.palette.colorScheme = resolvedColorScheme;
+          }
         }
 
         const resolvedDefaultColorScheme = (() => {
@@ -8137,7 +8129,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         }), /*#__PURE__*/jsxRuntime_1(GlobalStyles$1, {
           styles: styleSheet
         }), /*#__PURE__*/jsxRuntime_1(ThemeProvider, {
-          theme: resolveTheme ? resolveTheme(mergedTheme) : mergedTheme,
+          theme: resolveTheme ? resolveTheme(theme) : theme,
           children: children
         })]
       });
@@ -9434,14 +9426,14 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     return result;
   }
 
-  function getBadgeUtilityClass$1(slot) {
+  function getBadgeUnstyledUtilityClass(slot) {
     return generateUtilityClass('BaseBadge', slot);
   }
   generateUtilityClasses('BaseBadge', ['root', 'badge', 'invisible']);
 
   const _excluded$2d = ["badgeContent", "component", "children", "className", "components", "componentsProps", "invisible", "max", "showZero"];
 
-  const useUtilityClasses$1O = ownerState => {
+  const useUtilityClasses$1P = ownerState => {
     const {
       invisible
     } = ownerState;
@@ -9449,7 +9441,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       root: ['root'],
       badge: ['badge', invisible && 'invisible']
     };
-    return composeClasses(slots, getBadgeUtilityClass$1, undefined);
+    return composeClasses(slots, getBadgeUnstyledUtilityClass, undefined);
   };
 
   const BadgeUnstyled = /*#__PURE__*/React__namespace.forwardRef(function BadgeUnstyled(props, ref) {
@@ -9480,7 +9472,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       showZero
     });
 
-    const classes = useUtilityClasses$1O(ownerState);
+    const classes = useUtilityClasses$1P(ownerState);
     const Root = component || components.Root || 'span';
     const rootProps = appendOwnerState(Root, _extends({}, other, componentsProps.root), ownerState);
     const Badge = components.Badge || 'span';
@@ -9577,7 +9569,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:
    *
@@ -12732,7 +12724,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
 
   const _excluded$2b = ["BackdropComponent", "BackdropProps", "children", "classes", "className", "closeAfterTransition", "component", "components", "componentsProps", "container", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "manager", "onBackdropClick", "onClose", "onKeyDown", "open", "theme", "onTransitionEnter", "onTransitionExited"];
 
-  const useUtilityClasses$1N = ownerState => {
+  const useUtilityClasses$1O = ownerState => {
     const {
       open,
       exited,
@@ -12879,7 +12871,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       keepMounted
     });
 
-    const classes = useUtilityClasses$1N(ownerState);
+    const classes = useUtilityClasses$1O(ownerState);
 
     if (!keepMounted && !open && (!hasTransition || exited)) {
       return null;
@@ -13121,6 +13113,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
 
     /**
      * Callback fired when the backdrop is clicked.
+     * @deprecated Use the `onClose` prop with the `reason` argument to handle the `backdropClick` events.
      */
     onBackdropClick: PropTypes.func,
 
@@ -13954,7 +13947,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
 
   const Identity = x => x;
 
-  const useUtilityClasses$1M = ownerState => {
+  const useUtilityClasses$1N = ownerState => {
     const {
       disabled,
       dragging,
@@ -14070,7 +14063,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     const Input = components.Input || 'input';
     const inputProps = appendOwnerState(Input, componentsProps.input, ownerState);
     const hiddenInputProps = getHiddenInputProps();
-    const classes = useUtilityClasses$1M(ownerState);
+    const classes = useUtilityClasses$1N(ownerState);
     return /*#__PURE__*/jsxRuntime_2(Root, _extends({}, rootProps, getRootProps({
       onMouseDown
     }), {
@@ -15618,7 +15611,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   const _excluded$23 = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"];
 
-  const useUtilityClasses$1L = ownerState => {
+  const useUtilityClasses$1M = ownerState => {
     const {
       color,
       fontSize,
@@ -15703,7 +15696,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       more.viewBox = viewBox;
     }
 
-    const classes = useUtilityClasses$1L(ownerState);
+    const classes = useUtilityClasses$1M(ownerState);
     return /*#__PURE__*/jsxRuntime_2(SvgIconRoot, _extends({
       as: component,
       className: clsx(classes.root, className),
@@ -16840,7 +16833,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   const _excluded$22 = ["addEndListener", "children", "className", "collapsedSize", "component", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "orientation", "style", "timeout", "TransitionComponent"];
 
-  const useUtilityClasses$1K = ownerState => {
+  const useUtilityClasses$1L = ownerState => {
     const {
       orientation,
       classes
@@ -16948,7 +16941,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       collapsedSize: collapsedSizeProp
     });
 
-    const classes = useUtilityClasses$1K(ownerState);
+    const classes = useUtilityClasses$1L(ownerState);
     const theme = useTheme();
     const timer = React__namespace.useRef();
     const wrapperRef = React__namespace.useRef(null);
@@ -17262,7 +17255,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     return (alphaValue / 100).toFixed(2);
   };
 
-  const useUtilityClasses$1J = ownerState => {
+  const useUtilityClasses$1K = ownerState => {
     const {
       square,
       elevation,
@@ -17322,7 +17315,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       variant
     });
 
-    const classes = useUtilityClasses$1J(ownerState);
+    const classes = useUtilityClasses$1K(ownerState);
 
     {
       // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -17429,7 +17422,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   const _excluded$20 = ["children", "className", "defaultExpanded", "disabled", "disableGutters", "expanded", "onChange", "square", "TransitionComponent", "TransitionProps"];
 
-  const useUtilityClasses$1I = ownerState => {
+  const useUtilityClasses$1J = ownerState => {
     const {
       classes,
       square,
@@ -17474,7 +17467,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         height: 1,
         content: '""',
         opacity: 1,
-        backgroundColor: theme.palette.divider,
+        backgroundColor: (theme.vars || theme).palette.divider,
         transition: theme.transitions.create(['opacity', 'background-color'], transition)
       },
       '&:first-of-type': {
@@ -17499,7 +17492,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         }
       },
       [`&.${accordionClasses$1.disabled}`]: {
-        backgroundColor: theme.palette.action.disabledBackground
+        backgroundColor: (theme.vars || theme).palette.action.disabledBackground
       }
     };
   }, ({
@@ -17508,12 +17501,12 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   }) => _extends({}, !ownerState.square && {
     borderRadius: 0,
     '&:first-of-type': {
-      borderTopLeftRadius: theme.shape.borderRadius,
-      borderTopRightRadius: theme.shape.borderRadius
+      borderTopLeftRadius: (theme.vars || theme).shape.borderRadius,
+      borderTopRightRadius: (theme.vars || theme).shape.borderRadius
     },
     '&:last-of-type': {
-      borderBottomLeftRadius: theme.shape.borderRadius,
-      borderBottomRightRadius: theme.shape.borderRadius,
+      borderBottomLeftRadius: (theme.vars || theme).shape.borderRadius,
+      borderBottomRightRadius: (theme.vars || theme).shape.borderRadius,
       // Fix a rendering issue on Edge
       '@supports (-ms-ime-align: auto)': {
         borderBottomLeftRadius: 0,
@@ -17573,7 +17566,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       expanded
     });
 
-    const classes = useUtilityClasses$1I(ownerState);
+    const classes = useUtilityClasses$1J(ownerState);
     return /*#__PURE__*/jsxRuntime_2(AccordionRoot, _extends({
       className: clsx(classes.root, className),
       ref: ref,
@@ -17698,7 +17691,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   const _excluded$1$ = ["className", "disableSpacing"];
 
-  const useUtilityClasses$1H = ownerState => {
+  const useUtilityClasses$1I = ownerState => {
     const {
       classes,
       disableSpacing
@@ -17746,7 +17739,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       disableSpacing
     });
 
-    const classes = useUtilityClasses$1H(ownerState);
+    const classes = useUtilityClasses$1I(ownerState);
     return /*#__PURE__*/jsxRuntime_1(AccordionActionsRoot, _extends({
       className: clsx(classes.root, className),
       ref: ref,
@@ -17797,7 +17790,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   const _excluded$1_ = ["className"];
 
-  const useUtilityClasses$1G = ownerState => {
+  const useUtilityClasses$1H = ownerState => {
     const {
       classes
     } = ownerState;
@@ -17828,7 +17821,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
           other = _objectWithoutPropertiesLoose(props, _excluded$1_);
 
     const ownerState = props;
-    const classes = useUtilityClasses$1G(ownerState);
+    const classes = useUtilityClasses$1H(ownerState);
     return /*#__PURE__*/jsxRuntime_1(AccordionDetailsRoot, _extends({
       className: clsx(classes.root, className),
       ref: ref,
@@ -18301,7 +18294,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   const _excluded$1Y = ["action", "centerRipple", "children", "className", "component", "disabled", "disableRipple", "disableTouchRipple", "focusRipple", "focusVisibleClassName", "LinkComponent", "onBlur", "onClick", "onContextMenu", "onDragLeave", "onFocus", "onFocusVisible", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseLeave", "onMouseUp", "onTouchEnd", "onTouchMove", "onTouchStart", "tabIndex", "TouchRippleProps", "touchRippleRef", "type"];
 
-  const useUtilityClasses$1F = ownerState => {
+  const useUtilityClasses$1G = ownerState => {
     const {
       disabled,
       focusVisible,
@@ -18603,7 +18596,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       focusVisible
     });
 
-    const classes = useUtilityClasses$1F(ownerState);
+    const classes = useUtilityClasses$1G(ownerState);
     return /*#__PURE__*/jsxRuntime_2(ButtonBaseRoot, _extends({
       as: ComponentProp,
       className: clsx(classes.root, className),
@@ -18839,7 +18832,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   const _excluded$1X = ["children", "className", "expandIcon", "focusVisibleClassName", "onClick"];
 
-  const useUtilityClasses$1E = ownerState => {
+  const useUtilityClasses$1F = ownerState => {
     const {
       classes,
       expanded,
@@ -18872,10 +18865,10 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       padding: theme.spacing(0, 2),
       transition: theme.transitions.create(['min-height', 'background-color'], transition),
       [`&.${accordionSummaryClasses$1.focusVisible}`]: {
-        backgroundColor: theme.palette.action.focus
+        backgroundColor: (theme.vars || theme).palette.action.focus
       },
       [`&.${accordionSummaryClasses$1.disabled}`]: {
-        opacity: theme.palette.action.disabledOpacity
+        opacity: (theme.vars || theme).palette.action.disabledOpacity
       },
       [`&:hover:not(.${accordionSummaryClasses$1.disabled})`]: {
         cursor: 'pointer'
@@ -18913,7 +18906,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     theme
   }) => ({
     display: 'flex',
-    color: theme.palette.action.active,
+    color: (theme.vars || theme).palette.action.active,
     transform: 'rotate(0deg)',
     transition: theme.transitions.create('transform', {
       duration: theme.transitions.duration.shortest
@@ -18960,7 +18953,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       disableGutters
     });
 
-    const classes = useUtilityClasses$1E(ownerState);
+    const classes = useUtilityClasses$1F(ownerState);
     return /*#__PURE__*/jsxRuntime_2(AccordionSummaryRoot, _extends({
       focusRipple: false,
       disableRipple: true,
@@ -19048,7 +19041,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   const _excluded$1W = ["edge", "children", "className", "color", "disabled", "disableFocusRipple", "size"];
 
-  const useUtilityClasses$1D = ownerState => {
+  const useUtilityClasses$1E = ownerState => {
     const {
       classes,
       disabled,
@@ -19155,7 +19148,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       size
     });
 
-    const classes = useUtilityClasses$1D(ownerState);
+    const classes = useUtilityClasses$1E(ownerState);
     return /*#__PURE__*/jsxRuntime_1(IconButtonRoot, _extends({
       className: clsx(classes.root, className),
       centerRipple: true,
@@ -19278,7 +19271,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   const _excluded$1V = ["action", "children", "className", "closeText", "color", "icon", "iconMapping", "onClose", "role", "severity", "variant"];
 
-  const useUtilityClasses$1C = ownerState => {
+  const useUtilityClasses$1D = ownerState => {
     const {
       variant,
       color,
@@ -19402,7 +19395,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       variant
     });
 
-    const classes = useUtilityClasses$1C(ownerState);
+    const classes = useUtilityClasses$1D(ownerState);
     return /*#__PURE__*/jsxRuntime_2(AlertRoot, _extends({
       role: role,
       elevation: 0,
@@ -19544,7 +19537,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   const _excluded$1U = ["align", "className", "component", "gutterBottom", "noWrap", "paragraph", "variant", "variantMapping"];
 
-  const useUtilityClasses$1B = ownerState => {
+  const useUtilityClasses$1C = ownerState => {
     const {
       align,
       gutterBottom,
@@ -19645,7 +19638,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     });
 
     const Component = component || (paragraph ? 'p' : variantMapping[variant] || defaultVariantMapping[variant]) || 'span';
-    const classes = useUtilityClasses$1B(ownerState);
+    const classes = useUtilityClasses$1C(ownerState);
     return /*#__PURE__*/jsxRuntime_1(TypographyRoot, _extends({
       as: Component,
       ref: ref,
@@ -19755,7 +19748,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   const _excluded$1T = ["className"];
 
-  const useUtilityClasses$1A = ownerState => {
+  const useUtilityClasses$1B = ownerState => {
     const {
       classes
     } = ownerState;
@@ -19789,7 +19782,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
           other = _objectWithoutPropertiesLoose(props, _excluded$1T);
 
     const ownerState = props;
-    const classes = useUtilityClasses$1A(ownerState);
+    const classes = useUtilityClasses$1B(ownerState);
     return /*#__PURE__*/jsxRuntime_1(AlertTitleRoot, _extends({
       gutterBottom: true,
       component: "div",
@@ -19836,7 +19829,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   const _excluded$1S = ["className", "color", "enableColorOnDark", "position"];
 
-  const useUtilityClasses$1z = ownerState => {
+  const useUtilityClasses$1A = ownerState => {
     const {
       color,
       position,
@@ -19934,7 +19927,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       enableColorOnDark
     });
 
-    const classes = useUtilityClasses$1z(ownerState);
+    const classes = useUtilityClasses$1A(ownerState);
     return /*#__PURE__*/jsxRuntime_1(AppBarRoot, _extends({
       square: true,
       component: "header",
@@ -20147,7 +20140,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   const _excluded$1R = ["className", "color", "component", "disableGutters", "disableSticky", "inset"];
 
-  const useUtilityClasses$1y = ownerState => {
+  const useUtilityClasses$1z = ownerState => {
     const {
       classes,
       color,
@@ -20220,7 +20213,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       inset
     });
 
-    const classes = useUtilityClasses$1y(ownerState);
+    const classes = useUtilityClasses$1z(ownerState);
     return /*#__PURE__*/jsxRuntime_1(ListSubheaderRoot, _extends({
       as: component,
       className: clsx(classes.root, className),
@@ -20300,7 +20293,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   const _excluded$1Q = ["avatar", "className", "clickable", "color", "component", "deleteIcon", "disabled", "icon", "label", "onClick", "onDelete", "onKeyDown", "onKeyUp", "size", "variant"];
 
-  const useUtilityClasses$1x = ownerState => {
+  const useUtilityClasses$1y = ownerState => {
     const {
       classes,
       disabled,
@@ -20634,7 +20627,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       variant
     });
 
-    const classes = useUtilityClasses$1x(ownerState);
+    const classes = useUtilityClasses$1y(ownerState);
     const moreProps = component === ButtonBase$1 ? _extends({
       component: ComponentProp || 'div',
       focusVisibleClassName: classes.focusVisible
@@ -20918,7 +20911,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     return [styles.input, ownerState.size === 'small' && styles.inputSizeSmall, ownerState.multiline && styles.inputMultiline, ownerState.type === 'search' && styles.inputTypeSearch, ownerState.startAdornment && styles.inputAdornedStart, ownerState.endAdornment && styles.inputAdornedEnd, ownerState.hiddenLabel && styles.inputHiddenLabel];
   };
 
-  const useUtilityClasses$1w = ownerState => {
+  const useUtilityClasses$1x = ownerState => {
     const {
       classes,
       color,
@@ -21330,7 +21323,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       type
     });
 
-    const classes = useUtilityClasses$1w(ownerState);
+    const classes = useUtilityClasses$1x(ownerState);
     const Root = components.Root || InputBaseRoot;
     const rootProps = componentsProps.root || {};
     const Input = components.Input || InputBaseComponent;
@@ -21660,7 +21653,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   const _excluded$1O = ["autoComplete", "autoHighlight", "autoSelect", "blurOnSelect", "ChipProps", "className", "clearIcon", "clearOnBlur", "clearOnEscape", "clearText", "closeText", "componentsProps", "defaultValue", "disableClearable", "disableCloseOnSelect", "disabled", "disabledItemsFocusable", "disableListWrap", "disablePortal", "filterOptions", "filterSelectedOptions", "forcePopupIcon", "freeSolo", "fullWidth", "getLimitTagsText", "getOptionDisabled", "getOptionLabel", "isOptionEqualToValue", "groupBy", "handleHomeEndKeys", "id", "includeInputInList", "inputValue", "limitTags", "ListboxComponent", "ListboxProps", "loading", "loadingText", "multiple", "noOptionsText", "onChange", "onClose", "onHighlightChange", "onInputChange", "onOpen", "open", "openOnFocus", "openText", "options", "PaperComponent", "PopperComponent", "popupIcon", "readOnly", "renderGroup", "renderInput", "renderOption", "renderTags", "selectOnFocus", "size", "value"];
 
-  const useUtilityClasses$1v = ownerState => {
+  const useUtilityClasses$1w = ownerState => {
     const {
       classes,
       disablePortal,
@@ -22083,7 +22076,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       size
     });
 
-    const classes = useUtilityClasses$1v(ownerState);
+    const classes = useUtilityClasses$1w(ownerState);
     let startAdornment;
 
     if (multiple && value.length > 0) {
@@ -22446,6 +22439,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * Used to determine the string value for a given option.
      * It's used to fill the input (and the list box options if `renderOption` is not provided).
      *
+     * If used in free solo mode, it must accept both the type of the options and a string.
+     *
      * @param {T} option
      * @returns {string}
      * @default (option) => option.label ?? option
@@ -22719,7 +22714,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   const _excluded$1N = ["alt", "children", "className", "component", "imgProps", "sizes", "src", "srcSet", "variant"];
 
-  const useUtilityClasses$1u = ownerState => {
+  const useUtilityClasses$1v = ownerState => {
     const {
       classes,
       variant,
@@ -22872,7 +22867,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       variant
     });
 
-    const classes = useUtilityClasses$1u(ownerState);
+    const classes = useUtilityClasses$1v(ownerState);
 
     if (hasImgNotFailing) {
       children = /*#__PURE__*/jsxRuntime_1(AvatarImg, _extends({
@@ -22987,7 +22982,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     medium: null
   };
 
-  const useUtilityClasses$1t = ownerState => {
+  const useUtilityClasses$1u = ownerState => {
     const {
       classes
     } = ownerState;
@@ -23008,7 +23003,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     theme
   }) => ({
     [`& .${avatarClasses$1.root}`]: {
-      border: `2px solid ${theme.palette.background.default}`,
+      border: `2px solid ${(theme.vars || theme).palette.background.default}`,
       boxSizing: 'content-box',
       marginLeft: -8,
       '&:last-child': {
@@ -23025,7 +23020,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   })(({
     theme
   }) => ({
-    border: `2px solid ${theme.palette.background.default}`,
+    border: `2px solid ${(theme.vars || theme).palette.background.default}`,
     boxSizing: 'content-box',
     marginLeft: -8,
     '&:last-child': {
@@ -23059,7 +23054,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       variant
     });
 
-    const classes = useUtilityClasses$1t(ownerState);
+    const classes = useUtilityClasses$1u(ownerState);
     const children = React__namespace.Children.toArray(childrenProp).filter(child => {
       {
         if (reactIs_2(child)) {
@@ -23399,7 +23394,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   const _excluded$1K = ["children", "component", "components", "componentsProps", "className", "invisible", "open", "transitionDuration", "TransitionComponent"];
 
-  const useUtilityClasses$1s = ownerState => {
+  const useUtilityClasses$1t = ownerState => {
     const {
       classes,
       invisible
@@ -23462,7 +23457,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       invisible
     });
 
-    const classes = useUtilityClasses$1s(ownerState);
+    const classes = useUtilityClasses$1t(ownerState);
     return /*#__PURE__*/jsxRuntime_1(TransitionComponent, _extends({
       in: open,
       timeout: transitionDuration
@@ -23570,7 +23565,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const RADIUS_STANDARD = 10;
   const RADIUS_DOT = 4;
 
-  const extendUtilityClasses$2 = ownerState => {
+  const useUtilityClasses$1s = ownerState => {
     const {
       color,
       anchorOrigin,
@@ -23579,10 +23574,11 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       variant,
       classes = {}
     } = ownerState;
-    return {
-      root: clsx(classes.root, 'root'),
-      badge: clsx(classes.badge, getBadgeUtilityClass('badge'), getBadgeUtilityClass(variant), `anchorOrigin${capitalize(anchorOrigin.vertical)}${capitalize(anchorOrigin.horizontal)}`, getBadgeUtilityClass(`anchorOrigin${capitalize(anchorOrigin.vertical)}${capitalize(anchorOrigin.horizontal)}${capitalize(overlap)}`), getBadgeUtilityClass(`overlap${capitalize(overlap)}`), color !== 'default' && [getBadgeUtilityClass(`color${capitalize(color)}`), classes[`color${capitalize(color)}`]], invisible && getBadgeUtilityClass('invisible'))
+    const slots = {
+      root: ['root'],
+      badge: ['badge', variant, invisible && 'invisible', `anchorOrigin${capitalize(anchorOrigin.vertical)}${capitalize(anchorOrigin.horizontal)}`, `anchorOrigin${capitalize(anchorOrigin.vertical)}${capitalize(anchorOrigin.horizontal)}${capitalize(overlap)}`, `overlap${capitalize(overlap)}`, color !== 'default' && `color${capitalize(color)}`]
     };
+    return composeClasses(slots, getBadgeUtilityClass, classes);
   };
 
   const BadgeRoot = styled$1('span', {
@@ -23632,8 +23628,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       duration: theme.transitions.duration.enteringScreen
     })
   }, ownerState.color !== 'default' && {
-    backgroundColor: theme.palette[ownerState.color].main,
-    color: theme.palette[ownerState.color].contrastText
+    backgroundColor: (theme.vars || theme).palette[ownerState.color].main,
+    color: (theme.vars || theme).palette[ownerState.color].contrastText
   }, ownerState.variant === 'dot' && {
     borderRadius: RADIUS_DOT,
     height: RADIUS_DOT * 2,
@@ -23763,7 +23759,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       variant
     });
 
-    const classes = extendUtilityClasses$2(ownerState);
+    const classes = useUtilityClasses$1s(ownerState);
     let displayValue;
 
     if (variant !== 'dot') {
@@ -23947,7 +23943,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     display: 'flex',
     justifyContent: 'center',
     height: 56,
-    backgroundColor: theme.palette.background.paper
+    backgroundColor: (theme.vars || theme).palette.background.paper
   }));
   const BottomNavigation = /*#__PURE__*/React__namespace.forwardRef(function BottomNavigation(inProps, ref) {
     const props = useThemeProps({
@@ -24091,18 +24087,19 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     transition: theme.transitions.create(['color', 'padding-top'], {
       duration: theme.transitions.duration.short
     }),
-    padding: '6px 12px 8px',
+    padding: '0px 12px',
     minWidth: 80,
     maxWidth: 168,
-    color: theme.palette.text.secondary,
+    color: (theme.vars || theme).palette.text.secondary,
     flexDirection: 'column',
     flex: '1'
   }, !ownerState.showLabel && !ownerState.selected && {
-    paddingTop: 16
+    paddingTop: 14
+  }, !ownerState.showLabel && !ownerState.selected && !ownerState.label && {
+    paddingTop: 0
   }, {
     [`&.${bottomNavigationActionClasses$1.selected}`]: {
-      paddingTop: 6,
-      color: theme.palette.primary.main
+      color: (theme.vars || theme).palette.primary.main
     }
   }));
   const BottomNavigationActionLabel = styled$1('span', {
@@ -24235,15 +24232,35 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var BottomNavigationAction$1 = BottomNavigationAction;
 
   const defaultTheme = createTheme$1();
-  /**
-   * @ignore - do not document.
-   */
-
   const Box = createBox({
     defaultTheme,
     defaultClassName: 'MuiBox-root',
     generateClassName: ClassNameGenerator$1.generate
   });
+  Box.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"     |
+    // ----------------------------------------------------------------------
+
+    /**
+     * @ignore
+     */
+    children: PropTypes.node,
+
+    /**
+     * The component used for the root node.
+     * Either a string to use a HTML element or a component.
+     */
+    component: PropTypes.elementType,
+
+    /**
+     * The system prop that allows defining system overrides as well as additional CSS styles.
+     */
+    sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+  } ;
   var Box$1 = Box;
 
   var MoreHorizIcon = createSvgIcon( /*#__PURE__*/jsxRuntime_1("path", {
@@ -26594,7 +26611,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   }, ownerState.variant === 'determinate' && {
     transition: theme.transitions.create('transform')
   }, ownerState.color !== 'inherit' && {
-    color: theme.palette[ownerState.color].main
+    color: (theme.vars || theme).palette[ownerState.color].main
   }), ({
     ownerState
   }) => ownerState.variant === 'indeterminate' && css(_t3$2 || (_t3$2 = _$2`
@@ -27324,6 +27341,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
     /**
      * Callback fired when the backdrop is clicked.
+     * @deprecated Use the `onClose` prop with the `reason` argument to handle the `backdropClick` events.
      */
     onBackdropClick: PropTypes.func,
 
@@ -27697,6 +27715,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
     /**
      * Callback fired when the backdrop is clicked.
+     * @deprecated Use the `onClose` prop with the `reason` argument to handle the `backdropClick` events.
      */
     onBackdropClick: PropTypes.func,
 
@@ -29340,6 +29359,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     theme,
     ownerState
   }) => {
+    var _theme$palette;
+
     const light = theme.palette.mode === 'light';
     const bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)';
     const backgroundColor = light ? 'rgba(0, 0, 0, 0.06)' : 'rgba(255, 255, 255, 0.09)';
@@ -29367,7 +29388,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       }
     }, !ownerState.disableUnderline && {
       '&:after': {
-        borderBottom: `2px solid ${theme.palette[ownerState.color].main}`,
+        borderBottom: `2px solid ${(_theme$palette = theme.palette[ownerState.color || 'primary']) == null ? void 0 : _theme$palette.main}`,
         left: 0,
         bottom: 0,
         // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
@@ -29383,7 +29404,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
       },
       [`&.${filledInputClasses$1.focused}:after`]: {
-        transform: 'scaleX(1)'
+        // translateX(0) is a workaround for Safari transform scale bug
+        // See https://github.com/mui/material-ui/issues/31766
+        transform: 'scaleX(1) translateX(0)'
       },
       [`&.${filledInputClasses$1.error}:after`]: {
         borderBottomColor: theme.palette.error.main,
@@ -33055,7 +33078,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
       },
       [`&.${inputClasses$1.focused}:after`]: {
-        transform: 'scaleX(1)'
+        // translateX(0) is a workaround for Safari transform scale bug
+        // See https://github.com/mui/material-ui/issues/31766
+        transform: 'scaleX(1) translateX(0)'
       },
       [`&.${inputClasses$1.error}:after`]: {
         borderBottomColor: theme.palette.error.main,