@mui/material 6.0.0-alpha.11 → 6.0.0-alpha.13

package/modern/Link/Link.js

@@ -7,14 +7,14 @@ import { alpha } from '@mui/system/colorManipulator';
 import elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef';
 import composeClasses from '@mui/utils/composeClasses';
 import capitalize from '../utils/capitalize';
-import { styled, createUseThemeProps, useTheme } from '../zero-styled';
+import { styled, useTheme } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import useIsFocusVisible from '../utils/useIsFocusVisible';
 import useForkRef from '../utils/useForkRef';
 import Typography from '../Typography';
 import linkClasses, { getLinkUtilityClass } from './linkClasses';
 import getTextDecoration, { colorTransformations } from './getTextDecoration';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiLink');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -118,7 +118,7 @@ const LinkRoot = styled(Typography, {
   };
 });
 const Link = /*#__PURE__*/React.forwardRef(function Link(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiLink'
   });

package/modern/List/List.js

@@ -4,11 +4,11 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import ListContext from './ListContext';
 import { getListUtilityClass } from './listClasses';
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiList');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -53,7 +53,7 @@ const ListRoot = styled('ul', {
   }]
 });
 const List = /*#__PURE__*/React.forwardRef(function List(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiList'
   });

package/modern/ListItem/ListItem.js

@@ -8,7 +8,8 @@ import composeClasses from '@mui/utils/composeClasses';
 import elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef';
 import chainPropTypes from '@mui/utils/chainPropTypes';
 import { alpha } from '@mui/system/colorManipulator';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import ButtonBase from '../ButtonBase';
 import isMuiElement from '../utils/isMuiElement';
 import useEnhancedEffect from '../utils/useEnhancedEffect';
@@ -18,7 +19,6 @@ import listItemClasses, { getListItemUtilityClass } from './listItemClasses';
 import { listItemButtonClasses } from '../ListItemButton';
 import ListItemSecondaryAction from '../ListItemSecondaryAction';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiListItem');
 export const overridesResolver = (props, styles) => {
   const {
     ownerState
@@ -175,7 +175,7 @@ const ListItemContainer = styled('li', {
  * Uses an additional container component if `ListItemSecondaryAction` is the last child.
  */
 const ListItem = /*#__PURE__*/React.forwardRef(function ListItem(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiListItem'
   });

package/modern/ListItemAvatar/ListItemAvatar.js

@@ -5,10 +5,10 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import ListContext from '../List/ListContext';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import { getListItemAvatarUtilityClass } from './listItemAvatarClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiListItemAvatar');
 const useUtilityClasses = ownerState => {
   const {
     alignItems,
@@ -45,7 +45,7 @@ const ListItemAvatarRoot = styled('div', {
  * A simple wrapper to apply `List` styles to an `Avatar`.
  */
 const ListItemAvatar = /*#__PURE__*/React.forwardRef(function ListItemAvatar(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiListItemAvatar'
   });

package/modern/ListItemButton/ListItemButton.js

@@ -5,7 +5,8 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import { alpha } from '@mui/system/colorManipulator';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import rootShouldForwardProp from '../styles/rootShouldForwardProp';
 import ButtonBase from '../ButtonBase';
 import useEnhancedEffect from '../utils/useEnhancedEffect';
@@ -13,7 +14,6 @@ import useForkRef from '../utils/useForkRef';
 import ListContext from '../List/ListContext';
 import listItemButtonClasses, { getListItemButtonUtilityClass } from './listItemButtonClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiListItemButton');
 export const overridesResolver = (props, styles) => {
   const {
     ownerState
@@ -122,7 +122,7 @@ const ListItemButtonRoot = styled(ButtonBase, {
   }]
 }));
 const ListItemButton = /*#__PURE__*/React.forwardRef(function ListItemButton(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiListItemButton'
   });

package/modern/ListItemIcon/ListItemIcon.js

@@ -4,11 +4,11 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import { getListItemIconUtilityClass } from './listItemIconClasses';
 import ListContext from '../List/ListContext';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiListItemIcon');
 const useUtilityClasses = ownerState => {
   const {
     alignItems,
@@ -49,7 +49,7 @@ const ListItemIconRoot = styled('div', {
  * A simple wrapper to apply `List` styles to an `Icon` or `SvgIcon`.
  */
 const ListItemIcon = /*#__PURE__*/React.forwardRef(function ListItemIcon(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiListItemIcon'
   });

package/modern/ListItemSecondaryAction/ListItemSecondaryAction.js

@@ -4,11 +4,11 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import ListContext from '../List/ListContext';
 import { getListItemSecondaryActionClassesUtilityClass } from './listItemSecondaryActionClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiListItemSecondaryAction');
 const useUtilityClasses = ownerState => {
   const {
     disableGutters,
@@ -49,7 +49,7 @@ const ListItemSecondaryActionRoot = styled('div', {
  * @deprecated Use the `secondaryAction` prop in the `ListItem` component instead. This component will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
  */
 const ListItemSecondaryAction = /*#__PURE__*/React.forwardRef(function ListItemSecondaryAction(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiListItemSecondaryAction'
   });

package/modern/ListItemText/ListItemText.js

@@ -6,10 +6,10 @@ import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import Typography from '../Typography';
 import ListContext from '../List/ListContext';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import listItemTextClasses, { getListItemTextUtilityClass } from './listItemTextClasses';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiListItemText');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -61,7 +61,7 @@ const ListItemTextRoot = styled('div', {
   }]
 });
 const ListItemText = /*#__PURE__*/React.forwardRef(function ListItemText(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiListItemText'
   });

package/modern/ListSubheader/ListSubheader.js

@@ -4,11 +4,11 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import capitalize from '../utils/capitalize';
 import { getListSubheaderUtilityClass } from './listSubheaderClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiListSubheader');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -83,7 +83,7 @@ const ListSubheaderRoot = styled('li', {
   }]
 }));
 const ListSubheader = /*#__PURE__*/React.forwardRef(function ListSubheader(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiListSubheader'
   });

package/modern/Menu/Menu.js

@@ -11,10 +11,10 @@ import { useRtl } from '@mui/system/RtlProvider';
 import MenuList from '../MenuList';
 import Popover, { PopoverPaper } from '../Popover';
 import rootShouldForwardProp from '../styles/rootShouldForwardProp';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import { getMenuUtilityClass } from './menuClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiMenu');
 const RTL_ORIGIN = {
   vertical: 'top',
   horizontal: 'right'
@@ -61,7 +61,7 @@ const MenuMenuList = styled(MenuList, {
   outline: 0
 });
 const Menu = /*#__PURE__*/React.forwardRef(function Menu(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiMenu'
   });

package/modern/MenuItem/MenuItem.js

@@ -6,7 +6,8 @@ import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import { alpha } from '@mui/system/colorManipulator';
 import rootShouldForwardProp from '../styles/rootShouldForwardProp';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import ListContext from '../List/ListContext';
 import ButtonBase from '../ButtonBase';
 import useEnhancedEffect from '../utils/useEnhancedEffect';
@@ -16,7 +17,6 @@ import { listItemIconClasses } from '../ListItemIcon';
 import { listItemTextClasses } from '../ListItemText';
 import menuItemClasses, { getMenuItemUtilityClass } from './menuItemClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiMenuItem');
 export const overridesResolver = (props, styles) => {
   const {
     ownerState
@@ -146,7 +146,7 @@ const MenuItemRoot = styled(ButtonBase, {
   }]
 }));
 const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiMenuItem'
   });

package/modern/MobileStepper/MobileStepper.js

@@ -8,11 +8,11 @@ import composeClasses from '@mui/utils/composeClasses';
 import Paper from '../Paper';
 import capitalize from '../utils/capitalize';
 import LinearProgress from '../LinearProgress';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import slotShouldForwardProp from '../styles/slotShouldForwardProp';
 import { getMobileStepperUtilityClass } from './mobileStepperClasses';
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiMobileStepper');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -138,7 +138,7 @@ const MobileStepperProgress = styled(LinearProgress, {
   }]
 });
 const MobileStepper = /*#__PURE__*/React.forwardRef(function MobileStepper(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiMobileStepper'
   });

package/modern/Modal/Modal.js

@@ -5,16 +5,17 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import HTMLElementType from '@mui/utils/HTMLElementType';
 import elementAcceptingRef from '@mui/utils/elementAcceptingRef';
-import { useSlotProps } from '@mui/base/utils';
 import { unstable_useModal as useModal } from '@mui/base/unstable_useModal';
 import composeClasses from '@mui/utils/composeClasses';
 import FocusTrap from '../Unstable_TrapFocus';
 import Portal from '../Portal';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import Backdrop from '../Backdrop';
 import { getModalUtilityClass } from './modalClasses';
+import useSlot from '../utils/useSlot';
+import { useForkRef } from '../utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiModal');
 const useUtilityClasses = ownerState => {
   const {
     open,
@@ -78,7 +79,7 @@ const ModalBackdrop = styled(Backdrop, {
  * This component shares many concepts with [react-overlays](https://react-bootstrap.github.io/react-overlays/#modals).
  */
 const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     name: 'MuiModal',
     props: inProps
   });
@@ -106,8 +107,8 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     onTransitionEnter,
     onTransitionExited,
     open,
-    slotProps,
-    slots,
+    slotProps = {},
+    slots = {},
     // eslint-disable-next-line react/prop-types
     theme,
     ...other
@@ -155,25 +156,31 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     childProps.onEnter = onEnter;
     childProps.onExited = onExited;
   }
-  const RootSlot = slots?.root ?? components.Root ?? ModalRoot;
-  const BackdropSlot = slots?.backdrop ?? components.Backdrop ?? BackdropComponent;
-  const rootSlotProps = slotProps?.root ?? componentsProps.root;
-  const backdropSlotProps = slotProps?.backdrop ?? componentsProps.backdrop;
-  const rootProps = useSlotProps({
-    elementType: RootSlot,
-    externalSlotProps: rootSlotProps,
-    externalForwardedProps: other,
+  const externalForwardedProps = {
+    slots: {
+      root: components.Root,
+      backdrop: components.Backdrop,
+      ...slots
+    },
+    slotProps: {
+      ...componentsProps,
+      ...slotProps
+    }
+  };
+  const [RootSlot, rootProps] = useSlot('root', {
+    elementType: ModalRoot,
+    externalForwardedProps,
     getSlotProps: getRootProps,
     additionalProps: {
       ref,
       as: component
     },
     ownerState,
-    className: clsx(className, rootSlotProps?.className, classes?.root, !ownerState.open && ownerState.exited && classes?.hidden)
+    className: clsx(className, classes?.root, !ownerState.open && ownerState.exited && classes?.hidden)
   });
-  const backdropProps = useSlotProps({
-    elementType: BackdropSlot,
-    externalSlotProps: backdropSlotProps,
+  const [BackdropSlot, backdropProps] = useSlot('backdrop', {
+    elementType: BackdropComponent,
+    externalForwardedProps,
     additionalProps: BackdropProps,
     getSlotProps: otherHandlers => {
       return getBackdropProps({
@@ -188,9 +195,10 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
         }
       });
     },
-    className: clsx(backdropSlotProps?.className, BackdropProps?.className, classes?.backdrop),
+    className: clsx(BackdropProps?.className, classes?.backdrop),
     ownerState
   });
+  const backdropRef = useForkRef(BackdropProps?.ref, backdropProps.ref);
   if (!keepMounted && !open && (!hasTransition || exited)) {
     return null;
   }
@@ -200,8 +208,10 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     disablePortal: disablePortal,
     children: /*#__PURE__*/_jsxs(RootSlot, {
       ...rootProps,
+      ...other,
       children: [!hideBackdrop && BackdropComponent ? /*#__PURE__*/_jsx(BackdropSlot, {
-        ...backdropProps
+        ...backdropProps,
+        ref: backdropRef
       }) : null, /*#__PURE__*/_jsx(FocusTrap, {
         disableEnforceFocus: disableEnforceFocus,
         disableAutoFocus: disableAutoFocus,

package/modern/OutlinedInput/OutlinedInput.js

@@ -8,11 +8,11 @@ import NotchedOutline from './NotchedOutline';
 import useFormControl from '../FormControl/useFormControl';
 import formControlState from '../FormControl/formControlState';
 import rootShouldForwardProp from '../styles/rootShouldForwardProp';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import outlinedInputClasses, { getOutlinedInputUtilityClass } from './outlinedInputClasses';
 import InputBase, { rootOverridesResolver as inputBaseRootOverridesResolver, inputOverridesResolver as inputBaseInputOverridesResolver, InputBaseRoot, InputBaseInput } from '../InputBase/InputBase';
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiOutlinedInput');
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -177,7 +177,7 @@ const OutlinedInputInput = styled(InputBaseInput, {
 }));
 const OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inProps, ref) {
   var _React$Fragment;
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiOutlinedInput'
   });

package/modern/Pagination/Pagination.js

@@ -8,9 +8,9 @@ import integerPropType from '@mui/utils/integerPropType';
 import { getPaginationUtilityClass } from './paginationClasses';
 import usePagination from '../usePagination';
 import PaginationItem from '../PaginationItem';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiPagination');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -51,7 +51,7 @@ function defaultGetAriaLabel(type, page, selected) {
   return `Go to ${type} page`;
 }
 const Pagination = /*#__PURE__*/React.forwardRef(function Pagination(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiPagination'
   });

package/modern/PaginationItem/PaginationItem.js

@@ -14,9 +14,9 @@ import LastPageIcon from '../internal/svg-icons/LastPage';
 import NavigateBeforeIcon from '../internal/svg-icons/NavigateBefore';
 import NavigateNextIcon from '../internal/svg-icons/NavigateNext';
 import useSlot from '../utils/useSlot';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiPaginationItem');
 const overridesResolver = (props, styles) => {
   const {
     ownerState
@@ -266,7 +266,7 @@ const PaginationItemPageIcon = styled('div', {
   }]
 }));
 const PaginationItem = /*#__PURE__*/React.forwardRef(function PaginationItem(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiPaginationItem'
   });

package/modern/Paper/Paper.js

@@ -7,11 +7,11 @@ import integerPropType from '@mui/utils/integerPropType';
 import chainPropTypes from '@mui/utils/chainPropTypes';
 import composeClasses from '@mui/utils/composeClasses';
 import { alpha } from '@mui/system/colorManipulator';
-import { styled, createUseThemeProps, useTheme } from '../zero-styled';
+import { styled, useTheme } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import getOverlayAlpha from '../styles/getOverlayAlpha';
 import { getPaperUtilityClass } from './paperClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiPaper');
 const useUtilityClasses = ownerState => {
   const {
     square,
@@ -64,7 +64,7 @@ const PaperRoot = styled('div', {
   }]
 }));
 const Paper = /*#__PURE__*/React.forwardRef(function Paper(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiPaper'
   });

package/modern/PigmentContainer/PigmentContainer.js

@@ -0,0 +1,98 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+// @ts-ignore
+import Container from '@pigment-css/react/Container';
+import capitalize from '@mui/utils/capitalize';
+import composeClasses from '@mui/utils/composeClasses';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import { jsx as _jsx } from "react/jsx-runtime";
+const useUtilityClasses = ownerState => {
+  const {
+    classes,
+    fixed,
+    disableGutters,
+    maxWidth
+  } = ownerState;
+  const slots = {
+    root: ['root', maxWidth && `maxWidth${capitalize(String(maxWidth))}`, fixed && 'fixed', disableGutters && 'disableGutters']
+  };
+  return composeClasses(slots, slot => generateUtilityClass('MuiContainer', slot), classes);
+};
+/**
+ *
+ * Demos:
+ *
+ * - [Container](https://next.mui.com/material-ui/react-container/)
+ *
+ * API:
+ *
+ * - [PigmentContainer API](https://next.mui.com/material-ui/api/pigment-container/)
+ */
+const PigmentContainer = /*#__PURE__*/React.forwardRef(function PigmentContainer({
+  className,
+  disableGutters = false,
+  fixed = false,
+  maxWidth = 'lg',
+  ...props
+}, ref) {
+  const ownerState = {
+    ...props,
+    disableGutters,
+    fixed,
+    maxWidth
+  };
+  const classes = useUtilityClasses(ownerState);
+  return /*#__PURE__*/_jsx(Container, {
+    className: clsx(classes.root, className),
+    disableGutters: disableGutters,
+    fixed: fixed,
+    maxWidth: maxWidth,
+    ...props,
+    // @ts-ignore
+    ref: ref
+  });
+});
+process.env.NODE_ENV !== "production" ? PigmentContainer.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * @ignore
+   */
+  children: PropTypes.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * If `true`, the left and right padding is removed.
+   * @default false
+   */
+  disableGutters: PropTypes.bool,
+  /**
+   * Set the max-width to match the min-width of the current breakpoint.
+   * This is useful if you'd prefer to design for a fixed set of sizes
+   * instead of trying to accommodate a fully fluid viewport.
+   * It's fluid by default.
+   * @default false
+   */
+  fixed: PropTypes.bool,
+  /**
+   * Determine the max-width of the container.
+   * The container width grows with the size of the screen.
+   * Set to `false` to disable `maxWidth`.
+   * @default 'lg'
+   */
+  maxWidth: PropTypes.oneOf(['lg', 'md', 'sm', 'xl', 'xs', false]),
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+} : void 0;
+export default PigmentContainer;

package/modern/PigmentContainer/index.js

@@ -0,0 +1,3 @@
+export { default } from './PigmentContainer';
+export * from './PigmentContainer';
+export { default as containerClasses } from '../Container/containerClasses';