@mui/system 7.3.8 → 9.0.0-alpha.1

package/Grid/createGrid.js

@@ -16,10 +16,8 @@ var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"
 var _styled = _interopRequireDefault(require("../styled"));
 var _useThemeProps = _interopRequireDefault(require("../useThemeProps"));
 var _useTheme = _interopRequireDefault(require("../useTheme"));
-var _styleFunctionSx = require("../styleFunctionSx");
 var _createTheme = _interopRequireDefault(require("../createTheme"));
 var _gridGenerator = require("./gridGenerator");
-var _deleteLegacyGridProps = _interopRequireDefault(require("./deleteLegacyGridProps"));
 var _jsxRuntime = require("react/jsx-runtime");
 const defaultTheme = (0, _createTheme.default)();
 
@@ -83,10 +81,7 @@ function createGrid(options = {}) {
   const Grid = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
     const theme = useTheme();
     const themeProps = useThemeProps(inProps);
-    const props = (0, _styleFunctionSx.extendSxProp)(themeProps); // `color` type conflicts with html color attribute.
-
-    // TODO v8: Remove when removing the legacy Grid component
-    (0, _deleteLegacyGridProps.default)(props, theme.breakpoints);
+    const props = themeProps;
     const {
       className,
       children,

package/{esm/Grid/createGrid.js → Grid/createGrid.mjs}

@@ -6,13 +6,11 @@ import clsx from 'clsx';
 import isMuiElement from '@mui/utils/isMuiElement';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import composeClasses from '@mui/utils/composeClasses';
-import systemStyled from "../styled/index.js";
-import useThemePropsSystem from "../useThemeProps/index.js";
-import useThemeSystem from "../useTheme/index.js";
-import { extendSxProp } from "../styleFunctionSx/index.js";
-import createTheme from "../createTheme/index.js";
-import { generateGridStyles, generateGridSizeStyles, generateGridColumnsStyles, generateGridColumnSpacingStyles, generateGridRowSpacingStyles, generateGridDirectionStyles, generateGridOffsetStyles, generateSizeClassNames, generateSpacingClassNames, generateDirectionClasses } from "./gridGenerator.js";
-import deleteLegacyGridProps from "./deleteLegacyGridProps.js";
+import systemStyled from "../styled/index.mjs";
+import useThemePropsSystem from "../useThemeProps/index.mjs";
+import useThemeSystem from "../useTheme/index.mjs";
+import createTheme from "../createTheme/index.mjs";
+import { generateGridStyles, generateGridSizeStyles, generateGridColumnsStyles, generateGridColumnSpacingStyles, generateGridRowSpacingStyles, generateGridDirectionStyles, generateGridOffsetStyles, generateSizeClassNames, generateSpacingClassNames, generateDirectionClasses } from "./gridGenerator.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 const defaultTheme = createTheme();
 
@@ -76,10 +74,7 @@ export default function createGrid(options = {}) {
   const Grid = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
     const theme = useTheme();
     const themeProps = useThemeProps(inProps);
-    const props = extendSxProp(themeProps); // `color` type conflicts with html color attribute.
-
-    // TODO v8: Remove when removing the legacy Grid component
-    deleteLegacyGridProps(props, theme.breakpoints);
+    const props = themeProps;
     const {
       className,
       children,

package/{esm/Grid/gridGenerator.d.ts → Grid/gridGenerator.d.mts}

@@ -1,11 +1,11 @@
-import { Breakpoints } from "../createBreakpoints/createBreakpoints.js";
-import { Spacing } from "../createTheme/createSpacing.js";
-import { ResponsiveStyleValue } from "../styleFunctionSx/index.js";
-import { GridDirection, GridOwnerState } from "./GridProps.js";
+import { Breakpoints } from "../createBreakpoints/createBreakpoints.mjs";
+import { Spacing } from "../createTheme/createSpacing.mjs";
+import { ResponsiveStyleValue } from "../styleFunctionSx/index.mjs";
+import { GridDirection, GridOwnerState } from "./GridProps.mjs";
 interface Props {
   theme: {
     breakpoints: Breakpoints;
-    spacing?: Spacing;
+    spacing?: Spacing | undefined;
   };
   ownerState: GridOwnerState;
 }

package/Grid/gridGenerator.d.ts

@@ -5,7 +5,7 @@ import { GridDirection, GridOwnerState } from "./GridProps.js";
 interface Props {
   theme: {
     breakpoints: Breakpoints;
-    spacing?: Spacing;
+    spacing?: Spacing | undefined;
   };
   ownerState: GridOwnerState;
 }

package/{esm/Grid/gridGenerator.js → Grid/gridGenerator.mjs}

@@ -1,4 +1,4 @@
-import { traverseBreakpoints } from "./traverseBreakpoints.js";
+import { traverseBreakpoints } from "./traverseBreakpoints.mjs";
 function getSelfSpacingVar(axis) {
   return `--Grid-${axis}Spacing`;
 }

package/Grid/index.d.mts

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

package/Grid/index.mjs

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

package/{esm/Grid/traverseBreakpoints.d.ts → Grid/traverseBreakpoints.d.mts}

@@ -1,4 +1,4 @@
-import { Breakpoints, Breakpoint } from "../createBreakpoints/createBreakpoints.js";
+import { Breakpoints, Breakpoint } from "../createBreakpoints/createBreakpoints.mjs";
 export declare const filterBreakpointKeys: (breakpointsKeys: Breakpoint[], responsiveKeys: string[]) => Breakpoint[];
 interface Iterator<T> {
   (appendStyle: (responsiveStyles: Record<string, any>, style: object) => void, value: T): void;

package/{esm/InitColorSchemeScript/InitColorSchemeScript.d.ts → InitColorSchemeScript/InitColorSchemeScript.d.mts}

@@ -6,39 +6,39 @@ export interface InitColorSchemeScriptProps {
    * The default mode when the storage is empty (user's first visit).
    * @default 'system'
    */
-  defaultMode?: 'system' | 'light' | 'dark';
+  defaultMode?: 'system' | 'light' | 'dark' | undefined;
   /**
    * The default color scheme to be used on the light mode.
    * @default 'light'
    */
-  defaultLightColorScheme?: string;
+  defaultLightColorScheme?: string | undefined;
   /**
    * The default color scheme to be used on the dark mode.
    * * @default 'dark'
    */
-  defaultDarkColorScheme?: string;
+  defaultDarkColorScheme?: string | undefined;
   /**
    * The node (provided as string) used to attach the color-scheme attribute.
    * @default 'document.documentElement'
    */
-  colorSchemeNode?: string;
+  colorSchemeNode?: string | undefined;
   /**
    * localStorage key used to store `mode`.
    * @default 'mode'
    */
-  modeStorageKey?: string;
+  modeStorageKey?: string | undefined;
   /**
    * localStorage key used to store `colorScheme`.
    * @default 'color-scheme'
    */
-  colorSchemeStorageKey?: string;
+  colorSchemeStorageKey?: string | undefined;
   /**
    * 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;
+  attribute?: 'class' | 'data' | string | undefined;
   /**
    * Nonce string to pass to the inline script for CSP headers.
    */

package/InitColorSchemeScript/InitColorSchemeScript.d.ts

@@ -6,39 +6,39 @@ export interface InitColorSchemeScriptProps {
    * The default mode when the storage is empty (user's first visit).
    * @default 'system'
    */
-  defaultMode?: 'system' | 'light' | 'dark';
+  defaultMode?: 'system' | 'light' | 'dark' | undefined;
   /**
    * The default color scheme to be used on the light mode.
    * @default 'light'
    */
-  defaultLightColorScheme?: string;
+  defaultLightColorScheme?: string | undefined;
   /**
    * The default color scheme to be used on the dark mode.
    * * @default 'dark'
    */
-  defaultDarkColorScheme?: string;
+  defaultDarkColorScheme?: string | undefined;
   /**
    * The node (provided as string) used to attach the color-scheme attribute.
    * @default 'document.documentElement'
    */
-  colorSchemeNode?: string;
+  colorSchemeNode?: string | undefined;
   /**
    * localStorage key used to store `mode`.
    * @default 'mode'
    */
-  modeStorageKey?: string;
+  modeStorageKey?: string | undefined;
   /**
    * localStorage key used to store `colorScheme`.
    * @default 'color-scheme'
    */
-  colorSchemeStorageKey?: string;
+  colorSchemeStorageKey?: string | undefined;
   /**
    * 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;
+  attribute?: 'class' | 'data' | string | undefined;
   /**
    * Nonce string to pass to the inline script for CSP headers.
    */

package/InitColorSchemeScript/index.d.mts

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

package/InitColorSchemeScript/index.mjs

@@ -0,0 +1 @@
+export { default } from "./InitColorSchemeScript.mjs";

package/README.md

@@ -9,11 +9,11 @@ Install the package in your project directory with:
 <!-- #npm-tag-reference -->
 
 ```bash
-npm install @mui/system @emotion/react @emotion/styled
+npm install @mui/system@next @emotion/react @emotion/styled
 ```
 
 ## Documentation
 
 <!-- #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/{esm/RtlProvider/index.d.ts → RtlProvider/index.d.mts}

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

package/RtlProvider/index.d.ts

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

package/{esm/Stack/Stack.d.ts → Stack/Stack.d.mts}

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

package/{esm/Stack/Stack.js → Stack/Stack.mjs}

@@ -1,7 +1,7 @@
 'use client';
 
 import PropTypes from 'prop-types';
-import createStack from "./createStack.js";
+import createStack from "./createStack.mjs";
 /**
  *
  * Demos:

package/{esm/Stack/StackProps.d.ts → Stack/StackProps.d.mts}

@@ -1,8 +1,8 @@
 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";
+import { ResponsiveStyleValue, SxProps } from "../styleFunctionSx/index.mjs";
+import { SystemProps } from "../Box/index.mjs";
+import { Theme } from "../createTheme/index.mjs";
 export interface StackBaseProps {
   /**
    * The content of the component.
@@ -13,12 +13,12 @@ export interface StackBaseProps {
    * It is applied for all screen sizes.
    * @default 'column'
    */
-  direction?: ResponsiveStyleValue<'row' | 'row-reverse' | 'column' | 'column-reverse'>;
+  direction?: ResponsiveStyleValue<'row' | 'row-reverse' | 'column' | 'column-reverse'> | undefined;
   /**
    * Defines the space between immediate children.
    * @default 0
    */
-  spacing?: ResponsiveStyleValue<number | string>;
+  spacing?: ResponsiveStyleValue<number | string> | undefined;
   /**
    * Add an element between each child.
    */
@@ -32,19 +32,19 @@ export interface StackBaseProps {
    * To enable this flag globally, follow the theme's default props configuration.
    * @default false
    */
-  useFlexGap?: boolean;
+  useFlexGap?: boolean | undefined;
 }
 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>;
+    sx?: SxProps<Theme> | undefined;
   } & SystemProps<Theme>;
   defaultComponent: DefaultComponent;
 }
 export type StackProps<RootComponent extends React.ElementType = StackTypeMap['defaultComponent'], AdditionalProps = {
-  component?: React.ElementType;
+  component?: React.ElementType | undefined;
 }> = OverrideProps<StackTypeMap<AdditionalProps, RootComponent>, RootComponent>;
 export interface StackOwnerState {
   direction: StackProps['direction'];

package/Stack/StackProps.d.ts

@@ -13,12 +13,12 @@ export interface StackBaseProps {
    * It is applied for all screen sizes.
    * @default 'column'
    */
-  direction?: ResponsiveStyleValue<'row' | 'row-reverse' | 'column' | 'column-reverse'>;
+  direction?: ResponsiveStyleValue<'row' | 'row-reverse' | 'column' | 'column-reverse'> | undefined;
   /**
    * Defines the space between immediate children.
    * @default 0
    */
-  spacing?: ResponsiveStyleValue<number | string>;
+  spacing?: ResponsiveStyleValue<number | string> | undefined;
   /**
    * Add an element between each child.
    */
@@ -32,19 +32,19 @@ export interface StackBaseProps {
    * To enable this flag globally, follow the theme's default props configuration.
    * @default false
    */
-  useFlexGap?: boolean;
+  useFlexGap?: boolean | undefined;
 }
 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>;
+    sx?: SxProps<Theme> | undefined;
   } & SystemProps<Theme>;
   defaultComponent: DefaultComponent;
 }
 export type StackProps<RootComponent extends React.ElementType = StackTypeMap['defaultComponent'], AdditionalProps = {
-  component?: React.ElementType;
+  component?: React.ElementType | undefined;
 }> = OverrideProps<StackTypeMap<AdditionalProps, RootComponent>, RootComponent>;
 export interface StackOwnerState {
   direction: StackProps['direction'];

package/{esm/Stack/createStack.d.ts → Stack/createStack.d.mts}

@@ -1,8 +1,8 @@
 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";
+import { StackTypeMap, StackOwnerState } from "./StackProps.mjs";
+import { Breakpoints } from "../createBreakpoints/createBreakpoints.mjs";
+import { Spacing } from "../createTheme/createSpacing.mjs";
 interface StyleFunctionProps {
   theme: {
     breakpoints: Breakpoints;
@@ -10,15 +10,15 @@ interface StyleFunctionProps {
   };
   ownerState: StackOwnerState;
 }
-declare const defaultCreateStyledComponent: import("@mui/styled-engine").CreateStyledComponent<import("../index.js").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("../index.mjs").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;
+  createStyledComponent?: typeof defaultCreateStyledComponent | undefined;
+  useThemeProps?: typeof useThemePropsDefault | undefined;
+  componentName?: string | undefined;
 }): OverridableComponent<StackTypeMap<{}, "div">>;
 export {};

package/Stack/createStack.d.ts

@@ -17,8 +17,8 @@ export declare const style: ({
   theme
 }: StyleFunctionProps) => any;
 export default function createStack(options?: {
-  createStyledComponent?: typeof defaultCreateStyledComponent;
-  useThemeProps?: typeof useThemePropsDefault;
-  componentName?: string;
+  createStyledComponent?: typeof defaultCreateStyledComponent | undefined;
+  useThemeProps?: typeof useThemePropsDefault | undefined;
+  componentName?: string | undefined;
 }): OverridableComponent<StackTypeMap<{}, "div">>;
 export {};

package/{esm/Stack/createStack.js → Stack/createStack.mjs}

@@ -6,12 +6,12 @@ import clsx from 'clsx';
 import deepmerge from '@mui/utils/deepmerge';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import composeClasses from '@mui/utils/composeClasses';
-import systemStyled from "../styled/index.js";
-import useThemePropsSystem from "../useThemeProps/index.js";
-import { extendSxProp } from "../styleFunctionSx/index.js";
-import createTheme from "../createTheme/index.js";
-import { handleBreakpoints, mergeBreakpointsInOrder, resolveBreakpointValues } from "../breakpoints/index.js";
-import { createUnarySpacing, getValue } from "../spacing/index.js";
+import systemStyled from "../styled/index.mjs";
+import useThemePropsSystem from "../useThemeProps/index.mjs";
+import { extendSxProp } from "../styleFunctionSx/index.mjs";
+import createTheme from "../createTheme/index.mjs";
+import { handleBreakpoints, mergeBreakpointsInOrder, resolveBreakpointValues } from "../breakpoints/index.mjs";
+import { createUnarySpacing, getValue } from "../spacing/index.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 const defaultTheme = createTheme();
 // widening Theme to any so that the consumer can own the theme structure.

package/Stack/index.d.mts

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

package/Stack/index.mjs

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

package/{esm/ThemeProvider/ThemeProvider.d.ts → ThemeProvider/ThemeProvider.d.mts}

@@ -7,7 +7,7 @@ export interface ThemeProviderProps<Theme = DefaultTheme> {
   /**
    * The design system's unique id for getting the corresponded theme when there are multiple design systems.
    */
-  themeId?: string;
+  themeId?: string | undefined;
   /**
    * A theme object. You can provide a function to extend the outer theme.
    */

package/ThemeProvider/ThemeProvider.d.ts

@@ -7,7 +7,7 @@ export interface ThemeProviderProps<Theme = DefaultTheme> {
   /**
    * The design system's unique id for getting the corresponded theme when there are multiple design systems.
    */
-  themeId?: string;
+  themeId?: string | undefined;
   /**
    * A theme object. You can provide a function to extend the outer theme.
    */

package/{esm/ThemeProvider/ThemeProvider.js → ThemeProvider/ThemeProvider.mjs}

@@ -5,10 +5,10 @@ import PropTypes from 'prop-types';
 import { ThemeProvider as MuiThemeProvider, useTheme as usePrivateTheme } from '@mui/private-theming';
 import exactProp from '@mui/utils/exactProp';
 import { ThemeContext as StyledEngineThemeContext } from '@mui/styled-engine';
-import useThemeWithoutDefault from "../useThemeWithoutDefault/index.js";
-import RtlProvider from "../RtlProvider/index.js";
-import DefaultPropsProvider from "../DefaultPropsProvider/index.js";
-import useLayerOrder from "./useLayerOrder.js";
+import useThemeWithoutDefault from "../useThemeWithoutDefault/index.mjs";
+import RtlProvider from "../RtlProvider/index.mjs";
+import DefaultPropsProvider from "../DefaultPropsProvider/index.mjs";
+import useLayerOrder from "./useLayerOrder.mjs";
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 const EMPTY_THEME = {};
 function useThemeScoping(themeId, upperTheme, localTheme, isPrivate = false) {

package/ThemeProvider/index.d.mts

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

package/ThemeProvider/index.mjs

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

package/{esm/ThemeProvider/useLayerOrder.d.ts → ThemeProvider/useLayerOrder.d.mts}

@@ -3,5 +3,5 @@
  * Then on client-side, it injects the CSS layer order into the document head to ensure that the layer order is always present first before other Emotion styles.
  */
 export default function useLayerOrder(theme: {
-  modularCssLayers?: boolean | string;
+  modularCssLayers?: boolean | string | undefined;
 }): import("react/jsx-runtime").JSX.Element | null;

package/ThemeProvider/useLayerOrder.d.ts

@@ -3,5 +3,5 @@
  * Then on client-side, it injects the CSS layer order into the document head to ensure that the layer order is always present first before other Emotion styles.
  */
 export default function useLayerOrder(theme: {
-  modularCssLayers?: boolean | string;
+  modularCssLayers?: boolean | string | undefined;
 }): import("react/jsx-runtime").JSX.Element | null;

package/{esm/ThemeProvider/useLayerOrder.js → ThemeProvider/useLayerOrder.mjs}

@@ -1,7 +1,7 @@
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import useId from '@mui/utils/useId';
-import GlobalStyles from "../GlobalStyles/index.js";
-import useThemeWithoutDefault from "../useThemeWithoutDefault/index.js";
+import GlobalStyles from "../GlobalStyles/index.mjs";
+import useThemeWithoutDefault from "../useThemeWithoutDefault/index.mjs";
 
 /**
  * This hook returns a `GlobalStyles` component that sets the CSS layer order (for server-side rendering).

package/{esm/borders/borders.d.ts → borders/borders.d.mts}

@@ -1,4 +1,4 @@
-import { PropsFor, SimpleStyleFunction } from "../style/index.js";
+import { PropsFor, SimpleStyleFunction } from "../style/index.mjs";
 export const border: SimpleStyleFunction<'border'>;
 export const borderTop: SimpleStyleFunction<'borderTop'>;
 export const borderRight: SimpleStyleFunction<'borderRight'>;

package/{esm/borders/borders.js → borders/borders.mjs}

@@ -1,8 +1,8 @@
-import responsivePropType from "../responsivePropType/index.js";
-import style from "../style/index.js";
-import compose from "../compose/index.js";
-import { createUnaryUnit, getValue } from "../spacing/index.js";
-import { handleBreakpoints } from "../breakpoints/index.js";
+import responsivePropType from "../responsivePropType/index.mjs";
+import style from "../style/index.mjs";
+import compose from "../compose/index.mjs";
+import { createUnaryUnit, getValue } from "../spacing/index.mjs";
+import { handleBreakpoints } from "../breakpoints/index.mjs";
 export function borderTransform(value) {
   if (typeof value !== 'number') {
     return value;

package/borders/index.d.mts

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

package/borders/index.mjs

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

package/{esm/breakpoints/breakpoints.d.ts → breakpoints/breakpoints.d.mts}

@@ -1,12 +1,12 @@
 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 "../style/index.js";
+import { Breakpoints } from "../createBreakpoints/createBreakpoints.mjs";
+import type { Breakpoint } from "../createTheme/index.mjs";
+import { ResponsiveStyleValue } from "../styleFunctionSx/index.mjs";
+import { StyleFunction } from "../style/index.mjs";
 export interface ResolveBreakpointValuesOptions<T> {
   values: ResponsiveStyleValue<T>;
-  breakpoints?: Breakpoints['values'];
-  base?: Record<string, boolean>;
+  breakpoints?: Breakpoints['values'] | undefined;
+  base?: Record<string, boolean> | undefined;
 }
 export function resolveBreakpointValues<T>(options: ResolveBreakpointValuesOptions<T>): Record<string, T>;
 export function mergeBreakpointsInOrder(breakpoints: Breakpoints, styles: CSSObject[]): CSSObject;

package/breakpoints/breakpoints.d.ts

@@ -5,8 +5,8 @@ import { ResponsiveStyleValue } from "../styleFunctionSx/index.js";
 import { StyleFunction } from "../style/index.js";
 export interface ResolveBreakpointValuesOptions<T> {
   values: ResponsiveStyleValue<T>;
-  breakpoints?: Breakpoints['values'];
-  base?: Record<string, boolean>;
+  breakpoints?: Breakpoints['values'] | undefined;
+  base?: Record<string, boolean> | undefined;
 }
 export function resolveBreakpointValues<T>(options: ResolveBreakpointValuesOptions<T>): Record<string, T>;
 export function mergeBreakpointsInOrder(breakpoints: Breakpoints, styles: CSSObject[]): CSSObject;

package/{esm/breakpoints/breakpoints.js → breakpoints/breakpoints.mjs}

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import deepmerge from '@mui/utils/deepmerge';
-import merge from "../merge/index.js";
-import { isCqShorthand, getContainerQuery } from "../cssContainerQueries/index.js";
+import merge from "../merge/index.mjs";
+import { isCqShorthand, getContainerQuery } from "../cssContainerQueries/index.mjs";
 
 // The breakpoint **start** at this value.
 // For instance with the first breakpoint xs: [xs, sm[.

package/breakpoints/index.d.mts

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

package/breakpoints/index.mjs

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

package/{esm/colorManipulator/colorManipulator.d.ts → colorManipulator/colorManipulator.d.mts}

@@ -3,7 +3,7 @@ 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';
+  colorSpace?: 'srgb' | 'display-p3' | 'a98-rgb' | 'prophoto-rgb' | 'rec-2020' | undefined;
 }
 export function hexToRgb(hex: string): string;
 export function rgbToHex(color: string): string;

package/colorManipulator/colorManipulator.d.ts

@@ -3,7 +3,7 @@ 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';
+  colorSpace?: 'srgb' | 'display-p3' | 'a98-rgb' | 'prophoto-rgb' | 'rec-2020' | undefined;
 }
 export function hexToRgb(hex: string): string;
 export function rgbToHex(color: string): string;

package/colorManipulator/index.d.mts

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