@mui/system 7.3.8 → 7.3.9

package/Box/Box.d.ts

@@ -23,11 +23,11 @@ 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>;
+  ref?: React.Ref<unknown> | undefined;
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx?: SxProps<Theme>;
+  sx?: SxProps<Theme> | undefined;
 }
 export interface BoxTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'div', Theme extends object = SystemTheme> {
   props: AdditionalProps & BoxOwnProps<Theme>;
@@ -48,6 +48,6 @@ export interface BoxTypeMap<AdditionalProps = {}, RootComponent extends React.El
  */
 declare const Box: OverridableComponent<BoxTypeMap>;
 export type BoxProps<RootComponent extends React.ElementType = BoxTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<BoxTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
-  component?: React.ElementType;
+  component?: React.ElementType | undefined;
 };
 export default Box;

package/CHANGELOG.md

@@ -1,5 +1,44 @@
 # [Versions](https://mui.com/versions/)
 
+## 7.3.9
+
+<!-- generated comparing v7.3.8..v7.x -->
+
+_Mar 5, 2026_
+
+A big thanks to the 15 contributors who made this release possible.
+
+### `@mui/material@7.3.9`
+
+- Clean up duplicated CSS rules (#47893) @sai6855
+- [theme] Generate `color-mix` value on top of default generated Material UI CSS variables (#47791) @ZeeshanTamboli
+- [tooltip] Fix error is thrown when wrapping an input which is disabled while focused (#47841) @ZeeshanTamboli
+- [table cell][theme] Apply `alpha` before color mixing to border bottom color when nativeColor + cssVariables is used (#47840) @ZeeshanTamboli
+
+### Docs
+
+- Fix small typo in NumberField page (#47888) @arthur-plazanet
+- Fix Theme builder video (#47855) @oliviertassinari
+- Add updated community theme resource (#47853) @PeterTYLiu
+- Fix the keyboard navigation in GroupedMenu example (#47848) @silviuaavram
+- Few copy fixes (#47810) @pavan-sh
+- Fix JSX in Overriding component structure docs (#47805) @ZeeshanTamboli
+- Fix SSR flicker sentence grammar (#47794) @pavan-sh
+- [system] Update sizing docs to clarify `(0, 1]` behavior. (#47851) @matthias-ccri
+- [theme] Fix `nativeColor` docs (#47759) (#47789) @ZeeshanTamboli
+
+### Core
+
+- point v7 subdomain to MUI X v7 docs (#113) @vmakhaev
+- [blog] Blogpost for upcoming price changes for MUI X (#47748) (#47910) @DanailH
+- [blog] Company Update: What we've been working on (and why) (alethomas) (#47626) (#47908) @alelthomas
+- [core] Update releaseChangelog.mjs (#47862) @mnajdova
+- [code-infra] Detect browser envs that don't support layout (#47813) (#47873) @Janpot
+- [code-infra] Enable undefined addition to optional properties (#47815) @brijeshb42
+- [docs-infra] Reapply Cookie Banner with Design Fixes (#47744) @dav-is
+
+All contributors of this release in alphabetical order: @alelthomas, @arthur-plazanet, @brijeshb42, @DanailH, @dav-is, @Janpot, @matthias-ccri, @mnajdova, @oliviertassinari, @pavan-sh, @PeterTYLiu, @sai6855, @silviuaavram, @vmakhaev, @ZeeshanTamboli
+
 ## 7.3.8
 
 <!-- generated comparing v7.3.7..master -->

package/Container/ContainerProps.d.ts

@@ -9,12 +9,12 @@ export interface ContainerTypeMap<AdditionalProps = {}, DefaultComponent extends
     /**
      * Override or extend the styles applied to the component.
      */
-    classes?: Partial<ContainerClasses>;
+    classes?: Partial<ContainerClasses> | undefined;
     /**
      * If `true`, the left and right padding is removed.
      * @default false
      */
-    disableGutters?: boolean;
+    disableGutters?: boolean | undefined;
     /**
      * 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
@@ -22,18 +22,18 @@ export interface ContainerTypeMap<AdditionalProps = {}, DefaultComponent extends
      * It's fluid by default.
      * @default false
      */
-    fixed?: boolean;
+    fixed?: boolean | undefined;
     /**
      * 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;
+    maxWidth?: Breakpoint | false | undefined;
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx?: SxProps<Theme>;
+    sx?: SxProps<Theme> | undefined;
   };
   defaultComponent: DefaultComponent;
 }

package/Container/createContainer.d.ts

@@ -9,10 +9,10 @@ interface StyleFnProps<Theme> extends 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;
+  createStyledComponent?: ((...styles: Array<Interpolation<StyleFnProps<Theme>>>) => StyledComponent<ContainerProps>) | undefined;
+  useThemeProps?: ((inProps: ContainerProps) => ContainerProps & {
+    component?: React.ElementType | undefined;
+  }) | undefined;
+  componentName?: string | undefined;
 }): OverridableComponent<ContainerTypeMap<{}, "div">>;
 export {};

package/GlobalStyles/GlobalStyles.d.ts

@@ -2,8 +2,8 @@ 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;
+  defaultTheme?: object | undefined;
+  themeId?: string | undefined;
 }
 declare function GlobalStyles<Theme = SystemTheme>({
   styles,

package/Grid/GridProps.d.ts

@@ -18,28 +18,28 @@ export interface GridBaseProps {
    * The number of columns.
    * @default 12
    */
-  columns?: ResponsiveStyleValue<number>;
+  columns?: ResponsiveStyleValue<number> | undefined;
   /**
    * Defines the horizontal space between the type `item` components.
    * It overrides the value of the `spacing` prop.
    */
-  columnSpacing?: ResponsiveStyleValue<GridSpacing>;
+  columnSpacing?: ResponsiveStyleValue<GridSpacing> | undefined;
   /**
    * If `true`, the component will have the flex *container* behavior.
    * You should be wrapping *items* with a *container*.
    * @default false
    */
-  container?: boolean;
+  container?: boolean | undefined;
   /**
    * Defines the `flex-direction` style property.
    * It is applied for all screen sizes.
    * @default 'row'
    */
-  direction?: ResponsiveStyleValue<GridDirection>;
+  direction?: ResponsiveStyleValue<GridDirection> | undefined;
   /**
    * Defines the offset value for the type `item` components.
    */
-  offset?: ResponsiveStyleValue<GridOffset>;
+  offset?: ResponsiveStyleValue<GridOffset> | undefined;
   /**
    * @internal
    * The level of the grid starts from `0` and increases when the grid nests
@@ -67,16 +67,16 @@ export interface GridBaseProps {
    *     <Grid container> // level 0
    * ```
    */
-  unstable_level?: number;
+  unstable_level?: number | undefined;
   /**
    * Defines the vertical space between the type `item` components.
    * It overrides the value of the `spacing` prop.
    */
-  rowSpacing?: ResponsiveStyleValue<GridSpacing>;
+  rowSpacing?: ResponsiveStyleValue<GridSpacing> | undefined;
   /**
    * Defines the size of the the type `item` components.
    */
-  size?: ResponsiveStyleValue<GridSize>;
+  size?: ResponsiveStyleValue<GridSize> | undefined;
   /**
    * Defines the space between the type `item` components.
    * It can only be used on a type `container` component.
@@ -88,16 +88,16 @@ export interface GridBaseProps {
    * It's applied for all screen sizes.
    * @default 'wrap'
    */
-  wrap?: GridWrap;
+  wrap?: GridWrap | undefined;
 }
 export type GridOwnerState = PartiallyRequired<GridBaseProps, 'size' | 'offset' | 'unstable_level'>;
 export interface GridTypeMap<AdditionalProps = {}, DefaultComponent extends React.ElementType = 'div'> {
   props: AdditionalProps & GridBaseProps & {
-    sx?: SxProps<Theme>;
+    sx?: SxProps<Theme> | undefined;
   } & SystemProps<Theme>;
   defaultComponent: DefaultComponent;
 }
 export type GridProps<RootComponent extends React.ElementType = GridTypeMap['defaultComponent'], AdditionalProps = {
-  component?: React.ElementType;
+  component?: React.ElementType | undefined;
 }> = OverrideProps<GridTypeMap<AdditionalProps, RootComponent>, RootComponent>;
 export {};

package/Grid/createGrid.d.ts

@@ -5,9 +5,9 @@ import { GridTypeMap } from "./GridProps.js";
 declare const defaultCreateStyledComponent: import("@mui/styled-engine").CreateStyledComponent<import("../index.js").MUIStyledCommonProps<any>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}, any>;
 declare function useThemePropsDefault<T extends {}>(props: T): T;
 export default function createGrid(options?: {
-  createStyledComponent?: typeof defaultCreateStyledComponent;
-  useThemeProps?: typeof useThemePropsDefault;
-  useTheme?: typeof useThemeSystem;
-  componentName?: string;
+  createStyledComponent?: typeof defaultCreateStyledComponent | undefined;
+  useThemeProps?: typeof useThemePropsDefault | undefined;
+  useTheme?: typeof useThemeSystem | undefined;
+  componentName?: string | undefined;
 }): OverridableComponent<GridTypeMap<{}, "div">>;
 export {};

package/Grid/deleteLegacyGridProps.d.ts

@@ -6,6 +6,6 @@ import { Breakpoint, Breakpoints } from "../createTheme/index.js";
  * @param {Breakpoints} breakpoints The breakpoints object.
  */
 export default function deleteLegacyGridProps(props: {
-  item?: boolean;
-  zeroMinWidth?: boolean;
+  item?: boolean | undefined;
+  zeroMinWidth?: boolean | undefined;
 } & Partial<Record<Breakpoint, 'auto' | number | boolean>> & Record<string, any>, breakpoints: Breakpoints): void;

package/Grid/gridGenerator.d.ts

@@ -5,7 +5,7 @@ import { GridDirection, GridOwnerState } from "./GridProps.js";
 interface Props {
   theme: {
     breakpoints: Breakpoints;
-    spacing?: Spacing;
+    spacing?: Spacing | undefined;
   };
   ownerState: GridOwnerState;
 }

package/InitColorSchemeScript/InitColorSchemeScript.d.ts

@@ -6,39 +6,39 @@ export interface InitColorSchemeScriptProps {
    * The default mode when the storage is empty (user's first visit).
    * @default 'system'
    */
-  defaultMode?: 'system' | 'light' | 'dark';
+  defaultMode?: 'system' | 'light' | 'dark' | undefined;
   /**
    * The default color scheme to be used on the light mode.
    * @default 'light'
    */
-  defaultLightColorScheme?: string;
+  defaultLightColorScheme?: string | undefined;
   /**
    * The default color scheme to be used on the dark mode.
    * * @default 'dark'
    */
-  defaultDarkColorScheme?: string;
+  defaultDarkColorScheme?: string | undefined;
   /**
    * The node (provided as string) used to attach the color-scheme attribute.
    * @default 'document.documentElement'
    */
-  colorSchemeNode?: string;
+  colorSchemeNode?: string | undefined;
   /**
    * localStorage key used to store `mode`.
    * @default 'mode'
    */
-  modeStorageKey?: string;
+  modeStorageKey?: string | undefined;
   /**
    * localStorage key used to store `colorScheme`.
    * @default 'color-scheme'
    */
-  colorSchemeStorageKey?: string;
+  colorSchemeStorageKey?: string | undefined;
   /**
    * DOM attribute for applying color scheme.
    * @default 'data-color-scheme'
    * @example '.mode-%s' // for class based color scheme
    * @example '[data-mode-%s]' // for data-attribute without '='
    */
-  attribute?: 'class' | 'data' | string;
+  attribute?: 'class' | 'data' | string | undefined;
   /**
    * Nonce string to pass to the inline script for CSP headers.
    */

package/RtlProvider/index.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 interface RtlProviderProps {
   children?: React.ReactNode;
-  value?: boolean;
+  value?: boolean | undefined;
 }
 declare const RtlProvider: React.FC<RtlProviderProps>;
 export const useRtl: () => boolean;

package/Stack/StackProps.d.ts

@@ -13,12 +13,12 @@ export interface StackBaseProps {
    * It is applied for all screen sizes.
    * @default 'column'
    */
-  direction?: ResponsiveStyleValue<'row' | 'row-reverse' | 'column' | 'column-reverse'>;
+  direction?: ResponsiveStyleValue<'row' | 'row-reverse' | 'column' | 'column-reverse'> | undefined;
   /**
    * Defines the space between immediate children.
    * @default 0
    */
-  spacing?: ResponsiveStyleValue<number | string>;
+  spacing?: ResponsiveStyleValue<number | string> | undefined;
   /**
    * Add an element between each child.
    */
@@ -32,19 +32,19 @@ export interface StackBaseProps {
    * To enable this flag globally, follow the theme's default props configuration.
    * @default false
    */
-  useFlexGap?: boolean;
+  useFlexGap?: boolean | undefined;
 }
 export interface StackTypeMap<AdditionalProps = {}, DefaultComponent extends React.ElementType = 'div'> {
   props: AdditionalProps & StackBaseProps & {
     /**
      * The system prop, which allows defining system overrides as well as additional CSS styles.
      */
-    sx?: SxProps<Theme>;
+    sx?: SxProps<Theme> | undefined;
   } & SystemProps<Theme>;
   defaultComponent: DefaultComponent;
 }
 export type StackProps<RootComponent extends React.ElementType = StackTypeMap['defaultComponent'], AdditionalProps = {
-  component?: React.ElementType;
+  component?: React.ElementType | undefined;
 }> = OverrideProps<StackTypeMap<AdditionalProps, RootComponent>, RootComponent>;
 export interface StackOwnerState {
   direction: StackProps['direction'];

package/Stack/createStack.d.ts

@@ -17,8 +17,8 @@ export declare const style: ({
   theme
 }: StyleFunctionProps) => any;
 export default function createStack(options?: {
-  createStyledComponent?: typeof defaultCreateStyledComponent;
-  useThemeProps?: typeof useThemePropsDefault;
-  componentName?: string;
+  createStyledComponent?: typeof defaultCreateStyledComponent | undefined;
+  useThemeProps?: typeof useThemePropsDefault | undefined;
+  componentName?: string | undefined;
 }): OverridableComponent<StackTypeMap<{}, "div">>;
 export {};

package/ThemeProvider/ThemeProvider.d.ts

@@ -7,7 +7,7 @@ export interface ThemeProviderProps<Theme = DefaultTheme> {
   /**
    * The design system's unique id for getting the corresponded theme when there are multiple design systems.
    */
-  themeId?: string;
+  themeId?: string | undefined;
   /**
    * A theme object. You can provide a function to extend the outer theme.
    */

package/ThemeProvider/useLayerOrder.d.ts

@@ -3,5 +3,5 @@
  * Then on client-side, it injects the CSS layer order into the document head to ensure that the layer order is always present first before other Emotion styles.
  */
 export default function useLayerOrder(theme: {
-  modularCssLayers?: boolean | string;
+  modularCssLayers?: boolean | string | undefined;
 }): import("react/jsx-runtime").JSX.Element | null;

package/breakpoints/breakpoints.d.ts

@@ -5,8 +5,8 @@ import { ResponsiveStyleValue } from "../styleFunctionSx/index.js";
 import { StyleFunction } from "../style/index.js";
 export interface ResolveBreakpointValuesOptions<T> {
   values: ResponsiveStyleValue<T>;
-  breakpoints?: Breakpoints['values'];
-  base?: Record<string, boolean>;
+  breakpoints?: Breakpoints['values'] | undefined;
+  base?: Record<string, boolean> | undefined;
 }
 export function resolveBreakpointValues<T>(options: ResolveBreakpointValuesOptions<T>): Record<string, T>;
 export function mergeBreakpointsInOrder(breakpoints: Breakpoints, styles: CSSObject[]): CSSObject;

package/colorManipulator/colorManipulator.d.ts

@@ -3,7 +3,7 @@ export type ColorFormat = 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'color';
 export interface ColorObject {
   type: ColorFormat;
   values: [number, number, number] | [number, number, number, number];
-  colorSpace?: 'srgb' | 'display-p3' | 'a98-rgb' | 'prophoto-rgb' | 'rec-2020';
+  colorSpace?: 'srgb' | 'display-p3' | 'a98-rgb' | 'prophoto-rgb' | 'rec-2020' | undefined;
 }
 export function hexToRgb(hex: string): string;
 export function rgbToHex(color: string): string;

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/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/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/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/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/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/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