@mui/material 6.0.0-alpha.10 → 6.0.0-alpha.12

package/node/Zoom/Zoom.js

@@ -10,7 +10,7 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactTransitionGroup = require("react-transition-group");
 var _elementAcceptingRef = _interopRequireDefault(require("@mui/utils/elementAcceptingRef"));
-var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
+var _zeroStyled = require("../zero-styled");
 var _utils = require("../transitions/utils");
 var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -31,7 +31,7 @@ const styles = {
  * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
  */
 const Zoom = /*#__PURE__*/React.forwardRef(function Zoom(props, ref) {
-  const theme = (0, _useTheme.default)();
+  const theme = (0, _zeroStyled.useTheme)();
   const defaultTimeout = {
     enter: theme.transitions.duration.enteringScreen,
     exit: theme.transitions.duration.leavingScreen

package/node/index.js

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

package/node/styles/CssVarsProvider.js

@@ -14,6 +14,7 @@ var _styleFunctionSx = _interopRequireDefault(require("@mui/system/styleFunction
 var _extendTheme = _interopRequireDefault(require("./extendTheme"));
 var _createTypography = _interopRequireDefault(require("./createTypography"));
 var _identifier = _interopRequireDefault(require("./identifier"));
+var _InitColorSchemeScript = require("../InitColorSchemeScript/InitColorSchemeScript");
 var _jsxRuntime = require("react/jsx-runtime");
 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; }
@@ -21,16 +22,16 @@ const defaultTheme = (0, _extendTheme.default)();
 const {
   CssVarsProvider,
   useColorScheme,
-  getInitColorSchemeScript
+  getInitColorSchemeScript: deprecatedGetInitColorSchemeScript
 } = (0, _system.unstable_createCssVarsProvider)({
   themeId: _identifier.default,
   theme: defaultTheme,
-  attribute: 'data-mui-color-scheme',
-  modeStorageKey: 'mui-mode',
-  colorSchemeStorageKey: 'mui-color-scheme',
+  attribute: _InitColorSchemeScript.defaultConfig.attribute,
+  colorSchemeStorageKey: _InitColorSchemeScript.defaultConfig.colorSchemeStorageKey,
+  modeStorageKey: _InitColorSchemeScript.defaultConfig.modeStorageKey,
   defaultColorScheme: {
-    light: 'light',
-    dark: 'dark'
+    light: _InitColorSchemeScript.defaultConfig.defaultLightColorScheme,
+    dark: _InitColorSchemeScript.defaultConfig.defaultDarkColorScheme
   },
   resolveTheme: theme => {
     const newTheme = {
@@ -46,11 +47,11 @@ const {
     return newTheme;
   }
 });
-exports.getInitColorSchemeScript = getInitColorSchemeScript;
 exports.useColorScheme = useColorScheme;
 exports.CssVarsProvider = CssVarsProvider;
 let warnedOnce = false;
 
+// TODO: remove in v7
 // eslint-disable-next-line @typescript-eslint/naming-convention
 function Experimental_CssVarsProvider(props) {
   if (!warnedOnce) {
@@ -60,4 +61,15 @@ function Experimental_CssVarsProvider(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(CssVarsProvider, {
     ...props
   });
-}
+}
+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);
+};
+exports.getInitColorSchemeScript = getInitColorSchemeScript;

package/node/styles/createTheme.js

@@ -55,7 +55,7 @@ Please use another name.` : (0, _formatMuiErrorMessage2.default)(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/node/styles/index.js

@@ -30,6 +30,7 @@ var _exportNames = {
   unstable_getUnit: true,
   unstable_toUnitless: true,
   responsiveFontSizes: true,
+  createTransitions: true,
   duration: true,
   easing: true,
   useTheme: true,
@@ -96,6 +97,12 @@ Object.defineProperty(exports, "createTheme", {
     return _createTheme.default;
   }
 });
+Object.defineProperty(exports, "createTransitions", {
+  enumerable: true,
+  get: function () {
+    return _createTransitions.default;
+  }
+});
 Object.defineProperty(exports, "css", {
   enumerable: true,
   get: function () {
@@ -298,7 +305,7 @@ var _createMuiStrictModeTheme = _interopRequireDefault(require("./createMuiStric
 var _createStyles = _interopRequireDefault(require("./createStyles"));
 var _cssUtils = require("./cssUtils");
 var _responsiveFontSizes = _interopRequireDefault(require("./responsiveFontSizes"));
-var _createTransitions = require("./createTransitions");
+var _createTransitions = _interopRequireWildcard(require("./createTransitions"));
 var _useTheme = _interopRequireDefault(require("./useTheme"));
 var _useThemeProps = _interopRequireDefault(require("./useThemeProps"));
 var _styled = _interopRequireDefault(require("./styled"));
@@ -322,6 +329,18 @@ var _extendTheme = _interopRequireDefault(require("./extendTheme"));
 var _experimental_extendTheme = _interopRequireDefault(require("./experimental_extendTheme"));
 var _getOverlayAlpha = _interopRequireDefault(require("./getOverlayAlpha"));
 var _shouldSkipGeneratingVar = _interopRequireDefault(require("./shouldSkipGeneratingVar"));
+var _stringifyTheme = require("./stringifyTheme");
+Object.keys(_stringifyTheme).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _stringifyTheme[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _stringifyTheme[key];
+    }
+  });
+});
 var _createTypography = _interopRequireDefault(require("./createTypography"));
 var _createMixins = _interopRequireDefault(require("./createMixins"));
 var _excludeVariablesFromRoot = _interopRequireDefault(require("./excludeVariablesFromRoot"));

package/node/styles/stringifyTheme.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.stringifyTheme = stringifyTheme;
+var _deepmerge = require("@mui/utils/deepmerge");
+/* eslint-disable import/prefer-default-export */
+
+function isSerializable(val) {
+  return (0, _deepmerge.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,
+ * });
+ * ```
+ */
+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 ((0, _deepmerge.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;`;
+}

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/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.10",
+  "version": "6.0.0-alpha.12",
   "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,18 +27,18 @@
     "url": "https://opencollective.com/mui-org"
   },
   "dependencies": {
-    "@babel/runtime": "^7.24.6",
+    "@babel/runtime": "^7.24.7",
     "@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-transition-group": "^4.4.5",
-    "@mui/system": "^6.0.0-alpha.10",
-    "@mui/base": "5.0.0-beta.48",
-    "@mui/utils": "^6.0.0-alpha.9",
+    "@mui/core-downloads-tracker": "^6.0.0-alpha.12",
+    "@mui/base": "5.0.0-beta.50",
+    "@mui/system": "^6.0.0-alpha.12",
     "@mui/types": "^7.2.14",
-    "@mui/core-downloads-tracker": "^6.0.0-alpha.10"
+    "@mui/utils": "^6.0.0-alpha.12"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",

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/index.d.ts

@@ -100,6 +100,9 @@ export { default as withTheme } from './withTheme';
 export * from './CssVarsProvider';
 
 export { default as extendTheme } from './extendTheme';
+
+export * from './stringifyTheme';
+
 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';
@@ -31,6 +31,7 @@ export { default as extendTheme } from './extendTheme';
 export { default as experimental_extendTheme } from './experimental_extendTheme'; // TODO: Remove in v7
 export { default as getOverlayAlpha } from './getOverlayAlpha';
 export { default as shouldSkipGeneratingVar } from './shouldSkipGeneratingVar';
+export * from './stringifyTheme';
 
 // Private methods for creating parts of the theme
 export { default as private_createTypography } from './createTypography';

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;`;
+}

package/usePagination/usePagination.js

@@ -55,7 +55,7 @@ export default 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/zero-styled/index.d.ts

@@ -1,4 +1,12 @@
-import useThemeProps from '../styles/useThemeProps';
+import * as React from 'react';
+import { Interpolation } from '@mui/system';
+import { extendSxProp } from '@mui/system/styleFunctionSx';
+import { Theme } from '../styles/createTheme';
+import useTheme from '../styles/useTheme';
 export { css, keyframes } from '@mui/system';
 export { default as styled } from '../styles/styled';
-export declare function createUseThemeProps(name: string): typeof useThemeProps;
+export declare function globalCss(styles: Interpolation<{
+    theme: Theme;
+}>): (props: Record<string, any>) => React.JSX.Element;
+export declare function internal_createExtendSxProp(): typeof extendSxProp;
+export { useTheme };

package/zero-styled/index.js

@@ -1,8 +1,27 @@
-import useThemeProps from '../styles/useThemeProps';
+import * as React from 'react';
+import { extendSxProp } from '@mui/system/styleFunctionSx';
+import useTheme from '../styles/useTheme';
+import GlobalStyles from '../GlobalStyles';
+import { jsx as _jsx } from "react/jsx-runtime";
 export { css, keyframes } from '@mui/system';
 export { default as styled } from '../styles/styled';
+export 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.
+      _jsx(GlobalStyles, {
+        styles: typeof styles === 'function' ? theme => styles({
+          theme,
+          ...props
+        }) : styles
+      })
+    );
+  };
+}
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export function createUseThemeProps(name) {
-  return useThemeProps;
-}
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export function internal_createExtendSxProp() {
+  return extendSxProp;
+}
+export { useTheme };