@mui/system 5.4.1 → 5.4.4

package/Box/Box.d.ts

@@ -15,7 +15,7 @@ export type PropsFor<SomeStyleFunction> = SomeStyleFunction extends StyleFunctio
 export type StyleFunction<Props> = (props: Props) => any;
 export type SimpleStyleFunction<PropKey extends keyof any> = StyleFunction<
   Partial<Record<PropKey, any>>
->;
+> & { filterProps: string[] };
 
 // borders.js
 export const borders: SimpleStyleFunction<

package/Box/Box.spec.d.ts

@@ -1 +1 @@
-export {};
+export {};

package/CHANGELOG.md

@@ -1,5 +1,182 @@
 # [Versions](https://mui.com/versions/)
 
+## 5.4.4
+
+<!-- generated comparing v5.4.3..master -->
+
+_Feb 28, 2022_
+
+A big thanks to the 17 contributors who made this release possible. Here are some highlights ✨:
+
+- ✨ New `Input` and `Sheet` components were added in the experimental Joy design system by @hbjORbj (#31124, #31086) @hbjORbj
+- Several 🐛 bug fixes and 📚 documentation improvements
+
+### `@mui/material@5.4.4`
+
+- &#8203;<!-- 28 -->[Autocomplete] Have Autocomplete with multiline textfield log a warning instead of an error (#30680) @iclaude3
+- &#8203;<!-- 27 -->[Chip] Fix ellipsis when the children is too long (#31087) @PunitSoniME
+- &#8203;<!-- 14 -->[Input] Export InputBase's classes from the classes const (#31186) @mnajdova
+- &#8203;<!-- 29 -->[TextField] Fix Horizontal scroll when label too long (#31187) @RedHeadphone
+- &#8203;<!-- 08 -->[styles] Fix typo in import error (#31167) @davwheat
+
+### `@mui/system@5.4.4`
+
+- &#8203;<!-- 07 -->[system] Fix executing server-side Emotion component as function interpolation 2 (#31024) @Andarist
+- &#8203;<!-- 06 -->[system] Fix sx prop types when CSS variables are used with nested selectors (#31163) @mnajdova
+- &#8203;<!-- 05 -->[system] Fix `CssVarsProvider` theme mutation (#31148) @siriwatknp
+
+### `@mui/codemod@5.4.4`
+
+- &#8203;<!-- 26 -->[codemods] Add v5.0.0/top-level-imports codemod (#31195) @greengiraffe
+
+### `@mui/base@5.0.0-alpha.70`
+
+- &#8203;<!-- 31 -->[SelectUnstyled, MultiSelectUnstyled, ButtonUnstyled] Export additional types to make customization easier (#31172) @michaldudak
+
+### `@mui/joy@5.0.0-alpha.17`
+
+- &#8203;<!-- 13 -->[Joy] Add nested list components (#31159) @siriwatknp
+- &#8203;<!-- 12 -->[Joy] Improve color customization on `Switch` (#31137) @siriwatknp
+- &#8203;<!-- 11 -->[Joy] Add `Sheet` component (#31124) @hbjORbj
+- &#8203;<!-- 10 -->[Joy] add `Input` component (#31086) @siriwatknp
+- &#8203;<!-- 09 -->[Joy] Fix Button missing slot type (#31166) @siriwatknp
+
+### Docs
+
+- &#8203;<!-- 22 -->[docs] Fix 404 link to the blog (#31234) @oliviertassinari
+- &#8203;<!-- 21 -->[docs] Use `material-ui` for product name (#31200) @siriwatknp
+- &#8203;<!-- 20 -->[docs] Add Base installation page (#30969) @siriwatknp
+- &#8203;<!-- 19 -->[docs] Use new Algolia app for new structure (#31178) @siriwatknp
+- &#8203;<!-- 18 -->[docs] Typo in the `FormControl` API documentation (#31169) @bonellia
+- &#8203;<!-- 17 -->[docs] Fix typo in Stack documentation (#31176) @adriancampos
+- &#8203;<!-- 16 -->[docs] Update interoperability.md broken tailwind links (#31182) @robertwt7
+- &#8203;<!-- 15 -->[docs] Add missing import into tss-react migration guide (#31162) @sviande
+- &#8203;<!-- 03 -->[website] The role is filled (#31216) @oliviertassinari
+- &#8203;<!-- 02 -->[website] Revise the row grouping blog post (#31101) @samuelsycamore
+- &#8203;<!-- 01 -->[website] Fix a few SEO issues (#31150) @oliviertassinari
+
+### Core
+
+- &#8203;<!-- 30 -->[core] Add group for the @fortawesome dependencies (#31193) @mnajdova
+- &#8203;<!-- 25 -->[core] Update playwright docker to match the specified version (#31236) @siriwatknp
+- &#8203;<!-- 24 -->[core] Remove parallel on buildTypes (#31189) @siriwatknp
+- &#8203;<!-- 23 -->[core] Fix propTypes generation for optional any props (#31141) @m4theushw
+- &#8203;<!-- 04 -->[Typescript] Remove variants deprecation (#31239) @siriwatknp
+
+All contributors of this release in alphabetical order: @adriancampos, @Andarist, @bonellia, @davwheat, @greengiraffe, @hbjORbj, @iclaude3, @m4theushw, @michaldudak, @mnajdova, @oliviertassinari, @PunitSoniME, @RedHeadphone, @robertwt7, @samuelsycamore, @siriwatknp, @sviande
+
+## 5.4.3
+
+<!-- generated comparing v5.4.2..master -->
+
+_Feb 21, 2022_
+
+A big thanks to the 14 contributors who made this release possible. Here are some highlights ✨:
+
+- 🛠 @hbjORbj made components use theme duration/easing values by default (#30894)
+- A meaningful number of 🐛 bug fixes and 📚 documentation improvements
+
+### `@mui/material@5.4.3`
+
+- &#8203;<!-- 18 -->[ButtonBase] Fix typo (#31135) @Jastor11
+- &#8203;<!-- 05 -->[Stepper] Export useStepContext (#31021) @michaldudak
+- &#8203;<!-- 04 -->[Transitions] Some components do not use transition duration/easing values from theme (#30894) @hbjORbj
+
+### `@mui/icons-material@5.4.3`
+
+- &#8203;<!-- 11 -->[icons] Add "circle" icon synonyms (#31118) @gnowland
+
+### `@mui/joy@5.0.0-alpha.16`
+
+- &#8203;<!-- 10 -->[Joy] `List` second iteration (#31134) @siriwatknp
+- &#8203;<!-- 09 -->[Joy] Fix typings (#31120) @siriwatknp
+- &#8203;<!-- 08 -->[Joy] Add initial `List` components (#30987) @siriwatknp
+
+### Docs
+
+- &#8203;<!-- 19 -->[website] Improve full-stack role job description (#31160) @Janpot
+- &#8203;<!-- 14 -->[docs] Fix typo of migration guides v4 (#31136) @pppp606
+- &#8203;<!-- 13 -->[docs] Update on the support page to account for v4 LTS support (#31029) @danilo-leal
+- &#8203;<!-- 12 -->[docs] Fix small typo in chips.md (#31092) @cameliaben
+- &#8203;<!-- 07 -->[l10n] Add it-IT translation for labelDisplayedRows (#31131) @frab90
+- &#8203;<!-- 06 -->[l10n] Add pl-PL translation for labelDisplayedRows (#31088) @ThomasTheHuman
+- &#8203;<!-- 03 -->[website] Sync MUI X table feature (#30913) @alexfauquette
+- &#8203;<!-- 02 -->[website] Prefill source in job application links (#31036) @oliviertassinari
+- &#8203;<!-- 01 -->[website] Fix a grammar mistake (#31099) @huyenltnguyen
+
+### Core
+
+- &#8203;<!-- 17 -->[core] Add jsx, html, css and prisma to prettier extensions (#31161) @Janpot
+- &#8203;<!-- 16 -->[core] Allow to run material-ui.com/store alongside mui.com/store (#31065) @oliviertassinari
+- &#8203;<!-- 15 -->[core] Polish design tokens (#31095) @oliviertassinari
+
+All contributors of this release in alphabetical order: @alexfauquette, @cameliaben, @danilo-leal, @frab90, @gnowland, @hbjORbj, @huyenltnguyen, @Janpot, @Jastor11, @michaldudak, @oliviertassinari, @pppp606, @siriwatknp, @ThomasTheHuman
+
+## 5.4.2
+
+_Feb 15, 2022_
+
+A big thanks to the 16 contributors who made this release possible. Here are some highlights ✨:
+
+- 🛠 @sydneyjodon-wk improved propTypes of the ToggleButton components (#30883)
+- Several 🐛 bug fixes and 📚 documentation improvements
+
+### `@mui/material@5.4.2`
+
+- [Select] Allow customizing Select based on its variant (#30788) @michaldudak
+- [Portal] Re-export 'Portal' in material (#31003) @liradb2000
+- [ToggleButton] Add prop types for `onClick` and `onChange` (#30883) @sydneyjodon-wk
+- [Typescript] Added TypeText declaration to the exports file (#30890) @agauravdev
+
+### `@mui/system@5.4.2`
+
+- [system] Fix broken behavior when breakpoints input are not ordered (#30996) @mnajdova
+
+### `@mui/lab@5.0.0-alpha.69`
+
+- [DatePicker] Fix passing clearable prop (#30786) @alisasanib
+
+### `@mui/joy@5.0.0-alpha.15`
+
+- [Joy] Improve variant customization experience (#30878) @siriwatknp
+- [Joy] Make `sx` prop work in Joy (#30955) @siriwatknp
+
+### Framer
+
+- [design] Remove framer components (#30983) @mbrookes
+- [design] Remove framer leftovers (#31070) @michaldudak
+
+### Docs
+
+- [docs] Update installation guide of the icons package (#31026) @huyenltnguyen
+- [docs] Improve the indication for the legacy APIs (#30995) @mnajdova
+- [docs] Specify which props are added in the default `shouldForwardProp` option (#30978) @mnajdova
+- [docs] Fix layout shift on loading (#31017) @oliviertassinari
+- [docs] Increase scroll affordance in wide tables (#30713) @danilo-leal
+- [docs] Fix look & feel of the Masonry demos (#30971) @oliviertassinari
+- [docs] Improve Base component demos (#30884) @danilo-leal
+- [docs] Use full product names (Material UI, MUI System) (#30960) @oliviertassinari
+- [docs] Prefer useEnhancedEffect to avoid server side warnings (#30977) @mnajdova
+- [docs] Fix force redirection to a different locale (#30967) @oliviertassinari
+- [docs] Add live Tailwind CSS demo (#30966) @oliviertassinari
+- [website] Add banner for promoting priority open roles (#31076) @danilo-leal
+- [website] Open Full-stack Engineer role for studio (#31038) @newguy-123
+- [website] Minor security improvements (#31062) @oliviertassinari
+- [website] Improve title of open roles (#30963) @DanailH
+- [website] Add BIMI avatar (#30444) @oliviertassinari
+- [website] Add Sycamore to About page (#31000) @samuelsycamore
+
+### Core
+
+- [benchmark] Add missing dependency (#30994) @michaldudak
+- [core] Bump date-io version (#31016) @michaldudak
+- [core] Fix typo in useSlider (#31061) @ryohey
+- [core] Remove unused draft-js types package (#30993) @michaldudak
+- [test] Test if certain Base members are exported from Material UI (#31067) @michaldudak
+- [core] Remove dead code (#31064) @oliviertassinari
+
+All contributors of this release in alphabetical order: @agauravdev, @alisasanib, @DanailH, @danilo-leal, @huyenltnguyen, @l10nbot, @liradb2000, @mbrookes, @michaldudak, @mnajdova, @newguy-123, @oliviertassinari, @ryohey, @samuelsycamore, @siriwatknp, @sydneyjodon-wk
+
 ## 5.4.1
 
 <!-- generated comparing v5.4.0..master -->

package/createBox.d.ts

@@ -1,7 +1,9 @@
 import Box from './Box';
+import styleFunctionSx from './styleFunctionSx';
 
 export default function createBox(options?: {
   defaultTheme: object;
   defaultClassName?: string;
   generateClassName?: (componentName: string) => string;
+  styleFunctionSx?: typeof styleFunctionSx;
 }): typeof Box;

package/createBox.js

@@ -35,9 +35,10 @@ function createBox(options = {}) {
   const {
     defaultTheme,
     defaultClassName = 'MuiBox-root',
-    generateClassName
+    generateClassName,
+    styleFunctionSx = _styleFunctionSx.default
   } = options;
-  const BoxRoot = (0, _styledEngine.default)('div')(_styleFunctionSx.default);
+  const BoxRoot = (0, _styledEngine.default)('div')(styleFunctionSx);
   const Box = /*#__PURE__*/React.forwardRef(function Box(inProps, ref) {
     const theme = (0, _useTheme.default)(defaultTheme);
 

package/createBox.spec.d.ts

@@ -1 +1 @@
-export {};
+export {};

package/createStyled.d.ts

@@ -3,7 +3,7 @@ import {
   CreateMUIStyled as CreateMUIStyledStyledEngine,
   CSSInterpolation,
 } from '@mui/styled-engine';
-import { SxProps } from './styleFunctionSx';
+import styleFunctionSx, { SxProps } from './styleFunctionSx';
 import { Theme as DefaultTheme } from './createTheme';
 
 export function shouldForwardProp(propName: PropertyKey): boolean;
@@ -34,4 +34,5 @@ export default function createStyled<T extends object = DefaultTheme>(options?:
   defaultTheme?: T;
   rootShouldForwardProp?: (prop: PropertyKey) => boolean;
   slotShouldForwardProp?: (prop: PropertyKey) => boolean;
+  styleFunctionSx?: typeof styleFunctionSx;
 }): CreateMUIStyled<T>;

package/createStyled.js

@@ -19,10 +19,10 @@ var _utils = require("@mui/utils");
 
 var _createTheme = _interopRequireDefault(require("./createTheme"));
 
-var _styleFunctionSx = _interopRequireDefault(require("./styleFunctionSx"));
-
 var _propsToClassKey = _interopRequireDefault(require("./propsToClassKey"));
 
+var _styleFunctionSx = _interopRequireDefault(require("./styleFunctionSx"));
+
 const _excluded = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"],
       _excluded2 = ["theme"],
       _excluded3 = ["theme"];
@@ -79,7 +79,8 @@ const variantsResolver = (props, styles, theme, name) => {
   }
 
   return variantsStyles;
-};
+}; // Update /system/styled/#api in case if this changes
+
 
 function shouldForwardProp(prop) {
   return prop !== 'ownerState' && prop !== 'theme' && prop !== 'sx' && prop !== 'as';
@@ -96,7 +97,8 @@ function createStyled(input = {}) {
   const {
     defaultTheme = systemDefaultTheme,
     rootShouldForwardProp = shouldForwardProp,
-    slotShouldForwardProp = shouldForwardProp
+    slotShouldForwardProp = shouldForwardProp,
+    styleFunctionSx = _styleFunctionSx.default
   } = input;
   return (tag, inputOptions = {}) => {
     const {
@@ -177,7 +179,7 @@ function createStyled(input = {}) {
       if (!skipSx) {
         expressionsWithDefaultTheme.push(props => {
           const theme = isEmpty(props.theme) ? defaultTheme : props.theme;
-          return (0, _styleFunctionSx.default)((0, _extends2.default)({}, props, {
+          return styleFunctionSx((0, _extends2.default)({}, props, {
             theme
           }));
         });
@@ -190,7 +192,11 @@ function createStyled(input = {}) {
 
         transformedStyleArg = [...styleArg, ...placeholders];
         transformedStyleArg.raw = [...styleArg.raw, ...placeholders];
-      } else if (typeof styleArg === 'function') {
+      } else if (typeof styleArg === 'function' && // On the server emotion doesn't use React.forwardRef for creating components, so the created
+      // component stays as a function. This condition makes sure that we do not interpolate functions
+      // which are basically components used as a selectors.
+      // eslint-disable-next-line no-underscore-dangle
+      styleArg.__emotion_real !== styleArg) {
         // If the type is function, we need to define the default theme.
         transformedStyleArg = _ref2 => {
           let {

package/createTheme/createBreakpoints.js

@@ -8,17 +8,31 @@ Object.defineProperty(exports, "__esModule", {
 exports.breakpointKeys = void 0;
 exports.default = createBreakpoints;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 const _excluded = ["values", "unit", "step"];
 // Sorted ASC by size. That's important.
 // It can't be configured as it's used statically for propTypes.
-const breakpointKeys = ['xs', 'sm', 'md', 'lg', 'xl']; // Keep in mind that @media is inclusive by the CSS specification.
-
+const breakpointKeys = ['xs', 'sm', 'md', 'lg', 'xl'];
 exports.breakpointKeys = breakpointKeys;
 
+const sortBreakpointsValues = values => {
+  const breakpointsAsArray = Object.keys(values).map(key => ({
+    key,
+    val: values[key]
+  })) || []; // Sort in ascending order
+
+  breakpointsAsArray.sort((breakpoint1, breakpoint2) => breakpoint1.val - breakpoint2.val);
+  return breakpointsAsArray.reduce((acc, obj) => {
+    return (0, _extends2.default)({}, acc, {
+      [obj.key]: obj.val
+    });
+  }, {});
+}; // Keep in mind that @media is inclusive by the CSS specification.
+
+
 function createBreakpoints(breakpoints) {
   const {
     // The breakpoint **start** at this value.
@@ -39,7 +53,8 @@ function createBreakpoints(breakpoints) {
     step = 5
   } = breakpoints,
         other = (0, _objectWithoutPropertiesLoose2.default)(breakpoints, _excluded);
-  const keys = Object.keys(values);
+  const sortedValues = sortBreakpointsValues(values);
+  const keys = Object.keys(sortedValues);
 
   function up(key) {
     const value = typeof values[key] === 'number' ? values[key] : key;
@@ -81,7 +96,7 @@ function createBreakpoints(breakpoints) {
 
   return (0, _extends2.default)({
     keys,
-    values,
+    values: sortedValues,
     up,
     down,
     between,

package/createTheme/createSpacing.d.ts

@@ -1,10 +1,10 @@
-export declare type SpacingOptions = number | Spacing | ((abs: number) => number | string) | ((abs: number | string) => number | string) | ReadonlyArray<string | number>;
-export declare type SpacingArgument = number | string;
-export interface Spacing {
-    (): string;
-    (value: number): string;
-    (topBottom: SpacingArgument, rightLeft: SpacingArgument): string;
-    (top: SpacingArgument, rightLeft: SpacingArgument, bottom: SpacingArgument): string;
-    (top: SpacingArgument, right: SpacingArgument, bottom: SpacingArgument, left: SpacingArgument): string;
-}
-export default function createSpacing(spacingInput?: SpacingOptions): Spacing;
+export declare type SpacingOptions = number | Spacing | ((abs: number) => number | string) | ((abs: number | string) => number | string) | ReadonlyArray<string | number>;
+export declare type SpacingArgument = number | string;
+export interface Spacing {
+    (): string;
+    (value: number): string;
+    (topBottom: SpacingArgument, rightLeft: SpacingArgument): string;
+    (top: SpacingArgument, rightLeft: SpacingArgument, bottom: SpacingArgument): string;
+    (top: SpacingArgument, right: SpacingArgument, bottom: SpacingArgument, left: SpacingArgument): string;
+}
+export default function createSpacing(spacingInput?: SpacingOptions): Spacing;

package/cssVars/createCssVarsProvider.d.ts

@@ -2,73 +2,18 @@ import * as React from 'react';
 import getInitColorSchemeScript from './getInitColorSchemeScript';
 import { Mode, Result } from './useCurrentColorScheme';
 
-export type BuildCssVarsTheme<ThemeInput> = ThemeInput extends {
-  colorSchemes: Record<string, infer ColorSystems>;
-}
-  ? Omit<ThemeInput, 'colorSchemes'> &
-      ColorSystems & { vars: Omit<ThemeInput, 'colorSchemes'> & ColorSystems }
-  : never;
-
-/**
- * DesignSystemColorScheme: is what a design system provide by default. Mostly, `light` and `dark`
- * ApplicationColorScheme: is what developer can extend from a design system. Ex, `comfort` `trueDark` ...any name that they want
- *
- * This type enhance customization experience by checking if developer has extended the colorScheme or not (usually via module augmentation)
- * If yes, they must provide the palette of the extended colorScheme. Otherwise `theme` is optional.
- */
-type DecideTheme<
-  DesignSystemTheme extends { colorSchemes: Record<DesignSystemColorScheme, any> },
-  DesignSystemColorScheme extends string,
-  ApplicationTheme extends { colorSchemes: Record<ApplicationColorScheme, any> },
-  ApplicationColorScheme extends string | never,
-> = [ApplicationColorScheme] extends [never]
-  ? {
-      theme?: Omit<DesignSystemTheme, 'colorSchemes'> & {
-        colorSchemes?: Partial<
-          Record<
-            DesignSystemColorScheme,
-            DesignSystemTheme['colorSchemes'][DesignSystemColorScheme]
-          >
-        >;
-      };
-    }
-  : {
-      theme: Omit<ApplicationTheme, 'colorSchemes'> & {
-        colorSchemes: Partial<
-          Record<
-            DesignSystemColorScheme,
-            DesignSystemTheme['colorSchemes'][DesignSystemColorScheme]
-          >
-        > &
-          Record<ApplicationColorScheme, ApplicationTheme['colorSchemes'][ApplicationColorScheme]>;
-      };
-    };
-
 export interface ColorSchemeContextValue<SupportedColorScheme extends string>
   extends Result<SupportedColorScheme> {
   allColorSchemes: SupportedColorScheme[];
 }
 
-export default function createCssVarsProvider<
-  DesignSystemThemeInput extends {
-    colorSchemes: Record<DesignSystemColorScheme, any>;
-  },
-  DesignSystemColorScheme extends string,
-  ApplicationThemeInput extends {
-    colorSchemes: Record<ApplicationColorScheme, any>;
-  } = never,
-  ApplicationColorScheme extends string = never,
->(options: {
+export interface CssVarsProviderConfig<ColorScheme extends string> {
   /**
-   * Design system default theme
+   * Design system default color scheme.
+   * - provides string if the design system has one default color scheme (either light or dark)
+   * - provides object if the design system has default light & dark color schemes
    */
-  theme: DesignSystemThemeInput;
-  /**
-   * Design system default color scheme
-   */
-  defaultColorScheme:
-    | DesignSystemColorScheme
-    | { light: DesignSystemColorScheme; dark: DesignSystemColorScheme };
+  defaultColorScheme: ColorScheme | { light: ColorScheme; dark: ColorScheme };
   /**
    * Design system default mode
    * @default 'light'
@@ -89,32 +34,60 @@ export default function createCssVarsProvider<
    * @default ''
    */
   prefix?: string;
-  /**
-   * A function to determine if the key, value should be attached as CSS Variable
-   * `keys` is an array that represents the object path keys.
-   *  Ex, if the theme is { foo: { bar: 'var(--test)' } }
-   *  then, keys = ['foo', 'bar']
-   *        value = 'var(--test)'
-   */
-  shouldSkipGeneratingVar?: (keys: string[], value: string | number) => boolean;
-}): {
+}
+
+export default function createCssVarsProvider<
+  ColorScheme extends string,
+  ThemeInput extends { colorSchemes?: Partial<Record<ColorScheme, any>> },
+>(
+  options: CssVarsProviderConfig<ColorScheme> & {
+    /**
+     * Design system default theme
+     *
+     * The structure inside `theme.colorSchemes[colorScheme]` should be exactly the same in all color schemes because
+     * those object of the color scheme will be used when the color scheme is active.
+     *
+     *  {
+     *    colorSchemes: {
+     *      light: { ...lightColorSchemeValues },
+     *      dark: { ...darkColorSchemeValues }
+     *    }
+     *  }
+     *
+     *  If colorScheme is 'light', the `lightColorSchemeValues` will be merged to theme as `{ ...theme, ...lightColorSchemeValues }`
+     *  likewise, if colorScheme is 'dark', the `darkColorSchemeValues` will be merged to theme as `{ ...theme, ...darkColorSchemeValues }`
+     *
+     *  !!! Don't provided the same keys as in colorSchemes to theme because they will be replaced internally when the selected colorScheme is calculated.
+     *  Ex. {
+     *    colorSchemes: {
+     *      light: { palette: { ... } },
+     *      dark: { palette: { ... } }
+     *    },
+     *    palette: { ... }, // This values will be replaced by the `palette` from the light | dark color scheme at runtime.
+     *  }
+     */
+    theme: any;
+    /**
+     * A function to determine if the key, value should be attached as CSS Variable
+     * `keys` is an array that represents the object path keys.
+     *  Ex, if the theme is { foo: { bar: 'var(--test)' } }
+     *  then, keys = ['foo', 'bar']
+     *        value = 'var(--test)'
+     */
+    shouldSkipGeneratingVar?: (keys: string[], value: string | number) => boolean;
+    /**
+     * A function to be called after the CSS variables are attached. The result of this function will be the final theme pass to ThemeProvider.
+     *
+     * 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.
+  },
+): {
   CssVarsProvider: (
     props: React.PropsWithChildren<
-      {
-        /**
-         * Application default mode (overrides design system `defaultMode` if specified)
-         */
-        defaultMode?: Mode;
-        /**
-         * Application default colorScheme (overrides design system `defaultColorScheme` if specified)
-         */
-        defaultColorScheme?:
-          | DesignSystemColorScheme
-          | ApplicationColorScheme
-          | {
-              light: DesignSystemColorScheme | ApplicationColorScheme;
-              dark: DesignSystemColorScheme | ApplicationColorScheme;
-            };
+      Partial<CssVarsProviderConfig<ColorScheme>> & {
+        theme?: ThemeInput;
         /**
          * localStorage key used to store application `mode`
          * @default 'mui-mode'
@@ -125,19 +98,10 @@ export default function createCssVarsProvider<
          * @default 'data-mui-color-scheme'
          */
         attribute?: string;
-        /**
-         * CSS variable prefix (overrides design system `prefix` if specified)
-         */
-        prefix?: string;
-      } & DecideTheme<
-        DesignSystemThemeInput,
-        DesignSystemColorScheme,
-        ApplicationThemeInput,
-        ApplicationColorScheme
-      >
+      }
     >,
   ) => React.ReactElement;
-  useColorScheme: () => ColorSchemeContextValue<DesignSystemColorScheme | ApplicationColorScheme>;
+  useColorScheme: () => ColorSchemeContextValue<ColorScheme>;
   getInitColorSchemeScript: typeof getInitColorSchemeScript;
 };