@mui/material 5.0.0 → 5.0.4

package/TableSortLabel/tableSortLabelClasses.d.ts

@@ -1,16 +1,16 @@
-export interface TableSortLabelClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** State class applied to the root element if `active={true}`. */
-    active: string;
-    /** Styles applied to the icon component. */
-    icon: string;
-    /** Styles applied to the icon component if `direction="desc"`. */
-    iconDirectionDesc: string;
-    /** Styles applied to the icon component if `direction="asc"`. */
-    iconDirectionAsc: string;
-}
-export declare type TableSortLabelClassKey = keyof TableSortLabelClasses;
-export declare function getTableSortLabelUtilityClass(slot: string): string;
-declare const tableSortLabelClasses: TableSortLabelClasses;
-export default tableSortLabelClasses;
+export interface TableSortLabelClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** State class applied to the root element if `active={true}`. */
+    active: string;
+    /** Styles applied to the icon component. */
+    icon: string;
+    /** Styles applied to the icon component if `direction="desc"`. */
+    iconDirectionDesc: string;
+    /** Styles applied to the icon component if `direction="asc"`. */
+    iconDirectionAsc: string;
+}
+export declare type TableSortLabelClassKey = keyof TableSortLabelClasses;
+export declare function getTableSortLabelUtilityClass(slot: string): string;
+declare const tableSortLabelClasses: TableSortLabelClasses;
+export default tableSortLabelClasses;

package/Tabs/tabsClasses.d.ts

@@ -1,32 +1,32 @@
-export interface TabsClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if `orientation="vertical"`. */
-    vertical: string;
-    /** Styles applied to the flex container element. */
-    flexContainer: string;
-    /** Styles applied to the flex container element if `orientation="vertical"`. */
-    flexContainerVertical: string;
-    /** Styles applied to the flex container element if `centered={true}` & `!variant="scrollable"`. */
-    centered: string;
-    /** Styles applied to the tablist element. */
-    scroller: string;
-    /** Styles applied to the tablist element if `!variant="scrollable"`. */
-    fixed: string;
-    /** Styles applied to the tablist element if `variant="scrollable"` and `orientation="horizontal"`. */
-    scrollableX: string;
-    /** Styles applied to the tablist element if `variant="scrollable"` and `orientation="vertical"`. */
-    scrollableY: string;
-    /** Styles applied to the tablist element if `variant="scrollable"` and `visibleScrollbar={false}`. */
-    hideScrollbar: string;
-    /** Styles applied to the ScrollButtonComponent component. */
-    scrollButtons: string;
-    /** Styles applied to the ScrollButtonComponent component if `allowScrollButtonsMobile={true}`. */
-    scrollButtonsHideMobile: string;
-    /** Styles applied to the TabIndicator component. */
-    indicator: string;
-}
-export declare type TabsClassKey = keyof TabsClasses;
-export declare function getTabsUtilityClass(slot: string): string;
-declare const tabsClasses: TabsClasses;
-export default tabsClasses;
+export interface TabsClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if `orientation="vertical"`. */
+    vertical: string;
+    /** Styles applied to the flex container element. */
+    flexContainer: string;
+    /** Styles applied to the flex container element if `orientation="vertical"`. */
+    flexContainerVertical: string;
+    /** Styles applied to the flex container element if `centered={true}` & `!variant="scrollable"`. */
+    centered: string;
+    /** Styles applied to the tablist element. */
+    scroller: string;
+    /** Styles applied to the tablist element if `!variant="scrollable"`. */
+    fixed: string;
+    /** Styles applied to the tablist element if `variant="scrollable"` and `orientation="horizontal"`. */
+    scrollableX: string;
+    /** Styles applied to the tablist element if `variant="scrollable"` and `orientation="vertical"`. */
+    scrollableY: string;
+    /** Styles applied to the tablist element if `variant="scrollable"` and `visibleScrollbar={false}`. */
+    hideScrollbar: string;
+    /** Styles applied to the ScrollButtonComponent component. */
+    scrollButtons: string;
+    /** Styles applied to the ScrollButtonComponent component if `allowScrollButtonsMobile={true}`. */
+    scrollButtonsHideMobile: string;
+    /** Styles applied to the TabIndicator component. */
+    indicator: string;
+}
+export declare type TabsClassKey = keyof TabsClasses;
+export declare function getTabsUtilityClass(slot: string): string;
+declare const tabsClasses: TabsClasses;
+export default tabsClasses;

package/TextField/textFieldClasses.d.ts

@@ -1,8 +1,8 @@
-export interface TextFieldClasses {
-    /** Styles applied to the root element. */
-    root: string;
-}
-export declare type TextFieldClassKey = keyof TextFieldClasses;
-export declare function getTextFieldUtilityClass(slot: string): string;
-declare const textFieldClasses: TextFieldClasses;
-export default textFieldClasses;
+export interface TextFieldClasses {
+    /** Styles applied to the root element. */
+    root: string;
+}
+export declare type TextFieldClassKey = keyof TextFieldClasses;
+export declare function getTextFieldUtilityClass(slot: string): string;
+declare const textFieldClasses: TextFieldClasses;
+export default textFieldClasses;

package/ToggleButton/toggleButtonClasses.d.ts

@@ -1,24 +1,24 @@
-export interface ToggleButtonClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** State class applied to the root element if `disabled={true}`. */
-    disabled: string;
-    /** State class applied to the root element if `selected={true}`. */
-    selected: string;
-    /** State class applied to the root element if `color="standard"`. */
-    standard: string;
-    /** State class applied to the root element if `color="primary"`. */
-    primary: string;
-    /** State class applied to the root element if `color="secondary"`. */
-    secondary: string;
-    /** Styles applied to the root element if `size="small"`. */
-    sizeSmall: string;
-    /** Styles applied to the root element if `size="medium"`. */
-    sizeMedium: string;
-    /** Styles applied to the root element if `size="large"`. */
-    sizeLarge: string;
-}
-export declare type ToggleButtonClassKey = keyof ToggleButtonClasses;
-export declare function getToggleButtonUtilityClass(slot: string): string;
-declare const toggleButtonClasses: ToggleButtonClasses;
-export default toggleButtonClasses;
+export interface ToggleButtonClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** State class applied to the root element if `disabled={true}`. */
+    disabled: string;
+    /** State class applied to the root element if `selected={true}`. */
+    selected: string;
+    /** State class applied to the root element if `color="standard"`. */
+    standard: string;
+    /** State class applied to the root element if `color="primary"`. */
+    primary: string;
+    /** State class applied to the root element if `color="secondary"`. */
+    secondary: string;
+    /** Styles applied to the root element if `size="small"`. */
+    sizeSmall: string;
+    /** Styles applied to the root element if `size="medium"`. */
+    sizeMedium: string;
+    /** Styles applied to the root element if `size="large"`. */
+    sizeLarge: string;
+}
+export declare type ToggleButtonClassKey = keyof ToggleButtonClasses;
+export declare function getToggleButtonUtilityClass(slot: string): string;
+declare const toggleButtonClasses: ToggleButtonClasses;
+export default toggleButtonClasses;

package/ToggleButtonGroup/toggleButtonGroupClasses.d.ts

@@ -1,18 +1,18 @@
-export interface ToggleButtonGroupClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if `orientation="vertical"`. */
-    vertical: string;
-    /** State class applied to the root element if `disabled={true}`. */
-    disabled: string;
-    /** Styles applied to the children. */
-    grouped: string;
-    /** Styles applied to the children if `orientation="horizontal"`. */
-    groupedHorizontal: string;
-    /** Styles applied to the children if `orientation="vertical"`. */
-    groupedVertical: string;
-}
-export declare type ToggleButtonGroupClassKey = keyof ToggleButtonGroupClasses;
-export declare function getToggleButtonGroupUtilityClass(slot: string): string;
-declare const toggleButtonGroupClasses: ToggleButtonGroupClasses;
-export default toggleButtonGroupClasses;
+export interface ToggleButtonGroupClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if `orientation="vertical"`. */
+    vertical: string;
+    /** State class applied to the root element if `disabled={true}`. */
+    disabled: string;
+    /** Styles applied to the children. */
+    grouped: string;
+    /** Styles applied to the children if `orientation="horizontal"`. */
+    groupedHorizontal: string;
+    /** Styles applied to the children if `orientation="vertical"`. */
+    groupedVertical: string;
+}
+export declare type ToggleButtonGroupClassKey = keyof ToggleButtonGroupClasses;
+export declare function getToggleButtonGroupUtilityClass(slot: string): string;
+declare const toggleButtonGroupClasses: ToggleButtonGroupClasses;
+export default toggleButtonGroupClasses;

package/Toolbar/toolbarClasses.d.ts

@@ -1,14 +1,14 @@
-export interface ToolbarClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element unless `disableGutters={true}`. */
-    gutters: string;
-    /** Styles applied to the root element if `variant="regular"`. */
-    regular: string;
-    /** Styles applied to the root element if `variant="dense"`. */
-    dense: string;
-}
-export declare type ToolbarClassKey = keyof ToolbarClasses;
-export declare function getToolbarUtilityClass(slot: string): string;
-declare const toolbarClasses: ToolbarClasses;
-export default toolbarClasses;
+export interface ToolbarClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element unless `disableGutters={true}`. */
+    gutters: string;
+    /** Styles applied to the root element if `variant="regular"`. */
+    regular: string;
+    /** Styles applied to the root element if `variant="dense"`. */
+    dense: string;
+}
+export declare type ToolbarClassKey = keyof ToolbarClasses;
+export declare function getToolbarUtilityClass(slot: string): string;
+declare const toolbarClasses: ToolbarClasses;
+export default toolbarClasses;

package/Tooltip/Tooltip.d.ts

@@ -1,10 +1,12 @@
 import * as React from 'react';
-import { SxProps } from '@mui/system';
+import { MUIStyledCommonProps, SxProps } from '@mui/system';
 import { InternalStandardProps as StandardProps, Theme } from '..';
 import { TransitionProps } from '../transitions/transition';
 import { PopperProps } from '../Popper/Popper';
 import { TooltipClasses } from './tooltipClasses';
 
+export interface TooltipComponentsPropsOverrides {}
+
 export interface TooltipProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>, 'title'> {
   /**
    * If `true`, adds an arrow to the tooltip.
@@ -19,6 +21,31 @@ export interface TooltipProps extends StandardProps<React.HTMLAttributes<HTMLDiv
    * Override or extend the styles applied to the component.
    */
   classes?: Partial<TooltipClasses>;
+  /**
+   * The components used for each slot inside the Tooltip.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  components?: {
+    Popper?: React.ElementType;
+    Transition?: React.ElementType;
+    Tooltip?: React.ElementType;
+    Arrow?: React.ElementType;
+  };
+  /**
+   * The props used for each slot inside the Tooltip.
+   * @default {}
+   */
+  componentsProps?: {
+    popper?: PopperProps & TooltipComponentsPropsOverrides;
+    transition?: TransitionProps & TooltipComponentsPropsOverrides;
+    tooltip?: React.HTMLProps<HTMLDivElement> &
+      MUIStyledCommonProps &
+      TooltipComponentsPropsOverrides;
+    arrow?: React.HTMLProps<HTMLSpanElement> &
+      MUIStyledCommonProps &
+      TooltipComponentsPropsOverrides;
+  };
   /**
    * Set to `true` if the `title` acts as an accessible description.
    * By default the `title` acts as an accessible label for the child.
@@ -140,7 +167,7 @@ export interface TooltipProps extends StandardProps<React.HTMLAttributes<HTMLDiv
    * @default Grow
    */
   TransitionComponent?: React.JSXElementConstructor<
-    TransitionProps & { children?: React.ReactElement<any, any> }
+    TransitionProps & { children: React.ReactElement<any, any> }
   >;
   /**
    * Props applied to the transition element.

package/Tooltip/Tooltip.js

@@ -1,11 +1,11 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["arrow", "children", "classes", "describeChild", "disableFocusListener", "disableHoverListener", "disableInteractive", "disableTouchListener", "enterDelay", "enterNextDelay", "enterTouchDelay", "followCursor", "id", "leaveDelay", "leaveTouchDelay", "onClose", "onOpen", "open", "placement", "PopperComponent", "PopperProps", "title", "TransitionComponent", "TransitionProps"];
+const _excluded = ["arrow", "children", "classes", "components", "componentsProps", "describeChild", "disableFocusListener", "disableHoverListener", "disableInteractive", "disableTouchListener", "enterDelay", "enterNextDelay", "enterTouchDelay", "followCursor", "id", "leaveDelay", "leaveTouchDelay", "onClose", "onOpen", "open", "placement", "PopperComponent", "PopperProps", "title", "TransitionComponent", "TransitionProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { elementAcceptingRef } from '@mui/utils';
-import { unstable_composeClasses as composeClasses } from '@mui/core';
+import { unstable_composeClasses as composeClasses, appendOwnerState } from '@mui/core';
 import { alpha } from '@mui/system';
 import styled from '../styles/styled';
 import useTheme from '../styles/useTheme';
@@ -211,9 +211,12 @@ function composeEventHandler(handler, eventHandler) {
 
     handler(event);
   };
-}
+} // TODO (v6) Remove PopperComponent, PopperProps, TransitionComponent and TransitionProps.
+
 
 const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
+  var _components$Popper, _ref, _components$Tooltip, _components$Arrow, _componentsProps$popp;
+
   const props = useThemeProps({
     props: inProps,
     name: 'MuiTooltip'
@@ -222,6 +225,8 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
   const {
     arrow = false,
     children,
+    components = {},
+    componentsProps = {},
     describeChild = false,
     disableFocusListener = false,
     disableHoverListener = false,
@@ -238,10 +243,10 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
     onOpen,
     open: openProp,
     placement = 'bottom',
-    PopperComponent = Popper,
+    PopperComponent: PopperComponentProp,
     PopperProps = {},
     title,
-    TransitionComponent = Grow,
+    TransitionComponent: TransitionComponentProp = Grow,
     TransitionProps
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
@@ -575,15 +580,22 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
     arrow,
     disableInteractive,
     placement,
-    PopperComponent,
+    PopperComponentProp,
     touch: ignoreNonTouchEvents.current
   });
 
   const classes = useUtilityClasses(ownerState);
+  const PopperComponent = (_components$Popper = components.Popper) != null ? _components$Popper : TooltipPopper;
+  const TransitionComponent = (_ref = TransitionComponentProp != null ? TransitionComponentProp : components.Transition) != null ? _ref : Grow;
+  const TooltipComponent = (_components$Tooltip = components.Tooltip) != null ? _components$Tooltip : TooltipTooltip;
+  const ArrowComponent = (_components$Arrow = components.Arrow) != null ? _components$Arrow : TooltipArrow;
+  const popperProps = appendOwnerState(PopperComponent, _extends({}, PopperProps, componentsProps.popper), ownerState);
+  const transitionProps = appendOwnerState(TransitionComponent, _extends({}, TransitionProps, componentsProps.transition), ownerState);
+  const tooltipProps = appendOwnerState(TooltipComponent, _extends({}, componentsProps.tooltip), ownerState);
+  const tooltipArrowProps = appendOwnerState(ArrowComponent, _extends({}, componentsProps.arrow), ownerState);
   return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [/*#__PURE__*/React.cloneElement(children, childrenProps), /*#__PURE__*/_jsx(TooltipPopper, _extends({
-      as: PopperComponent,
-      className: classes.popper,
+    children: [/*#__PURE__*/React.cloneElement(children, childrenProps), /*#__PURE__*/_jsx(PopperComponent, _extends({
+      as: PopperComponentProp != null ? PopperComponentProp : Popper,
       placement: placement,
       anchorEl: followCursor ? {
         getBoundingClientRect: () => ({
@@ -599,24 +611,26 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
       open: childNode ? open : false,
       id: id,
       transition: true
-    }, interactiveWrapperListeners, PopperProps, {
+    }, interactiveWrapperListeners, popperProps, {
+      className: clsx(classes.popper, (_componentsProps$popp = componentsProps.popper) == null ? void 0 : _componentsProps$popp.className),
       popperOptions: popperOptions,
-      ownerState: ownerState,
       children: ({
         TransitionProps: TransitionPropsInner
-      }) => /*#__PURE__*/_jsx(TransitionComponent, _extends({
-        timeout: theme.transitions.duration.shorter
-      }, TransitionPropsInner, TransitionProps, {
-        children: /*#__PURE__*/_jsxs(TooltipTooltip, {
-          className: classes.tooltip,
-          ownerState: ownerState,
-          children: [title, arrow ? /*#__PURE__*/_jsx(TooltipArrow, {
-            className: classes.arrow,
-            ref: setArrowRef,
-            ownerState: ownerState
-          }) : null]
-        })
-      }))
+      }) => {
+        var _componentsProps$tool, _componentsProps$arro;
+
+        return /*#__PURE__*/_jsx(TransitionComponent, _extends({
+          timeout: theme.transitions.duration.shorter
+        }, TransitionPropsInner, transitionProps, {
+          children: /*#__PURE__*/_jsxs(TooltipComponent, _extends({}, tooltipProps, {
+            className: clsx(classes.tooltip, (_componentsProps$tool = componentsProps.tooltip) == null ? void 0 : _componentsProps$tool.className),
+            children: [title, arrow ? /*#__PURE__*/_jsx(ArrowComponent, _extends({}, tooltipArrowProps, {
+              className: clsx(classes.arrow, (_componentsProps$arro = componentsProps.arrow) == null ? void 0 : _componentsProps$arro.className),
+              ref: setArrowRef
+            })) : null]
+          }))
+        }));
+      }
     }))]
   });
 });
@@ -649,6 +663,24 @@ process.env.NODE_ENV !== "production" ? Tooltip.propTypes
    */
   className: PropTypes.string,
 
+  /**
+   * The components used for each slot inside the Tooltip.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  components: PropTypes.shape({
+    Arrow: PropTypes.elementType,
+    Popper: PropTypes.elementType,
+    Tooltip: PropTypes.elementType,
+    Transition: PropTypes.elementType
+  }),
+
+  /**
+   * The props used for each slot inside the Tooltip.
+   * @default {}
+   */
+  componentsProps: PropTypes.object,
+
   /**
    * Set to `true` if the `title` acts as an accessible description.
    * By default the `title` acts as an accessible label for the child.

package/Tooltip/tooltipClasses.d.ts

@@ -1,30 +1,30 @@
-export interface TooltipClasses {
-    /** Styles applied to the Popper component. */
-    popper: string;
-    /** Styles applied to the Popper component unless `disableInteractive={true}`. */
-    popperInteractive: string;
-    /** Styles applied to the Popper component if `arrow={true}`. */
-    popperArrow: string;
-    /** Styles applied to the Popper component unless the tooltip is open. */
-    popperClose: string;
-    /** Styles applied to the tooltip (label wrapper) element. */
-    tooltip: string;
-    /** Styles applied to the tooltip (label wrapper) element if `arrow={true}`. */
-    tooltipArrow: string;
-    /** Styles applied to the arrow element. */
-    arrow: string;
-    /** Styles applied to the tooltip (label wrapper) element if the tooltip is opened by touch. */
-    touch: string;
-    /** Styles applied to the tooltip (label wrapper) element if `placement` contains "left". */
-    tooltipPlacementLeft: string;
-    /** Styles applied to the tooltip (label wrapper) element if `placement` contains "right". */
-    tooltipPlacementRight: string;
-    /** Styles applied to the tooltip (label wrapper) element if `placement` contains "top". */
-    tooltipPlacementTop: string;
-    /** Styles applied to the tooltip (label wrapper) element if `placement` contains "bottom". */
-    tooltipPlacementBottom: string;
-}
-export declare type TooltipClassKey = keyof TooltipClasses;
-export declare function getTooltipUtilityClass(slot: string): string;
-declare const tooltipClasses: TooltipClasses;
-export default tooltipClasses;
+export interface TooltipClasses {
+    /** Styles applied to the Popper component. */
+    popper: string;
+    /** Styles applied to the Popper component unless `disableInteractive={true}`. */
+    popperInteractive: string;
+    /** Styles applied to the Popper component if `arrow={true}`. */
+    popperArrow: string;
+    /** Styles applied to the Popper component unless the tooltip is open. */
+    popperClose: string;
+    /** Styles applied to the tooltip (label wrapper) element. */
+    tooltip: string;
+    /** Styles applied to the tooltip (label wrapper) element if `arrow={true}`. */
+    tooltipArrow: string;
+    /** Styles applied to the arrow element. */
+    arrow: string;
+    /** Styles applied to the tooltip (label wrapper) element if the tooltip is opened by touch. */
+    touch: string;
+    /** Styles applied to the tooltip (label wrapper) element if `placement` contains "left". */
+    tooltipPlacementLeft: string;
+    /** Styles applied to the tooltip (label wrapper) element if `placement` contains "right". */
+    tooltipPlacementRight: string;
+    /** Styles applied to the tooltip (label wrapper) element if `placement` contains "top". */
+    tooltipPlacementTop: string;
+    /** Styles applied to the tooltip (label wrapper) element if `placement` contains "bottom". */
+    tooltipPlacementBottom: string;
+}
+export declare type TooltipClassKey = keyof TooltipClasses;
+export declare function getTooltipUtilityClass(slot: string): string;
+declare const tooltipClasses: TooltipClasses;
+export default tooltipClasses;

package/Typography/typographyClasses.d.ts

@@ -1,50 +1,50 @@
-export interface TypographyClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if `variant="body2"`. */
-    body2: string;
-    /** Styles applied to the root element if `variant="body1"`. */
-    body1: string;
-    /** Styles applied to the root element if `variant="caption"`. */
-    caption: string;
-    /** Styles applied to the root element if `variant="button"`. */
-    button: string;
-    /** Styles applied to the root element if `variant="h1"`. */
-    h1: string;
-    /** Styles applied to the root element if `variant="h2"`. */
-    h2: string;
-    /** Styles applied to the root element if `variant="h3"`. */
-    h3: string;
-    /** Styles applied to the root element if `variant="h4"`. */
-    h4: string;
-    /** Styles applied to the root element if `variant="h5"`. */
-    h5: string;
-    /** Styles applied to the root element if `variant="h6"`. */
-    h6: string;
-    /** Styles applied to the root element if `variant="subtitle1"`. */
-    subtitle1: string;
-    /** Styles applied to the root element if `variant="subtitle2"`. */
-    subtitle2: string;
-    /** Styles applied to the root element if `variant="overline"`. */
-    overline: string;
-    /** Styles applied to the root element if `variant="inherit"`. */
-    inherit: string;
-    /** Styles applied to the root element if `align="left"`. */
-    alignLeft: string;
-    /** Styles applied to the root element if `align="center"`. */
-    alignCenter: string;
-    /** Styles applied to the root element if `align="right"`. */
-    alignRight: string;
-    /** Styles applied to the root element if `align="justify"`. */
-    alignJustify: string;
-    /** Styles applied to the root element if `nowrap={true}`. */
-    noWrap: string;
-    /** Styles applied to the root element if `gutterBottom={true}`. */
-    gutterBottom: string;
-    /** Styles applied to the root element if `paragraph={true}`. */
-    paragraph: string;
-}
-export declare type TypographyClassKey = keyof TypographyClasses;
-export declare function getTypographyUtilityClass(slot: string): string;
-declare const typographyClasses: TypographyClasses;
-export default typographyClasses;
+export interface TypographyClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if `variant="body2"`. */
+    body2: string;
+    /** Styles applied to the root element if `variant="body1"`. */
+    body1: string;
+    /** Styles applied to the root element if `variant="caption"`. */
+    caption: string;
+    /** Styles applied to the root element if `variant="button"`. */
+    button: string;
+    /** Styles applied to the root element if `variant="h1"`. */
+    h1: string;
+    /** Styles applied to the root element if `variant="h2"`. */
+    h2: string;
+    /** Styles applied to the root element if `variant="h3"`. */
+    h3: string;
+    /** Styles applied to the root element if `variant="h4"`. */
+    h4: string;
+    /** Styles applied to the root element if `variant="h5"`. */
+    h5: string;
+    /** Styles applied to the root element if `variant="h6"`. */
+    h6: string;
+    /** Styles applied to the root element if `variant="subtitle1"`. */
+    subtitle1: string;
+    /** Styles applied to the root element if `variant="subtitle2"`. */
+    subtitle2: string;
+    /** Styles applied to the root element if `variant="overline"`. */
+    overline: string;
+    /** Styles applied to the root element if `variant="inherit"`. */
+    inherit: string;
+    /** Styles applied to the root element if `align="left"`. */
+    alignLeft: string;
+    /** Styles applied to the root element if `align="center"`. */
+    alignCenter: string;
+    /** Styles applied to the root element if `align="right"`. */
+    alignRight: string;
+    /** Styles applied to the root element if `align="justify"`. */
+    alignJustify: string;
+    /** Styles applied to the root element if `nowrap={true}`. */
+    noWrap: string;
+    /** Styles applied to the root element if `gutterBottom={true}`. */
+    gutterBottom: string;
+    /** Styles applied to the root element if `paragraph={true}`. */
+    paragraph: string;
+}
+export declare type TypographyClassKey = keyof TypographyClasses;
+export declare function getTypographyUtilityClass(slot: string): string;
+declare const typographyClasses: TypographyClasses;
+export default typographyClasses;

package/Zoom/Zoom.d.ts

@@ -11,7 +11,7 @@ export interface ZoomProps extends TransitionProps {
   /**
    * A single child content element.
    */
-  children?: React.ReactElement<any, any>;
+  children: React.ReactElement<any, any>;
   /**
    * The transition timing function.
    * You may specify a single easing or a object containing enter and exit values.