@mui/material 7.3.7 → 7.3.9

package/esm/styles/createColorScheme.d.ts

@@ -7,5 +7,5 @@ export declare function getOpacity(mode: 'light' | 'dark'): {
 };
 export declare function getOverlays(mode: 'light' | 'dark'): string[];
 export default function createColorScheme(options: ColorSystemOptions & {
-  colorSpace?: string;
+  colorSpace?: string | undefined;
 }): ColorSystemOptions;

package/esm/styles/createGetSelector.d.ts

@@ -1,9 +1,9 @@
 declare const _default: <T extends {
-  rootSelector?: string;
-  colorSchemeSelector?: "media" | "class" | "data" | string;
-  colorSchemes?: Record<string, any>;
-  defaultColorScheme?: string;
-  cssVarPrefix?: string;
+  rootSelector?: string | undefined;
+  colorSchemeSelector?: "media" | "class" | "data" | string | undefined;
+  colorSchemes?: Record<string, any> | undefined;
+  defaultColorScheme?: string | undefined;
+  cssVarPrefix?: string | undefined;
 }>(theme: T) => (colorScheme: keyof T["colorSchemes"] | undefined, css: Record<string, any>) => string | {
   [x: string]: Record<string, any>;
   "@media (prefers-color-scheme: dark)": {

package/esm/styles/createMixins.d.ts

@@ -2,14 +2,14 @@ import * as CSS from 'csstype';
 import { Breakpoints } from '@mui/system';
 export type NormalCssProperties = CSS.Properties<number | string>;
 export type Fontface = CSS.AtRule.FontFace & {
-  fallbacks?: CSS.AtRule.FontFace[];
+  fallbacks?: CSS.AtRule.FontFace[] | undefined;
 };
 
 /**
  * Allows the user to augment the properties available
  */
 export interface BaseCSSProperties extends NormalCssProperties {
-  '@font-face'?: Fontface | Fontface[];
+  '@font-face'?: Fontface | Fontface[] | undefined;
 }
 export interface CSSProperties extends BaseCSSProperties {
   // Allow pseudo selectors and media queries

package/esm/styles/createPalette.d.ts

@@ -48,10 +48,10 @@ export interface TypeBackground {
 export type TypeDivider = string;
 export type PaletteColorOptions = SimplePaletteColorOptions | ColorPartial;
 export interface SimplePaletteColorOptions {
-  light?: string;
+  light?: string | undefined;
   main: string;
-  dark?: string;
-  contrastText?: string;
+  dark?: string | undefined;
+  contrastText?: string | undefined;
 }
 export interface PaletteColor {
   light: string;
@@ -73,10 +73,10 @@ export const light: TypeObject;
 export const dark: TypeObject;
 export interface PaletteAugmentColorOptions {
   color: PaletteColorOptions;
-  mainShade?: number | string;
-  lightShade?: number | string;
-  darkShade?: number | string;
-  name?: number | string;
+  mainShade?: number | string | undefined;
+  lightShade?: number | string | undefined;
+  darkShade?: number | string | undefined;
+  name?: number | string | undefined;
 }
 export interface Palette {
   common: CommonColors;
@@ -105,21 +105,21 @@ export interface Channels {
 }
 export type PartialTypeObject = { [P in keyof TypeObject]?: Partial<TypeObject[P]> };
 export interface PaletteOptions {
-  primary?: PaletteColorOptions;
-  secondary?: PaletteColorOptions;
-  error?: PaletteColorOptions;
-  warning?: PaletteColorOptions;
-  info?: PaletteColorOptions;
-  success?: PaletteColorOptions;
-  mode?: PaletteMode;
-  tonalOffset?: PaletteTonalOffset;
-  contrastThreshold?: number;
-  common?: Partial<CommonColors>;
-  grey?: ColorPartial;
-  text?: Partial<TypeText>;
-  divider?: string;
-  action?: Partial<TypeAction>;
-  background?: Partial<TypeBackground>;
-  getContrastText?: (background: string) => string;
+  primary?: PaletteColorOptions | undefined;
+  secondary?: PaletteColorOptions | undefined;
+  error?: PaletteColorOptions | undefined;
+  warning?: PaletteColorOptions | undefined;
+  info?: PaletteColorOptions | undefined;
+  success?: PaletteColorOptions | undefined;
+  mode?: PaletteMode | undefined;
+  tonalOffset?: PaletteTonalOffset | undefined;
+  contrastThreshold?: number | undefined;
+  common?: Partial<CommonColors> | undefined;
+  grey?: ColorPartial | undefined;
+  text?: Partial<TypeText> | undefined;
+  divider?: string | undefined;
+  action?: Partial<TypeAction> | undefined;
+  background?: Partial<TypeBackground> | undefined;
+  getContrastText?: ((background: string) => string) | undefined;
 }
 export default function createPalette(palette: PaletteOptions): Palette;

package/esm/styles/createTheme.d.ts

@@ -8,8 +8,8 @@ type CssVarsOptions = CssThemeVariables extends {
 } ? ColorSystemOptions : {};
 type CssVarsConfigList = 'colorSchemeSelector' | 'rootSelector' | 'disableCssColorScheme' | 'cssVarPrefix' | 'shouldSkipGeneratingVar' | 'nativeColor';
 export interface ThemeOptions extends CssVarsOptions, Omit<CssVarsThemeOptions, CssVarsConfigList> {
-  cssVariables?: boolean | Pick<CssVarsThemeOptions, CssVarsConfigList>;
-  palette?: PaletteOptions;
+  cssVariables?: boolean | Pick<CssVarsThemeOptions, CssVarsConfigList> | undefined;
+  palette?: PaletteOptions | undefined;
 }
 /**
  * Generate a theme base on the options received.

package/esm/styles/createThemeFoundation.d.ts

@@ -155,36 +155,36 @@ export interface PaletteTooltip {
 export interface Shape extends SystemShape {}
 export interface ShapeOptions extends SystemShapeOptions {}
 export interface ColorSystemOptions {
-  palette?: PaletteOptions & {
-    background?: Partial<PaletteBackgroundChannel>;
-    common?: Partial<PaletteCommonChannel>;
-    primary?: Partial<PaletteColorChannel>;
-    secondary?: Partial<PaletteColorChannel>;
-    error?: Partial<PaletteColorChannel>;
-    info?: Partial<PaletteColorChannel>;
-    success?: Partial<PaletteColorChannel>;
-    text?: Partial<PaletteTextChannel>;
-    dividerChannel?: Partial<string>;
-    action?: Partial<PaletteActionChannel>;
-    Alert?: Partial<PaletteAlert>;
-    AppBar?: Partial<PaletteAppBar>;
-    Avatar?: Partial<PaletteAvatar>;
-    Button?: Partial<PaletteButton>;
-    Chip?: Partial<PaletteChip>;
-    FilledInput?: Partial<PaletteFilledInput>;
-    LinearProgress?: Partial<PaletteLinearProgress>;
-    Skeleton?: Partial<PaletteSkeleton>;
-    Slider?: Partial<PaletteSlider>;
-    SnackbarContent?: Partial<PaletteSnackbarContent>;
-    SpeedDialAction?: Partial<PaletteSpeedDialAction>;
-    StepConnector?: Partial<PaletteStepConnector>;
-    StepContent?: Partial<PaletteStepContent>;
-    Switch?: Partial<PaletteSwitch>;
-    TableCell?: Partial<PaletteTableCell>;
-    Tooltip?: Partial<PaletteTooltip>;
-  };
-  opacity?: Partial<Opacity>;
-  overlays?: Overlays;
+  palette?: (PaletteOptions & {
+    background?: Partial<PaletteBackgroundChannel> | undefined;
+    common?: Partial<PaletteCommonChannel> | undefined;
+    primary?: Partial<PaletteColorChannel> | undefined;
+    secondary?: Partial<PaletteColorChannel> | undefined;
+    error?: Partial<PaletteColorChannel> | undefined;
+    info?: Partial<PaletteColorChannel> | undefined;
+    success?: Partial<PaletteColorChannel> | undefined;
+    text?: Partial<PaletteTextChannel> | undefined;
+    dividerChannel?: Partial<string> | undefined;
+    action?: Partial<PaletteActionChannel> | undefined;
+    Alert?: Partial<PaletteAlert> | undefined;
+    AppBar?: Partial<PaletteAppBar> | undefined;
+    Avatar?: Partial<PaletteAvatar> | undefined;
+    Button?: Partial<PaletteButton> | undefined;
+    Chip?: Partial<PaletteChip> | undefined;
+    FilledInput?: Partial<PaletteFilledInput> | undefined;
+    LinearProgress?: Partial<PaletteLinearProgress> | undefined;
+    Skeleton?: Partial<PaletteSkeleton> | undefined;
+    Slider?: Partial<PaletteSlider> | undefined;
+    SnackbarContent?: Partial<PaletteSnackbarContent> | undefined;
+    SpeedDialAction?: Partial<PaletteSpeedDialAction> | undefined;
+    StepConnector?: Partial<PaletteStepConnector> | undefined;
+    StepContent?: Partial<PaletteStepContent> | undefined;
+    Switch?: Partial<PaletteSwitch> | undefined;
+    TableCell?: Partial<PaletteTableCell> | undefined;
+    Tooltip?: Partial<PaletteTooltip> | undefined;
+  }) | undefined;
+  opacity?: Partial<Opacity> | undefined;
+  overlays?: Overlays | undefined;
 }
 export interface CssVarsPalette {
   common: PaletteCommonChannel;

package/esm/styles/createThemeNoVars.d.ts

@@ -23,17 +23,17 @@ type CssVarsOptions = CssThemeVariables extends {
   enabled: true;
 } ? ColorSystemOptions : {};
 export interface ThemeOptions extends Omit<SystemThemeOptions, 'zIndex'>, CssVarsOptions {
-  mixins?: MixinsOptions;
-  components?: Components<Omit<Theme, 'components'>>;
-  palette?: PaletteOptions;
-  shadows?: Shadows;
-  shape?: ShapeOptions;
-  transitions?: TransitionsOptions;
-  typography?: TypographyVariantsOptions | ((palette: Palette) => TypographyVariantsOptions);
-  zIndex?: ZIndexOptions;
-  unstable_strictMode?: boolean;
-  unstable_sxConfig?: SxConfig;
-  modularCssLayers?: boolean | string;
+  mixins?: MixinsOptions | undefined;
+  components?: Components<Omit<Theme, 'components'>> | undefined;
+  palette?: PaletteOptions | undefined;
+  shadows?: Shadows | undefined;
+  shape?: ShapeOptions | undefined;
+  transitions?: TransitionsOptions | undefined;
+  typography?: TypographyVariantsOptions | ((palette: Palette) => TypographyVariantsOptions) | undefined;
+  zIndex?: ZIndexOptions | undefined;
+  unstable_strictMode?: boolean | undefined;
+  unstable_sxConfig?: SxConfig | undefined;
+  modularCssLayers?: boolean | string | undefined;
 }
 export interface BaseTheme extends SystemTheme {
   mixins: Mixins;
@@ -45,7 +45,7 @@ export interface BaseTheme extends SystemTheme {
   transitions: Transitions;
   typography: TypographyVariants;
   zIndex: ZIndex;
-  unstable_strictMode?: boolean;
+  unstable_strictMode?: boolean | undefined;
   applyStyles: ApplyStyles<SupportedColorScheme>;
 }
 
@@ -59,8 +59,8 @@ type CssVarsProperties = CssThemeVariables extends {
  * Our [TypeScript guide on theme customization](https://mui.com/material-ui/guides/typescript/#customization-of-theme) explains in detail how you would add custom properties.
  */
 export interface Theme extends BaseTheme, CssVarsProperties {
-  cssVariables?: false;
-  components?: Components<BaseTheme>;
+  cssVariables?: false | undefined;
+  components?: Components<BaseTheme> | undefined;
   unstable_sx: (props: SxProps<Theme>) => CSSObject;
   unstable_sxConfig: SxConfig;
   alpha: (color: string, value: number | string) => string;

package/esm/styles/createThemeWithVars.d.ts

@@ -17,29 +17,29 @@ export interface CssVarsThemeOptions extends Omit<ThemeOptions, 'palette' | 'com
    * @example '[data-mode-%s]'
    * Generate CSS variables within a data attribute [data-mode-light], [data-mode-dark]
    */
-  colorSchemeSelector?: 'media' | 'class' | 'data' | string;
+  colorSchemeSelector?: 'media' | 'class' | 'data' | string | undefined;
   /**
    * Prefix of the generated CSS variables
    * @default 'mui'
    */
-  cssVarPrefix?: string;
+  cssVarPrefix?: string | undefined;
   /**
    * If `true`, the CSS color-scheme will not be set.
    * https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/color-scheme
    * @default false
    */
-  disableCssColorScheme?: boolean;
+  disableCssColorScheme?: boolean | undefined;
   /**
    * If `true`, the CSS relative color will be used.
    */
-  nativeColor?: boolean;
+  nativeColor?: boolean | undefined;
   /**
    * The selector to generate the global CSS variables (non-color-scheme related)
    * @default ':root'
    * @example ':host' // (for shadow DOM)
    * @see https://mui.com/material-ui/customization/shadow-dom/#3-css-theme-variables-optional
    */
-  rootSelector?: string;
+  rootSelector?: string | undefined;
   /**
    * A function to determine if the key, value should be attached as CSS Variable
    * `keys` is an array that represents the object path keys.
@@ -47,19 +47,19 @@ export interface CssVarsThemeOptions extends Omit<ThemeOptions, 'palette' | 'com
    *  then, keys = ['foo', 'bar']
    *        value = 'var(--test)'
    */
-  shouldSkipGeneratingVar?: (keys: string[], value: string | number) => boolean;
+  shouldSkipGeneratingVar?: ((keys: string[], value: string | number) => boolean) | undefined;
   /**
    * @default 'light'
    */
-  defaultColorScheme?: SupportedColorScheme;
+  defaultColorScheme?: SupportedColorScheme | undefined;
   /**
    * Theme components
    */
-  components?: Components<Omit<Theme, 'components' | 'palette'> & CssVarsTheme>;
+  components?: Components<Omit<Theme, 'components' | 'palette'> & CssVarsTheme> | undefined;
   /**
    * Color schemes configuration
    */
-  colorSchemes?: Partial<Record<DefaultColorScheme, boolean | ColorSystemOptions>> & (ExtendedColorScheme extends string ? Record<ExtendedColorScheme, ColorSystemOptions> : {});
+  colorSchemes?: (Partial<Record<DefaultColorScheme, boolean | ColorSystemOptions>> & (ExtendedColorScheme extends string ? Record<ExtendedColorScheme, ColorSystemOptions> : {})) | undefined;
 }
 
 /**

package/esm/styles/createThemeWithVars.js

@@ -204,10 +204,10 @@ export default function createThemeWithVars(options = {}, ...args) {
     // assign component variables
     assignNode(palette, ['Alert', 'AppBar', 'Avatar', 'Button', 'Chip', 'FilledInput', 'LinearProgress', 'Skeleton', 'Slider', 'SnackbarContent', 'SpeedDialAction', 'StepConnector', 'StepContent', 'Switch', 'TableCell', 'Tooltip']);
     if (palette.mode === 'light') {
-      setColor(palette.Alert, 'errorColor', colorMix(safeDarken, palette.error.light, 0.6));
-      setColor(palette.Alert, 'infoColor', colorMix(safeDarken, palette.info.light, 0.6));
-      setColor(palette.Alert, 'successColor', colorMix(safeDarken, palette.success.light, 0.6));
-      setColor(palette.Alert, 'warningColor', colorMix(safeDarken, palette.warning.light, 0.6));
+      setColor(palette.Alert, 'errorColor', colorMix(safeDarken, nativeColor ? getCssVar('palette-error-light') : palette.error.light, 0.6));
+      setColor(palette.Alert, 'infoColor', colorMix(safeDarken, nativeColor ? getCssVar('palette-info-light') : palette.info.light, 0.6));
+      setColor(palette.Alert, 'successColor', colorMix(safeDarken, nativeColor ? getCssVar('palette-success-light') : palette.success.light, 0.6));
+      setColor(palette.Alert, 'warningColor', colorMix(safeDarken, nativeColor ? getCssVar('palette-warning-light') : palette.warning.light, 0.6));
       setColor(palette.Alert, 'errorFilledBg', setCssVarColor('palette-error-main'));
       setColor(palette.Alert, 'infoFilledBg', setCssVarColor('palette-info-main'));
       setColor(palette.Alert, 'successFilledBg', setCssVarColor('palette-success-main'));
@@ -216,10 +216,10 @@ export default function createThemeWithVars(options = {}, ...args) {
       setColor(palette.Alert, 'infoFilledColor', silent(() => palette.getContrastText(palette.info.main)));
       setColor(palette.Alert, 'successFilledColor', silent(() => palette.getContrastText(palette.success.main)));
       setColor(palette.Alert, 'warningFilledColor', silent(() => palette.getContrastText(palette.warning.main)));
-      setColor(palette.Alert, 'errorStandardBg', colorMix(safeLighten, palette.error.light, 0.9));
-      setColor(palette.Alert, 'infoStandardBg', colorMix(safeLighten, palette.info.light, 0.9));
-      setColor(palette.Alert, 'successStandardBg', colorMix(safeLighten, palette.success.light, 0.9));
-      setColor(palette.Alert, 'warningStandardBg', colorMix(safeLighten, palette.warning.light, 0.9));
+      setColor(palette.Alert, 'errorStandardBg', colorMix(safeLighten, nativeColor ? getCssVar('palette-error-light') : palette.error.light, 0.9));
+      setColor(palette.Alert, 'infoStandardBg', colorMix(safeLighten, nativeColor ? getCssVar('palette-info-light') : palette.info.light, 0.9));
+      setColor(palette.Alert, 'successStandardBg', colorMix(safeLighten, nativeColor ? getCssVar('palette-success-light') : palette.success.light, 0.9));
+      setColor(palette.Alert, 'warningStandardBg', colorMix(safeLighten, nativeColor ? getCssVar('palette-warning-light') : palette.warning.light, 0.9));
       setColor(palette.Alert, 'errorIconColor', setCssVarColor('palette-error-main'));
       setColor(palette.Alert, 'infoIconColor', setCssVarColor('palette-info-main'));
       setColor(palette.Alert, 'successIconColor', setCssVarColor('palette-success-main'));
@@ -234,20 +234,20 @@ export default function createThemeWithVars(options = {}, ...args) {
       setColor(palette.FilledInput, 'bg', 'rgba(0, 0, 0, 0.06)');
       setColor(palette.FilledInput, 'hoverBg', 'rgba(0, 0, 0, 0.09)');
       setColor(palette.FilledInput, 'disabledBg', 'rgba(0, 0, 0, 0.12)');
-      setColor(palette.LinearProgress, 'primaryBg', colorMix(safeLighten, palette.primary.main, 0.62));
-      setColor(palette.LinearProgress, 'secondaryBg', colorMix(safeLighten, palette.secondary.main, 0.62));
-      setColor(palette.LinearProgress, 'errorBg', colorMix(safeLighten, palette.error.main, 0.62));
-      setColor(palette.LinearProgress, 'infoBg', colorMix(safeLighten, palette.info.main, 0.62));
-      setColor(palette.LinearProgress, 'successBg', colorMix(safeLighten, palette.success.main, 0.62));
-      setColor(palette.LinearProgress, 'warningBg', colorMix(safeLighten, palette.warning.main, 0.62));
-      setColor(palette.Skeleton, 'bg', colorSpace ? colorMix(safeAlpha, palette.text.primary, 0.11) : `rgba(${setCssVarColor('palette-text-primaryChannel')} / 0.11)`);
-      setColor(palette.Slider, 'primaryTrack', colorMix(safeLighten, palette.primary.main, 0.62));
-      setColor(palette.Slider, 'secondaryTrack', colorMix(safeLighten, palette.secondary.main, 0.62));
-      setColor(palette.Slider, 'errorTrack', colorMix(safeLighten, palette.error.main, 0.62));
-      setColor(palette.Slider, 'infoTrack', colorMix(safeLighten, palette.info.main, 0.62));
-      setColor(palette.Slider, 'successTrack', colorMix(safeLighten, palette.success.main, 0.62));
-      setColor(palette.Slider, 'warningTrack', colorMix(safeLighten, palette.warning.main, 0.62));
-      const snackbarContentBackground = colorSpace ? colorMix(safeDarken, palette.background.default, 0.6825) // use `0.6825` instead of `0.8` to match the contrast ratio of JS implementation
+      setColor(palette.LinearProgress, 'primaryBg', colorMix(safeLighten, nativeColor ? getCssVar('palette-primary-main') : palette.primary.main, 0.62));
+      setColor(palette.LinearProgress, 'secondaryBg', colorMix(safeLighten, nativeColor ? getCssVar('palette-secondary-main') : palette.secondary.main, 0.62));
+      setColor(palette.LinearProgress, 'errorBg', colorMix(safeLighten, nativeColor ? getCssVar('palette-error-main') : palette.error.main, 0.62));
+      setColor(palette.LinearProgress, 'infoBg', colorMix(safeLighten, nativeColor ? getCssVar('palette-info-main') : palette.info.main, 0.62));
+      setColor(palette.LinearProgress, 'successBg', colorMix(safeLighten, nativeColor ? getCssVar('palette-success-main') : palette.success.main, 0.62));
+      setColor(palette.LinearProgress, 'warningBg', colorMix(safeLighten, nativeColor ? getCssVar('palette-warning-light') : palette.warning.main, 0.62));
+      setColor(palette.Skeleton, 'bg', colorSpace ? colorMix(safeAlpha, nativeColor ? getCssVar('palette-text-primary') : palette.text.primary, 0.11) : `rgba(${setCssVarColor('palette-text-primaryChannel')} / 0.11)`);
+      setColor(palette.Slider, 'primaryTrack', colorMix(safeLighten, nativeColor ? getCssVar('palette-primary-main') : palette.primary.main, 0.62));
+      setColor(palette.Slider, 'secondaryTrack', colorMix(safeLighten, nativeColor ? getCssVar('palette-secondary-main') : palette.secondary.main, 0.62));
+      setColor(palette.Slider, 'errorTrack', colorMix(safeLighten, nativeColor ? getCssVar('palette-error-main') : palette.error.main, 0.62));
+      setColor(palette.Slider, 'infoTrack', colorMix(safeLighten, nativeColor ? getCssVar('palette-info-main') : palette.info.main, 0.62));
+      setColor(palette.Slider, 'successTrack', colorMix(safeLighten, nativeColor ? getCssVar('palette-success-main') : palette.success.main, 0.62));
+      setColor(palette.Slider, 'warningTrack', colorMix(safeLighten, nativeColor ? getCssVar('palette-warning-main') : palette.warning.main, 0.62));
+      const snackbarContentBackground = colorSpace ? colorMix(safeDarken, nativeColor ? getCssVar('palette-background-default') : palette.background.default, 0.6825) // use `0.6825` instead of `0.8` to match the contrast ratio of JS implementation
       : safeEmphasize(palette.background.default, 0.8);
       setColor(palette.SnackbarContent, 'bg', snackbarContentBackground);
       setColor(palette.SnackbarContent, 'color', silent(() => colorSpace ? dark.text.primary : palette.getContrastText(snackbarContentBackground)));
@@ -256,20 +256,20 @@ export default function createThemeWithVars(options = {}, ...args) {
       setColor(palette.StepContent, 'border', setCssVarColor('palette-grey-400'));
       setColor(palette.Switch, 'defaultColor', setCssVarColor('palette-common-white'));
       setColor(palette.Switch, 'defaultDisabledColor', setCssVarColor('palette-grey-100'));
-      setColor(palette.Switch, 'primaryDisabledColor', colorMix(safeLighten, palette.primary.main, 0.62));
-      setColor(palette.Switch, 'secondaryDisabledColor', colorMix(safeLighten, palette.secondary.main, 0.62));
-      setColor(palette.Switch, 'errorDisabledColor', colorMix(safeLighten, palette.error.main, 0.62));
-      setColor(palette.Switch, 'infoDisabledColor', colorMix(safeLighten, palette.info.main, 0.62));
-      setColor(palette.Switch, 'successDisabledColor', colorMix(safeLighten, palette.success.main, 0.62));
-      setColor(palette.Switch, 'warningDisabledColor', colorMix(safeLighten, palette.warning.main, 0.62));
-      setColor(palette.TableCell, 'border', colorMix(safeLighten, colorMix(safeAlpha, palette.divider, 1), 0.88));
-      setColor(palette.Tooltip, 'bg', colorMix(safeAlpha, palette.grey[700], 0.92));
+      setColor(palette.Switch, 'primaryDisabledColor', colorMix(safeLighten, nativeColor ? getCssVar('palette-primary-main') : palette.primary.main, 0.62));
+      setColor(palette.Switch, 'secondaryDisabledColor', colorMix(safeLighten, nativeColor ? getCssVar('palette-secondary-main') : palette.secondary.main, 0.62));
+      setColor(palette.Switch, 'errorDisabledColor', colorMix(safeLighten, nativeColor ? getCssVar('palette-error-main') : palette.error.main, 0.62));
+      setColor(palette.Switch, 'infoDisabledColor', colorMix(safeLighten, nativeColor ? getCssVar('palette-info-main') : palette.info.main, 0.62));
+      setColor(palette.Switch, 'successDisabledColor', colorMix(safeLighten, nativeColor ? getCssVar('palette-success-main') : palette.success.main, 0.62));
+      setColor(palette.Switch, 'warningDisabledColor', colorMix(safeLighten, nativeColor ? getCssVar('palette-warning-main') : palette.warning.main, 0.62));
+      setColor(palette.TableCell, 'border', colorMix(safeLighten, safeAlpha(nativeColor ? getCssVar('palette-divider') : palette.divider, 1), 0.88));
+      setColor(palette.Tooltip, 'bg', colorMix(safeAlpha, nativeColor ? getCssVar('palette-grey-700') : palette.grey[700], 0.92));
     }
     if (palette.mode === 'dark') {
-      setColor(palette.Alert, 'errorColor', colorMix(safeLighten, palette.error.light, 0.6));
-      setColor(palette.Alert, 'infoColor', colorMix(safeLighten, palette.info.light, 0.6));
-      setColor(palette.Alert, 'successColor', colorMix(safeLighten, palette.success.light, 0.6));
-      setColor(palette.Alert, 'warningColor', colorMix(safeLighten, palette.warning.light, 0.6));
+      setColor(palette.Alert, 'errorColor', colorMix(safeLighten, nativeColor ? getCssVar('palette-error-light') : palette.error.light, 0.6));
+      setColor(palette.Alert, 'infoColor', colorMix(safeLighten, nativeColor ? getCssVar('palette-info-light') : palette.info.light, 0.6));
+      setColor(palette.Alert, 'successColor', colorMix(safeLighten, nativeColor ? getCssVar('palette-success-light') : palette.success.light, 0.6));
+      setColor(palette.Alert, 'warningColor', colorMix(safeLighten, nativeColor ? getCssVar('palette-warning-light') : palette.warning.light, 0.6));
       setColor(palette.Alert, 'errorFilledBg', setCssVarColor('palette-error-dark'));
       setColor(palette.Alert, 'infoFilledBg', setCssVarColor('palette-info-dark'));
       setColor(palette.Alert, 'successFilledBg', setCssVarColor('palette-success-dark'));
@@ -278,10 +278,10 @@ export default function createThemeWithVars(options = {}, ...args) {
       setColor(palette.Alert, 'infoFilledColor', silent(() => palette.getContrastText(palette.info.dark)));
       setColor(palette.Alert, 'successFilledColor', silent(() => palette.getContrastText(palette.success.dark)));
       setColor(palette.Alert, 'warningFilledColor', silent(() => palette.getContrastText(palette.warning.dark)));
-      setColor(palette.Alert, 'errorStandardBg', colorMix(safeDarken, palette.error.light, 0.9));
-      setColor(palette.Alert, 'infoStandardBg', colorMix(safeDarken, palette.info.light, 0.9));
-      setColor(palette.Alert, 'successStandardBg', colorMix(safeDarken, palette.success.light, 0.9));
-      setColor(palette.Alert, 'warningStandardBg', colorMix(safeDarken, palette.warning.light, 0.9));
+      setColor(palette.Alert, 'errorStandardBg', colorMix(safeDarken, nativeColor ? getCssVar('palette-error-light') : palette.error.light, 0.9));
+      setColor(palette.Alert, 'infoStandardBg', colorMix(safeDarken, nativeColor ? getCssVar('palette-info-light') : palette.info.light, 0.9));
+      setColor(palette.Alert, 'successStandardBg', colorMix(safeDarken, nativeColor ? getCssVar('palette-success-light') : palette.success.light, 0.9));
+      setColor(palette.Alert, 'warningStandardBg', colorMix(safeDarken, nativeColor ? getCssVar('palette-warning-light') : palette.warning.light, 0.9));
       setColor(palette.Alert, 'errorIconColor', setCssVarColor('palette-error-main'));
       setColor(palette.Alert, 'infoIconColor', setCssVarColor('palette-info-main'));
       setColor(palette.Alert, 'successIconColor', setCssVarColor('palette-success-main'));
@@ -298,20 +298,20 @@ export default function createThemeWithVars(options = {}, ...args) {
       setColor(palette.FilledInput, 'bg', 'rgba(255, 255, 255, 0.09)');
       setColor(palette.FilledInput, 'hoverBg', 'rgba(255, 255, 255, 0.13)');
       setColor(palette.FilledInput, 'disabledBg', 'rgba(255, 255, 255, 0.12)');
-      setColor(palette.LinearProgress, 'primaryBg', colorMix(safeDarken, palette.primary.main, 0.5));
-      setColor(palette.LinearProgress, 'secondaryBg', colorMix(safeDarken, palette.secondary.main, 0.5));
-      setColor(palette.LinearProgress, 'errorBg', colorMix(safeDarken, palette.error.main, 0.5));
-      setColor(palette.LinearProgress, 'infoBg', colorMix(safeDarken, palette.info.main, 0.5));
-      setColor(palette.LinearProgress, 'successBg', colorMix(safeDarken, palette.success.main, 0.5));
-      setColor(palette.LinearProgress, 'warningBg', colorMix(safeDarken, palette.warning.main, 0.5));
-      setColor(palette.Skeleton, 'bg', colorSpace ? colorMix(safeAlpha, palette.text.primary, 0.13) : `rgba(${setCssVarColor('palette-text-primaryChannel')} / 0.13)`);
-      setColor(palette.Slider, 'primaryTrack', colorMix(safeDarken, palette.primary.main, 0.5));
-      setColor(palette.Slider, 'secondaryTrack', colorMix(safeDarken, palette.secondary.main, 0.5));
-      setColor(palette.Slider, 'errorTrack', colorMix(safeDarken, palette.error.main, 0.5));
-      setColor(palette.Slider, 'infoTrack', colorMix(safeDarken, palette.info.main, 0.5));
-      setColor(palette.Slider, 'successTrack', colorMix(safeDarken, palette.success.main, 0.5));
-      setColor(palette.Slider, 'warningTrack', colorMix(safeDarken, palette.warning.main, 0.5));
-      const snackbarContentBackground = colorSpace ? colorMix(safeLighten, palette.background.default, 0.985) // use `0.985` instead of `0.98` to match the contrast ratio of JS implementation
+      setColor(palette.LinearProgress, 'primaryBg', colorMix(safeDarken, nativeColor ? getCssVar('palette-primary-main') : palette.primary.main, 0.5));
+      setColor(palette.LinearProgress, 'secondaryBg', colorMix(safeDarken, nativeColor ? getCssVar('palette-secondary-main') : palette.secondary.main, 0.5));
+      setColor(palette.LinearProgress, 'errorBg', colorMix(safeDarken, nativeColor ? getCssVar('palette-error-main') : palette.error.main, 0.5));
+      setColor(palette.LinearProgress, 'infoBg', colorMix(safeDarken, nativeColor ? getCssVar('palette-info-main') : palette.info.main, 0.5));
+      setColor(palette.LinearProgress, 'successBg', colorMix(safeDarken, nativeColor ? getCssVar('palette-success-main') : palette.success.main, 0.5));
+      setColor(palette.LinearProgress, 'warningBg', colorMix(safeDarken, nativeColor ? getCssVar('palette-warning-main') : palette.warning.main, 0.5));
+      setColor(palette.Skeleton, 'bg', colorSpace ? colorMix(safeAlpha, nativeColor ? getCssVar('palette-text-primary') : palette.text.primary, 0.13) : `rgba(${setCssVarColor('palette-text-primaryChannel')} / 0.13)`);
+      setColor(palette.Slider, 'primaryTrack', colorMix(safeDarken, nativeColor ? getCssVar('palette-primary-main') : palette.primary.main, 0.5));
+      setColor(palette.Slider, 'secondaryTrack', colorMix(safeDarken, nativeColor ? getCssVar('palette-secondary-main') : palette.secondary.main, 0.5));
+      setColor(palette.Slider, 'errorTrack', colorMix(safeDarken, nativeColor ? getCssVar('palette-error-main') : palette.error.main, 0.5));
+      setColor(palette.Slider, 'infoTrack', colorMix(safeDarken, nativeColor ? getCssVar('palette-info-main') : palette.info.main, 0.5));
+      setColor(palette.Slider, 'successTrack', colorMix(safeDarken, nativeColor ? getCssVar('palette-success-main') : palette.success.main, 0.5));
+      setColor(palette.Slider, 'warningTrack', colorMix(safeDarken, nativeColor ? getCssVar('palette-warning-light') : palette.warning.main, 0.5));
+      const snackbarContentBackground = colorSpace ? colorMix(safeLighten, nativeColor ? getCssVar('palette-background-default') : palette.background.default, 0.985) // use `0.985` instead of `0.98` to match the contrast ratio of JS implementation
       : safeEmphasize(palette.background.default, 0.98);
       setColor(palette.SnackbarContent, 'bg', snackbarContentBackground);
       setColor(palette.SnackbarContent, 'color', silent(() => colorSpace ? light.text.primary : palette.getContrastText(snackbarContentBackground)));
@@ -320,14 +320,14 @@ export default function createThemeWithVars(options = {}, ...args) {
       setColor(palette.StepContent, 'border', setCssVarColor('palette-grey-600'));
       setColor(palette.Switch, 'defaultColor', setCssVarColor('palette-grey-300'));
       setColor(palette.Switch, 'defaultDisabledColor', setCssVarColor('palette-grey-600'));
-      setColor(palette.Switch, 'primaryDisabledColor', colorMix(safeDarken, palette.primary.main, 0.55));
-      setColor(palette.Switch, 'secondaryDisabledColor', colorMix(safeDarken, palette.secondary.main, 0.55));
-      setColor(palette.Switch, 'errorDisabledColor', colorMix(safeDarken, palette.error.main, 0.55));
-      setColor(palette.Switch, 'infoDisabledColor', colorMix(safeDarken, palette.info.main, 0.55));
-      setColor(palette.Switch, 'successDisabledColor', colorMix(safeDarken, palette.success.main, 0.55));
-      setColor(palette.Switch, 'warningDisabledColor', colorMix(safeDarken, palette.warning.main, 0.55));
-      setColor(palette.TableCell, 'border', colorMix(safeDarken, colorMix(safeAlpha, palette.divider, 1), 0.68));
-      setColor(palette.Tooltip, 'bg', colorMix(safeAlpha, palette.grey[700], 0.92));
+      setColor(palette.Switch, 'primaryDisabledColor', colorMix(safeDarken, nativeColor ? getCssVar('palette-primary-main') : palette.primary.main, 0.55));
+      setColor(palette.Switch, 'secondaryDisabledColor', colorMix(safeDarken, nativeColor ? getCssVar('palette-secondary-main') : palette.secondary.main, 0.55));
+      setColor(palette.Switch, 'errorDisabledColor', colorMix(safeDarken, nativeColor ? getCssVar('palette-error-main') : palette.error.main, 0.55));
+      setColor(palette.Switch, 'infoDisabledColor', colorMix(safeDarken, nativeColor ? getCssVar('palette-info-main') : palette.info.main, 0.55));
+      setColor(palette.Switch, 'successDisabledColor', colorMix(safeDarken, nativeColor ? getCssVar('palette-success-main') : palette.success.main, 0.55));
+      setColor(palette.Switch, 'warningDisabledColor', colorMix(safeDarken, nativeColor ? getCssVar('palette-warning-light') : palette.warning.main, 0.55));
+      setColor(palette.TableCell, 'border', colorMix(safeDarken, safeAlpha(nativeColor ? getCssVar('palette-divider') : palette.divider, 1), 0.68));
+      setColor(palette.Tooltip, 'bg', colorMix(safeAlpha, nativeColor ? getCssVar('palette-grey-700') : palette.grey[700], 0.92));
     }
 
     // MUI X - DataGrid needs this token.

package/esm/styles/createTransitions.d.ts

@@ -16,14 +16,14 @@ export interface Duration {
 }
 export const duration: Duration;
 export interface TransitionsOptions {
-  easing?: Partial<Easing>;
-  duration?: Partial<Duration>;
-  create?: (props: string | string[], options?: Partial<{
+  easing?: Partial<Easing> | undefined;
+  duration?: Partial<Duration> | undefined;
+  create?: ((props: string | string[], options?: Partial<{
     duration: number | string;
     easing: string;
     delay: number | string;
-  }>) => string;
-  getAutoHeightDuration?: (height: number) => number;
+  }>) => string) | undefined;
+  getAutoHeightDuration?: ((height: number) => number) | undefined;
 }
 
 /**

package/esm/styles/createTypography.d.ts

@@ -12,7 +12,7 @@ export interface FontStyle {
   htmlFontSize: number;
 }
 export interface FontStyleOptions extends Partial<FontStyle> {
-  allVariants?: React.CSSProperties;
+  allVariants?: React.CSSProperties | undefined;
 }
 
 // TODO: which one should actually be allowed to be subject to module augmentation?

package/esm/styles/cssUtils.d.ts

@@ -18,8 +18,8 @@ export interface ResponsivePropertyParams {
   cssProperty: string;
   min: number;
   max: number;
-  unit?: string;
-  breakpoints?: number[];
-  transform?: (value: number) => number;
+  unit?: string | undefined;
+  breakpoints?: number[] | undefined;
+  transform?: ((value: number) => number) | undefined;
 }
 export function responsiveProperty(params: ResponsivePropertyParams): CSSProperties;

package/esm/styles/index.d.ts

@@ -33,7 +33,7 @@ export interface StyledComponentProps<ClassKey extends string = string> {
   /**
    * Override or extend the styles applied to the component.
    */
-  classes?: Partial<ClassNameMap<ClassKey>>;
+  classes?: Partial<ClassNameMap<ClassKey>> | undefined;
 }
 
 /**
@@ -43,11 +43,11 @@ export interface StyledComponentProps<ClassKey extends string = string> {
  * @deprecated will be removed in v5 for internal usage only
  */
 export type StandardProps<ComponentProps, ClassKey extends string, Removals extends keyof ComponentProps = never> = DistributiveOmit<ComponentProps, 'classes' | Removals> & StyledComponentProps<ClassKey> & {
-  className?: string;
-  ref?: ComponentProps extends {
-    ref?: infer RefType;
-  } ? RefType : React.Ref<unknown>;
-  style?: React.CSSProperties;
+  className?: string | undefined;
+  ref?: (ComponentProps extends {
+    ref?: infer RefType | undefined;
+  } ? RefType : React.Ref<unknown>) | undefined;
+  style?: React.CSSProperties | undefined;
 };
 export namespace PropTypes {
   // keeping the type structure for backwards compat

package/esm/styles/overrides.d.ts

@@ -123,7 +123,7 @@ export type OverridesStyleRules<ClassKey extends string = string, ComponentName
   theme: Theme;
 } & Record<string, unknown>>>;
 export type ComponentsOverrides<Theme = unknown> = { [Name in keyof ComponentNameToClassKey]?: Partial<OverridesStyleRules<ComponentNameToClassKey[Name], Name, Theme>> } & {
-  MuiCssBaseline?: CSSObject | string | ((theme: Theme) => CSSInterpolation);
+  MuiCssBaseline?: CSSObject | string | ((theme: Theme) => CSSInterpolation) | undefined;
 };
 export interface ComponentNameToClassKey {
   MuiAlert: AlertClassKey;

package/esm/styles/responsiveFontSizes.d.ts

@@ -1,10 +1,10 @@
 import { Breakpoint } from '@mui/system';
 import { TypographyVariants } from "./createTypography.js";
 export interface ResponsiveFontSizesOptions {
-  breakpoints?: Breakpoint[];
-  disableAlign?: boolean;
-  factor?: number;
-  variants?: Array<keyof TypographyVariants>;
+  breakpoints?: Breakpoint[] | undefined;
+  disableAlign?: boolean | undefined;
+  factor?: number | undefined;
+  variants?: Array<keyof TypographyVariants> | undefined;
 }
 export default function responsiveFontSizes<T extends {
   typography: TypographyVariants;

package/esm/styles/useThemeProps.d.ts

@@ -1,7 +1,7 @@
 import { Theme } from "./createTheme.js";
 import { Components } from "./components.js";
 export interface ThemeWithProps {
-  components?: Components<Omit<Theme, 'components'>>;
+  components?: Components<Omit<Theme, 'components'>> | undefined;
 }
 export type ThemedProps<Theme, Name extends keyof any> = Theme extends {
   components: Record<Name, {

package/esm/transitions/transition.d.ts

@@ -4,8 +4,8 @@ export type TransitionHandlerKeys = 'onEnter' | 'onEntering' | 'onEntered' | 'on
 export type TransitionHandlerProps = Pick<_TransitionProps, TransitionHandlerKeys>;
 export interface EasingProps {
   easing: string | {
-    enter?: string;
-    exit?: string;
+    enter?: string | undefined;
+    exit?: string | undefined;
   };
 }
 export type TransitionKeys = 'in' | 'mountOnEnter' | 'unmountOnExit' | 'timeout' | 'easing' | 'addEndListener' | TransitionHandlerKeys;

package/esm/transitions/utils.d.ts

@@ -2,13 +2,13 @@ import * as React from 'react';
 export declare const reflow: (node: Element) => number;
 interface ComponentProps {
   easing: string | {
-    enter?: string;
-    exit?: string;
+    enter?: string | undefined;
+    exit?: string | undefined;
   } | undefined;
   style: React.CSSProperties | undefined;
   timeout: number | {
-    enter?: number;
-    exit?: number;
+    enter?: number | undefined;
+    exit?: number | undefined;
   };
 }
 interface Options {