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

package/modern/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/modern/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/modern/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/modern/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/modern/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/modern/{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/modern/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/modern/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/modern/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/modern/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/modern/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';

package/modern/styles/createGetSelector.js

@@ -28,7 +28,7 @@ export default (theme => (colorScheme, css) => {
       if (rule) {
         return {
           [rule.replace('%s', colorScheme)]: excludedVariables,
-          ':root': css
+          [`:root, ${rule.replace('%s', colorScheme)}`]: css
         };
       }
       return {
@@ -38,6 +38,9 @@ export default (theme => (colorScheme, css) => {
         }
       };
     }
+    if (rule && rule !== 'media') {
+      return `:root, ${rule.replace('%s', String(colorScheme))}`;
+    }
   } else if (colorScheme) {
     if (rule === 'media') {
       return `@media (prefers-color-scheme: ${String(colorScheme)}) { :root`;

package/modern/styles/index.js

@@ -4,6 +4,7 @@ import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
 export { default as THEME_ID } from './identifier';
 export { default as adaptV4Theme } from './adaptV4Theme';
 export { hexToRgb, rgbToHex, hslToRgb, decomposeColor, recomposeColor, getContrastRatio, getLuminance, emphasize, alpha, darken, lighten, css, keyframes } from '@mui/system';
+export { unstable_createBreakpoints } from '@mui/system/createBreakpoints';
 // TODO: Remove this function in v6.
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export function experimental_sx() {

package/modern/styles/stringifyTheme.js

@@ -43,8 +43,7 @@ export function stringifyTheme(baseTheme = {}) {
     }
   }
   serializeTheme(serializableTheme);
-  return `import { createBreakpoints } from '@mui/system';
-import { createTransitions } from '@mui/material/styles';
+  return `import { unstable_createBreakpoints as createBreakpoints, createTransitions } from '@mui/material/styles';
 
 const theme = ${JSON.stringify(serializableTheme, null, 2)};
 

package/node/Accordion/Accordion.js

@@ -33,6 +33,7 @@ const useUtilityClasses = ownerState => {
   } = ownerState;
   const slots = {
     root: ['root', !square && 'rounded', expanded && 'expanded', disabled && 'disabled', !disableGutters && 'gutters'],
+    heading: ['heading'],
     region: ['region']
   };
   return (0, _composeClasses.default)(slots, _accordionClasses.getAccordionUtilityClass, classes);
@@ -125,6 +126,13 @@ const AccordionRoot = (0, _zeroStyled.styled)(_Paper.default, {
     }
   }]
 }));
+const AccordionHeading = (0, _zeroStyled.styled)('h3', {
+  name: 'MuiAccordion',
+  slot: 'Heading',
+  overridesResolver: (props, styles) => styles.heading
+})({
+  all: 'unset'
+});
 const Accordion = /*#__PURE__*/React.forwardRef(function Accordion(inProps, ref) {
   const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
@@ -180,12 +188,19 @@ const Accordion = /*#__PURE__*/React.forwardRef(function Accordion(inProps, ref)
     transition: TransitionPropsProp,
     ...slotProps
   };
+  const externalForwardedProps = {
+    slots: backwardCompatibleSlots,
+    slotProps: backwardCompatibleSlotProps
+  };
+  const [AccordionHeadingSlot, accordionProps] = (0, _useSlot.default)('heading', {
+    elementType: AccordionHeading,
+    externalForwardedProps,
+    className: classes.heading,
+    ownerState
+  });
   const [TransitionSlot, transitionProps] = (0, _useSlot.default)('transition', {
     elementType: _Collapse.default,
-    externalForwardedProps: {
-      slots: backwardCompatibleSlots,
-      slotProps: backwardCompatibleSlotProps
-    },
+    externalForwardedProps,
     ownerState
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(AccordionRoot, {
@@ -194,9 +209,12 @@ const Accordion = /*#__PURE__*/React.forwardRef(function Accordion(inProps, ref)
     ownerState: ownerState,
     square: square,
     ...other,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_AccordionContext.default.Provider, {
-      value: contextValue,
-      children: summary
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(AccordionHeadingSlot, {
+      ...accordionProps,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_AccordionContext.default.Provider, {
+        value: contextValue,
+        children: summary
+      })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(TransitionSlot, {
       in: expanded,
       timeout: "auto",
@@ -269,6 +287,7 @@ process.env.NODE_ENV !== "production" ? Accordion.propTypes /* remove-proptypes
    * @default {}
    */
   slotProps: _propTypes.default.shape({
+    heading: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
     transition: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
   }),
   /**
@@ -276,6 +295,7 @@ process.env.NODE_ENV !== "production" ? Accordion.propTypes /* remove-proptypes
    * @default {}
    */
   slots: _propTypes.default.shape({
+    heading: _propTypes.default.elementType,
     transition: _propTypes.default.elementType
   }),
   /**

package/node/Accordion/accordionClasses.js

@@ -11,5 +11,5 @@ var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateU
 function getAccordionUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiAccordion', slot);
 }
-const accordionClasses = (0, _generateUtilityClasses.default)('MuiAccordion', ['root', 'rounded', 'expanded', 'disabled', 'gutters', 'region']);
+const accordionClasses = (0, _generateUtilityClasses.default)('MuiAccordion', ['root', 'heading', 'rounded', 'expanded', 'disabled', 'gutters', 'region']);
 var _default = exports.default = accordionClasses;

package/node/Divider/Divider.js

@@ -121,6 +121,8 @@ const DividerRoot = (0, _zeroStyled.styled)('div', {
       whiteSpace: 'nowrap',
       textAlign: 'center',
       border: 0,
+      borderTopStyle: 'solid',
+      borderLeftStyle: 'solid',
       '&::before, &::after': {
         content: '""',
         alignSelf: 'center'
@@ -133,7 +135,8 @@ const DividerRoot = (0, _zeroStyled.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'
       }
     }
   }, {
@@ -144,7 +147,8 @@ const DividerRoot = (0, _zeroStyled.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/node/Grid/Grid.js

@@ -376,6 +376,10 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _gridClasses.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 = (0, _useThemeProps.default)({
     props: inProps,

package/node/Grid2/Grid2.js

@@ -0,0 +1,118 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Grid = require("@mui/system/Grid");
+var _styles = require("../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 = (0, _Grid.createGrid)({
+  createStyledComponent: (0, _styles.styled)('div', {
+    name: 'MuiGrid2',
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.root
+  }),
+  componentName: 'MuiGrid2',
+  useThemeProps: inProps => (0, _styles.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.default.node,
+  /**
+   * The number of columns.
+   * @default 12
+   */
+  columns: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.arrayOf(_propTypes.default.number), _propTypes.default.number, _propTypes.default.object]),
+  /**
+   * Defines the horizontal space between the type `item` components.
+   * It overrides the value of the `spacing` prop.
+   */
+  columnSpacing: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.string]),
+  /**
+   * If `true`, the component will have the flex *container* behavior.
+   * You should be wrapping *items* with a *container*.
+   * @default false
+   */
+  container: _propTypes.default.bool,
+  /**
+   * Defines the `flex-direction` style property.
+   * It is applied for all screen sizes.
+   * @default 'row'
+   */
+  direction: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), _propTypes.default.arrayOf(_propTypes.default.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), _propTypes.default.object]),
+  /**
+   * Defines the offset value for the type `item` components.
+   */
+  offset: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])), _propTypes.default.object]),
+  /**
+   * Defines the vertical space between the type `item` components.
+   * It overrides the value of the `spacing` prop.
+   */
+  rowSpacing: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.string]),
+  /**
+   * Defines the size of the the type `item` components.
+   */
+  size: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.string, _propTypes.default.bool, _propTypes.default.number, _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool, _propTypes.default.number])), _propTypes.default.object]),
+  /**
+   * Defines the space between the type `item` components.
+   * It can only be used on a type `container` component.
+   * @default 0
+   */
+  spacing: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.string]),
+  /**
+   * @ignore
+   */
+  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]),
+  /**
+   * @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.default.number,
+  /**
+   * Defines the `flex-wrap` style property.
+   * It's applied for all screen sizes.
+   * @default 'wrap'
+   */
+  wrap: _propTypes.default.oneOf(['nowrap', 'wrap-reverse', 'wrap'])
+} : void 0;
+var _default = exports.default = Grid2;

package/node/{Unstable_Grid2 → Grid2}/index.js

@@ -1,7 +1,6 @@
 "use strict";
 'use client';
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -20,16 +19,15 @@ Object.defineProperty(exports, "grid2Classes", {
     return _grid2Classes.default;
   }
 });
-var _Grid = _interopRequireDefault(require("./Grid2"));
-var _Grid2Props = require("./Grid2Props");
-Object.keys(_Grid2Props).forEach(function (key) {
+var _Grid = _interopRequireWildcard(require("./Grid2"));
+Object.keys(_Grid).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _Grid2Props[key]) return;
+  if (key in exports && exports[key] === _Grid[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _Grid2Props[key];
+      return _Grid[key];
     }
   });
 });

package/node/ImageListItemBar/ImageListItemBar.js

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

package/node/ImageListItemBar/imageListItemBarClasses.js

@@ -11,5 +11,5 @@ var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateU
 function getImageListItemBarUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiImageListItemBar', slot);
 }
-const imageListItemBarClasses = (0, _generateUtilityClasses.default)('MuiImageListItemBar', ['root', 'positionBottom', 'positionTop', 'positionBelow', 'titleWrap', 'titleWrapBottom', 'titleWrapTop', 'titleWrapBelow', 'titleWrapActionPosLeft', 'titleWrapActionPosRight', 'title', 'subtitle', 'actionIcon', 'actionIconActionPosLeft', 'actionIconActionPosRight']);
+const imageListItemBarClasses = (0, _generateUtilityClasses.default)('MuiImageListItemBar', ['root', 'positionBottom', 'positionTop', 'positionBelow', 'actionPositionLeft', 'actionPositionRight', 'titleWrap', 'titleWrapBottom', 'titleWrapTop', 'titleWrapBelow', 'titleWrapActionPosLeft', 'titleWrapActionPosRight', 'title', 'subtitle', 'actionIcon', 'actionIconActionPosLeft', 'actionIconActionPosRight']);
 var _default = exports.default = imageListItemBarClasses;

package/node/PigmentGrid/PigmentGrid.js

@@ -11,7 +11,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Grid = _interopRequireDefault(require("@mui/material-pigment-css/Grid"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
-var _gridGenerator = require("@mui/system/Unstable_Grid/gridGenerator");
+var _gridGenerator = require("@mui/system/Grid/gridGenerator");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }