@mui/material 5.2.1 → 5.2.5

package/modern/TextField/TextField.js

@@ -5,7 +5,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
-import { refType } from '@mui/utils';
+import { refType, unstable_useId as useId } from '@mui/utils';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import Input from '../Input';
@@ -16,8 +16,8 @@ import FormControl from '../FormControl';
 import FormHelperText from '../FormHelperText';
 import Select from '../Select';
 import { getTextFieldUtilityClass } from './textFieldClasses';
-import { jsxs as _jsxs } from "react/jsx-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const variantComponent = {
   standard: Input,
   filled: FilledInput,
@@ -90,7 +90,7 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(inProps, ref)
     FormHelperTextProps,
     fullWidth = false,
     helperText,
-    id,
+    id: idOverride,
     InputLabelProps,
     inputProps,
     InputProps,
@@ -141,12 +141,7 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(inProps, ref)
       InputMore.notched = InputLabelProps.shrink;
     }
 
-    if (label) {
-      const displayRequired = InputLabelProps?.required ?? required;
-      InputMore.label = /*#__PURE__*/_jsxs(React.Fragment, {
-        children: [label, displayRequired && '\u00a0*']
-      });
-    }
+    InputMore.label = label;
   }
 
   if (select) {
@@ -158,6 +153,7 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(inProps, ref)
     InputMore['aria-describedby'] = undefined;
   }
 
+  const id = useId(idOverride);
   const helperTextId = helperText && id ? `${id}-helper-text` : undefined;
   const inputLabelId = label && id ? `${id}-label` : undefined;
   const InputComponent = variantComponent[variant];
@@ -409,7 +405,7 @@ process.env.NODE_ENV !== "production" ? TextField.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.func, PropTypes.object]),
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
 
   /**
    * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types).

package/modern/ToggleButton/ToggleButton.js

@@ -226,7 +226,7 @@ process.env.NODE_ENV !== "production" ? ToggleButton.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.func, PropTypes.object]),
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
 
   /**
    * The value to associate with the button when selected in a

package/modern/ToggleButtonGroup/ToggleButtonGroup.js

@@ -243,7 +243,7 @@ process.env.NODE_ENV !== "production" ? ToggleButtonGroup.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.func, PropTypes.object]),
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
 
   /**
    * The currently selected value within the group or an array of selected

package/modern/Toolbar/Toolbar.js

@@ -118,7 +118,7 @@ process.env.NODE_ENV !== "production" ? Toolbar.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.func, PropTypes.object]),
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
 
   /**
    * The variant to use.

package/modern/Tooltip/Tooltip.js

@@ -791,7 +791,7 @@ process.env.NODE_ENV !== "production" ? Tooltip.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.func, PropTypes.object]),
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
 
   /**
    * Tooltip title. Zero-length titles string are never displayed.
@@ -809,7 +809,7 @@ process.env.NODE_ENV !== "production" ? Tooltip.propTypes
 
   /**
    * Props applied to the transition element.
-   * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition) component.
+   * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component.
    */
   TransitionProps: PropTypes.object
 } : void 0;

package/modern/Typography/Typography.js

@@ -180,7 +180,7 @@ process.env.NODE_ENV !== "production" ? Typography.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.func, PropTypes.object]),
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
 
   /**
    * Applies the theme typography styles.

package/modern/index.js

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

package/modern/locale/index.js

@@ -641,6 +641,86 @@ export const csCZ = {
     }
   }
 };
+export const daDK = {
+  components: {
+    MuiBreadcrumbs: {
+      defaultProps: {
+        expandText: 'Vis sti'
+      }
+    },
+    MuiTablePagination: {
+      defaultProps: {
+        getItemAriaLabel: type => {
+          if (type === 'first') {
+            return 'Gå til den første side';
+          }
+
+          if (type === 'last') {
+            return 'Gå til den sidste side';
+          }
+
+          if (type === 'next') {
+            return 'Gå til den næste side';
+          } // if (type === 'previous') {
+
+
+          return 'Gå til den forrige side';
+        },
+        labelRowsPerPage: 'Rækker pr side:',
+        labelDisplayedRows: ({
+          from,
+          to,
+          count
+        }) => `${from}-${to} af ${count !== -1 ? count : `mere end ${to}`}`
+      }
+    },
+    MuiRating: {
+      defaultProps: {
+        getLabelText: value => `${value} Stjern${value !== 1 ? 'er' : ''}`,
+        emptyLabelText: 'Tom'
+      }
+    },
+    MuiAutocomplete: {
+      defaultProps: {
+        clearText: 'Slet',
+        closeText: 'Luk',
+        loadingText: 'Indlæser…',
+        noOptionsText: 'Ingen muligheder',
+        openText: 'Åben'
+      }
+    },
+    MuiAlert: {
+      defaultProps: {
+        closeText: 'Luk'
+      }
+    },
+    MuiPagination: {
+      defaultProps: {
+        'aria-label': 'Sideinddelings navigation',
+        getItemAriaLabel: (type, page, selected) => {
+          if (type === 'page') {
+            return `${selected ? '' : 'Go to '}page ${page}`;
+          }
+
+          if (type === 'first') {
+            return 'Gå til den første side';
+          }
+
+          if (type === 'last') {
+            return 'Gå til den sidste side';
+          }
+
+          if (type === 'next') {
+            return 'Gå til den næste side';
+          } // if (type === 'previous') {
+
+
+          return 'Gå til den forrige side';
+        }
+      }
+    }
+  }
+};
 export const deDE = {
   components: {
     MuiBreadcrumbs: {

package/modern/styles/adaptV4Theme.js

@@ -32,7 +32,7 @@ export default function adaptV4Theme(inputTheme) {
     const componentValue = theme.components[component] || {};
     componentValue.defaultProps = props[component];
     theme.components[component] = componentValue;
-  }); // css overrides
+  }); // CSS overrides
 
   Object.keys(styleOverrides).forEach(component => {
     const componentValue = theme.components[component] || {};

package/modern/styles/responsiveFontSizes.js

@@ -12,7 +12,7 @@ export default function responsiveFontSizes(themeInput, options = {}) {
   const theme = _extends({}, themeInput);
 
   theme.typography = _extends({}, theme.typography);
-  const typography = theme.typography; // Convert between css lengths e.g. em->px or px->rem
+  const typography = theme.typography; // Convert between CSS lengths e.g. em->px or px->rem
   // Set the baseFontSize for your project. Defaults to 16px (also the browser default).
 
   const convert = convertLength(typography.htmlFontSize);

package/node/Accordion/Accordion.js

@@ -285,7 +285,7 @@ process.env.NODE_ENV !== "production" ? Accordion.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.func, _propTypes.default.object]),
+  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.
@@ -296,7 +296,7 @@ process.env.NODE_ENV !== "production" ? Accordion.propTypes
 
   /**
    * Props applied to the transition element.
-   * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition) component.
+   * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component.
    */
   TransitionProps: _propTypes.default.object
 } : void 0;

package/node/AccordionActions/AccordionActions.js

@@ -117,7 +117,7 @@ process.env.NODE_ENV !== "production" ? AccordionActions.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.func, _propTypes.default.object])
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
 } : void 0;
 var _default = AccordionActions;
 exports.default = _default;

package/node/AccordionDetails/AccordionDetails.js

@@ -95,7 +95,7 @@ process.env.NODE_ENV !== "production" ? AccordionDetails.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.func, _propTypes.default.object])
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
 } : void 0;
 var _default = AccordionDetails;
 exports.default = _default;

package/node/AccordionSummary/AccordionSummary.js

@@ -211,7 +211,7 @@ process.env.NODE_ENV !== "production" ? AccordionSummary.propTypes
    * This prop can help identify which element has keyboard focus.
    * The class name will be applied when the element gains the focus through keyboard interaction.
    * It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).
-   * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/master/explainer.md).
+   * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/HEAD/explainer.md).
    * A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components
    * if needed.
    */
@@ -225,7 +225,7 @@ process.env.NODE_ENV !== "production" ? AccordionSummary.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.func, _propTypes.default.object])
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
 } : void 0;
 var _default = AccordionSummary;
 exports.default = _default;

package/node/Alert/Alert.js

@@ -86,7 +86,6 @@ const AlertRoot = (0, _styled.default)(_Paper.default, {
   const getBackgroundColor = theme.palette.mode === 'light' ? _system.lighten : _system.darken;
   const color = ownerState.color || ownerState.severity;
   return (0, _extends2.default)({}, theme.typography.body2, {
-    borderRadius: theme.shape.borderRadius,
     backgroundColor: 'transparent',
     display: 'flex',
     padding: '6px 16px'
@@ -178,7 +177,6 @@ const Alert = /*#__PURE__*/React.forwardRef(function Alert(inProps, ref) {
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(AlertRoot, (0, _extends2.default)({
     role: role,
-    square: true,
     elevation: 0,
     ownerState: ownerState,
     className: (0, _clsx.default)(classes.root, className),
@@ -296,7 +294,7 @@ process.env.NODE_ENV !== "production" ? Alert.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.func, _propTypes.default.object]),
+  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 variant to use.

package/node/AlertTitle/AlertTitle.js

@@ -102,7 +102,7 @@ process.env.NODE_ENV !== "production" ? AlertTitle.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.func, _propTypes.default.object])
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
 } : void 0;
 var _default = AlertTitle;
 exports.default = _default;

package/node/AppBar/AppBar.js

@@ -190,7 +190,7 @@ process.env.NODE_ENV !== "production" ? AppBar.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.func, _propTypes.default.object])
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
 } : void 0;
 var _default = AppBar;
 exports.default = _default;

package/node/Autocomplete/Autocomplete.js

@@ -1083,7 +1083,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.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.func, _propTypes.default.object]),
+  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 value of the autocomplete.

package/node/Avatar/Avatar.js

@@ -275,7 +275,7 @@ process.env.NODE_ENV !== "production" ? Avatar.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.func, _propTypes.default.object]),
+  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 shape of the avatar.

package/node/AvatarGroup/AvatarGroup.js

@@ -33,7 +33,7 @@ var _avatarGroupClasses = _interopRequireWildcard(require("./avatarGroupClasses"
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["children", "className", "max", "spacing", "variant"];
+const _excluded = ["children", "className", "max", "spacing", "total", "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); }
 
@@ -99,10 +99,11 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
     className,
     max = 5,
     spacing = 'medium',
+    total,
     variant = 'circular'
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const clampedMax = max < 2 ? 2 : max;
+  let clampedMax = max < 2 ? 2 : max;
   const ownerState = (0, _extends2.default)({}, props, {
     max,
     spacing,
@@ -118,7 +119,15 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
 
     return /*#__PURE__*/React.isValidElement(child);
   });
-  const extraAvatars = children.length > clampedMax ? children.length - clampedMax + 1 : 0;
+  const totalAvatars = total || children.length;
+
+  if (totalAvatars === clampedMax) {
+    clampedMax += 1;
+  }
+
+  clampedMax = Math.min(totalAvatars + 1, clampedMax);
+  const maxAvatars = Math.min(children.length, clampedMax - 1);
+  const extraAvatars = Math.max(totalAvatars - clampedMax, totalAvatars - maxAvatars, 0);
   const marginLeft = spacing && SPACINGS[spacing] !== undefined ? SPACINGS[spacing] : -spacing;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(AvatarGroupRoot, (0, _extends2.default)({
     ownerState: ownerState,
@@ -133,7 +142,7 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
       },
       variant: variant,
       children: ["+", extraAvatars]
-    }) : null, children.slice(0, children.length - extraAvatars).reverse().map(child => {
+    }) : null, children.slice(0, maxAvatars).reverse().map(child => {
       return /*#__PURE__*/React.cloneElement(child, {
         className: (0, _clsx.default)(child.props.className, classes.avatar),
         style: (0, _extends2.default)({
@@ -188,7 +197,13 @@ process.env.NODE_ENV !== "production" ? AvatarGroup.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.func, _propTypes.default.object]),
+  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 total number of avatars. Used for calculating the number of extra avatars.
+   * @default children.length
+   */
+  total: _propTypes.default.number,
 
   /**
    * The variant to use.

package/node/Backdrop/Backdrop.js

@@ -165,7 +165,7 @@ process.env.NODE_ENV !== "production" ? Backdrop.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.func, _propTypes.default.object]),
+  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 duration for the transition, in milliseconds.

package/node/Badge/Badge.js

@@ -31,7 +31,7 @@ var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["components", "componentsProps", "color", "invisible", "badgeContent", "showZero", "variant"];
+const _excluded = ["component", "components", "componentsProps", "color", "invisible", "badgeContent", "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); }
 
@@ -176,6 +176,11 @@ const BadgeBadge = (0, _styled.default)('span', {
     duration: theme.transitions.duration.leavingScreen
   })
 }));
+
+const shouldSpreadAdditionalProps = Slot => {
+  return !Slot || !(0, _base.isHostComponent)(Slot);
+};
+
 const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
   var _componentsProps$root, _componentsProps$badg;
 
@@ -184,6 +189,7 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
     name: 'MuiBadge'
   });
   const {
+    component = 'span',
     components = {},
     componentsProps = {},
     color: colorProp = 'default',
@@ -221,12 +227,13 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
       Badge: BadgeBadge
     }, components),
     componentsProps: {
-      root: (0, _extends2.default)({}, componentsProps.root, (!components.Root || !(0, _base.isHostComponent)(components.Root)) && {
+      root: (0, _extends2.default)({}, componentsProps.root, shouldSpreadAdditionalProps(components.Root) && {
+        as: component,
         ownerState: (0, _extends2.default)({}, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.ownerState, {
           color
         })
       }),
-      badge: (0, _extends2.default)({}, componentsProps.badge, (!components.Thumb || !(0, _base.isHostComponent)(components.Thumb)) && {
+      badge: (0, _extends2.default)({}, componentsProps.badge, shouldSpreadAdditionalProps(components.Badge) && {
         ownerState: (0, _extends2.default)({}, (_componentsProps$badg = componentsProps.badge) == null ? void 0 : _componentsProps$badg.ownerState, {
           color
         })
@@ -279,6 +286,12 @@ process.env.NODE_ENV !== "production" ? Badge.propTypes
   /* @typescript-to-proptypes-ignore */
   .oneOfType([_propTypes.default.oneOf(['default', 'primary', 'secondary', 'error', 'info', 'success', 'warning']), _propTypes.default.string]),
 
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: _propTypes.default.elementType,
+
   /**
    * The components used for each slot inside the Badge.
    * Either a string to use a HTML element or a component.
@@ -321,7 +334,7 @@ process.env.NODE_ENV !== "production" ? Badge.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.func, _propTypes.default.object]),
+  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 variant to use.

package/node/BottomNavigation/BottomNavigation.js

@@ -150,7 +150,7 @@ process.env.NODE_ENV !== "production" ? BottomNavigation.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.func, _propTypes.default.object]),
+  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 value of the currently selected `BottomNavigationAction`.

package/node/BottomNavigationAction/BottomNavigationAction.js

@@ -198,7 +198,7 @@ process.env.NODE_ENV !== "production" ? BottomNavigationAction.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.func, _propTypes.default.object]),
+  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]),
 
   /**
    * You can provide your own value. Otherwise, we fallback to the child position index.

package/node/Breadcrumbs/Breadcrumbs.js

@@ -255,7 +255,7 @@ process.env.NODE_ENV !== "production" ? Breadcrumbs.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.func, _propTypes.default.object])
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
 } : void 0;
 var _default = Breadcrumbs;
 exports.default = _default;

package/node/Button/Button.js

@@ -17,6 +17,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _clsx = _interopRequireDefault(require("clsx"));
 
+var _utils = require("@mui/utils");
+
 var _base = require("@mui/base");
 
 var _system = require("@mui/system");
@@ -35,7 +37,7 @@ var _ButtonGroupContext = _interopRequireDefault(require("../ButtonGroup/ButtonG
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["children", "className", "color", "component", "disabled", "disableElevation", "disableFocusRipple", "disableRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"];
+const _excluded = ["children", "color", "component", "className", "disabled", "disableElevation", "disableFocusRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "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); }
 
@@ -240,48 +242,30 @@ const ButtonEndIcon = (0, _styled.default)('span', {
   marginRight: -2
 }, commonIconStyles(ownerState)));
 const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
+  // props priority: `inProps` > `contextProps` > `themeDefaultProps`
+  const contextProps = React.useContext(_ButtonGroupContext.default);
+  const resolvedProps = (0, _utils.internal_resolveProps)(contextProps, inProps);
   const props = (0, _useThemeProps.default)({
-    props: inProps,
+    props: resolvedProps,
     name: 'MuiButton'
   });
-  const {
-    className: classNameContext,
-    color: colorContext,
-    disabled: disabledContext,
-    disableElevation: disableElevationContext,
-    disableFocusRipple: disableFocusRippleContext,
-    disableRipple: disableRippleContext,
-    fullWidth: fullWidthContext,
-    size: sizeContext,
-    variant: variantContext
-  } = React.useContext(_ButtonGroupContext.default);
   const {
     children,
-    className,
-    color: colorProp,
+    color = 'primary',
     component = 'button',
-    disabled: disabledProp,
-    disableElevation: disableElevationProp,
-    disableFocusRipple: disableFocusRippleProp,
-    disableRipple: disableRippleProp,
+    className,
+    disabled = false,
+    disableElevation = false,
+    disableFocusRipple = false,
     endIcon: endIconProp,
     focusVisibleClassName,
-    fullWidth: fullWidthProp,
-    size: sizeProp,
+    fullWidth = false,
+    size = 'medium',
     startIcon: startIconProp,
     type,
-    variant: variantProp
+    variant = 'text'
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const color = colorProp || colorContext || 'primary'; // TODO v6: Use nullish coalescing (??) instead of OR operator for these boolean props so that these boolean props for Button with ButtonGroup context take priority. See conversation from https://github.com/mui-org/material-ui/pull/28645#discussion_r738380902.
-
-  const disabled = disabledProp || disabledContext || false;
-  const disableElevation = disableElevationProp || disableElevationContext || false;
-  const disableFocusRipple = disableFocusRippleProp || disableFocusRippleContext || false;
-  const fullWidth = fullWidthProp || fullWidthContext || false;
-  const size = sizeProp || sizeContext || 'medium';
-  const variant = variantProp || variantContext || 'text';
-  const disableRipple = disableRippleProp || disableRippleContext || false;
   const ownerState = (0, _extends2.default)({}, props, {
     color,
     component,
@@ -306,10 +290,9 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ButtonRoot, (0, _extends2.default)({
     ownerState: ownerState,
-    className: (0, _clsx.default)(className, classNameContext),
+    className: (0, _clsx.default)(className, contextProps.className),
     component: component,
     disabled: disabled,
-    disableRipple: disableRipple,
     focusRipple: !disableFocusRipple,
     focusVisibleClassName: (0, _clsx.default)(classes.focusVisible, focusVisibleClassName),
     ref: ref,
@@ -422,7 +405,7 @@ process.env.NODE_ENV !== "production" ? Button.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.func, _propTypes.default.object]),
+  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]),
 
   /**
    * @ignore