@mui/material 5.6.1 → 5.6.4

package/modern/BottomNavigationAction/BottomNavigationAction.js

@@ -42,18 +42,19 @@ const BottomNavigationActionRoot = styled(ButtonBase, {
   transition: theme.transitions.create(['color', 'padding-top'], {
     duration: theme.transitions.duration.short
   }),
-  padding: '6px 12px 8px',
+  padding: '0px 12px',
   minWidth: 80,
   maxWidth: 168,
-  color: theme.palette.text.secondary,
+  color: (theme.vars || theme).palette.text.secondary,
   flexDirection: 'column',
   flex: '1'
 }, !ownerState.showLabel && !ownerState.selected && {
-  paddingTop: 16
+  paddingTop: 14
+}, !ownerState.showLabel && !ownerState.selected && !ownerState.label && {
+  paddingTop: 0
 }, {
   [`&.${bottomNavigationActionClasses.selected}`]: {
-    paddingTop: 6,
-    color: theme.palette.primary.main
+    color: (theme.vars || theme).palette.primary.main
   }
 }));
 const BottomNavigationActionLabel = styled('span', {

package/modern/Box/Box.js

@@ -1,14 +1,35 @@
+import PropTypes from 'prop-types';
 import { createBox } from '@mui/system';
 import { unstable_ClassNameGenerator as ClassNameGenerator } from '../className';
 import { createTheme } from '../styles';
 const defaultTheme = createTheme();
-/**
- * @ignore - do not document.
- */
-
 const Box = createBox({
   defaultTheme,
   defaultClassName: 'MuiBox-root',
   generateClassName: ClassNameGenerator.generate
 });
+process.env.NODE_ENV !== "production" ? Box.propTypes
+/* remove-proptypes */
+= {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+
+  /**
+   * @ignore
+   */
+  children: PropTypes.node,
+
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: PropTypes.elementType,
+
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+} : void 0;
 export default Box;

package/modern/CircularProgress/CircularProgress.js

@@ -71,7 +71,7 @@ const CircularProgressRoot = styled('span', {
 }, ownerState.variant === 'determinate' && {
   transition: theme.transitions.create('transform')
 }, ownerState.color !== 'inherit' && {
-  color: theme.palette[ownerState.color].main
+  color: (theme.vars || theme).palette[ownerState.color].main
 }), ({
   ownerState
 }) => ownerState.variant === 'indeterminate' && css`

package/modern/Dialog/Dialog.js

@@ -351,6 +351,7 @@ process.env.NODE_ENV !== "production" ? Dialog.propTypes
 
   /**
    * Callback fired when the backdrop is clicked.
+   * @deprecated Use the `onClose` prop with the `reason` argument to handle the `backdropClick` events.
    */
   onBackdropClick: PropTypes.func,
 

package/modern/FilledInput/FilledInput.js

@@ -66,7 +66,7 @@ const FilledInputRoot = styled(InputBaseRoot, {
     }
   }, !ownerState.disableUnderline && {
     '&:after': {
-      borderBottom: `2px solid ${theme.palette[ownerState.color].main}`,
+      borderBottom: `2px solid ${theme.palette[ownerState.color || 'primary']?.main}`,
       left: 0,
       bottom: 0,
       // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
@@ -82,7 +82,9 @@ const FilledInputRoot = styled(InputBaseRoot, {
 
     },
     [`&.${filledInputClasses.focused}:after`]: {
-      transform: 'scaleX(1)'
+      // translateX(0) is a workaround for Safari transform scale bug
+      // See https://github.com/mui/material-ui/issues/31766
+      transform: 'scaleX(1) translateX(0)'
     },
     [`&.${filledInputClasses.error}:after`]: {
       borderBottomColor: theme.palette.error.main,

package/modern/Input/Input.js

@@ -65,7 +65,9 @@ const InputRoot = styled(InputBaseRoot, {
 
     },
     [`&.${inputClasses.focused}:after`]: {
-      transform: 'scaleX(1)'
+      // translateX(0) is a workaround for Safari transform scale bug
+      // See https://github.com/mui/material-ui/issues/31766
+      transform: 'scaleX(1) translateX(0)'
     },
     [`&.${inputClasses.error}:after`]: {
       borderBottomColor: theme.palette.error.main,

package/modern/Modal/Modal.js

@@ -253,6 +253,7 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes
 
   /**
    * Callback fired when the backdrop is clicked.
+   * @deprecated Use the `onClose` prop with the `reason` argument to handle the `backdropClick` events.
    */
   onBackdropClick: PropTypes.func,
 

package/modern/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.6.1
+/** @license MUI v5.6.4
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/modern/locale/index.js

@@ -619,7 +619,7 @@ export const csCZ = {
         'aria-label': 'Navigace stránkováním',
         getItemAriaLabel: (type, page, selected) => {
           if (type === 'page') {
-            return `${selected ? '' : 'Jít na '}${page} stránku`;
+            return `${selected ? '' : 'Jít na '}${page}. stránku`;
           }
 
           if (type === 'first') {

package/node/Accordion/Accordion.js

@@ -90,7 +90,7 @@ const AccordionRoot = (0, _styled.default)(_Paper.default, {
       height: 1,
       content: '""',
       opacity: 1,
-      backgroundColor: theme.palette.divider,
+      backgroundColor: (theme.vars || theme).palette.divider,
       transition: theme.transitions.create(['opacity', 'background-color'], transition)
     },
     '&:first-of-type': {
@@ -115,7 +115,7 @@ const AccordionRoot = (0, _styled.default)(_Paper.default, {
       }
     },
     [`&.${_accordionClasses.default.disabled}`]: {
-      backgroundColor: theme.palette.action.disabledBackground
+      backgroundColor: (theme.vars || theme).palette.action.disabledBackground
     }
   };
 }, ({
@@ -124,12 +124,12 @@ const AccordionRoot = (0, _styled.default)(_Paper.default, {
 }) => (0, _extends2.default)({}, !ownerState.square && {
   borderRadius: 0,
   '&:first-of-type': {
-    borderTopLeftRadius: theme.shape.borderRadius,
-    borderTopRightRadius: theme.shape.borderRadius
+    borderTopLeftRadius: (theme.vars || theme).shape.borderRadius,
+    borderTopRightRadius: (theme.vars || theme).shape.borderRadius
   },
   '&:last-of-type': {
-    borderBottomLeftRadius: theme.shape.borderRadius,
-    borderBottomRightRadius: theme.shape.borderRadius,
+    borderBottomLeftRadius: (theme.vars || theme).shape.borderRadius,
+    borderBottomRightRadius: (theme.vars || theme).shape.borderRadius,
     // Fix a rendering issue on Edge
     '@supports (-ms-ime-align: auto)': {
       borderBottomLeftRadius: 0,

package/node/AccordionSummary/AccordionSummary.js

@@ -70,10 +70,10 @@ const AccordionSummaryRoot = (0, _styled.default)(_ButtonBase.default, {
     padding: theme.spacing(0, 2),
     transition: theme.transitions.create(['min-height', 'background-color'], transition),
     [`&.${_accordionSummaryClasses.default.focusVisible}`]: {
-      backgroundColor: theme.palette.action.focus
+      backgroundColor: (theme.vars || theme).palette.action.focus
     },
     [`&.${_accordionSummaryClasses.default.disabled}`]: {
-      opacity: theme.palette.action.disabledOpacity
+      opacity: (theme.vars || theme).palette.action.disabledOpacity
     },
     [`&:hover:not(.${_accordionSummaryClasses.default.disabled})`]: {
       cursor: 'pointer'
@@ -111,7 +111,7 @@ const AccordionSummaryExpandIconWrapper = (0, _styled.default)('div', {
   theme
 }) => ({
   display: 'flex',
-  color: theme.palette.action.active,
+  color: (theme.vars || theme).palette.action.active,
   transform: 'rotate(0deg)',
   transition: theme.transitions.create('transform', {
     duration: theme.transitions.duration.shortest

package/node/Autocomplete/Autocomplete.js

@@ -852,6 +852,8 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * Used to determine the string value for a given option.
    * It's used to fill the input (and the list box options if `renderOption` is not provided).
    *
+   * If used in free solo mode, it must accept both the type of the options and a string.
+   *
    * @param {T} option
    * @returns {string}
    * @default (option) => option.label ?? option

package/node/AvatarGroup/AvatarGroup.js

@@ -65,7 +65,7 @@ const AvatarGroupRoot = (0, _styled.default)('div', {
   theme
 }) => ({
   [`& .${_Avatar.avatarClasses.root}`]: {
-    border: `2px solid ${theme.palette.background.default}`,
+    border: `2px solid ${(theme.vars || theme).palette.background.default}`,
     boxSizing: 'content-box',
     marginLeft: -8,
     '&:last-child': {
@@ -82,7 +82,7 @@ const AvatarGroupAvatar = (0, _styled.default)(_Avatar.default, {
 })(({
   theme
 }) => ({
-  border: `2px solid ${theme.palette.background.default}`,
+  border: `2px solid ${(theme.vars || theme).palette.background.default}`,
   boxSizing: 'content-box',
   marginLeft: -8,
   '&:last-child': {

package/node/Badge/Badge.js

@@ -19,6 +19,8 @@ var _clsx = _interopRequireDefault(require("clsx"));
 
 var _utils = require("@mui/utils");
 
+var _composeClasses = _interopRequireDefault(require("@mui/base/composeClasses"));
+
 var _BadgeUnstyled = _interopRequireDefault(require("@mui/base/BadgeUnstyled"));
 
 var _styled = _interopRequireDefault(require("../styles/styled"));
@@ -42,7 +44,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 const RADIUS_STANDARD = 10;
 const RADIUS_DOT = 4;
 
-const extendUtilityClasses = ownerState => {
+const useUtilityClasses = ownerState => {
   const {
     color,
     anchorOrigin,
@@ -51,10 +53,11 @@ const extendUtilityClasses = ownerState => {
     variant,
     classes = {}
   } = ownerState;
-  return {
-    root: (0, _clsx.default)(classes.root, 'root'),
-    badge: (0, _clsx.default)(classes.badge, (0, _badgeClasses.getBadgeUtilityClass)('badge'), (0, _badgeClasses.getBadgeUtilityClass)(variant), `anchorOrigin${(0, _capitalize.default)(anchorOrigin.vertical)}${(0, _capitalize.default)(anchorOrigin.horizontal)}`, (0, _badgeClasses.getBadgeUtilityClass)(`anchorOrigin${(0, _capitalize.default)(anchorOrigin.vertical)}${(0, _capitalize.default)(anchorOrigin.horizontal)}${(0, _capitalize.default)(overlap)}`), (0, _badgeClasses.getBadgeUtilityClass)(`overlap${(0, _capitalize.default)(overlap)}`), color !== 'default' && [(0, _badgeClasses.getBadgeUtilityClass)(`color${(0, _capitalize.default)(color)}`), classes[`color${(0, _capitalize.default)(color)}`]], invisible && (0, _badgeClasses.getBadgeUtilityClass)('invisible'))
+  const slots = {
+    root: ['root'],
+    badge: ['badge', variant, invisible && 'invisible', `anchorOrigin${(0, _capitalize.default)(anchorOrigin.vertical)}${(0, _capitalize.default)(anchorOrigin.horizontal)}`, `anchorOrigin${(0, _capitalize.default)(anchorOrigin.vertical)}${(0, _capitalize.default)(anchorOrigin.horizontal)}${(0, _capitalize.default)(overlap)}`, `overlap${(0, _capitalize.default)(overlap)}`, color !== 'default' && `color${(0, _capitalize.default)(color)}`]
   };
+  return (0, _composeClasses.default)(slots, _badgeClasses.getBadgeUtilityClass, classes);
 };
 
 const BadgeRoot = (0, _styled.default)('span', {
@@ -104,8 +107,8 @@ const BadgeBadge = (0, _styled.default)('span', {
     duration: theme.transitions.duration.enteringScreen
   })
 }, ownerState.color !== 'default' && {
-  backgroundColor: theme.palette[ownerState.color].main,
-  color: theme.palette[ownerState.color].contrastText
+  backgroundColor: (theme.vars || theme).palette[ownerState.color].main,
+  color: (theme.vars || theme).palette[ownerState.color].contrastText
 }, ownerState.variant === 'dot' && {
   borderRadius: RADIUS_DOT,
   height: RADIUS_DOT * 2,
@@ -231,7 +234,7 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
     overlap,
     variant
   });
-  const classes = extendUtilityClasses(ownerState);
+  const classes = useUtilityClasses(ownerState);
   let displayValue;
 
   if (variant !== 'dot') {

package/node/BottomNavigation/BottomNavigation.js

@@ -55,7 +55,7 @@ const BottomNavigationRoot = (0, _styled.default)('div', {
   display: 'flex',
   justifyContent: 'center',
   height: 56,
-  backgroundColor: theme.palette.background.paper
+  backgroundColor: (theme.vars || theme).palette.background.paper
 }));
 const BottomNavigation = /*#__PURE__*/React.forwardRef(function BottomNavigation(inProps, ref) {
   const props = (0, _useThemeProps.default)({

package/node/BottomNavigationAction/BottomNavigationAction.js

@@ -66,18 +66,19 @@ const BottomNavigationActionRoot = (0, _styled.default)(_ButtonBase.default, {
   transition: theme.transitions.create(['color', 'padding-top'], {
     duration: theme.transitions.duration.short
   }),
-  padding: '6px 12px 8px',
+  padding: '0px 12px',
   minWidth: 80,
   maxWidth: 168,
-  color: theme.palette.text.secondary,
+  color: (theme.vars || theme).palette.text.secondary,
   flexDirection: 'column',
   flex: '1'
 }, !ownerState.showLabel && !ownerState.selected && {
-  paddingTop: 16
+  paddingTop: 14
+}, !ownerState.showLabel && !ownerState.selected && !ownerState.label && {
+  paddingTop: 0
 }, {
   [`&.${_bottomNavigationActionClasses.default.selected}`]: {
-    paddingTop: 6,
-    color: theme.palette.primary.main
+    color: (theme.vars || theme).palette.primary.main
   }
 }));
 const BottomNavigationActionLabel = (0, _styled.default)('span', {

package/node/Box/Box.js

@@ -1,10 +1,14 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _system = require("@mui/system");
 
 var _className = require("../className");
@@ -12,14 +16,34 @@ var _className = require("../className");
 var _styles = require("../styles");
 
 const defaultTheme = (0, _styles.createTheme)();
-/**
- * @ignore - do not document.
- */
-
 const Box = (0, _system.createBox)({
   defaultTheme,
   defaultClassName: 'MuiBox-root',
   generateClassName: _className.unstable_ClassNameGenerator.generate
 });
+process.env.NODE_ENV !== "production" ? Box.propTypes
+/* remove-proptypes */
+= {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+
+  /**
+   * @ignore
+   */
+  children: _propTypes.default.node,
+
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: _propTypes.default.elementType,
+
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
+} : void 0;
 var _default = Box;
 exports.default = _default;

package/node/CircularProgress/CircularProgress.js

@@ -98,7 +98,7 @@ const CircularProgressRoot = (0, _styled.default)('span', {
 }, ownerState.variant === 'determinate' && {
   transition: theme.transitions.create('transform')
 }, ownerState.color !== 'inherit' && {
-  color: theme.palette[ownerState.color].main
+  color: (theme.vars || theme).palette[ownerState.color].main
 }), ({
   ownerState
 }) => ownerState.variant === 'indeterminate' && (0, _system.css)`

package/node/Dialog/Dialog.js

@@ -380,6 +380,7 @@ process.env.NODE_ENV !== "production" ? Dialog.propTypes
 
   /**
    * Callback fired when the backdrop is clicked.
+   * @deprecated Use the `onClose` prop with the `reason` argument to handle the `backdropClick` events.
    */
   onBackdropClick: _propTypes.default.func,
 

package/node/FilledInput/FilledInput.js

@@ -64,6 +64,8 @@ const FilledInputRoot = (0, _styled.default)(_InputBase2.InputBaseRoot, {
   theme,
   ownerState
 }) => {
+  var _theme$palette;
+
   const light = theme.palette.mode === 'light';
   const bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)';
   const backgroundColor = light ? 'rgba(0, 0, 0, 0.06)' : 'rgba(255, 255, 255, 0.09)';
@@ -91,7 +93,7 @@ const FilledInputRoot = (0, _styled.default)(_InputBase2.InputBaseRoot, {
     }
   }, !ownerState.disableUnderline && {
     '&:after': {
-      borderBottom: `2px solid ${theme.palette[ownerState.color].main}`,
+      borderBottom: `2px solid ${(_theme$palette = theme.palette[ownerState.color || 'primary']) == null ? void 0 : _theme$palette.main}`,
       left: 0,
       bottom: 0,
       // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
@@ -107,7 +109,9 @@ const FilledInputRoot = (0, _styled.default)(_InputBase2.InputBaseRoot, {
 
     },
     [`&.${_filledInputClasses.default.focused}:after`]: {
-      transform: 'scaleX(1)'
+      // translateX(0) is a workaround for Safari transform scale bug
+      // See https://github.com/mui/material-ui/issues/31766
+      transform: 'scaleX(1) translateX(0)'
     },
     [`&.${_filledInputClasses.default.error}:after`]: {
       borderBottomColor: theme.palette.error.main,

package/node/Input/Input.js

@@ -90,7 +90,9 @@ const InputRoot = (0, _styled.default)(_InputBase2.InputBaseRoot, {
 
     },
     [`&.${_inputClasses.default.focused}:after`]: {
-      transform: 'scaleX(1)'
+      // translateX(0) is a workaround for Safari transform scale bug
+      // See https://github.com/mui/material-ui/issues/31766
+      transform: 'scaleX(1) translateX(0)'
     },
     [`&.${_inputClasses.default.error}:after`]: {
       borderBottomColor: theme.palette.error.main,

package/node/Modal/Modal.js

@@ -277,6 +277,7 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes
 
   /**
    * Callback fired when the backdrop is clicked.
+   * @deprecated Use the `onClose` prop with the `reason` argument to handle the `backdropClick` events.
    */
   onBackdropClick: _propTypes.default.func,
 

package/node/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.6.1
+/** @license MUI v5.6.4
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/node/locale/index.js

@@ -632,7 +632,7 @@ const csCZ = {
         'aria-label': 'Navigace stránkováním',
         getItemAriaLabel: (type, page, selected) => {
           if (type === 'page') {
-            return `${selected ? '' : 'Jít na '}${page} stránku`;
+            return `${selected ? '' : 'Jít na '}${page}. stránku`;
           }
 
           if (type === 'first') {

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@mui/material",
-  "version": "5.6.1",
+  "version": "5.6.4",
   "private": false,
   "author": "MUI Team",
-  "description": "Quickly build beautiful React apps. MUI is a simple and customizable component library to build faster, beautiful, and more accessible React applications. Follow your own design system, or start with Material Design.",
+  "description": "React components that implement Google's Material Design.",
   "main": "./node/index.js",
   "keywords": [
     "react",
@@ -46,8 +46,8 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.17.2",
-    "@mui/base": "5.0.0-alpha.76",
-    "@mui/system": "^5.6.1",
+    "@mui/base": "5.0.0-alpha.79",
+    "@mui/system": "^5.6.4",
     "@mui/types": "^7.1.3",
     "@mui/utils": "^5.6.1",
     "@types/react-transition-group": "^4.4.4",

package/transitions/index.d.ts

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

package/transitions/transition.d.ts

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

package/transitions/utils.d.ts

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