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

package/esm/Container/createContainer.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { Interpolation, MUIStyledComponent as StyledComponent } from '@mui/styled-engine';
+import { OverridableComponent } from '@mui/types';
+import { ContainerProps, ContainerTypeMap } from "./ContainerProps.js";
+import { Theme as DefaultTheme } from "../createTheme/index.js";
+interface StyleFnProps<Theme> extends ContainerProps {
+  theme: Theme;
+  ownerState: ContainerProps;
+}
+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/esm/Container/createContainer.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';

package/esm/Container/index.d.ts

@@ -0,0 +1,4 @@
+export { default } from "./Container.js";
+export * from "./ContainerProps.js";
+export { default as containerClasses } from "./containerClasses.js";
+export * from "./containerClasses.js";

package/esm/DefaultPropsProvider/DefaultPropsProvider.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+declare function DefaultPropsProvider({
+  value,
+  children
+}: React.PropsWithChildren<{
+  value: Record<string, any> | undefined;
+}>): React.JSX.Element;
+declare namespace DefaultPropsProvider {
+  var propTypes: any;
+}
+export declare function useDefaultProps<Props>({
+  props,
+  name
+}: {
+  props: Props;
+  name: string;
+}): Props;
+export default DefaultPropsProvider;

package/esm/DefaultPropsProvider/index.d.ts

@@ -0,0 +1 @@
+export { default, useDefaultProps } from "./DefaultPropsProvider.js";

package/esm/GlobalStyles/GlobalStyles.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { Interpolation } from '@mui/styled-engine';
+import { Theme as SystemTheme } from "../createTheme/index.js";
+export interface GlobalStylesProps<Theme = SystemTheme> {
+  styles: Interpolation<Theme>;
+  defaultTheme?: object;
+  themeId?: string;
+}
+declare function GlobalStyles<Theme = SystemTheme>({
+  styles,
+  themeId,
+  defaultTheme
+}: GlobalStylesProps<Theme>): React.JSX.Element;
+declare namespace GlobalStyles {
+  var propTypes: any;
+}
+export default GlobalStyles;

package/esm/GlobalStyles/index.d.ts

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

package/esm/Grid/Grid.d.ts

@@ -0,0 +1,13 @@
+/**
+ *
+ * Demos:
+ *
+ * - [Grid (Joy UI)](https://mui.com/joy-ui/react-grid/)
+ * - [Grid (Material UI)](https://mui.com/material-ui/react-grid/)
+ *
+ * API:
+ *
+ * - [Grid API](https://mui.com/system/api/grid/)
+ */
+declare const Grid: import("@mui/types").OverridableComponent<import("./GridProps.js").GridTypeMap<{}, "div">>;
+export default Grid;

package/esm/Grid/GridProps.d.ts

@@ -0,0 +1,103 @@
+import * as React from 'react';
+import { OverrideProps, PartiallyRequired } from '@mui/types';
+import { SxProps } from "../styleFunctionSx/index.js";
+import { Theme, Breakpoint } from "../createTheme/index.js";
+import { SystemProps } from "../Box/index.js";
+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' | 'grow' | number | false;
+export type GridOffset = 'auto' | number;
+export interface GridBaseProps {
+  /**
+   * 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>;
+  /**
+   * Defines the offset value for the type `item` components.
+   */
+  offset?: ResponsiveStyleValue<GridOffset>;
+  /**
+   * @internal
+   * The level of the grid starts from `0` and increases when the grid nests
+   * inside another grid. Nesting is defined as a container Grid being a direct
+   * child of a container Grid.
+   *
+   * ```js
+   * <Grid container> // level 0
+   *   <Grid container> // level 1
+   *     <Grid container> // level 2
+   * ```
+   *
+   * Only consecutive grid is considered nesting. A grid container will start at
+   * `0` if there are non-Grid container element above it.
+   *
+   * ```js
+   * <Grid container> // level 0
+   *   <div>
+   *     <Grid container> // level 0
+   * ```
+   *
+   * ```js
+   * <Grid container> // level 0
+   *   <Grid>
+   *     <Grid container> // level 0
+   * ```
+   */
+  unstable_level?: number;
+  /**
+   * Defines the vertical space between the type `item` components.
+   * It overrides the value of the `spacing` prop.
+   */
+  rowSpacing?: ResponsiveStyleValue<GridSpacing>;
+  /**
+   * Defines the size of the the type `item` components.
+   */
+  size?: ResponsiveStyleValue<GridSize>;
+  /**
+   * 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 type GridOwnerState = PartiallyRequired<GridBaseProps, 'size' | 'offset' | 'unstable_level'>;
+export interface GridTypeMap<AdditionalProps = {}, DefaultComponent extends React.ElementType = 'div'> {
+  props: AdditionalProps & GridBaseProps & {
+    sx?: SxProps<Theme>;
+  } & SystemProps<Theme>;
+  defaultComponent: DefaultComponent;
+}
+export type GridProps<RootComponent extends React.ElementType = GridTypeMap['defaultComponent'], AdditionalProps = {
+  component?: React.ElementType;
+}> = OverrideProps<GridTypeMap<AdditionalProps, RootComponent>, RootComponent>;
+export {};

package/esm/Grid/createGrid.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { OverridableComponent } from '@mui/types';
+import useThemeSystem from "../useTheme/index.js";
+import { GridTypeMap } from "./GridProps.js";
+declare const defaultCreateStyledComponent: import("@mui/styled-engine").CreateStyledComponent<import("../createStyled/index.js").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;
+  useTheme?: typeof useThemeSystem;
+  componentName?: string;
+}): OverridableComponent<GridTypeMap<{}, "div">>;
+export {};

package/esm/Grid/createGrid.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';

package/esm/Grid/gridClasses.d.ts

@@ -0,0 +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;

package/esm/Grid/gridGenerator.d.ts

@@ -0,0 +1,42 @@
+import { Breakpoints } from "../createBreakpoints/createBreakpoints.js";
+import { Spacing } from "../createTheme/createSpacing.js";
+import { ResponsiveStyleValue } from "../styleFunctionSx/index.js";
+import { GridDirection, GridOwnerState } from "./GridProps.js";
+interface Props {
+  theme: {
+    breakpoints: Breakpoints;
+    spacing?: Spacing;
+  };
+  ownerState: GridOwnerState;
+}
+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) => {};
+export declare const generateGridColumnSpacingStyles: ({
+  theme,
+  ownerState
+}: Props) => {};
+export declare const generateGridDirectionStyles: ({
+  theme,
+  ownerState
+}: Props) => {};
+export declare const generateGridStyles: ({
+  ownerState
+}: Props) => {};
+export declare const generateSizeClassNames: (size: GridOwnerState["size"]) => string[];
+export declare const generateSpacingClassNames: (spacing: GridOwnerState["spacing"], smallestBreakpoint?: string) => string[];
+export declare const generateDirectionClasses: (direction: ResponsiveStyleValue<GridDirection> | undefined) => string[];
+export {};

package/esm/Grid/index.d.ts

@@ -0,0 +1,7 @@
+export { default } from "./Grid.js";
+export { default as createGrid } from "./createGrid.js";
+export * from "./GridProps.js";
+export { default as gridClasses } from "./gridClasses.js";
+export * from "./gridClasses.js";
+export { traverseBreakpoints as unstable_traverseBreakpoints } from "./traverseBreakpoints.js";
+export { generateDirectionClasses as unstable_generateDirectionClasses, generateSizeClassNames as unstable_generateSizeClassNames, generateSpacingClassNames as unstable_generateSpacingClassNames } from "./gridGenerator.js";

package/esm/Grid/traverseBreakpoints.d.ts

@@ -0,0 +1,7 @@
+import { Breakpoints, Breakpoint } from "../createBreakpoints/createBreakpoints.js";
+export declare const filterBreakpointKeys: (breakpointsKeys: Breakpoint[], responsiveKeys: string[]) => Breakpoint[];
+interface Iterator<T> {
+  (appendStyle: (responsiveStyles: Record<string, any>, style: object) => void, value: T): void;
+}
+export declare const traverseBreakpoints: <T = unknown>(breakpoints: Breakpoints, responsive: T | T[] | Record<string, any> | undefined, iterator: Iterator<T>) => void;
+export {};

package/esm/InitColorSchemeScript/InitColorSchemeScript.d.ts

@@ -0,0 +1,51 @@
+/**
+ * Split this component for RSC import
+ */
+import * as React from 'react';
+export declare const DEFAULT_MODE_STORAGE_KEY = "mode";
+export declare const DEFAULT_COLOR_SCHEME_STORAGE_KEY = "color-scheme";
+export declare const DEFAULT_ATTRIBUTE = "data-color-scheme";
+export interface InitColorSchemeScriptProps {
+  /**
+   * The default mode when the storage is empty (user's first visit).
+   * @default 'system'
+   */
+  defaultMode?: 'system' | 'light' | 'dark';
+  /**
+   * The default color scheme to be used on the light mode.
+   * @default 'light'
+   */
+  defaultLightColorScheme?: string;
+  /**
+   * The default color scheme to be used on the dark mode.
+   * * @default 'dark'
+   */
+  defaultDarkColorScheme?: string;
+  /**
+   * The node (provided as string) used to attach the color-scheme attribute.
+   * @default 'document.documentElement'
+   */
+  colorSchemeNode?: string;
+  /**
+   * localStorage key used to store `mode`.
+   * @default 'mode'
+   */
+  modeStorageKey?: string;
+  /**
+   * localStorage key used to store `colorScheme`.
+   * @default 'color-scheme'
+   */
+  colorSchemeStorageKey?: string;
+  /**
+   * DOM attribute for applying color scheme.
+   * @default 'data-color-scheme'
+   * @example '.mode-%s' // for class based color scheme
+   * @example '[data-mode-%s]' // for data-attribute without '='
+   */
+  attribute?: 'class' | 'data' | string;
+  /**
+   * Nonce string to pass to the inline script for CSP headers.
+   */
+  nonce?: string | undefined;
+}
+export default function InitColorSchemeScript(options?: InitColorSchemeScriptProps): React.JSX.Element;

package/esm/InitColorSchemeScript/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./InitColorSchemeScript.js";
+export type { InitColorSchemeScriptProps } from "./InitColorSchemeScript.js";

package/esm/RtlProvider/index.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+interface RtlProviderProps {
+  children?: React.ReactNode;
+  value?: boolean;
+}
+declare const RtlProvider: React.FC<RtlProviderProps>;
+export const useRtl: () => boolean;
+export default RtlProvider;

package/esm/Stack/Stack.d.ts

@@ -0,0 +1,14 @@
+/**
+ *
+ * Demos:
+ *
+ * - [Stack (Joy UI)](https://mui.com/joy-ui/react-stack/)
+ * - [Stack (Material UI)](https://mui.com/material-ui/react-stack/)
+ * - [Stack (MUI System)](https://mui.com/system/react-stack/)
+ *
+ * API:
+ *
+ * - [Stack API](https://mui.com/system/api/stack/)
+ */
+declare const Stack: import("@mui/types").OverridableComponent<import("./StackProps.js").StackTypeMap<{}, "div">>;
+export default Stack;

package/esm/Stack/StackProps.d.ts

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { OverrideProps } from '@mui/types';
+import { ResponsiveStyleValue, SxProps } from "../styleFunctionSx/index.js";
+import { SystemProps } from "../Box/index.js";
+import { Theme } from "../createTheme/index.js";
+export interface StackBaseProps {
+  /**
+   * The content of the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Defines the `flex-direction` style property.
+   * It is applied for all screen sizes.
+   * @default 'column'
+   */
+  direction?: ResponsiveStyleValue<'row' | 'row-reverse' | 'column' | 'column-reverse'>;
+  /**
+   * Defines the space between immediate children.
+   * @default 0
+   */
+  spacing?: ResponsiveStyleValue<number | string>;
+  /**
+   * Add an element between each child.
+   */
+  divider?: React.ReactNode;
+  /**
+   * If `true`, the CSS flexbox `gap` is used instead of applying `margin` to children.
+   *
+   * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack/#limitations),
+   * it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag.
+   *
+   * To enable this flag globally, follow the theme's default props configuration.
+   * @default false
+   */
+  useFlexGap?: boolean;
+}
+export interface StackTypeMap<AdditionalProps = {}, DefaultComponent extends React.ElementType = 'div'> {
+  props: AdditionalProps & StackBaseProps & {
+    /**
+     * The system prop, which allows defining system overrides as well as additional CSS styles.
+     */
+    sx?: SxProps<Theme>;
+  } & SystemProps<Theme>;
+  defaultComponent: DefaultComponent;
+}
+export type StackProps<RootComponent extends React.ElementType = StackTypeMap['defaultComponent'], AdditionalProps = {
+  component?: React.ElementType;
+}> = OverrideProps<StackTypeMap<AdditionalProps, RootComponent>, RootComponent>;
+export interface StackOwnerState {
+  direction: StackProps['direction'];
+  spacing: StackProps['spacing'];
+  useFlexGap: boolean;
+}

package/esm/Stack/createStack.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { OverridableComponent } from '@mui/types';
+import { StackTypeMap, StackOwnerState } from "./StackProps.js";
+import { Breakpoints } from "../createBreakpoints/createBreakpoints.js";
+import { Spacing } from "../createTheme/createSpacing.js";
+interface StyleFunctionProps {
+  theme: {
+    breakpoints: Breakpoints;
+    spacing: Spacing;
+  };
+  ownerState: StackOwnerState;
+}
+declare const defaultCreateStyledComponent: import("@mui/styled-engine").CreateStyledComponent<import("../createStyled/index.js").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 declare const style: ({
+  ownerState,
+  theme
+}: StyleFunctionProps) => any;
+export default function createStack(options?: {
+  createStyledComponent?: typeof defaultCreateStyledComponent;
+  useThemeProps?: typeof useThemePropsDefault;
+  componentName?: string;
+}): OverridableComponent<StackTypeMap<{}, "div">>;
+export {};

package/esm/Stack/createStack.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';

package/esm/Stack/index.d.ts

@@ -0,0 +1,5 @@
+export { default } from "./Stack.js";
+export { default as createStack } from "./createStack.js";
+export * from "./StackProps.js";
+export { default as stackClasses } from "./stackClasses.js";
+export * from "./stackClasses.js";

package/esm/Stack/stackClasses.d.ts

@@ -0,0 +1,8 @@
+export interface StackClasses {
+  /** Styles applied to the root element. */
+  root: string;
+}
+export type StackClassKey = keyof StackClasses;
+export declare function getStackUtilityClass(slot: string): string;
+declare const stackClasses: StackClasses;
+export default stackClasses;

package/esm/ThemeProvider/ThemeProvider.d.ts

@@ -0,0 +1,24 @@
+import { DefaultTheme } from '@mui/private-theming';
+export interface ThemeProviderProps<Theme = DefaultTheme> {
+  /**
+   * Your component tree.
+   */
+  children?: React.ReactNode;
+  /**
+   * The design system's unique id for getting the corresponded theme when there are multiple design systems.
+   */
+  themeId?: string;
+  /**
+   * A theme object. You can provide a function to extend the outer theme.
+   */
+  theme: Partial<Theme> | ((outerTheme: Theme) => Theme);
+}
+
+/**
+ * This component makes the `theme` available down the React tree.
+ * It should preferably be used at **the root of your component tree**.
+ * API:
+ *
+ * - [ThemeProvider API](https://mui.com/material-ui/customization/theming/#themeprovider)
+ */
+export default function ThemeProvider<T = DefaultTheme>(props: ThemeProviderProps<T>): React.ReactElement<ThemeProviderProps<T>>;

package/esm/ThemeProvider/index.d.ts

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

package/esm/borders/borders.d.ts

@@ -0,0 +1,13 @@
+import { PropsFor, SimpleStyleFunction, borders } from "../Box/index.js";
+export const border: SimpleStyleFunction<'border'>;
+export const borderTop: SimpleStyleFunction<'borderTop'>;
+export const borderRight: SimpleStyleFunction<'borderRight'>;
+export const borderBottom: SimpleStyleFunction<'borderBottom'>;
+export const borderLeft: SimpleStyleFunction<'borderLeft'>;
+export const borderColor: SimpleStyleFunction<'borderColor'>;
+export const borderTopColor: SimpleStyleFunction<'borderTopColor'>;
+export const borderRightColor: SimpleStyleFunction<'borderRightColor'>;
+export const borderBottomColor: SimpleStyleFunction<'borderBottomColor'>;
+export const borderLeftColor: SimpleStyleFunction<'borderLeftColor'>;
+export const borderRadius: SimpleStyleFunction<'borderRadius'>;
+export type BordersProps = PropsFor<typeof borders>;

package/esm/borders/index.d.ts

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

package/esm/breakpoints/breakpoints.d.ts

@@ -0,0 +1,19 @@
+import { CSSObject } from '@mui/styled-engine';
+import { Breakpoints } from "../createBreakpoints/createBreakpoints.js";
+import type { Breakpoint } from "../createTheme/index.js";
+import { ResponsiveStyleValue } from "../styleFunctionSx/index.js";
+import { StyleFunction } from "../Box/index.js";
+export interface ResolveBreakpointValuesOptions<T> {
+  values: ResponsiveStyleValue<T>;
+  breakpoints?: Breakpoints['values'];
+  base?: Record<string, boolean>;
+}
+export function resolveBreakpointValues<T>(options: ResolveBreakpointValuesOptions<T>): Record<string, T>;
+export function mergeBreakpointsInOrder(breakpoints: Breakpoints, styles: CSSObject[]): CSSObject;
+export function handleBreakpoints<Props>(props: Props, propValue: any, styleFromPropValue: (value: any, breakpoint?: Breakpoint) => any): any;
+type DefaultBreakPoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+/**
+ * @returns An enhanced stylefunction that considers breakpoints
+ */
+export default function breakpoints<Props, Breakpoints extends string = DefaultBreakPoints>(styleFunction: StyleFunction<Props>): StyleFunction<Partial<Record<Breakpoints, Props>> & Props>;

package/esm/breakpoints/index.d.ts

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

package/esm/colorManipulator/colorManipulator.d.ts

@@ -0,0 +1,25 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+export type ColorFormat = 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'color';
+export interface ColorObject {
+  type: ColorFormat;
+  values: [number, number, number] | [number, number, number, number];
+  colorSpace?: 'srgb' | 'display-p3' | 'a98-rgb' | 'prophoto-rgb' | 'rec-2020';
+}
+export function hexToRgb(hex: string): string;
+export function rgbToHex(color: string): string;
+export function hslToRgb(color: string): string;
+export function decomposeColor(color: string): ColorObject;
+export function colorChannel(color: string): string;
+export function private_safeColorChannel(color: string, warning?: string): string;
+export function recomposeColor(color: ColorObject): string;
+export function getContrastRatio(foreground: string, background: string): number;
+export function getLuminance(color: string): number;
+export function emphasize(color: string, coefficient?: number): string;
+export function private_safeEmphasize(color: string, coefficient?: number, warning?: string): string;
+export function alpha(color: string, value: number): string;
+export function private_safeAlpha(color: string, value: number, warning?: string): string;
+export function darken(color: string, coefficient: number): string;
+export function private_safeDarken(color: string, coefficient: number, warning?: string): string;
+export function lighten(color: string, coefficient: number): string;
+export function private_safeLighten(color: string, coefficient: number, warning?: string): string;
+export function blend(background: string, overlay: string, opacity: number, gamma?: number): string;

package/esm/colorManipulator/index.d.ts

@@ -0,0 +1 @@
+export * from "./colorManipulator.js";

package/esm/compose/compose.d.ts

@@ -0,0 +1,2 @@
+import { ComposedStyleFunction, StyleFunction } from "../Box/index.js";
+export default function compose<T extends Array<StyleFunction<any>>>(...args: T): ComposedStyleFunction<T>;

package/esm/compose/index.d.ts

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

package/esm/createBox/createBox.d.ts

@@ -0,0 +1,9 @@
+import { OverridableComponent } from '@mui/types';
+import { BoxTypeMap } from "../Box/index.js";
+import { Theme as SystemTheme } from "../createTheme/index.js";
+export default function createBox<T extends object = SystemTheme, AdditionalProps extends Record<string, unknown> = {}>(options?: {
+  themeId?: string;
+  defaultTheme: T;
+  defaultClassName?: string;
+  generateClassName?: (componentName: string) => string;
+}): OverridableComponent<BoxTypeMap<AdditionalProps, 'div', T>>;

package/esm/createBox/index.d.ts

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