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

package/cssVars/createCssVarsProvider.d.ts

@@ -10,17 +10,17 @@ export interface CssVarsProviderConfig<ColorScheme extends string> {
    * DOM attribute for applying color scheme
    * @default 'data-color-scheme'
    */
-  attribute?: string;
+  attribute?: string | undefined;
   /**
    * localStorage key used to store application `mode`
    * @default 'mode'
    */
-  modeStorageKey?: string;
+  modeStorageKey?: string | undefined;
   /**
    * localStorage key used to store `colorScheme`
    * @default 'color-scheme'
    */
-  colorSchemeStorageKey?: string;
+  colorSchemeStorageKey?: string | undefined;
   /**
    * Design system default color scheme.
    * - provides string if the design system has one default color scheme (either light or dark)
@@ -34,60 +34,60 @@ export interface CssVarsProviderConfig<ColorScheme extends string> {
    * Disable CSS transitions when switching between modes or color schemes
    * @default false
    */
-  disableTransitionOnChange?: boolean;
+  disableTransitionOnChange?: boolean | undefined;
   /**
    * If `true`, theme values are recalculated when the mode changes.
    * The `theme.colorSchemes.{mode}.*` nodes will be shallow merged to the top-level of the theme.
    * @default false
    */
-  forceThemeRerender?: boolean;
+  forceThemeRerender?: boolean | undefined;
 }
 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;
+      cssVariables?: false | undefined;
+      cssVarPrefix?: string | undefined;
       colorSchemes: Partial<Record<ColorScheme, any>>;
-      colorSchemeSelector?: 'media' | 'class' | 'data' | string;
-    }>;
+      colorSchemeSelector?: 'media' | 'class' | 'data' | string | undefined;
+    }> | undefined;
     /**
      * The default mode when the storage is empty,
      * require the theme to have `colorSchemes` with light and dark.
      * @default 'system'
      */
-    defaultMode?: 'light' | 'dark' | 'system';
+    defaultMode?: 'light' | 'dark' | 'system' | undefined;
     /**
      * The document used to perform `disableTransitionOnChange` feature
      * @default document
      */
-    documentNode?: Document | null;
+    documentNode?: Document | null | undefined;
     /**
      * The node used to attach the color-scheme attribute
      * @default document
      */
-    colorSchemeNode?: Element | null;
+    colorSchemeNode?: Element | null | undefined;
     /**
      * The storage manager to be used for storing the mode and color scheme.
      * @default using `window.localStorage`
      */
-    storageManager?: StorageManager | null;
+    storageManager?: StorageManager | null | undefined;
     /**
      * The window that attaches the 'storage' event listener
      * @default window
      */
-    storageWindow?: Window | null;
+    storageWindow?: Window | null | undefined;
     /**
      * If `true`, the provider creates its own context and generate stylesheet as if it is a root `CssVarsProvider`.
      */
-    disableNestedContext?: boolean;
+    disableNestedContext?: boolean | undefined;
     /**
      * If `true`, the style sheet won't be generated.
      *
      * This is useful for controlling nested CssVarsProvider behavior.
      * @default false
      */
-    disableStyleSheetGeneration?: boolean;
+    disableStyleSheetGeneration?: boolean | undefined;
   }>) => React.JSX.Element;
   useColorScheme: () => ColorSchemeContextValue<ColorScheme>;
   getInitColorSchemeScript: typeof InitColorSchemeScript;
@@ -96,7 +96,7 @@ export default function createCssVarsProvider<ColorScheme extends string, Identi
   /**
    * The design system's unique id for getting the corresponded theme when there are multiple design systems.
    */
-  themeId?: Identifier;
+  themeId?: Identifier | undefined;
   /**
    * Design system default theme
    *
@@ -134,7 +134,7 @@ export default function createCssVarsProvider<ColorScheme extends string, Identi
    * 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.
+  resolveTheme?: ((theme: any) => any) | undefined; // the type is any because it depends on the design system.
 }): CreateCssVarsProviderResult<ColorScheme, Identifier>;
 
 // disable automatic export

package/{esm/cssVars/createCssVarsProvider.js → cssVars/createCssVarsProvider.mjs}

@@ -5,9 +5,9 @@ import PropTypes from 'prop-types';
 import { GlobalStyles } from '@mui/styled-engine';
 import { useTheme as muiUseTheme } from '@mui/private-theming';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
-import ThemeProvider from "../ThemeProvider/index.js";
-import InitColorSchemeScript, { DEFAULT_COLOR_SCHEME_STORAGE_KEY, DEFAULT_MODE_STORAGE_KEY } from "../InitColorSchemeScript/InitColorSchemeScript.js";
-import useCurrentColorScheme from "./useCurrentColorScheme.js";
+import ThemeProvider from "../ThemeProvider/index.mjs";
+import InitColorSchemeScript, { DEFAULT_COLOR_SCHEME_STORAGE_KEY, DEFAULT_MODE_STORAGE_KEY } from "../InitColorSchemeScript/InitColorSchemeScript.mjs";
+import useCurrentColorScheme from "./useCurrentColorScheme.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}';
 export default function createCssVarsProvider(options) {

package/{esm/cssVars/createCssVarsTheme.d.ts → cssVars/createCssVarsTheme.d.mts}

@@ -1,8 +1,8 @@
-import { DefaultCssVarsTheme } from "./prepareCssVars.js";
+import { DefaultCssVarsTheme } from "./prepareCssVars.mjs";
 interface Theme extends DefaultCssVarsTheme {
-  cssVarPrefix?: string;
-  colorSchemeSelector?: 'media' | string;
-  shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean;
+  cssVarPrefix?: string | undefined;
+  colorSchemeSelector?: 'media' | string | undefined;
+  shouldSkipGeneratingVar?: ((objectPathKeys: Array<string>, value: string | number) => boolean) | undefined;
 }
 declare function createCssVarsTheme<T extends Theme, ThemeVars extends Record<string, any>>({
   colorSchemeSelector,

package/cssVars/createCssVarsTheme.d.ts

@@ -1,8 +1,8 @@
 import { DefaultCssVarsTheme } from "./prepareCssVars.js";
 interface Theme extends DefaultCssVarsTheme {
-  cssVarPrefix?: string;
-  colorSchemeSelector?: 'media' | string;
-  shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean;
+  cssVarPrefix?: string | undefined;
+  colorSchemeSelector?: 'media' | string | undefined;
+  shouldSkipGeneratingVar?: ((objectPathKeys: Array<string>, value: string | number) => boolean) | undefined;
 }
 declare function createCssVarsTheme<T extends Theme, ThemeVars extends Record<string, any>>({
   colorSchemeSelector,

package/{esm/cssVars/createCssVarsTheme.js → cssVars/createCssVarsTheme.mjs}

@@ -1,6 +1,6 @@
-import prepareCssVars from "./prepareCssVars.js";
-import { createGetColorSchemeSelector } from "./getColorSchemeSelector.js";
-import { DEFAULT_ATTRIBUTE } from "../InitColorSchemeScript/InitColorSchemeScript.js";
+import prepareCssVars from "./prepareCssVars.mjs";
+import { createGetColorSchemeSelector } from "./getColorSchemeSelector.mjs";
+import { DEFAULT_ATTRIBUTE } from "../InitColorSchemeScript/InitColorSchemeScript.mjs";
 function createCssVarsTheme({
   colorSchemeSelector = `[${DEFAULT_ATTRIBUTE}="%s"]`,
   ...theme

package/{esm/cssVars/cssVarsParser.d.ts → cssVars/cssVarsParser.d.mts}

@@ -54,8 +54,8 @@ 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 | undefined;
+  shouldSkipGeneratingVar?: ((objectPathKeys: Array<string>, value: string | number) => boolean) | undefined;
 }): {
   css: Record<string, string | number>;
   vars: T;

package/cssVars/cssVarsParser.d.ts

@@ -54,8 +54,8 @@ 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 | undefined;
+  shouldSkipGeneratingVar?: ((objectPathKeys: Array<string>, value: string | number) => boolean) | undefined;
 }): {
   css: Record<string, string | number>;
   vars: T;

package/{esm/cssVars/index.d.ts → cssVars/index.d.mts}

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

package/{esm/cssVars/index.js → cssVars/index.mjs}

@@ -1,5 +1,5 @@
-export { default } from "./createCssVarsProvider.js";
-export { default as prepareCssVars } from "./prepareCssVars.js";
-export { default as prepareTypographyVars } from "./prepareTypographyVars.js";
-export { default as createCssVarsTheme } from "./createCssVarsTheme.js";
-export { createGetColorSchemeSelector } from "./getColorSchemeSelector.js";
+export { default } from "./createCssVarsProvider.mjs";
+export { default as prepareCssVars } from "./prepareCssVars.mjs";
+export { default as prepareTypographyVars } from "./prepareTypographyVars.mjs";
+export { default as createCssVarsTheme } from "./createCssVarsTheme.mjs";
+export { createGetColorSchemeSelector } from "./getColorSchemeSelector.mjs";

package/{esm/cssVars/localStorageManager.d.ts → cssVars/localStorageManager.d.mts}

@@ -1,7 +1,7 @@
 export interface StorageManager {
   (options: {
     key: string;
-    storageWindow?: Window | null;
+    storageWindow?: Window | null | undefined;
   }): {
     /**
      * Function to get the value from the storage

package/cssVars/localStorageManager.d.ts

@@ -1,7 +1,7 @@
 export interface StorageManager {
   (options: {
     key: string;
-    storageWindow?: Window | null;
+    storageWindow?: Window | null | undefined;
   }): {
     /**
      * Function to get the value from the storage

package/cssVars/prepareCssVars.d.mts

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

package/cssVars/prepareCssVars.d.ts

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

package/{esm/cssVars/prepareCssVars.js → cssVars/prepareCssVars.mjs}

@@ -1,5 +1,5 @@
 import deepmerge from '@mui/utils/deepmerge';
-import cssVarsParser from "./cssVarsParser.js";
+import cssVarsParser from "./cssVarsParser.mjs";
 function prepareCssVars(theme, parserConfig = {}) {
   const {
     getSelector = defaultGetSelector,

package/{esm/cssVars/useCurrentColorScheme.d.ts → cssVars/useCurrentColorScheme.d.mts}

@@ -1,4 +1,4 @@
-import type { StorageManager } from "./localStorageManager.js";
+import type { StorageManager } from "./localStorageManager.mjs";
 export type Mode = 'light' | 'dark' | 'system';
 export type SystemMode = Exclude<Mode, 'system'>;
 export interface State<SupportedColorScheme extends string> {
@@ -45,12 +45,12 @@ interface UseCurrentColoSchemeOptions<SupportedColorScheme extends string> {
   defaultLightColorScheme: SupportedColorScheme;
   defaultDarkColorScheme: SupportedColorScheme;
   supportedColorSchemes: Array<SupportedColorScheme>;
-  defaultMode?: Mode;
-  modeStorageKey?: string;
-  colorSchemeStorageKey?: string;
-  storageWindow?: Window | null;
-  storageManager?: StorageManager | null;
-  noSsr?: boolean;
+  defaultMode?: Mode | undefined;
+  modeStorageKey?: string | undefined;
+  colorSchemeStorageKey?: string | undefined;
+  storageWindow?: Window | null | undefined;
+  storageManager?: StorageManager | null | undefined;
+  noSsr?: boolean | undefined;
 }
 export default function useCurrentColorScheme<SupportedColorScheme extends string>(options: UseCurrentColoSchemeOptions<SupportedColorScheme>): Result<SupportedColorScheme>;
 export {};

package/cssVars/useCurrentColorScheme.d.ts

@@ -45,12 +45,12 @@ interface UseCurrentColoSchemeOptions<SupportedColorScheme extends string> {
   defaultLightColorScheme: SupportedColorScheme;
   defaultDarkColorScheme: SupportedColorScheme;
   supportedColorSchemes: Array<SupportedColorScheme>;
-  defaultMode?: Mode;
-  modeStorageKey?: string;
-  colorSchemeStorageKey?: string;
-  storageWindow?: Window | null;
-  storageManager?: StorageManager | null;
-  noSsr?: boolean;
+  defaultMode?: Mode | undefined;
+  modeStorageKey?: string | undefined;
+  colorSchemeStorageKey?: string | undefined;
+  storageWindow?: Window | null | undefined;
+  storageManager?: StorageManager | null | undefined;
+  noSsr?: boolean | undefined;
 }
 export default function useCurrentColorScheme<SupportedColorScheme extends string>(options: UseCurrentColoSchemeOptions<SupportedColorScheme>): Result<SupportedColorScheme>;
 export {};

package/{esm/cssVars/useCurrentColorScheme.js → cssVars/useCurrentColorScheme.mjs}

@@ -1,8 +1,8 @@
 'use client';
 
 import * as React from 'react';
-import { DEFAULT_MODE_STORAGE_KEY, DEFAULT_COLOR_SCHEME_STORAGE_KEY } from "../InitColorSchemeScript/InitColorSchemeScript.js";
-import localStorageManager from "./localStorageManager.js";
+import { DEFAULT_MODE_STORAGE_KEY, DEFAULT_COLOR_SCHEME_STORAGE_KEY } from "../InitColorSchemeScript/InitColorSchemeScript.mjs";
+import localStorageManager from "./localStorageManager.mjs";
 function noop() {}
 export function getSystemMode(mode) {
   if (typeof window !== 'undefined' && typeof window.matchMedia === 'function' && mode === 'system') {

package/{esm/display/display.d.ts → display/display.d.mts}

@@ -1,4 +1,4 @@
-import { PropsFor, SimpleStyleFunction } from "../style/index.js";
+import { PropsFor, SimpleStyleFunction } from "../style/index.mjs";
 declare const display: SimpleStyleFunction<'display' | 'displayPrint' | 'overflow' | 'textOverflow' | 'visibility' | 'whiteSpace'>;
 export type DisplayProps = PropsFor<typeof display>;
 export default display;

package/{esm/display/display.js → display/display.mjs}

@@ -1,5 +1,5 @@
-import style from "../style/index.js";
-import compose from "../compose/index.js";
+import style from "../style/index.mjs";
+import compose from "../compose/index.mjs";
 export const displayPrint = style({
   prop: 'displayPrint',
   cssProperty: false,

package/display/index.d.mts

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

package/display/index.mjs

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

package/{esm/flexbox/flexbox.d.ts → flexbox/flexbox.d.mts}

@@ -1,4 +1,4 @@
-import { PropsFor, SimpleStyleFunction } from "../style/index.js";
+import { PropsFor, SimpleStyleFunction } from "../style/index.mjs";
 export const flexBasis: SimpleStyleFunction<'flexBasis'>;
 export const flexDirection: SimpleStyleFunction<'flexDirection'>;
 export const flexWrap: SimpleStyleFunction<'flexWrap'>;

package/{esm/flexbox/flexbox.js → flexbox/flexbox.mjs}

@@ -1,5 +1,5 @@
-import style from "../style/index.js";
-import compose from "../compose/index.js";
+import style from "../style/index.mjs";
+import compose from "../compose/index.mjs";
 export const flexBasis = style({
   prop: 'flexBasis'
 });

package/flexbox/index.d.mts

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

package/flexbox/index.mjs

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

package/{esm/getThemeValue/getThemeValue.js → getThemeValue/getThemeValue.mjs}

@@ -1,13 +1,13 @@
-import borders from "../borders/index.js";
-import display from "../display/index.js";
-import flexbox from "../flexbox/index.js";
-import grid from "../cssGrid/index.js";
-import positions from "../positions/index.js";
-import palette from "../palette/index.js";
-import shadows from "../shadows/index.js";
-import sizing from "../sizing/index.js";
-import spacing from "../spacing/index.js";
-import typography from "../typography/index.js";
+import borders from "../borders/index.mjs";
+import display from "../display/index.mjs";
+import flexbox from "../flexbox/index.mjs";
+import grid from "../cssGrid/index.mjs";
+import positions from "../positions/index.mjs";
+import palette from "../palette/index.mjs";
+import shadows from "../shadows/index.mjs";
+import sizing from "../sizing/index.mjs";
+import spacing from "../spacing/index.mjs";
+import typography from "../typography/index.mjs";
 const filterPropsMapping = {
   borders: borders.filterProps,
   display: display.filterProps,

package/getThemeValue/index.d.mts

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

package/getThemeValue/index.mjs

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

package/index.d.mts

@@ -0,0 +1,90 @@
+// disable automatic export
+export {};
+export * from "./borders/index.mjs";
+export { default as borders } from "./borders/index.mjs";
+export { default as breakpoints, handleBreakpoints, mergeBreakpointsInOrder } from "./breakpoints/index.mjs";
+export { default as cssContainerQueries, type CssContainerQueries } from "./cssContainerQueries/index.mjs";
+export { default as compose } from "./compose/index.mjs";
+export * from "./display/index.mjs";
+export { default as display } from "./display/index.mjs";
+export * from "./flexbox/index.mjs";
+export { default as flexbox } from "./flexbox/index.mjs";
+export * from "./cssGrid/index.mjs";
+export { default as grid } from "./cssGrid/index.mjs";
+export * from "./palette/index.mjs";
+export { default as palette } from "./palette/index.mjs";
+export * from "./positions/index.mjs";
+export { default as positions } from "./positions/index.mjs";
+export * from "./shadows/index.mjs";
+export { default as shadows } from "./shadows/index.mjs";
+export * from "./sizing/index.mjs";
+export { default as sizing } from "./sizing/index.mjs";
+export * from "./typography/index.mjs";
+export { default as typography } from "./typography/index.mjs";
+export { default as unstable_getThemeValue } from "./getThemeValue/index.mjs";
+
+/**
+ * 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.mjs";
+export type { GlobalStylesProps } from "./GlobalStyles/index.mjs";
+export * from "./style/index.mjs";
+export { default as style } from "./style/index.mjs";
+export * from "./spacing/index.mjs";
+export { default as spacing } from "./spacing/index.mjs";
+export { default as unstable_styleFunctionSx, unstable_createStyleFunctionSx, extendSxProp as unstable_extendSxProp, unstable_defaultSxConfig } from "./styleFunctionSx/index.mjs";
+export * from "./styleFunctionSx/index.mjs";
+
+// 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.mjs";
+export * from "./Box/index.mjs";
+export { default as createBox } from "./createBox/index.mjs";
+export * from "./createBox/index.mjs";
+export { default as createStyled } from "./createStyled/index.mjs";
+export * from "./createStyled/index.mjs";
+export { default as styled } from "./styled/index.mjs";
+export * from "./styled/index.mjs";
+export { default as createTheme } from "./createTheme/index.mjs";
+export * from "./createTheme/index.mjs";
+export { default as createBreakpoints } from "./createBreakpoints/createBreakpoints.mjs";
+export * from "./createBreakpoints/createBreakpoints.mjs";
+export { default as createSpacing } from "./createTheme/createSpacing.mjs";
+export { SpacingOptions, Spacing } from "./createTheme/createSpacing.mjs";
+export { default as shape } from "./createTheme/shape.mjs";
+export * from "./createTheme/shape.mjs";
+export { default as useThemeProps, getThemeProps } from "./useThemeProps/index.mjs";
+export { default as useTheme } from "./useTheme/index.mjs";
+export * from "./useTheme/index.mjs";
+export { default as useThemeWithoutDefault } from "./useThemeWithoutDefault/index.mjs";
+export * from "./useThemeWithoutDefault/index.mjs";
+export { default as useMediaQuery } from "./useMediaQuery/index.mjs";
+export * from "./useMediaQuery/index.mjs";
+export * from "./colorManipulator/index.mjs";
+export { default as ThemeProvider } from "./ThemeProvider/index.mjs";
+export * from "./ThemeProvider/index.mjs";
+export { default as unstable_memoTheme } from "./memoTheme.mjs";
+export { default as unstable_createCssVarsProvider, CreateCssVarsProviderResult } from "./cssVars/index.mjs";
+export { default as unstable_createGetCssVar } from "./cssVars/createGetCssVar.mjs";
+export { default as unstable_cssVarsParser } from "./cssVars/cssVarsParser.mjs";
+export { default as unstable_prepareCssVars } from "./cssVars/prepareCssVars.mjs";
+export { default as unstable_createCssVarsTheme } from "./cssVars/createCssVarsTheme.mjs";
+export * from "./cssVars/index.mjs";
+export { default as responsivePropType } from "./responsivePropType/index.mjs";
+export { default as createContainer } from "./Container/createContainer.mjs";
+export * from "./Container/createContainer.mjs";
+export { default as Container } from "./Container/index.mjs";
+export * from "./Container/index.mjs";
+export { default as Grid } from "./Grid/index.mjs";
+export * from "./Grid/index.mjs";
+export { default as Stack } from "./Stack/index.mjs";
+export * from "./Stack/index.mjs";
+export * from "./version/index.mjs";

package/index.js

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

package/index.mjs

@@ -0,0 +1,76 @@
+/**
+ * @mui/system v9.0.0-alpha.2
+ *
+ * @license MIT
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import _formatErrorMessage from "@mui/utils/formatMuiErrorMessage";
+export { css, keyframes, StyledEngineProvider } from '@mui/styled-engine';
+export { default as GlobalStyles } from "./GlobalStyles/index.mjs";
+export { default as borders } from "./borders/index.mjs";
+export * from "./borders/index.mjs";
+export { default as breakpoints } from "./breakpoints/index.mjs";
+export { default as cssContainerQueries } from "./cssContainerQueries/index.mjs";
+export { handleBreakpoints, mergeBreakpointsInOrder, resolveBreakpointValues as unstable_resolveBreakpointValues } from "./breakpoints/index.mjs";
+export { default as compose } from "./compose/index.mjs";
+export { default as display } from "./display/index.mjs";
+export { default as flexbox } from "./flexbox/index.mjs";
+export * from "./flexbox/index.mjs";
+export { default as grid } from "./cssGrid/index.mjs";
+export * from "./cssGrid/index.mjs";
+export { default as palette } from "./palette/index.mjs";
+export * from "./palette/index.mjs";
+export { default as positions } from "./positions/index.mjs";
+export * from "./positions/index.mjs";
+export { default as shadows } from "./shadows/index.mjs";
+export { default as sizing } from "./sizing/index.mjs";
+export * from "./sizing/index.mjs";
+export { default as spacing } from "./spacing/index.mjs";
+export * from "./spacing/index.mjs";
+export { default as style, getPath, getStyleValue } from "./style/index.mjs";
+export { default as typography } from "./typography/index.mjs";
+export * from "./typography/index.mjs";
+export { default as unstable_styleFunctionSx, unstable_createStyleFunctionSx, extendSxProp as unstable_extendSxProp, unstable_defaultSxConfig } from "./styleFunctionSx/index.mjs";
+// TODO: Remove this function in v6
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export function experimental_sx() {
+  throw new Error(process.env.NODE_ENV !== "production" ? 'MUI: The `experimental_sx` has been moved to `theme.unstable_sx`.' + 'For more details, see https://github.com/mui/material-ui/pull/35150.' : _formatErrorMessage(19));
+}
+export { default as unstable_getThemeValue } from "./getThemeValue/index.mjs";
+export { default as Box } from "./Box/index.mjs";
+export * from "./Box/index.mjs";
+export { default as createBox } from "./createBox/index.mjs";
+export { default as createStyled } from "./createStyled/index.mjs";
+export * from "./createStyled/index.mjs";
+export { default as styled } from "./styled/index.mjs";
+export { default as createTheme } from "./createTheme/index.mjs";
+export { default as createBreakpoints } from "./createBreakpoints/createBreakpoints.mjs";
+export { default as createSpacing } from "./createTheme/createSpacing.mjs";
+export { default as shape } from "./createTheme/shape.mjs";
+export { default as useThemeProps, getThemeProps } from "./useThemeProps/index.mjs";
+export { default as useTheme } from "./useTheme/index.mjs";
+export { default as useThemeWithoutDefault } from "./useThemeWithoutDefault/index.mjs";
+export { default as useMediaQuery } from "./useMediaQuery/index.mjs";
+export * from "./colorManipulator/index.mjs";
+export { default as ThemeProvider } from "./ThemeProvider/index.mjs";
+export { default as unstable_memoTheme } from "./memoTheme.mjs";
+export { default as unstable_createCssVarsProvider } from "./cssVars/createCssVarsProvider.mjs";
+export { default as unstable_createGetCssVar } from "./cssVars/createGetCssVar.mjs";
+export { default as unstable_cssVarsParser } from "./cssVars/cssVarsParser.mjs";
+export { default as unstable_prepareCssVars } from "./cssVars/prepareCssVars.mjs";
+export { default as unstable_createCssVarsTheme } from "./cssVars/createCssVarsTheme.mjs";
+export { default as responsivePropType } from "./responsivePropType/index.mjs";
+export { default as RtlProvider } from "./RtlProvider/index.mjs";
+export * from "./RtlProvider/index.mjs";
+export * from "./version/index.mjs";
+
+/** ----------------- */
+/** Layout components */
+export { default as createContainer } from "./Container/createContainer.mjs";
+export { default as Container } from "./Container/index.mjs";
+export * from "./Container/index.mjs";
+export { default as Grid } from "./Grid/Grid.mjs";
+export * from "./Grid/index.mjs";
+export { default as Stack } from "./Stack/Stack.mjs";
+export * from "./Stack/index.mjs";

package/{esm/memoTheme.js → memoTheme.mjs}

@@ -1,4 +1,4 @@
-import preprocessStyles from "./preprocessStyles.js";
+import preprocessStyles from "./preprocessStyles.mjs";
 
 /* eslint-disable @typescript-eslint/naming-convention */
 

package/memoize/index.d.mts

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

package/memoize/index.mjs

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

package/merge/index.d.mts

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