@mui/material 5.5.1 → 5.6.0

package/node/Popper/Popper.js

@@ -9,17 +9,17 @@ exports.default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var React = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _PopperUnstyled = _interopRequireDefault(require("@mui/base/PopperUnstyled"));
 
+var _system = require("@mui/system");
+
 var _utils = require("@mui/utils");
 
-var _system = require("@mui/system");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var React = _interopRequireWildcard(require("react"));
 
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
+var _styles = require("../styles");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
@@ -27,6 +27,11 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+const PopperRoot = (0, _styles.styled)(_PopperUnstyled.default, {
+  name: 'MuiPopper',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})({});
 /**
  *
  * Demos:
@@ -39,13 +44,14 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  *
  * - [Popper API](https://mui.com/api/popper/)
  */
+
 const Popper = /*#__PURE__*/React.forwardRef(function Popper(inProps, ref) {
   const theme = (0, _system.useThemeWithoutDefault)();
-  const props = (0, _useThemeProps.default)({
+  const props = (0, _styles.useThemeProps)({
     props: inProps,
     name: 'MuiPopper'
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PopperUnstyled.default, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(PopperRoot, (0, _extends2.default)({
     direction: theme == null ? void 0 : theme.direction
   }, props, {
     ref: ref
@@ -149,6 +155,11 @@ process.env.NODE_ENV !== "production" ? Popper.propTypes
    */
   popperRef: _utils.refType,
 
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
+
   /**
    * Help supporting a react-transition-group/Transition component.
    * @default false

package/node/Radio/Radio.js

@@ -179,7 +179,9 @@ process.env.NODE_ENV !== "production" ? Radio.propTypes
   classes: _propTypes.default.object,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * @default 'primary'
    */
   color: _propTypes.default

package/node/Slider/Slider.js

@@ -567,7 +567,9 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes
   classes: _propTypes.default.object,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * @default 'primary'
    */
   color: _propTypes.default

package/node/SvgIcon/SvgIcon.js

@@ -157,7 +157,9 @@ process.env.NODE_ENV !== "production" ? SvgIcon.propTypes
   className: _propTypes.default.string,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * You can use the `htmlColor` prop to apply a color attribute to the SVG element.
    * @default 'inherit'
    */

package/node/Switch/Switch.js

@@ -276,7 +276,9 @@ process.env.NODE_ENV !== "production" ? Switch.propTypes
   className: _propTypes.default.string,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * @default 'primary'
    */
   color: _propTypes.default

package/node/TextField/TextField.js

@@ -274,7 +274,9 @@ process.env.NODE_ENV !== "production" ? TextField.propTypes
   className: _propTypes.default.string,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * @default 'primary'
    */
   color: _propTypes.default

package/node/ToggleButton/ToggleButton.js

@@ -188,6 +188,8 @@ process.env.NODE_ENV !== "production" ? ToggleButton.propTypes
 
   /**
    * The color of the button when it is in an active state.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * @default 'standard'
    */
   color: _propTypes.default

package/node/ToggleButtonGroup/ToggleButtonGroup.js

@@ -214,7 +214,9 @@ process.env.NODE_ENV !== "production" ? ToggleButtonGroup.propTypes
   className: _propTypes.default.string,
 
   /**
-   * The color of a button when it is selected.
+   * The color of the button when it is selected.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * @default 'standard'
    */
   color: _propTypes.default

package/node/Unstable_TrapFocus/index.js

@@ -8,8 +8,8 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function () {
-    return _Unstable_TrapFocus.default;
+    return _TrapFocus.default;
   }
 });
 
-var _Unstable_TrapFocus = _interopRequireDefault(require("@mui/base/Unstable_TrapFocus"));
+var _TrapFocus = _interopRequireDefault(require("@mui/base/TrapFocus"));

package/node/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.5.1
+/** @license MUI v5.6.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/node/locale/index.js

@@ -1066,9 +1066,12 @@ const etEE = {
 
           return 'Vali eelmine lehekülg';
         },
-        labelRowsPerPage: 'Ridu leheküljel:' // labelDisplayedRows: ({ from, to, count }) =>
-        //   `${from}–${to} / ${count !== -1 ? count : `more than ${to}`}`,
-
+        labelRowsPerPage: 'Ridu leheküljel:',
+        labelDisplayedRows: ({
+          from,
+          to,
+          count
+        }) => `${from}–${to} / ${count !== -1 ? count : `rohkem kui ${to}`}`
       }
     },
     MuiRating: {

package/node/styles/CssVarsProvider.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useColorScheme = exports.getInitColorSchemeScript = exports.Experimental_CssVarsProvider = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _system = require("@mui/system");
+
+var _experimental_extendTheme = _interopRequireDefault(require("./experimental_extendTheme"));
+
+var _createTypography = _interopRequireDefault(require("./createTypography"));
+
+/* eslint-disable @typescript-eslint/naming-convention */
+const defaultTheme = (0, _experimental_extendTheme.default)();
+const {
+  CssVarsProvider: Experimental_CssVarsProvider,
+  useColorScheme,
+  getInitColorSchemeScript
+} = (0, _system.unstable_createCssVarsProvider)({
+  theme: defaultTheme,
+  defaultColorScheme: {
+    light: 'light',
+    dark: 'dark'
+  },
+  prefix: 'md',
+  resolveTheme: theme => {
+    const newTheme = (0, _extends2.default)({}, theme, {
+      typography: (0, _createTypography.default)(theme.palette, theme.typography)
+    });
+    return newTheme;
+  },
+  shouldSkipGeneratingVar: keys => !!keys[0].match(/(typography|mixins|breakpoints|direction|transitions)/)
+});
+exports.getInitColorSchemeScript = getInitColorSchemeScript;
+exports.useColorScheme = useColorScheme;
+exports.Experimental_CssVarsProvider = Experimental_CssVarsProvider;

package/node/styles/experimental_extendTheme.js

@@ -0,0 +1,105 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultOpacity = exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _utils = require("@mui/utils");
+
+var _system = require("@mui/system");
+
+var _createTheme = _interopRequireDefault(require("./createTheme"));
+
+var _createPalette = _interopRequireDefault(require("./createPalette"));
+
+const _excluded = ["colorSchemes", "opacity"],
+      _excluded2 = ["palette"];
+const defaultOpacity = {
+  active: 0.54,
+  hover: 0.04,
+  selected: 0.08,
+  disabled: 0.26,
+  focus: 0.12
+};
+exports.defaultOpacity = defaultOpacity;
+
+function createTheme(options = {}, ...args) {
+  var _colorSchemesInput$li, _colorSchemesInput$da;
+
+  const {
+    colorSchemes: colorSchemesInput = {},
+    opacity: opacityInput = {}
+  } = options,
+        input = (0, _objectWithoutPropertiesLoose2.default)(options, _excluded); // eslint-disable-next-line prefer-const
+
+  let _createThemeWithoutVa = (0, _createTheme.default)((0, _extends2.default)({}, input, colorSchemesInput.light && {
+    palette: (_colorSchemesInput$li = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li.palette
+  })),
+      {
+    palette: lightPalette
+  } = _createThemeWithoutVa,
+      muiTheme = (0, _objectWithoutPropertiesLoose2.default)(_createThemeWithoutVa, _excluded2);
+
+  const {
+    palette: darkPalette
+  } = (0, _createTheme.default)({
+    palette: (0, _extends2.default)({
+      mode: 'dark'
+    }, (_colorSchemesInput$da = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da.palette)
+  });
+  colorSchemesInput.light = {
+    palette: lightPalette
+  };
+  colorSchemesInput.dark = {
+    palette: darkPalette
+  };
+  const colorSchemes = {};
+  Object.keys(colorSchemesInput).forEach(key => {
+    const palette = (0, _createPalette.default)(colorSchemesInput[key].palette);
+    Object.keys(palette).forEach(color => {
+      const colors = palette[color];
+
+      if (colors.main) {
+        palette[color].mainChannel = (0, _system.colorChannel)(colors.main);
+      }
+
+      if (colors.light) {
+        palette[color].lightChannel = (0, _system.colorChannel)(colors.light);
+      }
+
+      if (colors.dark) {
+        palette[color].darkChannel = (0, _system.colorChannel)(colors.dark);
+      }
+
+      if (colors.primary) {
+        palette[color].primaryChannel = (0, _system.colorChannel)(colors.primary);
+      }
+
+      if (colors.secondary) {
+        palette[color].secondaryChannel = (0, _system.colorChannel)(colors.secondary);
+      }
+
+      if (colors.disabled) {
+        palette[color].disabledChannel = (0, _system.colorChannel)(colors.disabled);
+      }
+    });
+    colorSchemes[key] = {
+      palette
+    };
+  });
+  const opacity = (0, _extends2.default)({}, defaultOpacity, opacityInput);
+  muiTheme.colorSchemes = colorSchemes;
+  muiTheme.opacity = opacity;
+  muiTheme = args.reduce((acc, argument) => (0, _utils.deepmerge)(acc, argument), muiTheme);
+  return muiTheme;
+}
+
+var _default = createTheme;
+exports.default = _default;

package/node/styles/index.js

@@ -5,6 +5,42 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  adaptV4Theme: true,
+  hexToRgb: true,
+  rgbToHex: true,
+  hslToRgb: true,
+  decomposeColor: true,
+  recomposeColor: true,
+  getContrastRatio: true,
+  getLuminance: true,
+  emphasize: true,
+  alpha: true,
+  darken: true,
+  lighten: true,
+  css: true,
+  keyframes: true,
+  experimental_sx: true,
+  StyledEngineProvider: true,
+  createTheme: true,
+  createMuiTheme: true,
+  unstable_createMuiStrictModeTheme: true,
+  createStyles: true,
+  unstable_getUnit: true,
+  unstable_toUnitless: true,
+  responsiveFontSizes: true,
+  duration: true,
+  easing: true,
+  useTheme: true,
+  useThemeProps: true,
+  styled: true,
+  experimentalStyled: true,
+  ThemeProvider: true,
+  makeStyles: true,
+  withStyles: true,
+  withTheme: true,
+  experimental_extendTheme: true
+};
 Object.defineProperty(exports, "StyledEngineProvider", {
   enumerable: true,
   get: function () {
@@ -89,6 +125,12 @@ Object.defineProperty(exports, "experimentalStyled", {
     return _styled.default;
   }
 });
+Object.defineProperty(exports, "experimental_extendTheme", {
+  enumerable: true,
+  get: function () {
+    return _experimental_extendTheme.default;
+  }
+});
 Object.defineProperty(exports, "experimental_sx", {
   enumerable: true,
   get: function () {
@@ -234,6 +276,22 @@ var _withStyles = _interopRequireDefault(require("./withStyles"));
 
 var _withTheme = _interopRequireDefault(require("./withTheme"));
 
+var _CssVarsProvider = require("./CssVarsProvider");
+
+Object.keys(_CssVarsProvider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _CssVarsProvider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _CssVarsProvider[key];
+    }
+  });
+});
+
+var _experimental_extendTheme = _interopRequireDefault(require("./experimental_extendTheme"));
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "5.5.1",
+  "version": "5.6.0",
   "private": false,
   "author": "MUI Team",
   "description": "Quickly build beautiful React apps. MUI is a simple and customizable component library to build faster, beautiful, and more accessible React applications. Follow your own design system, or start with Material Design.",
@@ -29,9 +29,9 @@
   "peerDependencies": {
     "@emotion/react": "^11.5.0",
     "@emotion/styled": "^11.3.0",
-    "@types/react": "^16.8.6 || ^17.0.0",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0"
+    "@types/react": "^16.8.6 || ^17.0.0 || ^18.0.0",
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0"
   },
   "peerDependenciesMeta": {
     "@types/react": {
@@ -46,10 +46,10 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.17.2",
-    "@mui/base": "5.0.0-alpha.72",
-    "@mui/system": "^5.5.1",
+    "@mui/base": "5.0.0-alpha.75",
+    "@mui/system": "^5.6.0",
     "@mui/types": "^7.1.3",
-    "@mui/utils": "^5.4.4",
+    "@mui/utils": "^5.6.0",
     "@types/react-transition-group": "^4.4.4",
     "clsx": "^1.1.1",
     "csstype": "^3.0.11",

package/styles/CssVarsProvider.d.ts

@@ -0,0 +1,28 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import { CreateCssVarsProviderResult } from '@mui/system';
+import { ThemeOptions, SupportedColorScheme } from './experimental_extendTheme';
+import { PaletteWithChannels } from './createPalette';
+
+export interface ThemeInput extends Omit<ThemeOptions, 'colorSchemes'> {
+  colorSchemes: Partial<
+    Record<
+      SupportedColorScheme,
+      {
+        palette: PaletteWithChannels;
+      }
+    >
+  >;
+}
+
+type MDCreateCssVarsProviderResult = CreateCssVarsProviderResult<SupportedColorScheme, ThemeInput>;
+
+declare const useColorScheme: MDCreateCssVarsProviderResult['useColorScheme'];
+declare const getInitColorSchemeScript: MDCreateCssVarsProviderResult['getInitColorSchemeScript'];
+
+/**
+ * This component is an experimental Theme Provider that generates CSS variabels out of the theme tokens.
+ * It should preferably be used at **the root of your component tree**.
+ */
+declare const Experimental_CssVarsProvider: MDCreateCssVarsProviderResult['CssVarsProvider'];
+
+export { useColorScheme, getInitColorSchemeScript, Experimental_CssVarsProvider };

package/styles/CssVarsProvider.js

@@ -0,0 +1,28 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+
+/* eslint-disable @typescript-eslint/naming-convention */
+import { unstable_createCssVarsProvider as createCssVarsProvider } from '@mui/system';
+import experimental_extendTheme from './experimental_extendTheme';
+import createTypography from './createTypography';
+const defaultTheme = experimental_extendTheme();
+const {
+  CssVarsProvider: Experimental_CssVarsProvider,
+  useColorScheme,
+  getInitColorSchemeScript
+} = createCssVarsProvider({
+  theme: defaultTheme,
+  defaultColorScheme: {
+    light: 'light',
+    dark: 'dark'
+  },
+  prefix: 'md',
+  resolveTheme: theme => {
+    const newTheme = _extends({}, theme, {
+      typography: createTypography(theme.palette, theme.typography)
+    });
+
+    return newTheme;
+  },
+  shouldSkipGeneratingVar: keys => !!keys[0].match(/(typography|mixins|breakpoints|direction|transitions)/)
+});
+export { useColorScheme, getInitColorSchemeScript, Experimental_CssVarsProvider };

package/styles/createPalette.d.ts

@@ -98,6 +98,32 @@ export interface Palette {
   augmentColor: (options: PaletteAugmentColorOptions) => PaletteColor;
 }
 
+export interface Channels {
+  mainChannel: string;
+  lightChannel: string;
+  darkChannel: string;
+}
+
+export interface PaletteWithChannels {
+  common: CommonColors;
+  mode: PaletteMode;
+  contrastThreshold: number;
+  tonalOffset: PaletteTonalOffset;
+  primary: PaletteColor & Channels;
+  secondary: PaletteColor & Channels;
+  error: PaletteColor & Channels;
+  warning: PaletteColor & Channels;
+  info: PaletteColor & Channels;
+  success: PaletteColor & Channels;
+  grey: Color;
+  text: TypeText & { primaryChannel: string; secondaryChannel: string; disabledChannel: string };
+  divider: TypeDivider;
+  action: TypeAction & { disabledChannel: string };
+  background: TypeBackground;
+  getContrastText: (background: string) => string;
+  augmentColor: (options: PaletteAugmentColorOptions) => PaletteColor;
+}
+
 export type PartialTypeObject = { [P in keyof TypeObject]?: Partial<TypeObject[P]> };
 
 export interface PaletteOptions {

package/styles/experimental_extendTheme.d.ts

@@ -0,0 +1,90 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import { ThemeOptions as SystemThemeOptions, Theme as SystemTheme } from '@mui/system';
+import { OverridableStringUnion } from '@mui/types';
+import { Mixins, MixinsOptions } from './createMixins';
+import { Palette, PaletteOptions } from './createPalette';
+import { Typography, TypographyOptions } from './createTypography';
+import { Shadows } from './shadows';
+import { Transitions, TransitionsOptions } from './createTransitions';
+import { ZIndex, ZIndexOptions } from './zIndex';
+import { Components } from './components';
+
+/**
+ * default MD color-schemes
+ */
+export type DefaultColorScheme = 'light' | 'dark';
+
+/**
+ * The application can add more color-scheme by extending this interface via module augmentation
+ *
+ * Ex.
+ * declare module @mui/material/styles {
+ *   interface ColorSchemeOverrides {
+ *     foo: true;
+ *   }
+ * }
+ *
+ * // SupportedColorScheme = 'light' | 'dark' | 'foo';
+ */
+export interface ColorSchemeOverrides {}
+export type ExtendedColorScheme = OverridableStringUnion<never, ColorSchemeOverrides>;
+
+/**
+ * All color-schemes that the application has
+ */
+export type SupportedColorScheme = DefaultColorScheme | ExtendedColorScheme;
+
+export interface ThemeOptions extends Omit<SystemThemeOptions, 'zIndex'> {
+  mixins?: MixinsOptions;
+  components?: Components<BaseTheme>;
+  // palette?: PaletteOptions;
+  colorSchemes?: Record<SupportedColorScheme, { palette: PaletteOptions }>;
+  shadows?: Shadows;
+  transitions?: TransitionsOptions;
+  typography?: TypographyOptions | ((palette: Palette) => TypographyOptions);
+  zIndex?: ZIndexOptions;
+  unstable_strictMode?: boolean;
+  opacity?: {
+    active?: number;
+    hover?: number;
+    selected?: number;
+    disabled?: number;
+    focus?: number;
+  };
+}
+
+interface BaseTheme extends SystemTheme {
+  mixins: Mixins;
+  palette: Palette;
+  shadows: Shadows;
+  transitions: Transitions;
+  typography: Typography;
+  zIndex: ZIndex;
+  unstable_strictMode?: boolean;
+  colorSchemes: Record<string, { palette: Palette }>;
+  opacity: {
+    active: number;
+    hover: number;
+    selected: number;
+    disabled: number;
+    focus: number;
+  };
+}
+
+// shut off automatic exporting for the `BaseTheme` above
+export {};
+
+/**
+ * Our [TypeScript guide on theme customization](https://mui.com/guides/typescript/#customization-of-theme) explains in detail how you would add custom properties.
+ */
+export interface Theme extends BaseTheme {
+  components?: Components<BaseTheme>;
+}
+
+/**
+ * Generate a theme base on the options received.
+ * @param options Takes an incomplete theme object and adds the missing parts.
+ * @param args Deep merge the arguments with the about to be returned theme.
+ * @returns A complete, ready-to-use theme object.
+ */
+export default function experimental_extendTheme(options?: ThemeOptions, ...args: object[]): Theme;