@mui/material 6.1.5 → 6.1.7

package/Autocomplete/Autocomplete.d.ts

@@ -81,6 +81,7 @@ export interface AutocompleteRenderInputParams {
     className: string;
     startAdornment: React.ReactNode;
     endAdornment: React.ReactNode;
+    onMouseDown: React.MouseEventHandler;
   };
   inputProps: ReturnType<ReturnType<typeof useAutocomplete>['getInputProps']>;
 }

package/AvatarGroup/AvatarGroup.js

@@ -107,11 +107,7 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
     className: classes.avatar,
     ownerState,
     additionalProps: {
-      variant,
-      style: {
-        '--AvatarRoot-spacing': marginValue ? `${marginValue}px` : undefined,
-        ...other.style
-      }
+      variant
     }
   });
   return /*#__PURE__*/_jsxs(AvatarGroupRoot, {
@@ -120,6 +116,10 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
     className: clsx(classes.root, className),
     ref: ref,
     ...other,
+    style: {
+      '--AvatarGroup-spacing': marginValue ? `${marginValue}px` : undefined,
+      ...other.style
+    },
     children: [extraAvatars ? /*#__PURE__*/_jsx(SurplusSlot, {
       ...surplusProps,
       children: extraAvatarsElement

package/CHANGELOG.md

@@ -1,6 +1,112 @@
 # [Versions](https://mui.com/versions/)
 
-## 6.1.5
+## v6.1.7
+
+<!-- generated comparing v6.1.6..master -->
+
+_Nov 13, 2024_
+
+A big thanks to the 13 contributors who made this release possible.
+This release includes fixes as well as documentation improvements.
+
+### `@mui/material@6.1.7`
+
+- Fix default props theme scoping (#44340) @siriwatknp
+- Support theme scoping in `useMediaQuery` (#44339) @siriwatknp
+- [Grid] Fix regression spacing prop with string value (#44376) @siriwatknp
+
+### `@mui/styled-engine-sc@6.1.7`
+
+- Fix missing `@types/hoist-non-react-statics` causing `styled` returns any (#44397) @megos
+
+### Docs
+
+- Replace 'Experimental APIs - Toolpad' with 'Toolpad (Beta)' (#44388) @prakhargupta1
+- Fix Pigment CSS install (#44353) @oliviertassinari
+- Fix dashboard menu warning (#44317) @siriwatknp
+- Add runtime theme section for Material Pigment CSS (#44137) @siriwatknp
+- Add hash to `key` to remove noise from console (#44289) @sai6855
+- Revise Example Projects and Related Projects pages (#44191) @samuelsycamore
+- [material-ui] Fix typo in typography theme set up for templates (#44338) @navedqb
+- [material-ui] Add StackBlitz/CodeSandbox buttons to template cards (#44253) @zanivan
+- [material-ui] Fix Sign-in/Sign-up templates layout (#44281) @zanivan
+- [material-ui] Remove noise in template (#44260) @oliviertassinari
+- [material-ui][Rating] Add uncontrolled example to Basic Rating demo (#44386) @sai6855
+- [material-ui][TextField] Replace InputProps with slotProps.input in demo (#44288) @sai6855
+
+### Core
+
+- [blog] Follow media asset guidelines (#44374) @oliviertassinari
+- [code-infra] Changes for test util to work in `vitest` (#43625) @JCQuintas
+- Remove old marked JS options (#44375) @ZeeshanTamboli
+- Fix webpack capitalization (#44352) @oliviertassinari
+- Fix Next.js link 404 (710cd95) @oliviertassinari
+- Update Gold sponsoring backlinks (#44316) @oliviertassinari
+- Fix tools-public.mui.com redirection (9196fa5) @oliviertassinari
+- Remove blank AlertTitle test file (#44282) @ZeeshanTamboli
+- [docs-infra] Fix ad in RTL (#44345) @oliviertassinari
+- [docs-infra] Enforce punctuation on descriptions (#44292) @oliviertassinari
+- [docs-infra] Add CodeSandbox and StackBlitz to vale vocab (6db477a) @oliviertassinari
+- [docs-infra] Fix correct spelling of VS Code (#44277) @oliviertassinari
+- [docs-infra] Add a `rawDescriptions` option (#44390) @vladmoroz
+- [examples] Add missing `clsx` dependency (#43526) @Janpot
+- [infra] Fix @renovate[bot] appearing in changelog (#44275) @mnajdova
+
+All contributors of this release in alphabetical order: @Janpot, @JCQuintas, @megos, @mnajdova, @navedqb, @oliviertassinari, @prakhargupta1, @sai6855, @samuelsycamore, @siriwatknp, @vladmoroz, @zanivan, @ZeeshanTamboli
+
+## v6.1.6
+
+<!-- generated comparing v6.1.5..master -->
+
+_Oct 30, 2024_
+
+A big thanks to the 13 contributors who made this release possible.
+
+### `@mui/material@6.1.6`
+
+- [Autocomplete] Add missing `onMouseDown` type to AutocompleteRenderInputParams (#44183) @sai6855
+- [Avatar] Fix AvatarGroup spacing (#44208) @aarongarciah
+- [AvatarGroup] Fix spacing CSS variable (#44202) @navedqb
+- [Divider] Fix CSS specificity order (#44204) @o-alexandrov
+- [Slider] Fix value prop type warning (#44131) @joshkel
+- Replace `useThemeProps` with `useDefaultProps` (#44193) @siriwatknp
+
+### `@mui/material-nextjs@6.1.6`
+
+- Support Next 15.0.0 (#42428) @nphmuller
+
+### `@mui/lab@6.0.0-beta.14`
+
+- [Tabs] Fix type of TabPanel component (#44207) @blackcow1987
+
+### `@mui/codemod@6.1.6`
+
+- Fix system props default import specifier (#44170) @siriwatknp
+
+### `@mui/utils@6.1.6`
+
+- Bring back useIsFocusVisible (#44256) @aarongarciah
+- Bring back getReactNodeRef (#44248) @aarongarciah
+
+### Docs
+
+- [material-ui][Avatar] Add AvatarGroup spacing demo (#44209) @aarongarciah
+- Fix a typo in CONTRIBUTING.md (#44200) @prakhargupta1
+- Mark the Hidden component as deprecated in the sidenav (#44068) @jimmycallin
+- Use () when referencing functions (#44184) @oliviertassinari
+- Follow types description convention (#44187) @oliviertassinari
+
+### Core
+
+- Lock file maintenance (#43947)
+- Run @mui/icon-material src:icons (#44097) @oliviertassinari
+- [test][material-ui] Add tests for Pigment Grid and Stack (#44132) @DiegoAndai
+- [test] Distinguish private with public tests API (#44188) @oliviertassinari
+- [docs-infra] Add recursively the relative modules in the demos (#44150) @mnajdova
+
+All contributors of this release in alphabetical order: @aarongarciah, @blackcow1987, @DiegoAndai, @jimmycallin, @joshkel, @mnajdova, @navedqb, @nphmuller, @o-alexandrov, @oliviertassinari, @prakhargupta1, @sai6855, @siriwatknp
+
+## v6.1.5
 
 <!-- generated comparing v6.1.4..master -->
 
@@ -32,7 +138,7 @@ A big thanks to the 9 contributors who made this release possible.
 - [material-ui][TextField] Dynamically modify the eye password button aria-label (#44122) @ChinoUkaegbu
 - [icons] Run pnpm docs:mdicons:synonyms (#44098) @oliviertassinari
 - [joy-ui] Update Overview copy to match Readme (#44136) @samuelsycamore
-- Add CodeSandbox/Stackblitz to the rest of the templates (#43708) @siriwatknp
+- Add CodeSandbox/StackBlitz to the rest of the templates (#43708) @siriwatknp
 - Update Figma link to fix 301 (a7b7d9c) @oliviertassinari
 - Link Toolpad from Core repo (#44111) @prakhargupta1
 - Remove HighlightedCode max-width (#43731) @Janpot
@@ -202,7 +308,7 @@ A big thanks to the 13 contributors who made this release possible.
 - Uniformity in version range @oliviertassinari
 - Replace `toBeAriaHidden` matcher with `toBeInaccessible` in tests (#43870) @ZeeshanTamboli
 - [docs-infra] Strengthen CSP (#43711) @oliviertassinari
-- [docs-infra] Open Codesandbox demo with fontsize=12 (#43860) @siriwatknp
+- [docs-infra] Open CodeSandbox demo with fontsize=12 (#43860) @siriwatknp
 - [icons] Reduce Material Icon page size (#43911) @oliviertassinari
 - [test] Point Istanbul to correct URL (#43935) @sai6855
 - [test] Sync React.version parse logic with codebase (#43820) @oliviertassinari
@@ -358,7 +464,7 @@ A big thanks to the 11 contributors who made this release possible.
 
 ### `@mui/material@6.0.2`
 
-- Fix `createTheme` with just color schemes (#43518) @siriwatknp
+- Fix `createTheme()` with just color schemes (#43518) @siriwatknp
 - [Menu,Popover] Fix Backdrop props descriptions (#43503) @Michael-Hutchinson
 - [MenuList] Do not react to an event with modifier key pressed (#43505) @MateuszGroth
 
@@ -1100,7 +1206,7 @@ A big thanks to the 18 contributors who made this release possible.
 
 ### Docs
 
-- Add `theme.applyStyles` and migrate docs (#42498) @siriwatknp
+- Add `theme.applyStyles()` and migrate docs (#42498) @siriwatknp
 - Fix dashboard template console error (#42594) @oliviertassinari
 - Migrate system props to `sx` prop (#42475) @siriwatknp
 - [material-ui]Fix duplicated sentence (#42521) @alexfauquette

package/Container/Container.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { createContainer } from '@mui/system';
 import capitalize from "../utils/capitalize.js";
 import styled from "../styles/styled.js";
-import useThemeProps from "../styles/useThemeProps.js";
+import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 const Container = createContainer({
   createStyledComponent: styled('div', {
     name: 'MuiContainer',
@@ -16,7 +16,7 @@ const Container = createContainer({
       return [styles.root, styles[`maxWidth${capitalize(String(ownerState.maxWidth))}`], ownerState.fixed && styles.fixed, ownerState.disableGutters && styles.disableGutters];
     }
   }),
-  useThemeProps: inProps => useThemeProps({
+  useThemeProps: inProps => useDefaultProps({
     props: inProps,
     name: 'MuiContainer'
   })

package/Divider/Divider.js

@@ -111,7 +111,6 @@ const DividerRoot = styled('div', {
     }) => !!ownerState.children,
     style: {
       display: 'flex',
-      whiteSpace: 'nowrap',
       textAlign: 'center',
       border: 0,
       borderTopStyle: 'solid',
@@ -185,6 +184,7 @@ const DividerWrapper = styled('span', {
   display: 'inline-block',
   paddingLeft: `calc(${theme.spacing(1)} * 1.2)`,
   paddingRight: `calc(${theme.spacing(1)} * 1.2)`,
+  whiteSpace: 'nowrap',
   variants: [{
     props: {
       orientation: 'vertical'

package/Grid/Grid.js

@@ -18,7 +18,7 @@ import { extendSxProp } from '@mui/system/styleFunctionSx';
 import composeClasses from '@mui/utils/composeClasses';
 import requirePropFactory from "../utils/requirePropFactory.js";
 import styled from "../styles/styled.js";
-import useThemeProps from "../styles/useThemeProps.js";
+import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import useTheme from "../styles/useTheme.js";
 import GridContext from "./GridContext.js";
 import gridClasses, { getGridUtilityClass } from "./gridClasses.js";
@@ -167,7 +167,7 @@ export function generateRowGap({
       const themeSpacing = theme.spacing(propValue);
       if (themeSpacing !== '0px') {
         return {
-          marginTop: theme.spacing(-propValue),
+          marginTop: `-${themeSpacing}`,
           [`& > .${gridClasses.item}`]: {
             paddingTop: themeSpacing
           }
@@ -212,7 +212,7 @@ export function generateColumnGap({
     }, columnSpacingValues, (propValue, breakpoint) => {
       const themeSpacing = theme.spacing(propValue);
       if (themeSpacing !== '0px') {
-        const negativeValue = theme.spacing(-propValue);
+        const negativeValue = `-${themeSpacing}`;
         return {
           width: `calc(100% + ${themeSpacing})`,
           marginLeft: negativeValue,
@@ -367,7 +367,7 @@ const useUtilityClasses = ownerState => {
  * @deprecated Use the [`Grid2`](https://mui.com/material-ui/react-grid2/) component instead.
  */
 const Grid = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
-  const themeProps = useThemeProps({
+  const themeProps = useDefaultProps({
     props: inProps,
     name: 'MuiGrid'
   });

package/Grid2/Grid2.js

@@ -3,7 +3,8 @@
 import PropTypes from 'prop-types';
 import { createGrid as createGrid2 } from '@mui/system/Grid';
 import requirePropFactory from "../utils/requirePropFactory.js";
-import { styled, useThemeProps } from "../styles/index.js";
+import { styled } from "../styles/index.js";
+import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 /**
  *
  * Demos:
@@ -21,7 +22,7 @@ const Grid2 = createGrid2({
     overridesResolver: (props, styles) => styles.root
   }),
   componentName: 'MuiGrid2',
-  useThemeProps: inProps => useThemeProps({
+  useThemeProps: inProps => useDefaultProps({
     props: inProps,
     name: 'MuiGrid2'
   })

package/NativeSelect/NativeSelect.js

@@ -9,7 +9,7 @@ import formControlState from "../FormControl/formControlState.js";
 import useFormControl from "../FormControl/useFormControl.js";
 import ArrowDropDownIcon from "../internal/svg-icons/ArrowDropDown.js";
 import Input from "../Input/index.js";
-import useThemeProps from "../styles/useThemeProps.js";
+import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import { getNativeSelectUtilityClasses } from "./nativeSelectClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
@@ -26,7 +26,7 @@ const defaultInput = /*#__PURE__*/_jsx(Input, {});
  * An alternative to `<Select native />` with a much smaller bundle size footprint.
  */
 const NativeSelect = /*#__PURE__*/React.forwardRef(function NativeSelect(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     name: 'MuiNativeSelect',
     props: inProps
   });

package/Rating/Rating.d.ts

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
 import { OverridableStringUnion } from '@mui/types';
-import { InternalStandardProps as StandardProps, Theme } from '..';
+import { Theme } from '..';
 import { RatingClasses } from './ratingClasses';
+import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 
 export interface IconContainerProps extends React.HTMLAttributes<HTMLSpanElement> {
   value: number;
@@ -10,8 +11,7 @@ export interface IconContainerProps extends React.HTMLAttributes<HTMLSpanElement
 
 export interface RatingPropsSizeOverrides {}
 
-export interface RatingProps
-  extends StandardProps<React.HTMLAttributes<HTMLSpanElement>, 'children' | 'onChange'> {
+export interface RatingOwnProps {
   /**
    * Override or extend the styles applied to the component.
    */
@@ -114,6 +114,14 @@ export interface RatingProps
   value?: number | null;
 }
 
+export type RatingTypeMap<
+  AdditionalProps = {},
+  RootComponent extends React.ElementType = 'span',
+> = {
+  props: AdditionalProps & RatingOwnProps;
+  defaultComponent: RootComponent;
+};
+
 /**
  *
  * Demos:
@@ -124,4 +132,13 @@ export interface RatingProps
  *
  * - [Rating API](https://mui.com/material-ui/api/rating/)
  */
-export default function Rating(props: RatingProps): React.JSX.Element;
+declare const Rating: OverridableComponent<RatingTypeMap>;
+
+export type RatingProps<
+  RootComponent extends React.ElementType = RatingTypeMap['defaultComponent'],
+  AdditionalProps = {},
+> = OverrideProps<RatingTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
+
+export default Rating;

package/Rating/Rating.js

@@ -317,6 +317,7 @@ const Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
     props: inProps
   });
   const {
+    component = 'span',
     className,
     defaultValue = null,
     disabled = false,
@@ -457,6 +458,7 @@ const Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
   const [emptyValueFocused, setEmptyValueFocused] = React.useState(false);
   const ownerState = {
     ...props,
+    component,
     defaultValue,
     disabled,
     emptyIcon,
@@ -473,6 +475,7 @@ const Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
   };
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsxs(RatingRoot, {
+    as: component,
     ref: handleRef,
     onMouseMove: handleMouseMove,
     onMouseLeave: handleMouseLeave,
@@ -558,6 +561,10 @@ process.env.NODE_ENV !== "production" ? Rating.propTypes /* remove-proptypes */
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
   // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * @ignore
+   */
+  children: PropTypes.node,
   /**
    * Override or extend the styles applied to the component.
    */
@@ -566,6 +573,11 @@ process.env.NODE_ENV !== "production" ? Rating.propTypes /* remove-proptypes */
    * @ignore
    */
   className: PropTypes.string,
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: PropTypes.elementType,
   /**
    * The default value. Use when the component is not controlled.
    * @default null

package/Select/Select.js

@@ -13,7 +13,7 @@ import Input from "../Input/index.js";
 import NativeSelectInput from "../NativeSelect/NativeSelectInput.js";
 import FilledInput from "../FilledInput/index.js";
 import OutlinedInput from "../OutlinedInput/index.js";
-import useThemeProps from "../styles/useThemeProps.js";
+import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import useForkRef from "../utils/useForkRef.js";
 import { styled } from "../zero-styled/index.js";
 import rootShouldForwardProp from "../styles/rootShouldForwardProp.js";
@@ -34,7 +34,7 @@ const StyledInput = styled(Input, styledRootConfig)('');
 const StyledOutlinedInput = styled(OutlinedInput, styledRootConfig)('');
 const StyledFilledInput = styled(FilledInput, styledRootConfig)('');
 const Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     name: 'MuiSelect',
     props: inProps
   });

package/Slider/Slider.d.ts

@@ -284,7 +284,7 @@ export interface SliderValueLabelProps extends React.HTMLAttributes<HTMLSpanElem
   children: React.ReactElement<unknown>;
   index: number;
   open: boolean;
-  value: number;
+  value: React.ReactNode;
 }
 
 type SliderRootProps = NonNullable<SliderTypeMap['props']['componentsProps']>['root'];

package/Slider/Slider.js

@@ -440,7 +440,7 @@ process.env.NODE_ENV !== "production" ? SliderValueLabel.propTypes /* remove-pro
   /**
    * @ignore
    */
-  value: PropTypes.number.isRequired
+  value: PropTypes.node
 } : void 0;
 export { SliderValueLabel };
 export const SliderMark = styled('span', {
@@ -901,7 +901,7 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes /* remove-proptypes */
       className: PropTypes.string,
       open: PropTypes.bool,
       style: PropTypes.object,
-      value: PropTypes.number,
+      value: PropTypes.node,
       valueLabelDisplay: PropTypes.oneOf(['auto', 'off', 'on'])
     })])
   }),
@@ -1018,7 +1018,7 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes /* remove-proptypes */
       className: PropTypes.string,
       open: PropTypes.bool,
       style: PropTypes.object,
-      value: PropTypes.number,
+      value: PropTypes.node,
       valueLabelDisplay: PropTypes.oneOf(['auto', 'off', 'on'])
     })])
   }),

package/Slider/SliderValueLabel.types.d.ts

@@ -8,9 +8,8 @@ export interface SliderValueLabelProps {
     open: boolean;
     /**
      * The value of the slider.
-     * For ranged sliders, provide an array with two values.
      */
-    value: number;
+    value: React.ReactNode;
     /**
      * Controls when the value label is displayed:
      *

package/Stack/Stack.js

@@ -3,14 +3,14 @@
 import PropTypes from 'prop-types';
 import { createStack } from '@mui/system';
 import styled from "../styles/styled.js";
-import useThemeProps from "../styles/useThemeProps.js";
+import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 const Stack = createStack({
   createStyledComponent: styled('div', {
     name: 'MuiStack',
     slot: 'Root',
     overridesResolver: (props, styles) => styles.root
   }),
-  useThemeProps: inProps => useThemeProps({
+  useThemeProps: inProps => useDefaultProps({
     props: inProps,
     name: 'MuiStack'
   })

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v6.1.5
+ * @mui/material v6.1.7
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/AvatarGroup/AvatarGroup.js

@@ -107,11 +107,7 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
     className: classes.avatar,
     ownerState,
     additionalProps: {
-      variant,
-      style: {
-        '--AvatarRoot-spacing': marginValue ? `${marginValue}px` : undefined,
-        ...other.style
-      }
+      variant
     }
   });
   return /*#__PURE__*/_jsxs(AvatarGroupRoot, {
@@ -120,6 +116,10 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
     className: clsx(classes.root, className),
     ref: ref,
     ...other,
+    style: {
+      '--AvatarGroup-spacing': marginValue ? `${marginValue}px` : undefined,
+      ...other.style
+    },
     children: [extraAvatars ? /*#__PURE__*/_jsx(SurplusSlot, {
       ...surplusProps,
       children: extraAvatarsElement

package/modern/Container/Container.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { createContainer } from '@mui/system';
 import capitalize from "../utils/capitalize.js";
 import styled from "../styles/styled.js";
-import useThemeProps from "../styles/useThemeProps.js";
+import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 const Container = createContainer({
   createStyledComponent: styled('div', {
     name: 'MuiContainer',
@@ -16,7 +16,7 @@ const Container = createContainer({
       return [styles.root, styles[`maxWidth${capitalize(String(ownerState.maxWidth))}`], ownerState.fixed && styles.fixed, ownerState.disableGutters && styles.disableGutters];
     }
   }),
-  useThemeProps: inProps => useThemeProps({
+  useThemeProps: inProps => useDefaultProps({
     props: inProps,
     name: 'MuiContainer'
   })

package/modern/Divider/Divider.js

@@ -111,7 +111,6 @@ const DividerRoot = styled('div', {
     }) => !!ownerState.children,
     style: {
       display: 'flex',
-      whiteSpace: 'nowrap',
       textAlign: 'center',
       border: 0,
       borderTopStyle: 'solid',
@@ -185,6 +184,7 @@ const DividerWrapper = styled('span', {
   display: 'inline-block',
   paddingLeft: `calc(${theme.spacing(1)} * 1.2)`,
   paddingRight: `calc(${theme.spacing(1)} * 1.2)`,
+  whiteSpace: 'nowrap',
   variants: [{
     props: {
       orientation: 'vertical'

package/modern/Grid/Grid.js

@@ -18,7 +18,7 @@ import { extendSxProp } from '@mui/system/styleFunctionSx';
 import composeClasses from '@mui/utils/composeClasses';
 import requirePropFactory from "../utils/requirePropFactory.js";
 import styled from "../styles/styled.js";
-import useThemeProps from "../styles/useThemeProps.js";
+import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import useTheme from "../styles/useTheme.js";
 import GridContext from "./GridContext.js";
 import gridClasses, { getGridUtilityClass } from "./gridClasses.js";
@@ -167,7 +167,7 @@ export function generateRowGap({
       const themeSpacing = theme.spacing(propValue);
       if (themeSpacing !== '0px') {
         return {
-          marginTop: theme.spacing(-propValue),
+          marginTop: `-${themeSpacing}`,
           [`& > .${gridClasses.item}`]: {
             paddingTop: themeSpacing
           }
@@ -212,7 +212,7 @@ export function generateColumnGap({
     }, columnSpacingValues, (propValue, breakpoint) => {
       const themeSpacing = theme.spacing(propValue);
       if (themeSpacing !== '0px') {
-        const negativeValue = theme.spacing(-propValue);
+        const negativeValue = `-${themeSpacing}`;
         return {
           width: `calc(100% + ${themeSpacing})`,
           marginLeft: negativeValue,
@@ -367,7 +367,7 @@ const useUtilityClasses = ownerState => {
  * @deprecated Use the [`Grid2`](https://mui.com/material-ui/react-grid2/) component instead.
  */
 const Grid = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
-  const themeProps = useThemeProps({
+  const themeProps = useDefaultProps({
     props: inProps,
     name: 'MuiGrid'
   });

package/modern/Grid2/Grid2.js

@@ -3,7 +3,8 @@
 import PropTypes from 'prop-types';
 import { createGrid as createGrid2 } from '@mui/system/Grid';
 import requirePropFactory from "../utils/requirePropFactory.js";
-import { styled, useThemeProps } from "../styles/index.js";
+import { styled } from "../styles/index.js";
+import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 /**
  *
  * Demos:
@@ -21,7 +22,7 @@ const Grid2 = createGrid2({
     overridesResolver: (props, styles) => styles.root
   }),
   componentName: 'MuiGrid2',
-  useThemeProps: inProps => useThemeProps({
+  useThemeProps: inProps => useDefaultProps({
     props: inProps,
     name: 'MuiGrid2'
   })

package/modern/NativeSelect/NativeSelect.js

@@ -9,7 +9,7 @@ import formControlState from "../FormControl/formControlState.js";
 import useFormControl from "../FormControl/useFormControl.js";
 import ArrowDropDownIcon from "../internal/svg-icons/ArrowDropDown.js";
 import Input from "../Input/index.js";
-import useThemeProps from "../styles/useThemeProps.js";
+import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import { getNativeSelectUtilityClasses } from "./nativeSelectClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
@@ -26,7 +26,7 @@ const defaultInput = /*#__PURE__*/_jsx(Input, {});
  * An alternative to `<Select native />` with a much smaller bundle size footprint.
  */
 const NativeSelect = /*#__PURE__*/React.forwardRef(function NativeSelect(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     name: 'MuiNativeSelect',
     props: inProps
   });

package/modern/Rating/Rating.js

@@ -317,6 +317,7 @@ const Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
     props: inProps
   });
   const {
+    component = 'span',
     className,
     defaultValue = null,
     disabled = false,
@@ -457,6 +458,7 @@ const Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
   const [emptyValueFocused, setEmptyValueFocused] = React.useState(false);
   const ownerState = {
     ...props,
+    component,
     defaultValue,
     disabled,
     emptyIcon,
@@ -473,6 +475,7 @@ const Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
   };
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsxs(RatingRoot, {
+    as: component,
     ref: handleRef,
     onMouseMove: handleMouseMove,
     onMouseLeave: handleMouseLeave,
@@ -558,6 +561,10 @@ process.env.NODE_ENV !== "production" ? Rating.propTypes /* remove-proptypes */
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
   // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * @ignore
+   */
+  children: PropTypes.node,
   /**
    * Override or extend the styles applied to the component.
    */
@@ -566,6 +573,11 @@ process.env.NODE_ENV !== "production" ? Rating.propTypes /* remove-proptypes */
    * @ignore
    */
   className: PropTypes.string,
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: PropTypes.elementType,
   /**
    * The default value. Use when the component is not controlled.
    * @default null

package/modern/Select/Select.js

@@ -13,7 +13,7 @@ import Input from "../Input/index.js";
 import NativeSelectInput from "../NativeSelect/NativeSelectInput.js";
 import FilledInput from "../FilledInput/index.js";
 import OutlinedInput from "../OutlinedInput/index.js";
-import useThemeProps from "../styles/useThemeProps.js";
+import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import useForkRef from "../utils/useForkRef.js";
 import { styled } from "../zero-styled/index.js";
 import rootShouldForwardProp from "../styles/rootShouldForwardProp.js";
@@ -34,7 +34,7 @@ const StyledInput = styled(Input, styledRootConfig)('');
 const StyledOutlinedInput = styled(OutlinedInput, styledRootConfig)('');
 const StyledFilledInput = styled(FilledInput, styledRootConfig)('');
 const Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     name: 'MuiSelect',
     props: inProps
   });

package/modern/Slider/Slider.js

@@ -440,7 +440,7 @@ process.env.NODE_ENV !== "production" ? SliderValueLabel.propTypes /* remove-pro
   /**
    * @ignore
    */
-  value: PropTypes.number.isRequired
+  value: PropTypes.node
 } : void 0;
 export { SliderValueLabel };
 export const SliderMark = styled('span', {
@@ -901,7 +901,7 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes /* remove-proptypes */
       className: PropTypes.string,
       open: PropTypes.bool,
       style: PropTypes.object,
-      value: PropTypes.number,
+      value: PropTypes.node,
       valueLabelDisplay: PropTypes.oneOf(['auto', 'off', 'on'])
     })])
   }),
@@ -1018,7 +1018,7 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes /* remove-proptypes */
       className: PropTypes.string,
       open: PropTypes.bool,
       style: PropTypes.object,
-      value: PropTypes.number,
+      value: PropTypes.node,
       valueLabelDisplay: PropTypes.oneOf(['auto', 'off', 'on'])
     })])
   }),

package/modern/Stack/Stack.js

@@ -3,14 +3,14 @@
 import PropTypes from 'prop-types';
 import { createStack } from '@mui/system';
 import styled from "../styles/styled.js";
-import useThemeProps from "../styles/useThemeProps.js";
+import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 const Stack = createStack({
   createStyledComponent: styled('div', {
     name: 'MuiStack',
     slot: 'Root',
     overridesResolver: (props, styles) => styles.root
   }),
-  useThemeProps: inProps => useThemeProps({
+  useThemeProps: inProps => useDefaultProps({
     props: inProps,
     name: 'MuiStack'
   })

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v6.1.5
+ * @mui/material v6.1.7
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/styles/ThemeProviderWithVars.js

@@ -69,7 +69,7 @@ const getInitColorSchemeScript = params => {
  * @deprecated
  * The `CssVarsProvider` component has been deprecated and ported into `ThemeProvider`.
  *
- * You should use `ThemeProvider` and `createTheme` instead:
+ * You should use `ThemeProvider` and `createTheme()` instead:
  *
  * ```diff
  * - import { CssVarsProvider, extendTheme } from '@mui/material/styles';

package/modern/styles/stringifyTheme.js

@@ -5,7 +5,7 @@ function isSerializable(val) {
 }
 
 /**
- * `baseTheme` usually comes from `createTheme` or `extendTheme`.
+ * `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:

package/modern/useMediaQuery/index.js

@@ -1 +1,6 @@
-export { default } from '@mui/system/useMediaQuery';
+import { unstable_createUseMediaQuery } from '@mui/system/useMediaQuery';
+import THEME_ID from "../styles/identifier.js";
+const useMediaQuery = unstable_createUseMediaQuery({
+  themeId: THEME_ID
+});
+export default useMediaQuery;

package/modern/version/index.js

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

package/node/AvatarGroup/AvatarGroup.js

@@ -114,11 +114,7 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
     className: classes.avatar,
     ownerState,
     additionalProps: {
-      variant,
-      style: {
-        '--AvatarRoot-spacing': marginValue ? `${marginValue}px` : undefined,
-        ...other.style
-      }
+      variant
     }
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(AvatarGroupRoot, {
@@ -127,6 +123,10 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
     className: (0, _clsx.default)(classes.root, className),
     ref: ref,
     ...other,
+    style: {
+      '--AvatarGroup-spacing': marginValue ? `${marginValue}px` : undefined,
+      ...other.style
+    },
     children: [extraAvatars ? /*#__PURE__*/(0, _jsxRuntime.jsx)(SurplusSlot, {
       ...surplusProps,
       children: extraAvatarsElement

package/node/Container/Container.js

@@ -10,7 +10,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _system = require("@mui/system");
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _styled = _interopRequireDefault(require("../styles/styled"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
 const Container = (0, _system.createContainer)({
   createStyledComponent: (0, _styled.default)('div', {
     name: 'MuiContainer',
@@ -22,7 +22,7 @@ const Container = (0, _system.createContainer)({
       return [styles.root, styles[`maxWidth${(0, _capitalize.default)(String(ownerState.maxWidth))}`], ownerState.fixed && styles.fixed, ownerState.disableGutters && styles.disableGutters];
     }
   }),
-  useThemeProps: inProps => (0, _useThemeProps.default)({
+  useThemeProps: inProps => (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiContainer'
   })

package/node/Divider/Divider.js

@@ -118,7 +118,6 @@ const DividerRoot = (0, _zeroStyled.styled)('div', {
     }) => !!ownerState.children,
     style: {
       display: 'flex',
-      whiteSpace: 'nowrap',
       textAlign: 'center',
       border: 0,
       borderTopStyle: 'solid',
@@ -192,6 +191,7 @@ const DividerWrapper = (0, _zeroStyled.styled)('span', {
   display: 'inline-block',
   paddingLeft: `calc(${theme.spacing(1)} * 1.2)`,
   paddingRight: `calc(${theme.spacing(1)} * 1.2)`,
+  whiteSpace: 'nowrap',
   variants: [{
     props: {
       orientation: 'vertical'

package/node/Grid/Grid.js

@@ -31,7 +31,7 @@ var _styleFunctionSx = require("@mui/system/styleFunctionSx");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _requirePropFactory = _interopRequireDefault(require("../utils/requirePropFactory"));
 var _styled = _interopRequireDefault(require("../styles/styled"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
 var _GridContext = _interopRequireDefault(require("./GridContext"));
 var _gridClasses = _interopRequireWildcard(require("./gridClasses"));
@@ -180,7 +180,7 @@ function generateRowGap({
       const themeSpacing = theme.spacing(propValue);
       if (themeSpacing !== '0px') {
         return {
-          marginTop: theme.spacing(-propValue),
+          marginTop: `-${themeSpacing}`,
           [`& > .${_gridClasses.default.item}`]: {
             paddingTop: themeSpacing
           }
@@ -225,7 +225,7 @@ function generateColumnGap({
     }, columnSpacingValues, (propValue, breakpoint) => {
       const themeSpacing = theme.spacing(propValue);
       if (themeSpacing !== '0px') {
-        const negativeValue = theme.spacing(-propValue);
+        const negativeValue = `-${themeSpacing}`;
         return {
           width: `calc(100% + ${themeSpacing})`,
           marginLeft: negativeValue,
@@ -380,7 +380,7 @@ const useUtilityClasses = ownerState => {
  * @deprecated Use the [`Grid2`](https://mui.com/material-ui/react-grid2/) component instead.
  */
 const Grid = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
-  const themeProps = (0, _useThemeProps.default)({
+  const themeProps = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiGrid'
   });

package/node/Grid2/Grid2.js

@@ -10,6 +10,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Grid = require("@mui/system/Grid");
 var _requirePropFactory = _interopRequireDefault(require("../utils/requirePropFactory"));
 var _styles = require("../styles");
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
 /**
  *
  * Demos:
@@ -27,7 +28,7 @@ const Grid2 = (0, _Grid.createGrid)({
     overridesResolver: (props, styles) => styles.root
   }),
   componentName: 'MuiGrid2',
-  useThemeProps: inProps => (0, _styles.useThemeProps)({
+  useThemeProps: inProps => (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiGrid2'
   })

package/node/NativeSelect/NativeSelect.js

@@ -16,7 +16,7 @@ var _formControlState = _interopRequireDefault(require("../FormControl/formContr
 var _useFormControl = _interopRequireDefault(require("../FormControl/useFormControl"));
 var _ArrowDropDown = _interopRequireDefault(require("../internal/svg-icons/ArrowDropDown"));
 var _Input = _interopRequireDefault(require("../Input"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _nativeSelectClasses = require("./nativeSelectClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
@@ -33,7 +33,7 @@ const defaultInput = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.default, {});
  * An alternative to `<Select native />` with a much smaller bundle size footprint.
  */
 const NativeSelect = /*#__PURE__*/React.forwardRef(function NativeSelect(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = (0, _DefaultPropsProvider.useDefaultProps)({
     name: 'MuiNativeSelect',
     props: inProps
   });

package/node/Rating/Rating.js

@@ -324,6 +324,7 @@ const Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
     props: inProps
   });
   const {
+    component = 'span',
     className,
     defaultValue = null,
     disabled = false,
@@ -464,6 +465,7 @@ const Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
   const [emptyValueFocused, setEmptyValueFocused] = React.useState(false);
   const ownerState = {
     ...props,
+    component,
     defaultValue,
     disabled,
     emptyIcon,
@@ -480,6 +482,7 @@ const Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
   };
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(RatingRoot, {
+    as: component,
     ref: handleRef,
     onMouseMove: handleMouseMove,
     onMouseLeave: handleMouseLeave,
@@ -565,6 +568,10 @@ process.env.NODE_ENV !== "production" ? Rating.propTypes /* remove-proptypes */
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
   // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * @ignore
+   */
+  children: _propTypes.default.node,
   /**
    * Override or extend the styles applied to the component.
    */
@@ -573,6 +580,11 @@ process.env.NODE_ENV !== "production" ? Rating.propTypes /* remove-proptypes */
    * @ignore
    */
   className: _propTypes.default.string,
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: _propTypes.default.elementType,
   /**
    * The default value. Use when the component is not controlled.
    * @default null

package/node/Select/Select.js

@@ -20,7 +20,7 @@ var _Input = _interopRequireDefault(require("../Input"));
 var _NativeSelectInput = _interopRequireDefault(require("../NativeSelect/NativeSelectInput"));
 var _FilledInput = _interopRequireDefault(require("../FilledInput"));
 var _OutlinedInput = _interopRequireDefault(require("../OutlinedInput"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
 var _zeroStyled = require("../zero-styled");
 var _rootShouldForwardProp = _interopRequireDefault(require("../styles/rootShouldForwardProp"));
@@ -41,7 +41,7 @@ const StyledInput = (0, _zeroStyled.styled)(_Input.default, styledRootConfig)(''
 const StyledOutlinedInput = (0, _zeroStyled.styled)(_OutlinedInput.default, styledRootConfig)('');
 const StyledFilledInput = (0, _zeroStyled.styled)(_FilledInput.default, styledRootConfig)('');
 const Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = (0, _DefaultPropsProvider.useDefaultProps)({
     name: 'MuiSelect',
     props: inProps
   });

package/node/Slider/Slider.js

@@ -447,7 +447,7 @@ process.env.NODE_ENV !== "production" ? SliderValueLabel.propTypes /* remove-pro
   /**
    * @ignore
    */
-  value: _propTypes.default.number.isRequired
+  value: _propTypes.default.node
 } : void 0;
 const SliderMark = exports.SliderMark = (0, _zeroStyled.styled)('span', {
   name: 'MuiSlider',
@@ -907,7 +907,7 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes /* remove-proptypes */
       className: _propTypes.default.string,
       open: _propTypes.default.bool,
       style: _propTypes.default.object,
-      value: _propTypes.default.number,
+      value: _propTypes.default.node,
       valueLabelDisplay: _propTypes.default.oneOf(['auto', 'off', 'on'])
     })])
   }),
@@ -1024,7 +1024,7 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes /* remove-proptypes */
       className: _propTypes.default.string,
       open: _propTypes.default.bool,
       style: _propTypes.default.object,
-      value: _propTypes.default.number,
+      value: _propTypes.default.node,
       valueLabelDisplay: _propTypes.default.oneOf(['auto', 'off', 'on'])
     })])
   }),

package/node/Stack/Stack.js

@@ -9,14 +9,14 @@ exports.default = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _system = require("@mui/system");
 var _styled = _interopRequireDefault(require("../styles/styled"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
 const Stack = (0, _system.createStack)({
   createStyledComponent: (0, _styled.default)('div', {
     name: 'MuiStack',
     slot: 'Root',
     overridesResolver: (props, styles) => styles.root
   }),
-  useThemeProps: inProps => (0, _useThemeProps.default)({
+  useThemeProps: inProps => (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiStack'
   })

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v6.1.5
+ * @mui/material v6.1.7
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/node/styles/ThemeProviderWithVars.js

@@ -79,7 +79,7 @@ const getInitColorSchemeScript = params => {
  * @deprecated
  * The `CssVarsProvider` component has been deprecated and ported into `ThemeProvider`.
  *
- * You should use `ThemeProvider` and `createTheme` instead:
+ * You should use `ThemeProvider` and `createTheme()` instead:
  *
  * ```diff
  * - import { CssVarsProvider, extendTheme } from '@mui/material/styles';

package/node/styles/stringifyTheme.js

@@ -12,7 +12,7 @@ function isSerializable(val) {
 }
 
 /**
- * `baseTheme` usually comes from `createTheme` or `extendTheme`.
+ * `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:

package/node/useMediaQuery/index.js

@@ -4,10 +4,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function () {
-    return _useMediaQuery.default;
-  }
+exports.default = void 0;
+var _useMediaQuery = require("@mui/system/useMediaQuery");
+var _identifier = _interopRequireDefault(require("../styles/identifier"));
+const useMediaQuery = (0, _useMediaQuery.unstable_createUseMediaQuery)({
+  themeId: _identifier.default
 });
-var _useMediaQuery = _interopRequireDefault(require("@mui/system/useMediaQuery"));
+var _default = exports.default = useMediaQuery;

package/node/version/index.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.version = exports.prerelease = exports.patch = exports.minor = exports.major = exports.default = void 0;
-const version = exports.version = "6.1.5";
+const version = exports.version = "6.1.7";
 const major = exports.major = Number("6");
 const minor = exports.minor = Number("1");
-const patch = exports.patch = Number("5");
+const patch = exports.patch = Number("7");
 const prerelease = exports.prerelease = undefined;
 var _default = exports.default = version;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "6.1.5",
+  "version": "6.1.7",
   "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,7 +27,7 @@
     "url": "https://opencollective.com/mui-org"
   },
   "dependencies": {
-    "@babel/runtime": "^7.25.7",
+    "@babel/runtime": "^7.26.0",
     "@popperjs/core": "^2.11.8",
     "@types/react-transition-group": "^4.4.11",
     "clsx": "^2.1.1",
@@ -35,10 +35,10 @@
     "prop-types": "^15.8.1",
     "react-is": "^18.3.1",
     "react-transition-group": "^4.4.5",
-    "@mui/core-downloads-tracker": "^6.1.5",
-    "@mui/system": "^6.1.5",
-    "@mui/types": "^7.2.18",
-    "@mui/utils": "^6.1.5"
+    "@mui/core-downloads-tracker": "^6.1.7",
+    "@mui/system": "^6.1.7",
+    "@mui/types": "^7.2.19",
+    "@mui/utils": "^6.1.7"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",
@@ -46,7 +46,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": "^6.1.5"
+    "@mui/material-pigment-css": "^6.1.7"
   },
   "peerDependenciesMeta": {
     "@types/react": {

package/styles/ThemeProviderWithVars.d.ts

@@ -8,7 +8,7 @@ declare const getInitColorSchemeScript: typeof deprecatedGetInitColorSchemeScrip
  * @deprecated
  * The `CssVarsProvider` component has been deprecated and ported into `ThemeProvider`.
  *
- * You should use `ThemeProvider` and `createTheme` instead:
+ * You should use `ThemeProvider` and `createTheme()` instead:
  *
  * ```diff
  * - import { CssVarsProvider, extendTheme } from '@mui/material/styles';

package/styles/ThemeProviderWithVars.js

@@ -69,7 +69,7 @@ const getInitColorSchemeScript = params => {
  * @deprecated
  * The `CssVarsProvider` component has been deprecated and ported into `ThemeProvider`.
  *
- * You should use `ThemeProvider` and `createTheme` instead:
+ * You should use `ThemeProvider` and `createTheme()` instead:
  *
  * ```diff
  * - import { CssVarsProvider, extendTheme } from '@mui/material/styles';

package/styles/stringifyTheme.d.ts

@@ -1,5 +1,5 @@
 /**
- * `baseTheme` usually comes from `createTheme` or `extendTheme`.
+ * `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:

package/styles/stringifyTheme.js

@@ -5,7 +5,7 @@ function isSerializable(val) {
 }
 
 /**
- * `baseTheme` usually comes from `createTheme` or `extendTheme`.
+ * `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:

package/useMediaQuery/index.d.ts

@@ -1,2 +1,11 @@
-export { default } from '@mui/system/useMediaQuery';
+import { UseMediaQueryOptions } from '@mui/system/useMediaQuery';
+import { Theme } from '../styles/createTheme';
+
 export * from '@mui/system/useMediaQuery';
+
+declare function useMediaQuery(
+  queryInput: string | ((theme: Theme) => string),
+  options?: UseMediaQueryOptions,
+): boolean;
+
+export default useMediaQuery;

package/useMediaQuery/index.js

@@ -1 +1,6 @@
-export { default } from '@mui/system/useMediaQuery';
+import { unstable_createUseMediaQuery } from '@mui/system/useMediaQuery';
+import THEME_ID from "../styles/identifier.js";
+const useMediaQuery = unstable_createUseMediaQuery({
+  themeId: THEME_ID
+});
+export default useMediaQuery;

package/version/index.js

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