@mui/material 7.3.5 → 7.3.7

package/esm/TextField/TextField.d.ts

@@ -47,22 +47,27 @@ export interface TextFieldSlots {
    */
   select: React.ElementType;
 }
+export interface TextFieldRootSlotPropsOverrides {}
+export interface TextFieldInputSlotPropsOverrides {}
+export interface TextFieldInputLabelSlotPropsOverrides {}
+export interface TextFieldFormHelperTextSlotPropsOverrides {}
+export interface TextFieldSelectSlotPropsOverrides {}
 export type TextFieldSlotsAndSlotProps<InputPropsType> = CreateSlotsAndSlotProps<TextFieldSlots, {
   /**
    * Props forwarded to the root slot.
    * By default, the available props are based on the [FormControl](https://mui.com/material-ui/api/form-control/#props) component.
    */
-  root: SlotProps<React.ElementType<FormControlProps>, {}, TextFieldOwnerState>;
+  root: SlotProps<React.ElementType<FormControlProps>, TextFieldRootSlotPropsOverrides, TextFieldOwnerState>;
   /**
    * Props forwarded to the input slot.
    * By default, the available props are based on the [Input](https://mui.com/material-ui/api/input/#props) component.
    */
-  input: SlotProps<React.ElementType<InputPropsType>, {}, TextFieldOwnerState>;
+  input: SlotProps<React.ElementType<InputPropsType>, TextFieldInputSlotPropsOverrides, TextFieldOwnerState>;
   /**
    * Props forwarded to the input label slot.
    * By default, the available props are based on the [InputLabel](https://mui.com/material-ui/api/input-label/#props) component.
    */
-  inputLabel: SlotProps<React.ElementType<InputLabelProps>, {}, TextFieldOwnerState>;
+  inputLabel: SlotProps<React.ElementType<InputLabelProps>, TextFieldInputLabelSlotPropsOverrides, TextFieldOwnerState>;
   /**
    * Props forwarded to the html input slot.
    * By default, the available props are based on the html input element.
@@ -72,12 +77,12 @@ export type TextFieldSlotsAndSlotProps<InputPropsType> = CreateSlotsAndSlotProps
    * Props forwarded to the form helper text slot.
    * By default, the available props are based on the [FormHelperText](https://mui.com/material-ui/api/form-helper-text/#props) component.
    */
-  formHelperText: SlotProps<React.ElementType<FormHelperTextProps>, {}, TextFieldOwnerState>;
+  formHelperText: SlotProps<React.ElementType<FormHelperTextProps>, TextFieldFormHelperTextSlotPropsOverrides, TextFieldOwnerState>;
   /**
    * Props forwarded to the select slot.
    * By default, the available props are based on the [Select](https://mui.com/material-ui/api/select/#props) component.
    */
-  select: SlotProps<React.ElementType<SelectProps>, {}, TextFieldOwnerState>;
+  select: SlotProps<React.ElementType<SelectProps>, TextFieldSelectSlotPropsOverrides, TextFieldOwnerState>;
 }>;
 export interface BaseTextFieldProps extends StandardProps<FormControlProps,
 // event handlers are declared on derived interfaces

package/esm/Unstable_TrapFocus/FocusTrap.js

@@ -8,6 +8,7 @@ import ownerDocument from '@mui/utils/ownerDocument';
 import getReactElementRef from '@mui/utils/getReactElementRef';
 import exactProp from '@mui/utils/exactProp';
 import elementAcceptingRef from '@mui/utils/elementAcceptingRef';
+import getActiveElement from "../utils/getActiveElement.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Inspired by https://github.com/focus-trap/tabbable
 const candidatesSelector = ['input', 'select', 'textarea', 'a[href]', 'button', '[tabindex]', 'audio[controls]', 'video[controls]', '[contenteditable]:not([contenteditable="false"])'].join(',');
@@ -111,7 +112,8 @@ function FocusTrap(props) {
       return;
     }
     const doc = ownerDocument(rootRef.current);
-    if (!rootRef.current.contains(doc.activeElement)) {
+    const activeElement = getActiveElement(doc);
+    if (!rootRef.current.contains(activeElement)) {
       if (!rootRef.current.hasAttribute('tabIndex')) {
         if (process.env.NODE_ENV !== 'production') {
           console.error(['MUI: The modal content node does not accept focus.', 'For the benefit of assistive technologies, ' + 'the tabIndex of the node is being set to "-1".'].join('\n'));
@@ -151,10 +153,11 @@ function FocusTrap(props) {
       if (disableEnforceFocus || !isEnabled() || nativeEvent.key !== 'Tab') {
         return;
       }
+      const activeElement = getActiveElement(doc);
 
       // Make sure the next tab starts from the right place.
-      // doc.activeElement refers to the origin.
-      if (doc.activeElement === rootRef.current && nativeEvent.shiftKey) {
+      // activeElement refers to the origin.
+      if (activeElement === rootRef.current && nativeEvent.shiftKey) {
         // We need to ignore the next contain as
         // it will try to move the focus back to the rootRef element.
         ignoreNextEnforceFocus.current = true;
@@ -171,23 +174,24 @@ function FocusTrap(props) {
       if (rootElement === null) {
         return;
       }
+      const activeEl = getActiveElement(doc);
       if (!doc.hasFocus() || !isEnabled() || ignoreNextEnforceFocus.current) {
         ignoreNextEnforceFocus.current = false;
         return;
       }
 
       // The focus is already inside
-      if (rootElement.contains(doc.activeElement)) {
+      if (rootElement.contains(activeEl)) {
         return;
       }
 
       // The disableEnforceFocus is set and the focus is outside of the focus trap (and sentinel nodes)
-      if (disableEnforceFocus && doc.activeElement !== sentinelStart.current && doc.activeElement !== sentinelEnd.current) {
+      if (disableEnforceFocus && activeEl !== sentinelStart.current && activeEl !== sentinelEnd.current) {
         return;
       }
 
       // if the focus event is not coming from inside the children's react tree, reset the refs
-      if (doc.activeElement !== reactFocusEventTarget.current) {
+      if (activeEl !== reactFocusEventTarget.current) {
         reactFocusEventTarget.current = null;
       } else if (reactFocusEventTarget.current !== null) {
         return;
@@ -196,7 +200,7 @@ function FocusTrap(props) {
         return;
       }
       let tabbable = [];
-      if (doc.activeElement === sentinelStart.current || doc.activeElement === sentinelEnd.current) {
+      if (activeEl === sentinelStart.current || activeEl === sentinelEnd.current) {
         tabbable = getTabbable(rootRef.current);
       }
 
@@ -228,7 +232,8 @@ function FocusTrap(props) {
     // The whatwg spec defines how the browser should behave but does not explicitly mention any events:
     // https://html.spec.whatwg.org/multipage/interaction.html#focus-fixup-rule.
     const interval = setInterval(() => {
-      if (doc.activeElement && doc.activeElement.tagName === 'BODY') {
+      const activeEl = getActiveElement(doc);
+      if (activeEl && activeEl.tagName === 'BODY') {
         contain();
       }
     }, 50);

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v7.3.5
+ * @mui/material v7.3.7
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/esm/internal/SwitchBase.js

@@ -135,7 +135,7 @@ const SwitchBase = /*#__PURE__*/React.forwardRef(function SwitchBase(props, ref)
   };
   const handleInputChange = event => {
     // Workaround for https://github.com/facebook/react/issues/9023
-    if (event.nativeEvent.defaultPrevented) {
+    if (event.nativeEvent.defaultPrevented || readOnly) {
       return;
     }
     const newChecked = event.target.checked;

package/esm/locale/arEG.js

@@ -38,7 +38,7 @@ export const arEG = {
       defaultProps: {
         clearText: 'مسح',
         closeText: 'إغلاق',
-        loadingText: 'جار التحميل...',
+        loadingText: 'جار التحميل…',
         noOptionsText: 'لا يوجد خيارات',
         openText: 'فتح'
       }

package/esm/locale/arSA.js

@@ -38,7 +38,7 @@ export const arSA = {
       defaultProps: {
         clearText: 'مسح',
         closeText: 'إغلاق',
-        loadingText: 'جار التحميل...',
+        loadingText: 'جار التحميل…',
         noOptionsText: 'لا توجد خيارات',
         openText: 'فتح'
       }

package/esm/locale/arSD.js

@@ -38,7 +38,7 @@ export const arSD = {
       defaultProps: {
         clearText: 'مسح',
         closeText: 'إغلاق',
-        loadingText: 'جار التحميل...',
+        loadingText: 'جار التحميل…',
         noOptionsText: 'لا يوجد خيارات',
         openText: 'فتح'
       }

package/esm/locale/kuCKB.js

@@ -38,7 +38,7 @@ export const kuCKB = {
       defaultProps: {
         clearText: 'سڕینەوە',
         closeText: 'داخستن',
-        loadingText: 'لە بارکردندایە...',
+        loadingText: 'لە بارکردندایە…',
         noOptionsText: 'هیچ بژاردەیەک نیە',
         openText: 'کردنەوە'
       }

package/esm/locale/neNP.js

@@ -42,7 +42,7 @@ export const neNP = {
       defaultProps: {
         clearText: 'खाली गर्नुहोस्',
         closeText: 'बन्द गर्नुहोस्',
-        loadingText: 'लोड हुँदै...',
+        loadingText: 'लोड हुँदै…',
         noOptionsText: 'कुनै विकल्प छैन',
         openText: 'खोल्नुहोस्'
       }

package/esm/styles/createThemeNoVars.d.ts

@@ -1,4 +1,4 @@
-import { ThemeOptions as SystemThemeOptions, Theme as SystemTheme, SxProps, CSSObject, SxConfig } from '@mui/system';
+import { ThemeOptions as SystemThemeOptions, Theme as SystemTheme, SxProps, CSSObject, SxConfig, ApplyStyles } from '@mui/system';
 import { Mixins, MixinsOptions } from "./createMixins.js";
 import { Palette, PaletteOptions } from "./createPalette.js";
 import { TypographyVariants, TypographyVariantsOptions } from "./createTypography.js";
@@ -6,7 +6,7 @@ import { Shadows } from "./shadows.js";
 import { Transitions, TransitionsOptions } from "./createTransitions.js";
 import { ZIndex, ZIndexOptions } from "./zIndex.js";
 import { Components } from "./components.js";
-import { CssVarsTheme, CssVarsPalette, ColorSystemOptions, Shape, ShapeOptions } from "./createThemeFoundation.js";
+import { CssVarsTheme, CssVarsPalette, ColorSystemOptions, Shape, ShapeOptions, SupportedColorScheme } from "./createThemeFoundation.js";
 
 /**
  * To disable custom properties, use module augmentation
@@ -46,13 +46,14 @@ export interface BaseTheme extends SystemTheme {
   typography: TypographyVariants;
   zIndex: ZIndex;
   unstable_strictMode?: boolean;
+  applyStyles: ApplyStyles<SupportedColorScheme>;
 }
 
 // shut off automatic exporting for the `BaseTheme` above
 export {};
 type CssVarsProperties = CssThemeVariables extends {
   enabled: true;
-} ? Pick<CssVarsTheme, 'applyStyles' | 'colorSchemes' | 'colorSchemeSelector' | 'rootSelector' | 'cssVarPrefix' | 'defaultColorScheme' | 'getCssVar' | 'getColorSchemeSelector' | 'generateThemeVars' | 'generateStyleSheets' | 'generateSpacing' | 'shouldSkipGeneratingVar' | 'vars'> : Partial<Pick<CssVarsTheme, 'vars'>>;
+} ? Pick<CssVarsTheme, 'colorSchemes' | 'colorSchemeSelector' | 'rootSelector' | 'cssVarPrefix' | 'defaultColorScheme' | 'getCssVar' | 'getColorSchemeSelector' | 'generateThemeVars' | 'generateStyleSheets' | 'generateSpacing' | 'shouldSkipGeneratingVar' | 'vars'> : Partial<Pick<CssVarsTheme, 'vars'>>;
 
 /**
  * Our [TypeScript guide on theme customization](https://mui.com/material-ui/guides/typescript/#customization-of-theme) explains in detail how you would add custom properties.

package/esm/styles/createThemeWithVars.d.ts

@@ -9,7 +9,7 @@ export interface CssVarsThemeOptions extends Omit<ThemeOptions, 'palette' | 'com
    * The strategy to generate CSS variables
    *
    * @example 'media'
-   * Generate CSS variables using [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme)
+   * Generate CSS variables using [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-color-scheme)
    *
    * @example '.mode-%s'
    * Generate CSS variables within a class .mode-light, .mode-dark
@@ -25,7 +25,7 @@ export interface CssVarsThemeOptions extends Omit<ThemeOptions, 'palette' | 'com
   cssVarPrefix?: string;
   /**
    * If `true`, the CSS color-scheme will not be set.
-   * https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/color-scheme
    * @default false
    */
   disableCssColorScheme?: boolean;

package/esm/useAutocomplete/useAutocomplete.js

@@ -465,7 +465,7 @@ function useAutocomplete(props) {
   filteredOptions.length,
   // Don't sync the highlighted index with the value when multiple
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  multiple ? false : value, filterSelectedOptions, changeHighlightedIndex, setHighlightedIndex, popupOpen, inputValue, multiple]);
+  multiple ? false : value, changeHighlightedIndex, setHighlightedIndex, popupOpen, inputValue, multiple]);
   const handleListboxRef = useEventCallback(node => {
     setRef(listboxRef, node);
     if (!node) {
@@ -584,9 +584,17 @@ function useAutocomplete(props) {
       handleClose(event, 'toggleInput');
     }
     let nextItem = focusedItem;
-    if (focusedItem === -1) {
-      if (inputValue === '' && direction === 'previous') {
-        nextItem = value.length - 1;
+
+    // When moving focus from the input to tags with ArrowLeft,
+    // always jump to the last tag (if any) from the input.
+    if (focusedItem === -1 && direction === 'previous') {
+      nextItem = value.length - 1;
+      // In freeSolo, clear any draft text so it doesn't "come back" later.
+      if (freeSolo && inputValue !== '') {
+        setInputValueState('');
+        if (onInputChange) {
+          onInputChange(event, '', 'reset');
+        }
       }
     } else {
       nextItem += direction === 'next' ? 1 : -1;
@@ -693,14 +701,37 @@ function useAutocomplete(props) {
           handleOpen(event);
           break;
         case 'ArrowLeft':
-          if (!multiple && renderValue) {
-            focusItem(0);
-          } else {
-            handleFocusItem(event, 'previous');
+          {
+            const input = inputRef.current;
+            // Only handle ArrowLeft when the caret is at the start of the input.
+            // Otherwise let the browser move the caret normally.
+            const caretAtStart = input && input.selectionStart === 0 && input.selectionEnd === 0;
+            if (!caretAtStart) {
+              // Let the browser handle normal cursor movement
+              return;
+            }
+
+            // Single-value rendering: move focus from input to the single tag.
+            if (!multiple && renderValue && value != null) {
+              // Moving from input to single tag; clear freeSolo draft text,
+              // so it doesn't reappear when we move back.
+              if (freeSolo && inputValue !== '') {
+                setInputValueState('');
+                if (onInputChange) {
+                  onInputChange(event, '', 'reset');
+                }
+              }
+              setFocusedItem(0);
+              focusItem(0);
+            } else {
+              // Multi-value: delegate to tag navigation helper.
+              handleFocusItem(event, 'previous');
+            }
+            break;
           }
-          break;
         case 'ArrowRight':
           if (!multiple && renderValue) {
+            setFocusedItem(-1);
             focusItem(-1);
           } else {
             handleFocusItem(event, 'next');
@@ -755,9 +786,10 @@ function useAutocomplete(props) {
               option: value[index]
             });
           }
-          if (!multiple && renderValue && !readOnly) {
-            setValueState(null);
-            focusItem(-1);
+          if (!multiple && renderValue && !readOnly && inputValue === '') {
+            handleValue(event, null, 'removeOption', {
+              option: value
+            });
           }
           break;
         case 'Delete':
@@ -770,9 +802,12 @@ function useAutocomplete(props) {
               option: value[index]
             });
           }
-          if (!multiple && renderValue && !readOnly) {
-            setValueState(null);
-            focusItem(-1);
+          if (!multiple && renderValue && !readOnly && inputValue === '') {
+            // Single-value rendering: Delete on empty input removes
+            // the single rendered option, same "removeOption" reason as multiple.
+            handleValue(event, null, 'removeOption', {
+              option: value
+            });
           }
           break;
         default:
@@ -781,6 +816,15 @@ function useAutocomplete(props) {
   };
   const handleFocus = event => {
     setFocused(true);
+
+    // When focusing the input, ensure any previously focused item (chip)
+    // is cleared so the input receives the visible caret and the
+    // input-focused styling is applied.
+    if (focusedItem !== -1) {
+      setFocusedItem(-1);
+      // Ensure DOM focus lands on the input
+      focusItem(-1);
+    }
     if (openOnFocus && !ignoreFocus.current) {
       handleOpen(event);
     }
@@ -813,7 +857,9 @@ function useAutocomplete(props) {
       }
     }
     if (newValue === '') {
-      if (!disableClearable && !multiple) {
+      // For normal single-select, clearing the input clears the value.
+      // For renderValue (chip-style single), only Backspace/Delete clear the value.
+      if (!disableClearable && !multiple && !renderValue) {
         handleValue(event, null, 'clear');
       }
     } else {

package/esm/utils/getActiveElement.d.ts

@@ -0,0 +1,2 @@
+import getActiveElement from '@mui/utils/getActiveElement';
+export default getActiveElement;

package/esm/utils/getActiveElement.js

@@ -0,0 +1,2 @@
+import getActiveElement from '@mui/utils/getActiveElement';
+export default getActiveElement;

package/esm/version/index.js

@@ -1,6 +1,6 @@
-export const version = "7.3.5";
+export const version = "7.3.7";
 export const major = Number("7");
 export const minor = Number("3");
-export const patch = Number("5");
+export const patch = Number("7");
 export const prerelease = undefined;
 export default version;

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v7.3.5
+ * @mui/material v7.3.7
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internal/SwitchBase.js

@@ -142,7 +142,7 @@ const SwitchBase = /*#__PURE__*/React.forwardRef(function SwitchBase(props, ref)
   };
   const handleInputChange = event => {
     // Workaround for https://github.com/facebook/react/issues/9023
-    if (event.nativeEvent.defaultPrevented) {
+    if (event.nativeEvent.defaultPrevented || readOnly) {
       return;
     }
     const newChecked = event.target.checked;

package/locale/arEG.js

@@ -44,7 +44,7 @@ const arEG = exports.arEG = {
       defaultProps: {
         clearText: 'مسح',
         closeText: 'إغلاق',
-        loadingText: 'جار التحميل...',
+        loadingText: 'جار التحميل…',
         noOptionsText: 'لا يوجد خيارات',
         openText: 'فتح'
       }

package/locale/arSA.js

@@ -44,7 +44,7 @@ const arSA = exports.arSA = {
       defaultProps: {
         clearText: 'مسح',
         closeText: 'إغلاق',
-        loadingText: 'جار التحميل...',
+        loadingText: 'جار التحميل…',
         noOptionsText: 'لا توجد خيارات',
         openText: 'فتح'
       }

package/locale/arSD.js

@@ -44,7 +44,7 @@ const arSD = exports.arSD = {
       defaultProps: {
         clearText: 'مسح',
         closeText: 'إغلاق',
-        loadingText: 'جار التحميل...',
+        loadingText: 'جار التحميل…',
         noOptionsText: 'لا يوجد خيارات',
         openText: 'فتح'
       }

package/locale/kuCKB.js

@@ -44,7 +44,7 @@ const kuCKB = exports.kuCKB = {
       defaultProps: {
         clearText: 'سڕینەوە',
         closeText: 'داخستن',
-        loadingText: 'لە بارکردندایە...',
+        loadingText: 'لە بارکردندایە…',
         noOptionsText: 'هیچ بژاردەیەک نیە',
         openText: 'کردنەوە'
       }

package/locale/neNP.js

@@ -48,7 +48,7 @@ const neNP = exports.neNP = {
       defaultProps: {
         clearText: 'खाली गर्नुहोस्',
         closeText: 'बन्द गर्नुहोस्',
-        loadingText: 'लोड हुँदै...',
+        loadingText: 'लोड हुँदै…',
         noOptionsText: 'कुनै विकल्प छैन',
         openText: 'खोल्नुहोस्'
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "7.3.5",
+  "version": "7.3.7",
   "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.",
   "keywords": [
@@ -29,14 +29,14 @@
     "@popperjs/core": "^2.11.8",
     "@types/react-transition-group": "^4.4.12",
     "clsx": "^2.1.1",
-    "csstype": "^3.1.3",
+    "csstype": "^3.2.3",
     "prop-types": "^15.8.1",
-    "react-is": "^19.2.0",
+    "react-is": "^19.2.3",
     "react-transition-group": "^4.4.5",
-    "@mui/core-downloads-tracker": "^7.3.5",
-    "@mui/system": "^7.3.5",
-    "@mui/types": "^7.4.8",
-    "@mui/utils": "^7.3.5"
+    "@mui/core-downloads-tracker": "^7.3.7",
+    "@mui/system": "^7.3.7",
+    "@mui/utils": "^7.3.7",
+    "@mui/types": "^7.4.10"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",
@@ -44,7 +44,7 @@
     "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
-    "@mui/material-pigment-css": "^7.3.5"
+    "@mui/material-pigment-css": "^7.3.7"
   },
   "peerDependenciesMeta": {
     "@types/react": {

package/styles/createThemeNoVars.d.ts

@@ -1,4 +1,4 @@
-import { ThemeOptions as SystemThemeOptions, Theme as SystemTheme, SxProps, CSSObject, SxConfig } from '@mui/system';
+import { ThemeOptions as SystemThemeOptions, Theme as SystemTheme, SxProps, CSSObject, SxConfig, ApplyStyles } from '@mui/system';
 import { Mixins, MixinsOptions } from "./createMixins.js";
 import { Palette, PaletteOptions } from "./createPalette.js";
 import { TypographyVariants, TypographyVariantsOptions } from "./createTypography.js";
@@ -6,7 +6,7 @@ import { Shadows } from "./shadows.js";
 import { Transitions, TransitionsOptions } from "./createTransitions.js";
 import { ZIndex, ZIndexOptions } from "./zIndex.js";
 import { Components } from "./components.js";
-import { CssVarsTheme, CssVarsPalette, ColorSystemOptions, Shape, ShapeOptions } from "./createThemeFoundation.js";
+import { CssVarsTheme, CssVarsPalette, ColorSystemOptions, Shape, ShapeOptions, SupportedColorScheme } from "./createThemeFoundation.js";
 
 /**
  * To disable custom properties, use module augmentation
@@ -46,13 +46,14 @@ export interface BaseTheme extends SystemTheme {
   typography: TypographyVariants;
   zIndex: ZIndex;
   unstable_strictMode?: boolean;
+  applyStyles: ApplyStyles<SupportedColorScheme>;
 }
 
 // shut off automatic exporting for the `BaseTheme` above
 export {};
 type CssVarsProperties = CssThemeVariables extends {
   enabled: true;
-} ? Pick<CssVarsTheme, 'applyStyles' | 'colorSchemes' | 'colorSchemeSelector' | 'rootSelector' | 'cssVarPrefix' | 'defaultColorScheme' | 'getCssVar' | 'getColorSchemeSelector' | 'generateThemeVars' | 'generateStyleSheets' | 'generateSpacing' | 'shouldSkipGeneratingVar' | 'vars'> : Partial<Pick<CssVarsTheme, 'vars'>>;
+} ? Pick<CssVarsTheme, 'colorSchemes' | 'colorSchemeSelector' | 'rootSelector' | 'cssVarPrefix' | 'defaultColorScheme' | 'getCssVar' | 'getColorSchemeSelector' | 'generateThemeVars' | 'generateStyleSheets' | 'generateSpacing' | 'shouldSkipGeneratingVar' | 'vars'> : Partial<Pick<CssVarsTheme, 'vars'>>;
 
 /**
  * Our [TypeScript guide on theme customization](https://mui.com/material-ui/guides/typescript/#customization-of-theme) explains in detail how you would add custom properties.

package/styles/createThemeWithVars.d.ts

@@ -9,7 +9,7 @@ export interface CssVarsThemeOptions extends Omit<ThemeOptions, 'palette' | 'com
    * The strategy to generate CSS variables
    *
    * @example 'media'
-   * Generate CSS variables using [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme)
+   * Generate CSS variables using [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-color-scheme)
    *
    * @example '.mode-%s'
    * Generate CSS variables within a class .mode-light, .mode-dark
@@ -25,7 +25,7 @@ export interface CssVarsThemeOptions extends Omit<ThemeOptions, 'palette' | 'com
   cssVarPrefix?: string;
   /**
    * If `true`, the CSS color-scheme will not be set.
-   * https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/color-scheme
    * @default false
    */
   disableCssColorScheme?: boolean;