@mui/system 5.11.11 → 5.11.12

package/Unstable_Grid/GridProps.d.ts

@@ -1,173 +1,173 @@
-import * as React from 'react';
-import { OverrideProps, IfEquals } from '@mui/types';
-import { SxProps } from '../styleFunctionSx';
-import { Theme, Breakpoint, BreakpointOverrides } from '../createTheme';
-import { SystemProps } from '../Box';
-type ResponsiveStyleValue<T> = T | Array<T | null> | {
-    [key in Breakpoint]?: T | null;
-};
-export type GridDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
-export type GridSpacing = number | string;
-export type GridWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
-export type GridSize = 'auto' | number;
-export interface GridDefaultBreakpoints {
-    /**
-     * If a number, it sets the number of columns the grid item uses.
-     * It can't be greater than the total number of columns of the container (12 by default).
-     * If 'auto', the grid item's width matches its content.
-     * If false, the prop is ignored.
-     * If true, the grid item's width grows to use the space available in the grid container.
-     * The value is applied for the `lg` breakpoint and wider screens if not overridden.
-     * @default false
-     */
-    lg?: boolean | GridSize;
-    /**
-     * If a number, it sets the margin-left equals to the number of columns the grid item uses.
-     * If 'auto', the grid item push itself to the right-end of the container.
-     * The value is applied for the `lg` breakpoint and wider screens if not overridden.
-     */
-    lgOffset?: GridSize;
-    /**
-     * If a number, it sets the number of columns the grid item uses.
-     * It can't be greater than the total number of columns of the container (12 by default).
-     * If 'auto', the grid item's width matches its content.
-     * If false, the prop is ignored.
-     * If true, the grid item's width grows to use the space available in the grid container.
-     * The value is applied for the `md` breakpoint and wider screens if not overridden.
-     * @default false
-     */
-    md?: boolean | GridSize;
-    /**
-     * If a number, it sets the margin-left equals to the number of columns the grid item uses.
-     * If 'auto', the grid item push itself to the right-end of the container.
-     * The value is applied for the `md` breakpoint and wider screens if not overridden.
-     */
-    mdOffset?: GridSize;
-    /**
-     * If a number, it sets the number of columns the grid item uses.
-     * It can't be greater than the total number of columns of the container (12 by default).
-     * If 'auto', the grid item's width matches its content.
-     * If false, the prop is ignored.
-     * If true, the grid item's width grows to use the space available in the grid container.
-     * The value is applied for the `sm` breakpoint and wider screens if not overridden.
-     * @default false
-     */
-    sm?: boolean | GridSize;
-    /**
-     * If a number, it sets the margin-left equals to the number of columns the grid item uses.
-     * If 'auto', the grid item push itself to the right-end of the container.
-     * The value is applied for the `sm` breakpoint and wider screens if not overridden.
-     */
-    smOffset?: GridSize;
-    /**
-     * If a number, it sets the number of columns the grid item uses.
-     * It can't be greater than the total number of columns of the container (12 by default).
-     * If 'auto', the grid item's width matches its content.
-     * If false, the prop is ignored.
-     * If true, the grid item's width grows to use the space available in the grid container.
-     * The value is applied for the `xl` breakpoint and wider screens if not overridden.
-     * @default false
-     */
-    xl?: boolean | GridSize;
-    /**
-     * If a number, it sets the margin-left equals to the number of columns the grid item uses.
-     * If 'auto', the grid item push itself to the right-end of the container.
-     * The value is applied for the `xl` breakpoint and wider screens if not overridden.
-     */
-    xlOffset?: GridSize;
-    /**
-     * If a number, it sets the number of columns the grid item uses.
-     * It can't be greater than the total number of columns of the container (12 by default).
-     * If 'auto', the grid item's width matches its content.
-     * If false, the prop is ignored.
-     * If true, the grid item's width grows to use the space available in the grid container.
-     * The value is applied for all the screen sizes with the lowest priority.
-     * @default false
-     */
-    xs?: boolean | GridSize;
-    /**
-     * If a number, it sets the margin-left equals to the number of columns the grid item uses.
-     * If 'auto', the grid item push itself to the right-end of the container.
-     * The value is applied for the `xs` breakpoint and wider screens if not overridden.
-     */
-    xsOffset?: GridSize;
-}
-type CustomBreakpoints = Partial<Record<Breakpoint, boolean | GridSize> & Record<`${Breakpoint}Offset`, GridSize>>;
-interface BreakpointOverridesEmpty {
-}
-type Breakpoints = IfEquals<BreakpointOverrides, BreakpointOverridesEmpty, GridDefaultBreakpoints, CustomBreakpoints>;
-export interface GridBaseProps extends Breakpoints {
-    /**
-     * The content of the component.
-     */
-    children?: React.ReactNode;
-    /**
-     * The number of columns.
-     * @default 12
-     */
-    columns?: ResponsiveStyleValue<number>;
-    /**
-     * Defines the horizontal space between the type `item` components.
-     * It overrides the value of the `spacing` prop.
-     */
-    columnSpacing?: ResponsiveStyleValue<GridSpacing>;
-    /**
-     * If `true`, the component will have the flex *container* behavior.
-     * You should be wrapping *items* with a *container*.
-     * @default false
-     */
-    container?: boolean;
-    /**
-     * Defines the `flex-direction` style property.
-     * It is applied for all screen sizes.
-     * @default 'row'
-     */
-    direction?: ResponsiveStyleValue<GridDirection>;
-    /**
-     * If `true`, the negative margin and padding are apply only to the top and left sides of the grid.
-     */
-    disableEqualOverflow?: boolean;
-    /**
-     * Defines the vertical space between the type `item` components.
-     * It overrides the value of the `spacing` prop.
-     */
-    rowSpacing?: ResponsiveStyleValue<GridSpacing>;
-    /**
-     * Defines the space between the type `item` components.
-     * It can only be used on a type `container` component.
-     * @default 0
-     */
-    spacing?: ResponsiveStyleValue<GridSpacing> | undefined;
-    /**
-     * Defines the `flex-wrap` style property.
-     * It's applied for all screen sizes.
-     * @default 'wrap'
-     */
-    wrap?: GridWrap;
-}
-export interface GridOwnerState extends GridBaseProps {
-    /**
-     * The level of the grid starts from `0`
-     * and increases when the grid nests inside another grid regardless of container or item.
-     *
-     * ```js
-     * <Grid> // level 0
-     *   <Grid> // level 1
-     *     <Grid> // level 2
-     *   <Grid> // level 1
-     * ```
-     */
-    level: number;
-    gridSize: Partial<Record<Breakpoint, GridSize | boolean>>;
-    gridOffset: Partial<Record<Breakpoint, GridSize>>;
-}
-export interface GridTypeMap<P = {}, D extends React.ElementType = 'div'> {
-    props: P & GridBaseProps & {
-        sx?: SxProps<Theme>;
-    } & SystemProps<Theme>;
-    defaultComponent: D;
-}
-export type GridProps<D extends React.ElementType = GridTypeMap['defaultComponent'], P = {
-    component?: React.ElementType;
-}> = OverrideProps<GridTypeMap<P, D>, D>;
-export {};
+import * as React from 'react';
+import { OverrideProps, IfEquals } from '@mui/types';
+import { SxProps } from '../styleFunctionSx';
+import { Theme, Breakpoint, BreakpointOverrides } from '../createTheme';
+import { SystemProps } from '../Box';
+type ResponsiveStyleValue<T> = T | Array<T | null> | {
+    [key in Breakpoint]?: T | null;
+};
+export type GridDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
+export type GridSpacing = number | string;
+export type GridWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
+export type GridSize = 'auto' | number;
+export interface GridDefaultBreakpoints {
+    /**
+     * If a number, it sets the number of columns the grid item uses.
+     * It can't be greater than the total number of columns of the container (12 by default).
+     * If 'auto', the grid item's width matches its content.
+     * If false, the prop is ignored.
+     * If true, the grid item's width grows to use the space available in the grid container.
+     * The value is applied for the `lg` breakpoint and wider screens if not overridden.
+     * @default false
+     */
+    lg?: boolean | GridSize;
+    /**
+     * If a number, it sets the margin-left equals to the number of columns the grid item uses.
+     * If 'auto', the grid item push itself to the right-end of the container.
+     * The value is applied for the `lg` breakpoint and wider screens if not overridden.
+     */
+    lgOffset?: GridSize;
+    /**
+     * If a number, it sets the number of columns the grid item uses.
+     * It can't be greater than the total number of columns of the container (12 by default).
+     * If 'auto', the grid item's width matches its content.
+     * If false, the prop is ignored.
+     * If true, the grid item's width grows to use the space available in the grid container.
+     * The value is applied for the `md` breakpoint and wider screens if not overridden.
+     * @default false
+     */
+    md?: boolean | GridSize;
+    /**
+     * If a number, it sets the margin-left equals to the number of columns the grid item uses.
+     * If 'auto', the grid item push itself to the right-end of the container.
+     * The value is applied for the `md` breakpoint and wider screens if not overridden.
+     */
+    mdOffset?: GridSize;
+    /**
+     * If a number, it sets the number of columns the grid item uses.
+     * It can't be greater than the total number of columns of the container (12 by default).
+     * If 'auto', the grid item's width matches its content.
+     * If false, the prop is ignored.
+     * If true, the grid item's width grows to use the space available in the grid container.
+     * The value is applied for the `sm` breakpoint and wider screens if not overridden.
+     * @default false
+     */
+    sm?: boolean | GridSize;
+    /**
+     * If a number, it sets the margin-left equals to the number of columns the grid item uses.
+     * If 'auto', the grid item push itself to the right-end of the container.
+     * The value is applied for the `sm` breakpoint and wider screens if not overridden.
+     */
+    smOffset?: GridSize;
+    /**
+     * If a number, it sets the number of columns the grid item uses.
+     * It can't be greater than the total number of columns of the container (12 by default).
+     * If 'auto', the grid item's width matches its content.
+     * If false, the prop is ignored.
+     * If true, the grid item's width grows to use the space available in the grid container.
+     * The value is applied for the `xl` breakpoint and wider screens if not overridden.
+     * @default false
+     */
+    xl?: boolean | GridSize;
+    /**
+     * If a number, it sets the margin-left equals to the number of columns the grid item uses.
+     * If 'auto', the grid item push itself to the right-end of the container.
+     * The value is applied for the `xl` breakpoint and wider screens if not overridden.
+     */
+    xlOffset?: GridSize;
+    /**
+     * If a number, it sets the number of columns the grid item uses.
+     * It can't be greater than the total number of columns of the container (12 by default).
+     * If 'auto', the grid item's width matches its content.
+     * If false, the prop is ignored.
+     * If true, the grid item's width grows to use the space available in the grid container.
+     * The value is applied for all the screen sizes with the lowest priority.
+     * @default false
+     */
+    xs?: boolean | GridSize;
+    /**
+     * If a number, it sets the margin-left equals to the number of columns the grid item uses.
+     * If 'auto', the grid item push itself to the right-end of the container.
+     * The value is applied for the `xs` breakpoint and wider screens if not overridden.
+     */
+    xsOffset?: GridSize;
+}
+type CustomBreakpoints = Partial<Record<Breakpoint, boolean | GridSize> & Record<`${Breakpoint}Offset`, GridSize>>;
+interface BreakpointOverridesEmpty {
+}
+type Breakpoints = IfEquals<BreakpointOverrides, BreakpointOverridesEmpty, GridDefaultBreakpoints, CustomBreakpoints>;
+export interface GridBaseProps extends Breakpoints {
+    /**
+     * The content of the component.
+     */
+    children?: React.ReactNode;
+    /**
+     * The number of columns.
+     * @default 12
+     */
+    columns?: ResponsiveStyleValue<number>;
+    /**
+     * Defines the horizontal space between the type `item` components.
+     * It overrides the value of the `spacing` prop.
+     */
+    columnSpacing?: ResponsiveStyleValue<GridSpacing>;
+    /**
+     * If `true`, the component will have the flex *container* behavior.
+     * You should be wrapping *items* with a *container*.
+     * @default false
+     */
+    container?: boolean;
+    /**
+     * Defines the `flex-direction` style property.
+     * It is applied for all screen sizes.
+     * @default 'row'
+     */
+    direction?: ResponsiveStyleValue<GridDirection>;
+    /**
+     * If `true`, the negative margin and padding are apply only to the top and left sides of the grid.
+     */
+    disableEqualOverflow?: boolean;
+    /**
+     * Defines the vertical space between the type `item` components.
+     * It overrides the value of the `spacing` prop.
+     */
+    rowSpacing?: ResponsiveStyleValue<GridSpacing>;
+    /**
+     * Defines the space between the type `item` components.
+     * It can only be used on a type `container` component.
+     * @default 0
+     */
+    spacing?: ResponsiveStyleValue<GridSpacing> | undefined;
+    /**
+     * Defines the `flex-wrap` style property.
+     * It's applied for all screen sizes.
+     * @default 'wrap'
+     */
+    wrap?: GridWrap;
+}
+export interface GridOwnerState extends GridBaseProps {
+    /**
+     * The level of the grid starts from `0`
+     * and increases when the grid nests inside another grid regardless of container or item.
+     *
+     * ```js
+     * <Grid> // level 0
+     *   <Grid> // level 1
+     *     <Grid> // level 2
+     *   <Grid> // level 1
+     * ```
+     */
+    level: number;
+    gridSize: Partial<Record<Breakpoint, GridSize | boolean>>;
+    gridOffset: Partial<Record<Breakpoint, GridSize>>;
+}
+export interface GridTypeMap<P = {}, D extends React.ElementType = 'div'> {
+    props: P & GridBaseProps & {
+        sx?: SxProps<Theme>;
+    } & SystemProps<Theme>;
+    defaultComponent: D;
+}
+export type GridProps<D extends React.ElementType = GridTypeMap['defaultComponent'], P = {
+    component?: React.ElementType;
+}> = OverrideProps<GridTypeMap<P, D>, D>;
+export {};

package/Unstable_Grid/createGrid.d.ts

@@ -1,11 +1,11 @@
-import * as React from 'react';
-import { OverridableComponent } from '@mui/types';
-import { GridTypeMap } from './GridProps';
-declare const defaultCreateStyledComponent: import("@mui/styled-engine").CreateStyledComponent<import("../createStyled").MUIStyledCommonProps<any>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}, any>;
-declare function useThemePropsDefault<T extends {}>(props: T): T & {};
-export default function createGrid(options?: {
-    createStyledComponent?: typeof defaultCreateStyledComponent;
-    useThemeProps?: typeof useThemePropsDefault;
-    componentName?: string;
-}): OverridableComponent<GridTypeMap<{}, "div">>;
-export {};
+import * as React from 'react';
+import { OverridableComponent } from '@mui/types';
+import { GridTypeMap } from './GridProps';
+declare const defaultCreateStyledComponent: import("@mui/styled-engine").CreateStyledComponent<import("../createStyled").MUIStyledCommonProps<any>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}, any>;
+declare function useThemePropsDefault<T extends {}>(props: T): T & {};
+export default function createGrid(options?: {
+    createStyledComponent?: typeof defaultCreateStyledComponent;
+    useThemeProps?: typeof useThemePropsDefault;
+    componentName?: string;
+}): OverridableComponent<GridTypeMap<{}, "div">>;
+export {};

package/Unstable_Grid/gridClasses.d.ts

@@ -1,20 +1,20 @@
-export interface GridClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if `container={true}`. */
-    container: string;
-    /** Styles applied to the root element if `direction="column"`. */
-    'direction-xs-column': string;
-    /** Styles applied to the root element if `direction="column-reverse"`. */
-    'direction-xs-column-reverse': string;
-    /** Styles applied to the root element if `direction="row-reverse"`. */
-    'direction-xs-row-reverse': string;
-    /** Styles applied to the root element if `wrap="nowrap"`. */
-    'wrap-xs-nowrap': string;
-    /** Styles applied to the root element if `wrap="reverse"`. */
-    'wrap-xs-wrap-reverse': string;
-}
-export type GridClassKey = keyof GridClasses;
-export declare function getGridUtilityClass(slot: string): string;
-declare const gridClasses: GridClasses;
-export default gridClasses;
+export interface GridClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if `container={true}`. */
+    container: string;
+    /** Styles applied to the root element if `direction="column"`. */
+    'direction-xs-column': string;
+    /** Styles applied to the root element if `direction="column-reverse"`. */
+    'direction-xs-column-reverse': string;
+    /** Styles applied to the root element if `direction="row-reverse"`. */
+    'direction-xs-row-reverse': string;
+    /** Styles applied to the root element if `wrap="nowrap"`. */
+    'wrap-xs-nowrap': string;
+    /** Styles applied to the root element if `wrap="reverse"`. */
+    'wrap-xs-wrap-reverse': string;
+}
+export type GridClassKey = keyof GridClasses;
+export declare function getGridUtilityClass(slot: string): string;
+declare const gridClasses: GridClasses;
+export default gridClasses;

package/Unstable_Grid/gridGenerator.d.ts

@@ -1,33 +1,33 @@
-import { Breakpoints, Breakpoint } from '../createTheme/createBreakpoints';
-import { Spacing } from '../createTheme/createSpacing';
-import { ResponsiveStyleValue } from '../styleFunctionSx';
-import { GridDirection, GridOwnerState } from './GridProps';
-interface Props {
-    theme: {
-        breakpoints: Breakpoints;
-        spacing?: Spacing;
-    };
-    ownerState: GridOwnerState & {
-        parentDisableEqualOverflow?: boolean;
-    };
-}
-interface Iterator<T> {
-    (appendStyle: (responsiveStyles: Record<string, any>, style: object) => void, value: T): void;
-}
-export declare const filterBreakpointKeys: (breakpointsKeys: Breakpoint[], responsiveKeys: string[]) => Breakpoint[];
-export declare const traverseBreakpoints: <T = unknown>(breakpoints: Breakpoints, responsive: Record<string, any> | T | T[] | undefined, iterator: Iterator<T>) => void;
-export declare const generateGridSizeStyles: ({ theme, ownerState }: Props) => {};
-export declare const generateGridOffsetStyles: ({ theme, ownerState }: Props) => {};
-export declare const generateGridColumnsStyles: ({ theme, ownerState }: Props) => {};
-export declare const generateGridRowSpacingStyles: ({ theme, ownerState }: Props) => {
-    [x: string]: string;
-};
-export declare const generateGridColumnSpacingStyles: ({ theme, ownerState }: Props) => {
-    [x: string]: string;
-};
-export declare const generateGridDirectionStyles: ({ theme, ownerState }: Props) => {};
-export declare const generateGridStyles: ({ ownerState }: Props) => {};
-export declare const generateSizeClassNames: (gridSize: GridOwnerState['gridSize']) => string[];
-export declare const generateSpacingClassNames: (spacing: GridOwnerState['spacing'], smallestBreakpoint?: string) => string[];
-export declare const generateDirectionClasses: (direction: ResponsiveStyleValue<GridDirection> | undefined) => string[];
-export {};
+import { Breakpoints, Breakpoint } from '../createTheme/createBreakpoints';
+import { Spacing } from '../createTheme/createSpacing';
+import { ResponsiveStyleValue } from '../styleFunctionSx';
+import { GridDirection, GridOwnerState } from './GridProps';
+interface Props {
+    theme: {
+        breakpoints: Breakpoints;
+        spacing?: Spacing;
+    };
+    ownerState: GridOwnerState & {
+        parentDisableEqualOverflow?: boolean;
+    };
+}
+interface Iterator<T> {
+    (appendStyle: (responsiveStyles: Record<string, any>, style: object) => void, value: T): void;
+}
+export declare const filterBreakpointKeys: (breakpointsKeys: Breakpoint[], responsiveKeys: string[]) => Breakpoint[];
+export declare const traverseBreakpoints: <T = unknown>(breakpoints: Breakpoints, responsive: Record<string, any> | T | T[] | undefined, iterator: Iterator<T>) => void;
+export declare const generateGridSizeStyles: ({ theme, ownerState }: Props) => {};
+export declare const generateGridOffsetStyles: ({ theme, ownerState }: Props) => {};
+export declare const generateGridColumnsStyles: ({ theme, ownerState }: Props) => {};
+export declare const generateGridRowSpacingStyles: ({ theme, ownerState }: Props) => {
+    [x: string]: string;
+};
+export declare const generateGridColumnSpacingStyles: ({ theme, ownerState }: Props) => {
+    [x: string]: string;
+};
+export declare const generateGridDirectionStyles: ({ theme, ownerState }: Props) => {};
+export declare const generateGridStyles: ({ ownerState }: Props) => {};
+export declare const generateSizeClassNames: (gridSize: GridOwnerState['gridSize']) => string[];
+export declare const generateSpacingClassNames: (spacing: GridOwnerState['spacing'], smallestBreakpoint?: string) => string[];
+export declare const generateDirectionClasses: (direction: ResponsiveStyleValue<GridDirection> | undefined) => string[];
+export {};

package/Unstable_Grid/index.d.ts

@@ -1,5 +1,5 @@
-export { default } from './Grid';
-export { default as createGrid } from './createGrid';
-export * from './GridProps';
-export { default as gridClasses } from './gridClasses';
-export * from './gridClasses';
+export { default } from './Grid';
+export { default as createGrid } from './createGrid';
+export * from './GridProps';
+export { default as gridClasses } from './gridClasses';
+export * from './gridClasses';

package/createBox.spec.d.ts

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

package/createTheme/createSpacing.d.ts

@@ -1,10 +1,10 @@
-export type SpacingOptions = number | Spacing | ((abs: number) => number | string) | ((abs: number | string) => number | string) | ReadonlyArray<string | number>;
-export 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 type SpacingOptions = number | Spacing | ((abs: number) => number | string) | ((abs: number | string) => number | string) | ReadonlyArray<string | number>;
+export 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

@@ -39,14 +39,6 @@ export interface CssVarsProviderConfig<ColorScheme extends string> {
    * @default false
    */
   disableTransitionOnChange?: boolean;
-  /**
-   * 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 interface CreateCssVarsProviderResult<ColorScheme extends string> {

package/cssVars/createCssVarsProvider.js

@@ -13,12 +13,11 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styledEngine = require("@mui/styled-engine");
 var _privateTheming = require("@mui/private-theming");
-var _cssVarsParser = _interopRequireDefault(require("./cssVarsParser"));
 var _ThemeProvider = _interopRequireDefault(require("../ThemeProvider"));
 var _getInitColorSchemeScript = _interopRequireWildcard(require("./getInitColorSchemeScript"));
 var _useCurrentColorScheme = _interopRequireDefault(require("./useCurrentColorScheme"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["colorSchemes", "components", "cssVarPrefix"];
+const _excluded = ["colorSchemes", "components", "generateCssVars", "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); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}';
@@ -32,7 +31,6 @@ function createCssVarsProvider(options) {
     defaultMode: designSystemMode = 'light',
     defaultColorScheme: designSystemColorScheme,
     disableTransitionOnChange: designSystemTransitionOnChange = false,
-    shouldSkipGeneratingVar: designSystemShouldSkipGeneratingVar,
     resolveTheme,
     excludeVariablesFromRoot
   } = options;
@@ -60,7 +58,6 @@ function createCssVarsProvider(options) {
     documentNode = typeof document === 'undefined' ? undefined : document,
     colorSchemeNode = typeof document === 'undefined' ? undefined : document.documentElement,
     colorSchemeSelector = ':root',
-    shouldSkipGeneratingVar = designSystemShouldSkipGeneratingVar,
     disableNestedContext = false,
     disableStyleSheetGeneration = false
   }) {
@@ -71,6 +68,10 @@ function createCssVarsProvider(options) {
     const {
         colorSchemes = {},
         components = {},
+        generateCssVars = () => ({
+          vars: {},
+          css: {}
+        }),
         cssVarPrefix
       } = themeProp,
       restThemeProp = (0, _objectWithoutPropertiesLoose2.default)(themeProp, _excluded);
@@ -128,10 +129,7 @@ function createCssVarsProvider(options) {
     const {
       css: rootCss,
       vars: rootVars
-    } = (0, _cssVarsParser.default)(restThemeProp, {
-      prefix: cssVarPrefix,
-      shouldSkipGeneratingVar
-    });
+    } = generateCssVars();
 
     // 3. Start composing the theme object
     const theme = (0, _extends2.default)({}, restThemeProp, {
@@ -151,10 +149,7 @@ function createCssVarsProvider(options) {
       const {
         css,
         vars
-      } = (0, _cssVarsParser.default)(scheme, {
-        prefix: cssVarPrefix,
-        shouldSkipGeneratingVar
-      });
+      } = generateCssVars(key);
       theme.vars = (0, _utils.deepmerge)(theme.vars, vars);
       if (key === calculatedColorScheme) {
         // 4.1 Merge the selected color scheme to the theme
@@ -193,6 +188,7 @@ function createCssVarsProvider(options) {
         otherColorSchemesStyleSheet[`${colorSchemeSelector === ':root' ? '' : colorSchemeSelector}[${attribute}="${key}"]`] = css;
       }
     });
+    theme.vars = (0, _utils.deepmerge)(theme.vars, rootVars);
 
     // 5. Declaring effects
     // 5.1 Updates the selector value to use the current color scheme which tells CSS to use the proper stylesheet.
@@ -317,10 +313,6 @@ function createCssVarsProvider(options) {
      * The key in the local storage used to store current color scheme.
      */
     modeStorageKey: _propTypes.default.string,
-    /**
-     * A function to determine if the key, value should be attached as CSS Variable
-     */
-    shouldSkipGeneratingVar: _propTypes.default.func,
     /**
      * The window that attaches the 'storage' event listener
      * @default window

package/cssVars/createCssVarsProvider.spec.d.ts

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

package/cssVars/createCssVarsTheme.d.ts

@@ -0,0 +1,10 @@
+import { DefaultCssVarsTheme } from './prepareCssVars';
+interface Theme extends DefaultCssVarsTheme {
+    cssVarPrefix?: string;
+    shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean;
+}
+declare function createCssVarsTheme<T extends Theme, ThemeVars>(theme: T): T & {
+    vars: ThemeVars;
+    generateCssVars: (colorScheme?: string | undefined) => any;
+};
+export default createCssVarsTheme;