@sitecore/sc-contenthub-blok 1.0.32 → 2.1.1

package/node_modules/@mui/material/Autocomplete/Autocomplete.js

@@ -66,6 +66,7 @@ const useUtilityClasses = ownerState => {
     listbox: ['listbox'],
     loading: ['loading'],
     noOptions: ['noOptions'],
+    status: ['status'],
     option: ['option'],
     groupLabel: ['groupLabel'],
     groupUl: ['groupUl']
@@ -322,6 +323,10 @@ const AutocompleteLoading = (0, _zeroStyled.styled)('div', {
   color: (theme.vars || theme).palette.text.secondary,
   padding: '14px 16px'
 })));
+const AutocompleteStatus = (0, _zeroStyled.styled)('div', {
+  name: 'MuiAutocomplete',
+  slot: 'Status'
+})({});
 const AutocompleteNoOptions = (0, _zeroStyled.styled)('div', {
   name: 'MuiAutocomplete',
   slot: 'NoOptions'
@@ -471,6 +476,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     renderInput,
     renderOption: renderOptionProp,
     renderValue,
+    resetHighlightOnMouseLeave = false,
     selectOnFocus = !props.freeSolo,
     size = 'medium',
     slots = {},
@@ -549,10 +555,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 +593,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,
@@ -600,6 +601,17 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     ownerState,
     className: classes.paper
   });
+  const [StatusSlot, statusProps] = (0, _useSlot.default)('status', {
+    elementType: AutocompleteStatus,
+    externalForwardedProps,
+    ownerState,
+    className: classes.status,
+    additionalProps: {
+      role: 'status',
+      'aria-live': 'polite',
+      'aria-atomic': 'true'
+    }
+  });
   const [PopperSlot, popperProps] = (0, _useSlot.default)('popper', {
     elementType: _Popper.default,
     externalForwardedProps,
@@ -777,20 +789,22 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(AutocompletePaper, {
         as: PaperSlot,
         ...paperProps,
-        children: [loading && renderedOptions.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompleteLoading, {
-          className: classes.loading,
-          ownerState: ownerState,
-          children: loadingText
-        }) : null, renderedOptions.length === 0 && !freeSolo && !loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompleteNoOptions, {
-          className: classes.noOptions,
-          ownerState: ownerState,
-          role: "presentation",
-          onMouseDown: event => {
-            // Prevent input blur when interacting with the "no options" content
-            event.preventDefault();
-          },
-          children: noOptionsText
-        }) : null, renderedOptions.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ListboxSlot, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(StatusSlot, {
+          ...statusProps,
+          children: [loading && renderedOptions.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompleteLoading, {
+            className: classes.loading,
+            ownerState: ownerState,
+            children: loadingText
+          }) : null, renderedOptions.length === 0 && !freeSolo && !loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompleteNoOptions, {
+            className: classes.noOptions,
+            ownerState: ownerState,
+            onMouseDown: event => {
+              // Prevent input blur when interacting with the "no options" content
+              event.preventDefault();
+            },
+            children: noOptionsText
+          }) : null]
+        }), renderedOptions.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ListboxSlot, {
           ...listboxProps,
           children: renderedOptions.map((option, index) => {
             if (groupBy) {
@@ -948,7 +962,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 +1188,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.
@@ -1189,6 +1213,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
     chip: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
     clearIndicator: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
     listbox: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    status: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
     paper: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
     popper: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
     popupIndicator: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
@@ -1204,7 +1229,8 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
     paper: _propTypes.default.elementType,
     popper: _propTypes.default.elementType,
     popupIndicator: _propTypes.default.elementType,
-    root: _propTypes.default.elementType
+    root: _propTypes.default.elementType,
+    status: _propTypes.default.elementType
   }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.

package/node_modules/@mui/material/Autocomplete/Autocomplete.mjs

@@ -53,6 +53,7 @@ const useUtilityClasses = ownerState => {
     listbox: ['listbox'],
     loading: ['loading'],
     noOptions: ['noOptions'],
+    status: ['status'],
     option: ['option'],
     groupLabel: ['groupLabel'],
     groupUl: ['groupUl']
@@ -309,6 +310,10 @@ const AutocompleteLoading = styled('div', {
   color: (theme.vars || theme).palette.text.secondary,
   padding: '14px 16px'
 })));
+const AutocompleteStatus = styled('div', {
+  name: 'MuiAutocomplete',
+  slot: 'Status'
+})({});
 const AutocompleteNoOptions = styled('div', {
   name: 'MuiAutocomplete',
   slot: 'NoOptions'
@@ -459,6 +464,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     renderInput,
     renderOption: renderOptionProp,
     renderValue,
+    resetHighlightOnMouseLeave = false,
     selectOnFocus = !props.freeSolo,
     size = 'medium',
     slots = {},
@@ -537,10 +543,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 +581,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,
@@ -588,6 +589,17 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     ownerState,
     className: classes.paper
   });
+  const [StatusSlot, statusProps] = useSlot('status', {
+    elementType: AutocompleteStatus,
+    externalForwardedProps,
+    ownerState,
+    className: classes.status,
+    additionalProps: {
+      role: 'status',
+      'aria-live': 'polite',
+      'aria-atomic': 'true'
+    }
+  });
   const [PopperSlot, popperProps] = useSlot('popper', {
     elementType: Popper,
     externalForwardedProps,
@@ -765,20 +777,22 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
       children: /*#__PURE__*/_jsxs(AutocompletePaper, {
         as: PaperSlot,
         ...paperProps,
-        children: [loading && renderedOptions.length === 0 ? /*#__PURE__*/_jsx(AutocompleteLoading, {
-          className: classes.loading,
-          ownerState: ownerState,
-          children: loadingText
-        }) : null, renderedOptions.length === 0 && !freeSolo && !loading ? /*#__PURE__*/_jsx(AutocompleteNoOptions, {
-          className: classes.noOptions,
-          ownerState: ownerState,
-          role: "presentation",
-          onMouseDown: event => {
-            // Prevent input blur when interacting with the "no options" content
-            event.preventDefault();
-          },
-          children: noOptionsText
-        }) : null, renderedOptions.length > 0 ? /*#__PURE__*/_jsx(ListboxSlot, {
+        children: [/*#__PURE__*/_jsxs(StatusSlot, {
+          ...statusProps,
+          children: [loading && renderedOptions.length === 0 ? /*#__PURE__*/_jsx(AutocompleteLoading, {
+            className: classes.loading,
+            ownerState: ownerState,
+            children: loadingText
+          }) : null, renderedOptions.length === 0 && !freeSolo && !loading ? /*#__PURE__*/_jsx(AutocompleteNoOptions, {
+            className: classes.noOptions,
+            ownerState: ownerState,
+            onMouseDown: event => {
+              // Prevent input blur when interacting with the "no options" content
+              event.preventDefault();
+            },
+            children: noOptionsText
+          }) : null]
+        }), renderedOptions.length > 0 ? /*#__PURE__*/_jsx(ListboxSlot, {
           ...listboxProps,
           children: renderedOptions.map((option, index) => {
             if (groupBy) {
@@ -936,7 +950,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 +1176,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.
@@ -1177,6 +1201,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
     chip: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     clearIndicator: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     listbox: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    status: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     paper: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     popper: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     popupIndicator: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
@@ -1192,7 +1217,8 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
     paper: PropTypes.elementType,
     popper: PropTypes.elementType,
     popupIndicator: PropTypes.elementType,
-    root: PropTypes.elementType
+    root: PropTypes.elementType,
+    status: PropTypes.elementType
   }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.

package/node_modules/@mui/material/Autocomplete/autocompleteClasses.d.mts

@@ -45,6 +45,8 @@ export interface AutocompleteClasses {
   loading: string;
   /** Styles applied to the no option wrapper. */
   noOptions: string;
+  /** Styles applied to the status message container. */
+  status: string;
   /** Styles applied to the option elements. */
   option: string;
   /** Styles applied to the group's label elements. */

package/node_modules/@mui/material/Autocomplete/autocompleteClasses.d.ts

@@ -45,6 +45,8 @@ export interface AutocompleteClasses {
   loading: string;
   /** Styles applied to the no option wrapper. */
   noOptions: string;
+  /** Styles applied to the status message container. */
+  status: string;
   /** Styles applied to the option elements. */
   option: string;
   /** Styles applied to the group's label elements. */

package/node_modules/@mui/material/Autocomplete/autocompleteClasses.js

@@ -11,5 +11,5 @@ var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateU
 function getAutocompleteUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiAutocomplete', slot);
 }
-const autocompleteClasses = (0, _generateUtilityClasses.default)('MuiAutocomplete', ['root', 'expanded', 'fullWidth', 'focused', 'focusVisible', 'tag', 'tagSizeSmall', 'tagSizeMedium', 'hasPopupIcon', 'hasClearIcon', 'inputRoot', 'input', 'inputFocused', 'endAdornment', 'clearIndicator', 'popupIndicator', 'popupIndicatorOpen', 'popper', 'popperDisablePortal', 'paper', 'listbox', 'loading', 'noOptions', 'option', 'groupLabel', 'groupUl']);
+const autocompleteClasses = (0, _generateUtilityClasses.default)('MuiAutocomplete', ['root', 'expanded', 'fullWidth', 'focused', 'focusVisible', 'tag', 'tagSizeSmall', 'tagSizeMedium', 'hasPopupIcon', 'hasClearIcon', 'inputRoot', 'input', 'inputFocused', 'endAdornment', 'clearIndicator', 'popupIndicator', 'popupIndicatorOpen', 'popper', 'popperDisablePortal', 'paper', 'listbox', 'loading', 'noOptions', 'status', 'option', 'groupLabel', 'groupUl']);
 var _default = exports.default = autocompleteClasses;

package/node_modules/@mui/material/Autocomplete/autocompleteClasses.mjs

@@ -3,5 +3,5 @@ import generateUtilityClass from '@mui/utils/generateUtilityClass';
 export function getAutocompleteUtilityClass(slot) {
   return generateUtilityClass('MuiAutocomplete', slot);
 }
-const autocompleteClasses = generateUtilityClasses('MuiAutocomplete', ['root', 'expanded', 'fullWidth', 'focused', 'focusVisible', 'tag', 'tagSizeSmall', 'tagSizeMedium', 'hasPopupIcon', 'hasClearIcon', 'inputRoot', 'input', 'inputFocused', 'endAdornment', 'clearIndicator', 'popupIndicator', 'popupIndicatorOpen', 'popper', 'popperDisablePortal', 'paper', 'listbox', 'loading', 'noOptions', 'option', 'groupLabel', 'groupUl']);
+const autocompleteClasses = generateUtilityClasses('MuiAutocomplete', ['root', 'expanded', 'fullWidth', 'focused', 'focusVisible', 'tag', 'tagSizeSmall', 'tagSizeMedium', 'hasPopupIcon', 'hasClearIcon', 'inputRoot', 'input', 'inputFocused', 'endAdornment', 'clearIndicator', 'popupIndicator', 'popupIndicatorOpen', 'popper', 'popperDisablePortal', 'paper', 'listbox', 'loading', 'noOptions', 'status', 'option', 'groupLabel', 'groupUl']);
 export default autocompleteClasses;

package/node_modules/@mui/material/Avatar/Avatar.js

@@ -118,6 +118,8 @@ function useLoaded(src, srcSet, crossOrigin, referrerPolicy) {
     if (!src && !srcSet) {
       return undefined;
     }
+
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     setLoaded(false);
     let active = true;
     const image = new Image();

package/node_modules/@mui/material/Avatar/Avatar.mjs

@@ -111,6 +111,8 @@ function useLoaded(src, srcSet, crossOrigin, referrerPolicy) {
     if (!src && !srcSet) {
       return undefined;
     }
+
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     setLoaded(false);
     let active = true;
     const image = new Image();

package/node_modules/@mui/material/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/node_modules/@mui/material/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/node_modules/@mui/material/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/node_modules/@mui/material/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/node_modules/@mui/material/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)

package/node_modules/@mui/material/BottomNavigationAction/BottomNavigationAction.mjs

@@ -9,6 +9,7 @@ import memoTheme from "../utils/memoTheme.mjs";
 import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
 import ButtonBase from "../ButtonBase/index.mjs";
 import unsupportedProp from "../utils/unsupportedProp.mjs";
+import { getTransitionStyles } from "../transitions/utils.mjs";
 import bottomNavigationActionClasses, { getBottomNavigationActionUtilityClass } from "./bottomNavigationActionClasses.mjs";
 import useSlot from "../utils/useSlot.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -36,7 +37,7 @@ const BottomNavigationActionRoot = styled(ButtonBase, {
 })(memoTheme(({
   theme
 }) => ({
-  transition: theme.transitions.create(['color', 'padding-top'], {
+  ...getTransitionStyles(theme, ['color', 'padding-top'], {
     duration: theme.transitions.duration.short
   }),
   padding: '0px 12px',
@@ -76,7 +77,10 @@ const BottomNavigationActionLabel = styled('span', {
   fontFamily: theme.typography.fontFamily,
   fontSize: theme.typography.pxToRem(12),
   opacity: 1,
-  transition: 'font-size 0.2s, opacity 0.2s',
+  ...getTransitionStyles(theme, ['font-size', 'opacity'], {
+    duration: '0.2s',
+    easing: 'ease'
+  }),
   transitionDelay: '0.1s',
   [`&.${bottomNavigationActionClasses.selected}`]: {
     fontSize: theme.typography.pxToRem(14)