@mui/system 6.1.1 → 6.1.3

package/esm/createTheme/createTheme.js

@@ -0,0 +1,49 @@
+import deepmerge from '@mui/utils/deepmerge';
+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 = {},
+    palette: paletteInput = {},
+    spacing: spacingInput,
+    shape: shapeInput = {},
+    ...other
+  } = options;
+  const breakpoints = createBreakpoints(breakpointsInput);
+  const spacing = createSpacing(spacingInput);
+  let muiTheme = deepmerge({
+    breakpoints,
+    direction: 'ltr',
+    components: {},
+    // Inject component definitions.
+    palette: {
+      mode: 'light',
+      ...paletteInput
+    },
+    spacing,
+    shape: {
+      ...shape,
+      ...shapeInput
+    }
+  }, other);
+  muiTheme = cssContainerQueries(muiTheme);
+  muiTheme.applyStyles = applyStyles;
+  muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
+  muiTheme.unstable_sxConfig = {
+    ...defaultSxConfig,
+    ...other?.unstable_sxConfig
+  };
+  muiTheme.unstable_sx = function sx(props) {
+    return styleFunctionSx({
+      sx: props,
+      theme: this
+    });
+  };
+  return muiTheme;
+}
+export default createTheme;

package/esm/createTheme/index.js

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

package/esm/createTheme/shape.js

@@ -0,0 +1,4 @@
+const shape = {
+  borderRadius: 4
+};
+export default shape;

package/{node → esm}/cssContainerQueries/cssContainerQueries.js

@@ -1,21 +1,11 @@
-"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"));
+import _formatMuiErrorMessage from "@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
  */
-function sortContainerQueries(theme, css) {
+export function sortContainerQueries(theme, css) {
   if (!theme.containerQueries) {
     return css;
   }
@@ -35,15 +25,14 @@ function sortContainerQueries(theme, css) {
     ...css
   });
 }
-function isCqShorthand(breakpointKeys, value) {
+export function isCqShorthand(breakpointKeys, value) {
   return value === '@' || value.startsWith('@') && (breakpointKeys.some(key => value.startsWith(`@${key}`)) || !!value.match(/^@\d/));
 }
-function getContainerQuery(theme, shorthand) {
+export 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\`.` : (0, _formatMuiErrorMessage2.default)(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`.' : _formatMuiErrorMessage(18, `(${shorthand})`));
     }
     return null;
   }
@@ -51,7 +40,7 @@ For example, \`@sm\` or \`@600\` or \`@40rem/sidebar\`.` : (0, _formatMuiErrorMe
   const value = Number.isNaN(+containerQuery) ? containerQuery || 0 : +containerQuery;
   return theme.containerQueries(containerName).up(value);
 }
-function cssContainerQueries(themeInput) {
+export default 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/esm/cssContainerQueries/index.js

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

package/esm/cssGrid/cssGrid.js

@@ -0,0 +1,85 @@
+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
+export const gap = props => {
+  if (props.gap !== undefined && props.gap !== null) {
+    const transformer = createUnaryUnit(props.theme, 'spacing', 8, 'gap');
+    const styleFromPropValue = propValue => ({
+      gap: getValue(transformer, propValue)
+    });
+    return handleBreakpoints(props, props.gap, styleFromPropValue);
+  }
+  return null;
+};
+gap.propTypes = process.env.NODE_ENV !== 'production' ? {
+  gap: responsivePropType
+} : {};
+gap.filterProps = ['gap'];
+
+// false positive
+// eslint-disable-next-line react/function-component-definition
+export const columnGap = props => {
+  if (props.columnGap !== undefined && props.columnGap !== null) {
+    const transformer = createUnaryUnit(props.theme, 'spacing', 8, 'columnGap');
+    const styleFromPropValue = propValue => ({
+      columnGap: getValue(transformer, propValue)
+    });
+    return handleBreakpoints(props, props.columnGap, styleFromPropValue);
+  }
+  return null;
+};
+columnGap.propTypes = process.env.NODE_ENV !== 'production' ? {
+  columnGap: responsivePropType
+} : {};
+columnGap.filterProps = ['columnGap'];
+
+// false positive
+// eslint-disable-next-line react/function-component-definition
+export const rowGap = props => {
+  if (props.rowGap !== undefined && props.rowGap !== null) {
+    const transformer = createUnaryUnit(props.theme, 'spacing', 8, 'rowGap');
+    const styleFromPropValue = propValue => ({
+      rowGap: getValue(transformer, propValue)
+    });
+    return handleBreakpoints(props, props.rowGap, styleFromPropValue);
+  }
+  return null;
+};
+rowGap.propTypes = process.env.NODE_ENV !== 'production' ? {
+  rowGap: responsivePropType
+} : {};
+rowGap.filterProps = ['rowGap'];
+export const gridColumn = style({
+  prop: 'gridColumn'
+});
+export const gridRow = style({
+  prop: 'gridRow'
+});
+export const gridAutoFlow = style({
+  prop: 'gridAutoFlow'
+});
+export const gridAutoColumns = style({
+  prop: 'gridAutoColumns'
+});
+export const gridAutoRows = style({
+  prop: 'gridAutoRows'
+});
+export const gridTemplateColumns = style({
+  prop: 'gridTemplateColumns'
+});
+export const gridTemplateRows = style({
+  prop: 'gridTemplateRows'
+});
+export const gridTemplateAreas = style({
+  prop: 'gridTemplateAreas'
+});
+export const gridArea = style({
+  prop: 'gridArea'
+});
+const grid = compose(gap, columnGap, rowGap, gridColumn, gridRow, gridAutoFlow, gridAutoColumns, gridAutoRows, gridTemplateColumns, gridTemplateRows, gridTemplateAreas, gridArea);
+export default grid;

package/esm/cssGrid/index.js

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

package/{node → esm}/cssVars/createCssVarsProvider.js

@@ -1,22 +1,13 @@
-"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) {
+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) {
   const {
     themeId,
     /**
@@ -26,8 +17,8 @@ function createCssVarsProvider(options) {
      * It should also ideally have a vars object created using `prepareCssVars`.
      */
     theme: defaultTheme = {},
-    modeStorageKey: defaultModeStorageKey = _InitColorSchemeScript.DEFAULT_MODE_STORAGE_KEY,
-    colorSchemeStorageKey: defaultColorSchemeStorageKey = _InitColorSchemeScript.DEFAULT_COLOR_SCHEME_STORAGE_KEY,
+    modeStorageKey: defaultModeStorageKey = DEFAULT_MODE_STORAGE_KEY,
+    colorSchemeStorageKey: defaultColorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
     disableTransitionOnChange: designSystemTransitionOnChange = false,
     defaultColorScheme,
     resolveTheme
@@ -58,10 +49,11 @@ 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 = (0, _privateTheming.useTheme)();
+    const upperTheme = muiUseTheme();
     const ctx = React.useContext(ColorSchemeContext);
     const nested = !!ctx && !disableNestedContext;
     const initialTheme = React.useMemo(() => {
@@ -81,7 +73,7 @@ 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 {
@@ -92,7 +84,7 @@ function createCssVarsProvider(options) {
       darkColorScheme,
       colorScheme: stateColorScheme,
       setColorScheme
-    } = (0, _useCurrentColorScheme.default)({
+    } = useCurrentColorScheme({
       supportedColorSchemes: allColorSchemes,
       defaultLightColorScheme,
       defaultDarkColorScheme,
@@ -223,19 +215,19 @@ function createCssVarsProvider(options) {
     if (disableStyleSheetGeneration || restThemeProp.cssVariables === false || nested && upperTheme?.cssVarPrefix === cssVarPrefix) {
       shouldGenerateStyleSheet = false;
     }
-    const element = /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ThemeProvider.default, {
+    const element = /*#__PURE__*/_jsxs(React.Fragment, {
+      children: [/*#__PURE__*/_jsx(ThemeProvider, {
         themeId: scopedTheme ? themeId : undefined,
         theme: resolveTheme ? resolveTheme(theme) : theme,
         children: children
-      }), shouldGenerateStyleSheet && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledEngine.GlobalStyles, {
+      }), shouldGenerateStyleSheet && /*#__PURE__*/_jsx(GlobalStyles, {
         styles: theme.generateStyleSheets?.() || []
       })]
     });
     if (nested) {
       return element;
     }
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(ColorSchemeContext.Provider, {
+    return /*#__PURE__*/_jsx(ColorSchemeContext.Provider, {
       value: contextValue,
       children: element
     });
@@ -244,50 +236,55 @@ function createCssVarsProvider(options) {
     /**
      * The component tree.
      */
-    children: _propTypes.default.node,
+    children: PropTypes.node,
     /**
      * The node used to attach the color-scheme attribute
      */
-    colorSchemeNode: _propTypes.default.any,
+    colorSchemeNode: PropTypes.any,
     /**
      * localStorage key used to store `colorScheme`
      */
-    colorSchemeStorageKey: _propTypes.default.string,
+    colorSchemeStorageKey: PropTypes.string,
+    /**
+     * The default mode when the storage is empty,
+     * require the theme to have `colorSchemes` with light and dark.
+     */
+    defaultMode: PropTypes.string,
     /**
      * If `true`, the provider creates its own context and generate stylesheet as if it is a root `CssVarsProvider`.
      */
-    disableNestedContext: _propTypes.default.bool,
+    disableNestedContext: PropTypes.bool,
     /**
      * If `true`, the style sheet won't be generated.
      *
      * This is useful for controlling nested CssVarsProvider behavior.
      */
-    disableStyleSheetGeneration: _propTypes.default.bool,
+    disableStyleSheetGeneration: PropTypes.bool,
     /**
      * Disable CSS transitions when switching between modes or color schemes.
      */
-    disableTransitionOnChange: _propTypes.default.bool,
+    disableTransitionOnChange: PropTypes.bool,
     /**
      * The document to attach the attribute to.
      */
-    documentNode: _propTypes.default.any,
+    documentNode: PropTypes.any,
     /**
      * The key in the local storage used to store current color scheme.
      */
-    modeStorageKey: _propTypes.default.string,
+    modeStorageKey: PropTypes.string,
     /**
      * The window that attaches the 'storage' event listener.
      * @default window
      */
-    storageWindow: _propTypes.default.any,
+    storageWindow: PropTypes.any,
     /**
      * The calculated theme object that will be passed through context.
      */
-    theme: _propTypes.default.object
+    theme: PropTypes.object
   } : void 0;
   const defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
   const defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
-  const getInitColorSchemeScript = params => (0, _InitColorSchemeScript.default)({
+  const getInitColorSchemeScript = params => InitColorSchemeScript({
     colorSchemeStorageKey: defaultColorSchemeStorageKey,
     defaultLightColorScheme,
     defaultDarkColorScheme,

package/esm/cssVars/createCssVarsTheme.js

@@ -0,0 +1,21 @@
+import prepareCssVars from "./prepareCssVars.js";
+import { createGetColorSchemeSelector } from "./getColorSchemeSelector.js";
+import { DEFAULT_ATTRIBUTE } from "../InitColorSchemeScript/InitColorSchemeScript.js";
+function createCssVarsTheme({
+  colorSchemeSelector = `[${DEFAULT_ATTRIBUTE}="%s"]`,
+  ...theme
+}) {
+  const output = theme;
+  const result = prepareCssVars(output, {
+    ...theme,
+    prefix: theme.cssVarPrefix,
+    colorSchemeSelector
+  });
+  output.vars = result.vars;
+  output.generateThemeVars = result.generateThemeVars;
+  output.generateStyleSheets = result.generateStyleSheets;
+  output.colorSchemeSelector = colorSchemeSelector;
+  output.getColorSchemeSelector = createGetColorSchemeSelector(colorSchemeSelector);
+  return output;
+}
+export default createCssVarsTheme;

package/{node → esm}/cssVars/createGetCssVar.js

@@ -1,14 +1,8 @@
-"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).
  */
-function createGetCssVar(prefix = '') {
+export default function createGetCssVar(prefix = '') {
   function appendVar(...vars) {
     if (!vars.length) {
       return '';

package/{node → esm}/cssVars/cssVarsParser.js

@@ -1,11 +1,3 @@
-"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
  *
@@ -23,7 +15,7 @@ exports.walkObjectDeep = void 0;
  * assignNestedKeys(source, ['palette', 'secondary'], 'var(--palette-secondary)')
  * console.log(source) // { palette: { primary: 'var(--palette-primary)', secondary: 'var(--palette-secondary)' } }
  */
-const assignNestedKeys = (obj, keys, value, arrayKeys = []) => {
+export const assignNestedKeys = (obj, keys, value, arrayKeys = []) => {
   let temp = obj;
   keys.forEach((k, index) => {
     if (index === keys.length - 1) {
@@ -52,8 +44,7 @@ const assignNestedKeys = (obj, keys, value, arrayKeys = []) => {
  * walkObjectDeep({ palette: { primary: { main: '#000000' } } }, console.log)
  * // ['palette', 'primary', 'main'] '#000000'
  */
-exports.assignNestedKeys = assignNestedKeys;
-const walkObjectDeep = (obj, callback, shouldSkipPaths) => {
+export const walkObjectDeep = (obj, callback, shouldSkipPaths) => {
   function recurse(object, parentKeys = [], arrayKeys = []) {
     Object.entries(object).forEach(([key, value]) => {
       if (!shouldSkipPaths || shouldSkipPaths && !shouldSkipPaths([...parentKeys, key])) {
@@ -69,7 +60,6 @@ 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))) {
@@ -108,7 +98,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)' } } }
  */
-function cssVarsParser(theme, options) {
+export default function cssVarsParser(theme, options) {
   const {
     prefix,
     shouldSkipGeneratingVar

package/{node → esm}/cssVars/getColorSchemeSelector.js

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

package/esm/cssVars/index.js

@@ -0,0 +1,5 @@
+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/{node → esm}/cssVars/prepareCssVars.js

@@ -1,12 +1,5 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _deepmerge = _interopRequireDefault(require("@mui/utils/deepmerge"));
-var _cssVarsParser = _interopRequireDefault(require("./cssVarsParser"));
+import deepmerge from '@mui/utils/deepmerge';
+import cssVarsParser from "./cssVarsParser.js";
 function prepareCssVars(theme, parserConfig = {}) {
   const {
     getSelector = defaultGetSelector,
@@ -24,7 +17,7 @@ function prepareCssVars(theme, parserConfig = {}) {
     vars: rootVars,
     css: rootCss,
     varsWithDefaults: rootVarsWithDefaults
-  } = (0, _cssVarsParser.default)(otherTheme, parserConfig);
+  } = cssVarsParser(otherTheme, parserConfig);
   let themeVars = rootVarsWithDefaults;
   const colorSchemesMap = {};
   const {
@@ -36,8 +29,8 @@ function prepareCssVars(theme, parserConfig = {}) {
       vars,
       css,
       varsWithDefaults
-    } = (0, _cssVarsParser.default)(scheme, parserConfig);
-    themeVars = (0, _deepmerge.default)(themeVars, varsWithDefaults);
+    } = cssVarsParser(scheme, parserConfig);
+    themeVars = deepmerge(themeVars, varsWithDefaults);
     colorSchemesMap[key] = {
       css,
       vars
@@ -49,8 +42,8 @@ function prepareCssVars(theme, parserConfig = {}) {
       css,
       vars,
       varsWithDefaults
-    } = (0, _cssVarsParser.default)(defaultScheme, parserConfig);
-    themeVars = (0, _deepmerge.default)(themeVars, varsWithDefaults);
+    } = cssVarsParser(defaultScheme, parserConfig);
+    themeVars = deepmerge(themeVars, varsWithDefaults);
     colorSchemesMap[defaultColorScheme] = {
       css,
       vars
@@ -96,7 +89,7 @@ function prepareCssVars(theme, parserConfig = {}) {
     Object.entries(colorSchemesMap).forEach(([, {
       vars: schemeVars
     }]) => {
-      vars = (0, _deepmerge.default)(vars, schemeVars);
+      vars = deepmerge(vars, schemeVars);
     });
     return vars;
   };
@@ -157,4 +150,4 @@ function prepareCssVars(theme, parserConfig = {}) {
     generateStyleSheets
   };
 }
-var _default = exports.default = prepareCssVars;
+export default prepareCssVars;

package/{node → esm}/cssVars/prepareTypographyVars.js

@@ -1,10 +1,4 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = prepareTypographyVars;
-function prepareTypographyVars(typography) {
+export default function prepareTypographyVars(typography) {
   const vars = {};
   const entries = Object.entries(typography);
   entries.forEach(entry => {

package/{node → esm}/cssVars/useCurrentColorScheme.js

@@ -1,16 +1,8 @@
-"use strict";
 'use client';
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = useCurrentColorScheme;
-exports.getColorScheme = getColorScheme;
-exports.getSystemMode = getSystemMode;
-var React = _interopRequireWildcard(require("react"));
-var _InitColorSchemeScript = require("../InitColorSchemeScript/InitColorSchemeScript");
-function getSystemMode(mode) {
+import * as React from 'react';
+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)');
     if (mql.matches) {
@@ -29,7 +21,7 @@ function processState(state, callback) {
   }
   return undefined;
 }
-function getColorScheme(state) {
+export function getColorScheme(state) {
   return processState(state, mode => {
     if (mode === 'light') {
       return state.lightColorScheme;
@@ -51,19 +43,19 @@ function initializeValue(key, defaultValue) {
       // the first time that user enters the site.
       localStorage.setItem(key, defaultValue);
     }
-  } catch (e) {
+  } catch {
     // Unsupported
   }
   return value || defaultValue;
 }
-function useCurrentColorScheme(options) {
+export default function useCurrentColorScheme(options) {
   const {
     defaultMode = 'light',
     defaultLightColorScheme,
     defaultDarkColorScheme,
     supportedColorSchemes = [],
-    modeStorageKey = _InitColorSchemeScript.DEFAULT_MODE_STORAGE_KEY,
-    colorSchemeStorageKey = _InitColorSchemeScript.DEFAULT_COLOR_SCHEME_STORAGE_KEY,
+    modeStorageKey = DEFAULT_MODE_STORAGE_KEY,
+    colorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
     storageWindow = typeof window === 'undefined' ? undefined : window
   } = options;
   const joinedColorSchemes = supportedColorSchemes.join(',');
@@ -98,7 +90,7 @@ function useCurrentColorScheme(options) {
       const newMode = mode ?? defaultMode;
       try {
         localStorage.setItem(modeStorageKey, newMode);
-      } catch (e) {
+      } catch {
         // Unsupported
       }
       return {
@@ -114,7 +106,7 @@ function useCurrentColorScheme(options) {
         try {
           localStorage.setItem(`${colorSchemeStorageKey}-light`, defaultLightColorScheme);
           localStorage.setItem(`${colorSchemeStorageKey}-dark`, defaultDarkColorScheme);
-        } catch (e) {
+        } catch {
           // Unsupported
         }
         return {
@@ -134,7 +126,7 @@ function useCurrentColorScheme(options) {
           processState(currentState, mode => {
             try {
               localStorage.setItem(`${colorSchemeStorageKey}-${mode}`, value);
-            } catch (e) {
+            } catch {
               // Unsupported
             }
             if (mode === 'light') {

package/esm/display/display.js

@@ -0,0 +1,27 @@
+import style from "../style/index.js";
+import compose from "../compose/index.js";
+export const displayPrint = style({
+  prop: 'displayPrint',
+  cssProperty: false,
+  transform: value => ({
+    '@media print': {
+      display: value
+    }
+  })
+});
+export const displayRaw = style({
+  prop: 'display'
+});
+export const overflow = style({
+  prop: 'overflow'
+});
+export const textOverflow = style({
+  prop: 'textOverflow'
+});
+export const visibility = style({
+  prop: 'visibility'
+});
+export const whiteSpace = style({
+  prop: 'whiteSpace'
+});
+export default compose(displayPrint, displayRaw, overflow, textOverflow, visibility, whiteSpace);

package/esm/display/index.js

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