@mui/system 6.1.1 → 6.1.3

package/modern/createStyled/createStyled.js

@@ -1,89 +1,95 @@
-/* eslint-disable no-underscore-dangle */
-import styledEngineStyled, { internal_processStyles as processStyles } from '@mui/styled-engine';
+import styledEngineStyled, { internal_mutateStyles as mutateStyles } from '@mui/styled-engine';
 import { isPlainObject } from '@mui/utils/deepmerge';
 import capitalize from '@mui/utils/capitalize';
 import getDisplayName from '@mui/utils/getDisplayName';
 import createTheme from "../createTheme/index.js";
 import styleFunctionSx from "../styleFunctionSx/index.js";
+import preprocessStyles from "../preprocessStyles.js";
+
+/* eslint-disable no-underscore-dangle */
+/* eslint-disable no-labels */
+/* eslint-disable no-lone-blocks */
+
 export const systemDefaultTheme = createTheme();
 
 // Update /system/styled/#api in case if this changes
 export function shouldForwardProp(prop) {
   return prop !== 'ownerState' && prop !== 'theme' && prop !== 'sx' && prop !== 'as';
 }
-function resolveTheme(themeId, theme, defaultTheme) {
-  return isObjectEmpty(theme) ? defaultTheme : theme[themeId] || theme;
-}
-const PROCESSED_PROPS = Symbol('mui.processed_props');
-function attachTheme(props, themeId, defaultTheme) {
-  if (PROCESSED_PROPS in props) {
-    return props[PROCESSED_PROPS];
-  }
-  const processedProps = {
-    ...props,
-    theme: resolveTheme(themeId, props.theme, defaultTheme)
-  };
-  props[PROCESSED_PROPS] = processedProps;
-  processedProps[PROCESSED_PROPS] = processedProps;
-  return processedProps;
-}
 function defaultOverridesResolver(slot) {
   if (!slot) {
     return null;
   }
   return (_props, styles) => styles[slot];
 }
-function processStyle(style, props) {
+function attachTheme(props, themeId, defaultTheme) {
+  props.theme = isObjectEmpty(props.theme) ? defaultTheme : props.theme[themeId] || props.theme;
+}
+function processStyle(props, style) {
+  /*
+   * Style types:
+   *  - null/undefined
+   *  - string
+   *  - CSS style object: { [cssKey]: [cssValue], variants }
+   *  - Processed style object: { style, variants, isProcessed: true }
+   *  - Array of any of the above
+   */
+
   const resolvedStyle = typeof style === 'function' ? style(props) : style;
   if (Array.isArray(resolvedStyle)) {
-    return resolvedStyle.flatMap(subStyle => processStyle(subStyle, props));
+    return resolvedStyle.flatMap(subStyle => processStyle(props, subStyle));
   }
   if (Array.isArray(resolvedStyle?.variants)) {
-    const {
-      variants,
-      ...otherStyles
-    } = resolvedStyle;
-    let result = otherStyles;
-    let mergedState; // We might not need it, initalized lazily
+    let rootStyle;
+    if (resolvedStyle.isProcessed) {
+      rootStyle = resolvedStyle.style;
+    } else {
+      const {
+        variants,
+        ...otherStyles
+      } = resolvedStyle;
+      rootStyle = otherStyles;
+    }
+    return processStyleVariants(props, resolvedStyle.variants, [rootStyle]);
+  }
+  if (resolvedStyle?.isProcessed) {
+    return resolvedStyle.style;
+  }
+  return resolvedStyle;
+}
+function processStyleVariants(props, variants, results = []) {
+  let mergedState; // We might not need it, initialized lazily
 
-    /* eslint-disable no-labels */
-    variantLoop: for (let i = 0; i < variants.length; i += 1) {
-      const variant = variants[i];
-      if (typeof variant.props === 'function') {
-        mergedState ?? (mergedState = {
-          ...props,
-          ...props.ownerState,
-          ownerState: props.ownerState
-        });
-        if (!variant.props(mergedState)) {
-          continue;
-        }
-      } else {
-        for (const key in variant.props) {
-          if (props[key] !== variant.props[key] && props.ownerState?.[key] !== variant.props[key]) {
-            continue variantLoop;
-          }
-        }
+  variantLoop: for (let i = 0; i < variants.length; i += 1) {
+    const variant = variants[i];
+    if (typeof variant.props === 'function') {
+      mergedState ?? (mergedState = {
+        ...props,
+        ...props.ownerState,
+        ownerState: props.ownerState
+      });
+      if (!variant.props(mergedState)) {
+        continue;
       }
-      if (!Array.isArray(result)) {
-        result = [result];
-      }
-      if (typeof variant.style === 'function') {
-        mergedState ?? (mergedState = {
-          ...props,
-          ...props.ownerState,
-          ownerState: props.ownerState
-        });
-        result.push(variant.style(mergedState));
-      } else {
-        result.push(variant.style);
+    } else {
+      for (const key in variant.props) {
+        if (props[key] !== variant.props[key] && props.ownerState?.[key] !== variant.props[key]) {
+          continue variantLoop;
+        }
       }
     }
-    /* eslint-enable no-labels */
-
-    return result;
+    if (typeof variant.style === 'function') {
+      mergedState ?? (mergedState = {
+        ...props,
+        ...props.ownerState,
+        ownerState: props.ownerState
+      });
+      results.push(variant.style(mergedState));
+    } else {
+      results.push(variant.style);
+    }
   }
-  return resolvedStyle;
+  return results;
 }
 export default function createStyled(input = {}) {
   const {
@@ -92,13 +98,13 @@ export default function createStyled(input = {}) {
     rootShouldForwardProp = shouldForwardProp,
     slotShouldForwardProp = shouldForwardProp
   } = input;
-  const systemSx = props => {
-    return styleFunctionSx(attachTheme(props, themeId, defaultTheme));
-  };
-  systemSx.__mui_systemSx = true;
+  function styleAttachTheme(props) {
+    attachTheme(props, themeId, defaultTheme);
+  }
   const styled = (tag, inputOptions = {}) => {
-    // Filter out the `sx` style function from the previous styled component to prevent unnecessary styles generated by the composite components.
-    processStyles(tag, styles => styles.filter(style => !style?.__mui_systemSx));
+    // If `tag` is already a styled component, filter out the `sx` style function
+    // to prevent unnecessary styles generated by the composite components.
+    mutateStyles(tag, styles => styles.filter(style => style !== styleFunctionSx));
     const {
       name: componentName,
       slot: componentSlot,
@@ -116,14 +122,6 @@ export default function createStyled(input = {}) {
     // For more details: https://github.com/mui/material-ui/pull/37908
     componentSlot && componentSlot !== 'Root' && componentSlot !== 'root' || false;
     const skipSx = inputSkipSx || false;
-    let label;
-    if (process.env.NODE_ENV !== 'production') {
-      if (componentName) {
-        // TODO v6: remove `lowercaseFirstLetter()` in the next major release
-        // For more details: https://github.com/mui/material-ui/pull/37908
-        label = `${componentName}-${lowercaseFirstLetter(componentSlot || 'Root')}`;
-      }
-    }
     let shouldForwardPropOption = shouldForwardProp;
 
     // TODO v6: remove `Root` in the next major release
@@ -139,75 +137,95 @@ export default function createStyled(input = {}) {
     }
     const defaultStyledResolver = styledEngineStyled(tag, {
       shouldForwardProp: shouldForwardPropOption,
-      label,
+      label: generateStyledLabel(componentName, componentSlot),
       ...options
     });
-    const transformStyleArg = style => {
+    const transformStyle = style => {
       // On the server Emotion doesn't use React.forwardRef for creating components, so the created
       // component stays as a function. This condition makes sure that we do not interpolate functions
       // which are basically components used as a selectors.
-      if (typeof style === 'function' && style.__emotion_real !== style || isPlainObject(style)) {
-        return props => processStyle(style, attachTheme(props, themeId, defaultTheme));
+      if (typeof style === 'function' && style.__emotion_real !== style) {
+        return function styleFunctionProcessor(props) {
+          return processStyle(props, style);
+        };
+      }
+      if (isPlainObject(style)) {
+        const serialized = preprocessStyles(style);
+        if (!serialized.variants) {
+          return serialized.style;
+        }
+        return function styleObjectProcessor(props) {
+          return processStyle(props, serialized);
+        };
       }
       return style;
     };
-    const muiStyledResolver = (style, ...expressions) => {
-      let transformedStyle = transformStyleArg(style);
-      const expressionsWithDefaultTheme = expressions ? expressions.map(transformStyleArg) : [];
+    const muiStyledResolver = (...expressionsInput) => {
+      const expressionsHead = [];
+      const expressionsBody = expressionsInput.map(transformStyle);
+      const expressionsTail = [];
+
+      // Preprocess `props` to set the scoped theme value.
+      // This must run before any other expression.
+      expressionsHead.push(styleAttachTheme);
       if (componentName && overridesResolver) {
-        expressionsWithDefaultTheme.push(props => {
-          const theme = resolveTheme(themeId, props.theme, defaultTheme);
-          if (!theme.components || !theme.components[componentName] || !theme.components[componentName].styleOverrides) {
+        expressionsTail.push(function styleThemeOverrides(props) {
+          const theme = props.theme;
+          const styleOverrides = theme.components?.[componentName]?.styleOverrides;
+          if (!styleOverrides) {
             return null;
           }
-          const styleOverrides = theme.components[componentName].styleOverrides;
           const resolvedStyleOverrides = {};
-          const propsWithTheme = attachTheme(props, themeId, defaultTheme);
 
           // TODO: v7 remove iteration and use `resolveStyleArg(styleOverrides[slot])` directly
           // eslint-disable-next-line guard-for-in
           for (const slotKey in styleOverrides) {
-            resolvedStyleOverrides[slotKey] = processStyle(styleOverrides[slotKey], propsWithTheme);
+            resolvedStyleOverrides[slotKey] = processStyle(props, styleOverrides[slotKey]);
           }
           return overridesResolver(props, resolvedStyleOverrides);
         });
       }
       if (componentName && !skipVariantsResolver) {
-        expressionsWithDefaultTheme.push(props => {
-          const theme = resolveTheme(themeId, props.theme, defaultTheme);
+        expressionsTail.push(function styleThemeVariants(props) {
+          const theme = props.theme;
           const themeVariants = theme?.components?.[componentName]?.variants;
           if (!themeVariants) {
             return null;
           }
-          return processStyle({
-            variants: themeVariants
-          }, attachTheme(props, themeId, defaultTheme));
+          return processStyleVariants(props, themeVariants);
         });
       }
       if (!skipSx) {
-        expressionsWithDefaultTheme.push(systemSx);
+        expressionsTail.push(styleFunctionSx);
       }
-      const numOfCustomFnsApplied = expressionsWithDefaultTheme.length - expressions.length;
-      if (Array.isArray(style) && numOfCustomFnsApplied > 0) {
-        const placeholders = new Array(numOfCustomFnsApplied).fill('');
-        // If the type is array, than we need to add placeholders in the template for the overrides, variants and the sx styles.
-        transformedStyle = [...style, ...placeholders];
-        transformedStyle.raw = [...style.raw, ...placeholders];
-      }
-      const Component = defaultStyledResolver(transformedStyle, ...expressionsWithDefaultTheme);
-      if (process.env.NODE_ENV !== 'production') {
-        let displayName;
-        if (componentName) {
-          displayName = `${componentName}${capitalize(componentSlot || '')}`;
-        }
-        if (displayName === undefined) {
-          displayName = `Styled(${getDisplayName(tag)})`;
+
+      // This function can be called as a tagged template, so the first argument would contain
+      // CSS `string[]` values.
+      if (Array.isArray(expressionsBody[0])) {
+        const inputStrings = expressionsBody.shift();
+
+        // We need to add placeholders in the tagged template for the custom functions we have
+        // possibly added (attachTheme, overrides, variants, and sx).
+        const placeholdersHead = new Array(expressionsHead.length).fill('');
+        const placeholdersTail = new Array(expressionsTail.length).fill('');
+        let outputStrings;
+        // prettier-ignore
+        {
+          outputStrings = [...placeholdersHead, ...inputStrings, ...placeholdersTail];
+          outputStrings.raw = [...placeholdersHead, ...inputStrings.raw, ...placeholdersTail];
         }
-        Component.displayName = displayName;
+
+        // The only case where we put something before `attachTheme`
+        expressionsHead.unshift(outputStrings);
       }
+      const expressions = [...expressionsHead, ...expressionsBody, ...expressionsTail];
+      const Component = defaultStyledResolver(...expressions);
       if (tag.muiName) {
         Component.muiName = tag.muiName;
       }
+      if (process.env.NODE_ENV !== 'production') {
+        Component.displayName = generateDisplayName(componentName, componentSlot, tag);
+      }
       return Component;
     };
     if (defaultStyledResolver.withConfig) {
@@ -217,6 +235,23 @@ export default function createStyled(input = {}) {
   };
   return styled;
 }
+function generateDisplayName(componentName, componentSlot, tag) {
+  if (componentName) {
+    return `${componentName}${capitalize(componentSlot || '')}`;
+  }
+  return `Styled(${getDisplayName(tag)})`;
+}
+function generateStyledLabel(componentName, componentSlot) {
+  let label;
+  if (process.env.NODE_ENV !== 'production') {
+    if (componentName) {
+      // TODO v6: remove `lowercaseFirstLetter()` in the next major release
+      // For more details: https://github.com/mui/material-ui/pull/37908
+      label = `${componentName}-${lowercaseFirstLetter(componentSlot || 'Root')}`;
+    }
+  }
+  return label;
+}
 function isObjectEmpty(object) {
   // eslint-disable-next-line
   for (const _ in object) {

package/modern/cssContainerQueries/cssContainerQueries.js

@@ -32,8 +32,7 @@ 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\`.` : _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`.' : _formatMuiErrorMessage(18, `(${shorthand})`));
     }
     return null;
   }

package/modern/cssVars/createCssVarsProvider.js

@@ -49,7 +49,8 @@ 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();
@@ -72,7 +73,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 {
@@ -244,6 +245,11 @@ export default function createCssVarsProvider(options) {
      * localStorage key used to store `colorScheme`
      */
     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`.
      */

package/modern/cssVars/useCurrentColorScheme.js

@@ -43,7 +43,7 @@ function initializeValue(key, defaultValue) {
       // the first time that user enters the site.
       localStorage.setItem(key, defaultValue);
     }
-  } catch (e) {
+  } catch {
     // Unsupported
   }
   return value || defaultValue;
@@ -90,7 +90,7 @@ export default function useCurrentColorScheme(options) {
       const newMode = mode ?? defaultMode;
       try {
         localStorage.setItem(modeStorageKey, newMode);
-      } catch (e) {
+      } catch {
         // Unsupported
       }
       return {
@@ -106,7 +106,7 @@ export default function useCurrentColorScheme(options) {
         try {
           localStorage.setItem(`${colorSchemeStorageKey}-light`, defaultLightColorScheme);
           localStorage.setItem(`${colorSchemeStorageKey}-dark`, defaultDarkColorScheme);
-        } catch (e) {
+        } catch {
           // Unsupported
         }
         return {
@@ -126,7 +126,7 @@ export default function useCurrentColorScheme(options) {
           processState(currentState, mode => {
             try {
               localStorage.setItem(`${colorSchemeStorageKey}-${mode}`, value);
-            } catch (e) {
+            } catch {
               // Unsupported
             }
             if (mode === 'light') {

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v6.1.1
+ * @mui/system v6.1.3
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -35,7 +35,7 @@ export { default as unstable_styleFunctionSx, unstable_createStyleFunctionSx, ex
 // 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));
+  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/index.js";
 export { default as Box } from "./Box/index.js";
@@ -53,6 +53,7 @@ export { default as useThemeWithoutDefault } from "./useThemeWithoutDefault/inde
 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_memoTheme } from "./memoTheme.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";

package/modern/memoTheme.js

@@ -0,0 +1,28 @@
+import preprocessStyles from "./preprocessStyles.js";
+
+/* eslint-disable @typescript-eslint/naming-convention */
+
+// We need to pass an argument as `{ theme }` for PigmentCSS, but we don't want to
+// allocate more objects.
+const arg = {
+  theme: undefined
+};
+
+/**
+ * Memoize style function on theme.
+ * Intended to be used in styled() calls that only need access to the theme.
+ */
+export default function unstable_memoTheme(styleFn) {
+  let lastValue;
+  let lastTheme;
+  return function styleMemoized(props) {
+    let value = lastValue;
+    if (value === undefined || props.theme !== lastTheme) {
+      arg.theme = props.theme;
+      value = preprocessStyles(styleFn(arg));
+      lastValue = value;
+      lastTheme = props.theme;
+    }
+    return value;
+  };
+}

package/modern/preprocessStyles.js

@@ -0,0 +1,25 @@
+import { internal_serializeStyles } from '@mui/styled-engine';
+export default function preprocessStyles(input) {
+  const {
+    variants,
+    ...style
+  } = input;
+  const result = {
+    variants,
+    style: internal_serializeStyles(style),
+    isProcessed: true
+  };
+
+  // Not supported on styled-components
+  if (result.style === style) {
+    return result;
+  }
+  if (variants) {
+    variants.forEach(variant => {
+      if (typeof variant.style !== 'function') {
+        variant.style = internal_serializeStyles(variant.style);
+      }
+    });
+  }
+  return result;
+}

package/modern/version/index.js

@@ -1,6 +1,6 @@
-export const version = "6.1.1";
+export const version = "6.1.3";
 export const major = Number("6");
 export const minor = Number("1");
-export const patch = Number("1");
+export const patch = Number("3");
 export const prerelease = undefined;
 export default version;

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@mui/system",
-  "version": "6.1.1",
+  "version": "6.1.3",
   "private": false,
   "author": "MUI Team",
   "description": "MUI System is a set of CSS utilities to help you build custom designs more efficiently. It makes it possible to rapidly lay out custom designs.",
-  "main": "./node/index.js",
+  "main": "./index.js",
   "keywords": [
     "react",
     "react-component",
@@ -30,10 +30,10 @@
     "clsx": "^2.1.1",
     "csstype": "^3.1.3",
     "prop-types": "^15.8.1",
-    "@mui/private-theming": "^6.1.1",
-    "@mui/styled-engine": "^6.1.1",
-    "@mui/utils": "^6.1.1",
-    "@mui/types": "^7.2.17"
+    "@mui/private-theming": "^6.1.3",
+    "@mui/styled-engine": "^6.1.3",
+    "@mui/types": "^7.2.18",
+    "@mui/utils": "^6.1.3"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",
@@ -60,6 +60,6 @@
   "engines": {
     "node": ">=14.0.0"
   },
-  "module": "./index.js",
+  "module": "./esm/index.js",
   "types": "./index.d.ts"
 }

package/palette/index.js

@@ -1,2 +1,25 @@
-export { default } from "./palette.js";
-export * from "./palette.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 _palette.default;
+  }
+});
+var _palette = _interopRequireWildcard(require("./palette"));
+Object.keys(_palette).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _palette[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _palette[key];
+    }
+  });
+});

package/palette/package.json

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

package/palette/palette.js

@@ -1,26 +1,34 @@
-import style from "../style/index.js";
-import compose from "../compose/index.js";
-export function paletteTransform(value, userValue) {
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.color = exports.bgcolor = exports.backgroundColor = void 0;
+exports.paletteTransform = paletteTransform;
+var _style = _interopRequireDefault(require("../style"));
+var _compose = _interopRequireDefault(require("../compose"));
+function paletteTransform(value, userValue) {
   if (userValue === 'grey') {
     return userValue;
   }
   return value;
 }
-export const color = style({
+const color = exports.color = (0, _style.default)({
   prop: 'color',
   themeKey: 'palette',
   transform: paletteTransform
 });
-export const bgcolor = style({
+const bgcolor = exports.bgcolor = (0, _style.default)({
   prop: 'bgcolor',
   cssProperty: 'backgroundColor',
   themeKey: 'palette',
   transform: paletteTransform
 });
-export const backgroundColor = style({
+const backgroundColor = exports.backgroundColor = (0, _style.default)({
   prop: 'backgroundColor',
   themeKey: 'palette',
   transform: paletteTransform
 });
-const palette = compose(color, bgcolor, backgroundColor);
-export default palette;
+const palette = (0, _compose.default)(color, bgcolor, backgroundColor);
+var _default = exports.default = palette;

package/positions/index.js

@@ -1,2 +1,25 @@
-export { default } from "./positions.js";
-export * from "./positions.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 _positions.default;
+  }
+});
+var _positions = _interopRequireWildcard(require("./positions"));
+Object.keys(_positions).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _positions[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _positions[key];
+    }
+  });
+});