@mui/material 5.11.3 → 5.11.4

package/legacy/MenuItem/MenuItem.js

@@ -234,7 +234,8 @@ process.env.NODE_ENV !== "production" ? MenuItem.propTypes /* remove-proptypes *
    */
   role: PropTypes /* @typescript-to-proptypes-ignore */.string,
   /**
-   * @ignore
+   * If `true`, the component is selected.
+   * @default false
    */
   selected: PropTypes.bool,
   /**

package/legacy/Tabs/Tabs.js

@@ -315,7 +315,9 @@ var Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
         }
         tabMeta = tab ? tab.getBoundingClientRect() : null;
         if (process.env.NODE_ENV !== 'production') {
-          if (process.env.NODE_ENV !== 'test' && !warnedOnceTabPresent && tabMeta && tabMeta.width === 0 && tabMeta.height === 0) {
+          if (process.env.NODE_ENV !== 'test' && !warnedOnceTabPresent && tabMeta && tabMeta.width === 0 && tabMeta.height === 0 &&
+          // if the whole Tabs component is hidden, don't warn
+          tabsMeta.clientWidth !== 0) {
             tabsMeta = null;
             console.error(['MUI: The `value` provided to the Tabs component is invalid.', "The Tab with this `value` (\"".concat(value, "\") is not part of the document layout."), "Make sure the tab item is present in the document or that it's not `display: none`."].join('\n'));
             warnedOnceTabPresent = true;

package/legacy/Tooltip/Tooltip.js

@@ -584,7 +584,6 @@ var Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
         return /*#__PURE__*/_jsx(TransitionComponent, _extends({
           timeout: theme.transitions.duration.shorter
         }, TransitionPropsInner, transitionProps, {
-          "data-foo": "bar",
           children: /*#__PURE__*/_jsxs(TooltipComponent, _extends({}, tooltipProps, {
             children: [title, arrow ? /*#__PURE__*/_jsx(ArrowComponent, _extends({}, tooltipArrowProps, {
               ref: setArrowRef

package/legacy/index.js

@@ -1,5 +1,7 @@
-/** @license MUI v5.11.3
+/**
+ * @mui/material v5.11.4
  *
+ * @license MIT
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */

package/locale/index.d.ts

@@ -1,74 +1,74 @@
-import { ComponentsPropsList } from '../styles/props';
-export interface Localization {
-    components?: {
-        MuiAlert?: {
-            defaultProps: Pick<ComponentsPropsList['MuiAlert'], 'closeText'>;
-        };
-        MuiBreadcrumbs?: {
-            defaultProps: Pick<ComponentsPropsList['MuiBreadcrumbs'], 'expandText'>;
-        };
-        MuiTablePagination?: {
-            defaultProps: Pick<ComponentsPropsList['MuiTablePagination'], 'labelRowsPerPage' | 'labelDisplayedRows' | 'getItemAriaLabel'>;
-        };
-        MuiRating?: {
-            defaultProps: Pick<ComponentsPropsList['MuiRating'], 'emptyLabelText' | 'getLabelText'>;
-        };
-        MuiAutocomplete?: {
-            defaultProps: Pick<ComponentsPropsList['MuiAutocomplete'], 'clearText' | 'closeText' | 'loadingText' | 'noOptionsText' | 'openText'>;
-        };
-        MuiPagination?: {
-            defaultProps: Pick<ComponentsPropsList['MuiPagination'], 'aria-label' | 'getItemAriaLabel'>;
-        };
-    };
-}
-export declare const amET: Localization;
-export declare const arEG: Localization;
-export declare const arSA: Localization;
-export declare const arSD: Localization;
-export declare const azAZ: Localization;
-export declare const bnBD: Localization;
-export declare const bgBG: Localization;
-export declare const caES: Localization;
-export declare const csCZ: Localization;
-export declare const daDK: Localization;
-export declare const deDE: Localization;
-export declare const elGR: Localization;
-export declare const enUS: Localization;
-export declare const esES: Localization;
-export declare const etEE: Localization;
-export declare const faIR: Localization;
-export declare const fiFI: Localization;
-export declare const frFR: Localization;
-export declare const heIL: Localization;
-export declare const hiIN: Localization;
-export declare const hrHR: Localization;
-export declare const huHU: Localization;
-export declare const hyAM: Localization;
-export declare const idID: Localization;
-export declare const isIS: Localization;
-export declare const itIT: Localization;
-export declare const jaJP: Localization;
-export declare const khKH: Localization;
-export declare const koKR: Localization;
-export declare const kuLatn: Localization;
-export declare const kkKZ: Localization;
-export declare const mkMK: Localization;
-export declare const nbNO: Localization;
-export declare const nlNL: Localization;
-export declare const plPL: Localization;
-export declare const ptBR: Localization;
-export declare const ptPT: Localization;
-export declare const roRO: Localization;
-export declare const srRS: Localization;
-export declare const ruRU: Localization;
-export declare const siLK: Localization;
-export declare const skSK: Localization;
-export declare const svSE: Localization;
-export declare const thTH: Localization;
-export declare const trTR: Localization;
-export declare const ukUA: Localization;
-export declare const urPK: Localization;
-export declare const viVN: Localization;
-export declare const zhCN: Localization;
-export declare const zhHK: Localization;
-export declare const zhTW: Localization;
+import { ComponentsPropsList } from '../styles/props';
+export interface Localization {
+    components?: {
+        MuiAlert?: {
+            defaultProps: Pick<ComponentsPropsList['MuiAlert'], 'closeText'>;
+        };
+        MuiBreadcrumbs?: {
+            defaultProps: Pick<ComponentsPropsList['MuiBreadcrumbs'], 'expandText'>;
+        };
+        MuiTablePagination?: {
+            defaultProps: Pick<ComponentsPropsList['MuiTablePagination'], 'labelRowsPerPage' | 'labelDisplayedRows' | 'getItemAriaLabel'>;
+        };
+        MuiRating?: {
+            defaultProps: Pick<ComponentsPropsList['MuiRating'], 'emptyLabelText' | 'getLabelText'>;
+        };
+        MuiAutocomplete?: {
+            defaultProps: Pick<ComponentsPropsList['MuiAutocomplete'], 'clearText' | 'closeText' | 'loadingText' | 'noOptionsText' | 'openText'>;
+        };
+        MuiPagination?: {
+            defaultProps: Pick<ComponentsPropsList['MuiPagination'], 'aria-label' | 'getItemAriaLabel'>;
+        };
+    };
+}
+export declare const amET: Localization;
+export declare const arEG: Localization;
+export declare const arSA: Localization;
+export declare const arSD: Localization;
+export declare const azAZ: Localization;
+export declare const bnBD: Localization;
+export declare const bgBG: Localization;
+export declare const caES: Localization;
+export declare const csCZ: Localization;
+export declare const daDK: Localization;
+export declare const deDE: Localization;
+export declare const elGR: Localization;
+export declare const enUS: Localization;
+export declare const esES: Localization;
+export declare const etEE: Localization;
+export declare const faIR: Localization;
+export declare const fiFI: Localization;
+export declare const frFR: Localization;
+export declare const heIL: Localization;
+export declare const hiIN: Localization;
+export declare const hrHR: Localization;
+export declare const huHU: Localization;
+export declare const hyAM: Localization;
+export declare const idID: Localization;
+export declare const isIS: Localization;
+export declare const itIT: Localization;
+export declare const jaJP: Localization;
+export declare const khKH: Localization;
+export declare const koKR: Localization;
+export declare const kuLatn: Localization;
+export declare const kkKZ: Localization;
+export declare const mkMK: Localization;
+export declare const nbNO: Localization;
+export declare const nlNL: Localization;
+export declare const plPL: Localization;
+export declare const ptBR: Localization;
+export declare const ptPT: Localization;
+export declare const roRO: Localization;
+export declare const srRS: Localization;
+export declare const ruRU: Localization;
+export declare const siLK: Localization;
+export declare const skSK: Localization;
+export declare const svSE: Localization;
+export declare const thTH: Localization;
+export declare const trTR: Localization;
+export declare const ukUA: Localization;
+export declare const urPK: Localization;
+export declare const viVN: Localization;
+export declare const zhCN: Localization;
+export declare const zhHK: Localization;
+export declare const zhTW: Localization;

package/modern/Autocomplete/Autocomplete.js

@@ -499,6 +499,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
       className: classes.option
     }), option, {
       selected: optionProps['aria-selected'],
+      index,
       inputValue
     });
   };

package/modern/FilledInput/FilledInput.js

@@ -89,12 +89,8 @@ const FilledInputRoot = styled(InputBaseRoot, {
     [`&.${filledInputClasses.error}`]: {
       '&:before, &:after': {
         borderBottomColor: (theme.vars || theme).palette.error.main
-      },
-      '&:focus-within:after': {
-        transform: 'scaleX(1)' // error is always underlined in red
       }
     },
-
     '&:before': {
       borderBottom: `1px solid ${theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / ${theme.vars.opacity.inputUnderline})` : bottomLineColor}`,
       left: 0,

package/modern/Input/Input.js

@@ -73,12 +73,8 @@ const InputRoot = styled(InputBaseRoot, {
     [`&.${inputClasses.error}`]: {
       '&:before, &:after': {
         borderBottomColor: (theme.vars || theme).palette.error.main
-      },
-      '&:focus-within:after': {
-        transform: 'scaleX(1)' // error is always underlined in red
       }
     },
-
     '&:before': {
       borderBottom: `1px solid ${bottomLineColor}`,
       left: 0,
@@ -94,7 +90,7 @@ const InputRoot = styled(InputBaseRoot, {
     },
 
     [`&:hover:not(.${inputClasses.disabled}, .${inputClasses.error}):before`]: {
-      borderBottom: `1px solid ${(theme.vars || theme).palette.text.primary}`,
+      borderBottom: `2px solid ${(theme.vars || theme).palette.text.primary}`,
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
         borderBottom: `1px solid ${bottomLineColor}`

package/modern/MenuItem/MenuItem.js

@@ -242,7 +242,8 @@ process.env.NODE_ENV !== "production" ? MenuItem.propTypes /* remove-proptypes *
    */
   role: PropTypes /* @typescript-to-proptypes-ignore */.string,
   /**
-   * @ignore
+   * If `true`, the component is selected.
+   * @default false
    */
   selected: PropTypes.bool,
   /**

package/modern/Tabs/Tabs.js

@@ -307,7 +307,9 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
         }
         tabMeta = tab ? tab.getBoundingClientRect() : null;
         if (process.env.NODE_ENV !== 'production') {
-          if (process.env.NODE_ENV !== 'test' && !warnedOnceTabPresent && tabMeta && tabMeta.width === 0 && tabMeta.height === 0) {
+          if (process.env.NODE_ENV !== 'test' && !warnedOnceTabPresent && tabMeta && tabMeta.width === 0 && tabMeta.height === 0 &&
+          // if the whole Tabs component is hidden, don't warn
+          tabsMeta.clientWidth !== 0) {
             tabsMeta = null;
             console.error(['MUI: The `value` provided to the Tabs component is invalid.', `The Tab with this \`value\` ("${value}") is not part of the document layout.`, "Make sure the tab item is present in the document or that it's not `display: none`."].join('\n'));
             warnedOnceTabPresent = true;

package/modern/Tooltip/Tooltip.js

@@ -567,7 +567,6 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
       }) => /*#__PURE__*/_jsx(TransitionComponent, _extends({
         timeout: theme.transitions.duration.shorter
       }, TransitionPropsInner, transitionProps, {
-        "data-foo": "bar",
         children: /*#__PURE__*/_jsxs(TooltipComponent, _extends({}, tooltipProps, {
           children: [title, arrow ? /*#__PURE__*/_jsx(ArrowComponent, _extends({}, tooltipArrowProps, {
             ref: setArrowRef

package/modern/index.js

@@ -1,5 +1,7 @@
-/** @license MUI v5.11.3
+/**
+ * @mui/material v5.11.4
  *
+ * @license MIT
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */

package/node/Autocomplete/Autocomplete.js

@@ -516,6 +516,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
       className: classes.option
     }), option, {
       selected: optionProps['aria-selected'],
+      index,
       inputValue
     });
   };

package/node/FilledInput/FilledInput.js

@@ -99,12 +99,8 @@ const FilledInputRoot = (0, _styled.default)(_InputBase2.InputBaseRoot, {
     [`&.${_filledInputClasses.default.error}`]: {
       '&:before, &:after': {
         borderBottomColor: (theme.vars || theme).palette.error.main
-      },
-      '&:focus-within:after': {
-        transform: 'scaleX(1)' // error is always underlined in red
       }
     },
-
     '&:before': {
       borderBottom: `1px solid ${theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / ${theme.vars.opacity.inputUnderline})` : bottomLineColor}`,
       left: 0,

package/node/Input/Input.js

@@ -82,12 +82,8 @@ const InputRoot = (0, _styled.default)(_InputBase2.InputBaseRoot, {
     [`&.${_inputClasses.default.error}`]: {
       '&:before, &:after': {
         borderBottomColor: (theme.vars || theme).palette.error.main
-      },
-      '&:focus-within:after': {
-        transform: 'scaleX(1)' // error is always underlined in red
       }
     },
-
     '&:before': {
       borderBottom: `1px solid ${bottomLineColor}`,
       left: 0,
@@ -103,7 +99,7 @@ const InputRoot = (0, _styled.default)(_InputBase2.InputBaseRoot, {
     },
 
     [`&:hover:not(.${_inputClasses.default.disabled}, .${_inputClasses.default.error}):before`]: {
-      borderBottom: `1px solid ${(theme.vars || theme).palette.text.primary}`,
+      borderBottom: `2px solid ${(theme.vars || theme).palette.text.primary}`,
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
         borderBottom: `1px solid ${bottomLineColor}`

package/node/MenuItem/MenuItem.js

@@ -252,7 +252,8 @@ process.env.NODE_ENV !== "production" ? MenuItem.propTypes /* remove-proptypes *
    */
   role: _propTypes.default /* @typescript-to-proptypes-ignore */.string,
   /**
-   * @ignore
+   * If `true`, the component is selected.
+   * @default false
    */
   selected: _propTypes.default.bool,
   /**

package/node/Tabs/Tabs.js

@@ -315,7 +315,9 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
         }
         tabMeta = tab ? tab.getBoundingClientRect() : null;
         if (process.env.NODE_ENV !== 'production') {
-          if (process.env.NODE_ENV !== 'test' && !warnedOnceTabPresent && tabMeta && tabMeta.width === 0 && tabMeta.height === 0) {
+          if (process.env.NODE_ENV !== 'test' && !warnedOnceTabPresent && tabMeta && tabMeta.width === 0 && tabMeta.height === 0 &&
+          // if the whole Tabs component is hidden, don't warn
+          tabsMeta.clientWidth !== 0) {
             tabsMeta = null;
             console.error(['MUI: The `value` provided to the Tabs component is invalid.', `The Tab with this \`value\` ("${value}") is not part of the document layout.`, "Make sure the tab item is present in the document or that it's not `display: none`."].join('\n'));
             warnedOnceTabPresent = true;

package/node/Tooltip/Tooltip.js

@@ -578,7 +578,6 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
       }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(TransitionComponent, (0, _extends2.default)({
         timeout: theme.transitions.duration.shorter
       }, TransitionPropsInner, transitionProps, {
-        "data-foo": "bar",
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(TooltipComponent, (0, _extends2.default)({}, tooltipProps, {
           children: [title, arrow ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ArrowComponent, (0, _extends2.default)({}, tooltipArrowProps, {
             ref: setArrowRef

package/node/index.js

@@ -1,5 +1,7 @@
-/** @license MUI v5.11.3
+/**
+ * @mui/material v5.11.4
  *
+ * @license MIT
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "5.11.3",
+  "version": "5.11.4",
   "private": false,
   "author": "MUI Team",
   "description": "React components that implement Google's Material Design.",
@@ -46,9 +46,9 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.20.7",
-    "@mui/base": "5.0.0-alpha.112",
-    "@mui/core-downloads-tracker": "^5.11.3",
-    "@mui/system": "^5.11.2",
+    "@mui/base": "5.0.0-alpha.113",
+    "@mui/core-downloads-tracker": "^5.11.4",
+    "@mui/system": "^5.11.4",
     "@mui/types": "^7.2.3",
     "@mui/utils": "^5.11.2",
     "@types/react-transition-group": "^4.4.5",

package/styles/CssVarsProvider.d.ts

@@ -1,16 +1,16 @@
-/// <reference types="react" />
-import { SupportedColorScheme } from './experimental_extendTheme';
-declare const shouldSkipGeneratingVar: (keys: string[]) => boolean;
-declare const CssVarsProvider: (props: import("react").PropsWithChildren<Partial<import("@mui/system").CssVarsProviderConfig<SupportedColorScheme>> & {
-    theme?: {
-        cssVarPrefix?: string | undefined;
-        colorSchemes: Record<SupportedColorScheme, Record<string, any>>;
-    } | undefined;
-    documentNode?: Document | null | undefined;
-    colorSchemeNode?: Element | null | undefined;
-    colorSchemeSelector?: string | undefined;
-    storageWindow?: Window | null | undefined;
-    disableNestedContext?: boolean | undefined;
-    disableStyleSheetGeneration?: boolean | undefined;
-}>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>, useColorScheme: () => import("@mui/system").ColorSchemeContextValue<SupportedColorScheme>, getInitColorSchemeScript: typeof import("@mui/system").getInitColorSchemeScript;
-export { useColorScheme, getInitColorSchemeScript, shouldSkipGeneratingVar, CssVarsProvider as Experimental_CssVarsProvider, };
+/// <reference types="react" />
+import { SupportedColorScheme } from './experimental_extendTheme';
+declare const shouldSkipGeneratingVar: (keys: string[]) => boolean;
+declare const CssVarsProvider: (props: import("react").PropsWithChildren<Partial<import("@mui/system").CssVarsProviderConfig<SupportedColorScheme>> & {
+    theme?: {
+        cssVarPrefix?: string | undefined;
+        colorSchemes: Record<SupportedColorScheme, Record<string, any>>;
+    } | undefined;
+    documentNode?: Document | null | undefined;
+    colorSchemeNode?: Element | null | undefined;
+    colorSchemeSelector?: string | undefined;
+    storageWindow?: Window | null | undefined;
+    disableNestedContext?: boolean | undefined;
+    disableStyleSheetGeneration?: boolean | undefined;
+}>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>, useColorScheme: () => import("@mui/system").ColorSchemeContextValue<SupportedColorScheme>, getInitColorSchemeScript: typeof import("@mui/system").getInitColorSchemeScript;
+export { useColorScheme, getInitColorSchemeScript, shouldSkipGeneratingVar, CssVarsProvider as Experimental_CssVarsProvider, };

package/styles/excludeVariablesFromRoot.d.ts

@@ -1,5 +1,5 @@
-/**
- * @internal These variables should not appear in the :root stylesheet when the `defaultMode="dark"`
- */
-declare const excludeVariablesFromRoot: (cssVarPrefix: string) => string[];
-export default excludeVariablesFromRoot;
+/**
+ * @internal These variables should not appear in the :root stylesheet when the `defaultMode="dark"`
+ */
+declare const excludeVariablesFromRoot: (cssVarPrefix: string) => string[];
+export default excludeVariablesFromRoot;

package/styles/getOverlayAlpha.d.ts

@@ -1,2 +1,2 @@
-declare const getOverlayAlpha: (elevation: number) => string;
-export default getOverlayAlpha;
+declare const getOverlayAlpha: (elevation: number) => string;
+export default getOverlayAlpha;

package/transitions/index.d.ts

@@ -1 +1 @@
-export * from './transition';
+export * from './transition';

package/transitions/transition.d.ts

@@ -1,13 +1,13 @@
-import { TransitionProps as _TransitionProps, TransitionActions } from 'react-transition-group/Transition';
-import * as React from 'react';
-export type TransitionHandlerKeys = 'onEnter' | 'onEntering' | 'onEntered' | 'onExit' | 'onExiting' | 'onExited';
-export type TransitionHandlerProps = Pick<_TransitionProps, TransitionHandlerKeys>;
-export interface EasingProps {
-    easing: string | {
-        enter?: string;
-        exit?: string;
-    };
-}
-export type TransitionKeys = 'in' | 'mountOnEnter' | 'unmountOnExit' | 'timeout' | 'easing' | 'addEndListener' | TransitionHandlerKeys;
-export interface TransitionProps extends TransitionActions, Partial<Pick<_TransitionProps & EasingProps, TransitionKeys>>, React.HTMLAttributes<HTMLElement> {
-}
+import { TransitionProps as _TransitionProps, TransitionActions } from 'react-transition-group/Transition';
+import * as React from 'react';
+export type TransitionHandlerKeys = 'onEnter' | 'onEntering' | 'onEntered' | 'onExit' | 'onExiting' | 'onExited';
+export type TransitionHandlerProps = Pick<_TransitionProps, TransitionHandlerKeys>;
+export interface EasingProps {
+    easing: string | {
+        enter?: string;
+        exit?: string;
+    };
+}
+export type TransitionKeys = 'in' | 'mountOnEnter' | 'unmountOnExit' | 'timeout' | 'easing' | 'addEndListener' | TransitionHandlerKeys;
+export interface TransitionProps extends TransitionActions, Partial<Pick<_TransitionProps & EasingProps, TransitionKeys>>, React.HTMLAttributes<HTMLElement> {
+}

package/transitions/utils.d.ts

@@ -1,23 +1,23 @@
-import * as React from 'react';
-export declare const reflow: (node: Element) => number;
-interface ComponentProps {
-    easing: string | {
-        enter?: string;
-        exit?: string;
-    } | undefined;
-    style: React.CSSProperties | undefined;
-    timeout: number | {
-        enter?: number;
-        exit?: number;
-    };
-}
-interface Options {
-    mode: 'enter' | 'exit';
-}
-interface TransitionProps {
-    duration: string | number;
-    easing: string | undefined;
-    delay: string | undefined;
-}
-export declare function getTransitionProps(props: ComponentProps, options: Options): TransitionProps;
-export {};
+import * as React from 'react';
+export declare const reflow: (node: Element) => number;
+interface ComponentProps {
+    easing: string | {
+        enter?: string;
+        exit?: string;
+    } | undefined;
+    style: React.CSSProperties | undefined;
+    timeout: number | {
+        enter?: number;
+        exit?: number;
+    };
+}
+interface Options {
+    mode: 'enter' | 'exit';
+}
+interface TransitionProps {
+    duration: string | number;
+    easing: string | undefined;
+    delay: string | undefined;
+}
+export declare function getTransitionProps(props: ComponentProps, options: Options): TransitionProps;
+export {};

package/types/OverridableComponentAugmentation.d.ts

@@ -1,31 +1,31 @@
-import * as React from 'react';
-import { DistributiveOmit } from '@mui/types';
-declare module '@mui/material/OverridableComponent' {
-    /**
-     * A component whose root component can be controlled via a `component` prop.
-     *
-     * Adjusts valid props based on the type of `component`.
-     */
-    interface OverridableComponent<M extends OverridableTypeMap> {
-        <C extends React.ElementType>(props: {
-            /**
-             * The component used for the root node.
-             * Either a string to use a HTML element or a component.
-             */
-            component: C;
-        } & OverridePropsVer2<M, C>): JSX.Element;
-        (props: DefaultComponentPropsVer2<M>): JSX.Element;
-    }
-    /**
-     * Props of the component if `component={Component}` is used.
-     */
-    type OverridePropsVer2<M extends OverridableTypeMap, C extends React.ElementType> = (BaseProps<M> & DistributiveOmit<React.ComponentPropsWithoutRef<C>, keyof BaseProps<M>> & {
-        ref?: React.Ref<Element>;
-    });
-    /**
-     * Props if `component={Component}` is NOT used.
-     */
-    type DefaultComponentPropsVer2<M extends OverridableTypeMap> = BaseProps<M> & DistributiveOmit<React.ComponentPropsWithoutRef<M['defaultComponent']>, keyof BaseProps<M>> & {
-        ref?: React.Ref<Element>;
-    };
-}
+import * as React from 'react';
+import { DistributiveOmit } from '@mui/types';
+declare module '@mui/material/OverridableComponent' {
+    /**
+     * A component whose root component can be controlled via a `component` prop.
+     *
+     * Adjusts valid props based on the type of `component`.
+     */
+    interface OverridableComponent<M extends OverridableTypeMap> {
+        <C extends React.ElementType>(props: {
+            /**
+             * The component used for the root node.
+             * Either a string to use a HTML element or a component.
+             */
+            component: C;
+        } & OverridePropsVer2<M, C>): JSX.Element;
+        (props: DefaultComponentPropsVer2<M>): JSX.Element;
+    }
+    /**
+     * Props of the component if `component={Component}` is used.
+     */
+    type OverridePropsVer2<M extends OverridableTypeMap, C extends React.ElementType> = (BaseProps<M> & DistributiveOmit<React.ComponentPropsWithoutRef<C>, keyof BaseProps<M>> & {
+        ref?: React.Ref<Element>;
+    });
+    /**
+     * Props if `component={Component}` is NOT used.
+     */
+    type DefaultComponentPropsVer2<M extends OverridableTypeMap> = BaseProps<M> & DistributiveOmit<React.ComponentPropsWithoutRef<M['defaultComponent']>, keyof BaseProps<M>> & {
+        ref?: React.Ref<Element>;
+    };
+}