@mui/material 9.0.0-beta.0 → 9.0.0-beta.1

package/Chip/Chip.js

@@ -20,6 +20,7 @@ var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _createSimplePaletteValueFilter = _interopRequireDefault(require("../utils/createSimplePaletteValueFilter"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
+var _rootShouldForwardProp = _interopRequireDefault(require("../styles/rootShouldForwardProp"));
 var _chipClasses = _interopRequireWildcard(require("./chipClasses"));
 var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -45,6 +46,7 @@ const useUtilityClasses = ownerState => {
 const ChipRoot = (0, _zeroStyled.styled)('div', {
   name: 'MuiChip',
   slot: 'Root',
+  shouldForwardProp: prop => (0, _rootShouldForwardProp.default)(prop) && prop !== 'focusableWhenDisabled' && prop !== 'skipFocusWhenDisabled',
   overridesResolver: (props, styles) => {
     const {
       ownerState
@@ -377,6 +379,10 @@ const Chip = /*#__PURE__*/React.forwardRef(function Chip(inProps, ref) {
     slotProps = {},
     ...other
   } = props;
+  const {
+    nativeButton,
+    ...buttonBaseProps
+  } = other;
   const chipRef = React.useRef(null);
   const handleRef = (0, _useForkRef.default)(chipRef, ref);
   const handleDeleteIconClick = event => {
@@ -422,9 +428,13 @@ const Chip = /*#__PURE__*/React.forwardRef(function Chip(inProps, ref) {
   const classes = useUtilityClasses(ownerState);
   const moreProps = component === _ButtonBase.default ? {
     component: ComponentProp || 'div',
+    internalNativeButton: false,
     focusVisibleClassName: classes.focusVisible,
     ...(onDelete && {
       disableRipple: true
+    }),
+    ...(nativeButton !== undefined && {
+      nativeButton
     })
   } : {};
   let deleteIcon = null;
@@ -462,7 +472,7 @@ const Chip = /*#__PURE__*/React.forwardRef(function Chip(inProps, ref) {
     elementType: ChipRoot,
     externalForwardedProps: {
       ...externalForwardedProps,
-      ...other
+      ...buttonBaseProps
     },
     ownerState,
     // The `component` prop is preserved because `Chip` relies on it for internal logic. If `shouldForwardComponentProp` were `false`, `useSlot` would remove the `component` prop, potentially breaking the component's behavior.
@@ -565,6 +575,13 @@ process.env.NODE_ENV !== "production" ? Chip.propTypes /* remove-proptypes */ =
    * The content of the component.
    */
   label: _propTypes.default.node,
+  /**
+   * If `true`, the component is expected to resolve to a native `<button>` element.
+   * When omitted, custom components inherit the default button semantics of the current wrapper.
+   * Set to `true` when a custom component resolves to a native `<button>`, or `false`
+   * when it resolves to a non-button host.
+   */
+  nativeButton: _propTypes.default.bool,
   /**
    * @ignore
    */

package/Chip/Chip.mjs

@@ -13,6 +13,7 @@ import { styled } from "../zero-styled/index.mjs";
 import memoTheme from "../utils/memoTheme.mjs";
 import createSimplePaletteValueFilter from "../utils/createSimplePaletteValueFilter.mjs";
 import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
+import rootShouldForwardProp from "../styles/rootShouldForwardProp.mjs";
 import chipClasses, { getChipUtilityClass } from "./chipClasses.mjs";
 import useSlot from "../utils/useSlot.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -38,6 +39,7 @@ const useUtilityClasses = ownerState => {
 const ChipRoot = styled('div', {
   name: 'MuiChip',
   slot: 'Root',
+  shouldForwardProp: prop => rootShouldForwardProp(prop) && prop !== 'focusableWhenDisabled' && prop !== 'skipFocusWhenDisabled',
   overridesResolver: (props, styles) => {
     const {
       ownerState
@@ -370,6 +372,10 @@ const Chip = /*#__PURE__*/React.forwardRef(function Chip(inProps, ref) {
     slotProps = {},
     ...other
   } = props;
+  const {
+    nativeButton,
+    ...buttonBaseProps
+  } = other;
   const chipRef = React.useRef(null);
   const handleRef = useForkRef(chipRef, ref);
   const handleDeleteIconClick = event => {
@@ -415,9 +421,13 @@ const Chip = /*#__PURE__*/React.forwardRef(function Chip(inProps, ref) {
   const classes = useUtilityClasses(ownerState);
   const moreProps = component === ButtonBase ? {
     component: ComponentProp || 'div',
+    internalNativeButton: false,
     focusVisibleClassName: classes.focusVisible,
     ...(onDelete && {
       disableRipple: true
+    }),
+    ...(nativeButton !== undefined && {
+      nativeButton
     })
   } : {};
   let deleteIcon = null;
@@ -455,7 +465,7 @@ const Chip = /*#__PURE__*/React.forwardRef(function Chip(inProps, ref) {
     elementType: ChipRoot,
     externalForwardedProps: {
       ...externalForwardedProps,
-      ...other
+      ...buttonBaseProps
     },
     ownerState,
     // The `component` prop is preserved because `Chip` relies on it for internal logic. If `shouldForwardComponentProp` were `false`, `useSlot` would remove the `component` prop, potentially breaking the component's behavior.
@@ -558,6 +568,13 @@ process.env.NODE_ENV !== "production" ? Chip.propTypes /* remove-proptypes */ =
    * The content of the component.
    */
   label: PropTypes.node,
+  /**
+   * If `true`, the component is expected to resolve to a native `<button>` element.
+   * When omitted, custom components inherit the default button semantics of the current wrapper.
+   * Set to `true` when a custom component resolves to a native `<button>`, or `false`
+   * when it resolves to a non-button host.
+   */
+  nativeButton: PropTypes.bool,
   /**
    * @ignore
    */

package/Dialog/Dialog.d.mts

@@ -58,7 +58,7 @@ export type DialogSlotsAndSlotProps = CreateSlotsAndSlotProps<DialogSlots, {
    * Props forwarded to the transition slot.
    * By default, the available props are based on the [Fade](https://mui.com/material-ui/api/fade/#props) component.
    */
-  transition: SlotComponentProps<React.ElementType, TransitionProps & DialogTransitionSlotPropsOverrides, DialogOwnerState>;
+  transition: SlotComponentProps<React.ElementType<TransitionProps>, TransitionProps & DialogTransitionSlotPropsOverrides, DialogOwnerState>;
   /**
    * Props forwarded to the paper slot.
    * By default, the available props are based on the [Paper](https://mui.com/material-ui/api/paper/#props) component.
@@ -118,6 +118,13 @@ export interface DialogProps extends Omit<StandardProps<ModalProps, 'children'>,
    * If `true`, the component is shown.
    */
   open: ModalProps['open'];
+  /**
+   * The ARIA role for the dialog element.
+   * The main dialog role is `dialog`, but `alertdialog` can be used if the content of the dialog requires immediate attention.
+   * See https://www.w3.org/TR/wai-aria-1.2/#dialog and https://www.w3.org/TR/wai-aria-1.2/#alertdialog for more details.
+   * @default 'dialog'
+   */
+  role?: 'dialog' | 'alertdialog' | undefined;
   /**
    * The component used to render the body of the dialog.
    * @default Paper

package/Dialog/Dialog.d.ts

@@ -58,7 +58,7 @@ export type DialogSlotsAndSlotProps = CreateSlotsAndSlotProps<DialogSlots, {
    * Props forwarded to the transition slot.
    * By default, the available props are based on the [Fade](https://mui.com/material-ui/api/fade/#props) component.
    */
-  transition: SlotComponentProps<React.ElementType, TransitionProps & DialogTransitionSlotPropsOverrides, DialogOwnerState>;
+  transition: SlotComponentProps<React.ElementType<TransitionProps>, TransitionProps & DialogTransitionSlotPropsOverrides, DialogOwnerState>;
   /**
    * Props forwarded to the paper slot.
    * By default, the available props are based on the [Paper](https://mui.com/material-ui/api/paper/#props) component.
@@ -118,6 +118,13 @@ export interface DialogProps extends Omit<StandardProps<ModalProps, 'children'>,
    * If `true`, the component is shown.
    */
   open: ModalProps['open'];
+  /**
+   * The ARIA role for the dialog element.
+   * The main dialog role is `dialog`, but `alertdialog` can be used if the content of the dialog requires immediate attention.
+   * See https://www.w3.org/TR/wai-aria-1.2/#dialog and https://www.w3.org/TR/wai-aria-1.2/#alertdialog for more details.
+   * @default 'dialog'
+   */
+  role?: 'dialog' | 'alertdialog' | undefined;
   /**
    * The component used to render the body of the dialog.
    * @default Paper

package/Dialog/Dialog.js

@@ -233,6 +233,7 @@ const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(inProps, ref) {
     onClose,
     open,
     PaperComponent = _Paper.default,
+    role = 'dialog',
     scroll = 'paper',
     slots = {},
     slotProps = {},
@@ -340,7 +341,7 @@ const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(inProps, ref) {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PaperSlot, {
           as: PaperComponent,
           elevation: 24,
-          role: "dialog",
+          role: role,
           "aria-describedby": ariaDescribedby,
           "aria-labelledby": ariaLabelledby,
           "aria-modal": ariaModal,
@@ -424,6 +425,13 @@ process.env.NODE_ENV !== "production" ? Dialog.propTypes /* remove-proptypes */
    * @default Paper
    */
   PaperComponent: _propTypes.default.elementType,
+  /**
+   * The ARIA role for the dialog element.
+   * The main dialog role is `dialog`, but `alertdialog` can be used if the content of the dialog requires immediate attention.
+   * See https://www.w3.org/TR/wai-aria-1.2/#dialog and https://www.w3.org/TR/wai-aria-1.2/#alertdialog for more details.
+   * @default 'dialog'
+   */
+  role: _propTypes.default.oneOf(['alertdialog', 'dialog']),
   /**
    * Determine the container for scrolling the dialog.
    * @default 'paper'

package/Dialog/Dialog.mjs

@@ -226,6 +226,7 @@ const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(inProps, ref) {
     onClose,
     open,
     PaperComponent = Paper,
+    role = 'dialog',
     scroll = 'paper',
     slots = {},
     slotProps = {},
@@ -333,7 +334,7 @@ const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(inProps, ref) {
         children: /*#__PURE__*/_jsx(PaperSlot, {
           as: PaperComponent,
           elevation: 24,
-          role: "dialog",
+          role: role,
           "aria-describedby": ariaDescribedby,
           "aria-labelledby": ariaLabelledby,
           "aria-modal": ariaModal,
@@ -417,6 +418,13 @@ process.env.NODE_ENV !== "production" ? Dialog.propTypes /* remove-proptypes */
    * @default Paper
    */
   PaperComponent: PropTypes.elementType,
+  /**
+   * The ARIA role for the dialog element.
+   * The main dialog role is `dialog`, but `alertdialog` can be used if the content of the dialog requires immediate attention.
+   * See https://www.w3.org/TR/wai-aria-1.2/#dialog and https://www.w3.org/TR/wai-aria-1.2/#alertdialog for more details.
+   * @default 'dialog'
+   */
+  role: PropTypes.oneOf(['alertdialog', 'dialog']),
   /**
    * Determine the container for scrolling the dialog.
    * @default 'paper'

package/Divider/Divider.js

@@ -236,14 +236,6 @@ const Divider = /*#__PURE__*/React.forwardRef(function Divider(inProps, ref) {
     }) : null
   });
 });
-
-/**
- * The following flag is used to ensure that this component isn't tabbable i.e.
- * does not get highlight/focus inside of MUI List.
- */
-if (Divider) {
-  Divider.muiSkipListHighlight = true;
-}
 process.env.NODE_ENV !== "production" ? Divider.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │

package/Divider/Divider.mjs

@@ -229,14 +229,6 @@ const Divider = /*#__PURE__*/React.forwardRef(function Divider(inProps, ref) {
     }) : null
   });
 });
-
-/**
- * The following flag is used to ensure that this component isn't tabbable i.e.
- * does not get highlight/focus inside of MUI List.
- */
-if (Divider) {
-  Divider.muiSkipListHighlight = true;
-}
 process.env.NODE_ENV !== "production" ? Divider.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │

package/Drawer/Drawer.d.mts

@@ -66,7 +66,7 @@ export type DrawerSlotsAndSlotProps = CreateSlotsAndSlotProps<DrawerSlots, {
    * Props forwarded to the transition slot.
    * By default, the available props are based on the [Slide](https://mui.com/material-ui/api/slide/#props) component.
    */
-  transition: SlotProps<React.ElementType, TransitionProps & DrawerTransitionSlotPropsOverrides, DrawerOwnerState>;
+  transition: SlotProps<React.ElementType<TransitionProps>, TransitionProps & DrawerTransitionSlotPropsOverrides, DrawerOwnerState>;
 }>;
 export interface DrawerProps extends StandardProps<ModalProps, 'open' | 'children' | 'slots' | 'slotProps'>, DrawerSlotsAndSlotProps {
   /**

package/Drawer/Drawer.d.ts

@@ -66,7 +66,7 @@ export type DrawerSlotsAndSlotProps = CreateSlotsAndSlotProps<DrawerSlots, {
    * Props forwarded to the transition slot.
    * By default, the available props are based on the [Slide](https://mui.com/material-ui/api/slide/#props) component.
    */
-  transition: SlotProps<React.ElementType, TransitionProps & DrawerTransitionSlotPropsOverrides, DrawerOwnerState>;
+  transition: SlotProps<React.ElementType<TransitionProps>, TransitionProps & DrawerTransitionSlotPropsOverrides, DrawerOwnerState>;
 }>;
 export interface DrawerProps extends StandardProps<ModalProps, 'open' | 'children' | 'slots' | 'slotProps'>, DrawerSlotsAndSlotProps {
   /**

package/Fab/Fab.js

@@ -197,6 +197,7 @@ const Fab = /*#__PURE__*/React.forwardRef(function Fab(inProps, ref) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(FabRoot, {
     className: (0, _clsx.default)(classes.root, className),
     component: component,
+    internalNativeButton: true,
     disabled: disabled,
     focusRipple: !disableFocusRipple,
     focusVisibleClassName: (0, _clsx.default)(classes.focusVisible, focusVisibleClassName),

package/Fab/Fab.mjs

@@ -190,6 +190,7 @@ const Fab = /*#__PURE__*/React.forwardRef(function Fab(inProps, ref) {
   return /*#__PURE__*/_jsx(FabRoot, {
     className: clsx(classes.root, className),
     component: component,
+    internalNativeButton: true,
     disabled: disabled,
     focusRipple: !disableFocusRipple,
     focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),

package/FilledInput/FilledInput.js

@@ -115,7 +115,7 @@ const FilledInputRoot = (0, _zeroStyled.styled)(_InputBase2.InputBaseRoot, {
           borderBottom: `1px solid ${theme.vars ? theme.alpha(theme.vars.palette.common.onBackground, theme.vars.opacity.inputUnderline) : bottomLineColor}`,
           left: 0,
           bottom: 0,
-          content: '"\\00a0"',
+          content: '""',
           position: 'absolute',
           right: 0,
           transition: theme.transitions.create('border-bottom-color', {

package/FilledInput/FilledInput.mjs

@@ -108,7 +108,7 @@ const FilledInputRoot = styled(InputBaseRoot, {
           borderBottom: `1px solid ${theme.vars ? theme.alpha(theme.vars.palette.common.onBackground, theme.vars.opacity.inputUnderline) : bottomLineColor}`,
           left: 0,
           bottom: 0,
-          content: '"\\00a0"',
+          content: '""',
           position: 'absolute',
           right: 0,
           transition: theme.transitions.create('border-bottom-color', {

package/Grid/Grid.d.mts

@@ -2,7 +2,7 @@ import { SxProps } from '@mui/system';
 import { OverridableComponent, OverrideProps } from '@mui/types';
 import { Theme, Breakpoint } from "../styles/index.mjs";
 type ResponsiveStyleValue<T> = T | Array<T | null> | { [key in Breakpoint]?: T | null };
-export type GridDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
+export type GridDirection = 'row' | 'row-reverse';
 export type GridSpacing = number | string;
 export type GridWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
 export type GridSize = 'auto' | 'grow' | number | false;
@@ -29,8 +29,13 @@ export interface GridBaseProps {
    */
   container?: boolean | undefined;
   /**
-   * Defines the `flex-direction` style property.
-   * It is applied for all screen sizes.
+   * Defines the `flex-direction` style property for the container.
+   *
+   * ⚠️ Only `row` and `row-reverse` are supported. `column` and `column-reverse` are not supported,
+   * because the Grid component is designed to subdivide layouts into **columns**, not rows.
+   *
+   * For vertical layouts, use `Stack` instead.
+   *
    * @default 'row'
    */
   direction?: ResponsiveStyleValue<GridDirection> | undefined;

package/Grid/Grid.d.ts

@@ -2,7 +2,7 @@ import { SxProps } from '@mui/system';
 import { OverridableComponent, OverrideProps } from '@mui/types';
 import { Theme, Breakpoint } from "../styles/index.js";
 type ResponsiveStyleValue<T> = T | Array<T | null> | { [key in Breakpoint]?: T | null };
-export type GridDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
+export type GridDirection = 'row' | 'row-reverse';
 export type GridSpacing = number | string;
 export type GridWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
 export type GridSize = 'auto' | 'grow' | number | false;
@@ -29,8 +29,13 @@ export interface GridBaseProps {
    */
   container?: boolean | undefined;
   /**
-   * Defines the `flex-direction` style property.
-   * It is applied for all screen sizes.
+   * Defines the `flex-direction` style property for the container.
+   *
+   * ⚠️ Only `row` and `row-reverse` are supported. `column` and `column-reverse` are not supported,
+   * because the Grid component is designed to subdivide layouts into **columns**, not rows.
+   *
+   * For vertical layouts, use `Stack` instead.
+   *
    * @default 'row'
    */
   direction?: ResponsiveStyleValue<GridDirection> | undefined;

package/Grid/Grid.js

@@ -66,11 +66,16 @@ process.env.NODE_ENV !== "production" ? Grid.propTypes /* remove-proptypes */ =
    */
   container: _propTypes.default.bool,
   /**
-   * Defines the `flex-direction` style property.
-   * It is applied for all screen sizes.
+   * Defines the `flex-direction` style property for the container.
+   *
+   * ⚠️ Only `row` and `row-reverse` are supported. `column` and `column-reverse` are not supported,
+   * because the Grid component is designed to subdivide layouts into **columns**, not rows.
+   *
+   * For vertical layouts, use `Stack` instead.
+   *
    * @default 'row'
    */
-  direction: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), _propTypes.default.arrayOf(_propTypes.default.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), _propTypes.default.object]),
+  direction: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.oneOf(['row-reverse', 'row']), _propTypes.default.arrayOf(_propTypes.default.oneOf(['row-reverse', 'row'])), _propTypes.default.object]),
   /**
    * Defines the offset value for the type `item` components.
    */

package/Grid/Grid.mjs

@@ -60,11 +60,16 @@ process.env.NODE_ENV !== "production" ? Grid.propTypes /* remove-proptypes */ =
    */
   container: PropTypes.bool,
   /**
-   * Defines the `flex-direction` style property.
-   * It is applied for all screen sizes.
+   * Defines the `flex-direction` style property for the container.
+   *
+   * ⚠️ Only `row` and `row-reverse` are supported. `column` and `column-reverse` are not supported,
+   * because the Grid component is designed to subdivide layouts into **columns**, not rows.
+   *
+   * For vertical layouts, use `Stack` instead.
+   *
    * @default 'row'
    */
-  direction: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), PropTypes.object]),
+  direction: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['row-reverse', 'row']), PropTypes.arrayOf(PropTypes.oneOf(['row-reverse', 'row'])), PropTypes.object]),
   /**
    * Defines the offset value for the type `item` components.
    */

package/Grid/gridClasses.js

@@ -12,7 +12,7 @@ function getGridUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiGrid', slot);
 }
 const SPACINGS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
-const DIRECTIONS = ['column-reverse', 'column', 'row-reverse', 'row'];
+const DIRECTIONS = ['row-reverse', 'row'];
 const WRAPS = ['nowrap', 'wrap-reverse', 'wrap'];
 const GRID_SIZES = ['auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
 const gridClasses = (0, _generateUtilityClasses.default)('MuiGrid', ['root', 'container',

package/Grid/gridClasses.mjs

@@ -4,7 +4,7 @@ export function getGridUtilityClass(slot) {
   return generateUtilityClass('MuiGrid', slot);
 }
 const SPACINGS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
-const DIRECTIONS = ['column-reverse', 'column', 'row-reverse', 'row'];
+const DIRECTIONS = ['row-reverse', 'row'];
 const WRAPS = ['nowrap', 'wrap-reverse', 'wrap'];
 const GRID_SIZES = ['auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
 const gridClasses = generateUtilityClasses('MuiGrid', ['root', 'container',

package/IconButton/IconButton.js

@@ -219,6 +219,7 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, re
     id: loading ? loadingId : idProp,
     className: (0, _clsx.default)(classes.root, className),
     centerRipple: true,
+    internalNativeButton: true,
     focusRipple: !disableFocusRipple,
     disabled: disabled || loading,
     ref: ref,

package/IconButton/IconButton.mjs

@@ -212,6 +212,7 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, re
     id: loading ? loadingId : idProp,
     className: clsx(classes.root, className),
     centerRipple: true,
+    internalNativeButton: true,
     focusRipple: !disableFocusRipple,
     disabled: disabled || loading,
     ref: ref,

package/Input/Input.js

@@ -99,7 +99,7 @@ const InputRoot = (0, _zeroStyled.styled)(_InputBase2.InputBaseRoot, {
           borderBottom: `1px solid ${bottomLineColor}`,
           left: 0,
           bottom: 0,
-          content: '"\\00a0"',
+          content: '""',
           position: 'absolute',
           right: 0,
           transition: theme.transitions.create('border-bottom-color', {

package/Input/Input.mjs

@@ -92,7 +92,7 @@ const InputRoot = styled(InputBaseRoot, {
           borderBottom: `1px solid ${bottomLineColor}`,
           left: 0,
           bottom: 0,
-          content: '"\\00a0"',
+          content: '""',
           position: 'absolute',
           right: 0,
           transition: theme.transitions.create('border-bottom-color', {

package/InputAdornment/inputAdornmentClasses.d.mts

@@ -13,9 +13,9 @@ export interface InputAdornmentClasses {
   positionEnd: string;
   /** Styles applied to the root element if `disablePointerEvents={true}`. */
   disablePointerEvents: string;
-  /** Styles applied if the adornment is used inside <FormControl hiddenLabel />. */
+  /** Styles applied if the adornment is used inside `<FormControl hiddenLabel />`. */
   hiddenLabel: string;
-  /** Styles applied if the adornment is used inside <FormControl size="small" />. */
+  /** Styles applied if the adornment is used inside `<FormControl size="small" />`. */
   sizeSmall: string;
 }
 export type InputAdornmentClassKey = keyof InputAdornmentClasses;

package/InputAdornment/inputAdornmentClasses.d.ts

@@ -13,9 +13,9 @@ export interface InputAdornmentClasses {
   positionEnd: string;
   /** Styles applied to the root element if `disablePointerEvents={true}`. */
   disablePointerEvents: string;
-  /** Styles applied if the adornment is used inside <FormControl hiddenLabel />. */
+  /** Styles applied if the adornment is used inside `<FormControl hiddenLabel />`. */
   hiddenLabel: string;
-  /** Styles applied if the adornment is used inside <FormControl size="small" />. */
+  /** Styles applied if the adornment is used inside `<FormControl size="small" />`. */
   sizeSmall: string;
 }
 export type InputAdornmentClassKey = keyof InputAdornmentClasses;

package/ListItemButton/ListItemButton.js

@@ -181,6 +181,7 @@ const ListItemButton = /*#__PURE__*/React.forwardRef(function ListItemButton(inP
       // `ButtonBase` processes `href` or `to` if `component` is set to 'button'
       ,
       component: (other.href || other.to) && component === 'div' ? 'button' : component,
+      internalNativeButton: false,
       focusVisibleClassName: (0, _clsx.default)(classes.focusVisible, focusVisibleClassName),
       ownerState: ownerState,
       className: (0, _clsx.default)(classes.root, className),

package/ListItemButton/ListItemButton.mjs

@@ -173,6 +173,7 @@ const ListItemButton = /*#__PURE__*/React.forwardRef(function ListItemButton(inP
       // `ButtonBase` processes `href` or `to` if `component` is set to 'button'
       ,
       component: (other.href || other.to) && component === 'div' ? 'button' : component,
+      internalNativeButton: false,
       focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
       ownerState: ownerState,
       className: clsx(classes.root, className),

package/ListItemIcon/ListItemIcon.js

@@ -39,7 +39,7 @@ const ListItemIconRoot = (0, _zeroStyled.styled)('div', {
 })((0, _memoTheme.default)(({
   theme
 }) => ({
-  minWidth: 56,
+  minWidth: theme.spacing(4.5),
   color: (theme.vars || theme).palette.action.active,
   flexShrink: 0,
   display: 'inline-flex',

package/ListItemIcon/ListItemIcon.mjs

@@ -32,7 +32,7 @@ const ListItemIconRoot = styled('div', {
 })(memoTheme(({
   theme
 }) => ({
-  minWidth: 56,
+  minWidth: theme.spacing(4.5),
   color: (theme.vars || theme).palette.action.active,
   flexShrink: 0,
   display: 'inline-flex',

package/ListSubheader/ListSubheader.js

@@ -121,9 +121,6 @@ const ListSubheader = /*#__PURE__*/React.forwardRef(function ListSubheader(inPro
     ...other
   });
 });
-if (ListSubheader) {
-  ListSubheader.muiSkipListHighlight = true;
-}
 process.env.NODE_ENV !== "production" ? ListSubheader.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │

package/ListSubheader/ListSubheader.mjs

@@ -114,9 +114,6 @@ const ListSubheader = /*#__PURE__*/React.forwardRef(function ListSubheader(inPro
     ...other
   });
 });
-if (ListSubheader) {
-  ListSubheader.muiSkipListHighlight = true;
-}
 process.env.NODE_ENV !== "production" ? ListSubheader.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │

package/Menu/Menu.d.mts

@@ -64,7 +64,7 @@ export type MenuSlotsAndSlotProps = CreateSlotsAndSlotProps<MenuSlots, {
    */
   transition: SlotComponentProps<
   // use SlotComponentProps because transition slot does not support `component` and `sx` prop
-  React.ElementType, TransitionProps & MenuTransitionSlotPropsOverrides, MenuOwnerState>;
+  React.ElementType<TransitionProps>, TransitionProps & MenuTransitionSlotPropsOverrides, MenuOwnerState>;
   /**
    * Props forwarded to the backdrop slot.
    * By default, the available props are based on the [Backdrop](https://mui.com/material-ui/api/backdrop/#props) component.

package/Menu/Menu.d.ts

@@ -64,7 +64,7 @@ export type MenuSlotsAndSlotProps = CreateSlotsAndSlotProps<MenuSlots, {
    */
   transition: SlotComponentProps<
   // use SlotComponentProps because transition slot does not support `component` and `sx` prop
-  React.ElementType, TransitionProps & MenuTransitionSlotPropsOverrides, MenuOwnerState>;
+  React.ElementType<TransitionProps>, TransitionProps & MenuTransitionSlotPropsOverrides, MenuOwnerState>;
   /**
    * Props forwarded to the backdrop slot.
    * By default, the available props are based on the [Backdrop](https://mui.com/material-ui/api/backdrop/#props) component.