@mui/material 5.4.2 → 5.4.3

package/Drawer/Drawer.js

@@ -11,7 +11,6 @@ import Modal from '../Modal';
 import Slide from '../Slide';
 import Paper from '../Paper';
 import capitalize from '../utils/capitalize';
-import { duration } from '../styles/createTransitions';
 import useTheme from '../styles/useTheme';
 import useThemeProps from '../styles/useThemeProps';
 import styled, { rootShouldForwardProp } from '../styles/styled';
@@ -124,10 +123,6 @@ export function isHorizontal(anchor) {
 export function getAnchor(theme, anchor) {
   return theme.direction === 'rtl' && isHorizontal(anchor) ? oppositeDirection[anchor] : anchor;
 }
-const defaultTransitionDuration = {
-  enter: duration.enteringScreen,
-  exit: duration.leavingScreen
-};
 /**
  * The props of the [Modal](/api/modal/) component are available
  * when `variant="temporary"` is set.
@@ -138,6 +133,11 @@ const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
     props: inProps,
     name: 'MuiDrawer'
   });
+  const theme = useTheme();
+  const defaultTransitionDuration = {
+    enter: theme.transitions.duration.enteringScreen,
+    exit: theme.transitions.duration.leavingScreen
+  };
 
   const {
     anchor: anchorProp = 'left',
@@ -159,12 +159,11 @@ const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
     variant = 'temporary'
   } = props,
         ModalProps = _objectWithoutPropertiesLoose(props.ModalProps, _excluded),
-        other = _objectWithoutPropertiesLoose(props, _excluded2);
-
-  const theme = useTheme(); // Let's assume that the Drawer will always be rendered on user space.
+        other = _objectWithoutPropertiesLoose(props, _excluded2); // Let's assume that the Drawer will always be rendered on user space.
   // We use this state is order to skip the appear transition during the
   // initial mount of the component.
 
+
   const mounted = React.useRef(false);
   React.useEffect(() => {
     mounted.current = true;
@@ -318,7 +317,10 @@ process.env.NODE_ENV !== "production" ? Drawer.propTypes
   /**
    * The duration for the transition, in milliseconds.
    * You may specify a single timeout for all transitions, or individually with an object.
-   * @default { enter: duration.enteringScreen, exit: duration.leavingScreen }
+   * @default {
+   *   enter: theme.transitions.duration.enteringScreen,
+   *   exit: theme.transitions.duration.leavingScreen,
+   * }
    */
   transitionDuration: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
     appear: PropTypes.number,

package/Drawer/drawerClasses.d.ts

@@ -1,30 +1,30 @@
-export interface DrawerClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if `variant="permanent or persistent"`. */
-    docked: string;
-    /** Styles applied to the Paper component. */
-    paper: string;
-    /** Styles applied to the Paper component if `anchor="left"`. */
-    paperAnchorLeft: string;
-    /** Styles applied to the Paper component if `anchor="right"`. */
-    paperAnchorRight: string;
-    /** Styles applied to the Paper component if `anchor="top"`. */
-    paperAnchorTop: string;
-    /** Styles applied to the Paper component if `anchor="bottom"`. */
-    paperAnchorBottom: string;
-    /** Styles applied to the Paper component if `anchor="left"` and `variant` is not "temporary". */
-    paperAnchorDockedLeft: string;
-    /** Styles applied to the Paper component if `anchor="top"` and `variant` is not "temporary". */
-    paperAnchorDockedTop: string;
-    /** Styles applied to the Paper component if `anchor="right"` and `variant` is not "temporary". */
-    paperAnchorDockedRight: string;
-    /** Styles applied to the Paper component if `anchor="bottom"` and `variant` is not "temporary". */
-    paperAnchorDockedBottom: string;
-    /** Styles applied to the Modal component. */
-    modal: string;
-}
-export declare type DrawerClassKey = keyof DrawerClasses;
-export declare function getDrawerUtilityClass(slot: string): string;
-declare const drawerClasses: DrawerClasses;
-export default drawerClasses;
+export interface DrawerClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if `variant="permanent or persistent"`. */
+    docked: string;
+    /** Styles applied to the Paper component. */
+    paper: string;
+    /** Styles applied to the Paper component if `anchor="left"`. */
+    paperAnchorLeft: string;
+    /** Styles applied to the Paper component if `anchor="right"`. */
+    paperAnchorRight: string;
+    /** Styles applied to the Paper component if `anchor="top"`. */
+    paperAnchorTop: string;
+    /** Styles applied to the Paper component if `anchor="bottom"`. */
+    paperAnchorBottom: string;
+    /** Styles applied to the Paper component if `anchor="left"` and `variant` is not "temporary". */
+    paperAnchorDockedLeft: string;
+    /** Styles applied to the Paper component if `anchor="top"` and `variant` is not "temporary". */
+    paperAnchorDockedTop: string;
+    /** Styles applied to the Paper component if `anchor="right"` and `variant` is not "temporary". */
+    paperAnchorDockedRight: string;
+    /** Styles applied to the Paper component if `anchor="bottom"` and `variant` is not "temporary". */
+    paperAnchorDockedBottom: string;
+    /** Styles applied to the Modal component. */
+    modal: string;
+}
+export declare type DrawerClassKey = keyof DrawerClasses;
+export declare function getDrawerUtilityClass(slot: string): string;
+declare const drawerClasses: DrawerClasses;
+export default drawerClasses;

package/Fab/fabClasses.d.ts

@@ -1,26 +1,26 @@
-export interface FabClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if `color="primary"`. */
-    primary: string;
-    /** Styles applied to the root element if `color="secondary"`. */
-    secondary: string;
-    /** Styles applied to the root element if `variant="extended"`. */
-    extended: string;
-    /** Styles applied to the root element if `variant="circular"`. */
-    circular: string;
-    /** State class applied to the ButtonBase root element if the button is keyboard focused. */
-    focusVisible: string;
-    /** State class applied to the root element if `disabled={true}`. */
-    disabled: string;
-    /** Styles applied to the root element if `color="inherit"`. */
-    colorInherit: string;
-    /** Styles applied to the root element if `size="small"``. */
-    sizeSmall: string;
-    /** Styles applied to the root element if `size="medium"``. */
-    sizeMedium: string;
-}
-export declare type FabClassKey = keyof FabClasses;
-export declare function getFabUtilityClass(slot: string): string;
-declare const fabClasses: FabClasses;
-export default fabClasses;
+export interface FabClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if `color="primary"`. */
+    primary: string;
+    /** Styles applied to the root element if `color="secondary"`. */
+    secondary: string;
+    /** Styles applied to the root element if `variant="extended"`. */
+    extended: string;
+    /** Styles applied to the root element if `variant="circular"`. */
+    circular: string;
+    /** State class applied to the ButtonBase root element if the button is keyboard focused. */
+    focusVisible: string;
+    /** State class applied to the root element if `disabled={true}`. */
+    disabled: string;
+    /** Styles applied to the root element if `color="inherit"`. */
+    colorInherit: string;
+    /** Styles applied to the root element if `size="small"``. */
+    sizeSmall: string;
+    /** Styles applied to the root element if `size="medium"``. */
+    sizeMedium: string;
+}
+export declare type FabClassKey = keyof FabClasses;
+export declare function getFabUtilityClass(slot: string): string;
+declare const fabClasses: FabClasses;
+export default fabClasses;

package/Fade/Fade.d.ts

@@ -26,8 +26,8 @@ export interface FadeProps extends Omit<TransitionProps, 'children'> {
    * The duration for the transition, in milliseconds.
    * You may specify a single timeout for all transitions, or individually with an object.
    * @default {
-   *   enter: duration.enteringScreen,
-   *   exit: duration.leavingScreen,
+   *   enter: theme.transitions.duration.enteringScreen,
+   *   exit: theme.transitions.duration.leavingScreen,
    * }
    */
   timeout?: TransitionProps['timeout'];

package/Fade/Fade.js

@@ -5,7 +5,6 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { Transition } from 'react-transition-group';
 import { elementAcceptingRef } from '@mui/utils';
-import { duration } from '../styles/createTransitions';
 import useTheme from '../styles/useTheme';
 import { reflow, getTransitionProps } from '../transitions/utils';
 import useForkRef from '../utils/useForkRef';
@@ -18,16 +17,18 @@ const styles = {
     opacity: 1
   }
 };
-const defaultTimeout = {
-  enter: duration.enteringScreen,
-  exit: duration.leavingScreen
-};
 /**
  * The Fade transition is used by the [Modal](/components/modal/) component.
  * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
  */
 
 const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
+  const theme = useTheme();
+  const defaultTimeout = {
+    enter: theme.transitions.duration.enteringScreen,
+    exit: theme.transitions.duration.leavingScreen
+  };
+
   const {
     addEndListener,
     appear = true,
@@ -47,7 +48,6 @@ const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
-  const theme = useTheme();
   const enableStrictModeCompat = true;
   const nodeRef = React.useRef(null);
   const foreignRef = useForkRef(children.ref, ref);
@@ -213,8 +213,8 @@ process.env.NODE_ENV !== "production" ? Fade.propTypes
    * The duration for the transition, in milliseconds.
    * You may specify a single timeout for all transitions, or individually with an object.
    * @default {
-   *   enter: duration.enteringScreen,
-   *   exit: duration.leavingScreen,
+   *   enter: theme.transitions.duration.enteringScreen,
+   *   exit: theme.transitions.duration.leavingScreen,
    * }
    */
   timeout: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({

package/FilledInput/filledInputClasses.d.ts

@@ -1,40 +1,40 @@
-export interface FilledInputClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if color secondary. */
-    colorSecondary: string;
-    /** Styles applied to the root element unless `disableUnderline={true}`. */
-    underline: string;
-    /** State class applied to the root element if the component is focused. */
-    focused: string;
-    /** State class applied to the root element if `disabled={true}`. */
-    disabled: string;
-    /** Styles applied to the root element if `startAdornment` is provided. */
-    adornedStart: string;
-    /** Styles applied to the root element if `endAdornment` is provided. */
-    adornedEnd: string;
-    /** State class applied to the root element if `error={true}`. */
-    error: string;
-    /** Styles applied to the input element if `size="small"`. */
-    sizeSmall: string;
-    /** Styles applied to the root element if `multiline={true}`. */
-    multiline: string;
-    /** Styles applied to the root element if `hiddenLabel={true}`. */
-    hiddenLabel: string;
-    /** Styles applied to the input element. */
-    input: string;
-    /** Styles applied to the input element if `size="small"`. */
-    inputSizeSmall: string;
-    /** Styles applied to the `input` if in `<FormControl hiddenLabel />`. */
-    inputHiddenLabel: string;
-    /** Styles applied to the input element if `multiline={true}`. */
-    inputMultiline: string;
-    /** Styles applied to the input element if `startAdornment` is provided. */
-    inputAdornedStart: string;
-    /** Styles applied to the input element if `endAdornment` is provided. */
-    inputAdornedEnd: string;
-}
-export declare type FilledInputClassKey = keyof FilledInputClasses;
-export declare function getFilledInputUtilityClass(slot: string): string;
-declare const filledInputClasses: FilledInputClasses;
-export default filledInputClasses;
+export interface FilledInputClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if color secondary. */
+    colorSecondary: string;
+    /** Styles applied to the root element unless `disableUnderline={true}`. */
+    underline: string;
+    /** State class applied to the root element if the component is focused. */
+    focused: string;
+    /** State class applied to the root element if `disabled={true}`. */
+    disabled: string;
+    /** Styles applied to the root element if `startAdornment` is provided. */
+    adornedStart: string;
+    /** Styles applied to the root element if `endAdornment` is provided. */
+    adornedEnd: string;
+    /** State class applied to the root element if `error={true}`. */
+    error: string;
+    /** Styles applied to the input element if `size="small"`. */
+    sizeSmall: string;
+    /** Styles applied to the root element if `multiline={true}`. */
+    multiline: string;
+    /** Styles applied to the root element if `hiddenLabel={true}`. */
+    hiddenLabel: string;
+    /** Styles applied to the input element. */
+    input: string;
+    /** Styles applied to the input element if `size="small"`. */
+    inputSizeSmall: string;
+    /** Styles applied to the `input` if in `<FormControl hiddenLabel />`. */
+    inputHiddenLabel: string;
+    /** Styles applied to the input element if `multiline={true}`. */
+    inputMultiline: string;
+    /** Styles applied to the input element if `startAdornment` is provided. */
+    inputAdornedStart: string;
+    /** Styles applied to the input element if `endAdornment` is provided. */
+    inputAdornedEnd: string;
+}
+export declare type FilledInputClassKey = keyof FilledInputClasses;
+export declare function getFilledInputUtilityClass(slot: string): string;
+declare const filledInputClasses: FilledInputClasses;
+export default filledInputClasses;

package/FormControl/formControlClasses.d.ts

@@ -1,14 +1,14 @@
-export interface FormControlClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if `margin="normal"`. */
-    marginNormal: string;
-    /** Styles applied to the root element if `margin="dense"`. */
-    marginDense: string;
-    /** Styles applied to the root element if `fullWidth={true}`. */
-    fullWidth: string;
-}
-export declare type FormControlClassKey = keyof FormControlClasses;
-export declare function getFormControlUtilityClasses(slot: string): string;
-declare const formControlClasses: FormControlClasses;
-export default formControlClasses;
+export interface FormControlClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if `margin="normal"`. */
+    marginNormal: string;
+    /** Styles applied to the root element if `margin="dense"`. */
+    marginDense: string;
+    /** Styles applied to the root element if `fullWidth={true}`. */
+    fullWidth: string;
+}
+export declare type FormControlClassKey = keyof FormControlClasses;
+export declare function getFormControlUtilityClasses(slot: string): string;
+declare const formControlClasses: FormControlClasses;
+export default formControlClasses;

package/FormControlLabel/formControlLabelClasses.d.ts

@@ -1,20 +1,20 @@
-export interface FormControlLabelClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if `labelPlacement="start"`. */
-    labelPlacementStart: string;
-    /** Styles applied to the root element if `labelPlacement="top"`. */
-    labelPlacementTop: string;
-    /** Styles applied to the root element if `labelPlacement="bottom"`. */
-    labelPlacementBottom: string;
-    /** State class applied to the root element if `disabled={true}`. */
-    disabled: string;
-    /** Styles applied to the label's Typography component. */
-    label: string;
-    /** State class applied to the root element if `error={true}`. */
-    error: string;
-}
-export declare type FormControlLabelClassKey = keyof FormControlLabelClasses;
-export declare function getFormControlLabelUtilityClasses(slot: string): string;
-declare const formControlLabelClasses: FormControlLabelClasses;
-export default formControlLabelClasses;
+export interface FormControlLabelClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if `labelPlacement="start"`. */
+    labelPlacementStart: string;
+    /** Styles applied to the root element if `labelPlacement="top"`. */
+    labelPlacementTop: string;
+    /** Styles applied to the root element if `labelPlacement="bottom"`. */
+    labelPlacementBottom: string;
+    /** State class applied to the root element if `disabled={true}`. */
+    disabled: string;
+    /** Styles applied to the label's Typography component. */
+    label: string;
+    /** State class applied to the root element if `error={true}`. */
+    error: string;
+}
+export declare type FormControlLabelClassKey = keyof FormControlLabelClasses;
+export declare function getFormControlLabelUtilityClasses(slot: string): string;
+declare const formControlLabelClasses: FormControlLabelClasses;
+export default formControlLabelClasses;

package/FormGroup/formGroupClasses.d.ts

@@ -1,12 +1,12 @@
-export interface FormGroupClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if `row={true}`. */
-    row: string;
-    /** State class applied to the root element if `error={true}`. */
-    error: string;
-}
-export declare type FormGroupClassKey = keyof FormGroupClasses;
-export declare function getFormGroupUtilityClass(slot: string): string;
-declare const formGroupClasses: FormGroupClasses;
-export default formGroupClasses;
+export interface FormGroupClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if `row={true}`. */
+    row: string;
+    /** State class applied to the root element if `error={true}`. */
+    error: string;
+}
+export declare type FormGroupClassKey = keyof FormGroupClasses;
+export declare function getFormGroupUtilityClass(slot: string): string;
+declare const formGroupClasses: FormGroupClasses;
+export default formGroupClasses;

package/FormHelperText/formHelperTextClasses.d.ts

@@ -1,22 +1,22 @@
-export interface FormHelperTextClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** State class applied to the root element if `error={true}`. */
-    error: string;
-    /** State class applied to the root element if `disabled={true}`. */
-    disabled: string;
-    /** Styles applied to the root element if `size="small"`. */
-    sizeSmall: string;
-    /** Styles applied to the root element if `variant="filled"` or `variant="outlined"`. */
-    contained: string;
-    /** State class applied to the root element if `focused={true}`. */
-    focused: string;
-    /** State class applied to the root element if `filled={true}`. */
-    filled: string;
-    /** State class applied to the root element if `required={true}`. */
-    required: string;
-}
-export declare type FormHelperTextClassKey = keyof FormHelperTextClasses;
-export declare function getFormHelperTextUtilityClasses(slot: string): string;
-declare const formHelperTextClasses: FormHelperTextClasses;
-export default formHelperTextClasses;
+export interface FormHelperTextClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** State class applied to the root element if `error={true}`. */
+    error: string;
+    /** State class applied to the root element if `disabled={true}`. */
+    disabled: string;
+    /** Styles applied to the root element if `size="small"`. */
+    sizeSmall: string;
+    /** Styles applied to the root element if `variant="filled"` or `variant="outlined"`. */
+    contained: string;
+    /** State class applied to the root element if `focused={true}`. */
+    focused: string;
+    /** State class applied to the root element if `filled={true}`. */
+    filled: string;
+    /** State class applied to the root element if `required={true}`. */
+    required: string;
+}
+export declare type FormHelperTextClassKey = keyof FormHelperTextClasses;
+export declare function getFormHelperTextUtilityClasses(slot: string): string;
+declare const formHelperTextClasses: FormHelperTextClasses;
+export default formHelperTextClasses;

package/FormLabel/formLabelClasses.d.ts

@@ -1,22 +1,22 @@
-export interface FormLabelClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if the color is secondary. */
-    colorSecondary: string;
-    /** State class applied to the root element if `focused={true}`. */
-    focused: string;
-    /** State class applied to the root element if `disabled={true}`. */
-    disabled: string;
-    /** State class applied to the root element if `error={true}`. */
-    error: string;
-    /** State class applied to the root element if `filled={true}`. */
-    filled: string;
-    /** State class applied to the root element if `required={true}`. */
-    required: string;
-    /** Styles applied to the asterisk element. */
-    asterisk: string;
-}
-export declare type FormLabelClassKey = keyof FormLabelClasses;
-export declare function getFormLabelUtilityClasses(slot: string): string;
-declare const formLabelClasses: FormLabelClasses;
-export default formLabelClasses;
+export interface FormLabelClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if the color is secondary. */
+    colorSecondary: string;
+    /** State class applied to the root element if `focused={true}`. */
+    focused: string;
+    /** State class applied to the root element if `disabled={true}`. */
+    disabled: string;
+    /** State class applied to the root element if `error={true}`. */
+    error: string;
+    /** State class applied to the root element if `filled={true}`. */
+    filled: string;
+    /** State class applied to the root element if `required={true}`. */
+    required: string;
+    /** Styles applied to the asterisk element. */
+    asterisk: string;
+}
+export declare type FormLabelClassKey = keyof FormLabelClasses;
+export declare function getFormLabelUtilityClasses(slot: string): string;
+declare const formLabelClasses: FormLabelClasses;
+export default formLabelClasses;

package/Grid/gridClasses.d.ts

@@ -1,48 +1,48 @@
-export interface GridClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if `container={true}`. */
-    container: string;
-    /** Styles applied to the root element if `item={true}`. */
-    item: string;
-    /** Styles applied to the root element if `zeroMinWidth={true}`. */
-    zeroMinWidth: string;
-    /** Styles applied to the root element if `direction="column"`. */
-    'direction-xs-column': string;
-    /** Styles applied to the root element if `direction="column-reverse"`. */
-    'direction-xs-column-reverse': string;
-    /** Styles applied to the root element if `direction="row-reverse"`. */
-    'direction-xs-row-reverse': string;
-    /** Styles applied to the root element if `wrap="nowrap"`. */
-    'wrap-xs-nowrap': string;
-    /** Styles applied to the root element if `wrap="reverse"`. */
-    'wrap-xs-wrap-reverse': string;
-    'spacing-xs-1': string;
-    'spacing-xs-2': string;
-    'spacing-xs-3': string;
-    'spacing-xs-4': string;
-    'spacing-xs-5': string;
-    'spacing-xs-6': string;
-    'spacing-xs-7': string;
-    'spacing-xs-8': string;
-    'spacing-xs-9': string;
-    'spacing-xs-10': string;
-    'grid-xs-auto': string;
-    'grid-xs-true': string;
-    'grid-xs-1': string;
-    'grid-xs-2': string;
-    'grid-xs-3': string;
-    'grid-xs-4': string;
-    'grid-xs-5': string;
-    'grid-xs-6': string;
-    'grid-xs-7': string;
-    'grid-xs-8': string;
-    'grid-xs-9': string;
-    'grid-xs-10': string;
-    'grid-xs-11': string;
-    'grid-xs-12': string;
-}
-export declare type GridClassKey = keyof GridClasses;
-export declare function getGridUtilityClass(slot: string): string;
-declare const gridClasses: GridClasses;
-export default gridClasses;
+export interface GridClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if `container={true}`. */
+    container: string;
+    /** Styles applied to the root element if `item={true}`. */
+    item: string;
+    /** Styles applied to the root element if `zeroMinWidth={true}`. */
+    zeroMinWidth: string;
+    /** Styles applied to the root element if `direction="column"`. */
+    'direction-xs-column': string;
+    /** Styles applied to the root element if `direction="column-reverse"`. */
+    'direction-xs-column-reverse': string;
+    /** Styles applied to the root element if `direction="row-reverse"`. */
+    'direction-xs-row-reverse': string;
+    /** Styles applied to the root element if `wrap="nowrap"`. */
+    'wrap-xs-nowrap': string;
+    /** Styles applied to the root element if `wrap="reverse"`. */
+    'wrap-xs-wrap-reverse': string;
+    'spacing-xs-1': string;
+    'spacing-xs-2': string;
+    'spacing-xs-3': string;
+    'spacing-xs-4': string;
+    'spacing-xs-5': string;
+    'spacing-xs-6': string;
+    'spacing-xs-7': string;
+    'spacing-xs-8': string;
+    'spacing-xs-9': string;
+    'spacing-xs-10': string;
+    'grid-xs-auto': string;
+    'grid-xs-true': string;
+    'grid-xs-1': string;
+    'grid-xs-2': string;
+    'grid-xs-3': string;
+    'grid-xs-4': string;
+    'grid-xs-5': string;
+    'grid-xs-6': string;
+    'grid-xs-7': string;
+    'grid-xs-8': string;
+    'grid-xs-9': string;
+    'grid-xs-10': string;
+    'grid-xs-11': string;
+    'grid-xs-12': string;
+}
+export declare type GridClassKey = keyof GridClasses;
+export declare function getGridUtilityClass(slot: string): string;
+declare const gridClasses: GridClasses;
+export default gridClasses;