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

package/node/Tooltip/Tooltip.js

@@ -16,21 +16,20 @@ var _utils = require("@mui/base/utils");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _colorManipulator = require("@mui/system/colorManipulator");
 var _RtlProvider = require("@mui/system/RtlProvider");
+var _isFocusVisible = _interopRequireDefault(require("@mui/utils/isFocusVisible"));
 var _zeroStyled = require("../zero-styled");
-var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _Grow = _interopRequireDefault(require("../Grow"));
 var _Popper = _interopRequireDefault(require("../Popper"));
 var _useEventCallback = _interopRequireDefault(require("../utils/useEventCallback"));
 var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
 var _useId = _interopRequireDefault(require("../utils/useId"));
-var _useIsFocusVisible = _interopRequireDefault(require("../utils/useIsFocusVisible"));
 var _useControlled = _interopRequireDefault(require("../utils/useControlled"));
 var _tooltipClasses = _interopRequireWildcard(require("./tooltipClasses"));
 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; }
-const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiTooltip');
 function round(value) {
   return Math.round(value * 1e5) / 1e5;
 }
@@ -320,7 +319,7 @@ function composeEventHandler(handler, eventHandler) {
 // TODO v6: Remove PopperComponent, PopperProps, TransitionComponent and TransitionProps.
 const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
   var _ref, _slots$popper, _ref2, _ref3, _slots$transition, _ref4, _slots$tooltip, _ref5, _slots$arrow, _slotProps$popper, _ref6, _slotProps$popper2, _slotProps$transition, _slotProps$tooltip, _ref7, _slotProps$tooltip2, _slotProps$arrow, _ref8, _slotProps$arrow2;
-  const props = useThemeProps({
+  const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiTooltip'
   });
@@ -360,7 +359,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
   const children = /*#__PURE__*/React.isValidElement(childrenProp) ? childrenProp : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
     children: childrenProp
   });
-  const theme = (0, _useTheme.default)();
+  const theme = (0, _zeroStyled.useTheme)();
   const isRtl = (0, _RtlProvider.useRtl)();
   const [childNode, setChildNode] = React.useState();
   const [arrowRef, setArrowRef] = React.useState(null);
@@ -455,18 +454,9 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
       handleClose(event);
     });
   };
-  const {
-    isFocusVisibleRef,
-    onBlur: handleBlurVisible,
-    onFocus: handleFocusVisible,
-    ref: focusVisibleRef
-  } = (0, _useIsFocusVisible.default)();
-  // We don't necessarily care about the focusVisible state (which is safe to access via ref anyway).
-  // We just need to re-render the Tooltip if the focus-visible state changes.
   const [, setChildIsFocusVisible] = React.useState(false);
   const handleBlur = event => {
-    handleBlurVisible(event);
-    if (isFocusVisibleRef.current === false) {
+    if (!(0, _isFocusVisible.default)(event.target)) {
       setChildIsFocusVisible(false);
       handleMouseLeave(event);
     }
@@ -478,8 +468,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
     if (!childNode) {
       setChildNode(event.currentTarget);
     }
-    handleFocusVisible(event);
-    if (isFocusVisibleRef.current === true) {
+    if ((0, _isFocusVisible.default)(event.target)) {
       setChildIsFocusVisible(true);
       handleMouseOver(event);
     }
@@ -531,7 +520,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
       document.removeEventListener('keydown', handleKeyDown);
     };
   }, [handleClose, open]);
-  const handleRef = (0, _useForkRef.default)(children.ref, focusVisibleRef, setChildNode, ref);
+  const handleRef = (0, _useForkRef.default)(children.ref, setChildNode, ref);
 
   // There is no point in displaying an empty tooltip.
   // So we exclude all falsy values, except 0, which is valid.

package/node/Typography/Typography.js

@@ -9,15 +9,15 @@ exports.default = exports.TypographyRoot = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _styleFunctionSx = require("@mui/system/styleFunctionSx");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _zeroStyled = require("../zero-styled");
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _typographyClasses = require("./typographyClasses");
 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; }
-const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiTypography');
+const extendSxProp = (0, _zeroStyled.internal_createExtendSxProp)();
 const useUtilityClasses = ownerState => {
   const {
     align,
@@ -129,12 +129,12 @@ const Typography = /*#__PURE__*/React.forwardRef(function Typography(inProps, re
   const {
     color,
     ...themeProps
-  } = useThemeProps({
+  } = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiTypography'
   });
   const textColor = colorTransformations[color];
-  const props = (0, _styleFunctionSx.extendSxProp)({
+  const props = extendSxProp({
     ...themeProps,
     ...(textColor !== null && {
       color: textColor || color

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.9
+ * @mui/material v6.0.0-beta.0
  *
  * @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/createTransitions.js

@@ -43,8 +43,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);
 }
 function createTransitions(inputTransitions) {
   const mergedEasing = {

package/node/styles/extendTheme.js

@@ -16,6 +16,7 @@ var _shouldSkipGeneratingVar = _interopRequireDefault(require("./shouldSkipGener
 var _createTheme = _interopRequireDefault(require("./createTheme"));
 var _getOverlayAlpha = _interopRequireDefault(require("./getOverlayAlpha"));
 var _createGetSelector = _interopRequireDefault(require("./createGetSelector"));
+var _stringifyTheme = require("./stringifyTheme");
 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; }
 const defaultDarkOverlays = [...Array(25)].map((_, index) => {
@@ -363,5 +364,7 @@ function extendTheme(options = {}, ...args) {
       theme: this
     });
   };
+  theme.toRuntimeSource = _stringifyTheme.stringifyTheme; // for Pigment CSS integration
+
   return theme;
 }

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"));

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

@@ -102,12 +102,6 @@ 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 _capitalize = _interopRequireDefault(require("./capitalize"));
 var _createChainedFunction = _interopRequireDefault(require("./createChainedFunction"));
@@ -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 = {

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.0",
   "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,26 @@
     "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-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/base": "5.0.0-beta.53",
+    "@mui/core-downloads-tracker": "^6.0.0-beta.0",
+    "@mui/system": "6.0.0-beta.0",
     "@mui/types": "^7.2.14",
-    "@mui/utils": "^6.0.0-alpha.9"
+    "@mui/utils": "6.0.0-beta.0"
   },
   "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-alpha.13"
   },
   "peerDependenciesMeta": {
     "@types/react": {
@@ -56,6 +57,9 @@
     },
     "@emotion/styled": {
       "optional": true
+    },
+    "@mui/material-pigment-css": {
+      "optional": true
     }
   },
   "sideEffects": false,
@@ -66,6 +70,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 };