@mui/material 6.0.0-beta.5 → 6.0.0-beta.6

package/Autocomplete/Autocomplete.js

@@ -1082,7 +1082,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    */
   openText: PropTypes.string,
   /**
-   * Array of options.
+   * A list of options that will be shown in the Autocomplete.
    */
   options: PropTypes.array.isRequired,
   /**

package/Breadcrumbs/Breadcrumbs.js

@@ -154,7 +154,7 @@ const Breadcrumbs = /*#__PURE__*/React.forwardRef(function Breadcrumbs(inProps,
   return /*#__PURE__*/_jsx(BreadcrumbsRoot, {
     ref: ref,
     component: component,
-    color: "text.secondary",
+    color: "textSecondary",
     className: clsx(classes.root, className),
     ownerState: ownerState,
     ...other,

package/CHANGELOG.md

@@ -1,5 +1,73 @@
 # [Versions](https://mui.com/versions/)
 
+## 6.0.0-beta.6
+
+<!-- generated comparing v6.0.0-beta.5..next -->
+
+_Aug 16, 2024_
+
+A big thanks to the 18 contributors who made this release possible.
+
+### `@mui/material@6.0.0-beta.6`
+
+- [Autocomplete] Improve the `options` prop description (#41591) @pluvio72
+- [Autocomplete] Remove autocomplete warning regarding value not equal to option (#43314) @ZeeshanTamboli
+- [Divider] Add aria-orientation (#43241) @aarongarciah
+- [IconButton] Fix hover background color behavior (#43271) @mnajdova
+- [TypeScript] Refactor types so they're compatible with upcoming React 19 (#43276) @DiegoAndai
+- [Typography] Replace dot notation color value to work with Pigment CSS (#43288) @siriwatknp
+- [pigment-css] Fix `getSelector` prefers-color-scheme to be object (#43237) @siriwatknp
+- Remove `display="block"` usage to work with Pigment CSS (#43307) @siriwatknp
+
+### `@mui/codemod@6.0.0-beta.6`
+
+- [codemod] Skip sx spread transformation (#43291) @siriwatknp
+
+### `@mui/styles@6.0.0-beta.6`
+
+- [styles] Fix issues reported by eslint-plugin-react-compiler (#43118) @jlewins
+
+### Docs
+
+- [material-ui] Audit and copyedit the v6 migration doc (#43073) @samuelsycamore
+- [material-ui] Fix Material Icon search lag and other improvements (#41330) @anle9650
+- [material-ui][Popover] Fix description and title of hover interaction section (#43290) @ZeeshanTamboli
+- [material-ui] Refine and unify custom template themes (#43220) @zanivan
+- [joy-ui] Fix data grid redirection (#43247) @sai6855
+- [mui-system] Add import statement in docs (#43223) @sai6855
+- Update babel config (#43286) @romgrk
+- Fix outdated references to Materal UI version (#43321) @oliviertassinari
+- Polish migration git diff experience @oliviertassinari
+- Update LTS to match format (#43212) @oliviertassinari
+- Fix Pigment CSS migration content (#43217) @siriwatknp
+
+### Core
+
+- [code-infra] Remove `userEvent` export from `@mui/internal-test-utils` (#43313) @LukasTy
+- [code-infra] Remove unnecessary alias (#43320) @Janpot
+- [code-infra] Fix utils bundle size entrypoint (#43304) @Janpot
+- [core] missing and incorrect scripts (#43209) @Jay-Karia
+- [core] Set Node 14 as minimum version in all browserslist envs (#43326) @aarongarciah
+- [core] Add React 19 as peer dependency (#43216) @aarongarciah
+- [core] Pin `eslint-plugin-jsx-a11y` version to 6.7.1 (#43292) @Janpot
+- [core] Update supported Node.js version to 14 (#43315) @Janpot
+- [core] Use fs instead of fs-extra in script utils (#43234) @DiegoAndai
+- [core] Refactor system theme props (#43120) @romgrk
+- [docs-infra] Fix some TS issues for X docs (#43285) @Janpot
+- [docs-infra] Move API pages to TS (#43199) @alexfauquette
+- [docs-infra] Fix broken sandboxes with relative module imports (#42767) @bharatkashyap
+- [docs-infra] Simplify API sections typing (#43128) @alexfauquette
+- [examples] Fix import (#43316) @aarongarciah
+- [examples] Add material-ui-pigment-css for Next.js and Vite (#43065) @siriwatknp
+- [examples] Replace wrong import with `@mui/material/styles` (#43236) @siriwatknp
+- [useMediaQuery] Adapt test implementation for React 19 (#43269) @aarongarciah
+- [test] Update `matchMedia` mocks (#43240) @cherniavskii
+- [test] Remove unnecessary ref param (#43282) @aarongarciah
+- [website] Update showcase to include Toolpad Core (#43226) @bharatkashyap
+- [website] Replace React.MutableRefObject with React.RefObject (#43284) @aarongarciah
+
+All contributors of this release in alphabetical order: @aarongarciah, @alexfauquette, @anle9650, @bharatkashyap, @cherniavskii, @DiegoAndai, @Janpot, @Jay-Karia, @jlewins, @mnajdova, @oliviertassinari, @pluvio72, @renovate[bot], @romgrk, @sai6855, @samuelsycamore, @siriwatknp, @ZeeshanTamboli
+
 ## 6.0.0-beta.5
 
 <!-- generated comparing v6.0.0-beta.4..next -->
@@ -1842,6 +1910,7 @@ This release was mostly about 🐛 bug fixes and 📚 documentation improvements
 - [core] Fix TypeScript spelling in changelog @oliviertassinari
 - [core] Fix small detail in the autocomplete demo @oliviertassinari
 - [core] Increase node memory limit on Netlify build (#41111) @michaldudak
+- [core] Fix Netlify build cache issue (#43281) @LukasTy
 - [core][Tooltip] Remove incorrect code comment (#41179) @ZeeshanTamboli
 - [core] Fix missing context display names (#41168) @oliviertassinari
 - [core][base-ui] Remove `@mui/base` dev dependency from Base UI workspace (#41216) @ZeeshanTamboli

package/CardHeader/CardHeader.js

@@ -4,7 +4,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import Typography from '../Typography';
+import Typography, { typographyClasses } from '../Typography';
 import { styled } from '../zero-styled';
 import { useDefaultProps } from '../DefaultPropsProvider';
 import cardHeaderClasses, { getCardHeaderUtilityClass } from './cardHeaderClasses';
@@ -61,7 +61,13 @@ const CardHeaderContent = styled('div', {
   slot: 'Content',
   overridesResolver: (props, styles) => styles.content
 })({
-  flex: '1 1 auto'
+  flex: '1 1 auto',
+  [`.${typographyClasses.root}:where(& .${cardHeaderClasses.title})`]: {
+    display: 'block'
+  },
+  [`.${typographyClasses.root}:where(& .${cardHeaderClasses.subheader})`]: {
+    display: 'block'
+  }
 });
 const CardHeader = /*#__PURE__*/React.forwardRef(function CardHeader(inProps, ref) {
   const props = useDefaultProps({
@@ -92,7 +98,6 @@ const CardHeader = /*#__PURE__*/React.forwardRef(function CardHeader(inProps, re
       variant: avatar ? 'body2' : 'h5',
       className: classes.title,
       component: "span",
-      display: "block",
       ...titleTypographyProps,
       children: title
     });
@@ -102,9 +107,8 @@ const CardHeader = /*#__PURE__*/React.forwardRef(function CardHeader(inProps, re
     subheader = /*#__PURE__*/_jsx(Typography, {
       variant: avatar ? 'body2' : 'body1',
       className: classes.subheader,
-      color: "text.secondary",
+      color: "textSecondary",
       component: "span",
-      display: "block",
       ...subheaderTypographyProps,
       children: subheader
     });

package/DialogContentText/DialogContentText.js

@@ -44,7 +44,7 @@ const DialogContentText = /*#__PURE__*/React.forwardRef(function DialogContentTe
   return /*#__PURE__*/_jsx(DialogContentTextRoot, {
     component: "p",
     variant: "body1",
-    color: "text.secondary",
+    color: "textSecondary",
     ref: ref,
     ownerState: ownerState,
     className: clsx(classes.root, className),

package/Divider/Divider.js

@@ -203,10 +203,10 @@ const Divider = /*#__PURE__*/React.forwardRef(function Divider(inProps, ref) {
     absolute = false,
     children,
     className,
-    component = children ? 'div' : 'hr',
+    orientation = 'horizontal',
+    component = children || orientation === 'vertical' ? 'div' : 'hr',
     flexItem = false,
     light = false,
-    orientation = 'horizontal',
     role = component !== 'hr' ? 'separator' : undefined,
     textAlign = 'center',
     variant = 'fullWidth',
@@ -230,6 +230,7 @@ const Divider = /*#__PURE__*/React.forwardRef(function Divider(inProps, ref) {
     role: role,
     ref: ref,
     ownerState: ownerState,
+    "aria-orientation": role === 'separator' && (component !== 'hr' || orientation === 'vertical') ? orientation : undefined,
     ...other,
     children: children ? /*#__PURE__*/_jsx(DividerWrapper, {
       className: classes.wrapper,

package/FormControlLabel/FormControlLabel.js

@@ -8,7 +8,6 @@ import composeClasses from '@mui/utils/composeClasses';
 import { useFormControl } from '../FormControl';
 import { styled } from '../zero-styled';
 import { useDefaultProps } from '../DefaultPropsProvider';
-import Stack from '../Stack';
 import Typography from '../Typography';
 import capitalize from '../utils/capitalize';
 import formControlLabelClasses, { getFormControlLabelUtilityClasses } from './formControlLabelClasses';
@@ -182,8 +181,7 @@ const FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel
     ownerState: ownerState,
     ref: ref,
     ...other,
-    children: [/*#__PURE__*/React.cloneElement(control, controlProps), required ? /*#__PURE__*/_jsxs(Stack, {
-      display: "block",
+    children: [/*#__PURE__*/React.cloneElement(control, controlProps), required ? /*#__PURE__*/_jsxs("div", {
       children: [label, /*#__PURE__*/_jsxs(AsteriskComponent, {
         ownerState: ownerState,
         "aria-hidden": true,

package/IconButton/IconButton.js

@@ -164,6 +164,7 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, re
     color = 'default',
     disabled = false,
     disableFocusRipple = false,
+    disableRipple = false,
     size = 'medium',
     ...other
   } = props;
@@ -173,6 +174,7 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, re
     color,
     disabled,
     disableFocusRipple,
+    disableRipple,
     size
   };
   const classes = useUtilityClasses(ownerState);
@@ -181,6 +183,7 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, re
     centerRipple: true,
     focusRipple: !disableFocusRipple,
     disabled: disabled,
+    disableRipple: disableRipple,
     ref: ref,
     ...other,
     ownerState: ownerState,

package/InputAdornment/InputAdornment.js

@@ -122,7 +122,7 @@ const InputAdornment = /*#__PURE__*/React.forwardRef(function InputAdornment(inP
       ref: ref,
       ...other,
       children: typeof children === 'string' && !disableTypography ? /*#__PURE__*/_jsx(Typography, {
-        color: "text.secondary",
+        color: "textSecondary",
         children: children
       }) : /*#__PURE__*/_jsxs(React.Fragment, {
         children: [position === 'start' ? ( /* notranslate needed while Google Translate will not fix zero-width space issue */_span || (_span = /*#__PURE__*/_jsx("span", {

package/Link/Link.js

@@ -12,8 +12,19 @@ import { styled, useTheme } from '../zero-styled';
 import { useDefaultProps } from '../DefaultPropsProvider';
 import Typography from '../Typography';
 import linkClasses, { getLinkUtilityClass } from './linkClasses';
-import getTextDecoration, { colorTransformations } from './getTextDecoration';
+import getTextDecoration from './getTextDecoration';
 import { jsx as _jsx } from "react/jsx-runtime";
+const v6Colors = {
+  primary: true,
+  secondary: true,
+  error: true,
+  info: true,
+  success: true,
+  warning: true,
+  textPrimary: true,
+  textSecondary: true,
+  textDisabled: true
+};
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -83,6 +94,30 @@ const LinkRoot = styled(Typography, {
         '--Link-underlineColor': theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / 0.4)` : alpha(theme.palette[color].main, 0.4)
       }
     })), {
+      props: {
+        underline: 'always',
+        color: 'textPrimary'
+      },
+      style: {
+        '--Link-underlineColor': theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / 0.4)` : alpha(theme.palette.text.primary, 0.4)
+      }
+    }, {
+      props: {
+        underline: 'always',
+        color: 'textSecondary'
+      },
+      style: {
+        '--Link-underlineColor': theme.vars ? `rgba(${theme.vars.palette.text.secondaryChannel} / 0.4)` : alpha(theme.palette.text.secondary, 0.4)
+      }
+    }, {
+      props: {
+        underline: 'always',
+        color: 'textDisabled'
+      },
+      style: {
+        '--Link-underlineColor': (theme.vars || theme).palette.text.disabled
+      }
+    }, {
       props: {
         component: 'button'
       },
@@ -171,12 +206,12 @@ const Link = /*#__PURE__*/React.forwardRef(function Link(inProps, ref) {
     ownerState: ownerState,
     variant: variant,
     ...other,
-    sx: [...(colorTransformations[color] === undefined ? [{
+    sx: [...(v6Colors[color] === undefined ? [{
       color
     }] : []), ...(Array.isArray(sx) ? sx : [sx])],
     style: {
       ...other.style,
-      ...(underline === 'always' && color !== 'inherit' && {
+      ...(underline === 'always' && color !== 'inherit' && !v6Colors[color] && {
         '--Link-underlineColor': getTextDecoration({
           theme,
           ownerState
@@ -206,7 +241,7 @@ process.env.NODE_ENV !== "production" ? Link.propTypes /* remove-proptypes */ =
    * The color of the link.
    * @default 'primary'
    */
-  color: PropTypes /* @typescript-to-proptypes-ignore */.any,
+  color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['primary', 'secondary', 'success', 'error', 'info', 'warning', 'textPrimary', 'textSecondary', 'textDisabled']), PropTypes.string]),
   /**
    * The component used for the root node.
    * Either a string to use a HTML element or a component.

package/Link/getTextDecoration.d.ts

@@ -1,9 +1,8 @@
 import type { Theme } from '../styles';
-export declare const colorTransformations: Record<string, string | null | undefined>;
 declare const getTextDecoration: <T extends Theme>({ theme, ownerState, }: {
     theme: T;
     ownerState: {
         color: string;
     };
-}) => string | null;
+}) => string;
 export default getTextDecoration;

package/Link/getTextDecoration.js

@@ -1,28 +1,10 @@
 import { getPath } from '@mui/system/style';
 import { alpha } from '@mui/system/colorManipulator';
-// TODO v7: remove this transformation
-export const colorTransformations = {
-  textPrimary: 'text.primary',
-  textSecondary: 'text.secondary',
-  // For main palette, the color will be applied by the styles above.
-  primary: null,
-  secondary: null,
-  error: null,
-  info: null,
-  success: null,
-  warning: null
-};
 const getTextDecoration = ({
   theme,
   ownerState
 }) => {
-  let transformedColor = colorTransformations[ownerState.color];
-  if (transformedColor === null) {
-    return null;
-  }
-  if (transformedColor === undefined) {
-    transformedColor = ownerState.color;
-  }
+  const transformedColor = ownerState.color;
   const color = getPath(theme, `palette.${transformedColor}`, false) || ownerState.color;
   const channelColor = getPath(theme, `palette.${transformedColor}Channel`);
   if ('vars' in theme && channelColor) {

package/ListItemText/ListItemText.js

@@ -4,7 +4,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import Typography from '../Typography';
+import Typography, { typographyClasses } from '../Typography';
 import ListContext from '../List/ListContext';
 import { styled } from '../zero-styled';
 import { useDefaultProps } from '../DefaultPropsProvider';
@@ -43,6 +43,12 @@ const ListItemTextRoot = styled('div', {
   minWidth: 0,
   marginTop: 4,
   marginBottom: 4,
+  [`.${typographyClasses.root}:where(& .${listItemTextClasses.primary})`]: {
+    display: 'block'
+  },
+  [`.${typographyClasses.root}:where(& .${listItemTextClasses.secondary})`]: {
+    display: 'block'
+  },
   variants: [{
     props: ({
       ownerState
@@ -95,7 +101,6 @@ const ListItemText = /*#__PURE__*/React.forwardRef(function ListItemText(inProps
       variant: dense ? 'body2' : 'body1',
       className: classes.primary,
       component: primaryTypographyProps?.variant ? undefined : 'span',
-      display: "block",
       ...primaryTypographyProps,
       children: primary
     });
@@ -104,8 +109,7 @@ const ListItemText = /*#__PURE__*/React.forwardRef(function ListItemText(inProps
     secondary = /*#__PURE__*/_jsx(Typography, {
       variant: "body2",
       className: classes.secondary,
-      color: "text.secondary",
-      display: "block",
+      color: "textSecondary",
       ...secondaryTypographyProps,
       children: secondary
     });

package/Slider/useSlider.js

@@ -177,7 +177,7 @@ export function useSlider(parameters) {
     tabIndex,
     value: valueProp
   } = parameters;
-  const touchId = React.useRef();
+  const touchId = React.useRef(undefined);
   // We can't use the :active browser pseudo-classes.
   // - The active state isn't triggered when clicking on the rail.
   // - The active state isn't transferred when inversing a range slider.
@@ -215,7 +215,7 @@ export function useSlider(parameters) {
   })) : marksProp || [];
   const marksValues = marks.map(mark => mark.value);
   const [focusedThumbIndex, setFocusedThumbIndex] = React.useState(-1);
-  const sliderRef = React.useRef();
+  const sliderRef = React.useRef(null);
   const handleRef = useForkRef(ref, sliderRef);
   const createHandleHiddenInputFocus = otherHandlers => event => {
     const index = Number(event.currentTarget.getAttribute('data-index'));
@@ -318,7 +318,7 @@ export function useSlider(parameters) {
     // @ts-ignore
     changeValue(event, event.target.valueAsNumber);
   };
-  const previousIndex = React.useRef();
+  const previousIndex = React.useRef(undefined);
   let axis = orientation;
   if (isRtl && orientation === 'horizontal') {
     axis += '-reverse';

package/Typography/Typography.d.ts

@@ -1,14 +1,16 @@
 import * as React from 'react';
 import { OverridableStringUnion } from '@mui/types';
 import { SxProps, SystemProps } from '@mui/system';
-import { Theme } from '../styles';
+import { Theme, TypeText } from '../styles';
 import { OverrideProps, OverridableComponent } from '../OverridableComponent';
 import { Variant } from '../styles/createTypography';
 import { TypographyClasses } from './typographyClasses';
 
 export interface TypographyPropsVariantOverrides {}
 
-export interface TypographyOwnProps extends SystemProps<Theme> {
+export interface TypographyPropsColorOverrides {}
+
+export interface TypographyOwnProps extends Omit<SystemProps<Theme>, 'color'> {
   /**
    * Set the text-align on the component.
    * @default 'inherit'
@@ -22,6 +24,23 @@ export interface TypographyOwnProps extends SystemProps<Theme> {
    * Override or extend the styles applied to the component.
    */
   classes?: Partial<TypographyClasses>;
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
+   */
+  color?:
+    | OverridableStringUnion<
+        | 'primary'
+        | 'secondary'
+        | 'success'
+        | 'error'
+        | 'info'
+        | 'warning'
+        | `text${Capitalize<keyof TypeText>}`,
+        TypographyPropsColorOverrides
+      >
+    | (string & {}); // to work with v5 color prop type which allows any string
   /**
    * If `true`, the text will have a bottom margin.
    * @default false

package/Typography/Typography.js

@@ -9,6 +9,17 @@ import { useDefaultProps } from '../DefaultPropsProvider';
 import capitalize from '../utils/capitalize';
 import { getTypographyUtilityClass } from './typographyClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const v6Colors = {
+  primary: true,
+  secondary: true,
+  error: true,
+  info: true,
+  success: true,
+  warning: true,
+  textPrimary: true,
+  textSecondary: true,
+  textDisabled: true
+};
 const extendSxProp = internal_createExtendSxProp();
 const useUtilityClasses = ownerState => {
   const {
@@ -59,6 +70,13 @@ export const TypographyRoot = styled('span', {
     style: {
       color: (theme.vars || theme).palette[color].main
     }
+  })), ...Object.entries(theme.palette?.text || {}).filter(([, value]) => typeof value === 'string').map(([color]) => ({
+    props: {
+      color: `text${capitalize(color)}`
+    },
+    style: {
+      color: (theme.vars || theme).palette.text[color]
+    }
   })), {
     props: ({
       ownerState
@@ -104,19 +122,6 @@ const defaultVariantMapping = {
   body2: 'p',
   inherit: 'p'
 };
-
-// TODO v7: remove this transformation and `extendSxProp`
-const colorTransformations = {
-  textPrimary: 'text.primary',
-  textSecondary: 'text.secondary',
-  // For the main palette, the color will be applied by the `...Object.entries(theme.palette)` clause in the TypographyRoot's styles
-  primary: null,
-  secondary: null,
-  error: null,
-  info: null,
-  success: null,
-  warning: null
-};
 const Typography = /*#__PURE__*/React.forwardRef(function Typography(inProps, ref) {
   const {
     color,
@@ -125,11 +130,12 @@ const Typography = /*#__PURE__*/React.forwardRef(function Typography(inProps, re
     props: inProps,
     name: 'MuiTypography'
   });
-  const textColor = colorTransformations[color];
+  const isSxColor = !v6Colors[color];
+  // TODO: Remove `extendSxProp` in v7
   const props = extendSxProp({
     ...themeProps,
-    ...(textColor !== null && {
-      color: textColor || color
+    ...(isSxColor && {
+      color
     })
   });
   const {
@@ -193,6 +199,12 @@ process.env.NODE_ENV !== "production" ? Typography.propTypes /* remove-proptypes
    * @ignore
    */
   className: PropTypes.string,
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
+   */
+  color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['primary', 'secondary', 'success', 'error', 'info', 'warning', 'textPrimary', 'textSecondary', 'textDisabled']), PropTypes.string]),
   /**
    * The component used for the root node.
    * Either a string to use a HTML element or a component.

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v6.0.0-beta.5
+ * @mui/material v6.0.0-beta.6
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/Autocomplete/Autocomplete.js

@@ -1082,7 +1082,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    */
   openText: PropTypes.string,
   /**
-   * Array of options.
+   * A list of options that will be shown in the Autocomplete.
    */
   options: PropTypes.array.isRequired,
   /**

package/modern/Breadcrumbs/Breadcrumbs.js

@@ -154,7 +154,7 @@ const Breadcrumbs = /*#__PURE__*/React.forwardRef(function Breadcrumbs(inProps,
   return /*#__PURE__*/_jsx(BreadcrumbsRoot, {
     ref: ref,
     component: component,
-    color: "text.secondary",
+    color: "textSecondary",
     className: clsx(classes.root, className),
     ownerState: ownerState,
     ...other,

package/modern/CardHeader/CardHeader.js

@@ -4,7 +4,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import Typography from '../Typography';
+import Typography, { typographyClasses } from '../Typography';
 import { styled } from '../zero-styled';
 import { useDefaultProps } from '../DefaultPropsProvider';
 import cardHeaderClasses, { getCardHeaderUtilityClass } from './cardHeaderClasses';
@@ -61,7 +61,13 @@ const CardHeaderContent = styled('div', {
   slot: 'Content',
   overridesResolver: (props, styles) => styles.content
 })({
-  flex: '1 1 auto'
+  flex: '1 1 auto',
+  [`.${typographyClasses.root}:where(& .${cardHeaderClasses.title})`]: {
+    display: 'block'
+  },
+  [`.${typographyClasses.root}:where(& .${cardHeaderClasses.subheader})`]: {
+    display: 'block'
+  }
 });
 const CardHeader = /*#__PURE__*/React.forwardRef(function CardHeader(inProps, ref) {
   const props = useDefaultProps({
@@ -92,7 +98,6 @@ const CardHeader = /*#__PURE__*/React.forwardRef(function CardHeader(inProps, re
       variant: avatar ? 'body2' : 'h5',
       className: classes.title,
       component: "span",
-      display: "block",
       ...titleTypographyProps,
       children: title
     });
@@ -102,9 +107,8 @@ const CardHeader = /*#__PURE__*/React.forwardRef(function CardHeader(inProps, re
     subheader = /*#__PURE__*/_jsx(Typography, {
       variant: avatar ? 'body2' : 'body1',
       className: classes.subheader,
-      color: "text.secondary",
+      color: "textSecondary",
       component: "span",
-      display: "block",
       ...subheaderTypographyProps,
       children: subheader
     });

package/modern/DialogContentText/DialogContentText.js

@@ -44,7 +44,7 @@ const DialogContentText = /*#__PURE__*/React.forwardRef(function DialogContentTe
   return /*#__PURE__*/_jsx(DialogContentTextRoot, {
     component: "p",
     variant: "body1",
-    color: "text.secondary",
+    color: "textSecondary",
     ref: ref,
     ownerState: ownerState,
     className: clsx(classes.root, className),

package/modern/Divider/Divider.js

@@ -203,10 +203,10 @@ const Divider = /*#__PURE__*/React.forwardRef(function Divider(inProps, ref) {
     absolute = false,
     children,
     className,
-    component = children ? 'div' : 'hr',
+    orientation = 'horizontal',
+    component = children || orientation === 'vertical' ? 'div' : 'hr',
     flexItem = false,
     light = false,
-    orientation = 'horizontal',
     role = component !== 'hr' ? 'separator' : undefined,
     textAlign = 'center',
     variant = 'fullWidth',
@@ -230,6 +230,7 @@ const Divider = /*#__PURE__*/React.forwardRef(function Divider(inProps, ref) {
     role: role,
     ref: ref,
     ownerState: ownerState,
+    "aria-orientation": role === 'separator' && (component !== 'hr' || orientation === 'vertical') ? orientation : undefined,
     ...other,
     children: children ? /*#__PURE__*/_jsx(DividerWrapper, {
       className: classes.wrapper,

package/modern/FormControlLabel/FormControlLabel.js

@@ -8,7 +8,6 @@ import composeClasses from '@mui/utils/composeClasses';
 import { useFormControl } from '../FormControl';
 import { styled } from '../zero-styled';
 import { useDefaultProps } from '../DefaultPropsProvider';
-import Stack from '../Stack';
 import Typography from '../Typography';
 import capitalize from '../utils/capitalize';
 import formControlLabelClasses, { getFormControlLabelUtilityClasses } from './formControlLabelClasses';
@@ -182,8 +181,7 @@ const FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel
     ownerState: ownerState,
     ref: ref,
     ...other,
-    children: [/*#__PURE__*/React.cloneElement(control, controlProps), required ? /*#__PURE__*/_jsxs(Stack, {
-      display: "block",
+    children: [/*#__PURE__*/React.cloneElement(control, controlProps), required ? /*#__PURE__*/_jsxs("div", {
       children: [label, /*#__PURE__*/_jsxs(AsteriskComponent, {
         ownerState: ownerState,
         "aria-hidden": true,