@mui/material 5.11.16 → 5.12.0

package/umd/material-ui.development.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.11.16
+ * @mui/material v5.12.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -2358,6 +2358,8 @@
     return result;
   }
 
+  var THEME_ID = '$$material';
+
   function _objectWithoutPropertiesLoose(source, excluded) {
     if (source == null) return {};
     var target = {};
@@ -2717,7 +2719,7 @@
       var unsafePseudoClasses = element.value.match(/(:first|:nth|:nth-last)-child/g);
 
       if (unsafePseudoClasses) {
-        var isNested = element.parent === children[0]; // in nested rules comments become children of the "auto-inserted" rule
+        var isNested = !!element.parent; // in nested rules comments become children of the "auto-inserted" rule and that's always the `element.parent`
         //
         // considering this input:
         // .a {
@@ -2733,7 +2735,7 @@
         //   .b {}
         // }
 
-        var commentContainer = isNested ? children[0].children : // global rule at the root level
+        var commentContainer = isNested ? element.parent.children : // global rule at the root level
         children;
 
         for (var i = commentContainer.length - 1; i >= 0; i--) {
@@ -5811,7 +5813,7 @@
   function isEmpty$4(obj) {
     return obj === undefined || obj === null || Object.keys(obj).length === 0;
   }
-  function GlobalStyles$1(props) {
+  function GlobalStyles$2(props) {
     const {
       styles,
       defaultTheme = {}
@@ -5821,9 +5823,9 @@
       styles: globalStyles
     });
   }
-  GlobalStyles$1.propTypes = {
+  GlobalStyles$2.propTypes = {
     defaultTheme: PropTypes.object,
-    styles: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.func])
+    styles: PropTypes.oneOfType([PropTypes.array, PropTypes.string, PropTypes.object, PropTypes.func])
   } ;
 
   function styled$3(tag, options) {
@@ -5850,6 +5852,90 @@
     }
   };
 
+  const _excluded$2p = ["values", "unit", "step"];
+  const sortBreakpointsValues = values => {
+    const breakpointsAsArray = Object.keys(values).map(key => ({
+      key,
+      val: values[key]
+    })) || [];
+    // Sort in ascending order
+    breakpointsAsArray.sort((breakpoint1, breakpoint2) => breakpoint1.val - breakpoint2.val);
+    return breakpointsAsArray.reduce((acc, obj) => {
+      return _extends({}, acc, {
+        [obj.key]: obj.val
+      });
+    }, {});
+  };
+
+  // Keep in mind that @media is inclusive by the CSS specification.
+  function createBreakpoints(breakpoints) {
+    const {
+        // The breakpoint **start** at this value.
+        // For instance with the first breakpoint xs: [xs, sm).
+        values = {
+          xs: 0,
+          // phone
+          sm: 600,
+          // tablet
+          md: 900,
+          // small laptop
+          lg: 1200,
+          // desktop
+          xl: 1536 // large screen
+        },
+
+        unit = 'px',
+        step = 5
+      } = breakpoints,
+      other = _objectWithoutPropertiesLoose(breakpoints, _excluded$2p);
+    const sortedValues = sortBreakpointsValues(values);
+    const keys = Object.keys(sortedValues);
+    function up(key) {
+      const value = typeof values[key] === 'number' ? values[key] : key;
+      return `@media (min-width:${value}${unit})`;
+    }
+    function down(key) {
+      const value = typeof values[key] === 'number' ? values[key] : key;
+      return `@media (max-width:${value - step / 100}${unit})`;
+    }
+    function between(start, end) {
+      const endIndex = keys.indexOf(end);
+      return `@media (min-width:${typeof values[start] === 'number' ? values[start] : start}${unit}) and ` + `(max-width:${(endIndex !== -1 && typeof values[keys[endIndex]] === 'number' ? values[keys[endIndex]] : end) - step / 100}${unit})`;
+    }
+    function only(key) {
+      if (keys.indexOf(key) + 1 < keys.length) {
+        return between(key, keys[keys.indexOf(key) + 1]);
+      }
+      return up(key);
+    }
+    function not(key) {
+      // handle first and last key separately, for better readability
+      const keyIndex = keys.indexOf(key);
+      if (keyIndex === 0) {
+        return up(keys[1]);
+      }
+      if (keyIndex === keys.length - 1) {
+        return down(keys[keyIndex]);
+      }
+      return between(key, keys[keys.indexOf(key) + 1]).replace('@media', '@media not all and');
+    }
+    return _extends({
+      keys,
+      values: sortedValues,
+      up,
+      down,
+      between,
+      only,
+      not,
+      unit
+    }, other);
+  }
+
+  const shape = {
+    borderRadius: 4
+  };
+  var shape$1 = shape;
+
   const responsivePropType = PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.object, PropTypes.array]) ;
   var responsivePropType$1 = responsivePropType;
 
@@ -6055,6 +6141,183 @@
     return fn;
   }
 
+  function memoize(fn) {
+    const cache = {};
+    return arg => {
+      if (cache[arg] === undefined) {
+        cache[arg] = fn(arg);
+      }
+      return cache[arg];
+    };
+  }
+
+  const properties = {
+    m: 'margin',
+    p: 'padding'
+  };
+  const directions = {
+    t: 'Top',
+    r: 'Right',
+    b: 'Bottom',
+    l: 'Left',
+    x: ['Left', 'Right'],
+    y: ['Top', 'Bottom']
+  };
+  const aliases = {
+    marginX: 'mx',
+    marginY: 'my',
+    paddingX: 'px',
+    paddingY: 'py'
+  };
+
+  // memoize() impact:
+  // From 300,000 ops/sec
+  // To 350,000 ops/sec
+  const getCssProperties = memoize(prop => {
+    // It's not a shorthand notation.
+    if (prop.length > 2) {
+      if (aliases[prop]) {
+        prop = aliases[prop];
+      } else {
+        return [prop];
+      }
+    }
+    const [a, b] = prop.split('');
+    const property = properties[a];
+    const direction = directions[b] || '';
+    return Array.isArray(direction) ? direction.map(dir => property + dir) : [property + direction];
+  });
+  const marginKeys = ['m', 'mt', 'mr', 'mb', 'ml', 'mx', 'my', 'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'marginInline', 'marginInlineStart', 'marginInlineEnd', 'marginBlock', 'marginBlockStart', 'marginBlockEnd'];
+  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) {
+    var _getPath;
+    const themeSpacing = (_getPath = getPath(theme, themeKey, false)) != null ? _getPath : defaultValue;
+    if (typeof themeSpacing === 'number') {
+      return abs => {
+        if (typeof abs === 'string') {
+          return abs;
+        }
+        {
+          if (typeof abs !== 'number') {
+            console.error(`MUI: Expected ${propName} argument to be a number or a string, got ${abs}.`);
+          }
+        }
+        return themeSpacing * abs;
+      };
+    }
+    if (Array.isArray(themeSpacing)) {
+      return abs => {
+        if (typeof abs === 'string') {
+          return abs;
+        }
+        {
+          if (!Number.isInteger(abs)) {
+            console.error([`MUI: The \`theme.${themeKey}\` array type cannot be combined with non integer values.` + `You should either use an integer value that can be used as index, or define the \`theme.${themeKey}\` as a number.`].join('\n'));
+          } else if (abs > themeSpacing.length - 1) {
+            console.error([`MUI: The value provided (${abs}) overflows.`, `The supported values are: ${JSON.stringify(themeSpacing)}.`, `${abs} > ${themeSpacing.length - 1}, you need to add the missing values.`].join('\n'));
+          }
+        }
+        return themeSpacing[abs];
+      };
+    }
+    if (typeof themeSpacing === 'function') {
+      return themeSpacing;
+    }
+    {
+      console.error([`MUI: The \`theme.${themeKey}\` value (${themeSpacing}) is invalid.`, 'It should be a number, an array or a function.'].join('\n'));
+    }
+    return () => undefined;
+  }
+  function createUnarySpacing(theme) {
+    return createUnaryUnit(theme, 'spacing', 8, 'spacing');
+  }
+  function getValue(transformer, propValue) {
+    if (typeof propValue === 'string' || propValue == null) {
+      return propValue;
+    }
+    const abs = Math.abs(propValue);
+    const transformed = transformer(abs);
+    if (propValue >= 0) {
+      return transformed;
+    }
+    if (typeof transformed === 'number') {
+      return -transformed;
+    }
+    return `-${transformed}`;
+  }
+  function getStyleFromPropValue(cssProperties, transformer) {
+    return propValue => cssProperties.reduce((acc, cssProperty) => {
+      acc[cssProperty] = getValue(transformer, propValue);
+      return acc;
+    }, {});
+  }
+  function resolveCssProperty(props, keys, prop, transformer) {
+    // Using a hash computation over an array iteration could be faster, but with only 28 items,
+    // it's doesn't worth the bundle size.
+    if (keys.indexOf(prop) === -1) {
+      return null;
+    }
+    const cssProperties = getCssProperties(prop);
+    const styleFromPropValue = getStyleFromPropValue(cssProperties, transformer);
+    const propValue = props[prop];
+    return handleBreakpoints(props, propValue, styleFromPropValue);
+  }
+  function style$1(props, keys) {
+    const transformer = createUnarySpacing(props.theme);
+    return Object.keys(props).map(prop => resolveCssProperty(props, keys, prop, transformer)).reduce(merge, {});
+  }
+  function margin(props) {
+    return style$1(props, marginKeys);
+  }
+  margin.propTypes = marginKeys.reduce((obj, key) => {
+    obj[key] = responsivePropType$1;
+    return obj;
+  }, {}) ;
+  margin.filterProps = marginKeys;
+  function padding(props) {
+    return style$1(props, paddingKeys);
+  }
+  padding.propTypes = paddingKeys.reduce((obj, key) => {
+    obj[key] = responsivePropType$1;
+    return obj;
+  }, {}) ;
+  padding.filterProps = paddingKeys;
+  spacingKeys.reduce((obj, key) => {
+    obj[key] = responsivePropType$1;
+    return obj;
+  }, {}) ;
+
+  /* tslint:enable:unified-signatures */
+
+  function createSpacing(spacingInput = 8) {
+    // Already transformed.
+    if (spacingInput.mui) {
+      return spacingInput;
+    }
+
+    // Material Design layouts are visually balanced. Most measurements align to an 8dp grid, which aligns both spacing and the overall layout.
+    // Smaller components, such as icons, can align to a 4dp grid.
+    // https://m2.material.io/design/layout/understanding-layout.html
+    const transform = createUnarySpacing({
+      spacing: spacingInput
+    });
+    const spacing = (...argsInput) => {
+      {
+        if (!(argsInput.length <= 4)) {
+          console.error(`MUI: Too many arguments provided, expected between 0 and 4, got ${argsInput.length}`);
+        }
+      }
+      const args = argsInput.length === 0 ? [1] : argsInput;
+      return args.map(argument => {
+        const output = transform(argument);
+        return typeof output === 'number' ? `${output}px` : output;
+      }).join(' ');
+    };
+    spacing.mui = true;
+    return spacing;
+  }
+
   function compose(...styles) {
     const handlers = styles.reduce((acc, style) => {
       style.filterProps.forEach(prop => {
@@ -6078,153 +6341,6 @@
     return fn;
   }
 
-  function memoize(fn) {
-    const cache = {};
-    return arg => {
-      if (cache[arg] === undefined) {
-        cache[arg] = fn(arg);
-      }
-      return cache[arg];
-    };
-  }
-
-  const properties = {
-    m: 'margin',
-    p: 'padding'
-  };
-  const directions = {
-    t: 'Top',
-    r: 'Right',
-    b: 'Bottom',
-    l: 'Left',
-    x: ['Left', 'Right'],
-    y: ['Top', 'Bottom']
-  };
-  const aliases = {
-    marginX: 'mx',
-    marginY: 'my',
-    paddingX: 'px',
-    paddingY: 'py'
-  };
-
-  // memoize() impact:
-  // From 300,000 ops/sec
-  // To 350,000 ops/sec
-  const getCssProperties = memoize(prop => {
-    // It's not a shorthand notation.
-    if (prop.length > 2) {
-      if (aliases[prop]) {
-        prop = aliases[prop];
-      } else {
-        return [prop];
-      }
-    }
-    const [a, b] = prop.split('');
-    const property = properties[a];
-    const direction = directions[b] || '';
-    return Array.isArray(direction) ? direction.map(dir => property + dir) : [property + direction];
-  });
-  const marginKeys = ['m', 'mt', 'mr', 'mb', 'ml', 'mx', 'my', 'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'marginInline', 'marginInlineStart', 'marginInlineEnd', 'marginBlock', 'marginBlockStart', 'marginBlockEnd'];
-  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) {
-    var _getPath;
-    const themeSpacing = (_getPath = getPath(theme, themeKey, false)) != null ? _getPath : defaultValue;
-    if (typeof themeSpacing === 'number') {
-      return abs => {
-        if (typeof abs === 'string') {
-          return abs;
-        }
-        {
-          if (typeof abs !== 'number') {
-            console.error(`MUI: Expected ${propName} argument to be a number or a string, got ${abs}.`);
-          }
-        }
-        return themeSpacing * abs;
-      };
-    }
-    if (Array.isArray(themeSpacing)) {
-      return abs => {
-        if (typeof abs === 'string') {
-          return abs;
-        }
-        {
-          if (!Number.isInteger(abs)) {
-            console.error([`MUI: The \`theme.${themeKey}\` array type cannot be combined with non integer values.` + `You should either use an integer value that can be used as index, or define the \`theme.${themeKey}\` as a number.`].join('\n'));
-          } else if (abs > themeSpacing.length - 1) {
-            console.error([`MUI: The value provided (${abs}) overflows.`, `The supported values are: ${JSON.stringify(themeSpacing)}.`, `${abs} > ${themeSpacing.length - 1}, you need to add the missing values.`].join('\n'));
-          }
-        }
-        return themeSpacing[abs];
-      };
-    }
-    if (typeof themeSpacing === 'function') {
-      return themeSpacing;
-    }
-    {
-      console.error([`MUI: The \`theme.${themeKey}\` value (${themeSpacing}) is invalid.`, 'It should be a number, an array or a function.'].join('\n'));
-    }
-    return () => undefined;
-  }
-  function createUnarySpacing(theme) {
-    return createUnaryUnit(theme, 'spacing', 8, 'spacing');
-  }
-  function getValue(transformer, propValue) {
-    if (typeof propValue === 'string' || propValue == null) {
-      return propValue;
-    }
-    const abs = Math.abs(propValue);
-    const transformed = transformer(abs);
-    if (propValue >= 0) {
-      return transformed;
-    }
-    if (typeof transformed === 'number') {
-      return -transformed;
-    }
-    return `-${transformed}`;
-  }
-  function getStyleFromPropValue(cssProperties, transformer) {
-    return propValue => cssProperties.reduce((acc, cssProperty) => {
-      acc[cssProperty] = getValue(transformer, propValue);
-      return acc;
-    }, {});
-  }
-  function resolveCssProperty(props, keys, prop, transformer) {
-    // Using a hash computation over an array iteration could be faster, but with only 28 items,
-    // it's doesn't worth the bundle size.
-    if (keys.indexOf(prop) === -1) {
-      return null;
-    }
-    const cssProperties = getCssProperties(prop);
-    const styleFromPropValue = getStyleFromPropValue(cssProperties, transformer);
-    const propValue = props[prop];
-    return handleBreakpoints(props, propValue, styleFromPropValue);
-  }
-  function style$1(props, keys) {
-    const transformer = createUnarySpacing(props.theme);
-    return Object.keys(props).map(prop => resolveCssProperty(props, keys, prop, transformer)).reduce(merge, {});
-  }
-  function margin(props) {
-    return style$1(props, marginKeys);
-  }
-  margin.propTypes = marginKeys.reduce((obj, key) => {
-    obj[key] = responsivePropType$1;
-    return obj;
-  }, {}) ;
-  margin.filterProps = marginKeys;
-  function padding(props) {
-    return style$1(props, paddingKeys);
-  }
-  padding.propTypes = paddingKeys.reduce((obj, key) => {
-    obj[key] = responsivePropType$1;
-    return obj;
-  }, {}) ;
-  padding.filterProps = paddingKeys;
-  spacingKeys.reduce((obj, key) => {
-    obj[key] = responsivePropType$1;
-    return obj;
-  }, {}) ;
-
   function borderTransform(value) {
     if (typeof value !== 'number') {
       return value;
@@ -6852,168 +6968,7 @@
   styleFunctionSx.filterProps = ['sx'];
   var styleFunctionSx$1 = styleFunctionSx;
 
-  const _excluded$2o = ["sx"];
-  const splitProps = props => {
-    var _props$theme$unstable, _props$theme;
-    const result = {
-      systemProps: {},
-      otherProps: {}
-    };
-    const config = (_props$theme$unstable = props == null ? void 0 : (_props$theme = props.theme) == null ? void 0 : _props$theme.unstable_sxConfig) != null ? _props$theme$unstable : defaultSxConfig$1;
-    Object.keys(props).forEach(prop => {
-      if (config[prop]) {
-        result.systemProps[prop] = props[prop];
-      } else {
-        result.otherProps[prop] = props[prop];
-      }
-    });
-    return result;
-  };
-  function extendSxProp(props) {
-    const {
-        sx: inSx
-      } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded$2o);
-    const {
-      systemProps,
-      otherProps
-    } = splitProps(other);
-    let finalSx;
-    if (Array.isArray(inSx)) {
-      finalSx = [systemProps, ...inSx];
-    } else if (typeof inSx === 'function') {
-      finalSx = (...args) => {
-        const result = inSx(...args);
-        if (!isPlainObject(result)) {
-          return systemProps;
-        }
-        return _extends({}, systemProps, result);
-      };
-    } else {
-      finalSx = _extends({}, systemProps, inSx);
-    }
-    return _extends({}, otherProps, {
-      sx: finalSx
-    });
-  }
-
-  function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
-
-  const _excluded$2n = ["values", "unit", "step"];
-  const sortBreakpointsValues = values => {
-    const breakpointsAsArray = Object.keys(values).map(key => ({
-      key,
-      val: values[key]
-    })) || [];
-    // Sort in ascending order
-    breakpointsAsArray.sort((breakpoint1, breakpoint2) => breakpoint1.val - breakpoint2.val);
-    return breakpointsAsArray.reduce((acc, obj) => {
-      return _extends({}, acc, {
-        [obj.key]: obj.val
-      });
-    }, {});
-  };
-
-  // Keep in mind that @media is inclusive by the CSS specification.
-  function createBreakpoints(breakpoints) {
-    const {
-        // The breakpoint **start** at this value.
-        // For instance with the first breakpoint xs: [xs, sm).
-        values = {
-          xs: 0,
-          // phone
-          sm: 600,
-          // tablet
-          md: 900,
-          // small laptop
-          lg: 1200,
-          // desktop
-          xl: 1536 // large screen
-        },
-
-        unit = 'px',
-        step = 5
-      } = breakpoints,
-      other = _objectWithoutPropertiesLoose(breakpoints, _excluded$2n);
-    const sortedValues = sortBreakpointsValues(values);
-    const keys = Object.keys(sortedValues);
-    function up(key) {
-      const value = typeof values[key] === 'number' ? values[key] : key;
-      return `@media (min-width:${value}${unit})`;
-    }
-    function down(key) {
-      const value = typeof values[key] === 'number' ? values[key] : key;
-      return `@media (max-width:${value - step / 100}${unit})`;
-    }
-    function between(start, end) {
-      const endIndex = keys.indexOf(end);
-      return `@media (min-width:${typeof values[start] === 'number' ? values[start] : start}${unit}) and ` + `(max-width:${(endIndex !== -1 && typeof values[keys[endIndex]] === 'number' ? values[keys[endIndex]] : end) - step / 100}${unit})`;
-    }
-    function only(key) {
-      if (keys.indexOf(key) + 1 < keys.length) {
-        return between(key, keys[keys.indexOf(key) + 1]);
-      }
-      return up(key);
-    }
-    function not(key) {
-      // handle first and last key separately, for better readability
-      const keyIndex = keys.indexOf(key);
-      if (keyIndex === 0) {
-        return up(keys[1]);
-      }
-      if (keyIndex === keys.length - 1) {
-        return down(keys[keyIndex]);
-      }
-      return between(key, keys[keys.indexOf(key) + 1]).replace('@media', '@media not all and');
-    }
-    return _extends({
-      keys,
-      values: sortedValues,
-      up,
-      down,
-      between,
-      only,
-      not,
-      unit
-    }, other);
-  }
-
-  const shape = {
-    borderRadius: 4
-  };
-  var shape$1 = shape;
-
-  /* tslint:enable:unified-signatures */
-
-  function createSpacing(spacingInput = 8) {
-    // Already transformed.
-    if (spacingInput.mui) {
-      return spacingInput;
-    }
-
-    // Material Design layouts are visually balanced. Most measurements align to an 8dp grid, which aligns both spacing and the overall layout.
-    // Smaller components, such as icons, can align to a 4dp grid.
-    // https://m2.material.io/design/layout/understanding-layout.html
-    const transform = createUnarySpacing({
-      spacing: spacingInput
-    });
-    const spacing = (...argsInput) => {
-      {
-        if (!(argsInput.length <= 4)) {
-          console.error(`MUI: Too many arguments provided, expected between 0 and 4, got ${argsInput.length}`);
-        }
-      }
-      const args = argsInput.length === 0 ? [1] : argsInput;
-      return args.map(argument => {
-        const output = transform(argument);
-        return typeof output === 'number' ? `${output}px` : output;
-      }).join(' ');
-    };
-    spacing.mui = true;
-    return spacing;
-  }
-
-  const _excluded$2m = ["breakpoints", "palette", "spacing", "shape"];
+  const _excluded$2o = ["breakpoints", "palette", "spacing", "shape"];
   function createTheme$1(options = {}, ...args) {
     const {
         breakpoints: breakpointsInput = {},
@@ -7021,7 +6976,7 @@
         spacing: spacingInput,
         shape: shapeInput = {}
       } = options,
-      other = _objectWithoutPropertiesLoose(options, _excluded$2m);
+      other = _objectWithoutPropertiesLoose(options, _excluded$2o);
     const breakpoints = createBreakpoints(breakpointsInput);
     const spacing = createSpacing(spacingInput);
     let muiTheme = deepmerge({
@@ -7046,95 +7001,100 @@
     return muiTheme;
   }
 
-  const ThemeContext = /*#__PURE__*/React__namespace.createContext(null);
-  {
-    ThemeContext.displayName = 'ThemeContext';
+  function isObjectEmpty(obj) {
+    return Object.keys(obj).length === 0;
   }
-  var ThemeContext$1 = ThemeContext;
-
-  function useTheme$3() {
-    const theme = React__namespace.useContext(ThemeContext$1);
-    {
-      // eslint-disable-next-line react-hooks/rules-of-hooks
-      React__namespace.useDebugValue(theme);
-    }
-    return theme;
+  function useTheme$3(defaultTheme = null) {
+    const contextTheme = React__namespace.useContext(ThemeContext$2);
+    return !contextTheme || isObjectEmpty(contextTheme) ? defaultTheme : contextTheme;
   }
 
-  const hasSymbol = typeof Symbol === 'function' && Symbol.for;
-  var nested = hasSymbol ? Symbol.for('mui.nested') : '__THEME_NESTED__';
-
-  function mergeOuterLocalTheme(outerTheme, localTheme) {
-    if (typeof localTheme === 'function') {
-      const mergedTheme = localTheme(outerTheme);
-      {
-        if (!mergedTheme) {
-          console.error(['MUI: You should return an object from your theme function, i.e.', '<ThemeProvider theme={() => ({})} />'].join('\n'));
-        }
-      }
-      return mergedTheme;
-    }
-    return _extends({}, outerTheme, localTheme);
+  const systemDefaultTheme$1 = createTheme$1();
+  function useTheme$2(defaultTheme = systemDefaultTheme$1) {
+    return useTheme$3(defaultTheme);
   }
 
-  /**
-   * This component takes a `theme` prop.
-   * It makes the `theme` available down the React tree thanks to React context.
-   * This component should preferably be used at **the root of your component tree**.
-   */
-  function ThemeProvider$1(props) {
-    const {
-      children,
-      theme: localTheme
-    } = props;
-    const outerTheme = useTheme$3();
-    {
-      if (outerTheme === null && typeof localTheme === 'function') {
-        console.error(['MUI: You are providing a theme function prop to the ThemeProvider component:', '<ThemeProvider theme={outerTheme => outerTheme} />', '', 'However, no outer theme is present.', 'Make sure a theme is already injected higher in the React tree ' + 'or provide a theme object.'].join('\n'));
-      }
-    }
-    const theme = React__namespace.useMemo(() => {
-      const output = outerTheme === null ? localTheme : mergeOuterLocalTheme(outerTheme, localTheme);
-      if (output != null) {
-        output[nested] = outerTheme !== null;
-      }
-      return output;
-    }, [localTheme, outerTheme]);
-    return /*#__PURE__*/jsxRuntime_1(ThemeContext$1.Provider, {
-      value: theme,
-      children: children
+  function GlobalStyles$1({
+    styles,
+    themeId,
+    defaultTheme = {}
+  }) {
+    const upperTheme = useTheme$2(defaultTheme);
+    const globalStyles = typeof styles === 'function' ? styles(themeId ? upperTheme[themeId] || upperTheme : upperTheme) : styles;
+    return /*#__PURE__*/jsxRuntime_1(GlobalStyles$2, {
+      styles: globalStyles
     });
   }
-  ThemeProvider$1.propTypes = {
+  GlobalStyles$1.propTypes /* remove-proptypes */ = {
+    // ----------------------------- Warning --------------------------------
+    // | These PropTypes are generated from the TypeScript type definitions |
+    // |     To update them edit TypeScript types and run "yarn proptypes"  |
+    // ----------------------------------------------------------------------
     /**
-     * Your component tree.
+     * @ignore
      */
-    children: PropTypes.node,
+    defaultTheme: PropTypes.object,
     /**
-     * A theme object. You can provide a function to extend the outer theme.
+     * @ignore
      */
-    theme: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).isRequired
+    styles: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.array, PropTypes.func, PropTypes.number, PropTypes.object, PropTypes.string, PropTypes.bool]),
+    /**
+     * @ignore
+     */
+    themeId: PropTypes.string
   } ;
-  {
-    ThemeProvider$1.propTypes = exactProp(ThemeProvider$1.propTypes) ;
-  }
 
-  function isObjectEmpty(obj) {
-    return Object.keys(obj).length === 0;
-  }
-  function useTheme$2(defaultTheme = null) {
-    const contextTheme = useTheme$3();
-    return !contextTheme || isObjectEmpty(contextTheme) ? defaultTheme : contextTheme;
+  const _excluded$2n = ["sx"];
+  const splitProps = props => {
+    var _props$theme$unstable, _props$theme;
+    const result = {
+      systemProps: {},
+      otherProps: {}
+    };
+    const config = (_props$theme$unstable = props == null ? void 0 : (_props$theme = props.theme) == null ? void 0 : _props$theme.unstable_sxConfig) != null ? _props$theme$unstable : defaultSxConfig$1;
+    Object.keys(props).forEach(prop => {
+      if (config[prop]) {
+        result.systemProps[prop] = props[prop];
+      } else {
+        result.otherProps[prop] = props[prop];
+      }
+    });
+    return result;
+  };
+  function extendSxProp(props) {
+    const {
+        sx: inSx
+      } = props,
+      other = _objectWithoutPropertiesLoose(props, _excluded$2n);
+    const {
+      systemProps,
+      otherProps
+    } = splitProps(other);
+    let finalSx;
+    if (Array.isArray(inSx)) {
+      finalSx = [systemProps, ...inSx];
+    } else if (typeof inSx === 'function') {
+      finalSx = (...args) => {
+        const result = inSx(...args);
+        if (!isPlainObject(result)) {
+          return systemProps;
+        }
+        return _extends({}, systemProps, result);
+      };
+    } else {
+      finalSx = _extends({}, systemProps, inSx);
+    }
+    return _extends({}, otherProps, {
+      sx: finalSx
+    });
   }
 
-  const systemDefaultTheme$1 = createTheme$1();
-  function useTheme$1(defaultTheme = systemDefaultTheme$1) {
-    return useTheme$2(defaultTheme);
-  }
+  function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
-  const _excluded$2l = ["className", "component"];
+  const _excluded$2m = ["className", "component"];
   function createBox(options = {}) {
     const {
+      themeId,
       defaultTheme,
       defaultClassName = 'MuiBox-root',
       generateClassName
@@ -7143,24 +7103,24 @@
       shouldForwardProp: prop => prop !== 'theme' && prop !== 'sx' && prop !== 'as'
     })(styleFunctionSx$1);
     const Box = /*#__PURE__*/React__namespace.forwardRef(function Box(inProps, ref) {
-      const theme = useTheme$1(defaultTheme);
+      const theme = useTheme$2(defaultTheme);
       const _extendSxProp = extendSxProp(inProps),
         {
           className,
           component = 'div'
         } = _extendSxProp,
-        other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$2l);
+        other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$2m);
       return /*#__PURE__*/jsxRuntime_1(BoxRoot, _extends({
         as: component,
         ref: ref,
         className: clsx(className, generateClassName ? generateClassName(defaultClassName) : defaultClassName),
-        theme: theme
+        theme: themeId ? theme[themeId] || theme : theme
       }, other));
     });
     return Box;
   }
 
-  const _excluded$2k = ["variant"];
+  const _excluded$2l = ["variant"];
   function isEmpty$3(string) {
     return string.length === 0;
   }
@@ -7174,7 +7134,7 @@
     const {
         variant
       } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded$2k);
+      other = _objectWithoutPropertiesLoose(props, _excluded$2l);
     let classKey = variant || '';
     Object.keys(other).sort().forEach(key => {
       if (key === 'color') {
@@ -7186,9 +7146,7 @@
     return classKey;
   }
 
-  const _excluded$2j = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"],
-    _excluded2$d = ["theme"],
-    _excluded3$1 = ["theme"];
+  const _excluded$2k = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
   function isEmpty$2(obj) {
     return Object.keys(obj).length === 0;
   }
@@ -7250,16 +7208,26 @@
   const lowercaseFirstLetter = string => {
     return string.charAt(0).toLowerCase() + string.slice(1);
   };
+  function resolveTheme({
+    defaultTheme,
+    theme,
+    themeId
+  }) {
+    return isEmpty$2(theme) ? defaultTheme : theme[themeId] || theme;
+  }
   function createStyled(input = {}) {
     const {
+      themeId,
       defaultTheme = systemDefaultTheme,
       rootShouldForwardProp = shouldForwardProp,
       slotShouldForwardProp = shouldForwardProp
     } = input;
     const systemSx = props => {
-      const theme = isEmpty$2(props.theme) ? defaultTheme : props.theme;
       return styleFunctionSx$1(_extends({}, props, {
-        theme
+        theme: resolveTheme(_extends({}, props, {
+          defaultTheme,
+          themeId
+        }))
       }));
     };
     systemSx.__mui_systemSx = true;
@@ -7273,7 +7241,7 @@
           skipSx: inputSkipSx,
           overridesResolver
         } = inputOptions,
-        options = _objectWithoutPropertiesLoose(inputOptions, _excluded$2j);
+        options = _objectWithoutPropertiesLoose(inputOptions, _excluded$2k);
 
       // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
       const skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver : componentSlot && componentSlot !== 'Root' || false;
@@ -7303,20 +7271,22 @@
           // On the server Emotion doesn't use React.forwardRef for creating components, so the created
           // component stays as a function. This condition makes sure that we do not interpolate functions
           // which are basically components used as a selectors.
-          return typeof stylesArg === 'function' && stylesArg.__emotion_real !== stylesArg ? _ref => {
-            let {
-                theme: themeInput
-              } = _ref,
-              other = _objectWithoutPropertiesLoose(_ref, _excluded2$d);
-            return stylesArg(_extends({
-              theme: isEmpty$2(themeInput) ? defaultTheme : themeInput
-            }, other));
+          return typeof stylesArg === 'function' && stylesArg.__emotion_real !== stylesArg ? props => {
+            return stylesArg(_extends({}, props, {
+              theme: resolveTheme(_extends({}, props, {
+                defaultTheme,
+                themeId
+              }))
+            }));
           } : stylesArg;
         }) : [];
         let transformedStyleArg = styleArg;
         if (componentName && overridesResolver) {
           expressionsWithDefaultTheme.push(props => {
-            const theme = isEmpty$2(props.theme) ? defaultTheme : props.theme;
+            const theme = resolveTheme(_extends({}, props, {
+              defaultTheme,
+              themeId
+            }));
             const styleOverrides = getStyleOverrides(componentName, theme);
             if (styleOverrides) {
               const resolvedStyleOverrides = {};
@@ -7332,7 +7302,10 @@
         }
         if (componentName && !skipVariantsResolver) {
           expressionsWithDefaultTheme.push(props => {
-            const theme = isEmpty$2(props.theme) ? defaultTheme : props.theme;
+            const theme = resolveTheme(_extends({}, props, {
+              defaultTheme,
+              themeId
+            }));
             return variantsResolver(props, getVariantStyles(componentName, theme), theme, componentName);
           });
         }
@@ -7351,15 +7324,12 @@
         // which are basically components used as a selectors.
         styleArg.__emotion_real !== styleArg) {
           // If the type is function, we need to define the default theme.
-          transformedStyleArg = _ref2 => {
-            let {
-                theme: themeInput
-              } = _ref2,
-              other = _objectWithoutPropertiesLoose(_ref2, _excluded3$1);
-            return styleArg(_extends({
-              theme: isEmpty$2(themeInput) ? defaultTheme : themeInput
-            }, other));
-          };
+          transformedStyleArg = props => styleArg(_extends({}, props, {
+            theme: resolveTheme(_extends({}, props, {
+              defaultTheme,
+              themeId
+            }))
+          }));
         }
         const Component = defaultStyledResolver(transformedStyleArg, ...expressionsWithDefaultTheme);
         {
@@ -7399,9 +7369,13 @@
   function useThemeProps$1({
     props,
     name,
-    defaultTheme
+    defaultTheme,
+    themeId
   }) {
-    const theme = useTheme$1(defaultTheme);
+    let theme = useTheme$2(defaultTheme);
+    if (themeId) {
+      theme = theme[themeId] || theme;
+    }
     const mergedProps = getThemeProps({
       theme,
       name,
@@ -7735,38 +7709,132 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     }
   }
 
-  const EMPTY_THEME = {};
-  function InnerThemeProvider(props) {
-    const theme = useTheme$1();
-    return /*#__PURE__*/jsxRuntime_1(ThemeContext$2.Provider, {
-      value: typeof theme === 'object' ? theme : EMPTY_THEME,
-      children: props.children
+  const ThemeContext = /*#__PURE__*/React__namespace.createContext(null);
+  {
+    ThemeContext.displayName = 'ThemeContext';
+  }
+  var ThemeContext$1 = ThemeContext;
+
+  function useTheme$1() {
+    const theme = React__namespace.useContext(ThemeContext$1);
+    {
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      React__namespace.useDebugValue(theme);
+    }
+    return theme;
+  }
+
+  const hasSymbol = typeof Symbol === 'function' && Symbol.for;
+  var nested = hasSymbol ? Symbol.for('mui.nested') : '__THEME_NESTED__';
+
+  function mergeOuterLocalTheme(outerTheme, localTheme) {
+    if (typeof localTheme === 'function') {
+      const mergedTheme = localTheme(outerTheme);
+      {
+        if (!mergedTheme) {
+          console.error(['MUI: You should return an object from your theme function, i.e.', '<ThemeProvider theme={() => ({})} />'].join('\n'));
+        }
+      }
+      return mergedTheme;
+    }
+    return _extends({}, outerTheme, localTheme);
+  }
+
+  /**
+   * This component takes a `theme` prop.
+   * It makes the `theme` available down the React tree thanks to React context.
+   * This component should preferably be used at **the root of your component tree**.
+   */
+  function ThemeProvider$2(props) {
+    const {
+      children,
+      theme: localTheme
+    } = props;
+    const outerTheme = useTheme$1();
+    {
+      if (outerTheme === null && typeof localTheme === 'function') {
+        console.error(['MUI: You are providing a theme function prop to the ThemeProvider component:', '<ThemeProvider theme={outerTheme => outerTheme} />', '', 'However, no outer theme is present.', 'Make sure a theme is already injected higher in the React tree ' + 'or provide a theme object.'].join('\n'));
+      }
+    }
+    const theme = React__namespace.useMemo(() => {
+      const output = outerTheme === null ? localTheme : mergeOuterLocalTheme(outerTheme, localTheme);
+      if (output != null) {
+        output[nested] = outerTheme !== null;
+      }
+      return output;
+    }, [localTheme, outerTheme]);
+    return /*#__PURE__*/jsxRuntime_1(ThemeContext$1.Provider, {
+      value: theme,
+      children: children
     });
   }
-  InnerThemeProvider.propTypes = {
+  ThemeProvider$2.propTypes = {
     /**
      * Your component tree.
      */
-    children: PropTypes.node
+    children: PropTypes.node,
+    /**
+     * A theme object. You can provide a function to extend the outer theme.
+     */
+    theme: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).isRequired
   } ;
+  {
+    ThemeProvider$2.propTypes = exactProp(ThemeProvider$2.propTypes) ;
+  }
+
+  const EMPTY_THEME = {};
+  function useThemeScoping(themeId, upperTheme, localTheme, isPrivate = false) {
+    return React__namespace.useMemo(() => {
+      const resolvedTheme = themeId ? upperTheme[themeId] || upperTheme : upperTheme;
+      if (typeof localTheme === 'function') {
+        const mergedTheme = localTheme(resolvedTheme);
+        const result = themeId ? _extends({}, upperTheme, {
+          [themeId]: mergedTheme
+        }) : mergedTheme;
+        // must return a function for the private theme to NOT merge with the upper theme.
+        // see the test case "use provided theme from a callback" in ThemeProvider.test.js
+        if (isPrivate) {
+          return () => result;
+        }
+        return result;
+      }
+      return themeId ? _extends({}, upperTheme, {
+        [themeId]: localTheme
+      }) : _extends({}, upperTheme, localTheme);
+    }, [themeId, upperTheme, localTheme, isPrivate]);
+  }
 
   /**
    * This component makes the `theme` available down the React tree.
    * It should preferably be used at **the root of your component tree**.
+   *
+   * <ThemeProvider theme={theme}> // existing use case
+   * <ThemeProvider theme={{ id: theme }}> // theme scoping
    */
-  function ThemeProvider(props) {
+  function ThemeProvider$1(props) {
     const {
       children,
-      theme: localTheme
-    } = props;
-    return /*#__PURE__*/jsxRuntime_1(ThemeProvider$1, {
       theme: localTheme,
-      children: /*#__PURE__*/jsxRuntime_1(InnerThemeProvider, {
+      themeId
+    } = props;
+    const upperTheme = useTheme$3(EMPTY_THEME);
+    const upperPrivateTheme = useTheme$1() || EMPTY_THEME;
+    {
+      if (upperTheme === null && typeof localTheme === 'function' || themeId && upperTheme && !upperTheme[themeId] && typeof localTheme === 'function') {
+        console.error(['MUI: You are providing a theme function prop to the ThemeProvider component:', '<ThemeProvider theme={outerTheme => outerTheme} />', '', 'However, no outer theme is present.', 'Make sure a theme is already injected higher in the React tree ' + 'or provide a theme object.'].join('\n'));
+      }
+    }
+    const engineTheme = useThemeScoping(themeId, upperTheme, localTheme);
+    const privateTheme = useThemeScoping(themeId, upperPrivateTheme, localTheme, true);
+    return /*#__PURE__*/jsxRuntime_1(ThemeProvider$2, {
+      theme: privateTheme,
+      children: /*#__PURE__*/jsxRuntime_1(ThemeContext$2.Provider, {
+        value: engineTheme,
         children: children
       })
     });
   }
-  ThemeProvider.propTypes /* remove-proptypes */ = {
+  ThemeProvider$1.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"     |
@@ -7778,10 +7846,14 @@ 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.func, PropTypes.object]).isRequired
+    theme: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,
+    /**
+     * The design system's unique id for getting the corresponded theme when there are multiple design systems.
+     */
+    themeId: PropTypes.string
   } ;
   {
-    ThemeProvider.propTypes = exactProp(ThemeProvider.propTypes) ;
+    ThemeProvider$1.propTypes = exactProp(ThemeProvider$1.propTypes) ;
   }
 
   const DEFAULT_MODE_STORAGE_KEY = 'mode';
@@ -8043,10 +8115,11 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     });
   }
 
-  const _excluded$2i = ["colorSchemes", "components", "generateCssVars", "cssVarPrefix"];
+  const _excluded$2j = ["colorSchemes", "components", "generateCssVars", "cssVarPrefix"];
   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) {
     const {
+      themeId,
       theme: defaultTheme = {},
       attribute: defaultAttribute = DEFAULT_ATTRIBUTE,
       modeStorageKey: defaultModeStorageKey = DEFAULT_MODE_STORAGE_KEY,
@@ -8085,10 +8158,12 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       disableStyleSheetGeneration = false
     }) {
       const hasMounted = React__namespace.useRef(false);
-      const upperTheme = useTheme$3();
+      const upperTheme = useTheme$1();
       const ctx = React__namespace.useContext(ColorSchemeContext);
       const nested = !!ctx && !disableNestedContext;
-      const {
+      const scopedTheme = themeProp[themeId];
+      const _ref = scopedTheme || themeProp,
+        {
           colorSchemes = {},
           components = {},
           generateCssVars = () => ({
@@ -8096,8 +8171,8 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
             css: {}
           }),
           cssVarPrefix
-        } = themeProp,
-        restThemeProp = _objectWithoutPropertiesLoose(themeProp, _excluded$2i);
+        } = _ref,
+        restThemeProp = _objectWithoutPropertiesLoose(_ref, _excluded$2j);
       const allColorSchemes = Object.keys(colorSchemes);
       const defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
       const defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
@@ -8263,16 +8338,17 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       }
       const element = /*#__PURE__*/jsxRuntime_2(React__namespace.Fragment, {
         children: [shouldGenerateStyleSheet && /*#__PURE__*/jsxRuntime_2(React__namespace.Fragment, {
-          children: [/*#__PURE__*/jsxRuntime_1(GlobalStyles$1, {
+          children: [/*#__PURE__*/jsxRuntime_1(GlobalStyles$2, {
             styles: {
               [colorSchemeSelector]: rootCss
             }
-          }), /*#__PURE__*/jsxRuntime_1(GlobalStyles$1, {
+          }), /*#__PURE__*/jsxRuntime_1(GlobalStyles$2, {
             styles: defaultColorSchemeStyleSheet
-          }), /*#__PURE__*/jsxRuntime_1(GlobalStyles$1, {
+          }), /*#__PURE__*/jsxRuntime_1(GlobalStyles$2, {
             styles: otherColorSchemesStyleSheet
           })]
-        }), /*#__PURE__*/jsxRuntime_1(ThemeProvider, {
+        }), /*#__PURE__*/jsxRuntime_1(ThemeProvider$1, {
+          themeId: scopedTheme ? themeId : undefined,
           theme: resolveTheme ? resolveTheme(theme) : theme,
           children: children
         })]
@@ -8516,14 +8592,14 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     };
   }
 
-  const _excluded$2h = ["colorSchemes", "components"],
+  const _excluded$2i = ["colorSchemes", "components"],
     _excluded2$c = ["light"];
   function prepareCssVars(theme, parserConfig) {
     // @ts-ignore - ignore components do not exist
     const {
         colorSchemes = {}
       } = theme,
-      otherTheme = _objectWithoutPropertiesLoose(theme, _excluded$2h);
+      otherTheme = _objectWithoutPropertiesLoose(theme, _excluded$2i);
     const {
       vars: rootVars,
       css: rootCss,
@@ -8575,7 +8651,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     };
   }
 
-  const _excluded$2g = ["className", "component", "disableGutters", "fixed", "maxWidth", "classes"];
+  const _excluded$2h = ["className", "component", "disableGutters", "fixed", "maxWidth", "classes"];
   const defaultTheme$6 = createTheme$1();
   const defaultCreateStyledComponent$2 = systemStyled('div', {
     name: 'MuiContainer',
@@ -8671,7 +8747,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
           fixed = false,
           maxWidth = 'lg'
         } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded$2g);
+        other = _objectWithoutPropertiesLoose(props, _excluded$2h);
       const ownerState = _extends({}, props, {
         component,
         disableGutters,
@@ -8972,7 +9048,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     return [`direction-xs-${String(direction)}`];
   };
 
-  const _excluded$2f = ["className", "columns", "container", "component", "direction", "wrap", "spacing", "rowSpacing", "columnSpacing", "disableEqualOverflow"];
+  const _excluded$2g = ["className", "columns", "container", "component", "direction", "wrap", "spacing", "rowSpacing", "columnSpacing", "disableEqualOverflow"];
   const defaultTheme$5 = createTheme$1();
 
   // widening Theme to any so that the consumer can own the theme structure.
@@ -9013,7 +9089,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     const GridRoot = createStyledComponent(generateGridColumnsStyles, generateGridColumnSpacingStyles, generateGridRowSpacingStyles, generateGridSizeStyles, generateGridDirectionStyles, generateGridStyles, generateGridOffsetStyles);
     const Grid = /*#__PURE__*/React__namespace.forwardRef(function Grid(inProps, ref) {
       var _inProps$columns, _inProps$spacing, _ref, _inProps$rowSpacing, _ref2, _inProps$columnSpacin, _ref3, _disableEqualOverflow;
-      const theme = useTheme$1();
+      const theme = useTheme$2();
       const themeProps = useThemeProps(inProps);
       const props = extendSxProp(themeProps); // `color` type conflicts with html color attribute.
       const level = React__namespace.useContext(NestedContext);
@@ -9030,7 +9106,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
           columnSpacing: columnSpacingProp = spacingProp,
           disableEqualOverflow: themeDisableEqualOverflow
         } = props,
-        rest = _objectWithoutPropertiesLoose(props, _excluded$2f);
+        rest = _objectWithoutPropertiesLoose(props, _excluded$2g);
       // Because `disableEqualOverflow` can be set from the theme's defaultProps, the **nested** grid should look at the instance props instead.
       let disableEqualOverflow = themeDisableEqualOverflow;
       if (level && themeDisableEqualOverflow !== undefined) {
@@ -9120,7 +9196,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     return Grid;
   }
 
-  const _excluded$2e = ["component", "direction", "spacing", "divider", "children", "className", "useFlexGap"];
+  const _excluded$2f = ["component", "direction", "spacing", "divider", "children", "className", "useFlexGap"];
   const defaultTheme$4 = createTheme$1();
   // widening Theme to any so that the consumer can own the theme structure.
   const defaultCreateStyledComponent = systemStyled('div', {
@@ -9249,7 +9325,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
           className,
           useFlexGap = false
         } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded$2e);
+        other = _objectWithoutPropertiesLoose(props, _excluded$2f);
       const ownerState = {
         direction,
         spacing,
@@ -9275,7 +9351,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     return Stack;
   }
 
-  const _excluded$2d = ["defaultProps", "mixins", "overrides", "palette", "props", "styleOverrides"],
+  const _excluded$2e = ["defaultProps", "mixins", "overrides", "palette", "props", "styleOverrides"],
     _excluded2$b = ["type", "mode"];
   function adaptV4Theme(inputTheme) {
     {
@@ -9289,7 +9365,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         props = {},
         styleOverrides = {}
       } = inputTheme,
-      other = _objectWithoutPropertiesLoose(inputTheme, _excluded$2d);
+      other = _objectWithoutPropertiesLoose(inputTheme, _excluded$2e);
     const theme = _extends({}, other, {
       components: {}
     });
@@ -9370,7 +9446,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     }, mixins);
   }
 
-  const _excluded$2c = ["mode", "contrastThreshold", "tonalOffset"];
+  const _excluded$2d = ["mode", "contrastThreshold", "tonalOffset"];
   const light = {
     // The colors used to style the text.
     text: {
@@ -9539,7 +9615,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         contrastThreshold = 3,
         tonalOffset = 0.2
       } = palette,
-      other = _objectWithoutPropertiesLoose(palette, _excluded$2c);
+      other = _objectWithoutPropertiesLoose(palette, _excluded$2d);
     const primary = palette.primary || getDefaultPrimary(mode);
     const secondary = palette.secondary || getDefaultSecondary(mode);
     const error = palette.error || getDefaultError(mode);
@@ -9663,7 +9739,7 @@ const theme2 = createTheme({ palette: {
     return paletteOutput;
   }
 
-  const _excluded$2b = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
+  const _excluded$2c = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
   function round$2(value) {
     return Math.round(value * 1e5) / 1e5;
   }
@@ -9694,7 +9770,7 @@ const theme2 = createTheme({ palette: {
         allVariants,
         pxToRem: pxToRem2
       } = _ref,
-      other = _objectWithoutPropertiesLoose(_ref, _excluded$2b);
+      other = _objectWithoutPropertiesLoose(_ref, _excluded$2c);
     {
       if (typeof fontSize !== 'number') {
         console.error('MUI: `fontSize` is required to be a number.');
@@ -9761,7 +9837,7 @@ const theme2 = createTheme({ palette: {
   const shadows = ['none', createShadow(0, 2, 1, -1, 0, 1, 1, 0, 0, 1, 3, 0), createShadow(0, 3, 1, -2, 0, 2, 2, 0, 0, 1, 5, 0), createShadow(0, 3, 3, -2, 0, 3, 4, 0, 0, 1, 8, 0), createShadow(0, 2, 4, -1, 0, 4, 5, 0, 0, 1, 10, 0), createShadow(0, 3, 5, -1, 0, 5, 8, 0, 0, 1, 14, 0), createShadow(0, 3, 5, -1, 0, 6, 10, 0, 0, 1, 18, 0), createShadow(0, 4, 5, -2, 0, 7, 10, 1, 0, 2, 16, 1), createShadow(0, 5, 5, -3, 0, 8, 10, 1, 0, 3, 14, 2), createShadow(0, 5, 6, -3, 0, 9, 12, 1, 0, 3, 16, 2), createShadow(0, 6, 6, -3, 0, 10, 14, 1, 0, 4, 18, 3), createShadow(0, 6, 7, -4, 0, 11, 15, 1, 0, 4, 20, 3), createShadow(0, 7, 8, -4, 0, 12, 17, 2, 0, 5, 22, 4), createShadow(0, 7, 8, -4, 0, 13, 19, 2, 0, 5, 24, 4), createShadow(0, 7, 9, -4, 0, 14, 21, 2, 0, 5, 26, 4), createShadow(0, 8, 9, -5, 0, 15, 22, 2, 0, 6, 28, 5), createShadow(0, 8, 10, -5, 0, 16, 24, 2, 0, 6, 30, 5), createShadow(0, 8, 11, -5, 0, 17, 26, 2, 0, 6, 32, 5), createShadow(0, 9, 11, -5, 0, 18, 28, 2, 0, 7, 34, 6), createShadow(0, 9, 12, -6, 0, 19, 29, 2, 0, 7, 36, 6), createShadow(0, 10, 13, -6, 0, 20, 31, 3, 0, 8, 38, 7), createShadow(0, 10, 13, -6, 0, 21, 33, 3, 0, 8, 40, 7), createShadow(0, 10, 14, -6, 0, 22, 35, 3, 0, 8, 42, 7), createShadow(0, 11, 14, -7, 0, 23, 36, 3, 0, 9, 44, 8), createShadow(0, 11, 15, -7, 0, 24, 38, 3, 0, 9, 46, 8)];
   var shadows$1 = shadows;
 
-  const _excluded$2a = ["duration", "easing", "delay"];
+  const _excluded$2b = ["duration", "easing", "delay"];
   // Follow https://material.google.com/motion/duration-easing.html#duration-easing-natural-easing-curves
   // to learn the context in which each easing should be used.
   const easing = {
@@ -9812,7 +9888,7 @@ const theme2 = createTheme({ palette: {
           easing: easingOption = mergedEasing.easeInOut,
           delay = 0
         } = options,
-        other = _objectWithoutPropertiesLoose(options, _excluded$2a);
+        other = _objectWithoutPropertiesLoose(options, _excluded$2b);
       {
         const isString = value => typeof value === 'string';
         // IE11 support, replace with Number.isNaN
@@ -9859,7 +9935,7 @@ const theme2 = createTheme({ palette: {
   };
   var zIndex$1 = zIndex;
 
-  const _excluded$29 = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
+  const _excluded$2a = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
   function createTheme(options = {}, ...args) {
     const {
         mixins: mixinsInput = {},
@@ -9867,7 +9943,7 @@ const theme2 = createTheme({ palette: {
         transitions: transitionsInput = {},
         typography: typographyInput = {}
       } = options,
-      other = _objectWithoutPropertiesLoose(options, _excluded$29);
+      other = _objectWithoutPropertiesLoose(options, _excluded$2a);
     if (options.vars) {
       throw new Error(`MUI: \`vars\` is a private field used for CSS variables support.
 Please use another name.` );
@@ -10139,12 +10215,12 @@ Use unitless line heights instead.` );
   var defaultTheme$3 = defaultTheme$2;
 
   function useTheme() {
-    const theme = useTheme$1(defaultTheme$3);
+    const theme = useTheme$2(defaultTheme$3);
     {
       // eslint-disable-next-line react-hooks/rules-of-hooks
       React__namespace.useDebugValue(theme);
     }
-    return theme;
+    return theme[THEME_ID] || theme;
   }
 
   function useThemeProps({
@@ -10154,18 +10230,36 @@ Use unitless line heights instead.` );
     return useThemeProps$1({
       props,
       name,
-      defaultTheme: defaultTheme$3
+      defaultTheme: defaultTheme$3,
+      themeId: THEME_ID
     });
   }
 
   const rootShouldForwardProp = prop => shouldForwardProp(prop) && prop !== 'classes';
   const slotShouldForwardProp = shouldForwardProp;
   const styled = createStyled({
+    themeId: THEME_ID,
     defaultTheme: defaultTheme$3,
     rootShouldForwardProp
   });
   var styled$1 = styled;
 
+  const _excluded$29 = ["theme"];
+  function ThemeProvider(_ref) {
+    let {
+        theme: themeInput
+      } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$29);
+    const scopedTheme = themeInput[THEME_ID];
+    return /*#__PURE__*/jsxRuntime_1(ThemeProvider$1, _extends({}, props, {
+      themeId: scopedTheme ? THEME_ID : undefined,
+      theme: scopedTheme || themeInput
+    }));
+  }
+  ThemeProvider.propTypes = {
+    theme: PropTypes.object
+  } ;
+
   function makeStyles() {
     throw new Error(`MUI: makeStyles is no longer exported from @mui/material/styles.
 You have to import it from @mui/styles.
@@ -10504,6 +10598,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     useColorScheme,
     getInitColorSchemeScript
   } = createCssVarsProvider({
+    themeId: THEME_ID,
     theme: defaultTheme$1,
     attribute: 'data-mui-color-scheme',
     modeStorageKey: 'mui-mode',
@@ -10681,7 +10776,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const internalSlotProps = getSlotProps(eventHandlers);
 
     // The order of classes is important here.
-    // Emotion (that we use in libraries consuming MUI Base) depends on this order
+    // Emotion (that we use in libraries consuming Base UI) depends on this order
     // to properly override style. It requires the most important classes to be last
     // (see https://github.com/mui/material-ui/pull/33205) for the related discussion.
     const joinedClasses = clsx(internalSlotProps == null ? void 0 : internalSlotProps.className, additionalProps == null ? void 0 : additionalProps.className, className, externalForwardedProps == null ? void 0 : externalForwardedProps.className, externalSlotProps == null ? void 0 : externalSlotProps.className);
@@ -13320,7 +13415,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   }
   generateUtilityClasses('MuiPopper', ['root']);
 
-  const _excluded$26 = ["anchorEl", "children", "component", "direction", "disablePortal", "modifiers", "open", "ownerState", "placement", "popperOptions", "popperRef", "slotProps", "slots", "TransitionProps"],
+  const _excluded$26 = ["anchorEl", "children", "component", "direction", "disablePortal", "modifiers", "open", "placement", "popperOptions", "popperRef", "slotProps", "slots", "TransitionProps", "ownerState"],
     _excluded2$9 = ["anchorEl", "children", "container", "direction", "disablePortal", "keepMounted", "modifiers", "open", "placement", "popperOptions", "popperRef", "style", "transition", "slotProps", "slots"];
   function flipPlacement(placement, direction) {
     if (direction === 'ltr') {
@@ -13365,7 +13460,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         disablePortal,
         modifiers,
         open,
-        ownerState,
         placement: initialPlacement,
         popperOptions,
         popperRef: popperRefProp,
@@ -13468,7 +13562,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         role: 'tooltip',
         ref: ownRef
       },
-      ownerState: _extends({}, props, ownerState),
+      ownerState: props,
       className: classes.root
     });
     return /*#__PURE__*/jsxRuntime_1(Root, _extends({}, rootProps, {
@@ -14135,7 +14229,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       return null;
     }
     return /*#__PURE__*/jsxRuntime_1(Portal$1
-    // @ts-expect-error TODO: include ref to MUI Base Portal props
+    // @ts-expect-error TODO: include ref to Base UI Portal props
     , {
       ref: handlePortalRef,
       container: container,
@@ -15208,7 +15302,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         return updateState(prevState, newState);
       });
     }, [getUpdatedState]);
-    const syncHeightWithFlushSycn = () => {
+    const syncHeightWithFlushSync = () => {
       const newState = getUpdatedState();
       if (isEmpty$1(newState)) {
         return;
@@ -15232,7 +15326,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         // 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
         if (inputRef.current) {
-          syncHeightWithFlushSycn();
+          syncHeightWithFlushSync();
         }
       });
       let resizeObserver;
@@ -16217,7 +16311,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         onFocus: handleFocus,
         onChange: handleInputChange,
         onMouseDown: handleInputMouseDown,
-        // if open then this is handled imperativeley so don't let react override
+        // if open then this is handled imperatively so don't let react override
         // only have an opinion about this when closed
         'aria-activedescendant': popupOpen ? '' : null,
         'aria-autocomplete': autoComplete ? 'both' : 'list',
@@ -20451,7 +20545,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
    */
   const Popper = /*#__PURE__*/React__namespace.forwardRef(function Popper(inProps, ref) {
     var _slots$root;
-    const theme = useTheme$2();
+    const theme = useTheme$3();
     const props = useThemeProps({
       props: inProps,
       name: 'MuiPopper'
@@ -20553,10 +20647,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * If `true`, the component is shown.
      */
     open: PropTypes.bool.isRequired,
-    /**
-     * @ignore
-     */
-    ownerState: PropTypes.any,
     /**
      * Popper placement.
      * @default 'bottom'
@@ -21260,7 +21350,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   function GlobalStyles(props) {
     return /*#__PURE__*/jsxRuntime_1(GlobalStyles$1, _extends({}, props, {
-      defaultTheme: defaultTheme$3
+      defaultTheme: defaultTheme$3,
+      themeId: THEME_ID
     }));
   }
   GlobalStyles.propTypes /* remove-proptypes */ = {
@@ -21271,9 +21362,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * The styles you want to apply globally.
      */
-    styles: PropTypes.oneOfType([PropTypes.func, PropTypes.number, PropTypes.object, PropTypes.shape({
-      __emotion_styles: PropTypes.any.isRequired
-    }), PropTypes.string, PropTypes.bool])
+    styles: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.array, PropTypes.func, PropTypes.number, PropTypes.object, PropTypes.string, PropTypes.bool])
   } ;
 
   // Supports determination of isControlled().
@@ -24511,6 +24600,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   const defaultTheme = createTheme();
   const Box = createBox({
+    themeId: THEME_ID,
     defaultTheme,
     defaultClassName: 'MuiBox-root',
     generateClassName: ClassNameGenerator$1.generate
@@ -27023,7 +27113,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     enableColorScheme: PropTypes.bool
   } ;
 
-  // track, thumb and active are derieved from macOS 10.15.7
+  // track, thumb and active are derived from macOS 10.15.7
   const scrollBar = {
     track: '#2b2b2b',
     thumb: '#6b6b6b',
@@ -31388,7 +31478,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     return match;
   }
   function useMediaQuery(queryInput, options = {}) {
-    const theme = useTheme$2();
+    const theme = useTheme$3();
     // Wait for jsdom to support the match media feature.
     // All the browsers MUI support have this built-in.
     // This defensive check is here for simplicity.
@@ -35814,7 +35904,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     overridesResolver: (props, styles) => styles.paper
   })({
     // specZ: The maximum height of a simple menu should be one or more rows less than the view
-    // height. This ensures a tapable area outside of the simple menu with which to dismiss
+    // height. This ensures a tappable area outside of the simple menu with which to dismiss
     // the menu.
     maxHeight: 'calc(100% - 96px)',
     // Add iOS momentum scrolling for iOS < 13.0
@@ -39934,7 +40024,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     onChange: PropTypes.func,
     /**
      * Callback fired when the component requests to be closed.
-     * Use it in either controlled (see the `open` prop), or uncontrolled mode (to detect when the Select collapes).
+     * Use it in either controlled (see the `open` prop), or uncontrolled mode (to detect when the Select collapses).
      *
      * @param {object} event The event source of the callback.
      */
@@ -46533,7 +46623,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     // ----------------------------------------------------------------------
     /**
      * The Toolbar children, usually a mixture of `IconButton`, `Button` and `Typography`.
-     * The Toolbar is a flex container, allowing flex item properites to be used to lay out the children.
+     * The Toolbar is a flex container, allowing flex item properties to be used to lay out the children.
      */
     children: PropTypes.node,
     /**
@@ -47985,7 +48075,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       moveTabsScroll(getScrollSize());
     };
 
-    // TODO Remove <ScrollbarSize /> as browser support for hidding the scrollbar
+    // TODO Remove <ScrollbarSize /> as browser support for hiding the scrollbar
     // with CSS improves.
     const handleScrollbarSizeChange = React__namespace.useCallback(scrollbarWidth => {
       setScrollerStyle({
@@ -49359,6 +49449,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   exports.SvgIcon = SvgIcon$1;
   exports.SwipeableDrawer = SwipeableDrawer$1;
   exports.Switch = Switch$1;
+  exports.THEME_ID = THEME_ID;
   exports.Tab = Tab$1;
   exports.TabScrollButton = TabScrollButton$1;
   exports.Table = Table$1;