@mui/system 7.0.0-alpha.0 → 7.0.0-alpha.2

package/cssVars/createCssVarsProvider.d.ts

@@ -1,12 +1,9 @@
 import * as React from 'react';
-import InitColorSchemeScript from '../InitColorSchemeScript';
-import { Result } from './useCurrentColorScheme';
-
-export interface ColorSchemeContextValue<SupportedColorScheme extends string>
-  extends Result<SupportedColorScheme> {
+import InitColorSchemeScript from "../InitColorSchemeScript/index.js";
+import { Result } from "./useCurrentColorScheme.js";
+export interface ColorSchemeContextValue<SupportedColorScheme extends string> extends Result<SupportedColorScheme> {
   allColorSchemes: SupportedColorScheme[];
 }
-
 export interface CssVarsProviderConfig<ColorScheme extends string> {
   /**
    * DOM attribute for applying color scheme
@@ -28,120 +25,105 @@ export interface CssVarsProviderConfig<ColorScheme extends string> {
    * - provides string if the design system has one default color scheme (either light or dark)
    * - provides object if the design system has default light & dark color schemes
    */
-  defaultColorScheme: ColorScheme | { light: ColorScheme; dark: ColorScheme };
+  defaultColorScheme: ColorScheme | {
+    light: ColorScheme;
+    dark: ColorScheme;
+  };
   /**
    * Disable CSS transitions when switching between modes or color schemes
    * @default false
    */
   disableTransitionOnChange?: boolean;
 }
-
 type Identify<I extends string | undefined, T> = I extends string ? T | { [k in I]: T } : T;
-
-export interface CreateCssVarsProviderResult<
-  ColorScheme extends string,
-  Identifier extends string | undefined = undefined,
-> {
-  CssVarsProvider: (
-    props: React.PropsWithChildren<
-      Partial<CssVarsProviderConfig<ColorScheme>> & {
-        theme?: Identify<
-          Identifier,
-          {
-            cssVariables?: false;
-            cssVarPrefix?: string;
-            colorSchemes: Partial<Record<ColorScheme, any>>;
-            colorSchemeSelector?: 'media' | 'class' | 'data' | string;
-          }
-        >;
-        /**
-         * The default mode when the storage is empty,
-         * require the theme to have `colorSchemes` with light and dark.
-         * @default 'system'
-         */
-        defaultMode?: 'light' | 'dark' | 'system';
-        /**
-         * The document used to perform `disableTransitionOnChange` feature
-         * @default document
-         */
-        documentNode?: Document | null;
-        /**
-         * The node used to attach the color-scheme attribute
-         * @default document
-         */
-        colorSchemeNode?: Element | null;
-        /**
-         * The window that attaches the 'storage' event listener
-         * @default window
-         */
-        storageWindow?: Window | null;
-        /**
-         * If `true`, the provider creates its own context and generate stylesheet as if it is a root `CssVarsProvider`.
-         */
-        disableNestedContext?: boolean;
-        /**
-         * If `true`, the style sheet won't be generated.
-         *
-         * This is useful for controlling nested CssVarsProvider behavior.
-         * @default false
-         */
-        disableStyleSheetGeneration?: boolean;
-      }
-    >,
-  ) => React.JSX.Element;
-  useColorScheme: () => ColorSchemeContextValue<ColorScheme>;
-  getInitColorSchemeScript: typeof InitColorSchemeScript;
-}
-
-export default function createCssVarsProvider<
-  ColorScheme extends string,
-  Identifier extends string | undefined = undefined,
->(
-  options: CssVarsProviderConfig<ColorScheme> & {
+export interface CreateCssVarsProviderResult<ColorScheme extends string, Identifier extends string | undefined = undefined> {
+  CssVarsProvider: (props: React.PropsWithChildren<Partial<CssVarsProviderConfig<ColorScheme>> & {
+    theme?: Identify<Identifier, {
+      cssVariables?: false;
+      cssVarPrefix?: string;
+      colorSchemes: Partial<Record<ColorScheme, any>>;
+      colorSchemeSelector?: 'media' | 'class' | 'data' | string;
+    }>;
     /**
-     * The design system's unique id for getting the corresponded theme when there are multiple design systems.
+     * The default mode when the storage is empty,
+     * require the theme to have `colorSchemes` with light and dark.
+     * @default 'system'
      */
-    themeId?: Identifier;
+    defaultMode?: 'light' | 'dark' | 'system';
     /**
-     * Design system default theme
-     *
-     * - The structure inside `theme.colorSchemes[colorScheme]` should be exactly the same in all color schemes because
-     * those object of the color scheme will be used when the color scheme is active.
-     *
-     *  {
-     *    colorSchemes: {
-     *      light: { ...lightColorSchemeValues },
-     *      dark: { ...darkColorSchemeValues }
-     *    }
-     *  }
-     *
-     * - If colorScheme is 'light', the `lightColorSchemeValues` will be merged to theme as `{ ...theme, ...lightColorSchemeValues }`
-     *   likewise, if colorScheme is 'dark', the `darkColorSchemeValues` will be merged to theme as `{ ...theme, ...darkColorSchemeValues }`
-     *
-     * - If the theme contains the same keys as the color scheme, their values will be merged.
-     *  Ex. {
-     *    colorSchemes: {
-     *      light: { palette: { primary: { ... } } },
-     *      dark: { palette: { primary: { ...} } }
-     *    },
-     *    palette: { shared: { ... } }
-     *  }
-     *
-     *  becomes: {
-     *    colorSchemes: { ... },
-     *    palette: { shared: { ... }, primary: { ... } }
-     *  }
+     * The document used to perform `disableTransitionOnChange` feature
+     * @default document
+     */
+    documentNode?: Document | null;
+    /**
+     * The node used to attach the color-scheme attribute
+     * @default document
+     */
+    colorSchemeNode?: Element | null;
+    /**
+     * The window that attaches the 'storage' event listener
+     * @default window
      */
-    theme: any;
+    storageWindow?: Window | null;
     /**
-     * A function to be called after the CSS variables are attached. The result of this function will be the final theme pass to ThemeProvider.
+     * If `true`, the provider creates its own context and generate stylesheet as if it is a root `CssVarsProvider`.
+     */
+    disableNestedContext?: boolean;
+    /**
+     * If `true`, the style sheet won't be generated.
      *
-     * The example usage is the variant generation in Joy. We need to combine the token from user-input and the default theme first, then generate
-     * variants from those tokens.
+     * This is useful for controlling nested CssVarsProvider behavior.
+     * @default false
      */
-    resolveTheme?: (theme: any) => any; // the type is any because it depends on the design system.
-  },
-): CreateCssVarsProviderResult<ColorScheme, Identifier>;
+    disableStyleSheetGeneration?: boolean;
+  }>) => React.JSX.Element;
+  useColorScheme: () => ColorSchemeContextValue<ColorScheme>;
+  getInitColorSchemeScript: typeof InitColorSchemeScript;
+}
+export default function createCssVarsProvider<ColorScheme extends string, Identifier extends string | undefined = undefined>(options: CssVarsProviderConfig<ColorScheme> & {
+  /**
+   * The design system's unique id for getting the corresponded theme when there are multiple design systems.
+   */
+  themeId?: Identifier;
+  /**
+   * Design system default theme
+   *
+   * - The structure inside `theme.colorSchemes[colorScheme]` should be exactly the same in all color schemes because
+   * those object of the color scheme will be used when the color scheme is active.
+   *
+   *  {
+   *    colorSchemes: {
+   *      light: { ...lightColorSchemeValues },
+   *      dark: { ...darkColorSchemeValues }
+   *    }
+   *  }
+   *
+   * - If colorScheme is 'light', the `lightColorSchemeValues` will be merged to theme as `{ ...theme, ...lightColorSchemeValues }`
+   *   likewise, if colorScheme is 'dark', the `darkColorSchemeValues` will be merged to theme as `{ ...theme, ...darkColorSchemeValues }`
+   *
+   * - If the theme contains the same keys as the color scheme, their values will be merged.
+   *  Ex. {
+   *    colorSchemes: {
+   *      light: { palette: { primary: { ... } } },
+   *      dark: { palette: { primary: { ...} } }
+   *    },
+   *    palette: { shared: { ... } }
+   *  }
+   *
+   *  becomes: {
+   *    colorSchemes: { ... },
+   *    palette: { shared: { ... }, primary: { ... } }
+   *  }
+   */
+  theme: any;
+  /**
+   * A function to be called after the CSS variables are attached. The result of this function will be the final theme pass to ThemeProvider.
+   *
+   * The example usage is the variant generation in Joy. We need to combine the token from user-input and the default theme first, then generate
+   * variants from those tokens.
+   */
+  resolveTheme?: (theme: any) => any; // the type is any because it depends on the design system.
+}): CreateCssVarsProviderResult<ColorScheme, Identifier>;
 
 // disable automatic export
-export {};
+export {};

package/cssVars/createCssVarsTheme.d.ts

@@ -1,12 +1,15 @@
-import { DefaultCssVarsTheme } from './prepareCssVars';
+import { DefaultCssVarsTheme } from "./prepareCssVars.js";
 interface Theme extends DefaultCssVarsTheme {
-    cssVarPrefix?: string;
-    colorSchemeSelector?: 'media' | string;
-    shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean;
+  cssVarPrefix?: string;
+  colorSchemeSelector?: 'media' | string;
+  shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean;
 }
-declare function createCssVarsTheme<T extends Theme, ThemeVars extends Record<string, any>>({ colorSchemeSelector, ...theme }: T): T & {
-    vars: ThemeVars;
-    generateThemeVars: () => ThemeVars;
-    generateStyleSheets: () => Record<string, any>[];
+declare function createCssVarsTheme<T extends Theme, ThemeVars extends Record<string, any>>({
+  colorSchemeSelector,
+  ...theme
+}: T): T & {
+  vars: ThemeVars;
+  generateThemeVars: () => ThemeVars;
+  generateStyleSheets: () => Record<string, any>[];
 };
-export default createCssVarsTheme;
+export default createCssVarsTheme;

package/cssVars/createGetCssVar.d.ts

@@ -2,4 +2,4 @@
  * The benefit of this function is to help developers get CSS var from theme without specifying the whole variable
  * and they does not need to remember the prefix (defined once).
  */
-export default function createGetCssVar<T extends string = string>(prefix?: string): <AdditionalVars extends string = never>(field: T | AdditionalVars, ...fallbacks: (T | AdditionalVars)[]) => string;
+export default function createGetCssVar<T extends string = string>(prefix?: string): <AdditionalVars extends string = never>(field: T | AdditionalVars, ...fallbacks: (T | AdditionalVars)[]) => string;

package/cssVars/cssVarsParser.d.ts

@@ -1,5 +1,5 @@
 type NestedRecord<V = any> = {
-    [k: string | number]: NestedRecord<V> | V;
+  [k: string | number]: NestedRecord<V> | V;
 };
 /**
  * This function create an object from keys, value and then assign to target
@@ -54,11 +54,11 @@ export declare const walkObjectDeep: <Value, T = Record<string, any>>(obj: T, ca
  * 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;
+  prefix?: string;
+  shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean;
 }): {
-    css: Record<string, string | number>;
-    vars: T;
-    varsWithDefaults: {};
+  css: Record<string, string | number>;
+  vars: T;
+  varsWithDefaults: {};
 };
-export {};
+export {};

package/cssVars/getColorSchemeSelector.d.ts

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

package/cssVars/index.d.ts

@@ -1,7 +1,7 @@
-export { default } from './createCssVarsProvider';
-export type { CreateCssVarsProviderResult, CssVarsProviderConfig, ColorSchemeContextValue, } from './createCssVarsProvider';
-export { default as prepareCssVars } from './prepareCssVars';
-export { default as prepareTypographyVars } from './prepareTypographyVars';
-export type { ExtractTypographyTokens } from './prepareTypographyVars';
-export { default as createCssVarsTheme } from './createCssVarsTheme';
-export { createGetColorSchemeSelector } from './getColorSchemeSelector';
+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

@@ -1,16 +1,16 @@
 export interface DefaultCssVarsTheme {
-    colorSchemes?: Record<string, any>;
-    defaultColorScheme?: string;
+  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>;
+  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>[];
+  vars: ThemeVars;
+  generateThemeVars: () => ThemeVars;
+  generateStyleSheets: () => Record<string, any>[];
 };
-export default prepareCssVars;
+export default prepareCssVars;

package/cssVars/prepareTypographyVars.d.ts

@@ -1,8 +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;
-};
+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 {};
+export {};

package/cssVars/useCurrentColorScheme.d.ts

@@ -1,54 +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;
+  /**
+   * 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;
+  /**
+   * 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;
+  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 {};
+export {};

package/display/display.d.ts

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

package/display/index.d.ts

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

package/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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;