@mui/system 5.15.15 → 6.0.0-alpha.1

package/legacy/{compose.js → compose/compose.js}

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import merge from './merge';
+import merge from '../merge';
 function compose() {
   for (var _len = arguments.length, styles = new Array(_len), _key = 0; _key < _len; _key++) {
     styles[_key] = arguments[_key];

package/legacy/compose/index.js

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

package/legacy/{createBox.js → createBox/createBox.js}

@@ -5,8 +5,8 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 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';
+import useTheme from '../useTheme';
 import { jsx as _jsx } from "react/jsx-runtime";
 export default function createBox() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

package/legacy/createBox/index.js

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

package/legacy/{createStyled.js → createStyled/createStyled.js}

@@ -8,8 +8,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';
+import styleFunctionSx from '../styleFunctionSx';
 function isEmpty(obj) {
   return Object.keys(obj).length === 0;
 }

package/legacy/createStyled/index.js

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

package/legacy/createTheme/createSpacing.js

@@ -5,17 +5,13 @@ import { createUnarySpacing } from '../spacing';
 
 export default function createSpacing() {
   var spacingInput = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 8;
+  var transform = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : createUnarySpacing({
+    spacing: spacingInput
+  });
   // Already transformed.
   if (spacingInput.mui) {
     return spacingInput;
   }
-
-  // Material Design layouts are visually balanced. Most measurements align to an 8dp grid, which aligns both spacing and the overall layout.
-  // Smaller components, such as icons, can align to a 4dp grid.
-  // https://m2.material.io/design/layout/understanding-layout.html
-  var transform = createUnarySpacing({
-    spacing: spacingInput
-  });
   var spacing = function spacing() {
     for (var _len = arguments.length, argsInput = new Array(_len), _key = 0; _key < _len; _key++) {
       argsInput[_key] = arguments[_key];

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

package/legacy/cssGrid/index.js

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

package/legacy/cssVars/createCssVarsProvider.js

@@ -1,4 +1,3 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
@@ -6,14 +5,12 @@ import _typeof from "@babel/runtime/helpers/esm/typeof";
 import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import deepmerge from '@mui/utils/deepmerge';
 import { GlobalStyles } from '@mui/styled-engine';
 import { useTheme as muiUseTheme } from '@mui/private-theming';
 import ThemeProvider from '../ThemeProvider';
 import systemGetInitColorSchemeScript, { DEFAULT_ATTRIBUTE, DEFAULT_COLOR_SCHEME_STORAGE_KEY, DEFAULT_MODE_STORAGE_KEY } from './getInitColorSchemeScript';
 import useCurrentColorScheme from './useCurrentColorScheme';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export var 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) {
   var themeId = options.themeId,
@@ -30,8 +27,7 @@ export default function createCssVarsProvider(options) {
     designSystemColorScheme = options.defaultColorScheme,
     _options$disableTrans = options.disableTransitionOnChange,
     designSystemTransitionOnChange = _options$disableTrans === void 0 ? false : _options$disableTrans,
-    resolveTheme = options.resolveTheme,
-    excludeVariablesFromRoot = options.excludeVariablesFromRoot;
+    resolveTheme = options.resolveTheme;
   if (!defaultTheme.colorSchemes || typeof designSystemColorScheme === 'string' && !defaultTheme.colorSchemes[designSystemColorScheme] || _typeof(designSystemColorScheme) === 'object' && !defaultTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.light] || _typeof(designSystemColorScheme) === 'object' && !defaultTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.dark]) {
     console.error("MUI: `".concat(designSystemColorScheme, "` does not exist in `theme.colorSchemes`."));
   }
@@ -47,6 +43,7 @@ export default function createCssVarsProvider(options) {
     return value;
   };
   function CssVarsProvider(props) {
+    var _restThemeProp$genera, _theme$generateStyleS;
     var children = props.children,
       _props$theme = props.theme,
       themeProp = _props$theme === void 0 ? defaultTheme : _props$theme,
@@ -84,15 +81,8 @@ export default function createCssVarsProvider(options) {
       colorSchemes = _ref$colorSchemes === void 0 ? {} : _ref$colorSchemes,
       _ref$components = _ref.components,
       components = _ref$components === void 0 ? {} : _ref$components,
-      _ref$generateCssVars = _ref.generateCssVars,
-      generateCssVars = _ref$generateCssVars === void 0 ? function () {
-        return {
-          vars: {},
-          css: {}
-        };
-      } : _ref$generateCssVars,
       cssVarPrefix = _ref.cssVarPrefix,
-      restThemeProp = _objectWithoutProperties(_ref, ["colorSchemes", "components", "generateCssVars", "cssVarPrefix"]);
+      restThemeProp = _objectWithoutProperties(_ref, ["colorSchemes", "components", "cssVarPrefix"]);
     var allColorSchemes = Object.keys(colorSchemes);
     var defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
     var defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
@@ -142,33 +132,25 @@ export default function createCssVarsProvider(options) {
       return colorScheme;
     }();
 
-    // 2. Create CSS variables and store them in objects (to be generated in stylesheets in the final step)
-    var _generateCssVars = generateCssVars(),
-      rootCss = _generateCssVars.css,
-      rootVars = _generateCssVars.vars; // 3. Start composing the theme object
+    // 2. get the `vars` object that refers to the CSS custom properties
+    var themeVars = ((_restThemeProp$genera = restThemeProp.generateThemeVars) == null ? void 0 : _restThemeProp$genera.call(restThemeProp)) || restThemeProp.vars;
+
+    // 3. Start composing the theme object
     var theme = _extends({}, restThemeProp, {
       components: components,
       colorSchemes: colorSchemes,
       cssVarPrefix: cssVarPrefix,
-      vars: rootVars,
-      getColorSchemeSelector: function getColorSchemeSelector(targetColorScheme) {
-        return "[".concat(attribute, "=\"").concat(targetColorScheme, "\"] &");
-      }
+      vars: themeVars
     });
+    if (typeof theme.generateSpacing === 'function') {
+      theme.spacing = theme.generateSpacing();
+    }
 
-    // 4. Create color CSS variables and store them in objects (to be generated in stylesheets in the final step)
-    //    The default color scheme stylesheet is constructed to have the least CSS specificity.
-    //    The other color schemes uses selector, default as data attribute, to increase the CSS specificity so that they can override the default color scheme stylesheet.
-    var defaultColorSchemeStyleSheet = {};
-    var otherColorSchemesStyleSheet = {};
+    // 4. Resolve the color scheme and merge it to the theme
     Object.entries(colorSchemes).forEach(function (_ref2) {
       var _ref3 = _slicedToArray(_ref2, 2),
         key = _ref3[0],
         scheme = _ref3[1];
-      var _generateCssVars2 = generateCssVars(key),
-        css = _generateCssVars2.css,
-        vars = _generateCssVars2.vars;
-      theme.vars = deepmerge(theme.vars, vars);
       if (key === calculatedColorScheme) {
         // 4.1 Merge the selected color scheme to the theme
         Object.keys(scheme).forEach(function (schemeKey) {
@@ -183,30 +165,24 @@ export default function createCssVarsProvider(options) {
           theme.palette.colorScheme = key;
         }
       }
-      var resolvedDefaultColorScheme = function () {
-        if (typeof defaultColorScheme === 'string') {
-          return defaultColorScheme;
-        }
-        if (defaultMode === 'dark') {
-          return defaultColorScheme.dark;
-        }
-        return defaultColorScheme.light;
-      }();
-      if (key === resolvedDefaultColorScheme) {
-        if (excludeVariablesFromRoot) {
-          var excludedVariables = {};
-          excludeVariablesFromRoot(cssVarPrefix).forEach(function (cssVar) {
-            excludedVariables[cssVar] = css[cssVar];
-            delete css[cssVar];
-          });
-          defaultColorSchemeStyleSheet["[".concat(attribute, "=\"").concat(key, "\"]")] = excludedVariables;
-        }
-        defaultColorSchemeStyleSheet["".concat(colorSchemeSelector, ", [").concat(attribute, "=\"").concat(key, "\"]")] = css;
-      } else {
-        otherColorSchemesStyleSheet["".concat(colorSchemeSelector === ':root' ? '' : colorSchemeSelector, "[").concat(attribute, "=\"").concat(key, "\"]")] = css;
-      }
     });
-    theme.vars = deepmerge(theme.vars, rootVars);
+    var resolvedDefaultColorScheme = function () {
+      if (typeof defaultColorScheme === 'string') {
+        return defaultColorScheme;
+      }
+      if (defaultMode === 'dark') {
+        return defaultColorScheme.dark;
+      }
+      return defaultColorScheme.light;
+    }();
+    themeProp.defaultColorScheme = resolvedDefaultColorScheme;
+    themeProp.colorSchemeSelector = colorSchemeSelector;
+    themeProp.attribute = attribute;
+    if (!theme.getColorSchemeSelector) {
+      theme.getColorSchemeSelector = function (targetColorScheme) {
+        return "[".concat(attribute, "=\"").concat(targetColorScheme, "\"] &");
+      };
+    }
 
     // 5. Declaring effects
     // 5.1 Updates the selector value to use the current color scheme which tells CSS to use the proper stylesheet.
@@ -261,14 +237,12 @@ export default function createCssVarsProvider(options) {
       shouldGenerateStyleSheet = false;
     }
     var element = /*#__PURE__*/_jsxs(React.Fragment, {
-      children: [shouldGenerateStyleSheet && /*#__PURE__*/_jsxs(React.Fragment, {
-        children: [/*#__PURE__*/_jsx(GlobalStyles, {
-          styles: _defineProperty({}, colorSchemeSelector, rootCss)
-        }), /*#__PURE__*/_jsx(GlobalStyles, {
-          styles: defaultColorSchemeStyleSheet
-        }), /*#__PURE__*/_jsx(GlobalStyles, {
-          styles: otherColorSchemesStyleSheet
-        })]
+      children: [shouldGenerateStyleSheet && /*#__PURE__*/_jsx(React.Fragment, {
+        children: (((_theme$generateStyleS = theme.generateStyleSheets) == null ? void 0 : _theme$generateStyleS.call(theme)) || []).map(function (styles, index) {
+          return /*#__PURE__*/_jsx(GlobalStyles, {
+            styles: styles
+          }, index);
+        })
       }), /*#__PURE__*/_jsx(ThemeProvider, {
         themeId: scopedTheme ? themeId : undefined,
         theme: resolveTheme ? resolveTheme(theme) : theme,

package/legacy/cssVars/createCssVarsTheme.js

@@ -1,13 +1,13 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import prepareCssVars from './prepareCssVars';
 function createCssVarsTheme(theme) {
-  var cssVarPrefix = theme.cssVarPrefix,
-    shouldSkipGeneratingVar = theme.shouldSkipGeneratingVar,
-    otherTheme = _objectWithoutProperties(theme, ["cssVarPrefix", "shouldSkipGeneratingVar"]);
-  return _extends({}, theme, prepareCssVars(otherTheme, {
-    prefix: cssVarPrefix,
-    shouldSkipGeneratingVar: shouldSkipGeneratingVar
+  var output = theme;
+  var result = prepareCssVars(output, _extends({}, theme, {
+    prefix: theme.cssVarPrefix
   }));
+  output.vars = result.vars;
+  output.generateThemeVars = result.generateThemeVars;
+  output.generateStyleSheets = result.generateStyleSheets;
+  return output;
 }
 export default createCssVarsTheme;

package/legacy/cssVars/cssVarsParser.js

@@ -123,9 +123,10 @@ export default function cssVarsParser(theme, options) {
       if (!shouldSkipGeneratingVar || !shouldSkipGeneratingVar(keys, value)) {
         // only create css & var if `shouldSkipGeneratingVar` return false
         var cssVar = "--".concat(prefix ? "".concat(prefix, "-") : '').concat(keys.join('-'));
-        _extends(css, _defineProperty({}, cssVar, getCssValue(keys, value)));
+        var resolvedValue = getCssValue(keys, value);
+        _extends(css, _defineProperty({}, cssVar, resolvedValue));
         assignNestedKeys(vars, keys, "var(".concat(cssVar, ")"), arrayKeys);
-        assignNestedKeys(varsWithDefaults, keys, "var(".concat(cssVar, ", ").concat(value, ")"), arrayKeys);
+        assignNestedKeys(varsWithDefaults, keys, "var(".concat(cssVar, ", ").concat(resolvedValue, ")"), arrayKeys);
       }
     }
   }, function (keys) {

package/legacy/cssVars/prepareCssVars.js

@@ -1,10 +1,14 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _toPropertyKey from "@babel/runtime/helpers/esm/toPropertyKey";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import deepmerge from '@mui/utils/deepmerge';
 import cssVarsParser from './cssVarsParser';
-function prepareCssVars(theme, parserConfig) {
+function prepareCssVars(theme) {
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var getSelector = _ref.getSelector,
+    parserConfig = _objectWithoutProperties(_ref, ["getSelector"]);
   // @ts-ignore - ignore components do not exist
   var _theme$colorSchemes = theme.colorSchemes,
     colorSchemes = _theme$colorSchemes === void 0 ? {} : _theme$colorSchemes,
@@ -18,12 +22,12 @@ function prepareCssVars(theme, parserConfig) {
     rootVarsWithDefaults = _cssVarsParser.varsWithDefaults;
   var themeVars = rootVarsWithDefaults;
   var colorSchemesMap = {};
-  var light = colorSchemes[defaultColorScheme],
+  var defaultScheme = colorSchemes[defaultColorScheme],
     otherColorSchemes = _objectWithoutProperties(colorSchemes, [defaultColorScheme].map(_toPropertyKey));
-  Object.entries(otherColorSchemes || {}).forEach(function (_ref) {
-    var _ref2 = _slicedToArray(_ref, 2),
-      key = _ref2[0],
-      scheme = _ref2[1];
+  Object.entries(otherColorSchemes || {}).forEach(function (_ref2) {
+    var _ref3 = _slicedToArray(_ref2, 2),
+      key = _ref3[0],
+      scheme = _ref3[1];
     var _cssVarsParser2 = cssVarsParser(scheme, parserConfig),
       vars = _cssVarsParser2.vars,
       css = _cssVarsParser2.css,
@@ -34,9 +38,9 @@ function prepareCssVars(theme, parserConfig) {
       vars: vars
     };
   });
-  if (light) {
+  if (defaultScheme) {
     // default color scheme vars should be merged last to set as default
-    var _cssVarsParser3 = cssVarsParser(light, parserConfig),
+    var _cssVarsParser3 = cssVarsParser(defaultScheme, parserConfig),
       _css = _cssVarsParser3.css,
       vars = _cssVarsParser3.vars,
       varsWithDefaults = _cssVarsParser3.varsWithDefaults;
@@ -46,27 +50,43 @@ function prepareCssVars(theme, parserConfig) {
       vars: vars
     };
   }
-  var generateCssVars = function generateCssVars(colorScheme) {
-    var _parserConfig$getSele2;
-    if (!colorScheme) {
-      var _parserConfig$getSele;
-      var _css2 = _extends({}, rootCss);
-      return {
-        css: _css2,
-        vars: rootVars,
-        selector: (parserConfig == null || (_parserConfig$getSele = parserConfig.getSelector) == null ? void 0 : _parserConfig$getSele.call(parserConfig, colorScheme, _css2)) || ':root'
-      };
+  var generateThemeVars = function generateThemeVars() {
+    var vars = _extends({}, rootVars);
+    Object.entries(colorSchemesMap).forEach(function (_ref4) {
+      var _ref5 = _slicedToArray(_ref4, 2),
+        schemeVars = _ref5[1].vars;
+      vars = deepmerge(vars, schemeVars);
+    });
+    return vars;
+  };
+  var generateStyleSheets = function generateStyleSheets() {
+    var stylesheets = [];
+    var colorScheme = theme.defaultColorScheme || 'light';
+    function insertStyleSheet(selector, css) {
+      if (Object.keys(css).length) {
+        stylesheets.push(typeof selector === 'string' ? _defineProperty({}, selector, _extends({}, css)) : selector);
+      }
     }
-    var css = _extends({}, colorSchemesMap[colorScheme].css);
-    return {
-      css: css,
-      vars: colorSchemesMap[colorScheme].vars,
-      selector: (parserConfig == null || (_parserConfig$getSele2 = parserConfig.getSelector) == null ? void 0 : _parserConfig$getSele2.call(parserConfig, colorScheme, css)) || ':root'
-    };
+    insertStyleSheet((getSelector == null ? void 0 : getSelector(undefined, _extends({}, rootCss))) || ':root', rootCss);
+    var defaultSchemeVal = colorSchemesMap[colorScheme],
+      rest = _objectWithoutProperties(colorSchemesMap, [colorScheme].map(_toPropertyKey));
+    if (defaultSchemeVal) {
+      // default color scheme has to come before other color schemes
+      var _css2 = defaultSchemeVal.css;
+      insertStyleSheet((getSelector == null ? void 0 : getSelector(colorScheme, _extends({}, _css2))) || "[".concat(theme.attribute || 'data-color-scheme', "=\"").concat(colorScheme, "\"]"), _css2);
+    }
+    Object.entries(rest).forEach(function (_ref7) {
+      var _ref8 = _slicedToArray(_ref7, 2),
+        key = _ref8[0],
+        css = _ref8[1].css;
+      insertStyleSheet((getSelector == null ? void 0 : getSelector(key, _extends({}, css))) || "[".concat(theme.attribute || 'data-color-scheme', "=\"").concat(key, "\"]"), css);
+    });
+    return stylesheets;
   };
   return {
     vars: themeVars,
-    generateCssVars: generateCssVars
+    generateThemeVars: generateThemeVars,
+    generateStyleSheets: generateStyleSheets
   };
 }
 export default prepareCssVars;

package/legacy/{display.js → display/display.js}

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

package/legacy/display/index.js

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

package/legacy/{flexbox.js → flexbox/flexbox.js}

@@ -1,5 +1,5 @@
-import style from './style';
-import compose from './compose';
+import style from '../style';
+import compose from '../compose';
 export var flexBasis = style({
   prop: 'flexBasis'
 });

package/legacy/flexbox/index.js

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

package/legacy/{getThemeValue.js → getThemeValue/getThemeValue.js}

@@ -1,14 +1,14 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-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';
+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';
 var filterPropsMapping = {
   borders: borders.filterProps,
   display: display.filterProps,

package/legacy/getThemeValue/index.js

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

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v5.15.15
+ * @mui/system v6.0.0-alpha.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/legacy/memoize/index.js

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

package/legacy/merge/index.js

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

package/legacy/palette/index.js

@@ -0,0 +1,4 @@
+'use client';
+
+export { default } from './palette';
+export * from './palette';

package/legacy/{palette.js → palette/palette.js}

@@ -1,5 +1,5 @@
-import style from './style';
-import compose from './compose';
+import style from '../style';
+import compose from '../compose';
 export function paletteTransform(value, userValue) {
   if (userValue === 'grey') {
     return userValue;

package/legacy/positions/index.js

@@ -0,0 +1,4 @@
+'use client';
+
+export { default } from './positions';
+export * from './positions';

package/legacy/{positions.js → positions/positions.js}

@@ -1,5 +1,5 @@
-import style from './style';
-import compose from './compose';
+import style from '../style';
+import compose from '../compose';
 export var position = style({
   prop: 'position'
 });

package/legacy/propsToClassKey/index.js

@@ -0,0 +1,3 @@
+'use client';
+
+export { default } from './propsToClassKey';

package/legacy/responsivePropType/index.js

@@ -0,0 +1,3 @@
+'use client';
+
+export { default } from './responsivePropType';

package/legacy/shadows/index.js

@@ -0,0 +1,3 @@
+'use client';
+
+export { default } from './shadows';

package/legacy/{shadows.js → shadows/shadows.js}

@@ -1,4 +1,4 @@
-import style from './style';
+import style from '../style';
 var boxShadow = style({
   prop: 'boxShadow',
   themeKey: 'shadows'

package/legacy/sizing/index.js

@@ -0,0 +1,4 @@
+'use client';
+
+export { default } from './sizing';
+export * from './sizing';

package/legacy/{sizing.js → sizing/sizing.js}

@@ -1,6 +1,6 @@
-import style from './style';
-import compose from './compose';
-import { handleBreakpoints, values as breakpointsValues } from './breakpoints';
+import style from '../style';
+import compose from '../compose';
+import { handleBreakpoints, values as breakpointsValues } from '../breakpoints';
 export function sizingTransform(value) {
   return value <= 1 && value !== 0 ? "".concat(value * 100, "%") : value;
 }

package/legacy/spacing/index.js

@@ -0,0 +1,4 @@
+'use client';
+
+export { default } from './spacing';
+export * from './spacing';