@mui/system 5.15.14 → 6.0.0-alpha.0

package/merge/index.d.ts

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

package/merge/index.js

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

package/merge/package.json

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

package/modern/{borders.js → borders/borders.js}

@@ -1,8 +1,8 @@
-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';
+import style from '../style';
+import compose from '../compose';
+import { createUnaryUnit, getValue } from '../spacing';
+import { handleBreakpoints } from '../breakpoints';
 export function borderTransform(value) {
   if (typeof value !== 'number') {
     return value;

package/modern/borders/index.js

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

package/{esm → modern/breakpoints}/breakpoints.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import PropTypes from 'prop-types';
 import deepmerge from '@mui/utils/deepmerge';
-import merge from './merge';
+import merge from '../merge';
 
 // The breakpoint **start** at this value.
 // For instance with the first breakpoint xs: [xs, sm[.
@@ -77,8 +77,7 @@ function breakpoints(styleFunction) {
   return newStyleFunction;
 }
 export function createEmptyBreakpointObject(breakpointsInput = {}) {
-  var _breakpointsInput$key;
-  const breakpointsInOrder = (_breakpointsInput$key = breakpointsInput.keys) == null ? void 0 : _breakpointsInput$key.reduce((acc, key) => {
+  const breakpointsInOrder = breakpointsInput.keys?.reduce((acc, key) => {
     const breakpointStyleKey = breakpointsInput.up(key);
     acc[breakpointStyleKey] = {};
     return acc;

package/modern/breakpoints/index.js

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

package/modern/{colorManipulator.js → colorManipulator/colorManipulator.js}

@@ -316,7 +316,7 @@ export function emphasize(color, coefficient = 0.15) {
 }
 export function private_safeEmphasize(color, coefficient, warning) {
   try {
-    return private_safeEmphasize(color, coefficient);
+    return emphasize(color, coefficient);
   } catch (error) {
     if (warning && process.env.NODE_ENV !== 'production') {
       console.warn(warning);

package/modern/colorManipulator/index.js

@@ -0,0 +1,3 @@
+'use client';
+
+export * from './colorManipulator';

package/{esm → modern/compose}/compose.js

@@ -1,4 +1,4 @@
-import merge from './merge';
+import merge from '../merge';
 function compose(...styles) {
   const handlers = styles.reduce((acc, style) => {
     style.filterProps.forEach(prop => {

package/modern/compose/index.js

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

package/{esm → modern/createBox}/createBox.js

@@ -6,8 +6,8 @@ const _excluded = ["className", "component"];
 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(options = {}) {
   const {

package/modern/createBox/index.js

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

package/{esm → modern/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;
 }
@@ -74,7 +74,7 @@ function processStyleArg(callableStyle, _ref) {
         }, props, ownerState));
       } else {
         Object.keys(variant.props).forEach(key => {
-          if ((ownerState == null ? void 0 : ownerState[key]) !== variant.props[key] && props[key] !== variant.props[key]) {
+          if (ownerState?.[key] !== variant.props[key] && props[key] !== variant.props[key]) {
             isMatch = false;
           }
         });
@@ -110,7 +110,7 @@ export default function createStyled(input = {}) {
   systemSx.__mui_systemSx = true;
   return (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 != null && style.__mui_systemSx)));
+    processStyles(tag, styles => styles.filter(style => !style?.__mui_systemSx));
     const {
         name: componentName,
         slot: componentSlot,
@@ -193,12 +193,11 @@ export default function createStyled(input = {}) {
       }
       if (componentName && !skipVariantsResolver) {
         expressionsWithDefaultTheme.push(props => {
-          var _theme$components;
           const theme = resolveTheme(_extends({}, props, {
             defaultTheme,
             themeId
           }));
-          const themeVariants = theme == null || (_theme$components = theme.components) == null || (_theme$components = _theme$components[componentName]) == null ? void 0 : _theme$components.variants;
+          const themeVariants = theme?.components?.[componentName]?.variants;
           return processStyleArg({
             variants: themeVariants
           }, _extends({}, props, {

package/modern/createStyled/index.js

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

package/modern/{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/modern/cssGrid/index.js

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

package/modern/cssVars/createCssVarsProvider.js

@@ -1,17 +1,15 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
-const _excluded = ["colorSchemes", "components", "generateCssVars", "cssVarPrefix"];
+const _excluded = ["colorSchemes", "components", "cssVarPrefix"];
 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 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 {
@@ -29,8 +27,7 @@ export default function createCssVarsProvider(options) {
     defaultMode: designSystemMode = 'light',
     defaultColorScheme: designSystemColorScheme,
     disableTransitionOnChange: designSystemTransitionOnChange = false,
-    resolveTheme,
-    excludeVariablesFromRoot
+    resolveTheme
   } = options;
   if (!defaultTheme.colorSchemes || typeof designSystemColorScheme === 'string' && !defaultTheme.colorSchemes[designSystemColorScheme] || typeof designSystemColorScheme === 'object' && !defaultTheme.colorSchemes[designSystemColorScheme?.light] || typeof designSystemColorScheme === 'object' && !defaultTheme.colorSchemes[designSystemColorScheme?.dark]) {
     console.error(`MUI: \`${designSystemColorScheme}\` does not exist in \`theme.colorSchemes\`.`);
@@ -72,10 +69,6 @@ export default function createCssVarsProvider(options) {
       {
         colorSchemes = {},
         components = {},
-        generateCssVars = () => ({
-          vars: {},
-          css: {}
-        }),
         cssVarPrefix
       } = _ref,
       restThemeProp = _objectWithoutPropertiesLoose(_ref, _excluded);
@@ -129,32 +122,19 @@ 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)
-    const {
-      css: rootCss,
-      vars: rootVars
-    } = generateCssVars();
+    // 2. get the `vars` object that refers to the CSS custom properties
+    const themeVars = restThemeProp.generateThemeVars?.() || restThemeProp.vars;
 
     // 3. Start composing the theme object
     const theme = _extends({}, restThemeProp, {
       components,
       colorSchemes,
       cssVarPrefix,
-      vars: rootVars,
-      getColorSchemeSelector: targetColorScheme => `[${attribute}="${targetColorScheme}"] &`
+      vars: themeVars
     });
 
-    // 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.
-    const defaultColorSchemeStyleSheet = {};
-    const otherColorSchemesStyleSheet = {};
+    // 4. Resolve the color scheme and merge it to the theme
     Object.entries(colorSchemes).forEach(([key, scheme]) => {
-      const {
-        css,
-        vars
-      } = generateCssVars(key);
-      theme.vars = deepmerge(theme.vars, vars);
       if (key === calculatedColorScheme) {
         // 4.1 Merge the selected color scheme to the theme
         Object.keys(scheme).forEach(schemeKey => {
@@ -169,30 +149,22 @@ export default function createCssVarsProvider(options) {
           theme.palette.colorScheme = key;
         }
       }
-      const resolvedDefaultColorScheme = (() => {
-        if (typeof defaultColorScheme === 'string') {
-          return defaultColorScheme;
-        }
-        if (defaultMode === 'dark') {
-          return defaultColorScheme.dark;
-        }
-        return defaultColorScheme.light;
-      })();
-      if (key === resolvedDefaultColorScheme) {
-        if (excludeVariablesFromRoot) {
-          const excludedVariables = {};
-          excludeVariablesFromRoot(cssVarPrefix).forEach(cssVar => {
-            excludedVariables[cssVar] = css[cssVar];
-            delete css[cssVar];
-          });
-          defaultColorSchemeStyleSheet[`[${attribute}="${key}"]`] = excludedVariables;
-        }
-        defaultColorSchemeStyleSheet[`${colorSchemeSelector}, [${attribute}="${key}"]`] = css;
-      } else {
-        otherColorSchemesStyleSheet[`${colorSchemeSelector === ':root' ? '' : colorSchemeSelector}[${attribute}="${key}"]`] = css;
-      }
     });
-    theme.vars = deepmerge(theme.vars, rootVars);
+    const resolvedDefaultColorScheme = (() => {
+      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 = targetColorScheme => `[${attribute}="${targetColorScheme}"] &`;
+    }
 
     // 5. Declaring effects
     // 5.1 Updates the selector value to use the current color scheme which tells CSS to use the proper stylesheet.
@@ -243,16 +215,10 @@ export default function createCssVarsProvider(options) {
       shouldGenerateStyleSheet = false;
     }
     const element = /*#__PURE__*/_jsxs(React.Fragment, {
-      children: [shouldGenerateStyleSheet && /*#__PURE__*/_jsxs(React.Fragment, {
-        children: [/*#__PURE__*/_jsx(GlobalStyles, {
-          styles: {
-            [colorSchemeSelector]: rootCss
-          }
-        }), /*#__PURE__*/_jsx(GlobalStyles, {
-          styles: defaultColorSchemeStyleSheet
-        }), /*#__PURE__*/_jsx(GlobalStyles, {
-          styles: otherColorSchemesStyleSheet
-        })]
+      children: [shouldGenerateStyleSheet && /*#__PURE__*/_jsx(React.Fragment, {
+        children: (theme.generateStyleSheets?.() || []).map((styles, index) => /*#__PURE__*/_jsx(GlobalStyles, {
+          styles: styles
+        }, index))
       }), /*#__PURE__*/_jsx(ThemeProvider, {
         themeId: scopedTheme ? themeId : undefined,
         theme: resolveTheme ? resolveTheme(theme) : theme,

package/modern/cssVars/createCssVarsTheme.js

@@ -1,16 +1,13 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["cssVarPrefix", "shouldSkipGeneratingVar"];
 import prepareCssVars from './prepareCssVars';
 function createCssVarsTheme(theme) {
-  const {
-      cssVarPrefix,
-      shouldSkipGeneratingVar
-    } = theme,
-    otherTheme = _objectWithoutPropertiesLoose(theme, _excluded);
-  return _extends({}, theme, prepareCssVars(otherTheme, {
-    prefix: cssVarPrefix,
-    shouldSkipGeneratingVar
+  const output = theme;
+  const 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/modern/cssVars/prepareCssVars.js

@@ -1,16 +1,21 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _toPropertyKey from "@babel/runtime/helpers/esm/toPropertyKey";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["colorSchemes", "components", "defaultColorScheme"];
+const _excluded = ["getSelector"],
+  _excluded2 = ["colorSchemes", "components", "defaultColorScheme"];
 import deepmerge from '@mui/utils/deepmerge';
 import cssVarsParser from './cssVarsParser';
-function prepareCssVars(theme, parserConfig) {
+function prepareCssVars(theme, _ref = {}) {
+  let {
+      getSelector
+    } = _ref,
+    parserConfig = _objectWithoutPropertiesLoose(_ref, _excluded);
   // @ts-ignore - ignore components do not exist
   const {
       colorSchemes = {},
       defaultColorScheme = 'light'
     } = theme,
-    otherTheme = _objectWithoutPropertiesLoose(theme, _excluded);
+    otherTheme = _objectWithoutPropertiesLoose(theme, _excluded2);
   const {
     vars: rootVars,
     css: rootCss,
@@ -19,7 +24,7 @@ function prepareCssVars(theme, parserConfig) {
   let themeVars = rootVarsWithDefaults;
   const colorSchemesMap = {};
   const {
-      [defaultColorScheme]: light
+      [defaultColorScheme]: defaultScheme
     } = colorSchemes,
     otherColorSchemes = _objectWithoutPropertiesLoose(colorSchemes, [defaultColorScheme].map(_toPropertyKey));
   Object.entries(otherColorSchemes || {}).forEach(([key, scheme]) => {
@@ -34,38 +39,61 @@ function prepareCssVars(theme, parserConfig) {
       vars
     };
   });
-  if (light) {
+  if (defaultScheme) {
     // default color scheme vars should be merged last to set as default
     const {
       css,
       vars,
       varsWithDefaults
-    } = cssVarsParser(light, parserConfig);
+    } = cssVarsParser(defaultScheme, parserConfig);
     themeVars = deepmerge(themeVars, varsWithDefaults);
     colorSchemesMap[defaultColorScheme] = {
       css,
       vars
     };
   }
-  const generateCssVars = colorScheme => {
-    if (!colorScheme) {
-      const css = _extends({}, rootCss);
-      return {
-        css,
-        vars: rootVars,
-        selector: parserConfig?.getSelector?.(colorScheme, css) || ':root'
-      };
+  const generateThemeVars = () => {
+    let vars = _extends({}, rootVars);
+    Object.entries(colorSchemesMap).forEach(([, {
+      vars: schemeVars
+    }]) => {
+      vars = deepmerge(vars, schemeVars);
+    });
+    return vars;
+  };
+  const generateStyleSheets = () => {
+    const stylesheets = [];
+    const colorScheme = theme.defaultColorScheme || 'light';
+    function insertStyleSheet(selector, css) {
+      if (Object.keys(css).length) {
+        stylesheets.push(typeof selector === 'string' ? {
+          [selector]: _extends({}, css)
+        } : selector);
+      }
     }
-    const css = _extends({}, colorSchemesMap[colorScheme].css);
-    return {
-      css,
-      vars: colorSchemesMap[colorScheme].vars,
-      selector: parserConfig?.getSelector?.(colorScheme, css) || ':root'
-    };
+    insertStyleSheet(getSelector?.(undefined, _extends({}, rootCss)) || ':root', rootCss);
+    const {
+        [colorScheme]: defaultSchemeVal
+      } = colorSchemesMap,
+      rest = _objectWithoutPropertiesLoose(colorSchemesMap, [colorScheme].map(_toPropertyKey));
+    if (defaultSchemeVal) {
+      // default color scheme has to come before other color schemes
+      const {
+        css
+      } = defaultSchemeVal;
+      insertStyleSheet(getSelector?.(colorScheme, _extends({}, css)) || `[${theme.attribute || 'data-color-scheme'}="${colorScheme}"]`, css);
+    }
+    Object.entries(rest).forEach(([key, {
+      css
+    }]) => {
+      insertStyleSheet(getSelector?.(key, _extends({}, css)) || `[${theme.attribute || 'data-color-scheme'}="${key}"]`, css);
+    });
+    return stylesheets;
   };
   return {
     vars: themeVars,
-    generateCssVars
+    generateThemeVars,
+    generateStyleSheets
   };
 }
 export default prepareCssVars;

package/modern/{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 const displayPrint = style({
   prop: 'displayPrint',
   cssProperty: false,

package/modern/display/index.js

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

package/{esm → modern/flexbox}/flexbox.js

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

package/modern/flexbox/index.js

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

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

@@ -1,13 +1,13 @@
-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';
 const filterPropsMapping = {
   borders: borders.filterProps,
   display: display.filterProps,

package/modern/getThemeValue/index.js

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

package/modern/index.js

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

package/modern/memoize/index.js

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

package/modern/merge/index.js

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

package/modern/palette/index.js

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

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

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

package/modern/{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 const position = style({
   prop: 'position'
 });

package/modern/propsToClassKey/index.js

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

package/modern/responsivePropType/index.js

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

package/modern/shadows/index.js

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

package/{esm → modern/shadows}/shadows.js

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

package/modern/sizing/index.js

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

package/modern/{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 ? `${value * 100}%` : value;
 }

package/modern/spacing/index.js

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

package/modern/{spacing.js → spacing/spacing.js}

@@ -1,8 +1,8 @@
-import responsivePropType from './responsivePropType';
-import { handleBreakpoints } from './breakpoints';
-import { getPath } from './style';
-import merge from './merge';
-import memoize from './memoize';
+import responsivePropType from '../responsivePropType';
+import { handleBreakpoints } from '../breakpoints';
+import { getPath } from '../style';
+import merge from '../merge';
+import memoize from '../memoize';
 const properties = {
   m: 'margin',
   p: 'padding'

package/modern/style/index.js

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