@mui/material 5.8.5 → 5.8.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "5.8.5",
+  "version": "5.8.6",
   "private": false,
   "author": "MUI Team",
   "description": "React components that implement Google's Material Design.",
@@ -46,10 +46,10 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.17.2",
-    "@mui/base": "5.0.0-alpha.86",
-    "@mui/system": "^5.8.5",
+    "@mui/base": "5.0.0-alpha.87",
+    "@mui/system": "^5.8.6",
     "@mui/types": "^7.1.4",
-    "@mui/utils": "^5.8.4",
+    "@mui/utils": "^5.8.6",
     "@types/react-transition-group": "^4.4.4",
     "clsx": "^1.1.1",
     "csstype": "^3.1.0",

package/styles/CssVarsProvider.d.ts

@@ -1,28 +1,10 @@
-/* eslint-disable @typescript-eslint/naming-convention */
-import { CreateCssVarsProviderResult } from '@mui/system';
-import { ThemeOptions, SupportedColorScheme } from './experimental_extendTheme';
-import { PaletteWithChannels } from './createPalette';
-
-export interface ThemeInput extends Omit<ThemeOptions, 'colorSchemes'> {
-  colorSchemes: Partial<
-    Record<
-      SupportedColorScheme,
-      {
-        palette: PaletteWithChannels;
-      }
-    >
-  >;
-}
-
-type MDCreateCssVarsProviderResult = CreateCssVarsProviderResult<SupportedColorScheme, ThemeInput>;
-
-declare const useColorScheme: MDCreateCssVarsProviderResult['useColorScheme'];
-declare const getInitColorSchemeScript: MDCreateCssVarsProviderResult['getInitColorSchemeScript'];
-
-/**
- * This component is an experimental Theme Provider that generates CSS variabels out of the theme tokens.
- * It should preferably be used at **the root of your component tree**.
- */
-declare const Experimental_CssVarsProvider: MDCreateCssVarsProviderResult['CssVarsProvider'];
-
-export { useColorScheme, getInitColorSchemeScript, Experimental_CssVarsProvider };
+/// <reference types="react" />
+import { SupportedColorScheme, CssVarsTheme } from './experimental_extendTheme';
+declare const Experimental_CssVarsProvider: (props: import("react").PropsWithChildren<Partial<import("packages/mui-system/src/cssVars/createCssVarsProvider").CssVarsProviderConfig<SupportedColorScheme>> & {
+    theme?: CssVarsTheme | undefined;
+    documentNode?: Document | null | undefined;
+    colorSchemeNode?: Document | HTMLElement | null | undefined;
+    colorSchemeSelector?: string | undefined;
+    storageWindow?: Window | null | undefined;
+}>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>, useColorScheme: () => import("packages/mui-system/src/cssVars/createCssVarsProvider").ColorSchemeContextValue<SupportedColorScheme>, getInitColorSchemeScript: typeof import("packages/mui-system/src/cssVars/getInitColorSchemeScript").default;
+export { useColorScheme, getInitColorSchemeScript, Experimental_CssVarsProvider };

package/styles/CssVarsProvider.js

@@ -26,6 +26,10 @@ const {
 
     return newTheme;
   },
-  shouldSkipGeneratingVar: keys => !!keys[0].match(/(typography|mixins|breakpoints|direction|transitions)/)
+  shouldSkipGeneratingVar: keys => {
+    var _keys$;
+
+    return !!keys[0].match(/(typography|mixins|breakpoints|direction|transitions)/) || keys[0] === 'palette' && !!((_keys$ = keys[1]) != null && _keys$.match(/(mode|contrastThreshold|tonalOffset)/));
+  }
 });
 export { useColorScheme, getInitColorSchemeScript, Experimental_CssVarsProvider };

package/styles/createPalette.d.ts

@@ -105,95 +105,6 @@ export interface Channels {
   contrastTextChannel: string;
 }
 
-export interface PaletteWithChannels {
-  common: CommonColors & {
-    background: string;
-    onBackground: string;
-    backgroundChannel: string;
-    onBackgroundChannel: string;
-  };
-  mode: PaletteMode;
-  contrastThreshold: number;
-  tonalOffset: PaletteTonalOffset;
-  primary: PaletteColor & Channels;
-  secondary: PaletteColor & Channels;
-  error: PaletteColor & Channels;
-  warning: PaletteColor & Channels;
-  info: PaletteColor & Channels;
-  success: PaletteColor & Channels;
-  grey: Color & { darkChannel: string };
-  text: TypeText & { primaryChannel: string; secondaryChannel: string };
-  divider: TypeDivider;
-  dividerChannel: TypeDivider;
-  action: TypeAction & { activeChannel: string; selectedChannel: string };
-  background: TypeBackground;
-  getContrastText: (background: string) => string;
-  augmentColor: (options: PaletteAugmentColorOptions) => PaletteColor;
-  // component tokens
-  AppBar: {
-    defaultBg: string;
-    darkBg: string;
-    darkColor: string;
-  };
-  Avatar: {
-    defaultBg: string;
-  };
-  Chip: {
-    defaultBorder: string;
-    defaultAvatarColor: string;
-    defaultIconColor: string;
-  };
-  FilledInput: {
-    bg: string;
-    hoverBg: string;
-    disabledBg: string;
-  };
-  LinearProgress: {
-    primaryBg: string;
-    secondaryBg: string;
-    errorBg: string;
-    infoBg: string;
-    successBg: string;
-    warningBg: string;
-  };
-  Slider: {
-    primaryTrack: string;
-    secondaryTrack: string;
-    errorTrack: string;
-    infoTrack: string;
-    successTrack: string;
-    warningTrack: string;
-  };
-  SnackbarContent: {
-    bg: string;
-  };
-  SpeedDialAction: {
-    fabHoverBg: string;
-  };
-  StepConnector: {
-    border: string;
-  };
-  StepContent: {
-    border: string;
-  };
-  Switch: {
-    defaultColor: string;
-    defaultDisabledColor: string;
-    primaryDisabledColor: string;
-    secondaryDisabledColor: string;
-    errorDisabledColor: string;
-    infoDisabledColor: string;
-    successDisabledColor: string;
-    warningDisabledColor: string;
-  };
-  TableCell: {
-    border: string;
-  };
-  Tooltip: {
-    bg: string;
-  };
-}
-
 export type PartialTypeObject = { [P in keyof TypeObject]?: Partial<TypeObject[P]> };
 
 export interface PaletteOptions {

package/styles/experimental_extendTheme.d.ts

@@ -1,12 +1,9 @@
 /* eslint-disable @typescript-eslint/naming-convention */
-import { ThemeOptions as SystemThemeOptions, Theme as SystemTheme } from '@mui/system';
 import { OverridableStringUnion } from '@mui/types';
-import { Mixins, MixinsOptions } from './createMixins';
+import { ThemeOptions, Theme } from './createTheme';
 import { Palette, PaletteOptions } from './createPalette';
-import { Typography, TypographyOptions } from './createTypography';
 import { Shadows } from './shadows';
-import { Transitions, TransitionsOptions } from './createTransitions';
-import { ZIndex, ZIndexOptions } from './zIndex';
+import { ZIndex } from './zIndex';
 import { Components } from './components';
 
 /**
@@ -35,8 +32,8 @@ export type ExtendedColorScheme = OverridableStringUnion<never, ColorSchemeOverr
 export type SupportedColorScheme = DefaultColorScheme | ExtendedColorScheme;
 
 export interface Opacity {
-  placeholder: number;
-  inputTouchBottomLine: number;
+  inputPlaceholder: number;
+  inputUnderline: number;
 }
 
 export type Overlays = [
@@ -67,45 +64,233 @@ export type Overlays = [
   string | undefined,
 ];
 
-export interface ThemeOptions extends Omit<SystemThemeOptions, 'zIndex'> {
-  mixins?: MixinsOptions;
-  components?: Components<BaseTheme>;
-  colorSchemes?: Record<
-    SupportedColorScheme,
-    {
-      palette?: PaletteOptions;
-      opacity?: Partial<Opacity>;
-      overlays?: Overlays;
-    }
-  >;
-  shadows?: Shadows;
-  transitions?: TransitionsOptions;
-  typography?: TypographyOptions | ((palette: Palette) => TypographyOptions);
-  zIndex?: ZIndexOptions;
-  unstable_strictMode?: boolean;
+export interface PaletteCommonChannel {
+  background: string;
+  backgroundChannel: string;
+  onBackground: string;
+  onBackgroundChannel: string;
+}
+
+export interface PaletteColorChannel {
+  mainChannel: string;
+  lightChannel: string;
+  darkChannel: string;
+  contrastTextChannel: string;
+}
+
+export interface PaletteActionChannel {
+  activeChannel: string;
+  selectedChannel: string;
+}
+
+export interface PaletteTextChannel {
+  primaryChannel: string;
+  secondaryChannel: string;
+}
+
+export interface PaletteAlert {
+  errorColor: string;
+  infoColor: string;
+  successColor: string;
+  warningColor: string;
+  errorFilledBg: string;
+  infoFilledBg: string;
+  successFilledBg: string;
+  warningFilledBg: string;
+  errorFilledColor: string;
+  infoFilledColor: string;
+  successFilledColor: string;
+  warningFilledColor: string;
+  errorStandardBg: string;
+  infoStandardBg: string;
+  successStandardBg: string;
+  warningStandardBg: string;
+  errorIconColor: string;
+  infoIconColor: string;
+  successIconColor: string;
+  warningIconColor: string;
+}
+
+export interface PaletteAppBar {
+  defaultBg: string;
+  darkBg: string;
+  darkColor: string;
+}
+
+export interface PaletteAvatar {
+  defaultBg: string;
+}
+
+export interface PaletteChip {
+  defaultBorder: string;
+  defaultAvatarColor: string;
+  defaultIconColor: string;
+}
+
+export interface PaletteFilledInput {
+  bg: string;
+  hoverBg: string;
+  disabledBg: string;
+}
+
+export interface PaletteLinearProgress {
+  primaryBg: string;
+  secondaryBg: string;
+  errorBg: string;
+  infoBg: string;
+  successBg: string;
+  warningBg: string;
+}
+
+export interface PaletteSkeleton {
+  bg: string;
+}
+
+export interface PaletteSlider {
+  primaryTrack: string;
+  secondaryTrack: string;
+  errorTrack: string;
+  infoTrack: string;
+  successTrack: string;
+  warningTrack: string;
+}
+
+export interface PaletteSnackbarContent {
+  bg: string;
+}
+
+export interface PaletteSpeedDialAction {
+  fabHoverBg: string;
+}
+
+export interface PaletteStepConnector {
+  border: string;
+}
+
+export interface PaletteStepContent {
+  border: string;
+}
+
+export interface PaletteSwitch {
+  defaultColor: string;
+  defaultDisabledColor: string;
+  primaryDisabledColor: string;
+  secondaryDisabledColor: string;
+  errorDisabledColor: string;
+  infoDisabledColor: string;
+  successDisabledColor: string;
+  warningDisabledColor: string;
+}
+
+export interface PaletteTableCell {
+  border: string;
+}
+
+export interface PaletteTooltip {
+  bg: string;
+}
+
+// The Palette should be sync with `../themeCssVarsAugmentation/index.d.ts`
+export interface ColorSystemOptions {
+  palette?: Omit<PaletteOptions, 'mode'> & {
+    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>;
+    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;
+}
+
+// The Palette should be sync with `../themeCssVarsAugmentation/index.d.ts`
+export interface ColorSystem {
+  palette: Palette & {
+    colorScheme: SupportedColorScheme;
+    common: PaletteCommonChannel;
+    primary: PaletteColorChannel;
+    secondary: PaletteColorChannel;
+    error: PaletteColorChannel;
+    info: PaletteColorChannel;
+    success: PaletteColorChannel;
+    text: PaletteTextChannel;
+    dividerChannel: string;
+    action: PaletteActionChannel;
+    Alert: PaletteAlert;
+    AppBar: PaletteAppBar;
+    Avatar: PaletteAvatar;
+    Chip: PaletteChip;
+    FilledInput: PaletteFilledInput;
+    LinearProgress: PaletteLinearProgress;
+    Skeleton: PaletteSkeleton;
+    Slider: PaletteSlider;
+    SnackbarContent: PaletteSnackbarContent;
+    SpeedDialAction: PaletteSpeedDialAction;
+    StepConnector: PaletteStepConnector;
+    StepContent: PaletteStepContent;
+    Switch: PaletteSwitch;
+    TableCell: PaletteTableCell;
+    Tooltip: PaletteTooltip;
+  };
+  opacity: Opacity;
+  overlays: Overlays;
+}
+
+export interface CssVarsThemeOptions extends Omit<ThemeOptions, 'palette' | 'components'> {
+  components?: Components<Omit<CssVarsTheme, 'components'>>;
+  colorSchemes?: Partial<Record<SupportedColorScheme, ColorSystemOptions>>;
 }
 
-interface BaseTheme extends SystemTheme {
-  mixins: Mixins;
-  palette: Palette;
+// should not include keys defined in `shouldSkipGeneratingVar` and have value typeof function
+interface ThemeVars {
+  palette: Omit<
+    ColorSystem['palette'],
+    | 'colorScheme'
+    | 'mode'
+    | 'contrastThreshold'
+    | 'tonalOffset'
+    | 'getContrastText'
+    | 'augmentColor'
+  >;
   opacity: Opacity;
   overlays: Overlays;
   shadows: Shadows;
-  transitions: Transitions;
-  typography: Typography;
   zIndex: ZIndex;
-  unstable_strictMode?: boolean;
-  colorSchemes: Record<string, { palette: Palette }>;
+  shape: Theme['shape'];
 }
 
-// shut off automatic exporting for the `BaseTheme` above
+// shut off automatic exporting for the `ThemeVars` above
 export {};
 
-/**
- * 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 {
-  components?: Components<BaseTheme>;
+export interface CssVarsTheme extends Omit<Theme, 'palette' | 'components'>, ColorSystem {
+  components?: Components<Omit<CssVarsTheme, 'components'>>;
+  colorSchemes: Record<SupportedColorScheme, ColorSystem>;
+  prefix: string;
+  vars: ThemeVars;
+  getCssVar: <CustomVar extends string = never>(
+    field: string | CustomVar,
+    ...vars: Array<string | CustomVar>
+  ) => string;
+  getColorSchemeSelector: (colorScheme: SupportedColorScheme) => string;
 }
 
 /**
@@ -114,4 +299,7 @@ export interface Theme extends BaseTheme {
  * @param args Deep merge the arguments with the about to be returned theme.
  * @returns A complete, ready-to-use theme object.
  */
-export default function experimental_extendTheme(options?: ThemeOptions, ...args: object[]): Theme;
+export default function experimental_extendTheme(
+  options?: CssVarsThemeOptions,
+  ...args: object[]
+): CssVarsTheme;

package/styles/experimental_extendTheme.js

@@ -57,7 +57,7 @@ export default function extendTheme(options = {}, ...args) {
         palette: lightPalette,
         opacity: _extends({
           inputPlaceholder: 0.42,
-          inputTouchBottomLine: 0.42,
+          inputUnderline: 0.42,
           switchTrackDisabled: 0.12,
           switchTrack: 0.38
         }, (_colorSchemesInput$li2 = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li2.opacity),
@@ -67,7 +67,7 @@ export default function extendTheme(options = {}, ...args) {
         palette: darkPalette,
         opacity: _extends({
           inputPlaceholder: 0.5,
-          inputTouchBottomLine: 0.7,
+          inputUnderline: 0.7,
           switchTrackDisabled: 0.2,
           switchTrack: 0.3
         }, (_colorSchemesInput$da2 = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da2.opacity),
@@ -88,9 +88,29 @@ export default function extendTheme(options = {}, ...args) {
     } // assign component variables
 
 
-    assignNode(palette, ['AppBar', 'Avatar', 'Chip', 'FilledInput', 'LinearProgress', 'Skeleton', 'Slider', 'SnackbarContent', 'SpeedDialAction', 'StepConnector', 'StepContent', 'Switch', 'TableCell', 'Tooltip']);
+    assignNode(palette, ['Alert', 'AppBar', 'Avatar', 'Chip', 'FilledInput', 'LinearProgress', 'Skeleton', 'Slider', 'SnackbarContent', 'SpeedDialAction', 'StepConnector', 'StepContent', 'Switch', 'TableCell', 'Tooltip']);
 
     if (key === 'light') {
+      setColor(palette.Alert, 'errorColor', darken(palette.error.light, 0.6));
+      setColor(palette.Alert, 'infoColor', darken(palette.info.light, 0.6));
+      setColor(palette.Alert, 'successColor', darken(palette.success.light, 0.6));
+      setColor(palette.Alert, 'warningColor', darken(palette.warning.light, 0.6));
+      setColor(palette.Alert, 'errorFilledBg', 'var(--mui-palette-error-main)');
+      setColor(palette.Alert, 'infoFilledBg', 'var(--mui-palette-info-main)');
+      setColor(palette.Alert, 'successFilledBg', 'var(--mui-palette-success-main)');
+      setColor(palette.Alert, 'warningFilledBg', 'var(--mui-palette-warning-main)');
+      setColor(palette.Alert, 'errorFilledColor', lightPalette.getContrastText(palette.error.main));
+      setColor(palette.Alert, 'infoFilledColor', lightPalette.getContrastText(palette.info.main));
+      setColor(palette.Alert, 'successFilledColor', lightPalette.getContrastText(palette.success.main));
+      setColor(palette.Alert, 'warningFilledColor', lightPalette.getContrastText(palette.warning.main));
+      setColor(palette.Alert, 'errorStandardBg', lighten(palette.error.light, 0.9));
+      setColor(palette.Alert, 'infoStandardBg', lighten(palette.info.light, 0.9));
+      setColor(palette.Alert, 'successStandardBg', lighten(palette.success.light, 0.9));
+      setColor(palette.Alert, 'warningStandardBg', lighten(palette.warning.light, 0.9));
+      setColor(palette.Alert, 'errorIconColor', 'var(--mui-palette-error-light)');
+      setColor(palette.Alert, 'infoIconColor', 'var(--mui-palette-info-light)');
+      setColor(palette.Alert, 'successIconColor', 'var(--mui-palette-success-light)');
+      setColor(palette.Alert, 'warningIconColor', 'var(--mui-palette-warning-light)');
       setColor(palette.AppBar, 'defaultBg', 'var(--mui-palette-grey-100)');
       setColor(palette.Avatar, 'defaultBg', 'var(--mui-palette-grey-400)');
       setColor(palette.Chip, 'defaultBorder', 'var(--mui-palette-grey-400)');
@@ -127,6 +147,26 @@ export default function extendTheme(options = {}, ...args) {
       setColor(palette.TableCell, 'border', lighten(alpha(palette.divider, 1), 0.88));
       setColor(palette.Tooltip, 'bg', alpha(palette.grey[700], 0.92));
     } else {
+      setColor(palette.Alert, 'errorColor', lighten(palette.error.light, 0.6));
+      setColor(palette.Alert, 'infoColor', lighten(palette.info.light, 0.6));
+      setColor(palette.Alert, 'successColor', lighten(palette.success.light, 0.6));
+      setColor(palette.Alert, 'warningColor', lighten(palette.warning.light, 0.6));
+      setColor(palette.Alert, 'errorFilledBg', 'var(--mui-palette-error-dark)');
+      setColor(palette.Alert, 'infoFilledBg', 'var(--mui-palette-info-dark)');
+      setColor(palette.Alert, 'successFilledBg', 'var(--mui-palette-success-dark)');
+      setColor(palette.Alert, 'warningFilledBg', 'var(--mui-palette-warning-dark)');
+      setColor(palette.Alert, 'errorFilledColor', darkPalette.getContrastText(palette.error.dark));
+      setColor(palette.Alert, 'infoFilledColor', darkPalette.getContrastText(palette.info.dark));
+      setColor(palette.Alert, 'successFilledColor', darkPalette.getContrastText(palette.success.dark));
+      setColor(palette.Alert, 'warningFilledColor', darkPalette.getContrastText(palette.warning.dark));
+      setColor(palette.Alert, 'errorStandardBg', darken(palette.error.light, 0.9));
+      setColor(palette.Alert, 'infoStandardBg', darken(palette.info.light, 0.9));
+      setColor(palette.Alert, 'successStandardBg', darken(palette.success.light, 0.9));
+      setColor(palette.Alert, 'warningStandardBg', darken(palette.warning.light, 0.9));
+      setColor(palette.Alert, 'errorIconColor', 'var(--mui-palette-error-main)');
+      setColor(palette.Alert, 'infoIconColor', 'var(--mui-palette-info-main)');
+      setColor(palette.Alert, 'successIconColor', 'var(--mui-palette-success-main)');
+      setColor(palette.Alert, 'warningIconColor', 'var(--mui-palette-warning-main)');
       setColor(palette.AppBar, 'defaultBg', 'var(--mui-palette-grey-900)');
       setColor(palette.AppBar, 'darkBg', 'var(--mui-palette-background-paper)'); // specific for dark mode
 

package/styles/index.d.ts

@@ -94,4 +94,27 @@ export { default as withTheme } from './withTheme';
 export * from './CssVarsProvider';
 
 export { default as experimental_extendTheme } from './experimental_extendTheme';
-export * from './experimental_extendTheme';
+export type {
+  ColorSchemeOverrides,
+  SupportedColorScheme,
+  Opacity,
+  Overlays,
+  PaletteActionChannel,
+  PaletteAppBar,
+  PaletteAvatar,
+  PaletteChip,
+  PaletteColorChannel,
+  PaletteCommonChannel,
+  PaletteFilledInput,
+  PaletteLinearProgress,
+  PaletteSlider,
+  PaletteSnackbarContent,
+  PaletteStepConnector,
+  PaletteStepContent,
+  PaletteSwitch,
+  PaletteTableCell,
+  PaletteTextChannel,
+  PaletteTooltip,
+  CssVarsThemeOptions,
+  CssVarsTheme,
+} from './experimental_extendTheme';

package/themeCssVarsAugmentation/index.d.ts

@@ -0,0 +1,61 @@
+import type {
+  CssVarsTheme,
+  ColorSystem,
+  PaletteCommonChannel,
+  PaletteColorChannel,
+  PaletteTextChannel,
+  PaletteActionChannel,
+  PaletteAppBar,
+  PaletteAvatar,
+  PaletteChip,
+  PaletteFilledInput,
+  PaletteLinearProgress,
+  PaletteSlider,
+  PaletteSnackbarContent,
+  PaletteStepConnector,
+  PaletteStepContent,
+  PaletteSwitch,
+  PaletteTableCell,
+  PaletteTooltip,
+} from '../styles/experimental_extendTheme';
+
+/**
+ * Enhance the theme types to include new properties from the CssVarsProvider.
+ * The theme is typed with CSS variables in `styled`, `sx`, `useTheme`, etc.
+ */
+declare module '@mui/material/styles' {
+  // The palette must be extended in each node.
+  interface Theme extends Omit<ColorSystem, 'palette'> {
+    prefix: string;
+    vars: CssVarsTheme['vars'];
+    getCssVar: CssVarsTheme['getCssVar'];
+    getColorSchemeSelector: CssVarsTheme['getColorSchemeSelector'];
+  }
+
+  // The extended Palette should be in sync with `extendTheme`
+  interface Palette {
+    dividerChannel: string;
+    AppBar: PaletteAppBar;
+    Avatar: PaletteAvatar;
+    Chip: PaletteChip;
+    FilledInput: PaletteFilledInput;
+    LinearProgress: PaletteLinearProgress;
+    Slider: PaletteSlider;
+    SnackbarContent: PaletteSnackbarContent;
+    StepConnector: PaletteStepConnector;
+    StepContent: PaletteStepContent;
+    Switch: PaletteSwitch;
+    TableCell: PaletteTableCell;
+    Tooltip: PaletteTooltip;
+  }
+}
+
+declare module '@mui/material/styles/createPalette' {
+  interface CommonColors extends PaletteCommonChannel {}
+
+  interface PaletteColor extends PaletteColorChannel {}
+
+  interface TypeText extends PaletteTextChannel {}
+
+  interface TypeAction extends PaletteActionChannel {}
+}

package/transitions/index.d.ts

@@ -1 +1 @@
-export * from './transition';
+export * from './transition';

package/transitions/transition.d.ts

@@ -1,13 +1,13 @@
-import { TransitionProps as _TransitionProps, TransitionActions } from 'react-transition-group/Transition';
-import * as React from 'react';
-export declare type TransitionHandlerKeys = 'onEnter' | 'onEntering' | 'onEntered' | 'onExit' | 'onExiting' | 'onExited';
-export declare type TransitionHandlerProps = Pick<_TransitionProps, TransitionHandlerKeys>;
-export interface EasingProps {
-    easing: string | {
-        enter?: string;
-        exit?: string;
-    };
-}
-export declare type TransitionKeys = 'in' | 'mountOnEnter' | 'unmountOnExit' | 'timeout' | 'easing' | 'addEndListener' | TransitionHandlerKeys;
-export interface TransitionProps extends TransitionActions, Partial<Pick<_TransitionProps & EasingProps, TransitionKeys>>, React.HTMLAttributes<HTMLElement> {
-}
+import { TransitionProps as _TransitionProps, TransitionActions } from 'react-transition-group/Transition';
+import * as React from 'react';
+export declare type TransitionHandlerKeys = 'onEnter' | 'onEntering' | 'onEntered' | 'onExit' | 'onExiting' | 'onExited';
+export declare type TransitionHandlerProps = Pick<_TransitionProps, TransitionHandlerKeys>;
+export interface EasingProps {
+    easing: string | {
+        enter?: string;
+        exit?: string;
+    };
+}
+export declare type TransitionKeys = 'in' | 'mountOnEnter' | 'unmountOnExit' | 'timeout' | 'easing' | 'addEndListener' | TransitionHandlerKeys;
+export interface TransitionProps extends TransitionActions, Partial<Pick<_TransitionProps & EasingProps, TransitionKeys>>, React.HTMLAttributes<HTMLElement> {
+}