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

package/Stack/index.d.ts

@@ -1,5 +1,5 @@
-export { default } from './Stack';
-export { default as createStack } from './createStack';
-export * from './StackProps';
-export { default as stackClasses } from './stackClasses';
-export * from './stackClasses';
+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/Stack/stackClasses.d.ts

@@ -1,8 +1,8 @@
 export interface StackClasses {
-    /** Styles applied to the root element. */
-    root: string;
+  /** 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;
+export default stackClasses;

package/ThemeProvider/ThemeProvider.d.ts

@@ -1,5 +1,4 @@
 import { DefaultTheme } from '@mui/private-theming';
-
 export interface ThemeProviderProps<Theme = DefaultTheme> {
   /**
    * Your component tree.
@@ -22,6 +21,4 @@ export interface ThemeProviderProps<Theme = DefaultTheme> {
  *
  * - [ThemeProvider API](https://mui.com/material-ui/customization/theming/#themeprovider)
  */
-export default function ThemeProvider<T = DefaultTheme>(
-  props: ThemeProviderProps<T>,
-): React.ReactElement<ThemeProviderProps<T>>;
+export default function ThemeProvider<T = DefaultTheme>(props: ThemeProviderProps<T>): React.ReactElement<ThemeProviderProps<T>>;

package/ThemeProvider/index.d.ts

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

package/borders/borders.d.ts

@@ -1,5 +1,4 @@
-import { PropsFor, SimpleStyleFunction, borders } from '../Box';
-
+import { PropsFor, SimpleStyleFunction, borders } from "../Box/index.js";
 export const border: SimpleStyleFunction<'border'>;
 export const borderTop: SimpleStyleFunction<'borderTop'>;
 export const borderRight: SimpleStyleFunction<'borderRight'>;
@@ -11,4 +10,4 @@ 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>;
+export type BordersProps = PropsFor<typeof borders>;

package/borders/index.d.ts

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

package/breakpoints/breakpoints.d.ts

@@ -1,31 +1,19 @@
 import { CSSObject } from '@mui/styled-engine';
-import { Breakpoints } from '../createBreakpoints/createBreakpoints';
-import type { Breakpoint } from '../createTheme';
-import { ResponsiveStyleValue } from '../styleFunctionSx';
-import { StyleFunction } from '../Box';
-
+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 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;
-
+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>;
+export default function breakpoints<Props, Breakpoints extends string = DefaultBreakPoints>(styleFunction: StyleFunction<Props>): StyleFunction<Partial<Record<Breakpoints, Props>> & Props>;

package/breakpoints/index.d.ts

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

package/colorManipulator/colorManipulator.d.ts

@@ -5,7 +5,6 @@ export interface ColorObject {
   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;
@@ -16,15 +15,11 @@ 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 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;
+export function blend(background: string, overlay: string, opacity: number, gamma?: number): string;

package/colorManipulator/index.d.ts

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

package/compose/compose.d.ts

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

package/compose/index.d.ts

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

package/createBox/createBox.d.ts

@@ -1,13 +1,9 @@
 import { OverridableComponent } from '@mui/types';
-import { BoxTypeMap } from '../Box';
-import { Theme as SystemTheme } from '../createTheme';
-
-export default function createBox<
-  T extends object = SystemTheme,
-  AdditionalProps extends Record<string, unknown> = {},
->(options?: {
+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>>;
+}): OverridableComponent<BoxTypeMap<AdditionalProps, 'div', T>>;

package/createBox/index.d.ts

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

package/createBreakpoints/createBreakpoints.d.ts

@@ -1,15 +1,10 @@
 import { OverridableStringUnion } from '@mui/types';
-
 export interface BreakpointOverrides {}
-
-export type Breakpoint = OverridableStringUnion<
-  'xs' | 'sm' | 'md' | 'lg' | 'xl',
-  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
-// #default-branch-switch
+// #host-reference
 export interface Breakpoints {
   keys: Breakpoint[];
   /**
@@ -67,7 +62,6 @@ export interface Breakpoints {
    */
   unit?: string | undefined;
 }
-
 export interface BreakpointsOptions extends Partial<Breakpoints> {
   /**
    * The increment divided by 100 used to implement exclusive breakpoints.
@@ -81,5 +75,4 @@ export interface BreakpointsOptions extends Partial<Breakpoints> {
    */
   unit?: string | undefined;
 }
-
-export default function createBreakpoints(options: BreakpointsOptions): Breakpoints;
+export default function createBreakpoints(options: BreakpointsOptions): Breakpoints;

package/createBreakpoints/index.d.ts

@@ -1,3 +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';
+export { default as unstable_createBreakpoints } from "./createBreakpoints.js";

package/createStyled/createStyled.d.ts

@@ -1,19 +1,13 @@
 import * as React from 'react';
-import {
-  CreateMUIStyled as CreateMUIStyledStyledEngine,
-  CSSInterpolation,
-} from '@mui/styled-engine';
-import styleFunctionSx, { SxProps } from '../styleFunctionSx';
-import { Theme as DefaultTheme } from '../createTheme';
-
+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;
@@ -23,17 +17,11 @@ export interface MuiStyledOptions {
   skipVariantsResolver?: boolean;
   skipSx?: boolean;
 }
-
-export type CreateMUIStyled<Theme extends object = DefaultTheme> = CreateMUIStyledStyledEngine<
-  MUIStyledCommonProps<Theme>,
-  MuiStyledOptions,
-  Theme
->;
-
+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>;
+}): CreateMUIStyled<Theme>;

package/createStyled/index.d.ts

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

package/createTheme/applyStyles.d.ts

@@ -1,6 +1,6 @@
 import { CSSObject } from '@mui/styled-engine';
 export interface ApplyStyles<K extends string> {
-    (key: K, styles: CSSObject): CSSObject;
+  (key: K, styles: CSSObject): CSSObject;
 }
 /**
  * A universal utility to style components with multiple color modes. Always use it from the theme object.
@@ -64,4 +64,4 @@ export interface ApplyStyles<K extends string> {
  *   })
  *```
  */
-export default function applyStyles<K extends string>(key: K, styles: CSSObject): CSSObject;
+export default function applyStyles<K extends string>(key: K, styles: CSSObject): CSSObject;

package/createTheme/createSpacing.d.ts

@@ -1,10 +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;
+  (): 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;
+export default function createSpacing(spacingInput?: SpacingOptions, transform?: Spacing | (() => undefined) | ((abs: number | string) => number | number)): Spacing;

package/createTheme/createTheme.d.ts

@@ -1,25 +1,17 @@
 import { CSSObject } from '@mui/styled-engine';
-import { Breakpoints, BreakpointsOptions } from '../createBreakpoints/createBreakpoints';
-import { Shape, ShapeOptions } from './shape';
-import { Spacing, SpacingOptions } from './createSpacing';
-import { SxConfig, SxProps } from '../styleFunctionSx';
-import { ApplyStyles } from './applyStyles';
-import { CssContainerQueries } from '../cssContainerQueries';
-
-export {
-  Breakpoint,
-  Breakpoints,
-  BreakpointOverrides,
-} from '../createBreakpoints/createBreakpoints';
-
+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;
@@ -34,12 +26,13 @@ export interface ThemeOptions {
   zIndex?: ZIndex;
   unstable_sxConfig?: SxConfig;
 }
-
 export interface Theme extends CssContainerQueries {
   shape: Shape;
   breakpoints: Breakpoints;
   direction: Direction;
-  palette: Record<string, any> & { mode: 'light' | 'dark' };
+  palette: Record<string, any> & {
+    mode: 'light' | 'dark';
+  };
   shadows?: Shadows;
   spacing: Spacing;
   transitions?: Transitions;
@@ -58,4 +51,4 @@ export interface Theme extends CssContainerQueries {
  * @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;
+export default function createTheme(options?: ThemeOptions, ...args: object[]): Theme;

package/createTheme/index.d.ts

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

package/createTheme/shape.d.ts

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

package/cssContainerQueries/cssContainerQueries.d.ts

@@ -1,13 +1,13 @@
-import { Breakpoints } from '../createBreakpoints/createBreakpoints';
+import { Breakpoints } from "../createBreakpoints/createBreakpoints.js";
 export interface ContainerQueries {
-    up: Breakpoints['up'];
-    down: Breakpoints['down'];
-    between: Breakpoints['between'];
-    only: Breakpoints['only'];
-    not: Breakpoints['not'];
+  up: Breakpoints['up'];
+  down: Breakpoints['down'];
+  between: Breakpoints['between'];
+  only: Breakpoints['only'];
+  not: Breakpoints['not'];
 }
 export interface CssContainerQueries {
-    containerQueries: ((name: string) => ContainerQueries) & ContainerQueries;
+  containerQueries: ((name: string) => ContainerQueries) & ContainerQueries;
 }
 /**
  * For using in `sx` prop to sort the breakpoint from low to high.
@@ -19,5 +19,5 @@ export declare function sortContainerQueries(theme: Partial<CssContainerQueries>
 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;
+  breakpoints: Breakpoints;
+}>(themeInput: T): T & CssContainerQueries;

package/cssContainerQueries/index.d.ts

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

package/cssGrid/cssGrid.d.ts

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

package/cssGrid/index.d.ts

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