@mui/material 5.14.2 → 5.14.4

package/Autocomplete/Autocomplete.js

@@ -373,6 +373,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     props: inProps,
     name: 'MuiAutocomplete'
   });
+
   /* eslint-disable @typescript-eslint/no-unused-vars */
   const {
       autoComplete = false,
@@ -401,10 +402,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
       freeSolo = false,
       fullWidth = false,
       getLimitTagsText = more => `+${more}`,
-      getOptionLabel = option => {
-        var _option$label;
-        return (_option$label = option.label) != null ? _option$label : option;
-      },
+      getOptionLabel: getOptionLabelProp,
       groupBy,
       handleHomeEndKeys = !props.freeSolo,
       includeInputInList = false,
@@ -469,6 +467,11 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     } = _getListboxProps,
     otherListboxProps = _objectWithoutPropertiesLoose(_getListboxProps, _excluded2);
   const combinedListboxRef = useForkRef(listboxRef, externalListboxRef);
+  const defaultGetOptionLabel = option => {
+    var _option$label;
+    return (_option$label = option.label) != null ? _option$label : option;
+  };
+  const getOptionLabel = getOptionLabelProp || defaultGetOptionLabel;
 
   // If you modify this, make sure to keep the `AutocompleteOwnerState` type in sync.
   const ownerState = _extends({}, props, {
@@ -476,6 +479,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     expanded,
     focused,
     fullWidth,
+    getOptionLabel,
     hasClearIcon,
     hasPopupIcon,
     inputFocused: focusedTag === -1,
@@ -779,9 +783,9 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    * A function that determines the filtered options to be rendered on search.
    *
    * @default createFilterOptions()
-   * @param {T[]} options The options to render.
+   * @param {Value[]} options The options to render.
    * @param {object} state The state of the component.
-   * @returns {T[]}
+   * @returns {Value[]}
    */
   filterOptions: PropTypes.func,
   /**
@@ -815,7 +819,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
   /**
    * Used to determine the disabled state for a given option.
    *
-   * @param {T} option The option to test.
+   * @param {Value} option The option to test.
    * @returns {boolean}
    */
   getOptionDisabled: PropTypes.func,
@@ -825,7 +829,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    *
    * If used in free solo mode, it must accept both the type of the options and a string.
    *
-   * @param {T} option
+   * @param {Value} option
    * @returns {string}
    * @default (option) => option.label ?? option
    */
@@ -834,7 +838,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    * If provided, the options will be grouped under the returned string.
    * The groupBy value is also used as the text for group headings when `renderGroup` is not provided.
    *
-   * @param {T} options The options to group.
+   * @param {Value} options The options to group.
    * @returns {string}
    */
   groupBy: PropTypes.func,
@@ -863,8 +867,8 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    * Uses strict equality by default.
    * ⚠️ Both arguments need to be handled, an option can only match with one value.
    *
-   * @param {T} option The option to test.
-   * @param {T} value The value to test against.
+   * @param {Value} option The option to test.
+   * @param {Value} value The value to test against.
    * @returns {boolean}
    */
   isOptionEqualToValue: PropTypes.func,
@@ -912,7 +916,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    * Callback fired when the value changes.
    *
    * @param {React.SyntheticEvent} event The event source of the callback.
-   * @param {T|T[]} value The new value of the component.
+   * @param {Value|Value[]} value The new value of the component.
    * @param {string} reason One of "createOption", "selectOption", "removeOption", "blur" or "clear".
    * @param {string} [details]
    */
@@ -929,7 +933,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    * Callback fired when the highlight option changes.
    *
    * @param {React.SyntheticEvent} event The event source of the callback.
-   * @param {T} option The highlighted option.
+   * @param {Value} option The highlighted option.
    * @param {string} reason Can be: `"keyboard"`, `"auto"`, `"mouse"`, `"touch"`.
    */
   onHighlightChange: PropTypes.func,
@@ -1006,7 +1010,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    * Render the option, use `getOptionLabel` by default.
    *
    * @param {object} props The props to apply on the li element.
-   * @param {T} option The option to render.
+   * @param {Value} option The option to render.
    * @param {object} state The state of each option.
    * @param {object} ownerState The state of the Autocomplete component.
    * @returns {ReactNode}
@@ -1015,7 +1019,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
   /**
    * Render the selected value.
    *
-   * @param {T[]} value The `value` provided to the component.
+   * @param {Value[]} value The `value` provided to the component.
    * @param {function} getTagProps A tag props getter.
    * @param {object} ownerState The state of the Autocomplete component.
    * @returns {ReactNode}

package/Autocomplete/autocompleteClasses.d.ts

@@ -1,58 +1,58 @@
-export interface AutocompleteClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if `fullWidth={true}`. */
-    fullWidth: string;
-    /** State class applied to the root element if the listbox is displayed. */
-    expanded: string;
-    /** State class applied to the root element if focused. */
-    focused: string;
-    /** Styles applied to the option elements if they are keyboard focused. */
-    focusVisible: string;
-    /** Styles applied to the tag elements, e.g. the chips. */
-    tag: string;
-    /** Styles applied to the tag elements, e.g. the chips if `size="small"`. */
-    tagSizeSmall: string;
-    /** Styles applied to the tag elements, e.g. the chips if `size="medium"`. */
-    tagSizeMedium: string;
-    /** Styles applied when the popup icon is rendered. */
-    hasPopupIcon: string;
-    /** Styles applied when the clear icon is rendered. */
-    hasClearIcon: string;
-    /** Styles applied to the Input element. */
-    inputRoot: string;
-    /** Styles applied to the input element. */
-    input: string;
-    /** Styles applied to the input element if the input is focused. */
-    inputFocused: string;
-    /** Styles applied to the endAdornment element. */
-    endAdornment: string;
-    /** Styles applied to the clear indicator. */
-    clearIndicator: string;
-    /** Styles applied to the popup indicator. */
-    popupIndicator: string;
-    /** Styles applied to the popup indicator if the popup is open. */
-    popupIndicatorOpen: string;
-    /** Styles applied to the popper element. */
-    popper: string;
-    /** Styles applied to the popper element if `disablePortal={true}`. */
-    popperDisablePortal: string;
-    /** Styles applied to the Paper component. */
-    paper: string;
-    /** Styles applied to the listbox component. */
-    listbox: string;
-    /** Styles applied to the loading wrapper. */
-    loading: string;
-    /** Styles applied to the no option wrapper. */
-    noOptions: string;
-    /** Styles applied to the option elements. */
-    option: string;
-    /** Styles applied to the group's label elements. */
-    groupLabel: string;
-    /** Styles applied to the group's ul elements. */
-    groupUl: string;
-}
-export type AutocompleteClassKey = keyof AutocompleteClasses;
-export declare function getAutocompleteUtilityClass(slot: string): string;
-declare const autocompleteClasses: AutocompleteClasses;
-export default autocompleteClasses;
+export interface AutocompleteClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if `fullWidth={true}`. */
+    fullWidth: string;
+    /** State class applied to the root element if the listbox is displayed. */
+    expanded: string;
+    /** State class applied to the root element if focused. */
+    focused: string;
+    /** Styles applied to the option elements if they are keyboard focused. */
+    focusVisible: string;
+    /** Styles applied to the tag elements, e.g. the chips. */
+    tag: string;
+    /** Styles applied to the tag elements, e.g. the chips if `size="small"`. */
+    tagSizeSmall: string;
+    /** Styles applied to the tag elements, e.g. the chips if `size="medium"`. */
+    tagSizeMedium: string;
+    /** Styles applied when the popup icon is rendered. */
+    hasPopupIcon: string;
+    /** Styles applied when the clear icon is rendered. */
+    hasClearIcon: string;
+    /** Styles applied to the Input element. */
+    inputRoot: string;
+    /** Styles applied to the input element. */
+    input: string;
+    /** Styles applied to the input element if the input is focused. */
+    inputFocused: string;
+    /** Styles applied to the endAdornment element. */
+    endAdornment: string;
+    /** Styles applied to the clear indicator. */
+    clearIndicator: string;
+    /** Styles applied to the popup indicator. */
+    popupIndicator: string;
+    /** Styles applied to the popup indicator if the popup is open. */
+    popupIndicatorOpen: string;
+    /** Styles applied to the popper element. */
+    popper: string;
+    /** Styles applied to the popper element if `disablePortal={true}`. */
+    popperDisablePortal: string;
+    /** Styles applied to the Paper component. */
+    paper: string;
+    /** Styles applied to the listbox component. */
+    listbox: string;
+    /** Styles applied to the loading wrapper. */
+    loading: string;
+    /** Styles applied to the no option wrapper. */
+    noOptions: string;
+    /** Styles applied to the option elements. */
+    option: string;
+    /** Styles applied to the group's label elements. */
+    groupLabel: string;
+    /** Styles applied to the group's ul elements. */
+    groupUl: string;
+}
+export type AutocompleteClassKey = keyof AutocompleteClasses;
+export declare function getAutocompleteUtilityClass(slot: string): string;
+declare const autocompleteClasses: AutocompleteClasses;
+export default autocompleteClasses;

package/Avatar/Avatar.d.ts

@@ -7,8 +7,11 @@ import { AvatarClasses } from './avatarClasses';
 
 export interface AvatarPropsVariantOverrides {}
 
-export interface AvatarTypeMap<P = {}, D extends React.ElementType = 'div'> {
-  props: P & {
+export interface AvatarTypeMap<
+  AdditionalProps = {},
+  DefaultComponent extends React.ElementType = 'div',
+> {
+  props: AdditionalProps & {
     /**
      * Used in combination with `src` or `srcSet` to
      * provide an alt attribute for the rendered `img` element.
@@ -56,7 +59,7 @@ export interface AvatarTypeMap<P = {}, D extends React.ElementType = 'div'> {
       AvatarPropsVariantOverrides
     >;
   };
-  defaultComponent: D;
+  defaultComponent: DefaultComponent;
 }
 
 /**
@@ -72,8 +75,10 @@ export interface AvatarTypeMap<P = {}, D extends React.ElementType = 'div'> {
 declare const Avatar: OverridableComponent<AvatarTypeMap>;
 
 export type AvatarProps<
-  D extends React.ElementType = AvatarTypeMap['defaultComponent'],
-  P = {},
-> = OverrideProps<AvatarTypeMap<P, D>, D>;
+  RootComponent extends React.ElementType = AvatarTypeMap['defaultComponent'],
+  AdditionalProps = {},
+> = OverrideProps<AvatarTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default Avatar;

package/Avatar/Avatar.js

@@ -6,7 +6,7 @@ const _excluded = ["alt", "children", "className", "component", "imgProps", "siz
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses } from '@mui/base';
+import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import Person from '../internal/svg-icons/Person';

package/Avatar/avatarClasses.d.ts

@@ -1,20 +1,20 @@
-export interface AvatarClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if not `src` or `srcSet`. */
-    colorDefault: string;
-    /** Styles applied to the root element if `variant="circular"`. */
-    circular: string;
-    /** Styles applied to the root element if `variant="rounded"`. */
-    rounded: string;
-    /** Styles applied to the root element if `variant="square"`. */
-    square: string;
-    /** Styles applied to the img element if either `src` or `srcSet` is defined. */
-    img: string;
-    /** Styles applied to the fallback icon */
-    fallback: string;
-}
-export type AvatarClassKey = keyof AvatarClasses;
-export declare function getAvatarUtilityClass(slot: string): string;
-declare const avatarClasses: AvatarClasses;
-export default avatarClasses;
+export interface AvatarClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if not `src` or `srcSet`. */
+    colorDefault: string;
+    /** Styles applied to the root element if `variant="circular"`. */
+    circular: string;
+    /** Styles applied to the root element if `variant="rounded"`. */
+    rounded: string;
+    /** Styles applied to the root element if `variant="square"`. */
+    square: string;
+    /** Styles applied to the img element if either `src` or `srcSet` is defined. */
+    img: string;
+    /** Styles applied to the fallback icon */
+    fallback: string;
+}
+export type AvatarClassKey = keyof AvatarClasses;
+export declare function getAvatarUtilityClass(slot: string): string;
+declare const avatarClasses: AvatarClasses;
+export default avatarClasses;

package/AvatarGroup/AvatarGroup.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { InternalStandardProps as StandardProps, Theme } from '@mui/material';
 import { OverridableStringUnion } from '@mui/types';
 import { SxProps } from '@mui/system';
+import { InternalStandardProps as StandardProps, Theme } from '@mui/material';
 import { AvatarGroupClasses } from './avatarGroupClasses';
 import Avatar from '../Avatar';
 

package/AvatarGroup/AvatarGroup.js

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import { isFragment } from 'react-is';
 import clsx from 'clsx';
 import { chainPropTypes } from '@mui/utils';
-import { unstable_composeClasses as composeClasses } from '@mui/base';
+import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import Avatar, { avatarClasses } from '../Avatar';

package/AvatarGroup/avatarGroupClasses.d.ts

@@ -1,10 +1,10 @@
-export interface AvatarGroupClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the avatar elements. */
-    avatar: string;
-}
-export type AvatarGroupClassKey = keyof AvatarGroupClasses;
-export declare function getAvatarGroupUtilityClass(slot: string): string;
-declare const avatarGroupClasses: AvatarGroupClasses;
-export default avatarGroupClasses;
+export interface AvatarGroupClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the avatar elements. */
+    avatar: string;
+}
+export type AvatarGroupClassKey = keyof AvatarGroupClasses;
+export declare function getAvatarGroupUtilityClass(slot: string): string;
+declare const avatarGroupClasses: AvatarGroupClasses;
+export default avatarGroupClasses;

package/Backdrop/Backdrop.d.ts

@@ -8,8 +8,11 @@ import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 
 export interface BackdropComponentsPropsOverrides {}
 
-export interface BackdropTypeMap<P = {}, D extends React.ElementType = 'div'> {
-  props: P &
+export interface BackdropTypeMap<
+  AdditionalProps = {},
+  DefaultComponent extends React.ElementType = 'div',
+> {
+  props: AdditionalProps &
     Partial<Omit<FadeProps, 'children'>> & {
       /**
        * The content of the component.
@@ -92,7 +95,7 @@ export interface BackdropTypeMap<P = {}, D extends React.ElementType = 'div'> {
         TransitionProps & { children: React.ReactElement<any, any> }
       >;
     };
-  defaultComponent: D;
+  defaultComponent: DefaultComponent;
 }
 
 type BackdropRootProps = NonNullable<BackdropTypeMap['props']['componentsProps']>['root'];
@@ -113,8 +116,10 @@ export declare const BackdropRoot: React.FC<BackdropRootProps>;
 declare const Backdrop: OverridableComponent<BackdropTypeMap>;
 
 export type BackdropProps<
-  D extends React.ElementType = BackdropTypeMap['defaultComponent'],
-  P = {},
-> = OverrideProps<BackdropTypeMap<P, D>, D>;
+  RootComponent extends React.ElementType = BackdropTypeMap['defaultComponent'],
+  AdditionalProps = {},
+> = OverrideProps<BackdropTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default Backdrop;

package/Backdrop/Backdrop.js

@@ -6,7 +6,7 @@ const _excluded = ["children", "className", "component", "components", "componen
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses } from '@mui/base';
+import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import Fade from '../Fade';

package/Backdrop/backdropClasses.d.ts

@@ -1,10 +1,10 @@
-export interface BackdropClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if `invisible={true}`. */
-    invisible: string;
-}
-export type BackdropClassKey = keyof BackdropClasses;
-export declare function getBackdropUtilityClass(slot: string): string;
-declare const backdropClasses: BackdropClasses;
-export default backdropClasses;
+export interface BackdropClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if `invisible={true}`. */
+    invisible: string;
+}
+export type BackdropClassKey = keyof BackdropClasses;
+export declare function getBackdropUtilityClass(slot: string): string;
+declare const backdropClasses: BackdropClasses;
+export default backdropClasses;

package/Badge/Badge.d.ts

@@ -15,8 +15,11 @@ export interface BadgeOrigin {
   horizontal: 'left' | 'right';
 }
 
-export type BadgeTypeMap<D extends React.ElementType = 'span', P = {}> = ExtendBadgeTypeMap<{
-  props: P & {
+export type BadgeTypeMap<
+  DefaultComponent extends React.ElementType = 'span',
+  AdditionalProps = {},
+> = ExtendBadgeTypeMap<{
+  props: AdditionalProps & {
     /**
      * The anchor of the badge.
      * @default {
@@ -80,7 +83,7 @@ export type BadgeTypeMap<D extends React.ElementType = 'span', P = {}> = ExtendB
      */
     variant?: OverridableStringUnion<'standard' | 'dot', BadgePropsVariantOverrides>;
   };
-  defaultComponent: D;
+  defaultComponent: DefaultComponent;
 }>;
 
 type BadgeRootProps = NonNullable<BadgeTypeMap['props']['slotProps']>['root'];
@@ -103,8 +106,10 @@ export declare const BadgeMark: React.FC<BadgeBadgeProps>;
 declare const Badge: OverridableComponent<BadgeTypeMap>;
 
 export type BadgeProps<
-  D extends React.ElementType = BadgeTypeMap['defaultComponent'],
-  P = {},
-> = OverrideProps<BadgeTypeMap<D, P>, D>;
+  RootComponent extends React.ElementType = BadgeTypeMap['defaultComponent'],
+  AdditionalProps = {},
+> = OverrideProps<BadgeTypeMap<RootComponent, AdditionalProps>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default Badge;

package/Badge/Badge.js

@@ -7,8 +7,8 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { usePreviousProps } from '@mui/utils';
-import composeClasses from '@mui/base/composeClasses';
-import useBadge from '@mui/base/useBadge';
+import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
+import { useBadge } from '@mui/base/useBadge';
 import { useSlotProps } from '@mui/base';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';

package/Badge/badgeClasses.d.ts

@@ -1,56 +1,56 @@
-export interface BadgeClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the badge `span` element. */
-    badge: string;
-    /** Styles applied to the badge `span` element if `variant="dot"`. */
-    dot: string;
-    /** Styles applied to the badge `span` element if `variant="standard"`. */
-    standard: string;
-    /** Styles applied to the badge `span` element if `anchorOrigin={{ 'top', 'right' }}`. */
-    anchorOriginTopRight: string;
-    /** Styles applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'right' }}`. */
-    anchorOriginBottomRight: string;
-    /** Styles applied to the badge `span` element if `anchorOrigin={{ 'top', 'left' }}`. */
-    anchorOriginTopLeft: string;
-    /** Styles applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'left' }}`. */
-    anchorOriginBottomLeft: string;
-    /** State class applied to the badge `span` element if `invisible={true}`. */
-    invisible: string;
-    /** Styles applied to the badge `span` element if `color="primary"`. */
-    colorPrimary: string;
-    /** Styles applied to the badge `span` element if `color="secondary"`. */
-    colorSecondary: string;
-    /** Styles applied to the badge `span` element if `color="error"`. */
-    colorError: string;
-    /** Styles applied to the badge `span` element if `color="info"`. */
-    colorInfo: string;
-    /** Styles applied to the badge `span` element if `color="success"`. */
-    colorSuccess: string;
-    /** Styles applied to the badge `span` element if `color="warning"`. */
-    colorWarning: string;
-    /** Styles applied to the badge `span` element if `anchorOrigin={{ 'top', 'right' }} overlap="rectangular"`. */
-    anchorOriginTopRightRectangular: string;
-    /** Styles applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'right' }} overlap="rectangular"`. */
-    anchorOriginBottomRightRectangular: string;
-    /** Styles applied to the badge `span` element if `anchorOrigin={{ 'top', 'left' }} overlap="rectangular"`. */
-    anchorOriginTopLeftRectangular: string;
-    /** Styles applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'left' }} overlap="rectangular"`. */
-    anchorOriginBottomLeftRectangular: string;
-    /** Styles applied to the badge `span` element if `anchorOrigin={{ 'top', 'right' }} overlap="circular"`. */
-    anchorOriginTopRightCircular: string;
-    /** Styles applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'right' }} overlap="circular"`. */
-    anchorOriginBottomRightCircular: string;
-    /** Styles applied to the badge `span` element if `anchorOrigin={{ 'top', 'left' }} overlap="circular"`. */
-    anchorOriginTopLeftCircular: string;
-    /** Styles applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'left' }} overlap="circular"`. */
-    anchorOriginBottomLeftCircular: string;
-    /** Styles applied to the badge `span` element if `overlap="rectangular"`. */
-    overlapRectangular: string;
-    /** Styles applied to the badge `span` element if `overlap="circular"`. */
-    overlapCircular: string;
-}
-export type BadgeClassKey = keyof BadgeClasses;
-export declare function getBadgeUtilityClass(slot: string): string;
-declare const badgeClasses: BadgeClasses;
-export default badgeClasses;
+export interface BadgeClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the badge `span` element. */
+    badge: string;
+    /** Styles applied to the badge `span` element if `variant="dot"`. */
+    dot: string;
+    /** Styles applied to the badge `span` element if `variant="standard"`. */
+    standard: string;
+    /** Styles applied to the badge `span` element if `anchorOrigin={{ 'top', 'right' }}`. */
+    anchorOriginTopRight: string;
+    /** Styles applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'right' }}`. */
+    anchorOriginBottomRight: string;
+    /** Styles applied to the badge `span` element if `anchorOrigin={{ 'top', 'left' }}`. */
+    anchorOriginTopLeft: string;
+    /** Styles applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'left' }}`. */
+    anchorOriginBottomLeft: string;
+    /** State class applied to the badge `span` element if `invisible={true}`. */
+    invisible: string;
+    /** Styles applied to the badge `span` element if `color="primary"`. */
+    colorPrimary: string;
+    /** Styles applied to the badge `span` element if `color="secondary"`. */
+    colorSecondary: string;
+    /** Styles applied to the badge `span` element if `color="error"`. */
+    colorError: string;
+    /** Styles applied to the badge `span` element if `color="info"`. */
+    colorInfo: string;
+    /** Styles applied to the badge `span` element if `color="success"`. */
+    colorSuccess: string;
+    /** Styles applied to the badge `span` element if `color="warning"`. */
+    colorWarning: string;
+    /** Styles applied to the badge `span` element if `anchorOrigin={{ 'top', 'right' }} overlap="rectangular"`. */
+    anchorOriginTopRightRectangular: string;
+    /** Styles applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'right' }} overlap="rectangular"`. */
+    anchorOriginBottomRightRectangular: string;
+    /** Styles applied to the badge `span` element if `anchorOrigin={{ 'top', 'left' }} overlap="rectangular"`. */
+    anchorOriginTopLeftRectangular: string;
+    /** Styles applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'left' }} overlap="rectangular"`. */
+    anchorOriginBottomLeftRectangular: string;
+    /** Styles applied to the badge `span` element if `anchorOrigin={{ 'top', 'right' }} overlap="circular"`. */
+    anchorOriginTopRightCircular: string;
+    /** Styles applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'right' }} overlap="circular"`. */
+    anchorOriginBottomRightCircular: string;
+    /** Styles applied to the badge `span` element if `anchorOrigin={{ 'top', 'left' }} overlap="circular"`. */
+    anchorOriginTopLeftCircular: string;
+    /** Styles applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'left' }} overlap="circular"`. */
+    anchorOriginBottomLeftCircular: string;
+    /** Styles applied to the badge `span` element if `overlap="rectangular"`. */
+    overlapRectangular: string;
+    /** Styles applied to the badge `span` element if `overlap="circular"`. */
+    overlapCircular: string;
+}
+export type BadgeClassKey = keyof BadgeClasses;
+export declare function getBadgeUtilityClass(slot: string): string;
+declare const badgeClasses: BadgeClasses;
+export default badgeClasses;

package/BottomNavigation/BottomNavigation.d.ts

@@ -4,8 +4,11 @@ import { Theme } from '..';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 import { BottomNavigationClasses } from './bottomNavigationClasses';
 
-export interface BottomNavigationTypeMap<P = {}, D extends React.ElementType = 'div'> {
-  props: P & {
+export interface BottomNavigationTypeMap<
+  AdditionalProps = {},
+  DefaultComponent extends React.ElementType = 'div',
+> {
+  props: AdditionalProps & {
     /**
      * The content of the component.
      */
@@ -36,7 +39,7 @@ export interface BottomNavigationTypeMap<P = {}, D extends React.ElementType = '
      */
     value?: any;
   };
-  defaultComponent: D;
+  defaultComponent: DefaultComponent;
 }
 /**
  *
@@ -51,8 +54,10 @@ export interface BottomNavigationTypeMap<P = {}, D extends React.ElementType = '
 declare const BottomNavigation: OverridableComponent<BottomNavigationTypeMap>;
 
 export type BottomNavigationProps<
-  D extends React.ElementType = BottomNavigationTypeMap['defaultComponent'],
-  P = {},
-> = OverrideProps<BottomNavigationTypeMap<P, D>, D>;
+  RootComponent extends React.ElementType = BottomNavigationTypeMap['defaultComponent'],
+  AdditionalProps = {},
+> = OverrideProps<BottomNavigationTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
 
 export default BottomNavigation;