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

package/cssVars/cssVarsParser.d.ts

@@ -0,0 +1,64 @@
+type NestedRecord<V = any> = {
+  [k: string | number]: NestedRecord<V> | V;
+};
+/**
+ * This function create an object from keys, value and then assign to target
+ *
+ * @param {Object} obj : the target object to be assigned
+ * @param {string[]} keys
+ * @param {string | number} value
+ *
+ * @example
+ * const source = {}
+ * assignNestedKeys(source, ['palette', 'primary'], 'var(--palette-primary)')
+ * console.log(source) // { palette: { primary: 'var(--palette-primary)' } }
+ *
+ * @example
+ * const source = { palette: { primary: 'var(--palette-primary)' } }
+ * assignNestedKeys(source, ['palette', 'secondary'], 'var(--palette-secondary)')
+ * console.log(source) // { palette: { primary: 'var(--palette-primary)', secondary: 'var(--palette-secondary)' } }
+ */
+export declare const assignNestedKeys: <T extends Record<string, any> | null | undefined | string = NestedRecord<any>, Value = any>(obj: T, keys: Array<string>, value: Value, arrayKeys?: Array<string>) => void;
+/**
+ *
+ * @param {Object} obj : source object
+ * @param {Function} callback : a function that will be called when
+ *                   - the deepest key in source object is reached
+ *                   - the value of the deepest key is NOT `undefined` | `null`
+ *
+ * @example
+ * walkObjectDeep({ palette: { primary: { main: '#000000' } } }, console.log)
+ * // ['palette', 'primary', 'main'] '#000000'
+ */
+export declare const walkObjectDeep: <Value, T = Record<string, any>>(obj: T, callback: (keys: Array<string>, value: Value, arrayKeys: Array<string>) => void, shouldSkipPaths?: (keys: Array<string>) => boolean) => void;
+/**
+ * a function that parse theme and return { css, vars }
+ *
+ * @param {Object} theme
+ * @param {{
+ *  prefix?: string,
+ *  shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean
+ * }} options.
+ *  `prefix`: The prefix of the generated CSS variables. This function does not change the value.
+ *
+ * @returns {{ css: Object, vars: Object }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme).
+ *
+ * @example
+ * const { css, vars } = parser({
+ *   fontSize: 12,
+ *   lineHeight: 1.2,
+ *   palette: { primary: { 500: 'var(--color)' } }
+ * }, { prefix: 'foo' })
+ *
+ * console.log(css) // { '--foo-fontSize': '12px', '--foo-lineHeight': 1.2, '--foo-palette-primary-500': 'var(--color)' }
+ * console.log(vars) // { fontSize: 'var(--foo-fontSize)', lineHeight: 'var(--foo-lineHeight)', palette: { primary: { 500: 'var(--foo-palette-primary-500)' } } }
+ */
+export default function cssVarsParser<T extends Record<string, any>>(theme: Record<string, any>, options?: {
+  prefix?: string;
+  shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean;
+}): {
+  css: Record<string, string | number>;
+  vars: T;
+  varsWithDefaults: {};
+};
+export {};

package/cssVars/getColorSchemeSelector.d.ts

@@ -0,0 +1 @@
+export declare function createGetColorSchemeSelector<T extends string>(selector: 'media' | 'class' | 'data' | string): (colorScheme: T) => string;

package/cssVars/index.d.ts

@@ -0,0 +1,7 @@
+export { default } from "./createCssVarsProvider.js";
+export type { CreateCssVarsProviderResult, CssVarsProviderConfig, ColorSchemeContextValue } from "./createCssVarsProvider.js";
+export { default as prepareCssVars } from "./prepareCssVars.js";
+export { default as prepareTypographyVars } from "./prepareTypographyVars.js";
+export type { ExtractTypographyTokens } from "./prepareTypographyVars.js";
+export { default as createCssVarsTheme } from "./createCssVarsTheme.js";
+export { createGetColorSchemeSelector } from "./getColorSchemeSelector.js";

package/cssVars/prepareCssVars.d.ts

@@ -0,0 +1,16 @@
+export interface DefaultCssVarsTheme {
+  colorSchemes?: Record<string, any>;
+  defaultColorScheme?: string;
+}
+declare function prepareCssVars<T extends DefaultCssVarsTheme, ThemeVars extends Record<string, any>>(theme: T, parserConfig?: {
+  prefix?: string;
+  colorSchemeSelector?: 'media' | 'class' | 'data' | string;
+  disableCssColorScheme?: boolean;
+  shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean;
+  getSelector?: (colorScheme: keyof T['colorSchemes'] | undefined, css: Record<string, any>) => string | Record<string, any>;
+}): {
+  vars: ThemeVars;
+  generateThemeVars: () => ThemeVars;
+  generateStyleSheets: () => Record<string, any>[];
+};
+export default prepareCssVars;

package/cssVars/prepareTypographyVars.d.ts

@@ -0,0 +1,4 @@
+type RecordPropertyNames<T> = { [K in keyof T]: T[K] extends Function ? never : T[K] extends Record<string, any> ? K : never }[keyof T];
+export type ExtractTypographyTokens<T> = { [K in RecordPropertyNames<T>]: string };
+export default function prepareTypographyVars<T extends Record<string, any>>(typography: T): ExtractTypographyTokens<T>;
+export {};

package/cssVars/useCurrentColorScheme.d.ts

@@ -0,0 +1,54 @@
+export type Mode = 'light' | 'dark' | 'system';
+export type SystemMode = Exclude<Mode, 'system'>;
+export interface State<SupportedColorScheme extends string> {
+  /**
+   * User selected mode.
+   * Note: on the server, mode is always undefined
+   */
+  mode: 'light' | 'dark' | 'system' | undefined;
+  /**
+   * Only valid if `mode: 'system'`, either 'light' | 'dark'.
+   */
+  systemMode: 'light' | 'dark' | undefined;
+  /**
+   * The color scheme for the light mode.
+   */
+  lightColorScheme: SupportedColorScheme;
+  /**
+   * The color scheme for the dark mode.
+   */
+  darkColorScheme: SupportedColorScheme;
+}
+export type Result<SupportedColorScheme extends string> = State<SupportedColorScheme> & {
+  /**
+   * The current application color scheme. It is always `undefined` on the server.
+   */
+  colorScheme: SupportedColorScheme | undefined;
+  /**
+   * `mode` is saved to internal state and localStorage
+   * If `mode` is null, it will be reset to the defaultMode
+   */
+  setMode: (mode: Mode | null) => void;
+  /**
+   * `colorScheme` is saved to internal state and localStorage
+   * If `colorScheme` is null, it will be reset to the defaultColorScheme (light | dark)
+   */
+  setColorScheme: (colorScheme: SupportedColorScheme | Partial<{
+    light: SupportedColorScheme | null;
+    dark: SupportedColorScheme | null;
+  }> | null) => void;
+};
+export declare function getSystemMode(mode: undefined | string): SystemMode | undefined;
+export declare function getColorScheme<SupportedColorScheme extends string>(state: State<SupportedColorScheme>): SupportedColorScheme | undefined;
+interface UseCurrentColoSchemeOptions<SupportedColorScheme extends string> {
+  defaultLightColorScheme: SupportedColorScheme;
+  defaultDarkColorScheme: SupportedColorScheme;
+  supportedColorSchemes: Array<SupportedColorScheme>;
+  defaultMode?: Mode;
+  modeStorageKey?: string;
+  colorSchemeStorageKey?: string;
+  storageWindow?: Window | null;
+  noSsr?: boolean;
+}
+export default function useCurrentColorScheme<SupportedColorScheme extends string>(options: UseCurrentColoSchemeOptions<SupportedColorScheme>): Result<SupportedColorScheme>;
+export {};

package/display/display.d.ts

@@ -0,0 +1,2 @@
+import { PropsFor, display } from "../Box/index.js";
+export type DisplayProps = PropsFor<typeof display>;

package/display/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./display.js";
+export * from "./display.js";

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v7.0.0-beta.0
+ * @mui/system v7.0.0-beta.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/esm/version/index.js

@@ -1,6 +1,6 @@
-export const version = "7.0.0-beta.0";
+export const version = "7.0.0-beta.1";
 export const major = Number("7");
 export const minor = Number("0");
 export const patch = Number("0");
-export const prerelease = "beta.0";
+export const prerelease = "beta.1";
 export default version;

package/flexbox/flexbox.d.ts

@@ -0,0 +1,2 @@
+import { PropsFor, flexbox } from "../Box/index.js";
+export type FlexboxProps = PropsFor<typeof flexbox>;

package/flexbox/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./flexbox.js";
+export * from "./flexbox.js";

package/getThemeValue/getThemeValue.d.ts

@@ -0,0 +1 @@
+export default function getThemeValue(prop: string, value: any, theme: object): any;

package/getThemeValue/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./getThemeValue.js";
+export * from "./getThemeValue.js";

package/index.d.ts

@@ -0,0 +1,79 @@
+// disable automatic export
+export {};
+export * from "./borders/index.js";
+export { default as breakpoints, handleBreakpoints, mergeBreakpointsInOrder } from "./breakpoints/index.js";
+export { default as cssContainerQueries, type CssContainerQueries } from "./cssContainerQueries/index.js";
+export { default as compose } from "./compose/index.js";
+export * from "./display/index.js";
+export * from "./flexbox/index.js";
+export * from "./cssGrid/index.js";
+export * from "./palette/index.js";
+export * from "./positions/index.js";
+export * from "./shadows/index.js";
+export * from "./sizing/index.js";
+export * from "./typography/index.js";
+export { default as unstable_getThemeValue } from "./getThemeValue/index.js";
+
+/**
+ * The `css` function accepts arrays as values for mobile-first responsive styles.
+ * Note that this extends to non-theme values also. For example `display=['none', 'block']`
+ * will also works.
+ */
+export type ResponsiveStyleValue<T> = T | Array<T | null> | {
+  [key: string]: T | null;
+};
+export { DefaultTheme } from '@mui/private-theming';
+export { css, keyframes, StyledEngineProvider, Interpolation, CSSInterpolation, CSSObject } from '@mui/styled-engine';
+export { default as GlobalStyles } from "./GlobalStyles/index.js";
+export type { GlobalStylesProps } from "./GlobalStyles/index.js";
+export * from "./style/index.js";
+export * from "./spacing/index.js";
+export { default as unstable_styleFunctionSx, unstable_createStyleFunctionSx, extendSxProp as unstable_extendSxProp, unstable_defaultSxConfig } from "./styleFunctionSx/index.js";
+export * from "./styleFunctionSx/index.js";
+
+// TODO: Remove this function in v6.
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export function experimental_sx(): any;
+export { default as Box } from "./Box/index.js";
+export * from "./Box/index.js";
+export { default as createBox } from "./createBox/index.js";
+export * from "./createBox/index.js";
+export { default as createStyled } from "./createStyled/index.js";
+export * from "./createStyled/index.js";
+export { default as styled } from "./styled/index.js";
+export * from "./styled/index.js";
+export { default as createTheme } from "./createTheme/index.js";
+export * from "./createTheme/index.js";
+export { default as createBreakpoints } from "./createBreakpoints/createBreakpoints.js";
+export * from "./createBreakpoints/createBreakpoints.js";
+export { default as createSpacing } from "./createTheme/createSpacing.js";
+export { SpacingOptions, Spacing } from "./createTheme/createSpacing.js";
+export { default as shape } from "./createTheme/shape.js";
+export * from "./createTheme/shape.js";
+export { default as useThemeProps, getThemeProps } from "./useThemeProps/index.js";
+export { default as useTheme } from "./useTheme/index.js";
+export * from "./useTheme/index.js";
+export { default as useThemeWithoutDefault } from "./useThemeWithoutDefault/index.js";
+export * from "./useThemeWithoutDefault/index.js";
+export { default as useMediaQuery } from "./useMediaQuery/index.js";
+export * from "./useMediaQuery/index.js";
+export * from "./colorManipulator/index.js";
+export { default as ThemeProvider } from "./ThemeProvider/index.js";
+export * from "./ThemeProvider/index.js";
+export { default as unstable_memoTheme } from "./memoTheme.js";
+export { default as unstable_createCssVarsProvider, CreateCssVarsProviderResult } from "./cssVars/index.js";
+export { default as unstable_createGetCssVar } from "./cssVars/createGetCssVar.js";
+export { default as unstable_cssVarsParser } from "./cssVars/cssVarsParser.js";
+export { default as unstable_prepareCssVars } from "./cssVars/prepareCssVars.js";
+export { default as unstable_createCssVarsTheme } from "./cssVars/createCssVarsTheme.js";
+export * from "./cssVars/index.js";
+export { default as responsivePropType } from "./responsivePropType/index.js";
+export { default as createContainer } from "./Container/createContainer.js";
+export * from "./Container/createContainer.js";
+export { default as Container } from "./Container/index.js";
+export * from "./Container/index.js";
+export { default as Grid } from "./Grid/index.js";
+export * from "./Grid/index.js";
+export { default as Stack } from "./Stack/index.js";
+export * from "./Stack/index.js";
+export * from "./version/index.js";

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v7.0.0-beta.0
+ * @mui/system v7.0.0-beta.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/memoTheme.d.ts

@@ -0,0 +1,12 @@
+import { CSSInterpolation } from '@mui/styled-engine';
+type ThemeStyleFunction<T> = (props: {
+  theme: T;
+}) => CSSInterpolation;
+/**
+ * Memoize style function on theme.
+ * Intended to be used in styled() calls that only need access to the theme.
+ */
+export default function unstable_memoTheme<T>(styleFn: ThemeStyleFunction<T>): (props: {
+  theme: T;
+}) => string | number | boolean | import("@mui/styled-engine").CSSObject | import("@mui/styled-engine").ComponentSelector | import("@mui/styled-engine").Keyframes | import("@mui/styled-engine").SerializedStyles | import("@mui/styled-engine").ArrayCSSInterpolation | null;
+export {};

package/memoize/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./memoize.js";

package/memoize/memoize.d.ts

@@ -0,0 +1 @@
+export default function memoize<ArgType = any, ReturnType = any>(fn: (arg: ArgType) => ReturnType): (arg: ArgType) => ReturnType;

package/merge/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./merge.js";

package/merge/merge.d.ts

@@ -0,0 +1 @@
+export default function merge(acc: object, item: object): object;

package/modern/Box/Box.d.ts

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import { OverridableComponent, OverrideProps } from '@mui/types';
+import { Theme as SystemTheme } from "../createTheme/index.js";
+import { SxProps, AllSystemCSSProperties, ResponsiveStyleValue, OverwriteCSSProperties, AliasesCSSProperties } from "../styleFunctionSx/index.js";
+export type PropsFor<SomeStyleFunction> = SomeStyleFunction extends StyleFunction<infer Props> ? Props : never;
+export type StyleFunction<Props> = (props: Props) => any;
+export type SimpleStyleFunction<PropKey extends keyof any> = StyleFunction<Partial<Record<PropKey, any>>> & {
+  filterProps: string[];
+};
+
+// borders.js
+export declare const borders: SimpleStyleFunction<'border' | 'borderTop' | 'borderRight' | 'borderBottom' | 'borderLeft' | 'borderColor' | 'borderRadius'>;
+export declare const display: SimpleStyleFunction<'display' | 'displayPrint' | 'overflow' | 'textOverflow' | 'visibility' | 'whiteSpace'>;
+export declare const flexbox: SimpleStyleFunction<'flexBasis' | 'flexDirection' | 'flexWrap' | 'justifyContent' | 'alignItems' | 'alignContent' | 'order' | 'flex' | 'flexGrow' | 'flexShrink' | 'alignSelf' | 'justifyItems' | 'justifySelf'>;
+export declare const grid: SimpleStyleFunction<'gap' | 'columnGap' | 'rowGap' | 'gridColumn' | 'gridRow' | 'gridAutoFlow' | 'gridAutoColumns' | 'gridAutoRows' | 'gridTemplateColumns' | 'gridTemplateRows' | 'gridTemplateAreas' | 'gridArea'>;
+export declare const palette: SimpleStyleFunction<'bgcolor' | 'color'>;
+export declare const positions: SimpleStyleFunction<'zIndex' | 'position' | 'top' | 'right' | 'bottom' | 'left'>;
+export declare const shadows: SimpleStyleFunction<'boxShadow'>;
+export declare const sizing: SimpleStyleFunction<'width' | 'maxWidth' | 'minWidth' | 'height' | 'maxHeight' | 'minHeight' | 'sizeWidth' | 'sizeHeight' | 'boxSizing'>;
+export declare const spacing: SimpleStyleFunction<'m' | 'mt' | 'mr' | 'mb' | 'ml' | 'mx' | 'my' | 'p' | 'pt' | 'pr' | 'pb' | 'pl' | 'px' | 'py' | 'margin' | 'marginTop' | 'marginRight' | 'marginBottom' | 'marginLeft' | 'marginX' | 'marginY' | 'marginInline' | 'marginInlineStart' | 'marginInlineEnd' | 'marginBlock' | 'marginBlockStart' | 'marginBlockEnd' | 'padding' | 'paddingTop' | 'paddingRight' | 'paddingBottom' | 'paddingLeft' | 'paddingX' | 'paddingY' | 'paddingInline' | 'paddingInlineStart' | 'paddingInlineEnd' | 'paddingBlock' | 'paddingBlockStart' | 'paddingBlockEnd'>;
+export declare const typography: SimpleStyleFunction<'typography' | 'fontFamily' | 'fontSize' | 'fontStyle' | 'fontWeight' | 'letterSpacing' | 'lineHeight' | 'textAlign' | 'textTransform'>;
+
+// compose.js
+/**
+ * given a list of StyleFunction return the intersection of the props each individual
+ * StyleFunction requires.
+ *
+ * If `firstFn` requires { color: string } and `secondFn` requires { spacing: number }
+ * their composed function requires { color: string, spacing: number }
+ */
+type ComposedArg<T> = T extends Array<(arg: infer P) => any> ? P : never;
+type ComposedOwnerState<T> = ComposedArg<T>;
+export type ComposedStyleFunction<T extends Array<StyleFunction<any>>> = StyleFunction<ComposedOwnerState<T>> & {
+  filterProps: string[];
+};
+export interface CustomSystemProps extends AliasesCSSProperties, OverwriteCSSProperties {}
+export type SimpleSystemKeys = keyof PropsFor<ComposedStyleFunction<[typeof borders, typeof display, typeof flexbox, typeof grid, typeof palette, typeof positions, typeof shadows, typeof sizing, typeof spacing, typeof typography]>>;
+
+// The SimpleSystemKeys are subset of the AllSystemCSSProperties, so this should be ok
+// This is needed as these are used as keys inside AllSystemCSSProperties
+type StandardSystemKeys = Extract<SimpleSystemKeys, keyof AllSystemCSSProperties>;
+export type SystemProps<Theme extends object = {}> = { [K in StandardSystemKeys]?: ResponsiveStyleValue<AllSystemCSSProperties[K]> | ((theme: Theme) => ResponsiveStyleValue<AllSystemCSSProperties[K]>) };
+export interface BoxOwnProps<Theme extends object = SystemTheme> extends SystemProps<Theme> {
+  children?: React.ReactNode;
+  ref?: React.Ref<unknown>;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+export interface BoxTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'div', Theme extends object = SystemTheme> {
+  props: AdditionalProps & BoxOwnProps<Theme>;
+  defaultComponent: RootComponent;
+}
+
+/**
+ *
+ * Demos:
+ *
+ * - [Box (Joy UI)](https://mui.com/joy-ui/react-box/)
+ * - [Box (Material UI)](https://mui.com/material-ui/react-box/)
+ * - [Box (MUI System)](https://mui.com/system/react-box/)
+ *
+ * API:
+ *
+ * - [Box API](https://mui.com/system/api/box/)
+ */
+declare const Box: OverridableComponent<BoxTypeMap>;
+export type BoxProps<RootComponent extends React.ElementType = BoxTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<BoxTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
+export default Box;

package/modern/Box/boxClasses.d.ts

@@ -0,0 +1,7 @@
+export interface BoxClasses {
+  /** Styles applied to the root element. */
+  root: string;
+}
+export type BoxClassKey = keyof BoxClasses;
+declare const boxClasses: BoxClasses;
+export default boxClasses;

package/modern/Box/index.d.ts

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

package/modern/CSSProperties.d.ts

@@ -0,0 +1,7 @@
+import * as CSS from 'csstype';
+
+/**
+ * All non-vendor-prefixed CSS properties. (Also allows `number` in order to support CSS-in-JS libs,
+ * since they are converted to `px`.)
+ */
+export interface CSSProperties extends CSS.StandardProperties<number | string>, CSS.SvgProperties<number | string> {}

package/modern/Container/Container.d.ts

@@ -0,0 +1,13 @@
+/**
+ *
+ * Demos:
+ *
+ * - [Container (Material UI)](https://mui.com/material-ui/react-container/)
+ * - [Container (MUI System)](https://mui.com/system/react-container/)
+ *
+ * API:
+ *
+ * - [Container API](https://mui.com/system/api/container/)
+ */
+declare const Container: import("@mui/types").OverridableComponent<import("./ContainerProps.js").ContainerTypeMap<{}, "div">>;
+export default Container;

package/modern/Container/ContainerProps.d.ts

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { OverrideProps } from '@mui/types';
+import { SxProps } from "../styleFunctionSx/index.js";
+import { Theme, Breakpoint } from "../createTheme/index.js";
+import { ContainerClasses } from "./containerClasses.js";
+export interface ContainerTypeMap<AdditionalProps = {}, DefaultComponent extends React.ElementType = 'div'> {
+  props: AdditionalProps & {
+    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>;
+  };
+  defaultComponent: DefaultComponent;
+}
+export type ContainerProps<RootComponent extends React.ElementType = ContainerTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<ContainerTypeMap<AdditionalProps, RootComponent>, RootComponent>;

package/modern/Container/containerClasses.d.ts

@@ -0,0 +1,22 @@
+export interface ContainerClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element if `disableGutters={true}`. */
+  disableGutters: string;
+  /** Styles applied to the root element if `fixed={true}`. */
+  fixed: string;
+  /** Styles applied to the root element if `maxWidth="xs"`. */
+  maxWidthXs: string;
+  /** Styles applied to the root element if `maxWidth="sm"`. */
+  maxWidthSm: string;
+  /** Styles applied to the root element if `maxWidth="md"`. */
+  maxWidthMd: string;
+  /** Styles applied to the root element if `maxWidth="lg"`. */
+  maxWidthLg: string;
+  /** Styles applied to the root element if `maxWidth="xl"`. */
+  maxWidthXl: string;
+}
+export type ContainerClassKey = keyof ContainerClasses;
+export declare function getContainerUtilityClass(slot: string): string;
+declare const containerClasses: ContainerClasses;
+export default containerClasses;

package/modern/Container/createContainer.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { Interpolation, MUIStyledComponent as StyledComponent } from '@mui/styled-engine';
+import { OverridableComponent } from '@mui/types';
+import { ContainerProps, ContainerTypeMap } from "./ContainerProps.js";
+import { Theme as DefaultTheme } from "../createTheme/index.js";
+interface StyleFnProps<Theme> extends ContainerProps {
+  theme: Theme;
+  ownerState: ContainerProps;
+}
+type RequiredThemeStructure = Pick<DefaultTheme, 'breakpoints' | 'spacing'>;
+export default function createContainer<Theme extends RequiredThemeStructure = DefaultTheme>(options?: {
+  createStyledComponent?: (...styles: Array<Interpolation<StyleFnProps<Theme>>>) => StyledComponent<ContainerProps>;
+  useThemeProps?: (inProps: ContainerProps) => ContainerProps & {
+    component?: React.ElementType;
+  };
+  componentName?: string;
+}): OverridableComponent<ContainerTypeMap<{}, "div">>;
+export {};

package/modern/Container/index.d.ts

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

package/modern/DefaultPropsProvider/DefaultPropsProvider.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+declare function DefaultPropsProvider({
+  value,
+  children
+}: React.PropsWithChildren<{
+  value: Record<string, any> | undefined;
+}>): React.JSX.Element;
+declare namespace DefaultPropsProvider {
+  var propTypes: any;
+}
+export declare function useDefaultProps<Props>({
+  props,
+  name
+}: {
+  props: Props;
+  name: string;
+}): Props;
+export default DefaultPropsProvider;

package/modern/DefaultPropsProvider/index.d.ts

@@ -0,0 +1 @@
+export { default, useDefaultProps } from "./DefaultPropsProvider.js";

package/modern/GlobalStyles/GlobalStyles.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { Interpolation } from '@mui/styled-engine';
+import { Theme as SystemTheme } from "../createTheme/index.js";
+export interface GlobalStylesProps<Theme = SystemTheme> {
+  styles: Interpolation<Theme>;
+  defaultTheme?: object;
+  themeId?: string;
+}
+declare function GlobalStyles<Theme = SystemTheme>({
+  styles,
+  themeId,
+  defaultTheme
+}: GlobalStylesProps<Theme>): React.JSX.Element;
+declare namespace GlobalStyles {
+  var propTypes: any;
+}
+export default GlobalStyles;

package/modern/GlobalStyles/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./GlobalStyles.js";
+export * from "./GlobalStyles.js";

package/modern/Grid/Grid.d.ts

@@ -0,0 +1,13 @@
+/**
+ *
+ * Demos:
+ *
+ * - [Grid (Joy UI)](https://mui.com/joy-ui/react-grid/)
+ * - [Grid (Material UI)](https://mui.com/material-ui/react-grid/)
+ *
+ * API:
+ *
+ * - [Grid API](https://mui.com/system/api/grid/)
+ */
+declare const Grid: import("@mui/types").OverridableComponent<import("./GridProps.js").GridTypeMap<{}, "div">>;
+export default Grid;