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

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

@@ -1,4 +1,4 @@
-import merge from "../merge/index.js";
+import merge from "../merge/index.mjs";
 function compose(...styles) {
   const handlers = styles.reduce((acc, style) => {
     style.filterProps.forEach(prop => {

package/compose/index.d.mts

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

package/compose/index.mjs

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

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

@@ -1,9 +1,9 @@
 import { OverridableComponent } from '@mui/types';
-import { BoxTypeMap } from "../Box/index.js";
-import { Theme as SystemTheme } from "../createTheme/index.js";
+import { BoxTypeMap } from "../Box/index.mjs";
+import { Theme as SystemTheme } from "../createTheme/index.mjs";
 export default function createBox<T extends object = SystemTheme, AdditionalProps extends Record<string, unknown> = {}>(options?: {
-  themeId?: string;
+  themeId?: string | undefined;
   defaultTheme: T;
-  defaultClassName?: string;
-  generateClassName?: (componentName: string) => string;
+  defaultClassName?: string | undefined;
+  generateClassName?: ((componentName: string) => string) | undefined;
 }): OverridableComponent<BoxTypeMap<AdditionalProps, 'div', T>>;

package/createBox/createBox.d.ts

@@ -2,8 +2,8 @@ import { OverridableComponent } from '@mui/types';
 import { BoxTypeMap } from "../Box/index.js";
 import { Theme as SystemTheme } from "../createTheme/index.js";
 export default function createBox<T extends object = SystemTheme, AdditionalProps extends Record<string, unknown> = {}>(options?: {
-  themeId?: string;
+  themeId?: string | undefined;
   defaultTheme: T;
-  defaultClassName?: string;
-  generateClassName?: (componentName: string) => string;
+  defaultClassName?: string | undefined;
+  generateClassName?: ((componentName: string) => string) | undefined;
 }): OverridableComponent<BoxTypeMap<AdditionalProps, 'div', T>>;

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

@@ -3,8 +3,8 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import styled from '@mui/styled-engine';
-import styleFunctionSx, { extendSxProp } from "../styleFunctionSx/index.js";
-import useTheme from "../useTheme/index.js";
+import styleFunctionSx, { extendSxProp } from "../styleFunctionSx/index.mjs";
+import useTheme from "../useTheme/index.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 export default function createBox(options = {}) {
   const {

package/createBox/index.d.mts

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

package/createBox/index.mjs

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

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

@@ -1,3 +1,3 @@
 /** This export is intended for internal integration with Pigment CSS */
 /* eslint-disable import/prefer-default-export */
-export { default as unstable_createBreakpoints } from "./createBreakpoints.js";
+export { default as unstable_createBreakpoints } from "./createBreakpoints.mjs";

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

@@ -1,3 +1,3 @@
 /** This export is intended for internal integration with Pigment CSS */
 /* eslint-disable import/prefer-default-export */
-export { default as unstable_createBreakpoints } from "./createBreakpoints.js";
+export { default as unstable_createBreakpoints } from "./createBreakpoints.mjs";

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

@@ -1,27 +1,27 @@
 import * as React from 'react';
 import { CreateMUIStyled as CreateMUIStyledStyledEngine, CSSInterpolation } from '@mui/styled-engine';
-import styleFunctionSx, { SxProps } from "../styleFunctionSx/index.js";
-import { Theme as DefaultTheme } from "../createTheme/index.js";
+import styleFunctionSx, { SxProps } from "../styleFunctionSx/index.mjs";
+import { Theme as DefaultTheme } from "../createTheme/index.mjs";
 export function shouldForwardProp(propName: PropertyKey): boolean;
 export interface MUIStyledCommonProps<Theme extends object = DefaultTheme> {
-  theme?: Theme;
-  as?: React.ElementType;
-  sx?: SxProps<Theme>;
+  theme?: Theme | undefined;
+  as?: React.ElementType | undefined;
+  sx?: SxProps<Theme> | undefined;
 }
 export interface MuiStyledOptions {
-  name?: string;
-  slot?: string;
+  name?: string | undefined;
+  slot?: string | undefined;
   // The difference between Interpolation and CSSInterpolation is that the former supports functions based on props
   // If we want to support props in the overrides, we will need to change the CSSInterpolation to Interpolation<Props>
-  overridesResolver?: (props: any, styles: Record<string, CSSInterpolation>) => CSSInterpolation;
-  skipVariantsResolver?: boolean;
-  skipSx?: boolean;
+  overridesResolver?: ((props: any, styles: Record<string, CSSInterpolation>) => CSSInterpolation) | undefined;
+  skipVariantsResolver?: boolean | undefined;
+  skipSx?: boolean | undefined;
 }
 export type CreateMUIStyled<Theme extends object = DefaultTheme> = CreateMUIStyledStyledEngine<MUIStyledCommonProps<Theme>, MuiStyledOptions, Theme>;
 export default function createStyled<Theme extends object = DefaultTheme>(options?: {
-  themeId?: string;
-  defaultTheme?: Theme;
-  rootShouldForwardProp?: (prop: PropertyKey) => boolean;
-  slotShouldForwardProp?: (prop: PropertyKey) => boolean;
-  styleFunctionSx?: typeof styleFunctionSx;
+  themeId?: string | undefined;
+  defaultTheme?: Theme | undefined;
+  rootShouldForwardProp?: ((prop: PropertyKey) => boolean) | undefined;
+  slotShouldForwardProp?: ((prop: PropertyKey) => boolean) | undefined;
+  styleFunctionSx?: typeof styleFunctionSx | undefined;
 }): CreateMUIStyled<Theme>;

package/createStyled/createStyled.d.ts

@@ -4,24 +4,24 @@ import styleFunctionSx, { SxProps } from "../styleFunctionSx/index.js";
 import { Theme as DefaultTheme } from "../createTheme/index.js";
 export function shouldForwardProp(propName: PropertyKey): boolean;
 export interface MUIStyledCommonProps<Theme extends object = DefaultTheme> {
-  theme?: Theme;
-  as?: React.ElementType;
-  sx?: SxProps<Theme>;
+  theme?: Theme | undefined;
+  as?: React.ElementType | undefined;
+  sx?: SxProps<Theme> | undefined;
 }
 export interface MuiStyledOptions {
-  name?: string;
-  slot?: string;
+  name?: string | undefined;
+  slot?: string | undefined;
   // The difference between Interpolation and CSSInterpolation is that the former supports functions based on props
   // If we want to support props in the overrides, we will need to change the CSSInterpolation to Interpolation<Props>
-  overridesResolver?: (props: any, styles: Record<string, CSSInterpolation>) => CSSInterpolation;
-  skipVariantsResolver?: boolean;
-  skipSx?: boolean;
+  overridesResolver?: ((props: any, styles: Record<string, CSSInterpolation>) => CSSInterpolation) | undefined;
+  skipVariantsResolver?: boolean | undefined;
+  skipSx?: boolean | undefined;
 }
 export type CreateMUIStyled<Theme extends object = DefaultTheme> = CreateMUIStyledStyledEngine<MUIStyledCommonProps<Theme>, MuiStyledOptions, Theme>;
 export default function createStyled<Theme extends object = DefaultTheme>(options?: {
-  themeId?: string;
-  defaultTheme?: Theme;
-  rootShouldForwardProp?: (prop: PropertyKey) => boolean;
-  slotShouldForwardProp?: (prop: PropertyKey) => boolean;
-  styleFunctionSx?: typeof styleFunctionSx;
+  themeId?: string | undefined;
+  defaultTheme?: Theme | undefined;
+  rootShouldForwardProp?: ((prop: PropertyKey) => boolean) | undefined;
+  slotShouldForwardProp?: ((prop: PropertyKey) => boolean) | undefined;
+  styleFunctionSx?: typeof styleFunctionSx | undefined;
 }): CreateMUIStyled<Theme>;

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

@@ -2,9 +2,9 @@ import styledEngineStyled, { internal_mutateStyles as mutateStyles, internal_ser
 import { isPlainObject } from '@mui/utils/deepmerge';
 import capitalize from '@mui/utils/capitalize';
 import getDisplayName from '@mui/utils/getDisplayName';
-import createTheme from "../createTheme/index.js";
-import styleFunctionSx from "../styleFunctionSx/index.js";
-import preprocessStyles from "../preprocessStyles.js";
+import createTheme from "../createTheme/index.mjs";
+import styleFunctionSx from "../styleFunctionSx/index.mjs";
+import preprocessStyles from "../preprocessStyles.mjs";
 
 /* eslint-disable no-underscore-dangle */
 /* eslint-disable no-labels */

package/createStyled/index.d.mts

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

package/createStyled/index.mjs

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

package/{esm/createTheme/createSpacing.js → createTheme/createSpacing.mjs}

@@ -1,4 +1,4 @@
-import { createUnarySpacing } from "../spacing/index.js";
+import { createUnarySpacing } from "../spacing/index.mjs";
 
 // The different signatures imply different meaning for their arguments that can't be expressed structurally.
 // We express the difference with variable names.

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

@@ -1,11 +1,11 @@
 import { CSSObject } from '@mui/styled-engine';
-import { Breakpoints, BreakpointsOptions } from "../createBreakpoints/createBreakpoints.js";
-import { Shape, ShapeOptions } from "./shape.js";
-import { Spacing, SpacingOptions } from "./createSpacing.js";
-import { SxConfig, SxProps } from "../styleFunctionSx/index.js";
-import { ApplyStyles } from "./applyStyles.js";
-import { CssContainerQueries } from "../cssContainerQueries/index.js";
-export { Breakpoint, Breakpoints, BreakpointOverrides } from "../createBreakpoints/createBreakpoints.js";
+import { Breakpoints, BreakpointsOptions } from "../createBreakpoints/createBreakpoints.mjs";
+import { Shape, ShapeOptions } from "./shape.mjs";
+import { Spacing, SpacingOptions } from "./createSpacing.mjs";
+import { SxConfig, SxProps } from "../styleFunctionSx/index.mjs";
+import { ApplyStyles } from "./applyStyles.mjs";
+import { CssContainerQueries } from "../cssContainerQueries/index.mjs";
+export { Breakpoint, Breakpoints, BreakpointOverrides } from "../createBreakpoints/createBreakpoints.mjs";
 export type Direction = 'ltr' | 'rtl';
 export interface Typography {}
 export interface Mixins {}
@@ -13,18 +13,18 @@ export interface Shadows {}
 export interface Transitions {}
 export interface ZIndex {}
 export interface ThemeOptions {
-  shape?: ShapeOptions;
-  breakpoints?: BreakpointsOptions;
-  direction?: Direction;
-  mixins?: Mixins;
-  palette?: Record<string, any>;
-  shadows?: Shadows;
-  spacing?: SpacingOptions;
-  transitions?: Transitions;
-  components?: Record<string, any>;
-  typography?: Typography;
-  zIndex?: ZIndex;
-  unstable_sxConfig?: SxConfig;
+  shape?: ShapeOptions | undefined;
+  breakpoints?: BreakpointsOptions | undefined;
+  direction?: Direction | undefined;
+  mixins?: Mixins | undefined;
+  palette?: Record<string, any> | undefined;
+  shadows?: Shadows | undefined;
+  spacing?: SpacingOptions | undefined;
+  transitions?: Transitions | undefined;
+  components?: Record<string, any> | undefined;
+  typography?: Typography | undefined;
+  zIndex?: ZIndex | undefined;
+  unstable_sxConfig?: SxConfig | undefined;
 }
 export interface Theme extends CssContainerQueries {
   shape: Shape;
@@ -33,13 +33,13 @@ export interface Theme extends CssContainerQueries {
   palette: Record<string, any> & {
     mode: 'light' | 'dark';
   };
-  shadows?: Shadows;
+  shadows?: Shadows | undefined;
   spacing: Spacing;
-  transitions?: Transitions;
-  components?: Record<string, any>;
-  mixins?: Mixins;
-  typography?: Typography;
-  zIndex?: ZIndex;
+  transitions?: Transitions | undefined;
+  components?: Record<string, any> | undefined;
+  mixins?: Mixins | undefined;
+  typography?: Typography | undefined;
+  zIndex?: ZIndex | undefined;
   applyStyles: ApplyStyles<'light' | 'dark'>;
   unstable_sxConfig: SxConfig;
   unstable_sx: (props: SxProps<Theme>) => CSSObject;

package/createTheme/createTheme.d.ts

@@ -13,18 +13,18 @@ export interface Shadows {}
 export interface Transitions {}
 export interface ZIndex {}
 export interface ThemeOptions {
-  shape?: ShapeOptions;
-  breakpoints?: BreakpointsOptions;
-  direction?: Direction;
-  mixins?: Mixins;
-  palette?: Record<string, any>;
-  shadows?: Shadows;
-  spacing?: SpacingOptions;
-  transitions?: Transitions;
-  components?: Record<string, any>;
-  typography?: Typography;
-  zIndex?: ZIndex;
-  unstable_sxConfig?: SxConfig;
+  shape?: ShapeOptions | undefined;
+  breakpoints?: BreakpointsOptions | undefined;
+  direction?: Direction | undefined;
+  mixins?: Mixins | undefined;
+  palette?: Record<string, any> | undefined;
+  shadows?: Shadows | undefined;
+  spacing?: SpacingOptions | undefined;
+  transitions?: Transitions | undefined;
+  components?: Record<string, any> | undefined;
+  typography?: Typography | undefined;
+  zIndex?: ZIndex | undefined;
+  unstable_sxConfig?: SxConfig | undefined;
 }
 export interface Theme extends CssContainerQueries {
   shape: Shape;
@@ -33,13 +33,13 @@ export interface Theme extends CssContainerQueries {
   palette: Record<string, any> & {
     mode: 'light' | 'dark';
   };
-  shadows?: Shadows;
+  shadows?: Shadows | undefined;
   spacing: Spacing;
-  transitions?: Transitions;
-  components?: Record<string, any>;
-  mixins?: Mixins;
-  typography?: Typography;
-  zIndex?: ZIndex;
+  transitions?: Transitions | undefined;
+  components?: Record<string, any> | undefined;
+  mixins?: Mixins | undefined;
+  typography?: Typography | undefined;
+  zIndex?: ZIndex | undefined;
   applyStyles: ApplyStyles<'light' | 'dark'>;
   unstable_sxConfig: SxConfig;
   unstable_sx: (props: SxProps<Theme>) => CSSObject;

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

@@ -1,11 +1,11 @@
 import deepmerge from '@mui/utils/deepmerge';
-import createBreakpoints from "../createBreakpoints/createBreakpoints.js";
-import cssContainerQueries from "../cssContainerQueries/index.js";
-import shape from "./shape.js";
-import createSpacing from "./createSpacing.js";
-import styleFunctionSx from "../styleFunctionSx/styleFunctionSx.js";
-import defaultSxConfig from "../styleFunctionSx/defaultSxConfig.js";
-import applyStyles from "./applyStyles.js";
+import createBreakpoints from "../createBreakpoints/createBreakpoints.mjs";
+import cssContainerQueries from "../cssContainerQueries/index.mjs";
+import shape from "./shape.mjs";
+import createSpacing from "./createSpacing.mjs";
+import styleFunctionSx from "../styleFunctionSx/styleFunctionSx.mjs";
+import defaultSxConfig from "../styleFunctionSx/defaultSxConfig.mjs";
+import applyStyles from "./applyStyles.mjs";
 function createTheme(options = {}, ...args) {
   const {
     breakpoints: breakpointsInput = {},

package/createTheme/index.d.mts

@@ -0,0 +1,4 @@
+export { default } from "./createTheme.mjs";
+export * from "./createTheme.mjs";
+export { default as unstable_applyStyles } from "./applyStyles.mjs";
+export * from "./applyStyles.mjs";

package/createTheme/index.mjs

@@ -0,0 +1,3 @@
+export { default } from "./createTheme.mjs";
+export { default as private_createBreakpoints } from "../createBreakpoints/createBreakpoints.mjs";
+export { default as unstable_applyStyles } from "./applyStyles.mjs";

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

@@ -1,4 +1,4 @@
-import { Breakpoints } from "../createBreakpoints/createBreakpoints.js";
+import { Breakpoints } from "../createBreakpoints/createBreakpoints.mjs";
 export interface ContainerQueries {
   up: Breakpoints['up'];
   down: Breakpoints['down'];

package/cssContainerQueries/cssContainerQueries.js

@@ -17,8 +17,8 @@ function sortContainerQueries(theme, css) {
   if (!theme.containerQueries) {
     return css;
   }
+  const regex = /min-width:\s*([0-9.]+)/;
   const sorted = Object.keys(css).filter(key => key.startsWith('@container')).sort((a, b) => {
-    const regex = /min-width:\s*([0-9.]+)/;
     return +(a.match(regex)?.[1] || 0) - +(b.match(regex)?.[1] || 0);
   });
   if (!sorted.length) {

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

@@ -8,8 +8,8 @@ export function sortContainerQueries(theme, css) {
   if (!theme.containerQueries) {
     return css;
   }
+  const regex = /min-width:\s*([0-9.]+)/;
   const sorted = Object.keys(css).filter(key => key.startsWith('@container')).sort((a, b) => {
-    const regex = /min-width:\s*([0-9.]+)/;
     return +(a.match(regex)?.[1] || 0) - +(b.match(regex)?.[1] || 0);
   });
   if (!sorted.length) {

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

@@ -1,3 +1,3 @@
-export { default } from "./cssContainerQueries.js";
-export { isCqShorthand, getContainerQuery, sortContainerQueries } from "./cssContainerQueries.js";
-export type { CssContainerQueries } from "./cssContainerQueries.js";
+export { default } from "./cssContainerQueries.mjs";
+export { isCqShorthand, getContainerQuery, sortContainerQueries } from "./cssContainerQueries.mjs";
+export type { CssContainerQueries } from "./cssContainerQueries.mjs";

package/cssContainerQueries/index.mjs

@@ -0,0 +1,2 @@
+export { default } from "./cssContainerQueries.mjs";
+export { isCqShorthand, getContainerQuery, sortContainerQueries } from "./cssContainerQueries.mjs";

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

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

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

@@ -1,8 +1,8 @@
-import style from "../style/index.js";
-import compose from "../compose/index.js";
-import { createUnaryUnit, getValue } from "../spacing/index.js";
-import { handleBreakpoints } from "../breakpoints/index.js";
-import responsivePropType from "../responsivePropType/index.js";
+import style from "../style/index.mjs";
+import compose from "../compose/index.mjs";
+import { createUnaryUnit, getValue } from "../spacing/index.mjs";
+import { handleBreakpoints } from "../breakpoints/index.mjs";
+import responsivePropType from "../responsivePropType/index.mjs";
 
 // false positive
 // eslint-disable-next-line react/function-component-definition

package/cssGrid/index.d.mts

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

package/cssGrid/index.mjs

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

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import InitColorSchemeScript from "../InitColorSchemeScript/index.js";
-import { Result } from "./useCurrentColorScheme.js";
-import type { StorageManager } from "./localStorageManager.js";
+import InitColorSchemeScript from "../InitColorSchemeScript/index.mjs";
+import { Result } from "./useCurrentColorScheme.mjs";
+import type { StorageManager } from "./localStorageManager.mjs";
 export interface ColorSchemeContextValue<SupportedColorScheme extends string> extends Result<SupportedColorScheme> {
   allColorSchemes: SupportedColorScheme[];
 }
@@ -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