@mui/system 6.1.1 → 6.1.3

package/cssContainerQueries/cssContainerQueries.js

@@ -1,11 +1,21 @@
-import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = cssContainerQueries;
+exports.getContainerQuery = getContainerQuery;
+exports.isCqShorthand = isCqShorthand;
+exports.sortContainerQueries = sortContainerQueries;
+var _formatMuiErrorMessage2 = _interopRequireDefault(require("@mui/utils/formatMuiErrorMessage"));
 /**
  * For using in `sx` prop to sort the breakpoint from low to high.
  * Note: this function does not work and will not support multiple units.
  *       e.g. input: { '@container (min-width:300px)': '1rem', '@container (min-width:40rem)': '2rem' }
  *            output: { '@container (min-width:40rem)': '2rem', '@container (min-width:300px)': '1rem' } // since 40 < 300 eventhough 40rem > 300px
  */
-export function sortContainerQueries(theme, css) {
+function sortContainerQueries(theme, css) {
   if (!theme.containerQueries) {
     return css;
   }
@@ -25,15 +35,14 @@ export function sortContainerQueries(theme, css) {
     ...css
   });
 }
-export function isCqShorthand(breakpointKeys, value) {
+function isCqShorthand(breakpointKeys, value) {
   return value === '@' || value.startsWith('@') && (breakpointKeys.some(key => value.startsWith(`@${key}`)) || !!value.match(/^@\d/));
 }
-export function getContainerQuery(theme, shorthand) {
+function getContainerQuery(theme, shorthand) {
   const matches = shorthand.match(/^@([^/]+)?\/?(.+)?$/);
   if (!matches) {
     if (process.env.NODE_ENV !== 'production') {
-      throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The provided shorthand ${`(${shorthand})`} is invalid. The format should be \`@<breakpoint | number>\` or \`@<breakpoint | number>/<container>\`.
-For example, \`@sm\` or \`@600\` or \`@40rem/sidebar\`.` : _formatMuiErrorMessage(18, `(${shorthand})`));
+      throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The provided shorthand ${`(${shorthand})`} is invalid. The format should be \`@<breakpoint | number>\` or \`@<breakpoint | number>/<container>\`.\n` + 'For example, `@sm` or `@600` or `@40rem/sidebar`.' : (0, _formatMuiErrorMessage2.default)(18, `(${shorthand})`));
     }
     return null;
   }
@@ -41,7 +50,7 @@ For example, \`@sm\` or \`@600\` or \`@40rem/sidebar\`.` : _formatMuiErrorMessag
   const value = Number.isNaN(+containerQuery) ? containerQuery || 0 : +containerQuery;
   return theme.containerQueries(containerName).up(value);
 }
-export default function cssContainerQueries(themeInput) {
+function cssContainerQueries(themeInput) {
   const toContainerQuery = (mediaQuery, name) => mediaQuery.replace('@media', name ? `@container ${name}` : '@container');
   function attachCq(node, name) {
     node.up = (...args) => toContainerQuery(themeInput.breakpoints.up(...args), name);

package/cssContainerQueries/index.js

@@ -1,2 +1,31 @@
-export { default } from "./cssContainerQueries.js";
-export { isCqShorthand, getContainerQuery, sortContainerQueries } from "./cssContainerQueries.js";
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _cssContainerQueries.default;
+  }
+});
+Object.defineProperty(exports, "getContainerQuery", {
+  enumerable: true,
+  get: function () {
+    return _cssContainerQueries.getContainerQuery;
+  }
+});
+Object.defineProperty(exports, "isCqShorthand", {
+  enumerable: true,
+  get: function () {
+    return _cssContainerQueries.isCqShorthand;
+  }
+});
+Object.defineProperty(exports, "sortContainerQueries", {
+  enumerable: true,
+  get: function () {
+    return _cssContainerQueries.sortContainerQueries;
+  }
+});
+var _cssContainerQueries = _interopRequireWildcard(require("./cssContainerQueries"));

package/cssContainerQueries/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
-  "module": "./index.js",
-  "main": "../node/cssContainerQueries/index.js",
+  "module": "../esm/cssContainerQueries/index.js",
+  "main": "./index.js",
   "types": "./index.d.ts"
 }

package/cssGrid/cssGrid.js

@@ -1,85 +1,94 @@
-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";
+"use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.rowGap = exports.gridTemplateRows = exports.gridTemplateColumns = exports.gridTemplateAreas = exports.gridRow = exports.gridColumn = exports.gridAutoRows = exports.gridAutoFlow = exports.gridAutoColumns = exports.gridArea = exports.gap = exports.default = exports.columnGap = void 0;
+var _style = _interopRequireDefault(require("../style"));
+var _compose = _interopRequireDefault(require("../compose"));
+var _spacing = require("../spacing");
+var _breakpoints = require("../breakpoints");
+var _responsivePropType = _interopRequireDefault(require("../responsivePropType"));
 // false positive
 // eslint-disable-next-line react/function-component-definition
-export const gap = props => {
+const gap = props => {
   if (props.gap !== undefined && props.gap !== null) {
-    const transformer = createUnaryUnit(props.theme, 'spacing', 8, 'gap');
+    const transformer = (0, _spacing.createUnaryUnit)(props.theme, 'spacing', 8, 'gap');
     const styleFromPropValue = propValue => ({
-      gap: getValue(transformer, propValue)
+      gap: (0, _spacing.getValue)(transformer, propValue)
     });
-    return handleBreakpoints(props, props.gap, styleFromPropValue);
+    return (0, _breakpoints.handleBreakpoints)(props, props.gap, styleFromPropValue);
   }
   return null;
 };
+exports.gap = gap;
 gap.propTypes = process.env.NODE_ENV !== 'production' ? {
-  gap: responsivePropType
+  gap: _responsivePropType.default
 } : {};
 gap.filterProps = ['gap'];
 
 // false positive
 // eslint-disable-next-line react/function-component-definition
-export const columnGap = props => {
+const columnGap = props => {
   if (props.columnGap !== undefined && props.columnGap !== null) {
-    const transformer = createUnaryUnit(props.theme, 'spacing', 8, 'columnGap');
+    const transformer = (0, _spacing.createUnaryUnit)(props.theme, 'spacing', 8, 'columnGap');
     const styleFromPropValue = propValue => ({
-      columnGap: getValue(transformer, propValue)
+      columnGap: (0, _spacing.getValue)(transformer, propValue)
     });
-    return handleBreakpoints(props, props.columnGap, styleFromPropValue);
+    return (0, _breakpoints.handleBreakpoints)(props, props.columnGap, styleFromPropValue);
   }
   return null;
 };
+exports.columnGap = columnGap;
 columnGap.propTypes = process.env.NODE_ENV !== 'production' ? {
-  columnGap: responsivePropType
+  columnGap: _responsivePropType.default
 } : {};
 columnGap.filterProps = ['columnGap'];
 
 // false positive
 // eslint-disable-next-line react/function-component-definition
-export const rowGap = props => {
+const rowGap = props => {
   if (props.rowGap !== undefined && props.rowGap !== null) {
-    const transformer = createUnaryUnit(props.theme, 'spacing', 8, 'rowGap');
+    const transformer = (0, _spacing.createUnaryUnit)(props.theme, 'spacing', 8, 'rowGap');
     const styleFromPropValue = propValue => ({
-      rowGap: getValue(transformer, propValue)
+      rowGap: (0, _spacing.getValue)(transformer, propValue)
     });
-    return handleBreakpoints(props, props.rowGap, styleFromPropValue);
+    return (0, _breakpoints.handleBreakpoints)(props, props.rowGap, styleFromPropValue);
   }
   return null;
 };
+exports.rowGap = rowGap;
 rowGap.propTypes = process.env.NODE_ENV !== 'production' ? {
-  rowGap: responsivePropType
+  rowGap: _responsivePropType.default
 } : {};
 rowGap.filterProps = ['rowGap'];
-export const gridColumn = style({
+const gridColumn = exports.gridColumn = (0, _style.default)({
   prop: 'gridColumn'
 });
-export const gridRow = style({
+const gridRow = exports.gridRow = (0, _style.default)({
   prop: 'gridRow'
 });
-export const gridAutoFlow = style({
+const gridAutoFlow = exports.gridAutoFlow = (0, _style.default)({
   prop: 'gridAutoFlow'
 });
-export const gridAutoColumns = style({
+const gridAutoColumns = exports.gridAutoColumns = (0, _style.default)({
   prop: 'gridAutoColumns'
 });
-export const gridAutoRows = style({
+const gridAutoRows = exports.gridAutoRows = (0, _style.default)({
   prop: 'gridAutoRows'
 });
-export const gridTemplateColumns = style({
+const gridTemplateColumns = exports.gridTemplateColumns = (0, _style.default)({
   prop: 'gridTemplateColumns'
 });
-export const gridTemplateRows = style({
+const gridTemplateRows = exports.gridTemplateRows = (0, _style.default)({
   prop: 'gridTemplateRows'
 });
-export const gridTemplateAreas = style({
+const gridTemplateAreas = exports.gridTemplateAreas = (0, _style.default)({
   prop: 'gridTemplateAreas'
 });
-export const gridArea = style({
+const gridArea = exports.gridArea = (0, _style.default)({
   prop: 'gridArea'
 });
-const grid = compose(gap, columnGap, rowGap, gridColumn, gridRow, gridAutoFlow, gridAutoColumns, gridAutoRows, gridTemplateColumns, gridTemplateRows, gridTemplateAreas, gridArea);
-export default grid;
+const grid = (0, _compose.default)(gap, columnGap, rowGap, gridColumn, gridRow, gridAutoFlow, gridAutoColumns, gridAutoRows, gridTemplateColumns, gridTemplateRows, gridTemplateAreas, gridArea);
+var _default = exports.default = grid;

package/cssGrid/index.js

@@ -1,2 +1,25 @@
-export { default } from "./cssGrid.js";
-export * from "./cssGrid.js";
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _cssGrid.default;
+  }
+});
+var _cssGrid = _interopRequireWildcard(require("./cssGrid"));
+Object.keys(_cssGrid).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _cssGrid[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _cssGrid[key];
+    }
+  });
+});

package/cssGrid/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
-  "module": "./index.js",
-  "main": "../node/cssGrid/index.js",
+  "module": "../esm/cssGrid/index.js",
+  "main": "./index.js",
   "types": "./index.d.ts"
 }

package/cssVars/createCssVarsProvider.d.ts

@@ -54,6 +54,12 @@ export interface CreateCssVarsProviderResult<
             colorSchemeSelector?: 'media' | 'class' | 'data' | string;
           }
         >;
+        /**
+         * The default mode when the storage is empty,
+         * require the theme to have `colorSchemes` with light and dark.
+         * @default 'system'
+         */
+        defaultMode?: 'light' | 'dark' | 'system';
         /**
          * The document used to perform `disableTransitionOnChange` feature
          * @default document
@@ -82,7 +88,7 @@ export interface CreateCssVarsProviderResult<
         disableStyleSheetGeneration?: boolean;
       }
     >,
-  ) => React.ReactElement<any>;
+  ) => React.JSX.Element;
   useColorScheme: () => ColorSchemeContextValue<ColorScheme>;
   getInitColorSchemeScript: typeof InitColorSchemeScript;
 }

package/cssVars/createCssVarsProvider.js

@@ -1,13 +1,22 @@
-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/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) {
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DISABLE_CSS_TRANSITION = void 0;
+exports.default = createCssVarsProvider;
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styledEngine = require("@mui/styled-engine");
+var _privateTheming = require("@mui/private-theming");
+var _ThemeProvider = _interopRequireDefault(require("../ThemeProvider"));
+var _InitColorSchemeScript = _interopRequireWildcard(require("../InitColorSchemeScript/InitColorSchemeScript"));
+var _useCurrentColorScheme = _interopRequireDefault(require("./useCurrentColorScheme"));
+var _jsxRuntime = require("react/jsx-runtime");
+const DISABLE_CSS_TRANSITION = exports.DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}';
+function createCssVarsProvider(options) {
   const {
     themeId,
     /**
@@ -17,8 +26,8 @@ export default function createCssVarsProvider(options) {
      * It should also ideally have a vars object created using `prepareCssVars`.
      */
     theme: defaultTheme = {},
-    modeStorageKey: defaultModeStorageKey = DEFAULT_MODE_STORAGE_KEY,
-    colorSchemeStorageKey: defaultColorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
+    modeStorageKey: defaultModeStorageKey = _InitColorSchemeScript.DEFAULT_MODE_STORAGE_KEY,
+    colorSchemeStorageKey: defaultColorSchemeStorageKey = _InitColorSchemeScript.DEFAULT_COLOR_SCHEME_STORAGE_KEY,
     disableTransitionOnChange: designSystemTransitionOnChange = false,
     defaultColorScheme,
     resolveTheme
@@ -49,10 +58,11 @@ export default function createCssVarsProvider(options) {
       documentNode = typeof document === 'undefined' ? undefined : document,
       colorSchemeNode = typeof document === 'undefined' ? undefined : document.documentElement,
       disableNestedContext = false,
-      disableStyleSheetGeneration = false
+      disableStyleSheetGeneration = false,
+      defaultMode: initialMode = 'system'
     } = props;
     const hasMounted = React.useRef(false);
-    const upperTheme = muiUseTheme();
+    const upperTheme = (0, _privateTheming.useTheme)();
     const ctx = React.useContext(ColorSchemeContext);
     const nested = !!ctx && !disableNestedContext;
     const initialTheme = React.useMemo(() => {
@@ -72,7 +82,7 @@ export default function createCssVarsProvider(options) {
     const allColorSchemes = React.useMemo(() => joinedColorSchemes.split(','), [joinedColorSchemes]);
     const defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
     const defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
-    const defaultMode = colorSchemes[defaultLightColorScheme] && colorSchemes[defaultDarkColorScheme] ? 'system' : colorSchemes[restThemeProp.defaultColorScheme]?.palette?.mode || restThemeProp.palette?.mode;
+    const defaultMode = colorSchemes[defaultLightColorScheme] && colorSchemes[defaultDarkColorScheme] ? initialMode : colorSchemes[restThemeProp.defaultColorScheme]?.palette?.mode || restThemeProp.palette?.mode;
 
     // 1. Get the data about the `mode`, `colorScheme`, and setter functions.
     const {
@@ -83,7 +93,7 @@ export default function createCssVarsProvider(options) {
       darkColorScheme,
       colorScheme: stateColorScheme,
       setColorScheme
-    } = useCurrentColorScheme({
+    } = (0, _useCurrentColorScheme.default)({
       supportedColorSchemes: allColorSchemes,
       defaultLightColorScheme,
       defaultDarkColorScheme,
@@ -214,19 +224,19 @@ export default function createCssVarsProvider(options) {
     if (disableStyleSheetGeneration || restThemeProp.cssVariables === false || nested && upperTheme?.cssVarPrefix === cssVarPrefix) {
       shouldGenerateStyleSheet = false;
     }
-    const element = /*#__PURE__*/_jsxs(React.Fragment, {
-      children: [/*#__PURE__*/_jsx(ThemeProvider, {
+    const element = /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ThemeProvider.default, {
         themeId: scopedTheme ? themeId : undefined,
         theme: resolveTheme ? resolveTheme(theme) : theme,
         children: children
-      }), shouldGenerateStyleSheet && /*#__PURE__*/_jsx(GlobalStyles, {
+      }), shouldGenerateStyleSheet && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledEngine.GlobalStyles, {
         styles: theme.generateStyleSheets?.() || []
       })]
     });
     if (nested) {
       return element;
     }
-    return /*#__PURE__*/_jsx(ColorSchemeContext.Provider, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(ColorSchemeContext.Provider, {
       value: contextValue,
       children: element
     });
@@ -235,50 +245,55 @@ export default function createCssVarsProvider(options) {
     /**
      * The component tree.
      */
-    children: PropTypes.node,
+    children: _propTypes.default.node,
     /**
      * The node used to attach the color-scheme attribute
      */
-    colorSchemeNode: PropTypes.any,
+    colorSchemeNode: _propTypes.default.any,
     /**
      * localStorage key used to store `colorScheme`
      */
-    colorSchemeStorageKey: PropTypes.string,
+    colorSchemeStorageKey: _propTypes.default.string,
+    /**
+     * The default mode when the storage is empty,
+     * require the theme to have `colorSchemes` with light and dark.
+     */
+    defaultMode: _propTypes.default.string,
     /**
      * If `true`, the provider creates its own context and generate stylesheet as if it is a root `CssVarsProvider`.
      */
-    disableNestedContext: PropTypes.bool,
+    disableNestedContext: _propTypes.default.bool,
     /**
      * If `true`, the style sheet won't be generated.
      *
      * This is useful for controlling nested CssVarsProvider behavior.
      */
-    disableStyleSheetGeneration: PropTypes.bool,
+    disableStyleSheetGeneration: _propTypes.default.bool,
     /**
      * Disable CSS transitions when switching between modes or color schemes.
      */
-    disableTransitionOnChange: PropTypes.bool,
+    disableTransitionOnChange: _propTypes.default.bool,
     /**
      * The document to attach the attribute to.
      */
-    documentNode: PropTypes.any,
+    documentNode: _propTypes.default.any,
     /**
      * The key in the local storage used to store current color scheme.
      */
-    modeStorageKey: PropTypes.string,
+    modeStorageKey: _propTypes.default.string,
     /**
      * The window that attaches the 'storage' event listener.
      * @default window
      */
-    storageWindow: PropTypes.any,
+    storageWindow: _propTypes.default.any,
     /**
      * The calculated theme object that will be passed through context.
      */
-    theme: PropTypes.object
+    theme: _propTypes.default.object
   } : void 0;
   const defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
   const defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
-  const getInitColorSchemeScript = params => InitColorSchemeScript({
+  const getInitColorSchemeScript = params => (0, _InitColorSchemeScript.default)({
     colorSchemeStorageKey: defaultColorSchemeStorageKey,
     defaultLightColorScheme,
     defaultDarkColorScheme,

package/cssVars/createCssVarsTheme.js

@@ -1,12 +1,19 @@
-import prepareCssVars from "./prepareCssVars.js";
-import { createGetColorSchemeSelector } from "./getColorSchemeSelector.js";
-import { DEFAULT_ATTRIBUTE } from "../InitColorSchemeScript/InitColorSchemeScript.js";
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _prepareCssVars = _interopRequireDefault(require("./prepareCssVars"));
+var _getColorSchemeSelector = require("./getColorSchemeSelector");
+var _InitColorSchemeScript = require("../InitColorSchemeScript/InitColorSchemeScript");
 function createCssVarsTheme({
-  colorSchemeSelector = `[${DEFAULT_ATTRIBUTE}="%s"]`,
+  colorSchemeSelector = `[${_InitColorSchemeScript.DEFAULT_ATTRIBUTE}="%s"]`,
   ...theme
 }) {
   const output = theme;
-  const result = prepareCssVars(output, {
+  const result = (0, _prepareCssVars.default)(output, {
     ...theme,
     prefix: theme.cssVarPrefix,
     colorSchemeSelector
@@ -15,7 +22,7 @@ function createCssVarsTheme({
   output.generateThemeVars = result.generateThemeVars;
   output.generateStyleSheets = result.generateStyleSheets;
   output.colorSchemeSelector = colorSchemeSelector;
-  output.getColorSchemeSelector = createGetColorSchemeSelector(colorSchemeSelector);
+  output.getColorSchemeSelector = (0, _getColorSchemeSelector.createGetColorSchemeSelector)(colorSchemeSelector);
   return output;
 }
-export default createCssVarsTheme;
+var _default = exports.default = createCssVarsTheme;

package/cssVars/createGetCssVar.js

@@ -1,8 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = createGetCssVar;
 /**
  * The benefit of this function is to help developers get CSS var from theme without specifying the whole variable
  * and they does not need to remember the prefix (defined once).
  */
-export default function createGetCssVar(prefix = '') {
+function createGetCssVar(prefix = '') {
   function appendVar(...vars) {
     if (!vars.length) {
       return '';

package/cssVars/cssVarsParser.js

@@ -1,3 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.assignNestedKeys = void 0;
+exports.default = cssVarsParser;
+exports.walkObjectDeep = void 0;
 /**
  * This function create an object from keys, value and then assign to target
  *
@@ -15,7 +23,7 @@
  * assignNestedKeys(source, ['palette', 'secondary'], 'var(--palette-secondary)')
  * console.log(source) // { palette: { primary: 'var(--palette-primary)', secondary: 'var(--palette-secondary)' } }
  */
-export const assignNestedKeys = (obj, keys, value, arrayKeys = []) => {
+const assignNestedKeys = (obj, keys, value, arrayKeys = []) => {
   let temp = obj;
   keys.forEach((k, index) => {
     if (index === keys.length - 1) {
@@ -44,7 +52,8 @@ export const assignNestedKeys = (obj, keys, value, arrayKeys = []) => {
  * walkObjectDeep({ palette: { primary: { main: '#000000' } } }, console.log)
  * // ['palette', 'primary', 'main'] '#000000'
  */
-export const walkObjectDeep = (obj, callback, shouldSkipPaths) => {
+exports.assignNestedKeys = assignNestedKeys;
+const walkObjectDeep = (obj, callback, shouldSkipPaths) => {
   function recurse(object, parentKeys = [], arrayKeys = []) {
     Object.entries(object).forEach(([key, value]) => {
       if (!shouldSkipPaths || shouldSkipPaths && !shouldSkipPaths([...parentKeys, key])) {
@@ -60,6 +69,7 @@ export const walkObjectDeep = (obj, callback, shouldSkipPaths) => {
   }
   recurse(obj);
 };
+exports.walkObjectDeep = walkObjectDeep;
 const getCssValue = (keys, value) => {
   if (typeof value === 'number') {
     if (['lineHeight', 'fontWeight', 'opacity', 'zIndex'].some(prop => keys.includes(prop))) {
@@ -98,7 +108,7 @@ const getCssValue = (keys, value) => {
  * console.log(css) // { '--foo-fontSize': '12px', '--foo-lineHeight': 1.2, '--foo-palette-primary-500': 'var(--color)' }
  * console.log(vars) // { fontSize: 'var(--foo-fontSize)', lineHeight: 'var(--foo-lineHeight)', palette: { primary: { 500: 'var(--foo-palette-primary-500)' } } }
  */
-export default function cssVarsParser(theme, options) {
+function cssVarsParser(theme, options) {
   const {
     prefix,
     shouldSkipGeneratingVar

package/cssVars/getColorSchemeSelector.js

@@ -1,5 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createGetColorSchemeSelector = createGetColorSchemeSelector;
 /* eslint-disable import/prefer-default-export */
-export function createGetColorSchemeSelector(selector) {
+function createGetColorSchemeSelector(selector) {
   return function getColorSchemeSelector(colorScheme) {
     if (selector === 'media') {
       if (process.env.NODE_ENV !== 'production') {

package/cssVars/index.js

@@ -1,5 +1,41 @@
-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";
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "createCssVarsTheme", {
+  enumerable: true,
+  get: function () {
+    return _createCssVarsTheme.default;
+  }
+});
+Object.defineProperty(exports, "createGetColorSchemeSelector", {
+  enumerable: true,
+  get: function () {
+    return _getColorSchemeSelector.createGetColorSchemeSelector;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _createCssVarsProvider.default;
+  }
+});
+Object.defineProperty(exports, "prepareCssVars", {
+  enumerable: true,
+  get: function () {
+    return _prepareCssVars.default;
+  }
+});
+Object.defineProperty(exports, "prepareTypographyVars", {
+  enumerable: true,
+  get: function () {
+    return _prepareTypographyVars.default;
+  }
+});
+var _createCssVarsProvider = _interopRequireDefault(require("./createCssVarsProvider"));
+var _prepareCssVars = _interopRequireDefault(require("./prepareCssVars"));
+var _prepareTypographyVars = _interopRequireDefault(require("./prepareTypographyVars"));
+var _createCssVarsTheme = _interopRequireDefault(require("./createCssVarsTheme"));
+var _getColorSchemeSelector = require("./getColorSchemeSelector");

package/cssVars/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
-  "module": "./index.js",
-  "main": "../node/cssVars/index.js",
+  "module": "../esm/cssVars/index.js",
+  "main": "./index.js",
   "types": "./index.d.ts"
 }