@mui/system 5.15.14 → 6.0.0-alpha.0

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

@@ -1,8 +1,16 @@
-import capitalize from '@mui/utils/capitalize';
-import merge from '../merge';
-import { getPath, getStyleValue as getValue } from '../style';
-import { handleBreakpoints, createEmptyBreakpointObject, removeUnusedBreakpoints } from '../breakpoints';
-import defaultSxConfig from './defaultSxConfig';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+exports.unstable_createStyleFunctionSx = unstable_createStyleFunctionSx;
+var _capitalize = _interopRequireDefault(require("@mui/utils/capitalize"));
+var _merge = _interopRequireDefault(require("../merge"));
+var _style = require("../style");
+var _breakpoints = require("../breakpoints");
+var _defaultSxConfig = _interopRequireDefault(require("./defaultSxConfig"));
 function objectsHaveSameKeys(...objects) {
   const allKeys = objects.reduce((keys, object) => keys.concat(Object.keys(object)), []);
   const union = new Set(allKeys);
@@ -13,7 +21,7 @@ function callIfFn(maybeFn, arg) {
 }
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
-export function unstable_createStyleFunctionSx() {
+function unstable_createStyleFunctionSx() {
   function getThemeValue(prop, val, theme, config) {
     const props = {
       [prop]: val,
@@ -41,15 +49,15 @@ export function unstable_createStyleFunctionSx() {
         [prop]: val
       };
     }
-    const themeMapping = getPath(theme, themeKey) || {};
+    const themeMapping = (0, _style.getPath)(theme, themeKey) || {};
     if (style) {
       return style(props);
     }
     const styleFromPropValue = propValueFinal => {
-      let value = getValue(themeMapping, transform, propValueFinal);
+      let value = (0, _style.getStyleValue)(themeMapping, transform, propValueFinal);
       if (propValueFinal === value && typeof propValueFinal === 'string') {
         // Haven't found value
-        value = getValue(themeMapping, transform, `${prop}${propValueFinal === 'default' ? '' : capitalize(propValueFinal)}`, propValueFinal);
+        value = (0, _style.getStyleValue)(themeMapping, transform, `${prop}${propValueFinal === 'default' ? '' : (0, _capitalize.default)(propValueFinal)}`, propValueFinal);
       }
       if (cssProperty === false) {
         return value;
@@ -58,7 +66,7 @@ export function unstable_createStyleFunctionSx() {
         [cssProperty]: value
       };
     };
-    return handleBreakpoints(props, val, styleFromPropValue);
+    return (0, _breakpoints.handleBreakpoints)(props, val, styleFromPropValue);
   }
   function styleFunctionSx(props) {
     var _theme$unstable_sxCon;
@@ -69,7 +77,7 @@ export function unstable_createStyleFunctionSx() {
     if (!sx) {
       return null; // Emotion & styled-components will neglect null
     }
-    const config = (_theme$unstable_sxCon = theme.unstable_sxConfig) != null ? _theme$unstable_sxCon : defaultSxConfig;
+    const config = (_theme$unstable_sxCon = theme.unstable_sxConfig) != null ? _theme$unstable_sxCon : _defaultSxConfig.default;
 
     /*
      * Receive `sxInput` as object or callback
@@ -87,7 +95,7 @@ export function unstable_createStyleFunctionSx() {
       if (!sxObject) {
         return null;
       }
-      const emptyBreakpoints = createEmptyBreakpointObject(theme.breakpoints);
+      const emptyBreakpoints = (0, _breakpoints.createEmptyBreakpointObject)(theme.breakpoints);
       const breakpointsKeys = Object.keys(emptyBreakpoints);
       let css = emptyBreakpoints;
       Object.keys(sxObject).forEach(styleKey => {
@@ -95,9 +103,9 @@ export function unstable_createStyleFunctionSx() {
         if (value !== null && value !== undefined) {
           if (typeof value === 'object') {
             if (config[styleKey]) {
-              css = merge(css, getThemeValue(styleKey, value, theme, config));
+              css = (0, _merge.default)(css, getThemeValue(styleKey, value, theme, config));
             } else {
-              const breakpointsValues = handleBreakpoints({
+              const breakpointsValues = (0, _breakpoints.handleBreakpoints)({
                 theme
               }, value, x => ({
                 [styleKey]: x
@@ -108,15 +116,15 @@ export function unstable_createStyleFunctionSx() {
                   theme
                 });
               } else {
-                css = merge(css, breakpointsValues);
+                css = (0, _merge.default)(css, breakpointsValues);
               }
             }
           } else {
-            css = merge(css, getThemeValue(styleKey, value, theme, config));
+            css = (0, _merge.default)(css, getThemeValue(styleKey, value, theme, config));
           }
         }
       });
-      return removeUnusedBreakpoints(breakpointsKeys, css);
+      return (0, _breakpoints.removeUnusedBreakpoints)(breakpointsKeys, css);
     }
     return Array.isArray(sx) ? sx.map(traverse) : traverse(sx);
   }
@@ -124,4 +132,4 @@ export function unstable_createStyleFunctionSx() {
 }
 const styleFunctionSx = unstable_createStyleFunctionSx();
 styleFunctionSx.filterProps = ['sx'];
-export default styleFunctionSx;
+var _default = exports.default = styleFunctionSx;

package/node/styled/index.js

@@ -0,0 +1,14 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _styled.default;
+  }
+});
+var _styled = _interopRequireDefault(require("./styled"));

package/{styled.js → node/styled/styled.js}

@@ -5,6 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _createStyled = _interopRequireDefault(require("./createStyled"));
+var _createStyled = _interopRequireDefault(require("../createStyled"));
 const styled = (0, _createStyled.default)();
 var _default = exports.default = styled;

package/node/typography/index.js

@@ -0,0 +1,27 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _typography.default;
+  }
+});
+var _typography = _interopRequireWildcard(require("./typography"));
+Object.keys(_typography).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _typography[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _typography[key];
+    }
+  });
+});
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }

package/{typography.js → node/typography/typography.js}

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.typographyVariant = exports.textTransform = exports.textAlign = exports.lineHeight = exports.letterSpacing = exports.fontWeight = exports.fontStyle = exports.fontSize = exports.fontFamily = exports.default = void 0;
-var _style = _interopRequireDefault(require("./style"));
-var _compose = _interopRequireDefault(require("./compose"));
+var _style = _interopRequireDefault(require("../style"));
+var _compose = _interopRequireDefault(require("../compose"));
 const fontFamily = exports.fontFamily = (0, _style.default)({
   prop: 'fontFamily',
   themeKey: 'typography'

package/node/useMediaQuery/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _useMediaQuery.default;
+  }
+});
+var _useMediaQuery = _interopRequireWildcard(require("./useMediaQuery"));
+Object.keys(_useMediaQuery).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useMediaQuery[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useMediaQuery[key];
+    }
+  });
+});
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }

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

@@ -1,10 +1,17 @@
+"use strict";
 'use client';
 
-import * as React from 'react';
-import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
-import { getThemeProps } from '../useThemeProps';
-import useTheme from '../useThemeWithoutDefault';
-
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useMediaQuery;
+var React = _interopRequireWildcard(require("react"));
+var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
+var _useThemeProps = require("../useThemeProps");
+var _useThemeWithoutDefault = _interopRequireDefault(require("../useThemeWithoutDefault"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
  * @deprecated Not used internally. Use `MediaQueryListEvent` from lib.dom.d.ts instead.
  */
@@ -30,7 +37,7 @@ function useMediaQueryOld(query, defaultMatches, matchMedia, ssrMatchMedia, noSs
     // event listeners to return the correct matches value.
     return defaultMatches;
   });
-  useEnhancedEffect(() => {
+  (0, _useEnhancedEffect.default)(() => {
     let active = true;
     if (!matchMedia) {
       return undefined;
@@ -87,8 +94,8 @@ function useMediaQueryNew(query, defaultMatches, matchMedia, ssrMatchMedia, noSs
   const match = maybeReactUseSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
   return match;
 }
-export default function useMediaQuery(queryInput, options = {}) {
-  const theme = useTheme();
+function useMediaQuery(queryInput, options = {}) {
+  const theme = (0, _useThemeWithoutDefault.default)();
   // Wait for jsdom to support the match media feature.
   // All the browsers MUI support have this built-in.
   // This defensive check is here for simplicity.
@@ -99,7 +106,7 @@ export default function useMediaQuery(queryInput, options = {}) {
     matchMedia = supportMatchMedia ? window.matchMedia : null,
     ssrMatchMedia = null,
     noSsr = false
-  } = getThemeProps({
+  } = (0, _useThemeProps.getThemeProps)({
     name: 'MuiUseMediaQuery',
     props: options,
     theme

package/node/useTheme/index.js

@@ -0,0 +1,27 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _useTheme.default;
+  }
+});
+var _useTheme = _interopRequireWildcard(require("./useTheme"));
+Object.keys(_useTheme).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useTheme[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useTheme[key];
+    }
+  });
+});
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }

package/{useTheme.js → node/useTheme/useTheme.js}

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.systemDefaultTheme = exports.default = void 0;
-var _createTheme = _interopRequireDefault(require("./createTheme"));
-var _useThemeWithoutDefault = _interopRequireDefault(require("./useThemeWithoutDefault"));
+var _createTheme = _interopRequireDefault(require("../createTheme"));
+var _useThemeWithoutDefault = _interopRequireDefault(require("../useThemeWithoutDefault"));
 const systemDefaultTheme = exports.systemDefaultTheme = (0, _createTheme.default)();
 function useTheme(defaultTheme = systemDefaultTheme) {
   return (0, _useThemeWithoutDefault.default)(defaultTheme);

package/node/useThemeProps/getThemeProps.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = getThemeProps;
+var _resolveProps = _interopRequireDefault(require("@mui/utils/resolveProps"));
+function getThemeProps(params) {
+  const {
+    theme,
+    name,
+    props
+  } = params;
+  if (!theme || !theme.components || !theme.components[name] || !theme.components[name].defaultProps) {
+    return props;
+  }
+  return (0, _resolveProps.default)(theme.components[name].defaultProps, props);
+}

package/node/useThemeProps/index.js

@@ -0,0 +1,21 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _useThemeProps.default;
+  }
+});
+Object.defineProperty(exports, "getThemeProps", {
+  enumerable: true,
+  get: function () {
+    return _getThemeProps.default;
+  }
+});
+var _useThemeProps = _interopRequireDefault(require("./useThemeProps"));
+var _getThemeProps = _interopRequireDefault(require("./getThemeProps"));

package/node/useThemeProps/useThemeProps.js

@@ -0,0 +1,27 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useThemeProps;
+var _getThemeProps = _interopRequireDefault(require("./getThemeProps"));
+var _useTheme = _interopRequireDefault(require("../useTheme"));
+function useThemeProps({
+  props,
+  name,
+  defaultTheme,
+  themeId
+}) {
+  let theme = (0, _useTheme.default)(defaultTheme);
+  if (themeId) {
+    theme = theme[themeId] || theme;
+  }
+  const mergedProps = (0, _getThemeProps.default)({
+    theme,
+    name,
+    props
+  });
+  return mergedProps;
+}

package/node/useThemeWithoutDefault/index.js

@@ -0,0 +1,14 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _useThemeWithoutDefault.default;
+  }
+});
+var _useThemeWithoutDefault = _interopRequireDefault(require("./useThemeWithoutDefault"));

package/{useThemeWithoutDefault.js → node/useThemeWithoutDefault/useThemeWithoutDefault.js}

@@ -8,7 +8,7 @@ exports.default = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _styledEngine = require("@mui/styled-engine");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function isObjectEmpty(obj) {
   return Object.keys(obj).length === 0;
 }

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@mui/system",
-  "version": "5.15.14",
+  "version": "6.0.0-alpha.0",
   "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": "./index.js",
+  "main": "./node/index.js",
   "keywords": [
     "react",
     "react-component",
@@ -30,10 +30,10 @@
     "clsx": "^2.1.0",
     "csstype": "^3.1.3",
     "prop-types": "^15.8.1",
+    "@mui/utils": "^5.15.14",
     "@mui/private-theming": "^5.15.14",
     "@mui/types": "^7.2.14",
-    "@mui/utils": "^5.15.14",
-    "@mui/styled-engine": "^5.15.14"
+    "@mui/styled-engine": "^6.0.0-alpha.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",
@@ -60,6 +60,6 @@
   "engines": {
     "node": ">=12.0.0"
   },
-  "module": "./esm/index.js",
+  "module": "./index.js",
   "types": "./index.d.ts"
 }

package/palette/index.d.ts

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

package/palette/index.js

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

package/palette/package.json

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

package/palette/palette.d.ts

@@ -0,0 +1,5 @@
+import { PropsFor, SimpleStyleFunction, palette } from '../Box';
+
+export const color: SimpleStyleFunction<'color'>;
+export const bgcolor: SimpleStyleFunction<'bgcolor'>;
+export type PaletteProps = PropsFor<typeof palette>;

package/{modern → 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/positions/index.d.ts

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

package/positions/index.js

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

package/positions/package.json

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

package/positions/positions.d.ts

@@ -0,0 +1,3 @@
+import { PropsFor, positions } from '../Box';
+
+export type PositionsProps = PropsFor<typeof positions>;

package/{esm → positions}/positions.js

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

package/propsToClassKey/index.d.ts

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

package/propsToClassKey/index.js

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

package/propsToClassKey/package.json

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

package/responsivePropType/index.d.ts

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

package/responsivePropType/index.js

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

package/responsivePropType/package.json

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

package/shadows/index.d.ts

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

package/shadows/index.js

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

package/shadows/package.json

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

package/shadows/shadows.d.ts

@@ -0,0 +1,3 @@
+import { PropsFor, shadows } from '../Box';
+
+export type ShadowsProps = PropsFor<typeof shadows>;

package/{modern → shadows}/shadows.js

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

package/sizing/index.d.ts

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

package/sizing/index.js

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

package/sizing/package.json

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

package/sizing/sizing.d.ts

@@ -0,0 +1,12 @@
+import { PropsFor, SimpleStyleFunction, sizing } from '../Box';
+
+export const width: SimpleStyleFunction<'width'>;
+export const maxWidth: SimpleStyleFunction<'maxWidth'>;
+export const minWidth: SimpleStyleFunction<'minWidth'>;
+export const height: SimpleStyleFunction<'height'>;
+export const maxHeight: SimpleStyleFunction<'maxHeight'>;
+export const minHeight: SimpleStyleFunction<'minHeight'>;
+export const sizeWidth: SimpleStyleFunction<'sizeWidth'>;
+export const sizeHeight: SimpleStyleFunction<'sizeHeight'>;
+export const boxSizing: SimpleStyleFunction<'boxSizing'>;
+export type SizingProps = PropsFor<typeof sizing>;

package/{esm → 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 ? `${value * 100}%` : value;
 }
@@ -11,14 +11,13 @@ export const width = style({
 export const maxWidth = props => {
   if (props.maxWidth !== undefined && props.maxWidth !== null) {
     const styleFromPropValue = propValue => {
-      var _props$theme, _props$theme2;
-      const breakpoint = ((_props$theme = props.theme) == null || (_props$theme = _props$theme.breakpoints) == null || (_props$theme = _props$theme.values) == null ? void 0 : _props$theme[propValue]) || breakpointsValues[propValue];
+      const breakpoint = props.theme?.breakpoints?.values?.[propValue] || breakpointsValues[propValue];
       if (!breakpoint) {
         return {
           maxWidth: sizingTransform(propValue)
         };
       }
-      if (((_props$theme2 = props.theme) == null || (_props$theme2 = _props$theme2.breakpoints) == null ? void 0 : _props$theme2.unit) !== 'px') {
+      if (props.theme?.breakpoints?.unit !== 'px') {
         return {
           maxWidth: `${breakpoint}${props.theme.breakpoints.unit}`
         };

package/spacing/index.d.ts

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

package/spacing/index.js

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

package/spacing/package.json

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