@mui/system 6.0.0-rc.0 → 6.0.0

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v6.0.0-rc.0
+ * @mui/system v6.0.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -7,68 +7,68 @@
  */
 import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
 export { css, keyframes, StyledEngineProvider } from '@mui/styled-engine';
-export { default as GlobalStyles } from './GlobalStyles';
-export { default as borders } from './borders';
-export * from './borders';
-export { default as breakpoints } from './breakpoints';
-export { default as cssContainerQueries } from './cssContainerQueries';
-export { handleBreakpoints, mergeBreakpointsInOrder, resolveBreakpointValues as unstable_resolveBreakpointValues } from './breakpoints';
-export { default as compose } from './compose';
-export { default as display } from './display';
-export { default as flexbox } from './flexbox';
-export * from './flexbox';
-export { default as grid } from './cssGrid';
-export * from './cssGrid';
-export { default as palette } from './palette';
-export * from './palette';
-export { default as positions } from './positions';
-export * from './positions';
-export { default as shadows } from './shadows';
-export { default as sizing } from './sizing';
-export * from './sizing';
-export { default as spacing } from './spacing';
-export * from './spacing';
-export { default as style, getPath, getStyleValue } from './style';
-export { default as typography } from './typography';
-export * from './typography';
-export { default as unstable_styleFunctionSx, unstable_createStyleFunctionSx, extendSxProp as unstable_extendSxProp, unstable_defaultSxConfig } from './styleFunctionSx';
+export { default as GlobalStyles } from "./GlobalStyles/index.js";
+export { default as borders } from "./borders/index.js";
+export * from "./borders/index.js";
+export { default as breakpoints } from "./breakpoints/index.js";
+export { default as cssContainerQueries } from "./cssContainerQueries/index.js";
+export { handleBreakpoints, mergeBreakpointsInOrder, resolveBreakpointValues as unstable_resolveBreakpointValues } from "./breakpoints/index.js";
+export { default as compose } from "./compose/index.js";
+export { default as display } from "./display/index.js";
+export { default as flexbox } from "./flexbox/index.js";
+export * from "./flexbox/index.js";
+export { default as grid } from "./cssGrid/index.js";
+export * from "./cssGrid/index.js";
+export { default as palette } from "./palette/index.js";
+export * from "./palette/index.js";
+export { default as positions } from "./positions/index.js";
+export * from "./positions/index.js";
+export { default as shadows } from "./shadows/index.js";
+export { default as sizing } from "./sizing/index.js";
+export * from "./sizing/index.js";
+export { default as spacing } from "./spacing/index.js";
+export * from "./spacing/index.js";
+export { default as style, getPath, getStyleValue } from "./style/index.js";
+export { default as typography } from "./typography/index.js";
+export * from "./typography/index.js";
+export { default as unstable_styleFunctionSx, unstable_createStyleFunctionSx, extendSxProp as unstable_extendSxProp, unstable_defaultSxConfig } from "./styleFunctionSx/index.js";
 // TODO: Remove this function in v6
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export function experimental_sx() {
   throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The \`experimental_sx\` has been moved to \`theme.unstable_sx\`.For more details, see https://github.com/mui/material-ui/pull/35150.` : _formatMuiErrorMessage(19));
 }
-export { default as unstable_getThemeValue } from './getThemeValue';
-export { default as Box } from './Box';
-export { default as createBox } from './createBox';
-export { default as createStyled } from './createStyled';
-export * from './createStyled';
-export { default as styled } from './styled';
-export { default as createTheme } from './createTheme';
-export { default as createBreakpoints } from './createBreakpoints/createBreakpoints';
-export { default as createSpacing } from './createTheme/createSpacing';
-export { default as shape } from './createTheme/shape';
-export { default as useThemeProps, getThemeProps } from './useThemeProps';
-export { default as useTheme } from './useTheme';
-export { default as useThemeWithoutDefault } from './useThemeWithoutDefault';
-export { default as useMediaQuery } from './useMediaQuery';
-export * from './colorManipulator';
-export { default as ThemeProvider } from './ThemeProvider';
-export { default as unstable_createCssVarsProvider } from './cssVars/createCssVarsProvider';
-export { default as unstable_createGetCssVar } from './cssVars/createGetCssVar';
-export { default as unstable_cssVarsParser } from './cssVars/cssVarsParser';
-export { default as unstable_prepareCssVars } from './cssVars/prepareCssVars';
-export { default as unstable_createCssVarsTheme } from './cssVars/createCssVarsTheme';
-export { default as responsivePropType } from './responsivePropType';
-export { default as RtlProvider } from './RtlProvider';
-export * from './RtlProvider';
-export * from './version';
+export { default as unstable_getThemeValue } from "./getThemeValue/index.js";
+export { default as Box } from "./Box/index.js";
+export { default as createBox } from "./createBox/index.js";
+export { default as createStyled } from "./createStyled/index.js";
+export * from "./createStyled/index.js";
+export { default as styled } from "./styled/index.js";
+export { default as createTheme } from "./createTheme/index.js";
+export { default as createBreakpoints } from "./createBreakpoints/createBreakpoints.js";
+export { default as createSpacing } from "./createTheme/createSpacing.js";
+export { default as shape } from "./createTheme/shape.js";
+export { default as useThemeProps, getThemeProps } from "./useThemeProps/index.js";
+export { default as useTheme } from "./useTheme/index.js";
+export { default as useThemeWithoutDefault } from "./useThemeWithoutDefault/index.js";
+export { default as useMediaQuery } from "./useMediaQuery/index.js";
+export * from "./colorManipulator/index.js";
+export { default as ThemeProvider } from "./ThemeProvider/index.js";
+export { default as unstable_createCssVarsProvider } from "./cssVars/createCssVarsProvider.js";
+export { default as unstable_createGetCssVar } from "./cssVars/createGetCssVar.js";
+export { default as unstable_cssVarsParser } from "./cssVars/cssVarsParser.js";
+export { default as unstable_prepareCssVars } from "./cssVars/prepareCssVars.js";
+export { default as unstable_createCssVarsTheme } from "./cssVars/createCssVarsTheme.js";
+export { default as responsivePropType } from "./responsivePropType/index.js";
+export { default as RtlProvider } from "./RtlProvider/index.js";
+export * from "./RtlProvider/index.js";
+export * from "./version/index.js";
 
 /** ----------------- */
 /** Layout components */
-export { default as createContainer } from './Container/createContainer';
-export { default as Container } from './Container';
-export * from './Container';
-export { default as Grid } from './Grid/Grid';
-export * from './Grid';
-export { default as Stack } from './Stack/Stack';
-export * from './Stack';
+export { default as createContainer } from "./Container/createContainer.js";
+export { default as Container } from "./Container/index.js";
+export * from "./Container/index.js";
+export { default as Grid } from "./Grid/Grid.js";
+export * from "./Grid/index.js";
+export { default as Stack } from "./Stack/Stack.js";
+export * from "./Stack/index.js";

package/memoize/index.js

@@ -1,3 +1,3 @@
 'use client';
 
-export { default } from './memoize';
+export { default } from "./memoize.js";

package/merge/index.js

@@ -1,3 +1,3 @@
 'use client';
 
-export { default } from './merge';
+export { default } from "./merge.js";

package/modern/Box/Box.js

@@ -2,8 +2,8 @@
 
 import PropTypes from 'prop-types';
 import ClassNameGenerator from '@mui/utils/ClassNameGenerator';
-import createBox from '../createBox';
-import boxClasses from './boxClasses';
+import createBox from "../createBox/index.js";
+import boxClasses from "./boxClasses.js";
 const Box = createBox({
   defaultClassName: boxClasses.root,
   generateClassName: ClassNameGenerator.generate

package/modern/Box/index.js

@@ -1,5 +1,5 @@
 'use client';
 
-export { default } from './Box';
-export { default as boxClasses } from './boxClasses';
-export * from './boxClasses';
+export { default } from "./Box.js";
+export { default as boxClasses } from "./boxClasses.js";
+export * from "./boxClasses.js";

package/modern/Container/Container.js

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

package/modern/Container/createContainer.js

@@ -4,9 +4,9 @@ import clsx from 'clsx';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import composeClasses from '@mui/utils/composeClasses';
 import capitalize from '@mui/utils/capitalize';
-import useThemePropsSystem from '../useThemeProps';
-import systemStyled from '../styled';
-import createTheme from '../createTheme';
+import useThemePropsSystem from "../useThemeProps/index.js";
+import systemStyled from "../styled/index.js";
+import createTheme from "../createTheme/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const defaultTheme = createTheme();
 const defaultCreateStyledComponent = systemStyled('div', {

package/modern/Container/index.js

@@ -1,5 +1,5 @@
 'use client';
 
-export { default } from './Container';
-export { default as containerClasses } from './containerClasses';
-export * from './containerClasses';
+export { default } from "./Container.js";
+export { default as containerClasses } from "./containerClasses.js";
+export * from "./containerClasses.js";

package/modern/DefaultPropsProvider/index.js

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

package/modern/GlobalStyles/GlobalStyles.js

@@ -3,7 +3,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { GlobalStyles as MuiGlobalStyles } from '@mui/styled-engine';
-import useTheme from '../useTheme';
+import useTheme from "../useTheme/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function GlobalStyles({
   styles,

package/modern/GlobalStyles/index.js

@@ -1,4 +1,4 @@
 'use client';
 
-export { default } from './GlobalStyles';
-export * from './GlobalStyles';
+export { default } from "./GlobalStyles.js";
+export * from "./GlobalStyles.js";

package/modern/Grid/Grid.js

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

package/modern/Grid/createGrid.js

@@ -4,12 +4,12 @@ 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';
-import useThemePropsSystem from '../useThemeProps';
-import useTheme from '../useTheme';
-import { extendSxProp } from '../styleFunctionSx';
-import createTheme from '../createTheme';
-import { generateGridStyles, generateGridSizeStyles, generateGridColumnsStyles, generateGridColumnSpacingStyles, generateGridRowSpacingStyles, generateGridDirectionStyles, generateGridOffsetStyles, generateSizeClassNames, generateSpacingClassNames, generateDirectionClasses } from './gridGenerator';
+import systemStyled from "../styled/index.js";
+import useThemePropsSystem from "../useThemeProps/index.js";
+import useTheme 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 { jsx as _jsx } from "react/jsx-runtime";
 const defaultTheme = createTheme();
 

package/modern/Grid/gridGenerator.js

@@ -1,4 +1,4 @@
-import { traverseBreakpoints } from './traverseBreakpoints';
+import { traverseBreakpoints } from "./traverseBreakpoints.js";
 function appendLevel(level) {
   if (!level) {
     return '';

package/modern/Grid/index.js

@@ -1,8 +1,8 @@
 'use client';
 
-export { default } from './Grid';
-export { default as createGrid } from './createGrid';
-export * from './GridProps';
-export { default as gridClasses } from './gridClasses';
-export * from './gridClasses';
-export { traverseBreakpoints as unstable_traverseBreakpoints } from './traverseBreakpoints';
+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";

package/modern/InitColorSchemeScript/index.js

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

package/modern/Stack/Stack.js

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

package/modern/Stack/createStack.js

@@ -4,12 +4,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';
-import useThemePropsSystem from '../useThemeProps';
-import { extendSxProp } from '../styleFunctionSx';
-import createTheme from '../createTheme';
-import { handleBreakpoints, mergeBreakpointsInOrder, resolveBreakpointValues } from '../breakpoints';
-import { createUnarySpacing, getValue } from '../spacing';
+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 { jsx as _jsx } from "react/jsx-runtime";
 const defaultTheme = createTheme();
 // widening Theme to any so that the consumer can own the theme structure.

package/modern/Stack/index.js

@@ -1,7 +1,7 @@
 'use client';
 
-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/modern/ThemeProvider/ThemeProvider.js

@@ -5,9 +5,9 @@ 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';
-import RtlProvider from '../RtlProvider';
-import DefaultPropsProvider from '../DefaultPropsProvider';
+import useThemeWithoutDefault from "../useThemeWithoutDefault/index.js";
+import RtlProvider from "../RtlProvider/index.js";
+import DefaultPropsProvider from "../DefaultPropsProvider/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const EMPTY_THEME = {};
 function useThemeScoping(themeId, upperTheme, localTheme, isPrivate = false) {

package/modern/ThemeProvider/index.js

@@ -1,3 +1,3 @@
 'use client';
 
-export { default } from './ThemeProvider';
+export { default } from "./ThemeProvider.js";

package/modern/borders/borders.js

@@ -1,8 +1,8 @@
-import responsivePropType from '../responsivePropType';
-import style from '../style';
-import compose from '../compose';
-import { createUnaryUnit, getValue } from '../spacing';
-import { handleBreakpoints } from '../breakpoints';
+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";
 export function borderTransform(value) {
   if (typeof value !== 'number') {
     return value;

package/modern/borders/index.js

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

package/modern/breakpoints/breakpoints.js

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

package/modern/breakpoints/index.js

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

package/modern/colorManipulator/index.js

@@ -1,3 +1,3 @@
 'use client';
 
-export * from './colorManipulator';
+export * from "./colorManipulator.js";

package/modern/compose/compose.js

@@ -1,4 +1,4 @@
-import merge from '../merge';
+import merge from "../merge/index.js";
 function compose(...styles) {
   const handlers = styles.reduce((acc, style) => {
     style.filterProps.forEach(prop => {

package/modern/compose/index.js

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

package/modern/createBox/createBox.js

@@ -3,8 +3,8 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import styled from '@mui/styled-engine';
-import styleFunctionSx, { extendSxProp } from '../styleFunctionSx';
-import useTheme from '../useTheme';
+import styleFunctionSx, { extendSxProp } from "../styleFunctionSx/index.js";
+import useTheme from "../useTheme/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export default function createBox(options = {}) {
   const {

package/modern/createBox/index.js

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

package/modern/createBreakpoints/index.js

@@ -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/modern/createStyled/createStyled.js

@@ -3,8 +3,8 @@ import styledEngineStyled, { internal_processStyles as processStyles } from '@mu
 import { isPlainObject } from '@mui/utils/deepmerge';
 import capitalize from '@mui/utils/capitalize';
 import getDisplayName from '@mui/utils/getDisplayName';
-import createTheme from '../createTheme';
-import styleFunctionSx from '../styleFunctionSx';
+import createTheme from "../createTheme/index.js";
+import styleFunctionSx from "../styleFunctionSx/index.js";
 export const systemDefaultTheme = createTheme();
 
 // Update /system/styled/#api in case if this changes

package/modern/createStyled/index.js

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

package/modern/createTheme/createSpacing.js

@@ -1,4 +1,4 @@
-import { createUnarySpacing } from '../spacing';
+import { createUnarySpacing } from "../spacing/index.js";
 
 // The different signatures imply different meaning for their arguments that can't be expressed structurally.
 // We express the difference with variable names.

package/modern/createTheme/createTheme.js

@@ -1,11 +1,11 @@
 import deepmerge from '@mui/utils/deepmerge';
-import createBreakpoints from '../createBreakpoints/createBreakpoints';
-import cssContainerQueries from '../cssContainerQueries';
-import shape from './shape';
-import createSpacing from './createSpacing';
-import styleFunctionSx from '../styleFunctionSx/styleFunctionSx';
-import defaultSxConfig from '../styleFunctionSx/defaultSxConfig';
-import applyStyles from './applyStyles';
+import createBreakpoints from "../createBreakpoints/createBreakpoints.js";
+import cssContainerQueries from "../cssContainerQueries/index.js";
+import shape from "./shape.js";
+import createSpacing from "./createSpacing.js";
+import styleFunctionSx from "../styleFunctionSx/styleFunctionSx.js";
+import defaultSxConfig from "../styleFunctionSx/defaultSxConfig.js";
+import applyStyles from "./applyStyles.js";
 function createTheme(options = {}, ...args) {
   const {
     breakpoints: breakpointsInput = {},

package/modern/createTheme/index.js

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

package/modern/cssContainerQueries/index.js

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

package/modern/cssGrid/cssGrid.js

@@ -1,8 +1,8 @@
-import style from '../style';
-import compose from '../compose';
-import { createUnaryUnit, getValue } from '../spacing';
-import { handleBreakpoints } from '../breakpoints';
-import responsivePropType from '../responsivePropType';
+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.js";
 
 // false positive
 // eslint-disable-next-line react/function-component-definition

package/modern/cssGrid/index.js

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

package/modern/cssVars/createCssVarsProvider.js

@@ -2,9 +2,9 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { GlobalStyles } from '@mui/styled-engine';
 import { useTheme as muiUseTheme } from '@mui/private-theming';
-import ThemeProvider from '../ThemeProvider';
-import InitColorSchemeScript, { DEFAULT_COLOR_SCHEME_STORAGE_KEY, DEFAULT_MODE_STORAGE_KEY } from '../InitColorSchemeScript/InitColorSchemeScript';
-import useCurrentColorScheme from './useCurrentColorScheme';
+import ThemeProvider from "../ThemeProvider/index.js";
+import InitColorSchemeScript, { DEFAULT_COLOR_SCHEME_STORAGE_KEY, DEFAULT_MODE_STORAGE_KEY } from "../InitColorSchemeScript/InitColorSchemeScript.js";
+import useCurrentColorScheme from "./useCurrentColorScheme.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}';
 export default function createCssVarsProvider(options) {

package/modern/cssVars/createCssVarsTheme.js

@@ -1,6 +1,6 @@
-import prepareCssVars from './prepareCssVars';
-import { createGetColorSchemeSelector } from './getColorSchemeSelector';
-import { DEFAULT_ATTRIBUTE } from '../InitColorSchemeScript/InitColorSchemeScript';
+import prepareCssVars from "./prepareCssVars.js";
+import { createGetColorSchemeSelector } from "./getColorSchemeSelector.js";
+import { DEFAULT_ATTRIBUTE } from "../InitColorSchemeScript/InitColorSchemeScript.js";
 function createCssVarsTheme({
   colorSchemeSelector = `[${DEFAULT_ATTRIBUTE}="%s"]`,
   ...theme

package/modern/cssVars/index.js

@@ -1,7 +1,7 @@
 'use client';
 
-export { default } from './createCssVarsProvider';
-export { default as prepareCssVars } from './prepareCssVars';
-export { default as prepareTypographyVars } from './prepareTypographyVars';
-export { default as createCssVarsTheme } from './createCssVarsTheme';
-export { createGetColorSchemeSelector } from './getColorSchemeSelector';
+export { default } from "./createCssVarsProvider.js";
+export { default as prepareCssVars } from "./prepareCssVars.js";
+export { default as prepareTypographyVars } from "./prepareTypographyVars.js";
+export { default as createCssVarsTheme } from "./createCssVarsTheme.js";
+export { createGetColorSchemeSelector } from "./getColorSchemeSelector.js";

package/modern/cssVars/prepareCssVars.js

@@ -1,5 +1,5 @@
 import deepmerge from '@mui/utils/deepmerge';
-import cssVarsParser from './cssVarsParser';
+import cssVarsParser from "./cssVarsParser.js";
 function prepareCssVars(theme, parserConfig = {}) {
   const {
     getSelector = defaultGetSelector,

package/modern/cssVars/useCurrentColorScheme.js

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { DEFAULT_MODE_STORAGE_KEY, DEFAULT_COLOR_SCHEME_STORAGE_KEY } from '../InitColorSchemeScript/InitColorSchemeScript';
+import { DEFAULT_MODE_STORAGE_KEY, DEFAULT_COLOR_SCHEME_STORAGE_KEY } from "../InitColorSchemeScript/InitColorSchemeScript.js";
 export function getSystemMode(mode) {
   if (typeof window !== 'undefined' && typeof window.matchMedia === 'function' && mode === 'system') {
     const mql = window.matchMedia('(prefers-color-scheme: dark)');

package/modern/display/display.js

@@ -1,5 +1,5 @@
-import style from '../style';
-import compose from '../compose';
+import style from "../style/index.js";
+import compose from "../compose/index.js";
 export const displayPrint = style({
   prop: 'displayPrint',
   cssProperty: false,

package/modern/display/index.js

@@ -1,4 +1,4 @@
 'use client';
 
-export { default } from './display';
-export * from './display';
+export { default } from "./display.js";
+export * from "./display.js";