@mui/system 7.0.0-alpha.0 → 7.0.0-alpha.2

package/esm/createBreakpoints/createBreakpoints.d.ts

@@ -0,0 +1,78 @@
+import { OverridableStringUnion } from '@mui/types';
+export interface BreakpointOverrides {}
+export type Breakpoint = OverridableStringUnion<'xs' | 'sm' | 'md' | 'lg' | 'xl', BreakpointOverrides>;
+export const keys: Breakpoint[];
+
+// Keep in sync with docs/src/pages/customization/breakpoints/breakpoints.md
+// #host-reference
+export interface Breakpoints {
+  keys: Breakpoint[];
+  /**
+   * Each breakpoint (a key) matches with a fixed screen width (a value).
+   * @default {
+   *    // extra-small
+   *    xs: 0,
+   *    // small
+   *    sm: 600,
+   *    // medium
+   *    md: 900,
+   *    // large
+   *    lg: 1200,
+   *    // extra-large
+   *    xl: 1536,
+   * }
+   */
+  values: { [key in Breakpoint]: number };
+  /**
+   * @param key - A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px.
+   * @returns A media query string ready to be used with most styling solutions, which matches screen widths greater than the screen size given by the breakpoint key (inclusive).
+   * @see [API documentation](https://next.mui.com/material-ui/customization/breakpoints/#theme-breakpoints-up-key-media-query)
+   */
+  up: (key: Breakpoint | number) => string;
+  /**
+   * @param key - A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px.
+   * @returns A media query string ready to be used with most styling solutions, which matches screen widths less than the screen size given by the breakpoint key (exclusive).
+   * @see [API documentation](https://next.mui.com/material-ui/customization/breakpoints/#theme-breakpoints-down-key-media-query)
+   */
+  down: (key: Breakpoint | number) => string;
+  /**
+   * @param start - A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px.
+   * @param end - A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px.
+   * @returns A media query string ready to be used with most styling solutions, which matches screen widths greater than
+   *          the screen size given by the breakpoint key in the first argument (inclusive) and less than the screen size given by the breakpoint key in the second argument (exclusive).
+   * @see [API documentation](https://next.mui.com/material-ui/customization/breakpoints/#theme-breakpoints-between-start-end-media-query)
+   */
+  between: (start: Breakpoint | number, end: Breakpoint | number) => string;
+  /**
+   * @param key - A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px.
+   * @returns A media query string ready to be used with most styling solutions, which matches screen widths starting from
+   *          the screen size given by the breakpoint key (inclusive) and stopping at the screen size given by the next breakpoint key (exclusive).
+   * @see [API documentation](https://next.mui.com/material-ui/customization/breakpoints/#theme-breakpoints-only-key-media-query)
+   */
+  only: (key: Breakpoint) => string;
+  /**
+   * @param key - A breakpoint key (`xs`, `sm`, etc.).
+   * @returns A media query string ready to be used with most styling solutions, which matches screen widths stopping at
+   *          the screen size given by the breakpoint key (exclusive) and starting at the screen size given by the next breakpoint key (inclusive).
+   */
+  not: (key: Breakpoint) => string;
+  /**
+   * The unit used for the breakpoint's values.
+   * @default 'px'
+   */
+  unit?: string | undefined;
+}
+export interface BreakpointsOptions extends Partial<Breakpoints> {
+  /**
+   * The increment divided by 100 used to implement exclusive breakpoints.
+   * For example, `step: 5` means that `down(500)` will result in `'(max-width: 499.95px)'`.
+   * @default 5
+   */
+  step?: number | undefined;
+  /**
+   * The unit used for the breakpoint's values.
+   * @default 'px'
+   */
+  unit?: string | undefined;
+}
+export default function createBreakpoints(options: BreakpointsOptions): Breakpoints;

package/esm/createBreakpoints/index.d.ts

@@ -0,0 +1,3 @@
+/** This export is intended for internal integration with Pigment CSS */
+/* eslint-disable import/prefer-default-export */
+export { default as unstable_createBreakpoints } from "./createBreakpoints.js";

package/esm/createStyled/createStyled.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { CreateMUIStyled as CreateMUIStyledStyledEngine, CSSInterpolation } from '@mui/styled-engine';
+import styleFunctionSx, { SxProps } from "../styleFunctionSx/index.js";
+import { Theme as DefaultTheme } from "../createTheme/index.js";
+export function shouldForwardProp(propName: PropertyKey): boolean;
+export interface MUIStyledCommonProps<Theme extends object = DefaultTheme> {
+  theme?: Theme;
+  as?: React.ElementType;
+  sx?: SxProps<Theme>;
+}
+export interface MuiStyledOptions {
+  name?: string;
+  slot?: string;
+  // The difference between Interpolation and CSSInterpolation is that the former supports functions based on props
+  // If we want to support props in the overrides, we will need to change the CSSInterpolation to Interpolation<Props>
+  overridesResolver?: (props: any, styles: Record<string, CSSInterpolation>) => CSSInterpolation;
+  skipVariantsResolver?: boolean;
+  skipSx?: boolean;
+}
+export type CreateMUIStyled<Theme extends object = DefaultTheme> = CreateMUIStyledStyledEngine<MUIStyledCommonProps<Theme>, MuiStyledOptions, Theme>;
+export default function createStyled<Theme extends object = DefaultTheme>(options?: {
+  themeId?: string;
+  defaultTheme?: Theme;
+  rootShouldForwardProp?: (prop: PropertyKey) => boolean;
+  slotShouldForwardProp?: (prop: PropertyKey) => boolean;
+  styleFunctionSx?: typeof styleFunctionSx;
+}): CreateMUIStyled<Theme>;

package/esm/createStyled/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./createStyled.js";
+export * from "./createStyled.js";

package/esm/createTheme/applyStyles.d.ts

@@ -0,0 +1,67 @@
+import { CSSObject } from '@mui/styled-engine';
+export interface ApplyStyles<K extends string> {
+  (key: K, styles: CSSObject): CSSObject;
+}
+/**
+ * A universal utility to style components with multiple color modes. Always use it from the theme object.
+ * It works with:
+ *  - [Basic theme](https://mui.com/material-ui/customization/dark-mode/)
+ *  - [CSS theme variables](https://mui.com/material-ui/customization/css-theme-variables/overview/)
+ *  - Zero-runtime engine
+ *
+ * Tips: Use an array over object spread and place `theme.applyStyles()` last.
+ *
+ * With the styled function:
+ * ✅ [{ background: '#e5e5e5' }, theme.applyStyles('dark', { background: '#1c1c1c' })]
+ * 🚫 { background: '#e5e5e5', ...theme.applyStyles('dark', { background: '#1c1c1c' })}
+ *
+ * With the sx prop:
+ * ✅ [{ background: '#e5e5e5' }, theme => theme.applyStyles('dark', { background: '#1c1c1c' })]
+ * 🚫 { background: '#e5e5e5', ...theme => theme.applyStyles('dark', { background: '#1c1c1c' })}
+ *
+ * @example
+ * 1. using with `styled`:
+ * ```jsx
+ *   const Component = styled('div')(({ theme }) => [
+ *     { background: '#e5e5e5' },
+ *     theme.applyStyles('dark', {
+ *       background: '#1c1c1c',
+ *       color: '#fff',
+ *     }),
+ *   ]);
+ * ```
+ *
+ * @example
+ * 2. using with `sx` prop:
+ * ```jsx
+ *   <Box sx={[
+ *     { background: '#e5e5e5' },
+ *     theme => theme.applyStyles('dark', {
+ *        background: '#1c1c1c',
+ *        color: '#fff',
+ *      }),
+ *     ]}
+ *   />
+ * ```
+ *
+ * @example
+ * 3. theming a component:
+ * ```jsx
+ *   extendTheme({
+ *     components: {
+ *       MuiButton: {
+ *         styleOverrides: {
+ *           root: ({ theme }) => [
+ *             { background: '#e5e5e5' },
+ *             theme.applyStyles('dark', {
+ *               background: '#1c1c1c',
+ *               color: '#fff',
+ *             }),
+ *           ],
+ *         },
+ *       }
+ *     }
+ *   })
+ *```
+ */
+export default function applyStyles<K extends string>(key: K, styles: CSSObject): CSSObject;

package/esm/createTheme/createSpacing.d.ts

@@ -0,0 +1,10 @@
+export type SpacingOptions = number | string | Spacing | ((abs: number) => number | string) | ((abs: number | string) => number | string) | ReadonlyArray<string | number>;
+export type SpacingArgument = number | string;
+export interface Spacing {
+  (): string;
+  (value: SpacingArgument): 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, transform?: Spacing | (() => undefined) | ((abs: number | string) => number | number)): Spacing;

package/esm/createTheme/createTheme.d.ts

@@ -0,0 +1,54 @@
+import { CSSObject } from '@mui/styled-engine';
+import { Breakpoints, BreakpointsOptions } from "../createBreakpoints/createBreakpoints.js";
+import { Shape, ShapeOptions } from "./shape.js";
+import { Spacing, SpacingOptions } from "./createSpacing.js";
+import { SxConfig, SxProps } from "../styleFunctionSx/index.js";
+import { ApplyStyles } from "./applyStyles.js";
+import { CssContainerQueries } from "../cssContainerQueries/index.js";
+export { Breakpoint, Breakpoints, BreakpointOverrides } from "../createBreakpoints/createBreakpoints.js";
+export type Direction = 'ltr' | 'rtl';
+export interface Typography {}
+export interface Mixins {}
+export interface Shadows {}
+export interface Transitions {}
+export interface ZIndex {}
+export interface ThemeOptions {
+  shape?: ShapeOptions;
+  breakpoints?: BreakpointsOptions;
+  direction?: Direction;
+  mixins?: Mixins;
+  palette?: Record<string, any>;
+  shadows?: Shadows;
+  spacing?: SpacingOptions;
+  transitions?: Transitions;
+  components?: Record<string, any>;
+  typography?: Typography;
+  zIndex?: ZIndex;
+  unstable_sxConfig?: SxConfig;
+}
+export interface Theme extends CssContainerQueries {
+  shape: Shape;
+  breakpoints: Breakpoints;
+  direction: Direction;
+  palette: Record<string, any> & {
+    mode: 'light' | 'dark';
+  };
+  shadows?: Shadows;
+  spacing: Spacing;
+  transitions?: Transitions;
+  components?: Record<string, any>;
+  mixins?: Mixins;
+  typography?: Typography;
+  zIndex?: ZIndex;
+  applyStyles: ApplyStyles<'light' | 'dark'>;
+  unstable_sxConfig: SxConfig;
+  unstable_sx: (props: SxProps<Theme>) => CSSObject;
+}
+
+/**
+ * Generate a theme base on the options received.
+ * @param options Takes an incomplete theme object and adds the missing parts.
+ * @param args Deep merge the arguments with the about to be returned theme.
+ * @returns A complete, ready-to-use theme object.
+ */
+export default function createTheme(options?: ThemeOptions, ...args: object[]): Theme;

package/esm/createTheme/index.d.ts

@@ -0,0 +1,4 @@
+export { default } from "./createTheme.js";
+export * from "./createTheme.js";
+export { default as unstable_applyStyles } from "./applyStyles.js";
+export * from "./applyStyles.js";

package/esm/createTheme/shape.d.ts

@@ -0,0 +1,6 @@
+export interface Shape {
+  borderRadius: number;
+}
+export type ShapeOptions = Partial<Shape>;
+declare const shape: Shape;
+export default shape;

package/esm/cssContainerQueries/cssContainerQueries.d.ts

@@ -0,0 +1,23 @@
+import { Breakpoints } from "../createBreakpoints/createBreakpoints.js";
+export interface ContainerQueries {
+  up: Breakpoints['up'];
+  down: Breakpoints['down'];
+  between: Breakpoints['between'];
+  only: Breakpoints['only'];
+  not: Breakpoints['not'];
+}
+export interface CssContainerQueries {
+  containerQueries: ((name: string) => ContainerQueries) & ContainerQueries;
+}
+/**
+ * For using in `sx` prop to sort the breakpoint from low to high.
+ * Note: this function does not work and will not support multiple units.
+ *       e.g. input: { '@container (min-width:300px)': '1rem', '@container (min-width:40rem)': '2rem' }
+ *            output: { '@container (min-width:40rem)': '2rem', '@container (min-width:300px)': '1rem' } // since 40 < 300 eventhough 40rem > 300px
+ */
+export declare function sortContainerQueries(theme: Partial<CssContainerQueries>, css: Record<string, any>): Record<string, any>;
+export declare function isCqShorthand(breakpointKeys: string[], value: string): boolean;
+export declare function getContainerQuery(theme: CssContainerQueries, shorthand: string): string | null;
+export default function cssContainerQueries<T extends {
+  breakpoints: Breakpoints;
+}>(themeInput: T): T & CssContainerQueries;

package/esm/cssContainerQueries/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from "./cssContainerQueries.js";
+export { isCqShorthand, getContainerQuery, sortContainerQueries } from "./cssContainerQueries.js";
+export type { CssContainerQueries } from "./cssContainerQueries.js";

package/esm/cssGrid/cssGrid.d.ts

@@ -0,0 +1,2 @@
+import { PropsFor, grid } from "../Box/index.js";
+export type CssGridProps = PropsFor<typeof grid>;

package/esm/cssGrid/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./cssGrid.js";
+export * from "./cssGrid.js";

package/esm/cssVars/createCssVarsProvider.d.ts

@@ -0,0 +1,129 @@
+import * as React from 'react';
+import InitColorSchemeScript from "../InitColorSchemeScript/index.js";
+import { Result } from "./useCurrentColorScheme.js";
+export interface ColorSchemeContextValue<SupportedColorScheme extends string> extends Result<SupportedColorScheme> {
+  allColorSchemes: SupportedColorScheme[];
+}
+export interface CssVarsProviderConfig<ColorScheme extends string> {
+  /**
+   * DOM attribute for applying color scheme
+   * @default 'data-color-scheme'
+   */
+  attribute?: string;
+  /**
+   * localStorage key used to store application `mode`
+   * @default 'mode'
+   */
+  modeStorageKey?: string;
+  /**
+   * localStorage key used to store `colorScheme`
+   * @default 'color-scheme'
+   */
+  colorSchemeStorageKey?: string;
+  /**
+   * 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
+   */
+  defaultColorScheme: ColorScheme | {
+    light: ColorScheme;
+    dark: ColorScheme;
+  };
+  /**
+   * Disable CSS transitions when switching between modes or color schemes
+   * @default false
+   */
+  disableTransitionOnChange?: boolean;
+}
+type Identify<I extends string | undefined, T> = I extends string ? T | { [k in I]: T } : T;
+export interface CreateCssVarsProviderResult<ColorScheme extends string, Identifier extends string | undefined = undefined> {
+  CssVarsProvider: (props: React.PropsWithChildren<Partial<CssVarsProviderConfig<ColorScheme>> & {
+    theme?: Identify<Identifier, {
+      cssVariables?: false;
+      cssVarPrefix?: string;
+      colorSchemes: Partial<Record<ColorScheme, any>>;
+      colorSchemeSelector?: 'media' | 'class' | 'data' | string;
+    }>;
+    /**
+     * The default mode when the storage is empty,
+     * require the theme to have `colorSchemes` with light and dark.
+     * @default 'system'
+     */
+    defaultMode?: 'light' | 'dark' | 'system';
+    /**
+     * The document used to perform `disableTransitionOnChange` feature
+     * @default document
+     */
+    documentNode?: Document | null;
+    /**
+     * The node used to attach the color-scheme attribute
+     * @default document
+     */
+    colorSchemeNode?: Element | null;
+    /**
+     * The window that attaches the 'storage' event listener
+     * @default window
+     */
+    storageWindow?: Window | null;
+    /**
+     * If `true`, the provider creates its own context and generate stylesheet as if it is a root `CssVarsProvider`.
+     */
+    disableNestedContext?: boolean;
+    /**
+     * If `true`, the style sheet won't be generated.
+     *
+     * This is useful for controlling nested CssVarsProvider behavior.
+     * @default false
+     */
+    disableStyleSheetGeneration?: boolean;
+  }>) => React.JSX.Element;
+  useColorScheme: () => ColorSchemeContextValue<ColorScheme>;
+  getInitColorSchemeScript: typeof InitColorSchemeScript;
+}
+export default function createCssVarsProvider<ColorScheme extends string, Identifier extends string | undefined = undefined>(options: CssVarsProviderConfig<ColorScheme> & {
+  /**
+   * The design system's unique id for getting the corresponded theme when there are multiple design systems.
+   */
+  themeId?: Identifier;
+  /**
+   * 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 }`
+   *
+   * - If the theme contains the same keys as the color scheme, their values will be merged.
+   *  Ex. {
+   *    colorSchemes: {
+   *      light: { palette: { primary: { ... } } },
+   *      dark: { palette: { primary: { ...} } }
+   *    },
+   *    palette: { shared: { ... } }
+   *  }
+   *
+   *  becomes: {
+   *    colorSchemes: { ... },
+   *    palette: { shared: { ... }, primary: { ... } }
+   *  }
+   */
+  theme: any;
+  /**
+   * 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.
+}): CreateCssVarsProviderResult<ColorScheme, Identifier>;
+
+// disable automatic export
+export {};

package/esm/cssVars/createCssVarsTheme.d.ts

@@ -0,0 +1,15 @@
+import { DefaultCssVarsTheme } from "./prepareCssVars.js";
+interface Theme extends DefaultCssVarsTheme {
+  cssVarPrefix?: string;
+  colorSchemeSelector?: 'media' | string;
+  shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean;
+}
+declare function createCssVarsTheme<T extends Theme, ThemeVars extends Record<string, any>>({
+  colorSchemeSelector,
+  ...theme
+}: T): T & {
+  vars: ThemeVars;
+  generateThemeVars: () => ThemeVars;
+  generateStyleSheets: () => Record<string, any>[];
+};
+export default createCssVarsTheme;

package/esm/cssVars/createGetCssVar.d.ts

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

package/esm/cssVars/cssVarsParser.d.ts

@@ -0,0 +1,64 @@
+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: <T extends Record<string, any> | null | undefined | string = NestedRecord<any>, Value = any>(obj: T, 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) => 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 }} `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: '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)' } } }
+ */
+export default function cssVarsParser<T extends Record<string, any>>(theme: Record<string, any>, options?: {
+  prefix?: string;
+  shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean;
+}): {
+  css: Record<string, string | number>;
+  vars: T;
+  varsWithDefaults: {};
+};
+export {};

package/esm/cssVars/getColorSchemeSelector.d.ts

@@ -0,0 +1 @@
+export declare function createGetColorSchemeSelector<T extends string>(selector: 'media' | 'class' | 'data' | string): (colorScheme: T) => string;

package/esm/cssVars/index.d.ts

@@ -0,0 +1,7 @@
+export { default } from "./createCssVarsProvider.js";
+export type { CreateCssVarsProviderResult, CssVarsProviderConfig, ColorSchemeContextValue } from "./createCssVarsProvider.js";
+export { default as prepareCssVars } from "./prepareCssVars.js";
+export { default as prepareTypographyVars } from "./prepareTypographyVars.js";
+export type { ExtractTypographyTokens } from "./prepareTypographyVars.js";
+export { default as createCssVarsTheme } from "./createCssVarsTheme.js";
+export { createGetColorSchemeSelector } from "./getColorSchemeSelector.js";

package/esm/cssVars/prepareCssVars.d.ts

@@ -0,0 +1,16 @@
+export interface DefaultCssVarsTheme {
+  colorSchemes?: Record<string, any>;
+  defaultColorScheme?: string;
+}
+declare function prepareCssVars<T extends DefaultCssVarsTheme, ThemeVars extends Record<string, any>>(theme: T, parserConfig?: {
+  prefix?: string;
+  colorSchemeSelector?: 'media' | 'class' | 'data' | string;
+  disableCssColorScheme?: boolean;
+  shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean;
+  getSelector?: (colorScheme: keyof T['colorSchemes'] | undefined, css: Record<string, any>) => string | Record<string, any>;
+}): {
+  vars: ThemeVars;
+  generateThemeVars: () => ThemeVars;
+  generateStyleSheets: () => Record<string, any>[];
+};
+export default prepareCssVars;

package/esm/cssVars/prepareTypographyVars.d.ts

@@ -0,0 +1,4 @@
+type RecordPropertyNames<T> = { [K in keyof T]: T[K] extends Function ? never : T[K] extends Record<string, any> ? K : never }[keyof T];
+export type ExtractTypographyTokens<T> = { [K in RecordPropertyNames<T>]: string };
+export default function prepareTypographyVars<T extends Record<string, any>>(typography: T): ExtractTypographyTokens<T>;
+export {};

package/esm/cssVars/useCurrentColorScheme.d.ts

@@ -0,0 +1,54 @@
+export type Mode = 'light' | 'dark' | 'system';
+export type SystemMode = Exclude<Mode, 'system'>;
+export interface State<SupportedColorScheme extends string> {
+  /**
+   * User selected mode.
+   * Note: on the server, mode is always undefined
+   */
+  mode: 'light' | 'dark' | 'system' | undefined;
+  /**
+   * Only valid if `mode: 'system'`, either 'light' | 'dark'.
+   */
+  systemMode: 'light' | 'dark' | undefined;
+  /**
+   * The color scheme for the light mode.
+   */
+  lightColorScheme: SupportedColorScheme;
+  /**
+   * The color scheme for the dark mode.
+   */
+  darkColorScheme: SupportedColorScheme;
+}
+export 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;
+interface UseCurrentColoSchemeOptions<SupportedColorScheme extends string> {
+  defaultLightColorScheme: SupportedColorScheme;
+  defaultDarkColorScheme: SupportedColorScheme;
+  supportedColorSchemes: Array<SupportedColorScheme>;
+  defaultMode?: Mode;
+  modeStorageKey?: string;
+  colorSchemeStorageKey?: string;
+  storageWindow?: Window | null;
+  noSsr?: boolean;
+}
+export default function useCurrentColorScheme<SupportedColorScheme extends string>(options: UseCurrentColoSchemeOptions<SupportedColorScheme>): Result<SupportedColorScheme>;
+export {};

package/esm/display/display.d.ts

@@ -0,0 +1,2 @@
+import { PropsFor, display } from "../Box/index.js";
+export type DisplayProps = PropsFor<typeof display>;

package/esm/display/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./display.js";
+export * from "./display.js";

package/esm/flexbox/flexbox.d.ts

@@ -0,0 +1,2 @@
+import { PropsFor, flexbox } from "../Box/index.js";
+export type FlexboxProps = PropsFor<typeof flexbox>;

package/esm/flexbox/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./flexbox.js";
+export * from "./flexbox.js";

package/esm/getThemeValue/getThemeValue.d.ts

@@ -0,0 +1 @@
+export default function getThemeValue(prop: string, value: any, theme: object): any;

package/esm/getThemeValue/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./getThemeValue.js";
+export * from "./getThemeValue.js";