@mui/material 5.11.9 → 5.11.10

package/modern/Avatar/Avatar.js

@@ -168,6 +168,7 @@ const Avatar = /*#__PURE__*/React.forwardRef(function Avatar(inProps, ref) {
     children = alt[0];
   } else {
     children = /*#__PURE__*/_jsx(AvatarFallback, {
+      ownerState: ownerState,
       className: classes.fallback
     });
   }

package/modern/Backdrop/Backdrop.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["children", "component", "components", "componentsProps", "className", "invisible", "open", "slotProps", "slots", "transitionDuration", "TransitionComponent"];
+const _excluded = ["children", "className", "component", "components", "componentsProps", "invisible", "open", "slotProps", "slots", "TransitionComponent", "transitionDuration"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -52,17 +52,16 @@ const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
   });
   const {
       children,
+      className,
       component = 'div',
       components = {},
       componentsProps = {},
-      className,
       invisible = false,
       open,
       slotProps = {},
       slots = {},
-      transitionDuration,
-      // eslint-disable-next-line react/prop-types
-      TransitionComponent = Fade
+      TransitionComponent = Fade,
+      transitionDuration
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const ownerState = _extends({}, props, {
@@ -167,6 +166,12 @@ process.env.NODE_ENV !== "production" ? Backdrop.propTypes /* remove-proptypes *
    * 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]),
+  /**
+   * The component used for the transition.
+   * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
+   * @default Fade
+   */
+  TransitionComponent: PropTypes.elementType,
   /**
    * The duration for the transition, in milliseconds.
    * You may specify a single timeout for all transitions, or individually with an object.

package/modern/Badge/Badge.js

@@ -1,18 +1,19 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["anchorOrigin", "className", "component", "components", "componentsProps", "overlap", "color", "invisible", "max", "badgeContent", "slots", "slotProps", "showZero", "variant"];
+const _excluded = ["anchorOrigin", "className", "classes", "component", "components", "componentsProps", "children", "overlap", "color", "invisible", "max", "badgeContent", "slots", "slotProps", "showZero", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { usePreviousProps } from '@mui/utils';
 import composeClasses from '@mui/base/composeClasses';
-import BadgeUnstyled from '@mui/base/BadgeUnstyled';
+import { useBadge } from '@mui/base/BadgeUnstyled';
+import { useSlotProps } from '@mui/base';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
-import shouldSpreadAdditionalProps from '../utils/shouldSpreadAdditionalProps';
 import capitalize from '../utils/capitalize';
 import badgeClasses, { getBadgeUtilityClass } from './badgeClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const RADIUS_STANDARD = 10;
 const RADIUS_DOT = 4;
 const useUtilityClasses = ownerState => {
@@ -165,13 +166,14 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
         horizontal: 'right'
       },
       className,
-      component = 'span',
+      component,
       components = {},
       componentsProps = {},
+      children,
       overlap: overlapProp = 'rectangular',
       color: colorProp = 'default',
       invisible: invisibleProp = false,
-      max,
+      max: maxProp = 99,
       badgeContent: badgeContentProp,
       slots,
       slotProps,
@@ -179,73 +181,71 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
       variant: variantProp = 'standard'
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
+  const {
+    badgeContent,
+    invisible: invisibleFromHook,
+    max,
+    displayValue: displayValueFromHook
+  } = useBadge({
+    max: maxProp,
+    invisible: invisibleProp,
+    badgeContent: badgeContentProp,
+    showZero
+  });
   const prevProps = usePreviousProps({
     anchorOrigin: anchorOriginProp,
     color: colorProp,
     overlap: overlapProp,
-    variant: variantProp
+    variant: variantProp,
+    badgeContent: badgeContentProp
   });
-  let invisible = invisibleProp;
-  if (invisibleProp === false && (badgeContentProp === 0 && !showZero || badgeContentProp == null && variantProp !== 'dot')) {
-    invisible = true;
-  }
+  const invisible = invisibleFromHook || badgeContent == null && variantProp !== 'dot';
   const {
     color = colorProp,
     overlap = overlapProp,
     anchorOrigin = anchorOriginProp,
     variant = variantProp
   } = invisible ? prevProps : props;
+  const displayValue = variant !== 'dot' ? displayValueFromHook : undefined;
   const ownerState = _extends({}, props, {
-    anchorOrigin,
+    badgeContent,
     invisible,
+    max,
+    displayValue,
+    showZero,
+    anchorOrigin,
     color,
     overlap,
     variant
   });
   const classes = useUtilityClasses(ownerState);
-  let displayValue;
-  if (variant !== 'dot') {
-    displayValue = badgeContentProp && Number(badgeContentProp) > max ? `${max}+` : badgeContentProp;
-  }
 
   // support both `slots` and `components` for backward compatibility
   const RootSlot = slots?.root ?? components.Root ?? BadgeRoot;
   const BadgeSlot = slots?.badge ?? components.Badge ?? BadgeBadge;
   const rootSlotProps = slotProps?.root ?? componentsProps.root;
   const badgeSlotProps = slotProps?.badge ?? componentsProps.badge;
-  return /*#__PURE__*/_jsx(BadgeUnstyled, _extends({
-    invisible: invisibleProp,
-    badgeContent: displayValue,
-    showZero: showZero,
-    max: max
-  }, other, {
-    slots: {
-      root: RootSlot,
-      badge: BadgeSlot
-    },
-    className: clsx(rootSlotProps?.className, classes.root, className),
-    slotProps: {
-      root: _extends({}, rootSlotProps, shouldSpreadAdditionalProps(RootSlot) && {
-        as: component,
-        ownerState: _extends({}, rootSlotProps?.ownerState, {
-          anchorOrigin,
-          color,
-          overlap,
-          variant
-        })
-      }),
-      badge: _extends({}, badgeSlotProps, {
-        className: clsx(classes.badge, badgeSlotProps?.className)
-      }, shouldSpreadAdditionalProps(BadgeSlot) && {
-        ownerState: _extends({}, badgeSlotProps?.ownerState, {
-          anchorOrigin,
-          color,
-          overlap,
-          variant
-        })
-      })
+  const rootProps = useSlotProps({
+    elementType: RootSlot,
+    externalSlotProps: rootSlotProps,
+    externalForwardedProps: other,
+    additionalProps: {
+      ref,
+      as: component
     },
-    ref: ref
+    ownerState,
+    className: clsx(rootSlotProps?.className, classes.root, className)
+  });
+  const badgeProps = useSlotProps({
+    elementType: BadgeSlot,
+    externalSlotProps: badgeSlotProps,
+    ownerState,
+    className: clsx(classes.badge, badgeSlotProps?.className)
+  });
+  return /*#__PURE__*/_jsxs(RootSlot, _extends({}, rootProps, {
+    children: [children, /*#__PURE__*/_jsx(BadgeSlot, _extends({}, badgeProps, {
+      children: displayValue
+    }))]
   }));
 });
 process.env.NODE_ENV !== "production" ? Badge.propTypes /* remove-proptypes */ = {

package/modern/Dialog/DialogContext.js

@@ -1,5 +1,5 @@
-import { createContext } from 'react';
-const DialogContext = /*#__PURE__*/createContext({});
+import * as React from 'react';
+const DialogContext = /*#__PURE__*/React.createContext({});
 if (process.env.NODE_ENV !== 'production') {
   DialogContext.displayName = 'DialogContext';
 }

package/modern/SwipeableDrawer/SwipeableDrawer.js

@@ -3,7 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["BackdropProps"],
   _excluded2 = ["anchor", "disableBackdropTransition", "disableDiscovery", "disableSwipeToOpen", "hideBackdrop", "hysteresis", "allowSwipeInChildren", "minFlingVelocity", "ModalProps", "onClose", "onOpen", "open", "PaperProps", "SwipeAreaProps", "swipeAreaWidth", "transitionDuration", "variant"];
 import * as React from 'react';
-import { flushSync } from 'react-dom';
+import * as ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import { elementTypeAcceptingRef } from '@mui/utils';
 import { useThemeProps } from '@mui/system';
@@ -207,7 +207,7 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
     }
     claimedSwipeInstance = null;
     touchDetected.current = false;
-    flushSync(() => {
+    ReactDOM.flushSync(() => {
       setMaybeSwiping(false);
     });
 
@@ -259,7 +259,7 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
       // this is because Safari Mobile will not fire any mouse events (still fires touch though) if the DOM changes during mousemove.
       // so do this change on first touchmove instead of touchstart
       if (force || !(disableDiscovery && allowSwipeInChildren)) {
-        flushSync(() => {
+        ReactDOM.flushSync(() => {
           setMaybeSwiping(true);
         });
       }

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.11.9
+ * @mui/material v5.11.10
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/internal/SwitchBase.js

@@ -146,7 +146,7 @@ const SwitchBase = /*#__PURE__*/React.forwardRef(function SwitchBase(props, ref)
       defaultChecked: defaultChecked,
       className: classes.input,
       disabled: disabled,
-      id: hasLabelFor && id,
+      id: hasLabelFor ? id : undefined,
       name: name,
       onChange: handleInputChange,
       readOnly: readOnly,

package/modern/useMediaQuery/useMediaQuery.js

@@ -7,9 +7,8 @@ import useEnhancedEffect from '../utils/useEnhancedEffect';
  */
 
 function useMediaQueryOld(query, defaultMatches, matchMedia, ssrMatchMedia, noSsr) {
-  const supportMatchMedia = typeof window !== 'undefined' && typeof window.matchMedia !== 'undefined';
   const [match, setMatch] = React.useState(() => {
-    if (noSsr && supportMatchMedia) {
+    if (noSsr && matchMedia) {
       return matchMedia(query).matches;
     }
     if (ssrMatchMedia) {
@@ -22,7 +21,7 @@ function useMediaQueryOld(query, defaultMatches, matchMedia, ssrMatchMedia, noSs
   });
   useEnhancedEffect(() => {
     let active = true;
-    if (!supportMatchMedia) {
+    if (!matchMedia) {
       return undefined;
     }
     const queryList = matchMedia(query);
@@ -41,15 +40,18 @@ function useMediaQueryOld(query, defaultMatches, matchMedia, ssrMatchMedia, noSs
       active = false;
       queryList.removeListener(updateMatch);
     };
-  }, [query, matchMedia, supportMatchMedia]);
+  }, [query, matchMedia]);
   return match;
 }
 
 // eslint-disable-next-line no-useless-concat -- Workaround for https://github.com/webpack/webpack/issues/14814
 const maybeReactUseSyncExternalStore = React['useSyncExternalStore' + ''];
-function useMediaQueryNew(query, defaultMatches, matchMedia, ssrMatchMedia) {
+function useMediaQueryNew(query, defaultMatches, matchMedia, ssrMatchMedia, noSsr) {
   const getDefaultSnapshot = React.useCallback(() => defaultMatches, [defaultMatches]);
   const getServerSnapshot = React.useMemo(() => {
+    if (noSsr && matchMedia) {
+      return () => matchMedia(query).matches;
+    }
     if (ssrMatchMedia !== null) {
       const {
         matches
@@ -57,7 +59,7 @@ function useMediaQueryNew(query, defaultMatches, matchMedia, ssrMatchMedia) {
       return () => matches;
     }
     return getDefaultSnapshot;
-  }, [getDefaultSnapshot, query, ssrMatchMedia]);
+  }, [getDefaultSnapshot, query, ssrMatchMedia, noSsr, matchMedia]);
   const [getSnapshot, subscribe] = React.useMemo(() => {
     if (matchMedia === null) {
       return [getDefaultSnapshot, () => () => {}];
@@ -85,7 +87,7 @@ export default function useMediaQuery(queryInput, options = {}) {
     defaultMatches = false,
     matchMedia = supportMatchMedia ? window.matchMedia : null,
     ssrMatchMedia = null,
-    noSsr
+    noSsr = false
   } = getThemeProps({
     name: 'MuiUseMediaQuery',
     props: options,

package/node/Avatar/Avatar.js

@@ -177,6 +177,7 @@ const Avatar = /*#__PURE__*/React.forwardRef(function Avatar(inProps, ref) {
     children = alt[0];
   } else {
     children = /*#__PURE__*/(0, _jsxRuntime.jsx)(AvatarFallback, {
+      ownerState: ownerState,
       className: classes.fallback
     });
   }

package/node/Backdrop/Backdrop.js

@@ -16,7 +16,7 @@ var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _Fade = _interopRequireDefault(require("../Fade"));
 var _backdropClasses = require("./backdropClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["children", "component", "components", "componentsProps", "className", "invisible", "open", "slotProps", "slots", "transitionDuration", "TransitionComponent"];
+const _excluded = ["children", "className", "component", "components", "componentsProps", "invisible", "open", "slotProps", "slots", "TransitionComponent", "transitionDuration"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const useUtilityClasses = ownerState => {
@@ -62,17 +62,16 @@ const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
   });
   const {
       children,
+      className,
       component = 'div',
       components = {},
       componentsProps = {},
-      className,
       invisible = false,
       open,
       slotProps = {},
       slots = {},
-      transitionDuration,
-      // eslint-disable-next-line react/prop-types
-      TransitionComponent = _Fade.default
+      TransitionComponent = _Fade.default,
+      transitionDuration
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const ownerState = (0, _extends2.default)({}, props, {
@@ -177,6 +176,12 @@ process.env.NODE_ENV !== "production" ? Backdrop.propTypes /* remove-proptypes *
    * 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]),
+  /**
+   * The component used for the transition.
+   * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
+   * @default Fade
+   */
+  TransitionComponent: _propTypes.default.elementType,
   /**
    * The duration for the transition, in milliseconds.
    * You may specify a single timeout for all transitions, or individually with an object.

package/node/Badge/Badge.js

@@ -12,14 +12,14 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 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 _BadgeUnstyled = require("@mui/base/BadgeUnstyled");
+var _base = require("@mui/base");
 var _styled = _interopRequireDefault(require("../styles/styled"));
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
-var _shouldSpreadAdditionalProps = _interopRequireDefault(require("../utils/shouldSpreadAdditionalProps"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _badgeClasses = _interopRequireWildcard(require("./badgeClasses"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["anchorOrigin", "className", "component", "components", "componentsProps", "overlap", "color", "invisible", "max", "badgeContent", "slots", "slotProps", "showZero", "variant"];
+const _excluded = ["anchorOrigin", "className", "classes", "component", "components", "componentsProps", "children", "overlap", "color", "invisible", "max", "badgeContent", "slots", "slotProps", "showZero", "variant"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const RADIUS_STANDARD = 10;
@@ -175,13 +175,14 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
         horizontal: 'right'
       },
       className,
-      component = 'span',
+      component,
       components = {},
       componentsProps = {},
+      children,
       overlap: overlapProp = 'rectangular',
       color: colorProp = 'default',
       invisible: invisibleProp = false,
-      max,
+      max: maxProp = 99,
       badgeContent: badgeContentProp,
       slots,
       slotProps,
@@ -189,73 +190,71 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
       variant: variantProp = 'standard'
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const {
+    badgeContent,
+    invisible: invisibleFromHook,
+    max,
+    displayValue: displayValueFromHook
+  } = (0, _BadgeUnstyled.useBadge)({
+    max: maxProp,
+    invisible: invisibleProp,
+    badgeContent: badgeContentProp,
+    showZero
+  });
   const prevProps = (0, _utils.usePreviousProps)({
     anchorOrigin: anchorOriginProp,
     color: colorProp,
     overlap: overlapProp,
-    variant: variantProp
+    variant: variantProp,
+    badgeContent: badgeContentProp
   });
-  let invisible = invisibleProp;
-  if (invisibleProp === false && (badgeContentProp === 0 && !showZero || badgeContentProp == null && variantProp !== 'dot')) {
-    invisible = true;
-  }
+  const invisible = invisibleFromHook || badgeContent == null && variantProp !== 'dot';
   const {
     color = colorProp,
     overlap = overlapProp,
     anchorOrigin = anchorOriginProp,
     variant = variantProp
   } = invisible ? prevProps : props;
+  const displayValue = variant !== 'dot' ? displayValueFromHook : undefined;
   const ownerState = (0, _extends2.default)({}, props, {
-    anchorOrigin,
+    badgeContent,
     invisible,
+    max,
+    displayValue,
+    showZero,
+    anchorOrigin,
     color,
     overlap,
     variant
   });
   const classes = useUtilityClasses(ownerState);
-  let displayValue;
-  if (variant !== 'dot') {
-    displayValue = badgeContentProp && Number(badgeContentProp) > max ? `${max}+` : badgeContentProp;
-  }
 
   // support both `slots` and `components` for backward compatibility
   const RootSlot = (_ref = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : components.Root) != null ? _ref : BadgeRoot;
   const BadgeSlot = (_ref2 = (_slots$badge = slots == null ? void 0 : slots.badge) != null ? _slots$badge : components.Badge) != null ? _ref2 : BadgeBadge;
   const rootSlotProps = (_slotProps$root = slotProps == null ? void 0 : slotProps.root) != null ? _slotProps$root : componentsProps.root;
   const badgeSlotProps = (_slotProps$badge = slotProps == null ? void 0 : slotProps.badge) != null ? _slotProps$badge : componentsProps.badge;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_BadgeUnstyled.default, (0, _extends2.default)({
-    invisible: invisibleProp,
-    badgeContent: displayValue,
-    showZero: showZero,
-    max: max
-  }, other, {
-    slots: {
-      root: RootSlot,
-      badge: BadgeSlot
-    },
-    className: (0, _clsx.default)(rootSlotProps == null ? void 0 : rootSlotProps.className, classes.root, className),
-    slotProps: {
-      root: (0, _extends2.default)({}, rootSlotProps, (0, _shouldSpreadAdditionalProps.default)(RootSlot) && {
-        as: component,
-        ownerState: (0, _extends2.default)({}, rootSlotProps == null ? void 0 : rootSlotProps.ownerState, {
-          anchorOrigin,
-          color,
-          overlap,
-          variant
-        })
-      }),
-      badge: (0, _extends2.default)({}, badgeSlotProps, {
-        className: (0, _clsx.default)(classes.badge, badgeSlotProps == null ? void 0 : badgeSlotProps.className)
-      }, (0, _shouldSpreadAdditionalProps.default)(BadgeSlot) && {
-        ownerState: (0, _extends2.default)({}, badgeSlotProps == null ? void 0 : badgeSlotProps.ownerState, {
-          anchorOrigin,
-          color,
-          overlap,
-          variant
-        })
-      })
+  const rootProps = (0, _base.useSlotProps)({
+    elementType: RootSlot,
+    externalSlotProps: rootSlotProps,
+    externalForwardedProps: other,
+    additionalProps: {
+      ref,
+      as: component
     },
-    ref: ref
+    ownerState,
+    className: (0, _clsx.default)(rootSlotProps == null ? void 0 : rootSlotProps.className, classes.root, className)
+  });
+  const badgeProps = (0, _base.useSlotProps)({
+    elementType: BadgeSlot,
+    externalSlotProps: badgeSlotProps,
+    ownerState,
+    className: (0, _clsx.default)(classes.badge, badgeSlotProps == null ? void 0 : badgeSlotProps.className)
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(RootSlot, (0, _extends2.default)({}, rootProps, {
+    children: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)(BadgeSlot, (0, _extends2.default)({}, badgeProps, {
+      children: displayValue
+    }))]
   }));
 });
 process.env.NODE_ENV !== "production" ? Badge.propTypes /* remove-proptypes */ = {

package/node/Dialog/DialogContext.js

@@ -4,8 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("react");
-const DialogContext = /*#__PURE__*/(0, _react.createContext)({});
+var React = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const DialogContext = /*#__PURE__*/React.createContext({});
 if (process.env.NODE_ENV !== 'production') {
   DialogContext.displayName = 'DialogContext';
 }

package/node/SwipeableDrawer/SwipeableDrawer.js

@@ -9,7 +9,7 @@ exports.reset = reset;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
-var _reactDom = require("react-dom");
+var ReactDOM = _interopRequireWildcard(require("react-dom"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("@mui/utils");
 var _system = require("@mui/system");
@@ -215,7 +215,7 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
     }
     claimedSwipeInstance = null;
     touchDetected.current = false;
-    (0, _reactDom.flushSync)(() => {
+    ReactDOM.flushSync(() => {
       setMaybeSwiping(false);
     });
 
@@ -267,7 +267,7 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
       // this is because Safari Mobile will not fire any mouse events (still fires touch though) if the DOM changes during mousemove.
       // so do this change on first touchmove instead of touchstart
       if (force || !(disableDiscovery && allowSwipeInChildren)) {
-        (0, _reactDom.flushSync)(() => {
+        ReactDOM.flushSync(() => {
           setMaybeSwiping(true);
         });
       }

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.11.9
+ * @mui/material v5.11.10
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/node/internal/SwitchBase.js

@@ -154,7 +154,7 @@ const SwitchBase = /*#__PURE__*/React.forwardRef(function SwitchBase(props, ref)
       defaultChecked: defaultChecked,
       className: classes.input,
       disabled: disabled,
-      id: hasLabelFor && id,
+      id: hasLabelFor ? id : undefined,
       name: name,
       onChange: handleInputChange,
       readOnly: readOnly,

package/node/useMediaQuery/useMediaQuery.js

@@ -11,9 +11,8 @@ var _useEnhancedEffect = _interopRequireDefault(require("../utils/useEnhancedEff
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function useMediaQueryOld(query, defaultMatches, matchMedia, ssrMatchMedia, noSsr) {
-  const supportMatchMedia = typeof window !== 'undefined' && typeof window.matchMedia !== 'undefined';
   const [match, setMatch] = React.useState(() => {
-    if (noSsr && supportMatchMedia) {
+    if (noSsr && matchMedia) {
       return matchMedia(query).matches;
     }
     if (ssrMatchMedia) {
@@ -26,7 +25,7 @@ function useMediaQueryOld(query, defaultMatches, matchMedia, ssrMatchMedia, noSs
   });
   (0, _useEnhancedEffect.default)(() => {
     let active = true;
-    if (!supportMatchMedia) {
+    if (!matchMedia) {
       return undefined;
     }
     const queryList = matchMedia(query);
@@ -45,15 +44,18 @@ function useMediaQueryOld(query, defaultMatches, matchMedia, ssrMatchMedia, noSs
       active = false;
       queryList.removeListener(updateMatch);
     };
-  }, [query, matchMedia, supportMatchMedia]);
+  }, [query, matchMedia]);
   return match;
 }
 
 // eslint-disable-next-line no-useless-concat -- Workaround for https://github.com/webpack/webpack/issues/14814
 const maybeReactUseSyncExternalStore = React['useSyncExternalStore' + ''];
-function useMediaQueryNew(query, defaultMatches, matchMedia, ssrMatchMedia) {
+function useMediaQueryNew(query, defaultMatches, matchMedia, ssrMatchMedia, noSsr) {
   const getDefaultSnapshot = React.useCallback(() => defaultMatches, [defaultMatches]);
   const getServerSnapshot = React.useMemo(() => {
+    if (noSsr && matchMedia) {
+      return () => matchMedia(query).matches;
+    }
     if (ssrMatchMedia !== null) {
       const {
         matches
@@ -61,7 +63,7 @@ function useMediaQueryNew(query, defaultMatches, matchMedia, ssrMatchMedia) {
       return () => matches;
     }
     return getDefaultSnapshot;
-  }, [getDefaultSnapshot, query, ssrMatchMedia]);
+  }, [getDefaultSnapshot, query, ssrMatchMedia, noSsr, matchMedia]);
   const [getSnapshot, subscribe] = React.useMemo(() => {
     if (matchMedia === null) {
       return [getDefaultSnapshot, () => () => {}];
@@ -89,7 +91,7 @@ function useMediaQuery(queryInput, options = {}) {
     defaultMatches = false,
     matchMedia = supportMatchMedia ? window.matchMedia : null,
     ssrMatchMedia = null,
-    noSsr
+    noSsr = false
   } = (0, _system.getThemeProps)({
     name: 'MuiUseMediaQuery',
     props: options,