@mui/material 6.0.0-beta.3 → 6.0.0-beta.4

package/Accordion/Accordion.d.ts

@@ -8,6 +8,11 @@ import { ExtendPaperTypeMap } from '../Paper/Paper';
 import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
 
 export interface AccordionSlots {
+  /**
+   * The component that renders the heading.
+   * @default 'h3'
+   */
+  heading?: React.ElementType;
   /**
    * The component that renders the transition.
    * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
@@ -19,10 +24,16 @@ export interface AccordionSlots {
 }
 
 export interface AccordionTransitionSlotPropsOverrides {}
+export interface AccordionHeadingSlotPropsOverrides {}
 
 export type AccordionSlotsAndSlotProps = CreateSlotsAndSlotProps<
   AccordionSlots,
   {
+    heading: SlotProps<
+      React.ElementType<React.HTMLProps<HTMLHeadingElement>>,
+      AccordionHeadingSlotPropsOverrides,
+      AccordionOwnerState
+    >;
     transition: SlotProps<
       React.ElementType<TransitionProps>,
       AccordionTransitionSlotPropsOverrides,

package/Accordion/Accordion.js

@@ -25,6 +25,7 @@ const useUtilityClasses = ownerState => {
   } = ownerState;
   const slots = {
     root: ['root', !square && 'rounded', expanded && 'expanded', disabled && 'disabled', !disableGutters && 'gutters'],
+    heading: ['heading'],
     region: ['region']
   };
   return composeClasses(slots, getAccordionUtilityClass, classes);
@@ -117,6 +118,13 @@ const AccordionRoot = styled(Paper, {
     }
   }]
 }));
+const AccordionHeading = styled('h3', {
+  name: 'MuiAccordion',
+  slot: 'Heading',
+  overridesResolver: (props, styles) => styles.heading
+})({
+  all: 'unset'
+});
 const Accordion = /*#__PURE__*/React.forwardRef(function Accordion(inProps, ref) {
   const props = useDefaultProps({
     props: inProps,
@@ -172,12 +180,19 @@ const Accordion = /*#__PURE__*/React.forwardRef(function Accordion(inProps, ref)
     transition: TransitionPropsProp,
     ...slotProps
   };
+  const externalForwardedProps = {
+    slots: backwardCompatibleSlots,
+    slotProps: backwardCompatibleSlotProps
+  };
+  const [AccordionHeadingSlot, accordionProps] = useSlot('heading', {
+    elementType: AccordionHeading,
+    externalForwardedProps,
+    className: classes.heading,
+    ownerState
+  });
   const [TransitionSlot, transitionProps] = useSlot('transition', {
     elementType: Collapse,
-    externalForwardedProps: {
-      slots: backwardCompatibleSlots,
-      slotProps: backwardCompatibleSlotProps
-    },
+    externalForwardedProps,
     ownerState
   });
   return /*#__PURE__*/_jsxs(AccordionRoot, {
@@ -186,9 +201,12 @@ const Accordion = /*#__PURE__*/React.forwardRef(function Accordion(inProps, ref)
     ownerState: ownerState,
     square: square,
     ...other,
-    children: [/*#__PURE__*/_jsx(AccordionContext.Provider, {
-      value: contextValue,
-      children: summary
+    children: [/*#__PURE__*/_jsx(AccordionHeadingSlot, {
+      ...accordionProps,
+      children: /*#__PURE__*/_jsx(AccordionContext.Provider, {
+        value: contextValue,
+        children: summary
+      })
     }), /*#__PURE__*/_jsx(TransitionSlot, {
       in: expanded,
       timeout: "auto",
@@ -261,6 +279,7 @@ process.env.NODE_ENV !== "production" ? Accordion.propTypes /* remove-proptypes
    * @default {}
    */
   slotProps: PropTypes.shape({
+    heading: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     transition: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
   }),
   /**
@@ -268,6 +287,7 @@ process.env.NODE_ENV !== "production" ? Accordion.propTypes /* remove-proptypes
    * @default {}
    */
   slots: PropTypes.shape({
+    heading: PropTypes.elementType,
     transition: PropTypes.elementType
   }),
   /**

package/Accordion/accordionClasses.d.ts

@@ -1,6 +1,8 @@
 export interface AccordionClasses {
     /** Styles applied to the root element. */
     root: string;
+    /** Styles applied to the heading element. */
+    heading: string;
     /** Styles applied to the root element unless `square={true}`. */
     rounded: string;
     /** State class applied to the root element if `expanded={true}`. */

package/Accordion/accordionClasses.js

@@ -3,5 +3,5 @@ import generateUtilityClass from '@mui/utils/generateUtilityClass';
 export function getAccordionUtilityClass(slot) {
   return generateUtilityClass('MuiAccordion', slot);
 }
-const accordionClasses = generateUtilityClasses('MuiAccordion', ['root', 'rounded', 'expanded', 'disabled', 'gutters', 'region']);
+const accordionClasses = generateUtilityClasses('MuiAccordion', ['root', 'heading', 'rounded', 'expanded', 'disabled', 'gutters', 'region']);
 export default accordionClasses;

package/CHANGELOG.md

@@ -1,5 +1,46 @@
 # [Versions](https://mui.com/versions/)
 
+## 6.0.0-beta.4
+
+<!-- generated comparing v6.0.0-beta.3..next -->
+
+_Jul 30, 2024_
+
+A big thanks to the 12 contributors who made this release possible.
+
+### `@mui/material@6.0.0-beta.4`
+
+- [Accordion] Render a heading wrapping `AccordionSummary` button per W3C Accordion Pattern standards (#42914) @ZeeshanTamboli
+- [Divider] Enable borderStyle enhancement in divider with children (#42715) @anuujj
+- [ImageListItemBar] Deprecate composed classes (#42905) @sai6855
+- Attach selector for default color scheme (#43035) @siriwatknp
+- Stabilize Grid v2 and deprecate Grid v1 (#43054) @DiegoAndai
+
+### `@mui/system@6.0.0-beta.4`
+
+- Make `createBreakpoints` independent for stringify theme (#43048) @siriwatknp
+
+### `@mui/utils@6.0.0-beta.4`
+
+- Fix issues reported by the React Compiler (#43051) @markliu2013
+
+### Docs
+
+- [material-ui] Replace deprecated `<ListItem button/>` with `ListItemButton` component in routing libraries list example (#43110) @aliharis99
+- [material-ui][Card] Update CardMedia description (#43067) @shahzaibdev1
+- [material-ui] Polish out data table demo (#43072) @zanivan
+- [material-ui][Snackbar] Improve reason type in demos (#43077) @sai6855
+- [pigment-css] Fix syntax in migrating-to-pigment-css guide (#43107) @KevinVandy
+- Fix page description line break @oliviertassinari
+
+### Core
+
+- Fix event naming convention @oliviertassinari
+- [docs-infra] Move ads to the `@mui/docs` package (#42944) @alexfauquette
+- [website] Fine-tune button styles on the branding theme (#43082) @zanivan
+
+All contributors of this release in alphabetical order: @alexfauquette, @aliharis99, @anuujj, @DiegoAndai, @KevinVandy, @markliu2013, @oliviertassinari, @sai6855, @shahzaibdev1, @siriwatknp, @zanivan, @ZeeshanTamboli
+
 ## 6.0.0-beta.3
 
 <!-- generated comparing v6.0.0-beta.2..next -->

package/Divider/Divider.js

@@ -113,6 +113,8 @@ const DividerRoot = styled('div', {
       whiteSpace: 'nowrap',
       textAlign: 'center',
       border: 0,
+      borderTopStyle: 'solid',
+      borderLeftStyle: 'solid',
       '&::before, &::after': {
         content: '""',
         alignSelf: 'center'
@@ -125,7 +127,8 @@ const DividerRoot = styled('div', {
     style: {
       '&::before, &::after': {
         width: '100%',
-        borderTop: `thin solid ${(theme.vars || theme).palette.divider}`
+        borderTop: `thin solid ${(theme.vars || theme).palette.divider}`,
+        borderTopStyle: 'inherit'
       }
     }
   }, {
@@ -136,7 +139,8 @@ const DividerRoot = styled('div', {
       flexDirection: 'column',
       '&::before, &::after': {
         height: '100%',
-        borderLeft: `thin solid ${(theme.vars || theme).palette.divider}`
+        borderLeft: `thin solid ${(theme.vars || theme).palette.divider}`,
+        borderLeftStyle: 'inherit'
       }
     }
   }, {

package/Grid/Grid.d.ts

@@ -167,6 +167,8 @@ export interface GridTypeMap<
  * API:
  *
  * - [Grid API](https://next.mui.com/material-ui/api/grid/)
+ *
+ * @deprecated Use the [`Grid2`](https://next.mui.com/material-ui/react-grid2/) component instead.
  */
 declare const Grid: OverridableComponent<GridTypeMap>;
 

package/Grid/Grid.js

@@ -360,6 +360,10 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getGridUtilityClass, classes);
 };
+
+/**
+ * @deprecated Use the [`Grid2`](https://next.mui.com/material-ui/react-grid2/) component instead.
+ */
 const Grid = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
   const themeProps = useThemeProps({
     props: inProps,

package/Grid2/Grid2.d.ts

@@ -0,0 +1,110 @@
+/// <reference types="react" />
+import { SxProps, SystemProps } from '@mui/system';
+import { OverridableComponent, OverrideProps } from '@mui/types';
+import { Theme, Breakpoint } from '../styles';
+export type Grid2Slot = 'root';
+type ResponsiveStyleValue<T> = T | Array<T | null> | {
+    [key in Breakpoint]?: T | null;
+};
+export type GridDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
+export type GridSpacing = number | string;
+export type GridWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
+export type GridSize = 'auto' | 'grow' | number | false;
+export type GridOffset = 'auto' | number;
+export interface GridBaseProps {
+    /**
+     * The content of the component.
+     */
+    children?: React.ReactNode;
+    /**
+     * The number of columns.
+     * @default 12
+     */
+    columns?: ResponsiveStyleValue<number>;
+    /**
+     * Defines the horizontal space between the type `item` components.
+     * It overrides the value of the `spacing` prop.
+     */
+    columnSpacing?: ResponsiveStyleValue<GridSpacing>;
+    /**
+     * If `true`, the component will have the flex *container* behavior.
+     * You should be wrapping *items* with a *container*.
+     * @default false
+     */
+    container?: boolean;
+    /**
+     * Defines the `flex-direction` style property.
+     * It is applied for all screen sizes.
+     * @default 'row'
+     */
+    direction?: ResponsiveStyleValue<GridDirection>;
+    /**
+     * Defines the offset value for the type `item` components.
+     */
+    offset?: ResponsiveStyleValue<GridOffset>;
+    /**
+     * @internal
+     * The level of the grid starts from `0`
+     * and increases when the grid nests inside another grid regardless of container or item.
+     *
+     * ```js
+     * <Grid> // level 0
+     *   <Grid> // level 1
+     *     <Grid> // level 2
+     *   <Grid> // level 1
+     * ```
+     *
+     * Only consecutive grid is considered nesting.
+     * A grid container will start at `0` if there are non-Grid element above it.
+     *
+     * ```js
+     * <Grid> // level 0
+     *   <div>
+     *     <Grid> // level 0
+     *       <Grid> // level 1
+     * ```
+     */
+    unstable_level?: number;
+    /**
+     * Defines the vertical space between the type `item` components.
+     * It overrides the value of the `spacing` prop.
+     */
+    rowSpacing?: ResponsiveStyleValue<GridSpacing>;
+    /**
+     * Defines the size of the the type `item` components.
+     */
+    size?: ResponsiveStyleValue<GridSize>;
+    /**
+     * Defines the space between the type `item` components.
+     * It can only be used on a type `container` component.
+     * @default 0
+     */
+    spacing?: ResponsiveStyleValue<GridSpacing> | undefined;
+    /**
+     * Defines the `flex-wrap` style property.
+     * It's applied for all screen sizes.
+     * @default 'wrap'
+     */
+    wrap?: GridWrap;
+}
+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>;
+/**
+ *
+ * Demos:
+ *
+ * - [Grid version 2](https://next.mui.com/material-ui/react-grid2/)
+ *
+ * API:
+ *
+ * - [Grid2 API](https://next.mui.com/material-ui/api/grid-2/)
+ */
+declare const Grid2: OverridableComponent<Grid2TypeMap<{}, "div">>;
+export default Grid2;

package/Grid2/Grid2.js

@@ -0,0 +1,112 @@
+'use client';
+
+import PropTypes from 'prop-types';
+import { createGrid as createGrid2 } from '@mui/system/Grid';
+import { styled, useThemeProps } from '../styles';
+/**
+ *
+ * Demos:
+ *
+ * - [Grid version 2](https://next.mui.com/material-ui/react-grid2/)
+ *
+ * API:
+ *
+ * - [Grid2 API](https://next.mui.com/material-ui/api/grid-2/)
+ */
+const Grid2 = createGrid2({
+  createStyledComponent: styled('div', {
+    name: 'MuiGrid2',
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.root
+  }),
+  componentName: 'MuiGrid2',
+  useThemeProps: inProps => useThemeProps({
+    props: inProps,
+    name: 'MuiGrid2'
+  })
+});
+process.env.NODE_ENV !== "production" ? Grid2.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The content of the component.
+   */
+  children: PropTypes.node,
+  /**
+   * The number of columns.
+   * @default 12
+   */
+  columns: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number, PropTypes.object]),
+  /**
+   * Defines the horizontal space between the type `item` components.
+   * It overrides the value of the `spacing` prop.
+   */
+  columnSpacing: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
+  /**
+   * If `true`, the component will have the flex *container* behavior.
+   * You should be wrapping *items* with a *container*.
+   * @default false
+   */
+  container: PropTypes.bool,
+  /**
+   * Defines the `flex-direction` style property.
+   * It is applied for all screen sizes.
+   * @default 'row'
+   */
+  direction: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), PropTypes.object]),
+  /**
+   * Defines the offset value for the type `item` components.
+   */
+  offset: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.string, PropTypes.number, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])), PropTypes.object]),
+  /**
+   * Defines the vertical space between the type `item` components.
+   * It overrides the value of the `spacing` prop.
+   */
+  rowSpacing: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
+  /**
+   * Defines the size of the the type `item` components.
+   */
+  size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.string, PropTypes.bool, PropTypes.number, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.bool, PropTypes.number])), PropTypes.object]),
+  /**
+   * Defines the space between the type `item` components.
+   * It can only be used on a type `container` component.
+   * @default 0
+   */
+  spacing: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
+  /**
+   * @ignore
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * @internal
+   * The level of the grid starts from `0`
+   * and increases when the grid nests inside another grid regardless of container or item.
+   *
+   * ```js
+   * <Grid> // level 0
+   *   <Grid> // level 1
+   *     <Grid> // level 2
+   *   <Grid> // level 1
+   * ```
+   *
+   * Only consecutive grid is considered nesting.
+   * A grid container will start at `0` if there are non-Grid element above it.
+   *
+   * ```js
+   * <Grid> // level 0
+   *   <div>
+   *     <Grid> // level 0
+   *       <Grid> // level 1
+   * ```
+   */
+  unstable_level: PropTypes.number,
+  /**
+   * Defines the `flex-wrap` style property.
+   * It's applied for all screen sizes.
+   * @default 'wrap'
+   */
+  wrap: PropTypes.oneOf(['nowrap', 'wrap-reverse', 'wrap'])
+} : void 0;
+export default Grid2;

package/{Unstable_Grid2 → Grid2}/grid2Classes.d.ts

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

package/{Unstable_Grid2 → Grid2}/index.d.ts

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

package/{Unstable_Grid2 → Grid2}/index.js

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

package/{Unstable_Grid2 → Grid2}/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
   "module": "./index.js",
-  "main": "../node/Unstable_Grid2/index.js",
+  "main": "../node/Grid2/index.js",
   "types": "./index.d.ts"
 }

package/ImageListItemBar/ImageListItemBar.js

@@ -17,7 +17,7 @@ const useUtilityClasses = ownerState => {
     actionPosition
   } = ownerState;
   const slots = {
-    root: ['root', `position${capitalize(position)}`],
+    root: ['root', `position${capitalize(position)}`, `actionPosition${capitalize(actionPosition)}`],
     titleWrap: ['titleWrap', `titleWrap${capitalize(position)}`, actionIcon && `titleWrapActionPos${capitalize(actionPosition)}`],
     title: ['title'],
     subtitle: ['subtitle'],

package/ImageListItemBar/imageListItemBarClasses.d.ts

@@ -7,13 +7,23 @@ export interface ImageListItemBarClasses {
     positionTop: string;
     /** Styles applied to the root element if `position="below"`. */
     positionBelow: string;
+    /** Styles applied to the action container element if `actionPosition="left"`. */
+    actionPositionLeft: string;
+    /** Styles applied to the action container element if `actionPosition="right"`. */
+    actionPositionRight: string;
     /** Styles applied to the title and subtitle container element. */
     titleWrap: string;
-    /** Styles applied to the title and subtitle container element if `position="below"`. */
+    /** Styles applied to the title and subtitle container element if `position="below"`.
+     * @deprecated Combine the [.MuiImageListItemBar-titleWrap](/material-ui/api/image-list-item-bar/#image-list-item-bar-classes-titleWrap) and [.MuiImageListItemBar-positionBelow](/material-ui/api/image-list-item-bar/#image-list-item-bar-classes-positionBelow) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+     */
     titleWrapBelow: string;
-    /** Styles applied to the container element if `actionPosition="left"`. */
+    /** Styles applied to the container element if `actionPosition="left"`.
+     * @deprecated Combine the [.MuiImageListItemBar-titleWrap](/material-ui/api/image-list-item-bar/#image-list-item-bar-classes-titleWrap) and [.MuiImageListItemBar-actionPositionLeft](/material-ui/api/image-list-item-bar/#image-list-item-bar-classes-actionPositionLeft) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+     */
     titleWrapActionPosLeft: string;
-    /** Styles applied to the container element if `actionPosition="right"`. */
+    /** Styles applied to the container element if `actionPosition="right"`.
+     * @deprecated Combine the [.MuiImageListItemBar-titleWrap](/material-ui/api/image-list-item-bar/#image-list-item-bar-classes-titleWrap) and [.MuiImageListItemBar-actionPositionRight](/material-ui/api/image-list-item-bar/#image-list-item-bar-classes-actionPositionRight) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+     */
     titleWrapActionPosRight: string;
     /** Styles applied to the title container element. */
     title: string;
@@ -21,7 +31,9 @@ export interface ImageListItemBarClasses {
     subtitle: string;
     /** Styles applied to the actionIcon if supplied. */
     actionIcon: string;
-    /** Styles applied to the actionIcon if `actionPosition="left"`. */
+    /** Styles applied to the actionIcon if `actionPosition="left"`.
+     * @deprecated Combine the [.MuiImageListItemBar-actionIcon](/material-ui/api/image-list-item-bar/#image-list-item-bar-classes-actionIcon) and [.MuiImageListItemBar-actionPositionLeft](/material-ui/api/image-list-item-bar/#image-list-item-bar-classes-actionPositionLeft) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+     */
     actionIconActionPosLeft: string;
 }
 export type ImageListItemBarClassKey = keyof ImageListItemBarClasses;

package/ImageListItemBar/imageListItemBarClasses.js

@@ -3,5 +3,5 @@ import generateUtilityClass from '@mui/utils/generateUtilityClass';
 export function getImageListItemBarUtilityClass(slot) {
   return generateUtilityClass('MuiImageListItemBar', slot);
 }
-const imageListItemBarClasses = generateUtilityClasses('MuiImageListItemBar', ['root', 'positionBottom', 'positionTop', 'positionBelow', 'titleWrap', 'titleWrapBottom', 'titleWrapTop', 'titleWrapBelow', 'titleWrapActionPosLeft', 'titleWrapActionPosRight', 'title', 'subtitle', 'actionIcon', 'actionIconActionPosLeft', 'actionIconActionPosRight']);
+const imageListItemBarClasses = generateUtilityClasses('MuiImageListItemBar', ['root', 'positionBottom', 'positionTop', 'positionBelow', 'actionPositionLeft', 'actionPositionRight', 'titleWrap', 'titleWrapBottom', 'titleWrapTop', 'titleWrapBelow', 'titleWrapActionPosLeft', 'titleWrapActionPosRight', 'title', 'subtitle', 'actionIcon', 'actionIconActionPosLeft', 'actionIconActionPosRight']);
 export default imageListItemBarClasses;

package/PigmentGrid/PigmentGrid.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import Grid from '@mui/material-pigment-css/Grid';
 import composeClasses from '@mui/utils/composeClasses';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
-import { generateDirectionClasses, generateSizeClassNames, generateSpacingClassNames } from '@mui/system/Unstable_Grid/gridGenerator';
+import { generateDirectionClasses, generateSizeClassNames, generateSpacingClassNames } from '@mui/system/Grid/gridGenerator';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {

package/PigmentGrid/index.d.ts

@@ -1,3 +1,3 @@
 export { default } from './PigmentGrid';
 export * from './PigmentGrid';
-export { default as grid2Classes } from '../Unstable_Grid2/grid2Classes';
+export { default as grid2Classes } from '../Grid2/grid2Classes';

package/PigmentGrid/index.js

@@ -1,3 +1,3 @@
 export { default } from './PigmentGrid';
 export * from './PigmentGrid';
-export { default as grid2Classes } from '../Unstable_Grid2/grid2Classes';
+export { default as grid2Classes } from '../Grid2/grid2Classes';

package/index.d.ts

@@ -222,10 +222,9 @@ export { default as FormLabel } from './FormLabel';
 export * from './FormLabel';
 
 export { default as Grid } from './Grid';
-export * from './Grid';
 
-export { default as Unstable_Grid2 } from './Unstable_Grid2';
-export * from './Unstable_Grid2';
+export { default as Grid2 } from './Grid2';
+export * from './Grid2';
 
 export { default as Grow } from './Grow';
 export * from './Grow';

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v6.0.0-beta.3
+ * @mui/material v6.0.0-beta.4
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -109,9 +109,8 @@ export * from './FormHelperText';
 export { default as FormLabel } from './FormLabel';
 export * from './FormLabel';
 export { default as Grid } from './Grid';
-export * from './Grid';
-export { default as Unstable_Grid2 } from './Unstable_Grid2';
-export * from './Unstable_Grid2';
+export { default as Grid2 } from './Grid2';
+export * from './Grid2';
 export { default as Grow } from './Grow';
 export * from './Grow';
 export { default as Hidden } from './Hidden';