@mui/material 7.0.0-beta.0 → 7.0.0-beta.1

package/modern/OverridableComponent/index.d.ts

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { DistributiveOmit } from '@mui/types';
+import { StyledComponentProps } from "../styles/index.js";
+/**
+ * A component whose root component can be controlled via a `component` prop.
+ *
+ * Adjusts valid props based on the type of `component`.
+ */
+export interface OverridableComponent<TypeMap extends OverridableTypeMap> {
+  <RootComponent extends React.ElementType>(props: {
+    /**
+     * The component used for the root node.
+     * Either a string to use a HTML element or a component.
+     */
+    component: RootComponent;
+  } & OverrideProps<TypeMap, RootComponent>): React.JSX.Element | null;
+  (props: DefaultComponentProps<TypeMap>): React.JSX.Element | null;
+}
+/**
+ * Props of the component if `component={Component}` is used.
+ */
+export type OverrideProps<TypeMap extends OverridableTypeMap, RootComponent extends React.ElementType> = (BaseProps<TypeMap> & DistributiveOmit<React.ComponentPropsWithRef<RootComponent>, keyof BaseProps<TypeMap>>);
+/**
+ * Props if `component={Component}` is NOT used.
+ */
+export type DefaultComponentProps<TypeMap extends OverridableTypeMap> = BaseProps<TypeMap> & DistributiveOmit<React.ComponentPropsWithRef<TypeMap['defaultComponent']>, keyof BaseProps<TypeMap>>;
+/**
+ * Props defined on the component (+ common material-ui props).
+ */
+export type BaseProps<TypeMap extends OverridableTypeMap> = TypeMap['props'] & CommonProps;
+/**
+ * Props that are valid for material-ui components.
+ */
+export interface CommonProps extends StyledComponentProps<never> {
+  className?: string;
+  style?: React.CSSProperties;
+}
+export interface OverridableTypeMap {
+  props: {};
+  defaultComponent: React.ElementType;
+}

package/modern/Pagination/Pagination.d.ts

@@ -0,0 +1,79 @@
+import * as React from 'react';
+import { OverridableStringUnion } from '@mui/types';
+import { SxProps } from '@mui/system';
+import { InternalStandardProps as StandardProps } from '@mui/material';
+import { Theme } from "../styles/index.js";
+import { UsePaginationItem, UsePaginationProps } from "../usePagination/usePagination.js";
+import { PaginationClasses } from "./paginationClasses.js";
+export interface PaginationRenderItemParams extends UsePaginationItem {
+  color: PaginationProps['color'];
+  shape: PaginationProps['shape'];
+  size: PaginationProps['size'];
+  variant: PaginationProps['variant'];
+}
+export interface PaginationPropsVariantOverrides {}
+export interface PaginationPropsSizeOverrides {}
+export interface PaginationPropsColorOverrides {}
+export interface PaginationProps extends UsePaginationProps, StandardProps<React.HTMLAttributes<HTMLElement>, 'children' | 'onChange'> {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<PaginationClasses>;
+  /**
+   * The active color.
+   * 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).
+   * @default 'standard'
+   */
+  color?: OverridableStringUnion<'primary' | 'secondary' | 'standard', PaginationPropsColorOverrides>;
+  /**
+   * Accepts a function which returns a string value that provides a user-friendly name for the current page.
+   * This is important for screen reader users.
+   *
+   * For localization purposes, you can use the provided [translations](https://mui.com/material-ui/guides/localization/).
+   * @param {string} type The link or button type to format ('page' | 'first' | 'last' | 'next' | 'previous' | 'start-ellipsis' | 'end-ellipsis'). Defaults to 'page'.
+   * @param {number | null} page The page number to format.
+   * @param {boolean} selected If true, the current page is selected.
+   * @returns {string}
+   */
+  getItemAriaLabel?: (type: UsePaginationItem['type'], page: UsePaginationItem['page'], selected: UsePaginationItem['selected']) => string;
+
+  /**
+   * Render the item.
+   * @param {PaginationRenderItemParams} params The props to spread on a PaginationItem.
+   * @returns {ReactNode}
+   * @default (item) => <PaginationItem {...item} />
+   */
+  renderItem?: (params: PaginationRenderItemParams) => React.ReactNode;
+  /**
+   * The shape of the pagination items.
+   * @default 'circular'
+   */
+  shape?: 'circular' | 'rounded';
+  /**
+   * The size of the component.
+   * @default 'medium'
+   */
+  size?: OverridableStringUnion<'small' | 'medium' | 'large', PaginationPropsSizeOverrides>;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * The variant to use.
+   * @default 'text'
+   */
+  variant?: OverridableStringUnion<'text' | 'outlined', PaginationPropsVariantOverrides>;
+}
+
+/**
+ *
+ * Demos:
+ *
+ * - [Pagination](https://next.mui.com/material-ui/react-pagination/)
+ *
+ * API:
+ *
+ * - [Pagination API](https://next.mui.com/material-ui/api/pagination/)
+ */
+export default function Pagination(props: PaginationProps): React.JSX.Element;

package/modern/Pagination/index.d.ts

@@ -0,0 +1,4 @@
+export { default } from "./Pagination.js";
+export * from "./Pagination.js";
+export { default as paginationClasses } from "./paginationClasses.js";
+export * from "./paginationClasses.js";

package/modern/Pagination/paginationClasses.d.ts

@@ -0,0 +1,14 @@
+export interface PaginationClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the ul element. */
+  ul: string;
+  /** Styles applied to the root element if `variant="outlined"`. */
+  outlined: string;
+  /** Styles applied to the root element if `variant="text"`. */
+  text: string;
+}
+export type PaginationClassKey = keyof PaginationClasses;
+export declare function getPaginationUtilityClass(slot: string): string;
+declare const paginationClasses: PaginationClasses;
+export default paginationClasses;

package/modern/PaginationItem/PaginationItem.d.ts

@@ -0,0 +1,110 @@
+import * as React from 'react';
+import { OverridableStringUnion } from '@mui/types';
+import { SxProps } from '@mui/system';
+import { OverridableComponent, OverrideProps } from "../OverridableComponent/index.js";
+import { Theme } from "../styles/index.js";
+import { UsePaginationItem } from "../usePagination/usePagination.js";
+import { PaginationItemClasses } from "./paginationItemClasses.js";
+import { CreateSlotsAndSlotProps, SlotProps } from "../utils/types.js";
+export interface PaginationItemPropsVariantOverrides {}
+export interface PaginationItemPropsSizeOverrides {}
+export interface PaginationItemPropsColorOverrides {}
+export interface PaginationItemSlots {
+  first: React.ElementType;
+  last: React.ElementType;
+  next: React.ElementType;
+  previous: React.ElementType;
+}
+export type PaginationItemSlotsAndSlotProps = CreateSlotsAndSlotProps<PaginationItemSlots, {
+  first: SlotProps<React.ElementType<React.HTMLProps<HTMLElement>>, {}, PaginationItemOwnerState>;
+  last: SlotProps<React.ElementType<React.HTMLProps<HTMLElement>>, {}, PaginationItemOwnerState>;
+  next: SlotProps<React.ElementType<React.HTMLProps<HTMLElement>>, {}, PaginationItemOwnerState>;
+  previous: SlotProps<React.ElementType<React.HTMLProps<HTMLElement>>, {}, PaginationItemOwnerState>;
+}>;
+export interface PaginationItemOwnerState extends PaginationItemProps {}
+export interface PaginationItemOwnProps extends PaginationItemSlotsAndSlotProps {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<PaginationItemClasses>;
+  /**
+   * The active color.
+   * 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).
+   * @default 'standard'
+   */
+  color?: OverridableStringUnion<'standard' | 'primary' | 'secondary', PaginationItemPropsColorOverrides>;
+  /**
+   * The components used for each slot inside.
+   *
+   * This prop is an alias for the `slots` prop.
+   * It's recommended to use the `slots` prop instead.
+   *
+   * @default {}
+   * @deprecated use the `slots` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   */
+  components?: {
+    first?: React.ElementType;
+    last?: React.ElementType;
+    next?: React.ElementType;
+    previous?: React.ElementType;
+  };
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * The current page number.
+   */
+  page?: React.ReactNode;
+  /**
+   * If `true` the pagination item is selected.
+   * @default false
+   */
+  selected?: boolean;
+  /**
+   * The shape of the pagination item.
+   * @default 'circular'
+   */
+  shape?: 'circular' | 'rounded';
+  /**
+   * The size of the component.
+   * @default 'medium'
+   */
+  size?: OverridableStringUnion<'small' | 'medium' | 'large', PaginationItemPropsSizeOverrides>;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * The type of pagination item.
+   * @default 'page'
+   */
+  type?: UsePaginationItem['type'];
+  /**
+   * The variant to use.
+   * @default 'text'
+   */
+  variant?: OverridableStringUnion<'text' | 'outlined', PaginationItemPropsVariantOverrides>;
+}
+export interface PaginationItemTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'div'> {
+  props: AdditionalProps & PaginationItemOwnProps;
+  defaultComponent: RootComponent;
+}
+
+/**
+ *
+ * Demos:
+ *
+ * - [Pagination](https://next.mui.com/material-ui/react-pagination/)
+ *
+ * API:
+ *
+ * - [PaginationItem API](https://next.mui.com/material-ui/api/pagination-item/)
+ */
+declare const PaginationItem: OverridableComponent<PaginationItemTypeMap>;
+export type PaginationItemProps<RootComponent extends React.ElementType = PaginationItemTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<PaginationItemTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
+export default PaginationItem;

package/modern/PaginationItem/index.d.ts

@@ -0,0 +1,4 @@
+export { default } from "./PaginationItem.js";
+export * from "./PaginationItem.js";
+export { default as paginationItemClasses } from "./paginationItemClasses.js";
+export * from "./paginationItemClasses.js";

package/modern/PaginationItem/paginationItemClasses.d.ts

@@ -0,0 +1,54 @@
+export interface PaginationItemClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element if `type="page"`. */
+  page: string;
+  /** Styles applied to the root element if `size="small"`. */
+  sizeSmall: string;
+  /** Styles applied to the root element if `size="large"`. */
+  sizeLarge: string;
+  /** Styles applied to the root element if `variant="text"`. */
+  text: string;
+  /** Styles applied to the root element if `variant="text"` and `color="primary"`.
+   *  @deprecated Combine the [.MuiPaginationItem-text](/material-ui/api/pagination-item/#pagination-item-classes-text) and [.MuiPaginationItem-colorPrimary](/material-ui/api/pagination-item/#pagination-item-classes-colorPrimary) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   */
+  textPrimary: string;
+  /** Styles applied to the root element if `variant="text"` and `color="secondary"`.
+   *  @deprecated Combine the [.MuiPaginationItem-text](/material-ui/api/pagination-item/#pagination-item-classes-text) and [.MuiPaginationItem-colorSecondary](/material-ui/api/pagination-item/#pagination-item-classes-colorSecondary) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   */
+  textSecondary: string;
+  /** Styles applied to the root element if `variant="outlined"`. */
+  outlined: string;
+  /** Styles applied to the root element if `variant="outlined"` and `color="primary"`.
+   * @deprecated Combine the [.MuiPaginationItem-outlined](/material-ui/api/pagination-item/#pagination-item-classes-outlined) and [.MuiPaginationItem-colorPrimary](/material-ui/api/pagination-item/#pagination-item-classes-colorPrimary) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   */
+  outlinedPrimary: string;
+  /** Styles applied to the root element if `variant="outlined"` and `color="secondary"`.
+   * @deprecated Combine the [.MuiPaginationItem-outlined](/material-ui/api/pagination-item/#pagination-item-classes-outlined) and [.MuiPaginationItem-colorSecondary](/material-ui/api/pagination-item/#pagination-item-classes-colorSecondary) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   */
+  outlinedSecondary: string;
+  /** Styles applied to the root element if `rounded="true"`. */
+  rounded: string;
+  /** Styles applied to the root element if `type="start-ellipsis"` or `type="end-ellipsis"`. */
+  ellipsis: string;
+  /** Styles applied to the root element if `type="first"` or type="last". */
+  firstLast: string;
+  /** Styles applied to the root element if `type="previous"` or type="next". */
+  previousNext: string;
+  /** State class applied to the root element if keyboard focused. */
+  focusVisible: string;
+  /** State class applied to the root element if `disabled={true}`. */
+  disabled: string;
+  /** State class applied to the root element if `selected={true}`. */
+  selected: string;
+  /** Styles applied to the icon to display. */
+  icon: string;
+  /** Styles applied to the root element if `color="primary"`. */
+  colorPrimary: string;
+  /** Styles applied to the root element if `color="secondary"`. */
+  colorSecondary: string;
+}
+export type PaginationItemClassKey = keyof PaginationItemClasses;
+export declare function getPaginationItemUtilityClass(slot: string): string;
+declare const paginationItemClasses: PaginationItemClasses;
+export default paginationItemClasses;

package/modern/Paper/Paper.d.ts

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { SxProps } from '@mui/system';
+import { OverridableStringUnion } from '@mui/types';
+import { Theme } from "../styles/index.js";
+import { OverrideProps, OverridableComponent, OverridableTypeMap } from "../OverridableComponent/index.js";
+import { PaperClasses } from "./paperClasses.js";
+export interface PaperPropsVariantOverrides {}
+export interface PaperOwnProps {
+  /**
+   * The content of the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<PaperClasses>;
+  /**
+   * Shadow depth, corresponds to `dp` in the spec.
+   * It accepts values between 0 and 24 inclusive.
+   * @default 1
+   */
+  elevation?: number;
+  /**
+   * If `true`, rounded corners are disabled.
+   * @default false
+   */
+  square?: boolean;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * The variant to use.
+   * @default 'elevation'
+   */
+  variant?: OverridableStringUnion<'elevation' | 'outlined', PaperPropsVariantOverrides>;
+}
+export interface PaperTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'div'> {
+  props: AdditionalProps & PaperOwnProps;
+  defaultComponent: RootComponent;
+}
+
+/**
+ *
+ * Demos:
+ *
+ * - [Card](https://next.mui.com/material-ui/react-card/)
+ * - [Paper](https://next.mui.com/material-ui/react-paper/)
+ *
+ * API:
+ *
+ * - [Paper API](https://next.mui.com/material-ui/api/paper/)
+ */
+declare const Paper: OverridableComponent<PaperTypeMap>;
+export interface ExtendPaperTypeMap<TypeMap extends OverridableTypeMap, Keys extends string = ''> {
+  props: TypeMap['props'] & Omit<PaperTypeMap['props'], Keys>;
+  defaultComponent: TypeMap['defaultComponent'];
+}
+export type PaperProps<RootComponent extends React.ElementType = PaperTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<PaperTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
+export default Paper;

package/modern/Paper/index.d.ts

@@ -0,0 +1,4 @@
+export { default } from "./Paper.js";
+export type { PaperProps, PaperOwnProps, PaperPropsVariantOverrides, PaperTypeMap } from "./Paper.js";
+export { default as paperClasses } from "./paperClasses.js";
+export * from "./paperClasses.js";

package/modern/Paper/paperClasses.d.ts

@@ -0,0 +1,64 @@
+export interface PaperClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element unless `square={true}`. */
+  rounded: string;
+  /** Styles applied to the root element if `variant="outlined"`. */
+  outlined: string;
+  /** Styles applied to the root element if `variant="elevation"`. */
+  elevation: string;
+  /** Styles applied to the root element if `elevation={0}`. */
+  elevation0: string;
+  /** Styles applied to the root element if `elevation={1}`. */
+  elevation1: string;
+  /** Styles applied to the root element if `elevation={2}`. */
+  elevation2: string;
+  /** Styles applied to the root element if `elevation={3}`. */
+  elevation3: string;
+  /** Styles applied to the root element if `elevation={4}`. */
+  elevation4: string;
+  /** Styles applied to the root element if `elevation={5}`. */
+  elevation5: string;
+  /** Styles applied to the root element if `elevation={6}`. */
+  elevation6: string;
+  /** Styles applied to the root element if `elevation={7}`. */
+  elevation7: string;
+  /** Styles applied to the root element if `elevation={8}`. */
+  elevation8: string;
+  /** Styles applied to the root element if `elevation={9}`. */
+  elevation9: string;
+  /** Styles applied to the root element if `elevation={10}`. */
+  elevation10: string;
+  /** Styles applied to the root element if `elevation={11}`. */
+  elevation11: string;
+  /** Styles applied to the root element if `elevation={12}`. */
+  elevation12: string;
+  /** Styles applied to the root element if `elevation={13}`. */
+  elevation13: string;
+  /** Styles applied to the root element if `elevation={14}`. */
+  elevation14: string;
+  /** Styles applied to the root element if `elevation={15}`. */
+  elevation15: string;
+  /** Styles applied to the root element if `elevation={16}`. */
+  elevation16: string;
+  /** Styles applied to the root element if `elevation={17}`. */
+  elevation17: string;
+  /** Styles applied to the root element if `elevation={18}`. */
+  elevation18: string;
+  /** Styles applied to the root element if `elevation={19}`. */
+  elevation19: string;
+  /** Styles applied to the root element if `elevation={20}`. */
+  elevation20: string;
+  /** Styles applied to the root element if `elevation={21}`. */
+  elevation21: string;
+  /** Styles applied to the root element if `elevation={22}`. */
+  elevation22: string;
+  /** Styles applied to the root element if `elevation={23}`. */
+  elevation23: string;
+  /** Styles applied to the root element if `elevation={24}`. */
+  elevation24: string;
+}
+export type PaperClassKey = keyof PaperClasses;
+export declare function getPaperUtilityClass(slot: string): string;
+declare const paperClasses: PaperClasses;
+export default paperClasses;

package/modern/PigmentContainer/PigmentContainer.d.ts

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { OverridableComponent, OverrideProps } from '@mui/types';
+import { SxProps, Breakpoint } from '@mui/system';
+import { Theme } from "../styles/index.js";
+import { ContainerClasses } from "../Container/containerClasses.js";
+export interface PigmentContainerOwnProps {
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<ContainerClasses>;
+  /**
+   * If `true`, the left and right padding is removed.
+   * @default false
+   */
+  disableGutters?: boolean;
+  /**
+   * 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?: boolean;
+  /**
+   * 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?: Breakpoint | false;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+export interface PigmentContainerTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'div'> {
+  props: AdditionalProps & PigmentContainerOwnProps;
+  defaultComponent: RootComponent;
+}
+export type PigmentContainerProps<RootComponent extends React.ElementType = PigmentContainerTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<PigmentContainerTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
+/**
+ *
+ * Demos:
+ *
+ * - [Container](https://next.mui.com/material-ui/react-container/)
+ *
+ * API:
+ *
+ * - [PigmentContainer API](https://next.mui.com/material-ui/api/pigment-container/)
+ */
+declare const PigmentContainer: OverridableComponent<PigmentContainerTypeMap>;
+export default PigmentContainer;

package/modern/PigmentContainer/index.d.ts

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

package/modern/PigmentGrid/PigmentGrid.d.ts

@@ -0,0 +1,83 @@
+import * as React from 'react';
+import { OverridableComponent, OverrideProps } from '@mui/types';
+import { SxProps } from '@mui/system';
+import { Breakpoint, Theme } from "../styles/index.js";
+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;
+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 of the grid.
+   */
+  offset?: ResponsiveStyleValue<number> | undefined;
+  /**
+   * Defines the vertical space between the type `item` components.
+   * It overrides the value of the `spacing` prop.
+   */
+  rowSpacing?: ResponsiveStyleValue<GridSpacing>;
+  /**
+   * 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 column size of the grid.
+   */
+  size?: ResponsiveStyleValue<GridSize> | undefined;
+  /**
+   * Defines the `flex-wrap` style property.
+   * It's applied for all screen sizes.
+   * @default 'wrap'
+   */
+  wrap?: GridWrap;
+}
+export interface GridTypeMap<AdditionalProps = {}, DefaultComponent extends React.ElementType = 'div'> {
+  props: AdditionalProps & GridBaseProps & {
+    sx?: SxProps<Theme>;
+  };
+  defaultComponent: DefaultComponent;
+}
+export type GridProps<RootComponent extends React.ElementType = GridTypeMap['defaultComponent'], AdditionalProps = {
+  component?: React.ElementType;
+}> = OverrideProps<GridTypeMap<AdditionalProps, RootComponent>, RootComponent>;
+/**
+ *
+ * Demos:
+ *
+ * - [Grid](https://next.mui.com/material-ui/react-grid/)
+ *
+ * API:
+ *
+ * - [PigmentGrid API](https://next.mui.com/material-ui/api/pigment-grid/)
+ */
+declare const PigmentGrid: OverridableComponent<GridTypeMap>;
+export default PigmentGrid;

package/modern/PigmentGrid/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from "./PigmentGrid.js";
+export * from "./PigmentGrid.js";
+export { default as gridClasses } from "../Grid/gridClasses.js";

package/modern/PigmentStack/PigmentStack.d.ts

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { OverridableComponent, OverrideProps } from '@mui/types';
+import { SxProps } from '@mui/system';
+import { Breakpoint, Theme } from "../styles/index.js";
+type ResponsiveStyleValue<T> = T | Array<T | null> | { [key in Breakpoint]?: T | null };
+export interface PigmentStackOwnProps {
+  /**
+   * The content of the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Defines the `flex-direction` style property.
+   * It is applied for all screen sizes.
+   * @default 'column'
+   */
+  direction?: ResponsiveStyleValue<'row' | 'row-reverse' | 'column' | 'column-reverse'>;
+  /**
+   * Defines the space between immediate children.
+   * @default 0
+   */
+  spacing?: ResponsiveStyleValue<number | string>;
+  /**
+   * Add an element between each child.
+   */
+  divider?: React.ReactNode;
+  /**
+   * The system prop, which allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+export interface PigmentStackTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'div'> {
+  props: AdditionalProps & PigmentStackOwnProps;
+  defaultComponent: RootComponent;
+}
+export type PigmentStackProps<RootComponent extends React.ElementType = PigmentStackTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<PigmentStackTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
+/**
+ *
+ * Demos:
+ *
+ * - [Stack](https://next.mui.com/material-ui/react-stack/)
+ *
+ * API:
+ *
+ * - [PigmentStack API](https://next.mui.com/material-ui/api/pigment-stack/)
+ */
+declare const PigmentStack: OverridableComponent<PigmentStackTypeMap>;
+export default PigmentStack;

package/modern/PigmentStack/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from "./PigmentStack.js";
+export * from "./PigmentStack.js";
+export { default as stackClasses } from "../Stack/stackClasses.js";