@mui/material 5.11.8 → 5.11.10

package/Tooltip/tooltipClasses.d.ts

@@ -1,30 +1,30 @@
-export interface TooltipClasses {
-    /** Styles applied to the Popper component. */
-    popper: string;
-    /** Styles applied to the Popper component unless `disableInteractive={true}`. */
-    popperInteractive: string;
-    /** Styles applied to the Popper component if `arrow={true}`. */
-    popperArrow: string;
-    /** Styles applied to the Popper component unless the tooltip is open. */
-    popperClose: string;
-    /** Styles applied to the tooltip (label wrapper) element. */
-    tooltip: string;
-    /** Styles applied to the tooltip (label wrapper) element if `arrow={true}`. */
-    tooltipArrow: string;
-    /** Styles applied to the arrow element. */
-    arrow: string;
-    /** Styles applied to the tooltip (label wrapper) element if the tooltip is opened by touch. */
-    touch: string;
-    /** Styles applied to the tooltip (label wrapper) element if `placement` contains "left". */
-    tooltipPlacementLeft: string;
-    /** Styles applied to the tooltip (label wrapper) element if `placement` contains "right". */
-    tooltipPlacementRight: string;
-    /** Styles applied to the tooltip (label wrapper) element if `placement` contains "top". */
-    tooltipPlacementTop: string;
-    /** Styles applied to the tooltip (label wrapper) element if `placement` contains "bottom". */
-    tooltipPlacementBottom: string;
-}
-export type TooltipClassKey = keyof TooltipClasses;
-export declare function getTooltipUtilityClass(slot: string): string;
-declare const tooltipClasses: TooltipClasses;
-export default tooltipClasses;
+export interface TooltipClasses {
+    /** Styles applied to the Popper component. */
+    popper: string;
+    /** Styles applied to the Popper component unless `disableInteractive={true}`. */
+    popperInteractive: string;
+    /** Styles applied to the Popper component if `arrow={true}`. */
+    popperArrow: string;
+    /** Styles applied to the Popper component unless the tooltip is open. */
+    popperClose: string;
+    /** Styles applied to the tooltip (label wrapper) element. */
+    tooltip: string;
+    /** Styles applied to the tooltip (label wrapper) element if `arrow={true}`. */
+    tooltipArrow: string;
+    /** Styles applied to the arrow element. */
+    arrow: string;
+    /** Styles applied to the tooltip (label wrapper) element if the tooltip is opened by touch. */
+    touch: string;
+    /** Styles applied to the tooltip (label wrapper) element if `placement` contains "left". */
+    tooltipPlacementLeft: string;
+    /** Styles applied to the tooltip (label wrapper) element if `placement` contains "right". */
+    tooltipPlacementRight: string;
+    /** Styles applied to the tooltip (label wrapper) element if `placement` contains "top". */
+    tooltipPlacementTop: string;
+    /** Styles applied to the tooltip (label wrapper) element if `placement` contains "bottom". */
+    tooltipPlacementBottom: string;
+}
+export type TooltipClassKey = keyof TooltipClasses;
+export declare function getTooltipUtilityClass(slot: string): string;
+declare const tooltipClasses: TooltipClasses;
+export default tooltipClasses;

package/Typography/typographyClasses.d.ts

@@ -1,50 +1,50 @@
-export interface TypographyClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if `variant="body2"`. */
-    body2: string;
-    /** Styles applied to the root element if `variant="body1"`. */
-    body1: string;
-    /** Styles applied to the root element if `variant="caption"`. */
-    caption: string;
-    /** Styles applied to the root element if `variant="button"`. */
-    button: string;
-    /** Styles applied to the root element if `variant="h1"`. */
-    h1: string;
-    /** Styles applied to the root element if `variant="h2"`. */
-    h2: string;
-    /** Styles applied to the root element if `variant="h3"`. */
-    h3: string;
-    /** Styles applied to the root element if `variant="h4"`. */
-    h4: string;
-    /** Styles applied to the root element if `variant="h5"`. */
-    h5: string;
-    /** Styles applied to the root element if `variant="h6"`. */
-    h6: string;
-    /** Styles applied to the root element if `variant="subtitle1"`. */
-    subtitle1: string;
-    /** Styles applied to the root element if `variant="subtitle2"`. */
-    subtitle2: string;
-    /** Styles applied to the root element if `variant="overline"`. */
-    overline: string;
-    /** Styles applied to the root element if `variant="inherit"`. */
-    inherit: string;
-    /** Styles applied to the root element if `align="left"`. */
-    alignLeft: string;
-    /** Styles applied to the root element if `align="center"`. */
-    alignCenter: string;
-    /** Styles applied to the root element if `align="right"`. */
-    alignRight: string;
-    /** Styles applied to the root element if `align="justify"`. */
-    alignJustify: string;
-    /** Styles applied to the root element if `nowrap={true}`. */
-    noWrap: string;
-    /** Styles applied to the root element if `gutterBottom={true}`. */
-    gutterBottom: string;
-    /** Styles applied to the root element if `paragraph={true}`. */
-    paragraph: string;
-}
-export type TypographyClassKey = keyof TypographyClasses;
-export declare function getTypographyUtilityClass(slot: string): string;
-declare const typographyClasses: TypographyClasses;
-export default typographyClasses;
+export interface TypographyClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if `variant="body2"`. */
+    body2: string;
+    /** Styles applied to the root element if `variant="body1"`. */
+    body1: string;
+    /** Styles applied to the root element if `variant="caption"`. */
+    caption: string;
+    /** Styles applied to the root element if `variant="button"`. */
+    button: string;
+    /** Styles applied to the root element if `variant="h1"`. */
+    h1: string;
+    /** Styles applied to the root element if `variant="h2"`. */
+    h2: string;
+    /** Styles applied to the root element if `variant="h3"`. */
+    h3: string;
+    /** Styles applied to the root element if `variant="h4"`. */
+    h4: string;
+    /** Styles applied to the root element if `variant="h5"`. */
+    h5: string;
+    /** Styles applied to the root element if `variant="h6"`. */
+    h6: string;
+    /** Styles applied to the root element if `variant="subtitle1"`. */
+    subtitle1: string;
+    /** Styles applied to the root element if `variant="subtitle2"`. */
+    subtitle2: string;
+    /** Styles applied to the root element if `variant="overline"`. */
+    overline: string;
+    /** Styles applied to the root element if `variant="inherit"`. */
+    inherit: string;
+    /** Styles applied to the root element if `align="left"`. */
+    alignLeft: string;
+    /** Styles applied to the root element if `align="center"`. */
+    alignCenter: string;
+    /** Styles applied to the root element if `align="right"`. */
+    alignRight: string;
+    /** Styles applied to the root element if `align="justify"`. */
+    alignJustify: string;
+    /** Styles applied to the root element if `nowrap={true}`. */
+    noWrap: string;
+    /** Styles applied to the root element if `gutterBottom={true}`. */
+    gutterBottom: string;
+    /** Styles applied to the root element if `paragraph={true}`. */
+    paragraph: string;
+}
+export type TypographyClassKey = keyof TypographyClasses;
+export declare function getTypographyUtilityClass(slot: string): string;
+declare const typographyClasses: TypographyClasses;
+export default typographyClasses;

package/Unstable_Grid2/Grid2.d.ts

@@ -1,4 +1,4 @@
-import { OverridableComponent } from '@mui/types';
-import { Grid2TypeMap } from './Grid2Props';
-declare const Grid2: OverridableComponent<Grid2TypeMap<{}, "div">>;
-export default Grid2;
+import { OverridableComponent } from '@mui/types';
+import { Grid2TypeMap } from './Grid2Props';
+declare const Grid2: OverridableComponent<Grid2TypeMap<{}, "div">>;
+export default Grid2;

package/Unstable_Grid2/Grid2Props.d.ts

@@ -1,15 +1,15 @@
-import * as React from 'react';
-import { OverrideProps } from '@mui/types';
-import { SxProps, SystemProps } from '@mui/system';
-import { GridBaseProps } from '@mui/system/Unstable_Grid';
-import { Theme } from '../styles';
-export type Grid2Slot = 'root';
-export interface Grid2TypeMap<P = {}, D extends React.ElementType = 'div'> {
-    props: P & GridBaseProps & {
-        sx?: SxProps<Theme>;
-    } & SystemProps<Theme>;
-    defaultComponent: D;
-}
-export type Grid2Props<D extends React.ElementType = Grid2TypeMap['defaultComponent'], P = {
-    component?: React.ElementType;
-}> = OverrideProps<Grid2TypeMap<P, D>, D>;
+import * as React from 'react';
+import { OverrideProps } from '@mui/types';
+import { SxProps, SystemProps } from '@mui/system';
+import { GridBaseProps } from '@mui/system/Unstable_Grid';
+import { Theme } from '../styles';
+export type Grid2Slot = 'root';
+export interface Grid2TypeMap<P = {}, D extends React.ElementType = 'div'> {
+    props: P & GridBaseProps & {
+        sx?: SxProps<Theme>;
+    } & SystemProps<Theme>;
+    defaultComponent: D;
+}
+export type Grid2Props<D extends React.ElementType = Grid2TypeMap['defaultComponent'], P = {
+    component?: React.ElementType;
+}> = OverrideProps<Grid2TypeMap<P, D>, D>;

package/Unstable_Grid2/grid2Classes.d.ts

@@ -1,5 +1,5 @@
-import { GridClasses } from '@mui/system/Unstable_Grid';
-export type Grid2ClassKey = keyof GridClasses;
-export declare function getGrid2UtilityClass(slot: string): string;
-declare const grid2Classes: GridClasses;
-export default grid2Classes;
+import { GridClasses } from '@mui/system/Unstable_Grid';
+export type Grid2ClassKey = keyof GridClasses;
+export declare function getGrid2UtilityClass(slot: string): string;
+declare const grid2Classes: GridClasses;
+export default grid2Classes;

package/Unstable_Grid2/index.d.ts

@@ -1,4 +1,4 @@
-export { default } from './Grid2';
-export * from './Grid2Props';
-export { default as grid2Classes } from './grid2Classes';
-export * from './grid2Classes';
+export { default } from './Grid2';
+export * from './Grid2Props';
+export { default as grid2Classes } from './grid2Classes';
+export * from './grid2Classes';

package/className/index.d.ts

@@ -1 +1 @@
-export { unstable_ClassNameGenerator } from '@mui/utils';
+export { unstable_ClassNameGenerator } from '@mui/utils';

package/darkScrollbar/index.d.ts

@@ -1,28 +1,28 @@
-export default function darkScrollbar(options?: {
-    track: string;
-    thumb: string;
-    active: string;
-}): {
-    scrollbarColor: string;
-    '&::-webkit-scrollbar, & *::-webkit-scrollbar': {
-        backgroundColor: string;
-    };
-    '&::-webkit-scrollbar-thumb, & *::-webkit-scrollbar-thumb': {
-        borderRadius: number;
-        backgroundColor: string;
-        minHeight: number;
-        border: string;
-    };
-    '&::-webkit-scrollbar-thumb:focus, & *::-webkit-scrollbar-thumb:focus': {
-        backgroundColor: string;
-    };
-    '&::-webkit-scrollbar-thumb:active, & *::-webkit-scrollbar-thumb:active': {
-        backgroundColor: string;
-    };
-    '&::-webkit-scrollbar-thumb:hover, & *::-webkit-scrollbar-thumb:hover': {
-        backgroundColor: string;
-    };
-    '&::-webkit-scrollbar-corner, & *::-webkit-scrollbar-corner': {
-        backgroundColor: string;
-    };
-};
+export default function darkScrollbar(options?: {
+    track: string;
+    thumb: string;
+    active: string;
+}): {
+    scrollbarColor: string;
+    '&::-webkit-scrollbar, & *::-webkit-scrollbar': {
+        backgroundColor: string;
+    };
+    '&::-webkit-scrollbar-thumb, & *::-webkit-scrollbar-thumb': {
+        borderRadius: number;
+        backgroundColor: string;
+        minHeight: number;
+        border: string;
+    };
+    '&::-webkit-scrollbar-thumb:focus, & *::-webkit-scrollbar-thumb:focus': {
+        backgroundColor: string;
+    };
+    '&::-webkit-scrollbar-thumb:active, & *::-webkit-scrollbar-thumb:active': {
+        backgroundColor: string;
+    };
+    '&::-webkit-scrollbar-thumb:hover, & *::-webkit-scrollbar-thumb:hover': {
+        backgroundColor: string;
+    };
+    '&::-webkit-scrollbar-corner, & *::-webkit-scrollbar-corner': {
+        backgroundColor: string;
+    };
+};

package/generateUtilityClass/index.d.ts

@@ -1,2 +1,2 @@
-export { unstable_generateUtilityClass as default } from '@mui/utils';
-export type { GlobalStateSlot } from '@mui/utils';
+export { unstable_generateUtilityClass as default } from '@mui/utils';
+export type { GlobalStateSlot } from '@mui/utils';

package/generateUtilityClasses/index.d.ts

@@ -1 +1 @@
-export { unstable_generateUtilityClasses as default } from '@mui/utils';
+export { unstable_generateUtilityClasses as default } from '@mui/utils';

package/index.js

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

package/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/internal/switchBaseClasses.d.ts

@@ -1,12 +1,12 @@
-export interface SwitchBaseClasses {
-    root: string;
-    checked: string;
-    disabled: string;
-    input: string;
-    edgeStart: string;
-    edgeEnd: string;
-}
-export type SwitchBaseClassKey = keyof SwitchBaseClasses;
-export declare function getSwitchBaseUtilityClass(slot: string): string;
-declare const switchBaseClasses: SwitchBaseClasses;
-export default switchBaseClasses;
+export interface SwitchBaseClasses {
+    root: string;
+    checked: string;
+    disabled: string;
+    input: string;
+    edgeStart: string;
+    edgeEnd: string;
+}
+export type SwitchBaseClassKey = keyof SwitchBaseClasses;
+export declare function getSwitchBaseUtilityClass(slot: string): string;
+declare const switchBaseClasses: SwitchBaseClasses;
+export default switchBaseClasses;

package/legacy/AppBar/AppBar.js

@@ -23,7 +23,7 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
 // var2 is the fallback.
 // Ex. var1: 'var(--a)', var2: 'var(--b)'; return: 'var(--a, var(--b))'
 var joinVars = function joinVars(var1, var2) {
-  return "".concat(var1 == null ? void 0 : var1.replace(')', ''), ", ").concat(var2, ")");
+  return var1 ? "".concat(var1 == null ? void 0 : var1.replace(')', ''), ", ").concat(var2, ")") : var2;
 };
 var AppBarRoot = styled(Paper, {
   name: 'MuiAppBar',

package/legacy/Autocomplete/Autocomplete.js

@@ -132,7 +132,16 @@ var AutocompleteRoot = styled('div', {
     padding: '2.5px 4px'
   })), _defineProperty(_extends3, "& .".concat(inputBaseClasses.hiddenLabel), {
     paddingTop: 8
-  }), _defineProperty(_extends3, "& .".concat(autocompleteClasses.input), _extends({
+  }), _defineProperty(_extends3, "& .".concat(filledInputClasses.root, ".").concat(inputBaseClasses.hiddenLabel), _defineProperty({
+    paddingTop: 0,
+    paddingBottom: 0
+  }, "& .".concat(autocompleteClasses.input), {
+    paddingTop: 16,
+    paddingBottom: 17
+  })), _defineProperty(_extends3, "& .".concat(filledInputClasses.root, ".").concat(inputBaseClasses.hiddenLabel, ".").concat(inputBaseClasses.sizeSmall), _defineProperty({}, "& .".concat(autocompleteClasses.input), {
+    paddingTop: 8,
+    paddingBottom: 9
+  })), _defineProperty(_extends3, "& .".concat(autocompleteClasses.input), _extends({
     flexGrow: 1,
     textOverflow: 'ellipsis',
     opacity: 0

package/legacy/Avatar/Avatar.js

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

package/legacy/Backdrop/Backdrop.js

@@ -48,13 +48,13 @@ var Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
     name: 'MuiBackdrop'
   });
   var children = props.children,
+    className = props.className,
     _props$component = props.component,
     component = _props$component === void 0 ? 'div' : _props$component,
     _props$components = props.components,
     components = _props$components === void 0 ? {} : _props$components,
     _props$componentsProp = props.componentsProps,
     componentsProps = _props$componentsProp === void 0 ? {} : _props$componentsProp,
-    className = props.className,
     _props$invisible = props.invisible,
     invisible = _props$invisible === void 0 ? false : _props$invisible,
     open = props.open,
@@ -62,10 +62,10 @@ var Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
     slotProps = _props$slotProps === void 0 ? {} : _props$slotProps,
     _props$slots = props.slots,
     slots = _props$slots === void 0 ? {} : _props$slots,
-    transitionDuration = props.transitionDuration,
     _props$TransitionComp = props.TransitionComponent,
     TransitionComponent = _props$TransitionComp === void 0 ? Fade : _props$TransitionComp,
-    other = _objectWithoutProperties(props, ["children", "component", "components", "componentsProps", "className", "invisible", "open", "slotProps", "slots", "transitionDuration", "TransitionComponent"]);
+    transitionDuration = props.transitionDuration,
+    other = _objectWithoutProperties(props, ["children", "className", "component", "components", "componentsProps", "invisible", "open", "slotProps", "slots", "TransitionComponent", "transitionDuration"]);
   var ownerState = _extends({}, props, {
     component: component,
     invisible: invisible
@@ -168,6 +168,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/legacy/Badge/Badge.js

@@ -6,13 +6,14 @@ 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";
 var RADIUS_STANDARD = 10;
 var RADIUS_DOT = 4;
 var useUtilityClasses = function useUtilityClasses(ownerState) {
@@ -158,19 +159,21 @@ var Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
       horizontal: 'right'
     } : _props$anchorOrigin,
     className = props.className,
-    _props$component = props.component,
-    component = _props$component === void 0 ? 'span' : _props$component,
+    classesProp = props.classes,
+    component = props.component,
     _props$components = props.components,
     components = _props$components === void 0 ? {} : _props$components,
     _props$componentsProp = props.componentsProps,
     componentsProps = _props$componentsProp === void 0 ? {} : _props$componentsProp,
+    children = props.children,
     _props$overlap = props.overlap,
     overlapProp = _props$overlap === void 0 ? 'rectangular' : _props$overlap,
     _props$color = props.color,
     colorProp = _props$color === void 0 ? 'default' : _props$color,
     _props$invisible = props.invisible,
     invisibleProp = _props$invisible === void 0 ? false : _props$invisible,
-    max = props.max,
+    _props$max = props.max,
+    maxProp = _props$max === void 0 ? 99 : _props$max,
     badgeContentProp = props.badgeContent,
     slots = props.slots,
     slotProps = props.slotProps,
@@ -178,17 +181,25 @@ var Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
     showZero = _props$showZero === void 0 ? false : _props$showZero,
     _props$variant = props.variant,
     variantProp = _props$variant === void 0 ? 'standard' : _props$variant,
-    other = _objectWithoutProperties(props, ["anchorOrigin", "className", "component", "components", "componentsProps", "overlap", "color", "invisible", "max", "badgeContent", "slots", "slotProps", "showZero", "variant"]);
+    other = _objectWithoutProperties(props, ["anchorOrigin", "className", "classes", "component", "components", "componentsProps", "children", "overlap", "color", "invisible", "max", "badgeContent", "slots", "slotProps", "showZero", "variant"]);
+  var _useBadge = useBadge({
+      max: maxProp,
+      invisible: invisibleProp,
+      badgeContent: badgeContentProp,
+      showZero: showZero
+    }),
+    badgeContent = _useBadge.badgeContent,
+    invisibleFromHook = _useBadge.invisible,
+    max = _useBadge.max,
+    displayValueFromHook = _useBadge.displayValue;
   var prevProps = usePreviousProps({
     anchorOrigin: anchorOriginProp,
     color: colorProp,
     overlap: overlapProp,
-    variant: variantProp
+    variant: variantProp,
+    badgeContent: badgeContentProp
   });
-  var invisible = invisibleProp;
-  if (invisibleProp === false && (badgeContentProp === 0 && !showZero || badgeContentProp == null && variantProp !== 'dot')) {
-    invisible = true;
-  }
+  var invisible = invisibleFromHook || badgeContent == null && variantProp !== 'dot';
   var _ref10 = invisible ? prevProps : props,
     _ref10$color = _ref10.color,
     color = _ref10$color === void 0 ? colorProp : _ref10$color,
@@ -198,57 +209,46 @@ var Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
     anchorOrigin = _ref10$anchorOrigin === void 0 ? anchorOriginProp : _ref10$anchorOrigin,
     _ref10$variant = _ref10.variant,
     variant = _ref10$variant === void 0 ? variantProp : _ref10$variant;
+  var displayValue = variant !== 'dot' ? displayValueFromHook : undefined;
   var ownerState = _extends({}, props, {
-    anchorOrigin: anchorOrigin,
+    badgeContent: badgeContent,
     invisible: invisible,
+    max: max,
+    displayValue: displayValue,
+    showZero: showZero,
+    anchorOrigin: anchorOrigin,
     color: color,
     overlap: overlap,
     variant: variant
   });
   var classes = useUtilityClasses(ownerState);
-  var displayValue;
-  if (variant !== 'dot') {
-    displayValue = badgeContentProp && Number(badgeContentProp) > max ? "".concat(max, "+") : badgeContentProp;
-  }
 
   // support both `slots` and `components` for backward compatibility
   var RootSlot = (_ref11 = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : components.Root) != null ? _ref11 : BadgeRoot;
   var BadgeSlot = (_ref12 = (_slots$badge = slots == null ? void 0 : slots.badge) != null ? _slots$badge : components.Badge) != null ? _ref12 : BadgeBadge;
   var rootSlotProps = (_slotProps$root = slotProps == null ? void 0 : slotProps.root) != null ? _slotProps$root : componentsProps.root;
   var badgeSlotProps = (_slotProps$badge = slotProps == null ? void 0 : slotProps.badge) != null ? _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 == null ? void 0 : rootSlotProps.className, classes.root, className),
-    slotProps: {
-      root: _extends({}, rootSlotProps, shouldSpreadAdditionalProps(RootSlot) && {
-        as: component,
-        ownerState: _extends({}, rootSlotProps == null ? void 0 : rootSlotProps.ownerState, {
-          anchorOrigin: anchorOrigin,
-          color: color,
-          overlap: overlap,
-          variant: variant
-        })
-      }),
-      badge: _extends({}, badgeSlotProps, {
-        className: clsx(classes.badge, badgeSlotProps == null ? void 0 : badgeSlotProps.className)
-      }, shouldSpreadAdditionalProps(BadgeSlot) && {
-        ownerState: _extends({}, badgeSlotProps == null ? void 0 : badgeSlotProps.ownerState, {
-          anchorOrigin: anchorOrigin,
-          color: color,
-          overlap: overlap,
-          variant: variant
-        })
-      })
+  var rootProps = useSlotProps({
+    elementType: RootSlot,
+    externalSlotProps: rootSlotProps,
+    externalForwardedProps: other,
+    additionalProps: {
+      ref: ref,
+      as: component
     },
-    ref: ref
+    ownerState: ownerState,
+    className: clsx(rootSlotProps == null ? void 0 : rootSlotProps.className, classes.root, className)
+  });
+  var badgeProps = useSlotProps({
+    elementType: BadgeSlot,
+    externalSlotProps: badgeSlotProps,
+    ownerState: ownerState,
+    className: clsx(classes.badge, badgeSlotProps == null ? void 0 : 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/legacy/Dialog/DialogContext.js

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

package/legacy/SwipeableDrawer/SwipeableDrawer.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 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';
@@ -217,7 +217,7 @@ var SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(inP
     }
     claimedSwipeInstance = null;
     touchDetected.current = false;
-    flushSync(function () {
+    ReactDOM.flushSync(function () {
       setMaybeSwiping(false);
     });
 
@@ -270,7 +270,7 @@ var SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(inP
       // 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(function () {
+        ReactDOM.flushSync(function () {
           setMaybeSwiping(true);
         });
       }

package/legacy/index.js

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

package/legacy/internal/SwitchBase.js

@@ -149,7 +149,7 @@ var 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,