@mui/material 9.0.1 → 9.1.1

package/Accordion/Accordion.d.mts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
 import { Theme } from "../styles/index.mjs";
-import { TransitionProps } from "../transitions/transition.mjs";
+import { TransitionProps } from "../transitions/types.mjs";
 import { AccordionClasses } from "./accordionClasses.mjs";
 import { OverridableComponent, OverrideProps } from "../OverridableComponent/index.mjs";
 import { ExtendPaperTypeMap, PaperProps } from "../Paper/Paper.mjs";
@@ -19,7 +19,7 @@ export interface AccordionSlots {
   heading: React.ElementType;
   /**
    * The component that renders the transition.
-   * [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
+   * [Follow this guide](/material-ui/transitions/#transition-slots) to learn more about the requirements for this component.
    * @default Collapse
    */
   transition: React.ElementType;

package/Accordion/Accordion.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
 import { Theme } from "../styles/index.js";
-import { TransitionProps } from "../transitions/transition.js";
+import { TransitionProps } from "../transitions/types.js";
 import { AccordionClasses } from "./accordionClasses.js";
 import { OverridableComponent, OverrideProps } from "../OverridableComponent/index.js";
 import { ExtendPaperTypeMap, PaperProps } from "../Paper/Paper.js";
@@ -19,7 +19,7 @@ export interface AccordionSlots {
   heading: React.ElementType;
   /**
    * The component that renders the transition.
-   * [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
+   * [Follow this guide](/material-ui/transitions/#transition-slots) to learn more about the requirements for this component.
    * @default Collapse
    */
   transition: React.ElementType;

package/Accordion/Accordion.js

@@ -22,6 +22,7 @@ var _AccordionContext = _interopRequireDefault(require("./AccordionContext"));
 var _useControlled = _interopRequireDefault(require("../utils/useControlled"));
 var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
 var _accordionClasses = _interopRequireWildcard(require("./accordionClasses"));
+var _utils = require("../transitions/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
   const {
@@ -57,7 +58,7 @@ const AccordionRoot = (0, _zeroStyled.styled)(_Paper.default, {
   };
   return {
     position: 'relative',
-    transition: theme.transitions.create(['margin'], transition),
+    ...(0, _utils.getTransitionStyles)(theme, ['margin'], transition),
     overflowAnchor: 'none',
     // Keep the same scrolling position
     '&::before': {
@@ -69,7 +70,7 @@ const AccordionRoot = (0, _zeroStyled.styled)(_Paper.default, {
       content: '""',
       opacity: 1,
       backgroundColor: (theme.vars || theme).palette.divider,
-      transition: theme.transitions.create(['opacity', 'background-color'], transition)
+      ...(0, _utils.getTransitionStyles)(theme, ['opacity', 'background-color'], transition)
     },
     '&:first-of-type': {
       '&::before': {

package/Accordion/Accordion.mjs

@@ -15,6 +15,7 @@ import AccordionContext from "./AccordionContext.mjs";
 import useControlled from "../utils/useControlled.mjs";
 import useSlot from "../utils/useSlot.mjs";
 import accordionClasses, { getAccordionUtilityClass } from "./accordionClasses.mjs";
+import { getTransitionStyles } from "../transitions/utils.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -50,7 +51,7 @@ const AccordionRoot = styled(Paper, {
   };
   return {
     position: 'relative',
-    transition: theme.transitions.create(['margin'], transition),
+    ...getTransitionStyles(theme, ['margin'], transition),
     overflowAnchor: 'none',
     // Keep the same scrolling position
     '&::before': {
@@ -62,7 +63,7 @@ const AccordionRoot = styled(Paper, {
       content: '""',
       opacity: 1,
       backgroundColor: (theme.vars || theme).palette.divider,
-      transition: theme.transitions.create(['opacity', 'background-color'], transition)
+      ...getTransitionStyles(theme, ['opacity', 'background-color'], transition)
     },
     '&:first-of-type': {
       '&::before': {

package/AccordionSummary/AccordionSummary.js

@@ -16,6 +16,7 @@ var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
 var _AccordionContext = _interopRequireDefault(require("../Accordion/AccordionContext"));
+var _utils = require("../transitions/utils");
 var _accordionSummaryClasses = _interopRequireWildcard(require("./accordionSummaryClasses"));
 var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -39,35 +40,32 @@ const AccordionSummaryRoot = (0, _zeroStyled.styled)(_ButtonBase.default, {
   slot: 'Root'
 })((0, _memoTheme.default)(({
   theme
-}) => {
-  const transition = {
+}) => ({
+  display: 'flex',
+  width: '100%',
+  minHeight: 48,
+  padding: theme.spacing(0, 2),
+  ...(0, _utils.getTransitionStyles)(theme, ['min-height', 'background-color'], {
     duration: theme.transitions.duration.shortest
-  };
-  return {
-    display: 'flex',
-    width: '100%',
-    minHeight: 48,
-    padding: theme.spacing(0, 2),
-    transition: theme.transitions.create(['min-height', 'background-color'], transition),
-    [`&.${_accordionSummaryClasses.default.focusVisible}`]: {
-      backgroundColor: (theme.vars || theme).palette.action.focus
-    },
-    [`&.${_accordionSummaryClasses.default.disabled}`]: {
-      opacity: (theme.vars || theme).palette.action.disabledOpacity
-    },
-    [`&:hover:not(.${_accordionSummaryClasses.default.disabled})`]: {
-      cursor: 'pointer'
-    },
-    variants: [{
-      props: props => !props.disableGutters,
-      style: {
-        [`&.${_accordionSummaryClasses.default.expanded}`]: {
-          minHeight: 64
-        }
+  }),
+  [`&.${_accordionSummaryClasses.default.focusVisible}`]: {
+    backgroundColor: (theme.vars || theme).palette.action.focus
+  },
+  [`&.${_accordionSummaryClasses.default.disabled}`]: {
+    opacity: (theme.vars || theme).palette.action.disabledOpacity
+  },
+  [`&:hover:not(.${_accordionSummaryClasses.default.disabled})`]: {
+    cursor: 'pointer'
+  },
+  variants: [{
+    props: props => !props.disableGutters,
+    style: {
+      [`&.${_accordionSummaryClasses.default.expanded}`]: {
+        minHeight: 64
       }
-    }]
-  };
-}));
+    }
+  }]
+})));
 const AccordionSummaryContent = (0, _zeroStyled.styled)('span', {
   name: 'MuiAccordionSummary',
   slot: 'Content'
@@ -81,7 +79,7 @@ const AccordionSummaryContent = (0, _zeroStyled.styled)('span', {
   variants: [{
     props: props => !props.disableGutters,
     style: {
-      transition: theme.transitions.create(['margin'], {
+      ...(0, _utils.getTransitionStyles)(theme, ['margin'], {
         duration: theme.transitions.duration.shortest
       }),
       [`&.${_accordionSummaryClasses.default.expanded}`]: {
@@ -99,7 +97,7 @@ const AccordionSummaryExpandIconWrapper = (0, _zeroStyled.styled)('span', {
   display: 'flex',
   color: (theme.vars || theme).palette.action.active,
   transform: 'rotate(0deg)',
-  transition: theme.transitions.create('transform', {
+  ...(0, _utils.getTransitionStyles)(theme, 'transform', {
     duration: theme.transitions.duration.shortest
   }),
   [`&.${_accordionSummaryClasses.default.expanded}`]: {

package/AccordionSummary/AccordionSummary.mjs

@@ -9,6 +9,7 @@ import memoTheme from "../utils/memoTheme.mjs";
 import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
 import ButtonBase from "../ButtonBase/index.mjs";
 import AccordionContext from "../Accordion/AccordionContext.mjs";
+import { getTransitionStyles } from "../transitions/utils.mjs";
 import accordionSummaryClasses, { getAccordionSummaryUtilityClass } from "./accordionSummaryClasses.mjs";
 import useSlot from "../utils/useSlot.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -32,35 +33,32 @@ const AccordionSummaryRoot = styled(ButtonBase, {
   slot: 'Root'
 })(memoTheme(({
   theme
-}) => {
-  const transition = {
+}) => ({
+  display: 'flex',
+  width: '100%',
+  minHeight: 48,
+  padding: theme.spacing(0, 2),
+  ...getTransitionStyles(theme, ['min-height', 'background-color'], {
     duration: theme.transitions.duration.shortest
-  };
-  return {
-    display: 'flex',
-    width: '100%',
-    minHeight: 48,
-    padding: theme.spacing(0, 2),
-    transition: theme.transitions.create(['min-height', 'background-color'], transition),
-    [`&.${accordionSummaryClasses.focusVisible}`]: {
-      backgroundColor: (theme.vars || theme).palette.action.focus
-    },
-    [`&.${accordionSummaryClasses.disabled}`]: {
-      opacity: (theme.vars || theme).palette.action.disabledOpacity
-    },
-    [`&:hover:not(.${accordionSummaryClasses.disabled})`]: {
-      cursor: 'pointer'
-    },
-    variants: [{
-      props: props => !props.disableGutters,
-      style: {
-        [`&.${accordionSummaryClasses.expanded}`]: {
-          minHeight: 64
-        }
+  }),
+  [`&.${accordionSummaryClasses.focusVisible}`]: {
+    backgroundColor: (theme.vars || theme).palette.action.focus
+  },
+  [`&.${accordionSummaryClasses.disabled}`]: {
+    opacity: (theme.vars || theme).palette.action.disabledOpacity
+  },
+  [`&:hover:not(.${accordionSummaryClasses.disabled})`]: {
+    cursor: 'pointer'
+  },
+  variants: [{
+    props: props => !props.disableGutters,
+    style: {
+      [`&.${accordionSummaryClasses.expanded}`]: {
+        minHeight: 64
       }
-    }]
-  };
-}));
+    }
+  }]
+})));
 const AccordionSummaryContent = styled('span', {
   name: 'MuiAccordionSummary',
   slot: 'Content'
@@ -74,7 +72,7 @@ const AccordionSummaryContent = styled('span', {
   variants: [{
     props: props => !props.disableGutters,
     style: {
-      transition: theme.transitions.create(['margin'], {
+      ...getTransitionStyles(theme, ['margin'], {
         duration: theme.transitions.duration.shortest
       }),
       [`&.${accordionSummaryClasses.expanded}`]: {
@@ -92,7 +90,7 @@ const AccordionSummaryExpandIconWrapper = styled('span', {
   display: 'flex',
   color: (theme.vars || theme).palette.action.active,
   transform: 'rotate(0deg)',
-  transition: theme.transitions.create('transform', {
+  ...getTransitionStyles(theme, 'transform', {
     duration: theme.transitions.duration.shortest
   }),
   [`&.${accordionSummaryClasses.expanded}`]: {

package/Autocomplete/Autocomplete.d.mts

@@ -171,7 +171,11 @@ export interface AutocompleteProps<Value, Multiple extends boolean | undefined,
    */
   forcePopupIcon?: true | false | 'auto' | undefined;
   /**
-   * If `true`, the input will take up the full width of its container.
+   * If `true`, the input takes up the full width of its container.
+   *
+   * `Autocomplete` treats `undefined` and `false` differently.
+   * If `undefined`, the inner input takes up the full width of its container.
+   * If `false`, the inner input is restricted to its intrinsic width.
    * @default false
    */
   fullWidth?: boolean | undefined;

package/Autocomplete/Autocomplete.d.ts

@@ -171,7 +171,11 @@ export interface AutocompleteProps<Value, Multiple extends boolean | undefined,
    */
   forcePopupIcon?: true | false | 'auto' | undefined;
   /**
-   * If `true`, the input will take up the full width of its container.
+   * If `true`, the input takes up the full width of its container.
+   *
+   * `Autocomplete` treats `undefined` and `false` differently.
+   * If `undefined`, the inner input takes up the full width of its container.
+   * If `false`, the inner input is restricted to its intrinsic width.
    * @default false
    */
   fullWidth?: boolean | undefined;

package/Autocomplete/Autocomplete.js

@@ -471,6 +471,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     renderInput,
     renderOption: renderOptionProp,
     renderValue,
+    resetHighlightOnMouseLeave = false,
     selectOnFocus = !props.freeSolo,
     size = 'medium',
     slots = {},
@@ -549,10 +550,6 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
   const {
     onMouseDown: handleInputMouseDown
   } = getInputProps();
-  const {
-    ref: listboxRef,
-    ...otherListboxProps
-  } = getListboxProps();
   const defaultGetOptionLabel = option => option.label ?? option;
   const getOptionLabel = getOptionLabelProp || defaultGetOptionLabel;
 
@@ -591,8 +588,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     externalForwardedProps,
     ownerState,
     className: classes.listbox,
-    additionalProps: otherListboxProps,
-    ref: listboxRef
+    getSlotProps: getListboxProps
   });
   const [PaperSlot, paperProps] = (0, _useSlot.default)('paper', {
     elementType: _Paper.default,
@@ -948,7 +944,11 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    */
   freeSolo: _propTypes.default.bool,
   /**
-   * If `true`, the input will take up the full width of its container.
+   * If `true`, the input takes up the full width of its container.
+   *
+   * `Autocomplete` treats `undefined` and `false` differently.
+   * If `undefined`, the inner input takes up the full width of its container.
+   * If `false`, the inner input is restricted to its intrinsic width.
    * @default false
    */
   fullWidth: _propTypes.default.bool,
@@ -1170,6 +1170,12 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    * @returns {ReactNode}
    */
   renderValue: _propTypes.default.func,
+  /**
+   * If `true`, clears an option highlighted by mouse movement when the mouse leaves the listbox.
+   * This behavior will be enabled by default in the next major version.
+   * @default false
+   */
+  resetHighlightOnMouseLeave: _propTypes.default.bool,
   /**
    * If `true`, the input's text is selected on focus.
    * It helps the user clear the selected value.

package/Autocomplete/Autocomplete.mjs

@@ -459,6 +459,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     renderInput,
     renderOption: renderOptionProp,
     renderValue,
+    resetHighlightOnMouseLeave = false,
     selectOnFocus = !props.freeSolo,
     size = 'medium',
     slots = {},
@@ -537,10 +538,6 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
   const {
     onMouseDown: handleInputMouseDown
   } = getInputProps();
-  const {
-    ref: listboxRef,
-    ...otherListboxProps
-  } = getListboxProps();
   const defaultGetOptionLabel = option => option.label ?? option;
   const getOptionLabel = getOptionLabelProp || defaultGetOptionLabel;
 
@@ -579,8 +576,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     externalForwardedProps,
     ownerState,
     className: classes.listbox,
-    additionalProps: otherListboxProps,
-    ref: listboxRef
+    getSlotProps: getListboxProps
   });
   const [PaperSlot, paperProps] = useSlot('paper', {
     elementType: Paper,
@@ -936,7 +932,11 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    */
   freeSolo: PropTypes.bool,
   /**
-   * If `true`, the input will take up the full width of its container.
+   * If `true`, the input takes up the full width of its container.
+   *
+   * `Autocomplete` treats `undefined` and `false` differently.
+   * If `undefined`, the inner input takes up the full width of its container.
+   * If `false`, the inner input is restricted to its intrinsic width.
    * @default false
    */
   fullWidth: PropTypes.bool,
@@ -1158,6 +1158,12 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    * @returns {ReactNode}
    */
   renderValue: PropTypes.func,
+  /**
+   * If `true`, clears an option highlighted by mouse movement when the mouse leaves the listbox.
+   * This behavior will be enabled by default in the next major version.
+   * @default false
+   */
+  resetHighlightOnMouseLeave: PropTypes.bool,
   /**
    * If `true`, the input's text is selected on focus.
    * It helps the user clear the selected value.

package/Backdrop/Backdrop.d.mts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
 import { FadeProps } from "../Fade/index.mjs";
-import { TransitionProps } from "../transitions/transition.mjs";
+import { TransitionProps } from "../transitions/types.mjs";
 import { Theme } from "../styles/index.mjs";
 import { BackdropClasses } from "./backdropClasses.mjs";
 import { OverridableComponent, OverrideProps } from "../OverridableComponent/index.mjs";
@@ -14,7 +14,7 @@ export interface BackdropSlots {
   root: React.ElementType;
   /**
    * The component that renders the transition.
-   * [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
+   * [Follow this guide](/material-ui/transitions/#transition-slots) to learn more about the requirements for this component.
    * @default Fade
    */
   transition: React.ElementType;

package/Backdrop/Backdrop.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
 import { FadeProps } from "../Fade/index.js";
-import { TransitionProps } from "../transitions/transition.js";
+import { TransitionProps } from "../transitions/types.js";
 import { Theme } from "../styles/index.js";
 import { BackdropClasses } from "./backdropClasses.js";
 import { OverridableComponent, OverrideProps } from "../OverridableComponent/index.js";
@@ -14,7 +14,7 @@ export interface BackdropSlots {
   root: React.ElementType;
   /**
    * The component that renders the transition.
-   * [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
+   * [Follow this guide](/material-ui/transitions/#transition-slots) to learn more about the requirements for this component.
    * @default Fade
    */
   transition: React.ElementType;

package/Badge/Badge.js

@@ -20,6 +20,7 @@ var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _badgeClasses = _interopRequireWildcard(require("./badgeClasses"));
 var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
+var _utils = require("../transitions/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const RADIUS_STANDARD = 10;
 const RADIUS_DOT = 4;
@@ -81,7 +82,7 @@ const BadgeBadge = (0, _zeroStyled.styled)('span', {
   '@media (forced-colors: active)': {
     border: '1px solid ButtonBorder'
   },
-  transition: theme.transitions.create('transform', {
+  ...(0, _utils.getTransitionStyles)(theme, 'transform', {
     easing: theme.transitions.easing.easeInOut,
     duration: theme.transitions.duration.enteringScreen
   }),
@@ -108,33 +109,19 @@ const BadgeBadge = (0, _zeroStyled.styled)('span', {
       invisible: true
     },
     style: {
-      transition: theme.transitions.create('transform', {
+      ...(0, _utils.getTransitionStyles)(theme, 'transform', {
         easing: theme.transitions.easing.easeInOut,
         duration: theme.transitions.duration.leavingScreen
       })
     }
   }, {
-    style: ({
-      ownerState
-    }) => {
-      const {
-        vertical,
-        horizontal
-      } = ownerState.anchorOrigin;
-      const offset = ownerState.overlap === 'circular' ? '14%' : 0;
-      return {
-        '--Badge-translateX': horizontal === 'right' ? '50%' : '-50%',
-        '--Badge-translateY': vertical === 'top' ? '-50%' : '50%',
-        top: vertical === 'top' ? offset : 'initial',
-        bottom: vertical === 'bottom' ? offset : 'initial',
-        right: horizontal === 'right' ? offset : 'initial',
-        left: horizontal === 'left' ? offset : 'initial',
-        transform: 'scale(1) translate(var(--Badge-translateX), var(--Badge-translateY))',
-        transformOrigin: `${horizontal === 'right' ? '100%' : '0%'} ${vertical === 'top' ? '0%' : '100%'}`,
-        [`&.${_badgeClasses.default.invisible}`]: {
-          transform: 'scale(0) translate(var(--Badge-translateX), var(--Badge-translateY))'
-        }
-      };
+    style: {
+      inset: 'var(--Badge-inset)',
+      transform: 'scale(1) translate(var(--Badge-translate))',
+      transformOrigin: 'var(--Badge-origin)',
+      [`&.${_badgeClasses.default.invisible}`]: {
+        transform: 'scale(0) translate(var(--Badge-translate))'
+      }
     }
   }]
 })));
@@ -223,11 +210,28 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
       as: component
     }
   });
+  const {
+    vertical,
+    horizontal
+  } = anchorOrigin;
+  const offset = overlap === 'circular' ? '14%' : '0';
+  const top = vertical === 'top' ? offset : 'auto';
+  const bottom = vertical === 'bottom' ? offset : 'auto';
+  const right = horizontal === 'right' ? offset : 'auto';
+  const left = horizontal === 'left' ? offset : 'auto';
   const [BadgeSlot, badgeProps] = (0, _useSlot.default)('badge', {
     elementType: BadgeBadge,
     externalForwardedProps,
     ownerState,
-    className: classes.badge
+    className: classes.badge,
+    additionalProps: {
+      'aria-hidden': true,
+      style: {
+        '--Badge-translate': `${horizontal === 'right' ? '50%' : '-50%'}, ${vertical === 'top' ? '-50%' : '50%'}`,
+        '--Badge-inset': `${top} ${right} ${bottom} ${left}`,
+        '--Badge-origin': `${horizontal === 'right' ? '100%' : '0%'} ${vertical === 'top' ? '0%' : '100%'}`
+      }
+    }
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(RootSlot, {
     ...rootProps,

package/Badge/Badge.mjs

@@ -13,6 +13,7 @@ import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
 import capitalize from "../utils/capitalize.mjs";
 import badgeClasses, { getBadgeUtilityClass } from "./badgeClasses.mjs";
 import useSlot from "../utils/useSlot.mjs";
+import { getTransitionStyles } from "../transitions/utils.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const RADIUS_STANDARD = 10;
 const RADIUS_DOT = 4;
@@ -74,7 +75,7 @@ const BadgeBadge = styled('span', {
   '@media (forced-colors: active)': {
     border: '1px solid ButtonBorder'
   },
-  transition: theme.transitions.create('transform', {
+  ...getTransitionStyles(theme, 'transform', {
     easing: theme.transitions.easing.easeInOut,
     duration: theme.transitions.duration.enteringScreen
   }),
@@ -101,33 +102,19 @@ const BadgeBadge = styled('span', {
       invisible: true
     },
     style: {
-      transition: theme.transitions.create('transform', {
+      ...getTransitionStyles(theme, 'transform', {
         easing: theme.transitions.easing.easeInOut,
         duration: theme.transitions.duration.leavingScreen
       })
     }
   }, {
-    style: ({
-      ownerState
-    }) => {
-      const {
-        vertical,
-        horizontal
-      } = ownerState.anchorOrigin;
-      const offset = ownerState.overlap === 'circular' ? '14%' : 0;
-      return {
-        '--Badge-translateX': horizontal === 'right' ? '50%' : '-50%',
-        '--Badge-translateY': vertical === 'top' ? '-50%' : '50%',
-        top: vertical === 'top' ? offset : 'initial',
-        bottom: vertical === 'bottom' ? offset : 'initial',
-        right: horizontal === 'right' ? offset : 'initial',
-        left: horizontal === 'left' ? offset : 'initial',
-        transform: 'scale(1) translate(var(--Badge-translateX), var(--Badge-translateY))',
-        transformOrigin: `${horizontal === 'right' ? '100%' : '0%'} ${vertical === 'top' ? '0%' : '100%'}`,
-        [`&.${badgeClasses.invisible}`]: {
-          transform: 'scale(0) translate(var(--Badge-translateX), var(--Badge-translateY))'
-        }
-      };
+    style: {
+      inset: 'var(--Badge-inset)',
+      transform: 'scale(1) translate(var(--Badge-translate))',
+      transformOrigin: 'var(--Badge-origin)',
+      [`&.${badgeClasses.invisible}`]: {
+        transform: 'scale(0) translate(var(--Badge-translate))'
+      }
     }
   }]
 })));
@@ -216,11 +203,28 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
       as: component
     }
   });
+  const {
+    vertical,
+    horizontal
+  } = anchorOrigin;
+  const offset = overlap === 'circular' ? '14%' : '0';
+  const top = vertical === 'top' ? offset : 'auto';
+  const bottom = vertical === 'bottom' ? offset : 'auto';
+  const right = horizontal === 'right' ? offset : 'auto';
+  const left = horizontal === 'left' ? offset : 'auto';
   const [BadgeSlot, badgeProps] = useSlot('badge', {
     elementType: BadgeBadge,
     externalForwardedProps,
     ownerState,
-    className: classes.badge
+    className: classes.badge,
+    additionalProps: {
+      'aria-hidden': true,
+      style: {
+        '--Badge-translate': `${horizontal === 'right' ? '50%' : '-50%'}, ${vertical === 'top' ? '-50%' : '50%'}`,
+        '--Badge-inset': `${top} ${right} ${bottom} ${left}`,
+        '--Badge-origin': `${horizontal === 'right' ? '100%' : '0%'} ${vertical === 'top' ? '0%' : '100%'}`
+      }
+    }
   });
   return /*#__PURE__*/_jsxs(RootSlot, {
     ...rootProps,

package/BottomNavigationAction/BottomNavigationAction.js

@@ -16,6 +16,7 @@ var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
 var _unsupportedProp = _interopRequireDefault(require("../utils/unsupportedProp"));
+var _utils = require("../transitions/utils");
 var _bottomNavigationActionClasses = _interopRequireWildcard(require("./bottomNavigationActionClasses"));
 var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -43,7 +44,7 @@ const BottomNavigationActionRoot = (0, _zeroStyled.styled)(_ButtonBase.default,
 })((0, _memoTheme.default)(({
   theme
 }) => ({
-  transition: theme.transitions.create(['color', 'padding-top'], {
+  ...(0, _utils.getTransitionStyles)(theme, ['color', 'padding-top'], {
     duration: theme.transitions.duration.short
   }),
   padding: '0px 12px',
@@ -83,7 +84,10 @@ const BottomNavigationActionLabel = (0, _zeroStyled.styled)('span', {
   fontFamily: theme.typography.fontFamily,
   fontSize: theme.typography.pxToRem(12),
   opacity: 1,
-  transition: 'font-size 0.2s, opacity 0.2s',
+  ...(0, _utils.getTransitionStyles)(theme, ['font-size', 'opacity'], {
+    duration: '0.2s',
+    easing: 'ease'
+  }),
   transitionDelay: '0.1s',
   [`&.${_bottomNavigationActionClasses.default.selected}`]: {
     fontSize: theme.typography.pxToRem(14)