@mui/system 5.8.6 → 5.8.7

package/Box/Box.spec.d.ts

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

package/CHANGELOG.md

@@ -1,5 +1,56 @@
 # [Versions](https://mui.com/versions/)
 
+## 5.8.7
+
+<!-- generated comparing v5.8.6..master -->
+
+_Jul 4, 2022_
+
+A big thanks to the 13 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐛 Fixed an issue causing Typescript errors when building a project with Material UI v5.8.6 (@michaldudak)
+- 🐛 Fixed a few bugs in Material UI components. Thanks @henriqueholtz, @jake-collibra, @MattiasMartens and @TimoWilhelm!
+- many other 🐛 bug fixes and 📚 documentation improvements
+
+### `@mui/material@5.8.7`
+
+- [Autocomplete] Add some missing props in `useAutocomplete` (#33269) @henriqueholtz
+- [Autocomplete] Extend `componentsProps` to include `popper` and `popupIndicator` slots (#33283) @jake-collibra
+- [Select] Annotate empty string as valid value prop (#33088) @MattiasMartens
+- [SnackbarContent] Fix message text color with css var provider (#33285) @TimoWilhelm
+
+### `@mui/styled-engine@5.8.7`
+
+- [styled-engine] Add missing type dependency on csstype (#33310) @Methuselah96
+
+### `@mui/system@5.8.7`
+
+- [system] Simplify theme input types for `CssVarsProvider` (#33381) @siriwatknp
+- [system] Export required types (#33324) @michaldudak
+
+### `@mui/joy@5.0.0-alpha.35`
+
+- [Joy] Add radio button documentation (#33254) @siriwatknp
+- [Joy] Add switch documentation (#33302) @siriwatknp
+- [Joy] Batch a couple of documentation refinements (#33158)
+- [Joy] Enable Joy and Material UI compatibility (#33379) @siriwatknp
+
+### `@mui/base@5.0.0-alpha.88`
+
+- [base] Remove a type incompatible with Typescript 3.5 (#33361) @michaldudak
+- [BadgeUnstyled] Export BadgeUnstyledOwnProps interface to fix typescript compiler error (#33314) @aaronlademann-wf
+- [TablePaginationUnstyled] Accept callbacks in componentsProps (#33309) @michaldudak
+
+### Docs
+
+- [docs] Fix Link typings in the react-router example (#32308) @aaarichter
+- [docs] Add caveat about class components with Tooltip (#33325) @joshkel
+- [docs] Fix SEO issues (#33288) @oliviertassinari
+- [docs] Fix Slider's "player" demo (#33267) @xlianghang
+- [website] Link MUI Toolpad in mui.com (#33287) @oliviertassinari
+
+All contributors of this release in alphabetical order: @aaarichter, @aaronlademann-wf, @danilo-leal, @henriqueholtz, @jake-collibra, @joshkel, @MattiasMartens, @Methuselah96, @michaldudak, @oliviertassinari, @siriwatknp, @TimoWilhelm, @xlianghang
+
 ## 5.8.6
 
 <!-- generated comparing v5.8.5..master -->

package/Container/Container.d.ts

@@ -1,13 +1,13 @@
-/**
- *
- * Demos:
- *
- * - [Container (Material UI)](https://mui.com/material-ui/react-container/)
- * - [Container (MUI System)](https://mui.com/system/react-container/)
- *
- * API:
- *
- * - [Container API](https://mui.com/system/api/container/)
- */
-declare const Container: import("@mui/types").OverridableComponent<import("./ContainerProps").ContainerTypeMap<{}, "div">>;
-export default Container;
+/**
+ *
+ * Demos:
+ *
+ * - [Container (Material UI)](https://mui.com/material-ui/react-container/)
+ * - [Container (MUI System)](https://mui.com/system/react-container/)
+ *
+ * API:
+ *
+ * - [Container API](https://mui.com/system/api/container/)
+ */
+declare const Container: import("@mui/types").OverridableComponent<import("./ContainerProps").ContainerTypeMap<{}, "div">>;
+export default Container;

package/Container/ContainerProps.d.ts

@@ -1,40 +1,40 @@
-import * as React from 'react';
-import { OverrideProps } from '@mui/types';
-import { SxProps } from '../styleFunctionSx';
-import { Theme, Breakpoint } from '../createTheme';
-import { ContainerClasses } from './containerClasses';
-export interface ContainerTypeMap<P = {}, D extends React.ElementType = 'div'> {
-    props: P & {
-        children?: React.ReactNode;
-        /**
-         * Override or extend the styles applied to the component.
-         */
-        classes?: Partial<ContainerClasses>;
-        /**
-         * If `true`, the left and right padding is removed.
-         * @default false
-         */
-        disableGutters?: boolean;
-        /**
-         * Set the max-width to match the min-width of the current breakpoint.
-         * This is useful if you'd prefer to design for a fixed set of sizes
-         * instead of trying to accommodate a fully fluid viewport.
-         * It's fluid by default.
-         * @default false
-         */
-        fixed?: boolean;
-        /**
-         * Determine the max-width of the container.
-         * The container width grows with the size of the screen.
-         * Set to `false` to disable `maxWidth`.
-         * @default 'lg'
-         */
-        maxWidth?: Breakpoint | false;
-        /**
-         * The system prop that allows defining system overrides as well as additional CSS styles.
-         */
-        sx?: SxProps<Theme>;
-    };
-    defaultComponent: D;
-}
-export declare type ContainerProps<D extends React.ElementType = ContainerTypeMap['defaultComponent'], P = {}> = OverrideProps<ContainerTypeMap<P, D>, D>;
+import * as React from 'react';
+import { OverrideProps } from '@mui/types';
+import { SxProps } from '../styleFunctionSx';
+import { Theme, Breakpoint } from '../createTheme';
+import { ContainerClasses } from './containerClasses';
+export interface ContainerTypeMap<P = {}, D extends React.ElementType = 'div'> {
+    props: P & {
+        children?: React.ReactNode;
+        /**
+         * Override or extend the styles applied to the component.
+         */
+        classes?: Partial<ContainerClasses>;
+        /**
+         * If `true`, the left and right padding is removed.
+         * @default false
+         */
+        disableGutters?: boolean;
+        /**
+         * Set the max-width to match the min-width of the current breakpoint.
+         * This is useful if you'd prefer to design for a fixed set of sizes
+         * instead of trying to accommodate a fully fluid viewport.
+         * It's fluid by default.
+         * @default false
+         */
+        fixed?: boolean;
+        /**
+         * Determine the max-width of the container.
+         * The container width grows with the size of the screen.
+         * Set to `false` to disable `maxWidth`.
+         * @default 'lg'
+         */
+        maxWidth?: Breakpoint | false;
+        /**
+         * The system prop that allows defining system overrides as well as additional CSS styles.
+         */
+        sx?: SxProps<Theme>;
+    };
+    defaultComponent: D;
+}
+export declare type ContainerProps<D extends React.ElementType = ContainerTypeMap['defaultComponent'], P = {}> = OverrideProps<ContainerTypeMap<P, D>, D>;

package/Container/containerClasses.d.ts

@@ -1,22 +1,22 @@
-export interface ContainerClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if `disableGutters={true}`. */
-    disableGutters: string;
-    /** Styles applied to the root element if `fixed={true}`. */
-    fixed: string;
-    /** Styles applied to the root element if `maxWidth="xs"`. */
-    maxWidthXs: string;
-    /** Styles applied to the root element if `maxWidth="sm"`. */
-    maxWidthSm: string;
-    /** Styles applied to the root element if `maxWidth="md"`. */
-    maxWidthMd: string;
-    /** Styles applied to the root element if `maxWidth="lg"`. */
-    maxWidthLg: string;
-    /** Styles applied to the root element if `maxWidth="xl"`. */
-    maxWidthXl: string;
-}
-export declare type ContainerClassKey = keyof ContainerClasses;
-export declare function getContainerUtilityClass(slot: string): string;
-declare const containerClasses: ContainerClasses;
-export default containerClasses;
+export interface ContainerClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if `disableGutters={true}`. */
+    disableGutters: string;
+    /** Styles applied to the root element if `fixed={true}`. */
+    fixed: string;
+    /** Styles applied to the root element if `maxWidth="xs"`. */
+    maxWidthXs: string;
+    /** Styles applied to the root element if `maxWidth="sm"`. */
+    maxWidthSm: string;
+    /** Styles applied to the root element if `maxWidth="md"`. */
+    maxWidthMd: string;
+    /** Styles applied to the root element if `maxWidth="lg"`. */
+    maxWidthLg: string;
+    /** Styles applied to the root element if `maxWidth="xl"`. */
+    maxWidthXl: string;
+}
+export declare type ContainerClassKey = keyof ContainerClasses;
+export declare function getContainerUtilityClass(slot: string): string;
+declare const containerClasses: ContainerClasses;
+export default containerClasses;

package/Container/createContainer.d.ts

@@ -1,18 +1,18 @@
-import * as React from 'react';
-import { Interpolation, StyledComponent } from '@mui/styled-engine';
-import { OverridableComponent } from '@mui/types';
-import { ContainerProps, ContainerTypeMap } from './ContainerProps';
-import { Theme as DefaultTheme } from '../createTheme';
-interface StyleFnProps<Theme> extends ContainerProps {
-    theme: Theme;
-    ownerState: ContainerProps;
-}
-declare type RequiredThemeStructure = Pick<DefaultTheme, 'breakpoints' | 'spacing'>;
-export default function createContainer<Theme extends RequiredThemeStructure = DefaultTheme>(options?: {
-    createStyledComponent?: (...styles: Array<Interpolation<StyleFnProps<Theme>>>) => StyledComponent<ContainerProps>;
-    useThemeProps?: (inProps: ContainerProps) => ContainerProps & {
-        component?: React.ElementType;
-    };
-    componentName?: string;
-}): OverridableComponent<ContainerTypeMap<{}, "div">>;
-export {};
+import * as React from 'react';
+import { Interpolation, StyledComponent } from '@mui/styled-engine';
+import { OverridableComponent } from '@mui/types';
+import { ContainerProps, ContainerTypeMap } from './ContainerProps';
+import { Theme as DefaultTheme } from '../createTheme';
+interface StyleFnProps<Theme> extends ContainerProps {
+    theme: Theme;
+    ownerState: ContainerProps;
+}
+declare type RequiredThemeStructure = Pick<DefaultTheme, 'breakpoints' | 'spacing'>;
+export default function createContainer<Theme extends RequiredThemeStructure = DefaultTheme>(options?: {
+    createStyledComponent?: (...styles: Array<Interpolation<StyleFnProps<Theme>>>) => StyledComponent<ContainerProps>;
+    useThemeProps?: (inProps: ContainerProps) => ContainerProps & {
+        component?: React.ElementType;
+    };
+    componentName?: string;
+}): OverridableComponent<ContainerTypeMap<{}, "div">>;
+export {};

package/createBox.spec.d.ts

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

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

@@ -45,17 +45,23 @@ export interface CssVarsProviderConfig<ColorScheme extends string> {
    */
   enableColorScheme?: boolean;
   /**
-   * CSS variable prefix
-   * @default ''
+   * 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)'
    */
-  prefix?: string;
+  shouldSkipGeneratingVar?: (keys: string[], value: string | number) => boolean;
 }
 
-export interface CreateCssVarsProviderResult<ColorScheme extends string, ThemeInput> {
+export interface CreateCssVarsProviderResult<ColorScheme extends string> {
   CssVarsProvider: (
     props: React.PropsWithChildren<
       Partial<CssVarsProviderConfig<ColorScheme>> & {
-        theme?: ThemeInput;
+        theme?: {
+          cssVarPrefix?: string;
+          colorSchemes: Record<ColorScheme, Record<string, any>>;
+        };
         /**
          * The document used to perform `disableTransitionOnChange` feature
          * @default document
@@ -83,10 +89,7 @@ export interface CreateCssVarsProviderResult<ColorScheme extends string, ThemeIn
   getInitColorSchemeScript: typeof getInitColorSchemeScript;
 }
 
-export default function createCssVarsProvider<
-  ColorScheme extends string,
-  ThemeInput extends { colorSchemes?: Partial<Record<ColorScheme, any>> },
->(
+export default function createCssVarsProvider<ColorScheme extends string>(
   options: CssVarsProviderConfig<ColorScheme> & {
     /**
      * Design system default theme
@@ -114,14 +117,6 @@ export default function createCssVarsProvider<
      *  }
      */
     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.
      *
@@ -130,7 +125,7 @@ export default function createCssVarsProvider<
      */
     resolveTheme?: (theme: any) => any; // the type is any because it depends on the design system.
   },
-): CreateCssVarsProviderResult<ColorScheme, ThemeInput>;
+): CreateCssVarsProviderResult<ColorScheme>;
 
 // disable automatic export
 export {};

package/cssVars/createCssVarsProvider.js

@@ -28,11 +28,9 @@ var _getInitColorSchemeScript = _interopRequireWildcard(require("./getInitColorS
 
 var _useCurrentColorScheme = _interopRequireDefault(require("./useCurrentColorScheme"));
 
-var _createGetCssVar = _interopRequireDefault(require("./createGetCssVar"));
-
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["colorSchemes", "components"];
+const _excluded = ["colorSchemes", "components", "cssVarPrefix"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -51,8 +49,7 @@ function createCssVarsProvider(options) {
     defaultColorScheme: designSystemColorScheme,
     disableTransitionOnChange: designSystemTransitionOnChange = false,
     enableColorScheme: designSystemEnableColorScheme = true,
-    prefix: designSystemPrefix = '',
-    shouldSkipGeneratingVar,
+    shouldSkipGeneratingVar: designSystemShouldSkipGeneratingVar,
     resolveTheme
   } = options;
 
@@ -75,7 +72,6 @@ function createCssVarsProvider(options) {
   function CssVarsProvider({
     children,
     theme: themeProp = defaultTheme,
-    prefix = designSystemPrefix,
     modeStorageKey = defaultModeStorageKey,
     colorSchemeStorageKey = defaultColorSchemeStorageKey,
     attribute = defaultAttribute,
@@ -86,12 +82,14 @@ function createCssVarsProvider(options) {
     storageWindow = typeof window === 'undefined' ? undefined : window,
     documentNode = typeof document === 'undefined' ? undefined : document,
     colorSchemeNode = typeof document === 'undefined' ? undefined : document.documentElement,
-    colorSchemeSelector = ':root'
+    colorSchemeSelector = ':root',
+    shouldSkipGeneratingVar = designSystemShouldSkipGeneratingVar
   }) {
     const hasMounted = React.useRef(false);
     const {
       colorSchemes = {},
-      components = {}
+      components = {},
+      cssVarPrefix
     } = themeProp,
           restThemeProp = (0, _objectWithoutPropertiesLoose2.default)(themeProp, _excluded);
     const allColorSchemes = Object.keys(colorSchemes);
@@ -135,16 +133,14 @@ function createCssVarsProvider(options) {
       vars: rootVars,
       parsedTheme
     } = (0, _cssVarsParser.default)(theme, {
-      prefix,
-      basePrefix: designSystemPrefix,
+      prefix: cssVarPrefix,
       shouldSkipGeneratingVar
     });
     theme = (0, _extends2.default)({}, parsedTheme, {
       components,
       colorSchemes,
-      prefix,
+      cssVarPrefix,
       vars: rootVars,
-      getCssVar: (0, _createGetCssVar.default)(prefix),
       getColorSchemeSelector: targetColorScheme => `[${attribute}="${targetColorScheme}"] &`
     });
     const defaultColorSchemeStyleSheet = {};
@@ -155,8 +151,7 @@ function createCssVarsProvider(options) {
         vars,
         parsedTheme: parsedScheme
       } = (0, _cssVarsParser.default)(scheme, {
-        prefix,
-        basePrefix: designSystemPrefix,
+        prefix: cssVarPrefix,
         shouldSkipGeneratingVar
       });
       theme.vars = (0, _utils.deepmerge)(theme.vars, vars);
@@ -320,9 +315,9 @@ function createCssVarsProvider(options) {
     modeStorageKey: _propTypes.default.string,
 
     /**
-     * CSS variable prefix.
+     * A function to determine if the key, value should be attached as CSS Variable
      */
-    prefix: _propTypes.default.string,
+    shouldSkipGeneratingVar: _propTypes.default.func,
 
     /**
      * The window that attaches the 'storage' event listener

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, ...fallbacks: (T | AdditionalVars)[]) => string;

package/cssVars/createGetCssVar.js

@@ -25,8 +25,8 @@ function createGetCssVar(prefix = '') {
   } // AdditionalVars makes `getCssVar` less strict, so it can be use like this `getCssVar('non-mui-variable')` without type error.
 
 
-  const getCssVar = (field, ...vars) => {
-    return `var(--${prefix ? `${prefix}-` : ''}${field}${appendVar(...vars)})`;
+  const getCssVar = (field, ...fallbacks) => {
+    return `var(--${prefix ? `${prefix}-` : ''}${field}${appendVar(...fallbacks)})`;
   };
 
   return getCssVar;

package/cssVars/cssVarsParser.d.ts

@@ -1,70 +1,65 @@
-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, arrayKeys?: Array<string>) => 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, arrayKeys: Array<string>) => 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
- *
- *   the CSS variable value will be adjusted based on the provided `basePrefix` & `prefix` which can be found in `parsedTheme`.
- *
- * @returns {{ css: Object, vars: Object, parsedTheme: typeof theme }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme), and `parsedTheme` is the cloned version of theme.
- *
- * @example
- * const { css, vars, parsedTheme } = parser({
- *   fontSize: 12,
- *   lineHeight: 1.2,
- *   palette: { primary: { 500: 'var(--color)' } }
- * }, { prefix: 'foo' })
- *
- * console.log(css) // { '--foo-fontSize': '12px', '--foo-lineHeight': 1.2, '--foo-palette-primary-500': 'var(--foo-color)' }
- * console.log(vars) // { fontSize: '--foo-fontSize', lineHeight: '--foo-lineHeight', palette: { primary: { 500: 'var(--foo-palette-primary-500)' } } }
- * console.log(parsedTheme) // { fontSize: 12, lineHeight: 1.2, palette: { primary: { 500: 'var(--foo-color)' } } }
- */
-export default function cssVarsParser<T extends Record<string, any>>(theme: T, options?: {
-    prefix?: string;
-    basePrefix?: string;
-    shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean;
-}): {
-    css: NestedRecord<string>;
-    vars: NestedRecord<string>;
-    parsedTheme: T;
-};
-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, arrayKeys?: Array<string>) => 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, arrayKeys: Array<string>) => void, shouldSkipPaths?: ((keys: Array<string>) => boolean) | undefined) => void;
+/**
+ * a function that parse theme and return { css, vars }
+ *
+ * @param {Object} theme
+ * @param {{
+ *  prefix?: string,
+ *  shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean
+ * }} options.
+ *  `prefix`: The prefix of the generated CSS variables. This function does not change the value.
+ *
+ * @returns {{ css: Object, vars: Object, parsedTheme: typeof theme }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme), and `parsedTheme` is the cloned version of theme.
+ *
+ * @example
+ * const { css, vars, parsedTheme } = parser({
+ *   fontSize: 12,
+ *   lineHeight: 1.2,
+ *   palette: { primary: { 500: 'var(--color)' } }
+ * }, { prefix: 'foo' })
+ *
+ * console.log(css) // { '--foo-fontSize': '12px', '--foo-lineHeight': 1.2, '--foo-palette-primary-500': 'var(--color)' }
+ * console.log(vars) // { fontSize: 'var(--foo-fontSize)', lineHeight: 'var(--foo-lineHeight)', palette: { primary: { 500: 'var(--foo-palette-primary-500)' } } }
+ * console.log(parsedTheme) // { fontSize: 12, lineHeight: 1.2, palette: { primary: { 500: 'var(--color)' } } }
+ */
+export default function cssVarsParser<T extends Record<string, any>>(theme: T, options?: {
+    prefix?: string;
+    shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean;
+}): {
+    css: NestedRecord<string>;
+    vars: NestedRecord<string>;
+    parsedTheme: T;
+};
+export {};