@mui/system 5.3.0 → 5.4.3

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
           }));
         });

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,16 @@ 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: {
-  /**
-   * Design system default theme
-   */
-  theme: DesignSystemThemeInput;
+export interface CssVarsProviderConfig<ColorScheme extends string> {
   /**
    * 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 +32,38 @@ 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
+     */
+    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 +74,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;
 };
 

package/cssVars/createCssVarsProvider.js

@@ -57,7 +57,8 @@ function createCssVarsProvider(options) {
     disableTransitionOnChange = false,
     enableColorScheme = true,
     prefix: designSystemPrefix = '',
-    shouldSkipGeneratingVar
+    shouldSkipGeneratingVar,
+    resolveTheme
   } = options;
   const systemSpacing = (0, _createSpacing.default)(baseTheme.spacing);
   const systemBreakpoints = (0, _createBreakpoints.default)((_baseTheme$breakpoint = baseTheme.breakpoints) != null ? _baseTheme$breakpoint : {});
@@ -151,6 +152,7 @@ function createCssVarsProvider(options) {
     mergedTheme = (0, _extends2.default)({}, mergedTheme, colorSchemes[resolvedColorScheme], {
       components,
       colorSchemes,
+      prefix,
       vars: rootVars,
       spacing: themeProp.spacing ? (0, _createSpacing.default)(themeProp.spacing) : systemSpacing,
       breakpoints: themeProp.breakpoints ? (0, _createBreakpoints.default)(themeProp.breakpoints) : systemBreakpoints,
@@ -252,7 +254,7 @@ function createCssVarsProvider(options) {
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledEngine.GlobalStyles, {
         styles: styleSheet
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ThemeProvider.default, {
-        theme: mergedTheme,
+        theme: resolveTheme ? resolveTheme(mergedTheme) : mergedTheme,
         children: children
       })]
     });

package/cssVars/createCssVarsProvider.spec.d.ts

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

package/cssVars/createGetCssVar.d.ts

@@ -1,5 +1,5 @@
-/**
- * The benefit of this function is to help developers get CSS var from theme without specifying the whole variable
- * and they does not need to remember the prefix (defined once).
- */
-export default function createGetCssVar<T extends string = string>(prefix?: string): <AdditionalVars extends string = never>(field: T | AdditionalVars, ...vars: (T | AdditionalVars)[]) => string;
+/**
+ * The benefit of this function is to help developers get CSS var from theme without specifying the whole variable
+ * and they does not need to remember the prefix (defined once).
+ */
+export default function createGetCssVar<T extends string = string>(prefix?: string): <AdditionalVars extends string = never>(field: T | AdditionalVars, ...vars: (T | AdditionalVars)[]) => string;

package/cssVars/createGetCssVar.js

@@ -15,7 +15,13 @@ function createGetCssVar(prefix = '') {
       return '';
     }
 
-    return `, var(--${prefix ? `${prefix}-` : ''}${vars[0]}${appendVar(...vars.slice(1))})`;
+    const value = vars[0];
+
+    if (typeof value === 'string' && !value.match(/(#|\(|\)|(-?(\d*\.)?\d+)(px|em|%|ex|ch|rem|vw|vh|vmin|vmax|cm|mm|in|pt|pc))/)) {
+      return `, var(--${prefix ? `${prefix}-` : ''}${value}${appendVar(...vars.slice(1))})`;
+    }
+
+    return `, ${value}`;
   } // AdditionalVars makes `getCssVar` less strict, so it can be use like this `getCssVar('non-mui-variable')` without type error.
 
 

package/cssVars/cssVarsParser.d.ts

@@ -1,68 +1,68 @@
-declare type NestedRecord<V = any> = {
-    [k: string | number]: NestedRecord<V> | V;
-};
-/**
- * This function create an object from keys, value and then assign to target
- *
- * @param {Object} obj : the target object to be assigned
- * @param {string[]} keys
- * @param {string | number} value
- *
- * @example
- * const source = {}
- * assignNestedKeys(source, ['palette', 'primary'], 'var(--palette-primary)')
- * console.log(source) // { palette: { primary: 'var(--palette-primary)' } }
- *
- * @example
- * const source = { palette: { primary: 'var(--palette-primary)' } }
- * assignNestedKeys(source, ['palette', 'secondary'], 'var(--palette-secondary)')
- * console.log(source) // { palette: { primary: 'var(--palette-primary)', secondary: 'var(--palette-secondary)' } }
- */
-export declare const assignNestedKeys: <Object_1 = NestedRecord<any>, Value = any>(obj: Object_1, keys: Array<string>, value: Value) => void;
-/**
- *
- * @param {Object} obj : source object
- * @param {Function} callback : a function that will be called when
- *                   - the deepest key in source object is reached
- *                   - the value of the deepest key is NOT `undefined` | `null`
- *
- * @example
- * walkObjectDeep({ palette: { primary: { main: '#000000' } } }, console.log)
- * // ['palette', 'primary', 'main'] '#000000'
- */
-export declare const walkObjectDeep: <Value, T = Record<string, any>>(obj: T, callback: (keys: Array<string>, value: Value, scope: Record<string, string | number>) => void, shouldSkipPaths?: ((keys: Array<string>) => boolean) | undefined) => void;
-/**
- * a function that parse theme and return { css, vars }
- *
- * @param {Object} theme
- * @param {{
- *  prefix?: string,
- *  basePrefix?: string,
- *  shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean
- * }} options.
- *  `basePrefix`: defined by design system.
- *  `prefix`: defined by application
- *
- *   This function also mutate the string value of theme input by replacing `basePrefix` (if existed) with `prefix`
- *
- * @returns {{ css: Object, vars: Object }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme)
- *
- * @example
- * const { css, vars } = parser({
- *   fontSize: 12,
- *   lineHeight: 1.2,
- *   palette: { primary: { 500: '#000000' } }
- * })
- *
- * console.log(css) // { '--fontSize': '12px', '--lineHeight': 1.2, '--palette-primary-500': '#000000' }
- * console.log(vars) // { fontSize: '--fontSize', lineHeight: '--lineHeight', palette: { primary: { 500: 'var(--palette-primary-500)' } } }
- */
-export default function cssVarsParser(theme: Record<string, any>, options?: {
-    prefix?: string;
-    basePrefix?: string;
-    shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean;
-}): {
-    css: NestedRecord<string>;
-    vars: NestedRecord<string>;
-};
-export {};
+declare type NestedRecord<V = any> = {
+    [k: string | number]: NestedRecord<V> | V;
+};
+/**
+ * This function create an object from keys, value and then assign to target
+ *
+ * @param {Object} obj : the target object to be assigned
+ * @param {string[]} keys
+ * @param {string | number} value
+ *
+ * @example
+ * const source = {}
+ * assignNestedKeys(source, ['palette', 'primary'], 'var(--palette-primary)')
+ * console.log(source) // { palette: { primary: 'var(--palette-primary)' } }
+ *
+ * @example
+ * const source = { palette: { primary: 'var(--palette-primary)' } }
+ * assignNestedKeys(source, ['palette', 'secondary'], 'var(--palette-secondary)')
+ * console.log(source) // { palette: { primary: 'var(--palette-primary)', secondary: 'var(--palette-secondary)' } }
+ */
+export declare const assignNestedKeys: <Object_1 = NestedRecord<any>, Value = any>(obj: Object_1, keys: Array<string>, value: Value) => void;
+/**
+ *
+ * @param {Object} obj : source object
+ * @param {Function} callback : a function that will be called when
+ *                   - the deepest key in source object is reached
+ *                   - the value of the deepest key is NOT `undefined` | `null`
+ *
+ * @example
+ * walkObjectDeep({ palette: { primary: { main: '#000000' } } }, console.log)
+ * // ['palette', 'primary', 'main'] '#000000'
+ */
+export declare const walkObjectDeep: <Value, T = Record<string, any>>(obj: T, callback: (keys: Array<string>, value: Value, scope: Record<string, string | number>) => void, shouldSkipPaths?: ((keys: Array<string>) => boolean) | undefined) => void;
+/**
+ * a function that parse theme and return { css, vars }
+ *
+ * @param {Object} theme
+ * @param {{
+ *  prefix?: string,
+ *  basePrefix?: string,
+ *  shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean
+ * }} options.
+ *  `basePrefix`: defined by design system.
+ *  `prefix`: defined by application
+ *
+ *   This function also mutate the string value of theme input by replacing `basePrefix` (if existed) with `prefix`
+ *
+ * @returns {{ css: Object, vars: Object }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme)
+ *
+ * @example
+ * const { css, vars } = parser({
+ *   fontSize: 12,
+ *   lineHeight: 1.2,
+ *   palette: { primary: { 500: '#000000' } }
+ * })
+ *
+ * console.log(css) // { '--fontSize': '12px', '--lineHeight': 1.2, '--palette-primary-500': '#000000' }
+ * console.log(vars) // { fontSize: '--fontSize', lineHeight: '--lineHeight', palette: { primary: { 500: 'var(--palette-primary-500)' } } }
+ */
+export default function cssVarsParser(theme: Record<string, any>, options?: {
+    prefix?: string;
+    basePrefix?: string;
+    shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean;
+}): {
+    css: NestedRecord<string>;
+    vars: NestedRecord<string>;
+};
+export {};

package/cssVars/cssVarsParser.js

@@ -127,12 +127,13 @@ function cssVarsParser(theme, options) {
     if (typeof val === 'string' || typeof val === 'number') {
       let value = val;
 
-      if (typeof value === 'string' && value.startsWith('var')) {
+      if (typeof value === 'string' && value.match(/var\(\s*--/)) {
         // replace the value of the `scope` object with the prefix or remove basePrefix from the value
         if (!basePrefix && prefix) {
-          value = value.replace(/var\(--/g, `var(--${prefix}-`);
+          value = value.replace(/var\(\s*--/g, `var(--${prefix}-`);
         } else {
-          value = prefix ? value.replace(new RegExp(basePrefix, 'g'), prefix) : value.replace(new RegExp(`${basePrefix}-`, 'g'), '');
+          value = prefix ? value.replace(new RegExp(`var\\(\\s*--${basePrefix}`, 'g'), `var(--${prefix}`) // removing spaces
+          : value.replace(new RegExp(`var\\(\\s*--${basePrefix}-`, 'g'), 'var(--');
         } // scope is the deepest object in the tree, keys is the theme path keys
 
 

package/cssVars/getInitColorSchemeScript.d.ts

@@ -1,12 +1,12 @@
-/// <reference types="react" />
-export declare const DEFAULT_MODE_STORAGE_KEY = "mui-mode";
-export declare const DEFAULT_COLOR_SCHEME_STORAGE_KEY = "mui-color-scheme";
-export declare const DEFAULT_ATTRIBUTE = "data-mui-color-scheme";
-export default function getInitColorSchemeScript(options?: {
-    enableSystem?: boolean;
-    defaultLightColorScheme?: string;
-    defaultDarkColorScheme?: string;
-    modeStorageKey?: string;
-    colorSchemeStorageKey?: string;
-    attribute?: string;
-}): JSX.Element;
+/// <reference types="react" />
+export declare const DEFAULT_MODE_STORAGE_KEY = "mui-mode";
+export declare const DEFAULT_COLOR_SCHEME_STORAGE_KEY = "mui-color-scheme";
+export declare const DEFAULT_ATTRIBUTE = "data-mui-color-scheme";
+export default function getInitColorSchemeScript(options?: {
+    enableSystem?: boolean;
+    defaultLightColorScheme?: string;
+    defaultDarkColorScheme?: string;
+    modeStorageKey?: string;
+    colorSchemeStorageKey?: string;
+    attribute?: string;
+}): JSX.Element;

package/cssVars/index.d.ts

@@ -1,2 +1 @@
-export { default } from './createCssVarsProvider';
-export type { BuildCssVarsTheme } from './createCssVarsProvider';
+export { default } from './createCssVarsProvider';

package/cssVars/useCurrentColorScheme.d.ts

@@ -1,50 +1,50 @@
-export declare type Mode = 'light' | 'dark' | 'system';
-export declare type SystemMode = Exclude<Mode, 'system'>;
-export interface State<SupportedColorScheme extends string> {
-    /**
-     * User selected mode.
-     * Note: on the server, mode is always undefined
-     */
-    mode: Mode | undefined;
-    /**
-     * Only valid if `mode: 'system'`, either 'light' | 'dark'.
-     */
-    systemMode: SystemMode | undefined;
-    /**
-     * The color scheme for the light mode.
-     */
-    lightColorScheme: SupportedColorScheme;
-    /**
-     * The color scheme for the dark mode.
-     */
-    darkColorScheme: SupportedColorScheme;
-}
-export declare type Result<SupportedColorScheme extends string> = State<SupportedColorScheme> & {
-    /**
-     * The current application color scheme. It is always `undefined` on the server.
-     */
-    colorScheme: SupportedColorScheme | undefined;
-    /**
-     * `mode` is saved to internal state and localStorage
-     * If `mode` is null, it will be reset to the defaultMode
-     */
-    setMode: (mode: Mode | null) => void;
-    /**
-     * `colorScheme` is saved to internal state and localStorage
-     * If `colorScheme` is null, it will be reset to the defaultColorScheme (light | dark)
-     */
-    setColorScheme: (colorScheme: SupportedColorScheme | Partial<{
-        light: SupportedColorScheme | null;
-        dark: SupportedColorScheme | null;
-    }> | null) => void;
-};
-export declare function getSystemMode(mode: undefined | string): SystemMode | undefined;
-export declare function getColorScheme<SupportedColorScheme extends string>(state: State<SupportedColorScheme>): SupportedColorScheme | undefined;
-export default function useCurrentColorScheme<SupportedColorScheme extends string>(options: {
-    defaultLightColorScheme: SupportedColorScheme;
-    defaultDarkColorScheme: SupportedColorScheme;
-    supportedColorSchemes: Array<SupportedColorScheme>;
-    defaultMode?: Mode;
-    modeStorageKey?: string;
-    colorSchemeStorageKey?: string;
-}): Result<SupportedColorScheme>;
+export declare type Mode = 'light' | 'dark' | 'system';
+export declare type SystemMode = Exclude<Mode, 'system'>;
+export interface State<SupportedColorScheme extends string> {
+    /**
+     * User selected mode.
+     * Note: on the server, mode is always undefined
+     */
+    mode: Mode | undefined;
+    /**
+     * Only valid if `mode: 'system'`, either 'light' | 'dark'.
+     */
+    systemMode: SystemMode | undefined;
+    /**
+     * The color scheme for the light mode.
+     */
+    lightColorScheme: SupportedColorScheme;
+    /**
+     * The color scheme for the dark mode.
+     */
+    darkColorScheme: SupportedColorScheme;
+}
+export declare type Result<SupportedColorScheme extends string> = State<SupportedColorScheme> & {
+    /**
+     * The current application color scheme. It is always `undefined` on the server.
+     */
+    colorScheme: SupportedColorScheme | undefined;
+    /**
+     * `mode` is saved to internal state and localStorage
+     * If `mode` is null, it will be reset to the defaultMode
+     */
+    setMode: (mode: Mode | null) => void;
+    /**
+     * `colorScheme` is saved to internal state and localStorage
+     * If `colorScheme` is null, it will be reset to the defaultColorScheme (light | dark)
+     */
+    setColorScheme: (colorScheme: SupportedColorScheme | Partial<{
+        light: SupportedColorScheme | null;
+        dark: SupportedColorScheme | null;
+    }> | null) => void;
+};
+export declare function getSystemMode(mode: undefined | string): SystemMode | undefined;
+export declare function getColorScheme<SupportedColorScheme extends string>(state: State<SupportedColorScheme>): SupportedColorScheme | undefined;
+export default function useCurrentColorScheme<SupportedColorScheme extends string>(options: {
+    defaultLightColorScheme: SupportedColorScheme;
+    defaultDarkColorScheme: SupportedColorScheme;
+    supportedColorSchemes: Array<SupportedColorScheme>;
+    defaultMode?: Mode;
+    modeStorageKey?: string;
+    colorSchemeStorageKey?: string;
+}): Result<SupportedColorScheme>;

package/esm/createBox.js

@@ -5,14 +5,15 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import styled from '@mui/styled-engine';
-import styleFunctionSx, { extendSxProp } from './styleFunctionSx';
+import defaultStyleFunctionSx, { extendSxProp } from './styleFunctionSx';
 import useTheme from './useTheme';
 import { jsx as _jsx } from "react/jsx-runtime";
 export default function createBox(options = {}) {
   const {
     defaultTheme,
     defaultClassName = 'MuiBox-root',
-    generateClassName
+    generateClassName,
+    styleFunctionSx = defaultStyleFunctionSx
   } = options;
   const BoxRoot = styled('div')(styleFunctionSx);
   const Box = /*#__PURE__*/React.forwardRef(function Box(inProps, ref) {