@mui/material 6.0.0-alpha.9 → 6.0.0-beta.1

package/node/{useTouchRipple → useLazyRipple}/index.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function () {
-    return _useTouchRipple.default;
+    return _useLazyRipple.default;
   }
 });
-var _useTouchRipple = _interopRequireDefault(require("./useTouchRipple"));
+var _useLazyRipple = _interopRequireDefault(require("./useLazyRipple"));

package/node/useLazyRipple/useLazyRipple.js

@@ -0,0 +1,104 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LazyRipple = void 0;
+exports.default = useLazyRipple;
+var React = _interopRequireWildcard(require("react"));
+var _useLazyRef = _interopRequireDefault(require("@mui/utils/useLazyRef"));
+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; }
+/**
+ * Lazy initialization container for the Ripple instance. This improves
+ * performance by delaying mounting the ripple until it's needed.
+ */
+class LazyRipple {
+  /** React ref to the ripple instance */
+
+  /** If the ripple component should be mounted */
+
+  /** Promise that resolves when the ripple component is mounted */
+
+  /** If the ripple component has been mounted */
+
+  /** React state hook setter */
+
+  static create() {
+    return new LazyRipple();
+  }
+  static use() {
+    /* eslint-disable */
+    const ripple = (0, _useLazyRef.default)(LazyRipple.create).current;
+    const [shouldMount, setShouldMount] = React.useState(false);
+    ripple.shouldMount = shouldMount;
+    ripple.setShouldMount = setShouldMount;
+    React.useEffect(ripple.mountEffect, [shouldMount]);
+    /* eslint-enable */
+
+    return ripple;
+  }
+  constructor() {
+    this.ref = {
+      current: null
+    };
+    this.mounted = null;
+    this.didMount = false;
+    this.shouldMount = false;
+    this.setShouldMount = null;
+  }
+  mount() {
+    if (!this.mounted) {
+      this.mounted = createControlledPromise();
+      this.shouldMount = true;
+      this.setShouldMount(this.shouldMount);
+    }
+    return this.mounted;
+  }
+  mountEffect = () => {
+    if (this.shouldMount && !this.didMount) {
+      if (this.ref.current !== null) {
+        this.didMount = true;
+        this.mounted.resolve();
+      }
+    }
+  };
+
+  /* Ripple API */
+
+  start(...args) {
+    this.mount().then(() => {
+      var _this$ref$current;
+      return (_this$ref$current = this.ref.current) == null ? void 0 : _this$ref$current.start(...args);
+    });
+  }
+  stop(...args) {
+    this.mount().then(() => {
+      var _this$ref$current2;
+      return (_this$ref$current2 = this.ref.current) == null ? void 0 : _this$ref$current2.stop(...args);
+    });
+  }
+  pulsate(...args) {
+    this.mount().then(() => {
+      var _this$ref$current3;
+      return (_this$ref$current3 = this.ref.current) == null ? void 0 : _this$ref$current3.pulsate(...args);
+    });
+  }
+}
+exports.LazyRipple = LazyRipple;
+function useLazyRipple() {
+  return LazyRipple.use();
+}
+function createControlledPromise() {
+  let resolve;
+  let reject;
+  const p = new Promise((resolveFn, rejectFn) => {
+    resolve = resolveFn;
+    reject = rejectFn;
+  });
+  p.resolve = resolve;
+  p.reject = reject;
+  return p;
+}

package/node/usePagination/usePagination.js

@@ -61,7 +61,7 @@ function usePagination(props = {}) {
   // Upper boundary when page is low
   boundaryCount + siblingCount * 2 + 2),
   // Less than endPages
-  endPages.length > 0 ? endPages[0] - 2 : count - 1);
+  count - boundaryCount - 1);
 
   // Basic list of items to render
   // for example itemList = ['first', 'previous', 1, 'ellipsis', 4, 5, 6, 'ellipsis', 10, 'next', 'last']

package/node/utils/PolymorphicComponent.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/node/utils/areArraysEqual.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+function areArraysEqual(array1, array2, itemComparer = (a, b) => a === b) {
+  return array1.length === array2.length && array1.every((value, index) => itemComparer(value, array2[index]));
+}
+var _default = exports.default = areArraysEqual;

package/node/utils/index.js

@@ -102,13 +102,7 @@ Object.defineProperty(exports, "useForkRef", {
     return _useForkRef.default;
   }
 });
-Object.defineProperty(exports, "useIsFocusVisible", {
-  enumerable: true,
-  get: function () {
-    return _useIsFocusVisible.default;
-  }
-});
-var _ClassNameGenerator = require("@mui/base/ClassNameGenerator");
+var _utils = require("@mui/utils");
 var _capitalize = _interopRequireDefault(require("./capitalize"));
 var _createChainedFunction = _interopRequireDefault(require("./createChainedFunction"));
 var _createSvgIcon = _interopRequireDefault(require("./createSvgIcon"));
@@ -125,7 +119,6 @@ var _unsupportedProp = _interopRequireDefault(require("./unsupportedProp"));
 var _useControlled = _interopRequireDefault(require("./useControlled"));
 var _useEventCallback = _interopRequireDefault(require("./useEventCallback"));
 var _useForkRef = _interopRequireDefault(require("./useForkRef"));
-var _useIsFocusVisible = _interopRequireDefault(require("./useIsFocusVisible"));
 // TODO: remove this export once ClassNameGenerator is stable
 // eslint-disable-next-line @typescript-eslint/naming-convention
 const unstable_ClassNameGenerator = exports.unstable_ClassNameGenerator = {
@@ -133,6 +126,6 @@ const unstable_ClassNameGenerator = exports.unstable_ClassNameGenerator = {
     if (process.env.NODE_ENV !== 'production') {
       console.warn(['MUI: `ClassNameGenerator` import from `@mui/material/utils` is outdated and might cause unexpected issues.', '', "You should use `import { unstable_ClassNameGenerator } from '@mui/material/className'` instead", '', 'The detail of the issue: https://github.com/mui/material-ui/issues/30011#issuecomment-1024993401', '', 'The updated documentation: https://mui.com/guides/classname-generator/'].join('\n'));
     }
-    _ClassNameGenerator.unstable_ClassNameGenerator.configure(generator);
+    _utils.unstable_ClassNameGenerator.configure(generator);
   }
 };

package/node/utils/isHostComponent.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/**
+ * Determines if a given element is a DOM element name (i.e. not a React component).
+ */
+function isHostComponent(element) {
+  return typeof element === 'string';
+}
+var _default = exports.default = isHostComponent;

package/node/utils/omitEventHandlers.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/**
+ * Removes event handlers from the given object.
+ * A field is considered an event handler if it is a function with a name beginning with `on`.
+ *
+ * @param object Object to remove event handlers from.
+ * @returns Object with event handlers removed.
+ */
+function omitEventHandlers(object) {
+  if (object === undefined) {
+    return {};
+  }
+  const result = {};
+  Object.keys(object).filter(prop => !(prop.match(/^on[A-Z]/) && typeof object[prop] === 'function')).forEach(prop => {
+    result[prop] = object[prop];
+  });
+  return result;
+}
+var _default = exports.default = omitEventHandlers;

package/node/utils/shouldSpreadAdditionalProps.js

@@ -1,11 +1,12 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _utils = require("@mui/base/utils");
+var _isHostComponent = _interopRequireDefault(require("./isHostComponent"));
 const shouldSpreadAdditionalProps = Slot => {
-  return !Slot || !(0, _utils.isHostComponent)(Slot);
+  return !Slot || !(0, _isHostComponent.default)(Slot);
 };
 var _default = exports.default = shouldSpreadAdditionalProps;

package/node/utils/useSlot.js

@@ -7,7 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = useSlot;
 var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
-var _utils = require("@mui/base/utils");
+var _appendOwnerState = _interopRequireDefault(require("@mui/utils/appendOwnerState"));
+var _resolveComponentProps = _interopRequireDefault(require("@mui/utils/resolveComponentProps"));
+var _mergeSlotProps = _interopRequireDefault(require("@mui/utils/mergeSlotProps"));
 /**
  * An internal function to create a Material UI slot.
  *
@@ -53,14 +55,14 @@ name, parameters) {
 
   // `slotProps[name]` can be a callback that receives the component's ownerState.
   // `resolvedComponentsProps` is always a plain object.
-  const resolvedComponentsProps = (0, _utils.resolveComponentProps)(slotProps[name], ownerState);
+  const resolvedComponentsProps = (0, _resolveComponentProps.default)(slotProps[name], ownerState);
   const {
     props: {
       component: slotComponent,
       ...mergedProps
     },
     internalRef
-  } = (0, _utils.mergeSlotProps)({
+  } = (0, _mergeSlotProps.default)({
     className,
     ...useSlotPropsParams,
     externalForwardedProps: name === 'root' ? other : undefined,
@@ -73,7 +75,7 @@ name, parameters) {
     ...slotOwnerState
   };
   const LeafComponent = name === 'root' ? slotComponent || rootComponent : slotComponent;
-  const props = (0, _utils.appendOwnerState)(elementType, {
+  const props = (0, _appendOwnerState.default)(elementType, {
     ...(name === 'root' && !rootComponent && !slots[name] && internalForwardedProps),
     ...(name !== 'root' && !slots[name] && internalForwardedProps),
     ...mergedProps,

package/node/zero-styled/index.js

@@ -4,13 +4,14 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createUseThemeProps = createUseThemeProps;
 Object.defineProperty(exports, "css", {
   enumerable: true,
   get: function () {
     return _system.css;
   }
 });
+exports.globalCss = globalCss;
+exports.internal_createExtendSxProp = internal_createExtendSxProp;
 Object.defineProperty(exports, "keyframes", {
   enumerable: true,
   get: function () {
@@ -23,10 +24,37 @@ Object.defineProperty(exports, "styled", {
     return _styled.default;
   }
 });
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
+Object.defineProperty(exports, "useTheme", {
+  enumerable: true,
+  get: function () {
+    return _useTheme.default;
+  }
+});
+var React = _interopRequireWildcard(require("react"));
+var _styleFunctionSx = require("@mui/system/styleFunctionSx");
+var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
+var _GlobalStyles = _interopRequireDefault(require("../GlobalStyles"));
+var _jsxRuntime = require("react/jsx-runtime");
 var _system = require("@mui/system");
 var _styled = _interopRequireDefault(require("../styles/styled"));
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-function createUseThemeProps(name) {
-  return _useThemeProps.default;
+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; }
+function globalCss(styles) {
+  return function GlobalStylesWrapper(props) {
+    return (
+      /*#__PURE__*/
+      // Pigment CSS `globalCss` support callback with theme inside an object but `GlobalStyles` support theme as a callback value.
+      (0, _jsxRuntime.jsx)(_GlobalStyles.default, {
+        styles: typeof styles === 'function' ? theme => styles({
+          theme,
+          ...props
+        }) : styles
+      })
+    );
+  };
+}
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+function internal_createExtendSxProp() {
+  return _styleFunctionSx.extendSxProp;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "6.0.0-alpha.9",
+  "version": "6.0.0-beta.1",
   "private": false,
   "author": "MUI Team",
   "description": "Material UI is an open-source React component library that implements Google's Material Design. It's comprehensive and can be used in production out of the box.",
@@ -27,25 +27,25 @@
     "url": "https://opencollective.com/mui-org"
   },
   "dependencies": {
-    "@babel/runtime": "^7.24.6",
+    "@babel/runtime": "^7.24.8",
     "@types/react-transition-group": "^4.4.10",
     "clsx": "^2.1.1",
     "csstype": "^3.1.3",
     "prop-types": "^15.8.1",
-    "react-is": "^18.2.0",
+    "react-is": "^18.3.1",
     "react-transition-group": "^4.4.5",
-    "@mui/base": "5.0.0-beta.47",
-    "@mui/system": "^6.0.0-alpha.9",
-    "@mui/core-downloads-tracker": "^6.0.0-alpha.9",
     "@mui/types": "^7.2.14",
-    "@mui/utils": "^6.0.0-alpha.9"
+    "@mui/system": "6.0.0-beta.1",
+    "@mui/utils": "6.0.0-beta.1",
+    "@mui/core-downloads-tracker": "^6.0.0-beta.1"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",
     "@emotion/styled": "^11.3.0",
     "@types/react": "^17.0.0 || ^18.0.0",
     "react": "^17.0.0 || ^18.0.0",
-    "react-dom": "^17.0.0 || ^18.0.0"
+    "react-dom": "^17.0.0 || ^18.0.0",
+    "@mui/material-pigment-css": "^6.0.0-beta.1"
   },
   "peerDependenciesMeta": {
     "@types/react": {
@@ -56,6 +56,9 @@
     },
     "@emotion/styled": {
       "optional": true
+    },
+    "@mui/material-pigment-css": {
+      "optional": true
     }
   },
   "sideEffects": false,
@@ -66,6 +69,18 @@
   "engines": {
     "node": ">=12.0.0"
   },
+  "pigment-css": {
+    "vite": {
+      "include": [
+        "prop-types",
+        "react-is",
+        "hoist-non-react-statics",
+        "react",
+        "react-dom",
+        "@emotion/react"
+      ]
+    }
+  },
   "module": "./index.js",
   "types": "./index.d.ts"
 }

package/styles/CssVarsProvider.d.ts

@@ -16,6 +16,7 @@ declare const CssVarsProvider: (props: React.PropsWithChildren<Partial<import("@
     storageWindow?: Window | null | undefined;
     disableNestedContext?: boolean | undefined;
     disableStyleSheetGeneration?: boolean | undefined;
-}>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>, useColorScheme: () => import("@mui/system").ColorSchemeContextValue<SupportedColorScheme>, getInitColorSchemeScript: typeof import("@mui/system").getInitColorSchemeScript;
+}>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>, useColorScheme: () => import("@mui/system").ColorSchemeContextValue<SupportedColorScheme>, deprecatedGetInitColorSchemeScript: typeof import("@mui/system/InitColorSchemeScript").default;
 declare function Experimental_CssVarsProvider(props: any): React.JSX.Element;
-export { useColorScheme, getInitColorSchemeScript, CssVarsProvider, Experimental_CssVarsProvider };
+declare const getInitColorSchemeScript: typeof deprecatedGetInitColorSchemeScript;
+export { useColorScheme, CssVarsProvider, getInitColorSchemeScript, Experimental_CssVarsProvider };

package/styles/CssVarsProvider.js

@@ -6,21 +6,22 @@ import styleFunctionSx from '@mui/system/styleFunctionSx';
 import extendTheme from './extendTheme';
 import createTypography from './createTypography';
 import THEME_ID from './identifier';
+import { defaultConfig } from '../InitColorSchemeScript/InitColorSchemeScript';
 import { jsx as _jsx } from "react/jsx-runtime";
 const defaultTheme = extendTheme();
 const {
   CssVarsProvider,
   useColorScheme,
-  getInitColorSchemeScript
+  getInitColorSchemeScript: deprecatedGetInitColorSchemeScript
 } = createCssVarsProvider({
   themeId: THEME_ID,
   theme: defaultTheme,
-  attribute: 'data-mui-color-scheme',
-  modeStorageKey: 'mui-mode',
-  colorSchemeStorageKey: 'mui-color-scheme',
+  attribute: defaultConfig.attribute,
+  colorSchemeStorageKey: defaultConfig.colorSchemeStorageKey,
+  modeStorageKey: defaultConfig.modeStorageKey,
   defaultColorScheme: {
-    light: 'light',
-    dark: 'dark'
+    light: defaultConfig.defaultLightColorScheme,
+    dark: defaultConfig.defaultDarkColorScheme
   },
   resolveTheme: theme => {
     const newTheme = {
@@ -38,6 +39,7 @@ const {
 });
 let warnedOnce = false;
 
+// TODO: remove in v7
 // eslint-disable-next-line @typescript-eslint/naming-convention
 function Experimental_CssVarsProvider(props) {
   if (!warnedOnce) {
@@ -48,4 +50,14 @@ function Experimental_CssVarsProvider(props) {
     ...props
   });
 }
-export { useColorScheme, getInitColorSchemeScript, CssVarsProvider, Experimental_CssVarsProvider };
+let warnedInitScriptOnce = false;
+
+// TODO: remove in v7
+const getInitColorSchemeScript = params => {
+  if (!warnedInitScriptOnce) {
+    console.warn(['MUI: The getInitColorSchemeScript function has been deprecated.', '', "You should use `import InitColorSchemeScript from '@mui/material/InitColorSchemeScript'`", 'and replace the function call with `<InitColorSchemeScript />` instead.'].join('\n'));
+    warnedInitScriptOnce = true;
+  }
+  return deprecatedGetInitColorSchemeScript(params);
+};
+export { useColorScheme, CssVarsProvider, getInitColorSchemeScript, Experimental_CssVarsProvider };

package/styles/createTheme.js

@@ -45,7 +45,7 @@ Please use another name.` : _formatMuiErrorMessage(18));
     const traverse = (node, component) => {
       let key;
 
-      // eslint-disable-next-line guard-for-in, no-restricted-syntax
+      // eslint-disable-next-line guard-for-in
       for (key in node) {
         const child = node[key];
         if (stateClasses.indexOf(key) !== -1 && Object.keys(child).length > 0) {

package/styles/createTransitions.js

@@ -36,8 +36,8 @@ function getAutoHeightDuration(height) {
   }
   const constant = height / 36;
 
-  // https://www.wolframalpha.com/input/?i=(4+%2B+15+*+(x+%2F+36+)+**+0.25+%2B+(x+%2F+36)+%2F+5)+*+10
-  return Math.round((4 + 15 * constant ** 0.25 + constant / 5) * 10);
+  // https://www.desmos.com/calculator/vbrp3ggqet
+  return Math.min(Math.round((4 + 15 * constant ** 0.25 + constant / 5) * 10), 3000);
 }
 export default function createTransitions(inputTransitions) {
   const mergedEasing = {

package/styles/extendTheme.js

@@ -8,6 +8,7 @@ import defaultShouldSkipGeneratingVar from './shouldSkipGeneratingVar';
 import createThemeWithoutVars from './createTheme';
 import getOverlayAlpha from './getOverlayAlpha';
 import defaultGetSelector from './createGetSelector';
+import { stringifyTheme } from './stringifyTheme';
 const defaultDarkOverlays = [...Array(25)].map((_, index) => {
   if (index === 0) {
     return undefined;
@@ -351,5 +352,7 @@ export default function extendTheme(options = {}, ...args) {
       theme: this
     });
   };
+  theme.toRuntimeSource = stringifyTheme; // for Pigment CSS integration
+
   return theme;
 }

package/styles/index.d.ts

@@ -100,6 +100,7 @@ export { default as withTheme } from './withTheme';
 export * from './CssVarsProvider';
 
 export { default as extendTheme } from './extendTheme';
+
 export type {
   ColorSchemeOverrides,
   SupportedColorScheme,

package/styles/index.js

@@ -14,7 +14,7 @@ export { default as unstable_createMuiStrictModeTheme } from './createMuiStrictM
 export { default as createStyles } from './createStyles';
 export { getUnit as unstable_getUnit, toUnitless as unstable_toUnitless } from './cssUtils';
 export { default as responsiveFontSizes } from './responsiveFontSizes';
-export { duration, easing } from './createTransitions';
+export { default as createTransitions, duration, easing } from './createTransitions';
 export { default as useTheme } from './useTheme';
 export { default as useThemeProps } from './useThemeProps';
 export { default as styled } from './styled';

package/styles/overrides.d.ts

@@ -1,5 +1,5 @@
 import { CSSObject, CSSInterpolation, Interpolation } from '@mui/system';
-import { PopperClassKey } from '@mui/base/Popper';
+import { PopperClassKey } from '../Popper';
 import { ComponentsPropsList } from './props';
 import { AccordionActionsClassKey } from '../AccordionActions';
 import { AccordionClassKey } from '../Accordion';

package/styles/responsiveFontSizes.d.ts

@@ -1,6 +1,5 @@
 import { Breakpoint } from '@mui/system';
 import { Typography } from './createTypography';
-import { Theme } from './createTheme';
 
 export interface ResponsiveFontSizesOptions {
   breakpoints?: Breakpoint[];
@@ -9,7 +8,7 @@ export interface ResponsiveFontSizesOptions {
   variants?: Array<keyof Typography>;
 }
 
-export default function responsiveFontSizes(
-  theme: Theme,
+export default function responsiveFontSizes<T extends { typography: Typography }>(
+  theme: T,
   options?: ResponsiveFontSizesOptions,
-): Theme;
+): T;

package/styles/stringifyTheme.d.ts

@@ -0,0 +1,20 @@
+/**
+ * `baseTheme` usually comes from `createTheme` or `extendTheme`.
+ *
+ * This function is intended to be used with zero-runtime CSS-in-JS like Pigment CSS
+ * For example, in a Next.js project:
+ *
+ * ```js
+ * // next.config.js
+ * const { extendTheme } = require('@mui/material/styles');
+ *
+ * const theme = extendTheme();
+ * // `.toRuntimeSource` is Pigment CSS specific to create a theme that is available at runtime.
+ * theme.toRuntimeSource = stringifyTheme;
+ *
+ * module.exports = withPigment({
+ *  theme,
+ * });
+ * ```
+ */
+export declare function stringifyTheme(baseTheme?: Record<string, any>): string;

package/styles/stringifyTheme.js

@@ -0,0 +1,55 @@
+/* eslint-disable import/prefer-default-export */
+import { isPlainObject } from '@mui/utils/deepmerge';
+function isSerializable(val) {
+  return isPlainObject(val) || typeof val === 'undefined' || typeof val === 'string' || typeof val === 'boolean' || typeof val === 'number' || Array.isArray(val);
+}
+
+/**
+ * `baseTheme` usually comes from `createTheme` or `extendTheme`.
+ *
+ * This function is intended to be used with zero-runtime CSS-in-JS like Pigment CSS
+ * For example, in a Next.js project:
+ *
+ * ```js
+ * // next.config.js
+ * const { extendTheme } = require('@mui/material/styles');
+ *
+ * const theme = extendTheme();
+ * // `.toRuntimeSource` is Pigment CSS specific to create a theme that is available at runtime.
+ * theme.toRuntimeSource = stringifyTheme;
+ *
+ * module.exports = withPigment({
+ *  theme,
+ * });
+ * ```
+ */
+export function stringifyTheme(baseTheme = {}) {
+  const serializableTheme = {
+    ...baseTheme
+  };
+  function serializeTheme(object) {
+    const array = Object.entries(object);
+    // eslint-disable-next-line no-plusplus
+    for (let index = 0; index < array.length; index++) {
+      const [key, value] = array[index];
+      if (!isSerializable(value) || key.startsWith('unstable_')) {
+        delete object[key];
+      } else if (isPlainObject(value)) {
+        object[key] = {
+          ...value
+        };
+        serializeTheme(object[key]);
+      }
+    }
+  }
+  serializeTheme(serializableTheme);
+  return `import { createBreakpoints } from '@mui/system';
+import { createTransitions } from '@mui/material/styles';
+
+const theme = ${JSON.stringify(serializableTheme, null, 2)};
+
+theme.breakpoints = createBreakpoints(theme.breakpoints || {});
+theme.transitions = createTransitions(theme.transitions || {});
+
+export default theme;`;
+}