@mui/material 5.12.3 → 5.13.1

package/Tooltip/Tooltip.js

@@ -1,6 +1,3 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-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", "slotProps", "slots", "title", "TransitionComponent", "TransitionProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -52,52 +49,58 @@ const TooltipPopper = styled(Popper, {
   theme,
   ownerState,
   open
-}) => _extends({
+}) => ({
   zIndex: (theme.vars || theme).zIndex.tooltip,
-  pointerEvents: 'none'
-}, !ownerState.disableInteractive && {
-  pointerEvents: 'auto'
-}, !open && {
-  pointerEvents: 'none'
-}, ownerState.arrow && {
-  [`&[data-popper-placement*="bottom"] .${tooltipClasses.arrow}`]: {
-    top: 0,
-    marginTop: '-0.71em',
-    '&::before': {
-      transformOrigin: '0 100%'
-    }
-  },
-  [`&[data-popper-placement*="top"] .${tooltipClasses.arrow}`]: {
-    bottom: 0,
-    marginBottom: '-0.71em',
-    '&::before': {
-      transformOrigin: '100% 0'
-    }
-  },
-  [`&[data-popper-placement*="right"] .${tooltipClasses.arrow}`]: _extends({}, !ownerState.isRtl ? {
-    left: 0,
-    marginLeft: '-0.71em'
-  } : {
-    right: 0,
-    marginRight: '-0.71em'
-  }, {
-    height: '1em',
-    width: '0.71em',
-    '&::before': {
-      transformOrigin: '100% 100%'
-    }
+  pointerEvents: 'none',
+  // disable jss-rtl plugin
+  ...(!ownerState.disableInteractive && {
+    pointerEvents: 'auto'
+  }),
+  ...(!open && {
+    pointerEvents: 'none'
   }),
-  [`&[data-popper-placement*="left"] .${tooltipClasses.arrow}`]: _extends({}, !ownerState.isRtl ? {
-    right: 0,
-    marginRight: '-0.71em'
-  } : {
-    left: 0,
-    marginLeft: '-0.71em'
-  }, {
-    height: '1em',
-    width: '0.71em',
-    '&::before': {
-      transformOrigin: '0 0'
+  ...(ownerState.arrow && {
+    [`&[data-popper-placement*="bottom"] .${tooltipClasses.arrow}`]: {
+      top: 0,
+      marginTop: '-0.71em',
+      '&::before': {
+        transformOrigin: '0 100%'
+      }
+    },
+    [`&[data-popper-placement*="top"] .${tooltipClasses.arrow}`]: {
+      bottom: 0,
+      marginBottom: '-0.71em',
+      '&::before': {
+        transformOrigin: '100% 0'
+      }
+    },
+    [`&[data-popper-placement*="right"] .${tooltipClasses.arrow}`]: {
+      ...(!ownerState.isRtl ? {
+        left: 0,
+        marginLeft: '-0.71em'
+      } : {
+        right: 0,
+        marginRight: '-0.71em'
+      }),
+      height: '1em',
+      width: '0.71em',
+      '&::before': {
+        transformOrigin: '100% 100%'
+      }
+    },
+    [`&[data-popper-placement*="left"] .${tooltipClasses.arrow}`]: {
+      ...(!ownerState.isRtl ? {
+        right: 0,
+        marginRight: '-0.71em'
+      } : {
+        left: 0,
+        marginLeft: '-0.71em'
+      }),
+      height: '1em',
+      width: '0.71em',
+      '&::before': {
+        transformOrigin: '0 0'
+      }
     }
   })
 }));
@@ -113,7 +116,7 @@ const TooltipTooltip = styled('div', {
 })(({
   theme,
   ownerState
-}) => _extends({
+}) => ({
   backgroundColor: theme.vars ? theme.vars.palette.Tooltip.bg : alpha(theme.palette.grey[700], 0.92),
   borderRadius: (theme.vars || theme).shape.borderRadius,
   color: (theme.vars || theme).palette.common.white,
@@ -123,50 +126,59 @@ const TooltipTooltip = styled('div', {
   maxWidth: 300,
   margin: 2,
   wordWrap: 'break-word',
-  fontWeight: theme.typography.fontWeightMedium
-}, ownerState.arrow && {
-  position: 'relative',
-  margin: 0
-}, ownerState.touch && {
-  padding: '8px 16px',
-  fontSize: theme.typography.pxToRem(14),
-  lineHeight: `${round(16 / 14)}em`,
-  fontWeight: theme.typography.fontWeightRegular
-}, {
-  [`.${tooltipClasses.popper}[data-popper-placement*="left"] &`]: _extends({
-    transformOrigin: 'right center'
-  }, !ownerState.isRtl ? _extends({
-    marginRight: '14px'
-  }, ownerState.touch && {
-    marginRight: '24px'
-  }) : _extends({
-    marginLeft: '14px'
-  }, ownerState.touch && {
-    marginLeft: '24px'
-  })),
-  [`.${tooltipClasses.popper}[data-popper-placement*="right"] &`]: _extends({
-    transformOrigin: 'left center'
-  }, !ownerState.isRtl ? _extends({
-    marginLeft: '14px'
-  }, ownerState.touch && {
-    marginLeft: '24px'
-  }) : _extends({
-    marginRight: '14px'
-  }, ownerState.touch && {
-    marginRight: '24px'
-  })),
-  [`.${tooltipClasses.popper}[data-popper-placement*="top"] &`]: _extends({
-    transformOrigin: 'center bottom',
-    marginBottom: '14px'
-  }, ownerState.touch && {
-    marginBottom: '24px'
+  fontWeight: theme.typography.fontWeightMedium,
+  ...(ownerState.arrow && {
+    position: 'relative',
+    margin: 0
   }),
-  [`.${tooltipClasses.popper}[data-popper-placement*="bottom"] &`]: _extends({
+  ...(ownerState.touch && {
+    padding: '8px 16px',
+    fontSize: theme.typography.pxToRem(14),
+    lineHeight: `${round(16 / 14)}em`,
+    fontWeight: theme.typography.fontWeightRegular
+  }),
+  [`.${tooltipClasses.popper}[data-popper-placement*="left"] &`]: {
+    transformOrigin: 'right center',
+    ...(!ownerState.isRtl ? {
+      marginRight: '14px',
+      ...(ownerState.touch && {
+        marginRight: '24px'
+      })
+    } : {
+      marginLeft: '14px',
+      ...(ownerState.touch && {
+        marginLeft: '24px'
+      })
+    })
+  },
+  [`.${tooltipClasses.popper}[data-popper-placement*="right"] &`]: {
+    transformOrigin: 'left center',
+    ...(!ownerState.isRtl ? {
+      marginLeft: '14px',
+      ...(ownerState.touch && {
+        marginLeft: '24px'
+      })
+    } : {
+      marginRight: '14px',
+      ...(ownerState.touch && {
+        marginRight: '24px'
+      })
+    })
+  },
+  [`.${tooltipClasses.popper}[data-popper-placement*="top"] &`]: {
+    transformOrigin: 'center bottom',
+    marginBottom: '14px',
+    ...(ownerState.touch && {
+      marginBottom: '24px'
+    })
+  },
+  [`.${tooltipClasses.popper}[data-popper-placement*="bottom"] &`]: {
     transformOrigin: 'center top',
-    marginTop: '14px'
-  }, ownerState.touch && {
-    marginTop: '24px'
-  })
+    marginTop: '14px',
+    ...(ownerState.touch && {
+      marginTop: '24px'
+    })
+  }
 }));
 const TooltipArrow = styled('span', {
   name: 'MuiTooltip',
@@ -218,35 +230,36 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
     name: 'MuiTooltip'
   });
   const {
-      arrow = false,
-      children,
-      components = {},
-      componentsProps = {},
-      describeChild = false,
-      disableFocusListener = false,
-      disableHoverListener = false,
-      disableInteractive: disableInteractiveProp = false,
-      disableTouchListener = false,
-      enterDelay = 100,
-      enterNextDelay = 0,
-      enterTouchDelay = 700,
-      followCursor = false,
-      id: idProp,
-      leaveDelay = 0,
-      leaveTouchDelay = 1500,
-      onClose,
-      onOpen,
-      open: openProp,
-      placement = 'bottom',
-      PopperComponent: PopperComponentProp,
-      PopperProps = {},
-      slotProps = {},
-      slots = {},
-      title,
-      TransitionComponent: TransitionComponentProp = Grow,
-      TransitionProps
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    arrow = false,
+    children,
+    classes: classesProp,
+    components = {},
+    componentsProps = {},
+    describeChild = false,
+    disableFocusListener = false,
+    disableHoverListener = false,
+    disableInteractive: disableInteractiveProp = false,
+    disableTouchListener = false,
+    enterDelay = 100,
+    enterNextDelay = 0,
+    enterTouchDelay = 700,
+    followCursor = false,
+    id: idProp,
+    leaveDelay = 0,
+    leaveTouchDelay = 1500,
+    onClose,
+    onOpen,
+    open: openProp,
+    placement = 'bottom',
+    PopperComponent: PopperComponentProp,
+    PopperProps = {},
+    slotProps = {},
+    slots = {},
+    title,
+    TransitionComponent: TransitionComponentProp = Grow,
+    TransitionProps,
+    ...other
+  } = props;
   const theme = useTheme();
   const isRtl = theme.direction === 'rtl';
   const [childNode, setChildNode] = React.useState();
@@ -461,13 +474,17 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
     nameOrDescProps['aria-label'] = titleIsString ? title : null;
     nameOrDescProps['aria-labelledby'] = open && !titleIsString ? id : null;
   }
-  const childrenProps = _extends({}, nameOrDescProps, other, children.props, {
+  const childrenProps = {
+    ...nameOrDescProps,
+    ...other,
+    ...children.props,
     className: clsx(other.className, children.props.className),
     onTouchStart: detectTouchStart,
-    ref: handleRef
-  }, followCursor ? {
-    onMouseMove: handleMouseMove
-  } : {});
+    ref: handleRef,
+    ...(followCursor ? {
+      onMouseMove: handleMouseMove
+    } : {})
+  };
   if (process.env.NODE_ENV !== 'production') {
     childrenProps['data-mui-internal-clone-element'] = true;
 
@@ -517,35 +534,44 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
     if ((_PopperProps$popperOp = PopperProps.popperOptions) != null && _PopperProps$popperOp.modifiers) {
       tooltipModifiers = tooltipModifiers.concat(PopperProps.popperOptions.modifiers);
     }
-    return _extends({}, PopperProps.popperOptions, {
+    return {
+      ...PopperProps.popperOptions,
       modifiers: tooltipModifiers
-    });
+    };
   }, [arrowRef, PopperProps]);
-  const ownerState = _extends({}, props, {
+  const ownerState = {
+    ...props,
     isRtl,
     arrow,
     disableInteractive,
     placement,
     PopperComponentProp,
     touch: ignoreNonTouchEvents.current
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   const PopperComponent = (_ref = (_slots$popper = slots.popper) != null ? _slots$popper : components.Popper) != null ? _ref : TooltipPopper;
   const TransitionComponent = (_ref2 = (_ref3 = (_slots$transition = slots.transition) != null ? _slots$transition : components.Transition) != null ? _ref3 : TransitionComponentProp) != null ? _ref2 : Grow;
   const TooltipComponent = (_ref4 = (_slots$tooltip = slots.tooltip) != null ? _slots$tooltip : components.Tooltip) != null ? _ref4 : TooltipTooltip;
   const ArrowComponent = (_ref5 = (_slots$arrow = slots.arrow) != null ? _slots$arrow : components.Arrow) != null ? _ref5 : TooltipArrow;
-  const popperProps = appendOwnerState(PopperComponent, _extends({}, PopperProps, (_slotProps$popper = slotProps.popper) != null ? _slotProps$popper : componentsProps.popper, {
+  const popperProps = appendOwnerState(PopperComponent, {
+    ...PopperProps,
+    ...((_slotProps$popper = slotProps.popper) != null ? _slotProps$popper : componentsProps.popper),
     className: clsx(classes.popper, PopperProps == null ? void 0 : PopperProps.className, (_ref6 = (_slotProps$popper2 = slotProps.popper) != null ? _slotProps$popper2 : componentsProps.popper) == null ? void 0 : _ref6.className)
-  }), ownerState);
-  const transitionProps = appendOwnerState(TransitionComponent, _extends({}, TransitionProps, (_slotProps$transition = slotProps.transition) != null ? _slotProps$transition : componentsProps.transition), ownerState);
-  const tooltipProps = appendOwnerState(TooltipComponent, _extends({}, (_slotProps$tooltip = slotProps.tooltip) != null ? _slotProps$tooltip : componentsProps.tooltip, {
+  }, ownerState);
+  const transitionProps = appendOwnerState(TransitionComponent, {
+    ...TransitionProps,
+    ...((_slotProps$transition = slotProps.transition) != null ? _slotProps$transition : componentsProps.transition)
+  }, ownerState);
+  const tooltipProps = appendOwnerState(TooltipComponent, {
+    ...((_slotProps$tooltip = slotProps.tooltip) != null ? _slotProps$tooltip : componentsProps.tooltip),
     className: clsx(classes.tooltip, (_ref7 = (_slotProps$tooltip2 = slotProps.tooltip) != null ? _slotProps$tooltip2 : componentsProps.tooltip) == null ? void 0 : _ref7.className)
-  }), ownerState);
-  const tooltipArrowProps = appendOwnerState(ArrowComponent, _extends({}, (_slotProps$arrow = slotProps.arrow) != null ? _slotProps$arrow : componentsProps.arrow, {
+  }, ownerState);
+  const tooltipArrowProps = appendOwnerState(ArrowComponent, {
+    ...((_slotProps$arrow = slotProps.arrow) != null ? _slotProps$arrow : componentsProps.arrow),
     className: clsx(classes.arrow, (_ref8 = (_slotProps$arrow2 = slotProps.arrow) != null ? _slotProps$arrow2 : componentsProps.arrow) == null ? void 0 : _ref8.className)
-  }), ownerState);
+  }, ownerState);
   return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [/*#__PURE__*/React.cloneElement(children, childrenProps), /*#__PURE__*/_jsx(PopperComponent, _extends({
+    children: [/*#__PURE__*/React.cloneElement(children, childrenProps), /*#__PURE__*/_jsx(PopperComponent, {
       as: PopperComponentProp != null ? PopperComponentProp : Popper,
       placement: placement,
       anchorEl: followCursor ? {
@@ -561,21 +587,25 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
       popperRef: popperRef,
       open: childNode ? open : false,
       id: id,
-      transition: true
-    }, interactiveWrapperListeners, popperProps, {
+      transition: true,
+      ...interactiveWrapperListeners,
+      ...popperProps,
       popperOptions: popperOptions,
       children: ({
         TransitionProps: TransitionPropsInner
-      }) => /*#__PURE__*/_jsx(TransitionComponent, _extends({
-        timeout: theme.transitions.duration.shorter
-      }, TransitionPropsInner, transitionProps, {
-        children: /*#__PURE__*/_jsxs(TooltipComponent, _extends({}, tooltipProps, {
-          children: [title, arrow ? /*#__PURE__*/_jsx(ArrowComponent, _extends({}, tooltipArrowProps, {
+      }) => /*#__PURE__*/_jsx(TransitionComponent, {
+        timeout: theme.transitions.duration.shorter,
+        ...TransitionPropsInner,
+        ...transitionProps,
+        children: /*#__PURE__*/_jsxs(TooltipComponent, {
+          ...tooltipProps,
+          children: [title, arrow ? /*#__PURE__*/_jsx(ArrowComponent, {
+            ...tooltipArrowProps,
             ref: setArrowRef
-          })) : null]
-        }))
-      }))
-    }))]
+          }) : null]
+        })
+      })
+    })]
   });
 });
 process.env.NODE_ENV !== "production" ? Tooltip.propTypes /* remove-proptypes */ = {

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 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 type TooltipClassKey = keyof TooltipClasses;
+export declare function getTooltipUtilityClass(slot: string): string;
+declare const tooltipClasses: TooltipClasses;
+export default tooltipClasses;

package/Typography/Typography.js

@@ -1,6 +1,3 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["align", "className", "component", "gutterBottom", "noWrap", "paragraph", "variant", "variantMapping"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -37,18 +34,23 @@ export const TypographyRoot = styled('span', {
 })(({
   theme,
   ownerState
-}) => _extends({
-  margin: 0
-}, ownerState.variant && theme.typography[ownerState.variant], ownerState.align !== 'inherit' && {
-  textAlign: ownerState.align
-}, ownerState.noWrap && {
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap'
-}, ownerState.gutterBottom && {
-  marginBottom: '0.35em'
-}, ownerState.paragraph && {
-  marginBottom: 16
+}) => ({
+  margin: 0,
+  ...(ownerState.variant && theme.typography[ownerState.variant]),
+  ...(ownerState.align !== 'inherit' && {
+    textAlign: ownerState.align
+  }),
+  ...(ownerState.noWrap && {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap'
+  }),
+  ...(ownerState.gutterBottom && {
+    marginBottom: '0.35em'
+  }),
+  ...(ownerState.paragraph && {
+    marginBottom: 16
+  })
 }));
 const defaultVariantMapping = {
   h1: 'h1',
@@ -81,21 +83,23 @@ const Typography = /*#__PURE__*/React.forwardRef(function Typography(inProps, re
     name: 'MuiTypography'
   });
   const color = transformDeprecatedColors(themeProps.color);
-  const props = extendSxProp(_extends({}, themeProps, {
+  const props = extendSxProp({
+    ...themeProps,
     color
-  }));
+  });
   const {
-      align = 'inherit',
-      className,
-      component,
-      gutterBottom = false,
-      noWrap = false,
-      paragraph = false,
-      variant = 'body1',
-      variantMapping = defaultVariantMapping
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    align = 'inherit',
+    className,
+    component,
+    gutterBottom = false,
+    noWrap = false,
+    paragraph = false,
+    variant = 'body1',
+    variantMapping = defaultVariantMapping,
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     align,
     color,
     className,
@@ -105,15 +109,16 @@ const Typography = /*#__PURE__*/React.forwardRef(function Typography(inProps, re
     paragraph,
     variant,
     variantMapping
-  });
+  };
   const Component = component || (paragraph ? 'p' : variantMapping[variant] || defaultVariantMapping[variant]) || 'span';
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(TypographyRoot, _extends({
+  return /*#__PURE__*/_jsx(TypographyRoot, {
     as: Component,
     ref: ref,
     ownerState: ownerState,
-    className: clsx(classes.root, className)
-  }, other));
+    className: clsx(classes.root, className),
+    ...other
+  });
 });
 process.env.NODE_ENV !== "production" ? Typography.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------

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 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 type TypographyClassKey = keyof TypographyClasses;
+export declare function getTypographyUtilityClass(slot: string): string;
+declare const typographyClasses: TypographyClasses;
+export default typographyClasses;