@mui/material 5.0.6 → 5.1.0

package/Accordion/Accordion.js

@@ -261,7 +261,7 @@ process.env.NODE_ENV !== "production" ? Accordion.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object]),
 
   /**
    * The component used for the transition.

package/AccordionActions/AccordionActions.js

@@ -97,6 +97,6 @@ process.env.NODE_ENV !== "production" ? AccordionActions.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object])
 } : void 0;
 export default AccordionActions;

package/AccordionDetails/AccordionDetails.js

@@ -74,6 +74,6 @@ process.env.NODE_ENV !== "production" ? AccordionDetails.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object])
 } : void 0;
 export default AccordionDetails;

package/AccordionSummary/AccordionSummary.js

@@ -204,6 +204,6 @@ process.env.NODE_ENV !== "production" ? AccordionSummary.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object])
 } : void 0;
 export default AccordionSummary;

package/Alert/Alert.js

@@ -269,7 +269,7 @@ process.env.NODE_ENV !== "production" ? Alert.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object]),
 
   /**
    * The variant to use.

package/AlertTitle/AlertTitle.js

@@ -80,6 +80,6 @@ process.env.NODE_ENV !== "production" ? AlertTitle.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object])
 } : void 0;
 export default AlertTitle;

package/AppBar/AppBar.js

@@ -168,6 +168,6 @@ process.env.NODE_ENV !== "production" ? AppBar.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object])
 } : void 0;
 export default AppBar;

package/Autocomplete/Autocomplete.js

@@ -176,6 +176,9 @@ const AutocompleteRoot = styled('div', {
       padding: '2.5px 4px'
     }
   },
+  [`& .${inputBaseClasses.hiddenLabel}`]: {
+    paddingTop: 8
+  },
   [`& .${autocompleteClasses.input}`]: _extends({
     flexGrow: 1,
     textOverflow: 'ellipsis',
@@ -1043,7 +1046,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object]),
 
   /**
    * The value of the autocomplete.

package/Avatar/Avatar.js

@@ -255,7 +255,7 @@ process.env.NODE_ENV !== "production" ? Avatar.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object]),
 
   /**
    * The shape of the avatar.

package/AvatarGroup/AvatarGroup.js

@@ -165,7 +165,7 @@ process.env.NODE_ENV !== "production" ? AvatarGroup.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object]),
 
   /**
    * The variant to use.

package/Backdrop/Backdrop.js

@@ -143,7 +143,7 @@ process.env.NODE_ENV !== "production" ? Backdrop.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object]),
 
   /**
    * The duration for the transition, in milliseconds.

package/Badge/Badge.js

@@ -298,7 +298,7 @@ process.env.NODE_ENV !== "production" ? Badge.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object]),
 
   /**
    * The variant to use.

package/BottomNavigation/BottomNavigation.js

@@ -129,7 +129,7 @@ process.env.NODE_ENV !== "production" ? BottomNavigation.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object]),
 
   /**
    * The value of the currently selected `BottomNavigationAction`.

package/BottomNavigationAction/BottomNavigationAction.js

@@ -176,7 +176,7 @@ process.env.NODE_ENV !== "production" ? BottomNavigationAction.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object]),
 
   /**
    * You can provide your own value. Otherwise, we fallback to the child position index.

package/Box/Box.d.ts

@@ -20,7 +20,15 @@ export interface BoxTypeMap<P = {}, D extends React.ElementType = 'div'> {
  *
  * API:
  *
- * - [Box API](https://mui.com/api/box/)
+ * - [Box API](https://mui.com/components/box/#api)
+ * NOTE - As a CSS utility component, Box also supports all system props.
+ * You can use them as props directly on the component.
+ * Props use same syntax as `sx`. Not all props are listed in the API section.
+ *
+ * Example:
+ *
+ * // For instance, a Box with margin-top:
+ * <Box mt={2}>
  */
 declare const Box: OverridableComponent<BoxTypeMap>;
 
@@ -37,6 +45,14 @@ export type BoxProps<
  *
  * API:
  *
- * - [Box API](https://mui.com/api/box/)
+ * - [Box API](https://mui.com/components/box/#api)
+ * NOTE - As a CSS utility component, Box also supports all system props.
+ * You can use them as props directly on the component.
+ * Props use same syntax as `sx`. Not all props are listed in the API section.
+ *
+ * Example:
+ *
+ * // For instance, a Box with margin-top:
+ * <Box mt={2}>
  */
 export default Box;

package/Box/Box.js

@@ -1,4 +1,5 @@
 import { createBox } from '@mui/system';
+import { unstable_ClassNameGenerator as ClassNameGenerator } from '../utils';
 import { createTheme } from '../styles';
 const defaultTheme = createTheme();
 /**
@@ -6,6 +7,8 @@ const defaultTheme = createTheme();
  */
 
 const Box = createBox({
-  defaultTheme
+  defaultTheme,
+  defaultClassName: 'MuiBox-root',
+  generateClassName: ClassNameGenerator.generate
 });
 export default Box;

package/Breadcrumbs/Breadcrumbs.js

@@ -232,6 +232,6 @@ process.env.NODE_ENV !== "production" ? Breadcrumbs.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object])
 } : void 0;
 export default Breadcrumbs;

package/Button/Button.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["children", "color", "component", "disabled", "disableElevation", "disableFocusRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"];
+const _excluded = ["children", "className", "color", "component", "disabled", "disableElevation", "disableFocusRipple", "disableRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -11,6 +11,7 @@ import useThemeProps from '../styles/useThemeProps';
 import ButtonBase from '../ButtonBase';
 import capitalize from '../utils/capitalize';
 import buttonClasses, { getButtonUtilityClass } from './buttonClasses';
+import ButtonGroupContext from '../ButtonGroup/ButtonGroupContext';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 
@@ -217,24 +218,47 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
     props: inProps,
     name: 'MuiButton'
   });
+  const {
+    className: classNameContext,
+    color: colorContext,
+    disabled: disabledContext,
+    disableElevation: disableElevationContext,
+    disableFocusRipple: disableFocusRippleContext,
+    disableRipple: disableRippleContext,
+    fullWidth: fullWidthContext,
+    size: sizeContext,
+    variant: variantContext
+  } = React.useContext(ButtonGroupContext);
 
   const {
     children,
-    color = 'primary',
+    className,
+    color: colorProp,
     component = 'button',
-    disabled = false,
-    disableElevation = false,
-    disableFocusRipple = false,
+    disabled: disabledProp,
+    disableElevation: disableElevationProp,
+    disableFocusRipple: disableFocusRippleProp,
+    disableRipple: disableRippleProp,
     endIcon: endIconProp,
     focusVisibleClassName,
-    fullWidth = false,
-    size = 'medium',
+    fullWidth: fullWidthProp,
+    size: sizeProp,
     startIcon: startIconProp,
     type,
-    variant = 'text'
+    variant: variantProp
   } = props,
         other = _objectWithoutPropertiesLoose(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 = _extends({}, props, {
     color,
     component,
@@ -263,8 +287,10 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
 
   return /*#__PURE__*/_jsxs(ButtonRoot, _extends({
     ownerState: ownerState,
+    className: clsx(className, classNameContext),
     component: component,
     disabled: disabled,
+    disableRipple: disableRipple,
     focusRipple: !disableFocusRipple,
     focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
     ref: ref,
@@ -292,6 +318,11 @@ process.env.NODE_ENV !== "production" ? Button.propTypes
    */
   classes: PropTypes.object,
 
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+
   /**
    * The color of the component. It supports those theme colors that make sense for this component.
    * @default 'primary'
@@ -372,7 +403,7 @@ process.env.NODE_ENV !== "production" ? Button.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object]),
 
   /**
    * @ignore

package/ButtonBase/ButtonBase.js

@@ -514,7 +514,7 @@ process.env.NODE_ENV !== "production" ? ButtonBase.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object]),
 
   /**
    * @default 0

package/ButtonGroup/ButtonGroup.js

@@ -2,7 +2,6 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["children", "className", "color", "component", "disabled", "disableElevation", "disableFocusRipple", "disableRipple", "fullWidth", "orientation", "size", "variant"];
 import * as React from 'react';
-import { isFragment } from 'react-is';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/core';
@@ -11,6 +10,7 @@ import capitalize from '../utils/capitalize';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import buttonGroupClasses, { getButtonGroupUtilityClass } from './buttonGroupClasses';
+import ButtonGroupContext from './ButtonGroupContext';
 import { jsx as _jsx } from "react/jsx-runtime";
 
 const overridesResolver = (props, styles) => {
@@ -107,10 +107,14 @@ const ButtonGroupRoot = styled('div', {
       }
     }, ownerState.variant === 'contained' && ownerState.color !== 'inherit' && {
       borderColor: theme.palette[ownerState.color].dark
+    }, {
+      '&:hover': _extends({}, ownerState.variant === 'outlined' && ownerState.orientation === 'horizontal' && {
+        borderRightColor: 'currentColor'
+      }, ownerState.variant === 'outlined' && ownerState.orientation === 'vertical' && {
+        borderBottomColor: 'currentColor'
+      })
     }),
-    '&:hover': _extends({}, ownerState.variant === 'outlined' && ownerState.color !== 'inherit' && {
-      borderColor: theme.palette[ownerState.color].main
-    }, ownerState.variant === 'contained' && {
+    '&:hover': _extends({}, ownerState.variant === 'contained' && {
       boxShadow: 'none'
     })
   }, ownerState.variant === 'contained' && {
@@ -153,6 +157,17 @@ const ButtonGroup = /*#__PURE__*/React.forwardRef(function ButtonGroup(inProps,
   });
 
   const classes = useUtilityClasses(ownerState);
+  const context = React.useMemo(() => ({
+    className: classes.grouped,
+    color,
+    disabled,
+    disableElevation,
+    disableFocusRipple,
+    disableRipple,
+    fullWidth,
+    size,
+    variant
+  }), [color, disabled, disableElevation, disableFocusRipple, disableRipple, fullWidth, size, variant, classes.grouped]);
   return /*#__PURE__*/_jsx(ButtonGroupRoot, _extends({
     as: component,
     role: "group",
@@ -160,28 +175,9 @@ const ButtonGroup = /*#__PURE__*/React.forwardRef(function ButtonGroup(inProps,
     ref: ref,
     ownerState: ownerState
   }, other, {
-    children: React.Children.map(children, child => {
-      if (! /*#__PURE__*/React.isValidElement(child)) {
-        return null;
-      }
-
-      if (process.env.NODE_ENV !== 'production') {
-        if (isFragment(child)) {
-          console.error(["MUI: The ButtonGroup component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
-        }
-      }
-
-      return /*#__PURE__*/React.cloneElement(child, {
-        className: clsx(classes.grouped, child.props.className),
-        color: child.props.color || color,
-        disabled: child.props.disabled || disabled,
-        disableElevation: child.props.disableElevation || disableElevation,
-        disableFocusRipple,
-        disableRipple,
-        fullWidth,
-        size: child.props.size || size,
-        variant: child.props.variant || variant
-      });
+    children: /*#__PURE__*/_jsx(ButtonGroupContext.Provider, {
+      value: context,
+      children: children
     })
   }));
 });
@@ -270,7 +266,7 @@ process.env.NODE_ENV !== "production" ? ButtonGroup.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object]),
 
   /**
    * The variant to use.

package/ButtonGroup/ButtonGroupContext.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import type { ButtonGroupProps } from './ButtonGroup';
+interface IButtonGroupContext {
+    className?: string;
+    color?: ButtonGroupProps['color'];
+    disabled?: boolean;
+    disabledElevation?: boolean;
+    disableFocusRipple?: boolean;
+    disableRipple?: boolean;
+    fullWidth?: boolean;
+    size?: ButtonGroupProps['size'];
+    variant?: ButtonGroupProps['variant'];
+}
+/**
+ * @ignore - internal component.
+ */
+declare const ButtonGroupContext: React.Context<IButtonGroupContext>;
+export default ButtonGroupContext;

package/ButtonGroup/ButtonGroupContext.js

@@ -0,0 +1,12 @@
+import * as React from 'react';
+
+/**
+ * @ignore - internal component.
+ */
+const ButtonGroupContext = /*#__PURE__*/React.createContext({});
+
+if (process.env.NODE_ENV !== 'production') {
+  ButtonGroupContext.displayName = 'ButtonGroupContext';
+}
+
+export default ButtonGroupContext;

package/CHANGELOG.md

@@ -1,5 +1,112 @@
 ### [Versions](https://mui.com/versions/)
 
+## 5.1.0
+
+<!-- generated comparing v5.0.6..master -->
+
+_Nov 8, 2021_
+
+A big thanks to the 33 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎉 Support custom elements under `ButtonGroup` (#28645) @ZeeshanTamboli
+- 🛠 Add support for arrays in the `sx` prop (#29297) @siriwatknp
+- And many more 🐛 bug fixes and 📚 improvements.
+
+### `@mui/material@5.1.0`
+
+- &#8203;<!-- 68 -->[Autocomplete] Fix `hiddenLabel` prop of `TextField variant={filled}` inside Autocomplete (#29234) @jatinsandilya
+- &#8203;<!-- 67 -->[Box] Support generateClassName and defaultClassName (#29347) @siriwatknp
+- &#8203;<!-- 66 -->[ButtonGroup] Fix variant outlined always has primary color borders on hover (#29487) @ZeeshanTamboli
+- &#8203;<!-- 65 -->[ButtonGroup] Support different elements under ButtonGroup (#28645) @ZeeshanTamboli
+- &#8203;<!-- 62 -->[CssBaseline] Add `enableColorScheme` prop so enable using `color-scheme` property to deal with dark mode (#29454) @alexfauquette
+- &#8203;<!-- 29 -->[FormControlLabel] Narrow the label type (#29324) @michaldudak
+- &#8203;<!-- 28 -->[Grid] Fix usage when columns > 12 (#29196) @tanay123456789
+- &#8203;<!-- 27 -->[InputBase] Do not repeat the same classname (#29353) @hbjORbj
+- &#8203;<!-- 30 -->[InputBase] Remove WebkitAppearance from search type (#29383) @nicbarajas
+- &#8203;<!-- 25 -->[ListItem] Add missing exports (#29571) @robcaldecott
+- &#8203;<!-- 22 -->[Pagination] Allow customization of icons (#29336) @mbeltramin
+- &#8203;<!-- 11 -->[TextField] Fix bootstrap, normalize.css, sanitize.css conflicts (#28674) @ChrisClaude
+- &#8203;<!-- 10 -->[TextField] Fix invisible wrap within notched inputs (#29088) @DASPRiD
+- &#8203;<!-- 09 -->[Tooltip] `open` prop in `componentsProps.popper` can be optional (#29370) @ZeeshanTamboli
+- &#8203;<!-- 08 -->[Tooltip] Fix `className` not getting applied from PopperProps (#29023) @ZeeshanTamboli
+- &#8203;<!-- 07 -->[useRadioGroup] Convert to TypeScript (#29326) @eps1lon
+
+### `@mui/system@5.1.0`
+
+- &#8203;<!-- 21 -->[system] Introduce `mode` to CssVarsProvider (#29418) @siriwatknp
+- &#8203;<!-- 20 -->[system] Improve breakpoints resolver function (#29300) @hbjORbj
+- &#8203;<!-- 19 -->[system] Add array support for `sx` prop (#29297) @siriwatknp
+
+### `@mui/codemod@5.1.0`
+
+- &#8203;<!-- 64 -->[codemod] Add codemod parser flag (#29059) (#29229) @ElonVolo
+
+### `@mui/lab@5.0.0-alpha.54`
+
+- &#8203;<!-- 52 -->[DatePicker] Fix disabled/readOnly for view components (#28815) @adamfitzgibbon
+- &#8203;<!-- 24 -->[Masonry] Fix crash on unmount when using React 18 (#29358) @eps1lon
+- &#8203;<!-- 23 -->[Masonry] Improve height computation and detect changes in `children` (#29351) @hbjORbj
+
+### `@mui/joy@5.0.0-alpha.0`
+
+- &#8203;<!-- 28 -->[Joy] Update default theme (#29478) @siriwatknp
+- &#8203;<!-- 26 -->[Joy] Export CssVarsProvider with default theme (#29150) @siriwatknp
+- &#8203;<!-- 25 -->[Joy] Remove `private` to leverage CodeSandbox (#29280) @siriwatknp
+
+### Docs
+
+- &#8203;<!-- 51 -->[docs] Add differences between styled and sx (#28685) @eric-burel
+- &#8203;<!-- 50 -->[docs] Track usage of dark mode in Google Analytics (#29419) @oliviertassinari
+- &#8203;<!-- 49 -->[docs] Remove create-mui-theme as it is no longer working (#29472) @IPJT
+- &#8203;<!-- 48 -->[docs] Fix warnings in AppSearch (#29459) @eps1lon
+- &#8203;<!-- 47 -->[docs] Add framework example for ClassNameGenerator (#29453) @siriwatknp
+- &#8203;<!-- 46 -->[docs] Fix layout shift when scrolling (#29436) @oliviertassinari
+- &#8203;<!-- 45 -->[docs] Fix layout-shift on id='main-content' (#29425) @oliviertassinari
+- &#8203;<!-- 44 -->[docs] Remove usage of `process.browser` (#29438) @oliviertassinari
+- &#8203;<!-- 43 -->[docs] Add instruction on how to use the child selector API with emotion (#29350) @mnajdova
+- &#8203;<!-- 42 -->[docs] Fix small typos (#29424) @oliviertassinari
+- &#8203;<!-- 41 -->[docs] Fix TOC highlighting logic (#29435) @oliviertassinari
+- &#8203;<!-- 40 -->[docs] Fix about page flags (#29314) @mbrookes
+- &#8203;<!-- 39 -->[docs] Fix Box JS docs (#29282) @Pablion
+- &#8203;<!-- 38 -->[docs] Update storybook section in migration to v5 docs (#28800) @siriwatknp
+- &#8203;<!-- 37 -->[docs] Document how to enable color on dark mode (#29340) @Wimukti
+- &#8203;<!-- 36 -->[docs] Display search functionality in all viewports (#28819) @eps1lon
+- &#8203;<!-- 35 -->[docs] Query heading for ToC on demand (#29204) @eps1lon
+- &#8203;<!-- 34 -->[docs] Add next.js styled-component guide and update links to example (#29118) @Jareechang
+- &#8203;<!-- 33 -->[docs] Fix overriding `MuiTextField`'s default props in the migration guide (#29174) @tm1000
+- &#8203;<!-- 32 -->[docs] Fix "clickable" and "deletable" typos (#28702) @jacklaurencegaray
+- &#8203;<!-- 31 -->[docs] Update migration-v4 docs for wrong import path (#29042) @busches
+- &#8203;<!-- 30 -->[docs] Add GitHub icon change to "Migration from v4 to v5" guide (#29182) @dan-mba
+- &#8203;<!-- 06 -->[website] Benny Joo joining MUI (#29499) @mnajdova
+- &#8203;<!-- 05 -->[website] Update the `Print export` feature info on the pricing page (#29484) @DanailH
+- &#8203;<!-- 04 -->[website] Improve the dev rel role description (#29477) @oliviertassinari
+- &#8203;<!-- 03 -->[website] Add customers section on Design Kits and Templates marketing pages (#29168) @danilo-leal
+- &#8203;<!-- 02 -->[website] Improvements to the /core product page @danilo-leal
+- &#8203;<!-- 01 -->[website] Fix typo on the About Page (#29286) @gssakash
+
+### Core
+
+- &#8203;<!-- 63 -->[core] Handle RecordType and FieldType in generatePropDescription.ts (#29467) @flaviendelangle
+- &#8203;<!-- 61 -->[core] Convert a named color to lowercase (#29465) @ainatenhi
+- &#8203;<!-- 60 -->[core] Allow to reuse functions from `docs:api` (#28828) @m4theushw
+- &#8203;<!-- 59 -->[core] Commit new nextjs 12 tsconfig (#29458) @eps1lon
+- &#8203;<!-- 58 -->[core] Settle on MUI X for the official name (#29420) @oliviertassinari
+- &#8203;<!-- 57 -->[core] Add mui as a npm keyword (#29427) @oliviertassinari
+- &#8203;<!-- 56 -->[core] Fix issue template redirection (#29432) @oliviertassinari
+- &#8203;<!-- 55 -->[core] Remove unecessary destructuration (#29354) @oliviertassinari
+- &#8203;<!-- 54 -->[core] Use cross-env to set env variables in material-icons scripts (#29327) @michaldudak
+- &#8203;<!-- 53 -->[core] Don't bump peer dependency ranges on dependency updates (#29303) @eps1lon
+- &#8203;<!-- 18 -->[test] Fix browser tests (#29505) @eps1lon
+- &#8203;<!-- 69 -->[test] Fix missing act warnings in latest React 18 alpha (#29357) @eps1lon
+- &#8203;<!-- 17 -->[test] Replace `createClientRender` with new `createRenderer` API (#29471) @eps1lon
+- &#8203;<!-- 16 -->[test] Fix possible "missing act" warning (#29463) @eps1lon
+- &#8203;<!-- 15 -->[test] Remove render#baseElement (#29462) @eps1lon
+- &#8203;<!-- 14 -->[test] Expose `AbortController` on global (#29360) @eps1lon
+- &#8203;<!-- 13 -->[test] Add internal test for uniqe `name` in `Rating` (#29329) @eps1lon
+- &#8203;<!-- 12 -->[test] Fix browser tests (#29305) @eps1lon
+
+All contributors of this release in alphabetical order: @adamfitzgibbon, @ainatenhi, @alexfauquette, @busches, @ChrisClaude, @dan-mba, @DanailH, @danilo-leal, @DASPRiD, @ElonVolo, @eps1lon, @eric-burel, @flaviendelangle, @gssakash, @hbjORbj, @IPJT, @jacklaurencegaray, @Jareechang, @jatinsandilya, @m4theushw, @mbeltramin, @mbrookes, @michaldudak, @mnajdova, @nicbarajas, @oliviertassinari, @Pablion, @robcaldecott, @siriwatknp, @tanay123456789, @tm1000, @Wimukti, @ZeeshanTamboli
+
 ## 5.0.6
 
 <!-- generated comparing v5.0.5..master -->

package/Card/Card.js

@@ -93,6 +93,6 @@ process.env.NODE_ENV !== "production" ? Card.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object])
 } : void 0;
 export default Card;

package/CardActionArea/CardActionArea.js

@@ -122,6 +122,6 @@ process.env.NODE_ENV !== "production" ? CardActionArea.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object])
 } : void 0;
 export default CardActionArea;

package/CardActions/CardActions.js

@@ -96,6 +96,6 @@ process.env.NODE_ENV !== "production" ? CardActions.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object])
 } : void 0;
 export default CardActions;

package/CardContent/CardContent.js

@@ -88,6 +88,6 @@ process.env.NODE_ENV !== "production" ? CardContent.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object])
 } : void 0;
 export default CardContent;

package/CardHeader/CardHeader.js

@@ -203,7 +203,7 @@ process.env.NODE_ENV !== "production" ? CardHeader.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object]),
 
   /**
    * The content of the component.

package/CardMedia/CardMedia.js

@@ -148,6 +148,6 @@ process.env.NODE_ENV !== "production" ? CardMedia.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object])
 } : void 0;
 export default CardMedia;

package/Checkbox/Checkbox.js

@@ -221,7 +221,7 @@ process.env.NODE_ENV !== "production" ? Checkbox.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object]),
 
   /**
    * The value of the component. The DOM API casts this to a string.

package/Chip/Chip.js

@@ -515,7 +515,7 @@ process.env.NODE_ENV !== "production" ? Chip.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object]),
 
   /**
    * The variant to use.