@mui/system 6.0.0-rc.0 → 6.0.0

package/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/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/CHANGELOG.md

@@ -1,5 +1,51 @@
 # [Versions](https://mui.com/versions/)
 
+## 6.0.0
+
+<!-- generated comparing v6.0.0-rc.0..master -->
+
+_Aug 27, 2024_
+
+We are excited to announce the stable release of Material-UI v6 🎉, check out [the blog post](https://mui.com/blog/material-ui-v6-is-out/) to see all the updates.
+
+### `@mui/material@6.0.0`
+
+- Change React.ReactElement<any,any> type from any to unknown (#43358) @sai6855
+- [Pagination] Update `getItemAriaLabel` page param type (#43399) @sydneyjodon-wk
+- [Unstable_TrapFocus] Fix `getTabbable` function return type (#42237) @KalmarLorand
+
+### `@mui/lab@6.0.0-beta.8`
+
+- [button] Add missing customize points for span (#43436) @oliviertassinari
+
+### Docs
+
+- Fix broken links (#43144) @DiegoAndai
+- Updated mui-x roadmap links with the new project URL (#43444) @michelengelen
+- Update pnpm order, move to second (#42712) @ahmadnadeem6236
+- Fix CSS theme variables section (#43439) @siriwatknp
+- Add two Toolpad Core components to Material UI sidebar (#43391) @prakhargupta1
+- Fix licensingModel -> licenseModel @oliviertassinari
+- Fix Stack Overflow issue canned response @oliviertassinari
+- Avoid referencing MUI Core @oliviertassinari
+- Fix description of eslint-plugin-material-ui @oliviertassinari
+- [docs-infra] Polish reportBrokenLinks.js to support Base UI @oliviertassinari
+- [material-ui] Clarify RTL language support in localization guide (#41784) @bahmanworld
+- [material-ui] Refine templates theme selector (#43396) @zanivan
+
+### Core
+
+- Prepare for v6 stable release (#43454) @siriwatknp
+- [blog] Polish Upcoming changes to MUI X pricing in 2024 (#43438) @oliviertassinari
+- [blog] Add Material UI v6 stable release (#41932) @siriwatknp
+- [ci] Fix the release:changelog cmd (#43451) @mnajdova
+- [core] Allow `^6.0.0` for `@mui/` dependencies in `@mui/docs` (#43445) @LukasTy
+- [code-infra] Babel plugin to fully resolve imported paths (#43294) @Janpot
+- [infra] Add closing message workflow (#43450) @michelengelen
+- [website] Make beta chip consistent for Toolpad (#43392) @prakhargupta1
+
+All contributors of this release in alphabetical order: @ahmadnadeem6236, @bahmanworld, @DiegoAndai, @Janpot, @KalmarLorand, @LukasTy, @michelengelen, @mnajdova, @oliviertassinari, @prakhargupta1, @sai6855, @siriwatknp, @sydneyjodon-wk, @zanivan
+
 ## 6.0.0-rc.0
 
 <!-- generated comparing v6.0.0-beta.6..next -->

package/Container/Container.js

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

package/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/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/DefaultPropsProvider/index.js

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

package/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/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/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/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/Grid/gridGenerator.js

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

package/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/InitColorSchemeScript/index.js

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

package/README.md

@@ -9,11 +9,11 @@ Install the package in your project directory with:
 <!-- #default-branch-switch -->
 
 ```bash
-npm install @mui/system@next @emotion/react @emotion/styled
+npm install @mui/system @emotion/react @emotion/styled
 ```
 
 ## Documentation
 
 <!-- #default-branch-switch -->
 
-Visit [https://next.mui.com/system/getting-started/](https://next.mui.com/system/getting-started/) to view the full documentation.
+Visit [https://mui.com/system/getting-started/](https://mui.com/system/getting-started/) to view the full documentation.

package/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/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/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/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/ThemeProvider/index.js

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

package/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/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/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/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/colorManipulator/index.js

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

package/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/compose/index.js

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

package/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/createBox/index.js

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

package/createBreakpoints/createBreakpoints.d.ts

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

package/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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";

package/flexbox/flexbox.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 flexBasis = style({
   prop: 'flexBasis'
 });

package/flexbox/index.js

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

package/getThemeValue/getThemeValue.js

@@ -1,13 +1,13 @@
-import borders from '../borders';
-import display from '../display';
-import flexbox from '../flexbox';
-import grid from '../cssGrid';
-import positions from '../positions';
-import palette from '../palette';
-import shadows from '../shadows';
-import sizing from '../sizing';
-import spacing from '../spacing';
-import typography from '../typography';
+import borders from "../borders/index.js";
+import display from "../display/index.js";
+import flexbox from "../flexbox/index.js";
+import grid from "../cssGrid/index.js";
+import positions from "../positions/index.js";
+import palette from "../palette/index.js";
+import shadows from "../shadows/index.js";
+import sizing from "../sizing/index.js";
+import spacing from "../spacing/index.js";
+import typography from "../typography/index.js";
 const filterPropsMapping = {
   borders: borders.filterProps,
   display: display.filterProps,

package/getThemeValue/index.js

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