@mui/styled-engine 6.4.3 → 7.0.0-alpha.1

package/GlobalStyles/GlobalStyles.js

@@ -1,23 +1,30 @@
+"use strict";
 'use client';
 
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { Global } from '@emotion/react';
-import { jsx as _jsx } from "react/jsx-runtime";
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = GlobalStyles;
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react2 = require("@emotion/react");
+var _jsxRuntime = require("react/jsx-runtime");
 function isEmpty(obj) {
   return obj === undefined || obj === null || Object.keys(obj).length === 0;
 }
-export default function GlobalStyles(props) {
+function GlobalStyles(props) {
   const {
     styles,
     defaultTheme = {}
   } = props;
   const globalStyles = typeof styles === 'function' ? themeInput => styles(isEmpty(themeInput) ? defaultTheme : themeInput) : styles;
-  return /*#__PURE__*/_jsx(Global, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Global, {
     styles: globalStyles
   });
 }
 process.env.NODE_ENV !== "production" ? GlobalStyles.propTypes = {
-  defaultTheme: PropTypes.object,
-  styles: PropTypes.oneOfType([PropTypes.array, PropTypes.string, PropTypes.object, PropTypes.func])
+  defaultTheme: _propTypes.default.object,
+  styles: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.string, _propTypes.default.object, _propTypes.default.func])
 } : void 0;

package/GlobalStyles/index.js

@@ -1 +1,13 @@
-export { default } from "./GlobalStyles.js";
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _GlobalStyles.default;
+  }
+});
+var _GlobalStyles = _interopRequireDefault(require("./GlobalStyles"));

package/README.md

@@ -6,6 +6,6 @@ It is used internally in the `@mui/system` package.
 
 ## Documentation
 
-<!-- #default-branch-switch -->
+<!-- #host-reference -->
 
-Visit [https://mui.com/material-ui/integrations/styled-components/](https://mui.com/material-ui/integrations/styled-components/) to view the full documentation.
+Visit [https://next.mui.com/material-ui/integrations/styled-components/](https://next.mui.com/material-ui/integrations/styled-components/) to view the full documentation.

package/StyledEngineProvider/StyledEngineProvider.js

@@ -1,16 +1,22 @@
+"use strict";
 'use client';
 
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { CacheProvider } from '@emotion/react';
-import createCache from '@emotion/cache';
-import { StyleSheet } from '@emotion/sheet';
-
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = StyledEngineProvider;
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react2 = require("@emotion/react");
+var _cache = _interopRequireDefault(require("@emotion/cache"));
+var _sheet = require("@emotion/sheet");
+var _jsxRuntime = require("react/jsx-runtime");
 // We might be able to remove this when this issue is fixed:
 // https://github.com/emotion-js/emotion/issues/2790
-import { jsx as _jsx } from "react/jsx-runtime";
 const createEmotionCache = (options, CustomSheet) => {
-  const cache = createCache(options);
+  const cache = (0, _cache.default)(options);
 
   // Do the same as https://github.com/emotion-js/emotion/blob/main/packages/cache/src/index.js#L238-L245
   cache.sheet = new CustomSheet({
@@ -42,7 +48,7 @@ if (typeof document === 'object') {
    * A custom sheet is required to make the GlobalStyles API injected above the insertion point.
    * This is because the [sheet](https://github.com/emotion-js/emotion/blob/main/packages/react/src/global.js#L94-L99) does not consume the options.
    */
-  class MyStyleSheet extends StyleSheet {
+  class MyStyleSheet extends _sheet.StyleSheet {
     insert(rule, options) {
       if (this.key && this.key.endsWith('global')) {
         this.before = insertionPoint;
@@ -55,12 +61,12 @@ if (typeof document === 'object') {
     insertionPoint
   }, MyStyleSheet);
 }
-export default function StyledEngineProvider(props) {
+function StyledEngineProvider(props) {
   const {
     injectFirst,
     children
   } = props;
-  return injectFirst && cache ? /*#__PURE__*/_jsx(CacheProvider, {
+  return injectFirst && cache ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.CacheProvider, {
     value: cache,
     children: children
   }) : children;
@@ -69,11 +75,11 @@ process.env.NODE_ENV !== "production" ? StyledEngineProvider.propTypes = {
   /**
    * Your component tree.
    */
-  children: PropTypes.node,
+  children: _propTypes.default.node,
   /**
    * By default, the styles are injected last in the <head> element of the page.
    * As a result, they gain more specificity than any other style sheet.
    * If you want to override MUI's styles, set this prop.
    */
-  injectFirst: PropTypes.bool
+  injectFirst: _propTypes.default.bool
 } : void 0;

package/StyledEngineProvider/index.js

@@ -1 +1,13 @@
-export { default } from "./StyledEngineProvider.js";
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _StyledEngineProvider.default;
+  }
+});
+var _StyledEngineProvider = _interopRequireDefault(require("./StyledEngineProvider"));

package/esm/GlobalStyles/GlobalStyles.js

@@ -0,0 +1,23 @@
+'use client';
+
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { Global } from '@emotion/react';
+import { jsx as _jsx } from "react/jsx-runtime";
+function isEmpty(obj) {
+  return obj === undefined || obj === null || Object.keys(obj).length === 0;
+}
+export default function GlobalStyles(props) {
+  const {
+    styles,
+    defaultTheme = {}
+  } = props;
+  const globalStyles = typeof styles === 'function' ? themeInput => styles(isEmpty(themeInput) ? defaultTheme : themeInput) : styles;
+  return /*#__PURE__*/_jsx(Global, {
+    styles: globalStyles
+  });
+}
+process.env.NODE_ENV !== "production" ? GlobalStyles.propTypes = {
+  defaultTheme: PropTypes.object,
+  styles: PropTypes.oneOfType([PropTypes.array, PropTypes.string, PropTypes.object, PropTypes.func])
+} : void 0;

package/esm/GlobalStyles/index.js

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

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

@@ -1,22 +1,16 @@
-"use strict";
 'use client';
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = StyledEngineProvider;
-var React = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _react2 = require("@emotion/react");
-var _cache = _interopRequireDefault(require("@emotion/cache"));
-var _sheet = require("@emotion/sheet");
-var _jsxRuntime = require("react/jsx-runtime");
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { CacheProvider } from '@emotion/react';
+import createCache from '@emotion/cache';
+import { StyleSheet } from '@emotion/sheet';
+
 // We might be able to remove this when this issue is fixed:
 // https://github.com/emotion-js/emotion/issues/2790
+import { jsx as _jsx } from "react/jsx-runtime";
 const createEmotionCache = (options, CustomSheet) => {
-  const cache = (0, _cache.default)(options);
+  const cache = createCache(options);
 
   // Do the same as https://github.com/emotion-js/emotion/blob/main/packages/cache/src/index.js#L238-L245
   cache.sheet = new CustomSheet({
@@ -48,7 +42,7 @@ if (typeof document === 'object') {
    * A custom sheet is required to make the GlobalStyles API injected above the insertion point.
    * This is because the [sheet](https://github.com/emotion-js/emotion/blob/main/packages/react/src/global.js#L94-L99) does not consume the options.
    */
-  class MyStyleSheet extends _sheet.StyleSheet {
+  class MyStyleSheet extends StyleSheet {
     insert(rule, options) {
       if (this.key && this.key.endsWith('global')) {
         this.before = insertionPoint;
@@ -61,12 +55,12 @@ if (typeof document === 'object') {
     insertionPoint
   }, MyStyleSheet);
 }
-function StyledEngineProvider(props) {
+export default function StyledEngineProvider(props) {
   const {
     injectFirst,
     children
   } = props;
-  return injectFirst && cache ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.CacheProvider, {
+  return injectFirst && cache ? /*#__PURE__*/_jsx(CacheProvider, {
     value: cache,
     children: children
   }) : children;
@@ -75,11 +69,11 @@ process.env.NODE_ENV !== "production" ? StyledEngineProvider.propTypes = {
   /**
    * Your component tree.
    */
-  children: _propTypes.default.node,
+  children: PropTypes.node,
   /**
    * By default, the styles are injected last in the <head> element of the page.
    * As a result, they gain more specificity than any other style sheet.
    * If you want to override MUI's styles, set this prop.
    */
-  injectFirst: _propTypes.default.bool
+  injectFirst: PropTypes.bool
 } : void 0;

package/esm/StyledEngineProvider/index.js

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

package/esm/index.js

@@ -0,0 +1,47 @@
+/**
+ * @mui/styled-engine v7.0.0-alpha.1
+ *
+ * @license MIT
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use client';
+
+/* eslint-disable no-underscore-dangle */
+import emStyled from '@emotion/styled';
+import { serializeStyles as emSerializeStyles } from '@emotion/serialize';
+export default function styled(tag, options) {
+  const stylesFactory = emStyled(tag, options);
+  if (process.env.NODE_ENV !== 'production') {
+    return (...styles) => {
+      const component = typeof tag === 'string' ? `"${tag}"` : 'component';
+      if (styles.length === 0) {
+        console.error([`MUI: Seems like you called \`styled(${component})()\` without a \`style\` argument.`, 'You must provide a `styles` argument: `styled("div")(styleYouForgotToPass)`.'].join('\n'));
+      } else if (styles.some(style => style === undefined)) {
+        console.error(`MUI: the styled(${component})(...args) API requires all its args to be defined.`);
+      }
+      return stylesFactory(...styles);
+    };
+  }
+  return stylesFactory;
+}
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export function internal_mutateStyles(tag, processor) {
+  // Emotion attaches all the styles as `__emotion_styles`.
+  // Ref: https://github.com/emotion-js/emotion/blob/16d971d0da229596d6bcc39d282ba9753c9ee7cf/packages/styled/src/base.js#L186
+  if (Array.isArray(tag.__emotion_styles)) {
+    tag.__emotion_styles = processor(tag.__emotion_styles);
+  }
+}
+
+// Emotion only accepts an array, but we want to avoid allocations
+const wrapper = [];
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export function internal_serializeStyles(styles) {
+  wrapper[0] = styles;
+  return emSerializeStyles(wrapper);
+}
+export { ThemeContext, keyframes, css } from '@emotion/react';
+export { default as StyledEngineProvider } from "./StyledEngineProvider/index.js";
+export { default as GlobalStyles } from "./GlobalStyles/index.js";

package/esm/package.json

@@ -0,0 +1 @@
+{"type":"module","sideEffects":false}

package/index.js

@@ -1,15 +1,58 @@
 /**
- * @mui/styled-engine v6.4.3
+ * @mui/styled-engine v7.0.0-alpha.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+"use strict";
+'use client';
+
 /* eslint-disable no-underscore-dangle */
-import emStyled from '@emotion/styled';
-import { serializeStyles as emSerializeStyles } from '@emotion/serialize';
-export default function styled(tag, options) {
-  const stylesFactory = emStyled(tag, options);
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "GlobalStyles", {
+  enumerable: true,
+  get: function () {
+    return _GlobalStyles.default;
+  }
+});
+Object.defineProperty(exports, "StyledEngineProvider", {
+  enumerable: true,
+  get: function () {
+    return _StyledEngineProvider.default;
+  }
+});
+Object.defineProperty(exports, "ThemeContext", {
+  enumerable: true,
+  get: function () {
+    return _react.ThemeContext;
+  }
+});
+Object.defineProperty(exports, "css", {
+  enumerable: true,
+  get: function () {
+    return _react.css;
+  }
+});
+exports.default = styled;
+exports.internal_mutateStyles = internal_mutateStyles;
+exports.internal_serializeStyles = internal_serializeStyles;
+Object.defineProperty(exports, "keyframes", {
+  enumerable: true,
+  get: function () {
+    return _react.keyframes;
+  }
+});
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _serialize = require("@emotion/serialize");
+var _react = require("@emotion/react");
+var _StyledEngineProvider = _interopRequireDefault(require("./StyledEngineProvider"));
+var _GlobalStyles = _interopRequireDefault(require("./GlobalStyles"));
+function styled(tag, options) {
+  const stylesFactory = (0, _styled.default)(tag, options);
   if (process.env.NODE_ENV !== 'production') {
     return (...styles) => {
       const component = typeof tag === 'string' ? `"${tag}"` : 'component';
@@ -25,7 +68,7 @@ export default function styled(tag, options) {
 }
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
-export function internal_mutateStyles(tag, processor) {
+function internal_mutateStyles(tag, processor) {
   // Emotion attaches all the styles as `__emotion_styles`.
   // Ref: https://github.com/emotion-js/emotion/blob/16d971d0da229596d6bcc39d282ba9753c9ee7cf/packages/styled/src/base.js#L186
   if (Array.isArray(tag.__emotion_styles)) {
@@ -36,10 +79,7 @@ export function internal_mutateStyles(tag, processor) {
 // Emotion only accepts an array, but we want to avoid allocations
 const wrapper = [];
 // eslint-disable-next-line @typescript-eslint/naming-convention
-export function internal_serializeStyles(styles) {
+function internal_serializeStyles(styles) {
   wrapper[0] = styles;
-  return emSerializeStyles(wrapper);
-}
-export { ThemeContext, keyframes, css } from '@emotion/react';
-export { default as StyledEngineProvider } from "./StyledEngineProvider/index.js";
-export { default as GlobalStyles } from "./GlobalStyles/index.js";
+  return (0, _serialize.serializeStyles)(wrapper);
+}

package/modern/index.js

@@ -1,10 +1,12 @@
 /**
- * @mui/styled-engine v6.4.3
+ * @mui/styled-engine v7.0.0-alpha.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+'use client';
+
 /* eslint-disable no-underscore-dangle */
 import emStyled from '@emotion/styled';
 import { serializeStyles as emSerializeStyles } from '@emotion/serialize';

package/modern/package.json

@@ -0,0 +1 @@
+{"type":"module","sideEffects":false}

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@mui/styled-engine",
-  "version": "6.4.3",
+  "version": "7.0.0-alpha.1",
   "private": false,
   "author": "MUI Team",
   "description": "styled() API wrapper package for emotion.",
-  "main": "./node/index.js",
+  "main": "./index.js",
   "keywords": [
     "react",
     "react-component",
@@ -26,7 +26,7 @@
     "url": "https://opencollective.com/mui-org"
   },
   "dependencies": {
-    "@babel/runtime": "^7.26.0",
+    "@babel/runtime": "^7.26.7",
     "@emotion/cache": "^11.13.5",
     "@emotion/serialize": "^1.3.3",
     "@emotion/sheet": "^1.4.0",
@@ -54,6 +54,35 @@
   "engines": {
     "node": ">=14.0.0"
   },
-  "module": "./index.js",
-  "types": "./index.d.ts"
+  "module": "./esm/index.js",
+  "exports": {
+    ".": {
+      "require": {
+        "types": "./index.d.ts",
+        "default": "./index.js"
+      },
+      "import": {
+        "types": "./esm/index.d.ts",
+        "default": "./esm/index.js"
+      },
+      "mui-modern": {
+        "types": "./modern/index.d.ts",
+        "default": "./modern/index.js"
+      }
+    },
+    "./*": {
+      "require": {
+        "types": "./*/index.d.ts",
+        "default": "./*/index.js"
+      },
+      "import": {
+        "types": "./esm/*/index.d.ts",
+        "default": "./esm/*/index.js"
+      },
+      "mui-modern": {
+        "types": "./modern/*/index.d.ts",
+        "default": "./modern/*/index.js"
+      }
+    }
+  }
 }

package/GlobalStyles/GlobalStyles.d.ts

@@ -1,11 +0,0 @@
-import * as React from 'react';
-import { Interpolation } from '@emotion/react';
-
-export interface GlobalStylesProps<Theme = {}> {
-  defaultTheme?: object;
-  styles: Interpolation<Theme>;
-}
-
-export default function GlobalStyles<Theme = {}>(
-  props: GlobalStylesProps<Theme>,
-): React.JSX.Element;

package/GlobalStyles/index.d.ts

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

package/GlobalStyles/package.json

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

package/StyledEngineProvider/StyledEngineProvider.d.ts

@@ -1,8 +0,0 @@
-import * as React from 'react';
-
-export interface StyledEngineProviderProps {
-  children?: React.ReactNode;
-  injectFirst?: boolean;
-}
-
-export default function StyledEngineProvider(props: StyledEngineProviderProps): React.JSX.Element;

package/StyledEngineProvider/index.d.ts

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

package/StyledEngineProvider/package.json

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