@mui/system 6.4.3 → 7.0.0-alpha.1

package/InitColorSchemeScript/InitColorSchemeScript.d.ts

@@ -6,46 +6,46 @@ 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;
+  /**
+   * 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;
+export default function InitColorSchemeScript(options?: InitColorSchemeScriptProps): React.JSX.Element;

package/InitColorSchemeScript/index.d.ts

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

package/README.md

@@ -6,14 +6,14 @@ MUI System is a set of CSS utilities to help you build custom designs more effi
 
 Install the package in your project directory with:
 
-<!-- #default-branch-switch -->
+<!-- #npm-tag-reference -->
 
 ```bash
-npm install @mui/system @emotion/react @emotion/styled
+npm install @mui/system@next @emotion/react @emotion/styled
 ```
 
 ## Documentation
 
-<!-- #default-branch-switch -->
+<!-- #host-reference -->
 
-Visit [https://mui.com/system/getting-started/](https://mui.com/system/getting-started/) to view the full documentation.
+Visit [https://next.mui.com/system/getting-started/](https://next.mui.com/system/getting-started/) to view the full documentation.

package/RtlProvider/index.d.ts

@@ -1,11 +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;
+export default RtlProvider;

package/Stack/Stack.d.ts

@@ -10,5 +10,5 @@
  *
  * - [Stack API](https://mui.com/system/api/stack/)
  */
-declare const Stack: import("@mui/types").OverridableComponent<import("./StackProps").StackTypeMap<{}, "div">>;
-export default Stack;
+declare const Stack: import("@mui/types").OverridableComponent<import("./StackProps.js").StackTypeMap<{}, "div">>;
+export default Stack;

package/Stack/StackProps.d.ts

@@ -1,53 +1,53 @@
 import * as React from 'react';
 import { OverrideProps } from '@mui/types';
-import { ResponsiveStyleValue, SxProps } from '../styleFunctionSx';
-import { SystemProps } from '../Box';
-import { Theme } from '../createTheme';
+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;
+  /**
+   * 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;
+  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;
+  component?: React.ElementType;
 }> = OverrideProps<StackTypeMap<AdditionalProps, RootComponent>, RootComponent>;
 export interface StackOwnerState {
-    direction: StackProps['direction'];
-    spacing: StackProps['spacing'];
-    useFlexGap: boolean;
-}
+  direction: StackProps['direction'];
+  spacing: StackProps['spacing'];
+  useFlexGap: boolean;
+}

package/Stack/createStack.d.ts

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

package/Stack/createStack.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

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[];
   /**
@@ -31,13 +26,13 @@ export interface Breakpoints {
   /**
    * @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://mui.com/material-ui/customization/breakpoints/#theme-breakpoints-up-key-media-query)
+   * @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://mui.com/material-ui/customization/breakpoints/#theme-breakpoints-down-key-media-query)
+   * @see [API documentation](https://next.mui.com/material-ui/customization/breakpoints/#theme-breakpoints-down-key-media-query)
    */
   down: (key: Breakpoint | number) => string;
   /**
@@ -45,14 +40,14 @@ export interface Breakpoints {
    * @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://mui.com/material-ui/customization/breakpoints/#theme-breakpoints-between-start-end-media-query)
+   * @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://mui.com/material-ui/customization/breakpoints/#theme-breakpoints-only-key-media-query)
+   * @see [API documentation](https://next.mui.com/material-ui/customization/breakpoints/#theme-breakpoints-only-key-media-query)
    */
   only: (key: Breakpoint) => string;
   /**
@@ -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;