@mui/material 7.3.1 → 7.3.3

package/TablePaginationActions/TablePaginationActions.js

@@ -145,7 +145,7 @@ process.env.NODE_ENV !== "production" ? TablePaginationActions.propTypes /* remo
   // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
   // └─────────────────────────────────────────────────────────────────────┘
   /**
-   * This prop is an alias for `slotProps.previousButton` and will be overriden by it if both are used.
+   * This prop is an alias for `slotProps.previousButton` and will be overridden by it if both are used.
    * @deprecated Use `slotProps.previousButton` instead.
    */
   backIconButtonProps: _propTypes.default.object,
@@ -180,7 +180,7 @@ process.env.NODE_ENV !== "production" ? TablePaginationActions.propTypes /* remo
    */
   getItemAriaLabel: _propTypes.default.func.isRequired,
   /**
-   * This prop is an alias for `slotProps.nextButton` and will be overriden by it if both are used.
+   * This prop is an alias for `slotProps.nextButton` and will be overridden by it if both are used.
    * @deprecated Use `slotProps.nextButton` instead.
    */
   nextIconButtonProps: _propTypes.default.object,

package/Tabs/Tabs.d.ts

@@ -61,44 +61,44 @@ export interface TabsSlots {
 export type TabsSlotsAndSlotProps = CreateSlotsAndSlotProps<TabsSlots, {
   /**
    * Props forwarded to the root slot.
-   * By default, the avaible props are based on the div element.
+   * By default, the available props are based on the div element.
    */
   root: SlotProps<'div', TabsRootSlotPropsOverrides, TabsOwnerState>;
   /**
    * Props forwarded to the scroller slot.
-   * By default, the avaible props are based on the div element.
+   * By default, the available props are based on the div element.
    */
   scroller: SlotProps<'div', TabsScrollerSlotPropsOverrides, TabsOwnerState>;
   /**
    * Props forwarded to the list slot.
-   * By default, the avaible props are based on the div element.
+   * By default, the available props are based on the div element.
    */
   list: SlotProps<'div', TabsListSlotPropsOverrides, TabsOwnerState>;
   /**
    * Props forwarded to the scrollbar slot.
-   * By default, the avaible props are based on the div element.
+   * By default, the available props are based on the div element.
    */
   scrollbar: SlotProps<'div', {
     onChange?: (scrollbarWidth: undefined | number) => void;
   } & TabsScrollbarSlotPropsOverrides, TabsOwnerState>;
   /**
    * Props forwarded to the indicator slot.
-   * By default, the avaible props are based on the span element.
+   * By default, the available props are based on the span element.
    */
   indicator: SlotProps<'span', TabsIndicatorSlotPropsOverrides, TabsOwnerState>;
   /**
    * Props forwarded to the scrollButton slot.
-   * By default, the avaible props are based on the [TabScrollButton](https://mui.com/material-ui/api/tab-scroll-button/#props) component.
+   * By default, the available props are based on the [TabScrollButton](https://mui.com/material-ui/api/tab-scroll-button/#props) component.
    */
   scrollButtons: SlotProps<typeof TabScrollButton, TabsScrollButtonsSlotPropsOverrides, TabsOwnerState>;
   /**
    * Props forwarded to the startScrollButtonIcon slot.
-   * By default, the avaible props are based on the [SvgIcon](https://mui.com/material-ui/api/svg-icon/#props) component.
+   * By default, the available props are based on the [SvgIcon](https://mui.com/material-ui/api/svg-icon/#props) component.
    */
   startScrollButtonIcon: SlotProps<typeof SvgIcon, TabsStartScrollButtonIconSlotPropsOverrides, TabsOwnerState>;
   /**
    * Props forwarded to the endScrollButtonIcon slot.
-   * By default, the avaible props are based on the [SvgIcon](https://mui.com/material-ui/api/svg-icon/#props) component.
+   * By default, the available props are based on the [SvgIcon](https://mui.com/material-ui/api/svg-icon/#props) component.
    */
   endScrollButtonIcon: SlotProps<typeof SvgIcon, TabsEndScrollButtonIconSlotPropsOverrides, TabsOwnerState>;
 }> & {

package/Tabs/Tabs.js

@@ -645,6 +645,11 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     }
     return undefined;
   }, [scrollable, scrollButtons, updateScrollObserver, childrenProp?.length]);
+  React.useEffect(() => {
+    if (scrollable && scrollButtons === 'auto' && (displayEndScroll || displayStartScroll)) {
+      scrollSelectedIntoView(true);
+    }
+  }, [displayEndScroll, displayStartScroll, scrollable, scrollButtons, scrollSelectedIntoView]);
   React.useEffect(() => {
     setMounted(true);
   }, []);

package/TextField/TextField.d.ts

@@ -50,32 +50,32 @@ export interface TextFieldSlots {
 export type TextFieldSlotsAndSlotProps<InputPropsType> = CreateSlotsAndSlotProps<TextFieldSlots, {
   /**
    * Props forwarded to the root slot.
-   * By default, the avaible props are based on the [FormControl](https://mui.com/material-ui/api/form-control/#props) component.
+   * 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>;
   /**
    * Props forwarded to the input slot.
-   * By default, the avaible props are based on the [Input](https://mui.com/material-ui/api/input/#props) component.
+   * 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>;
   /**
    * Props forwarded to the input label slot.
-   * By default, the avaible props are based on the [InputLabel](https://mui.com/material-ui/api/input-label/#props) component.
+   * 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>;
   /**
    * Props forwarded to the html input slot.
-   * By default, the avaible props are based on the html input element.
+   * By default, the available props are based on the html input element.
    */
   htmlInput: SlotProps<React.ElementType<InputBaseProps['inputProps']>, {}, TextFieldOwnerState>;
   /**
    * Props forwarded to the form helper text slot.
-   * By default, the avaible props are based on the [FormHelperText](https://mui.com/material-ui/api/form-helper-text/#props) component.
+   * 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>;
   /**
    * Props forwarded to the select slot.
-   * By default, the avaible props are based on the [Select](https://mui.com/material-ui/api/select/#props) component.
+   * 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>;
 }>;

package/TextField/TextField.js

@@ -449,7 +449,7 @@ process.env.NODE_ENV !== "production" ? TextField.propTypes /* remove-proptypes
   /**
    * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#input_types).
    */
-  type: _propTypes.default /* @typescript-to-proptypes-ignore */.string,
+  type: _propTypes.default.string,
   /**
    * The value of the `input` element, required for a controlled component.
    */

package/Tooltip/Tooltip.d.ts

@@ -35,22 +35,22 @@ export interface TooltipSlots {
 export type TooltipSlotsAndSlotProps = CreateSlotsAndSlotProps<TooltipSlots, {
   /**
    * Props forwarded to the popper slot.
-   * By default, the avaible props are based on the [Popper](https://mui.com/material-ui/api/popper/#props) component.
+   * By default, the available props are based on the [Popper](https://mui.com/material-ui/api/popper/#props) component.
    */
   popper: SlotProps<React.ElementType<PopperProps>, TooltipPopperSlotPropsOverrides, TooltipOwnerState>;
   /**
    * Props forwarded to the transition slot.
-   * By default, the avaible props are based on the [Grow](https://mui.com/material-ui/api/grow/#props) component.
+   * By default, the available props are based on the [Grow](https://mui.com/material-ui/api/grow/#props) component.
    */
   transition: SlotProps<React.ElementType, TransitionProps & TooltipTransitionSlotPropsOverrides, TooltipOwnerState>;
   /**
    * Props forwarded to the tooltip slot.
-   * By default, the avaible props are based on the div element.
+   * By default, the available props are based on the div element.
    */
   tooltip: SlotProps<'div', TooltipTooltipSlotPropsOverrides, TooltipOwnerState>;
   /**
    * Props forwarded to the tooltip slot.
-   * By default, the avaible props are based on the span element.
+   * By default, the available props are based on the span element.
    */
   arrow: SlotProps<'span', TooltipArrowSlotPropsOverrides, TooltipOwnerState>;
 }>;

package/esm/Accordion/Accordion.d.ts

@@ -36,17 +36,17 @@ export interface AccordionRegionSlotPropsOverrides {}
 export type AccordionSlotsAndSlotProps = CreateSlotsAndSlotProps<AccordionSlots, {
   /**
    * Props forwarded to the root slot.
-   * By default, the avaible props are based on the Paper element.
+   * By default, the available props are based on the Paper element.
    */
   root: SlotProps<React.ElementType<PaperProps>, AccordionRootSlotPropsOverrides, AccordionOwnerState>;
   /**
    * Props forwarded to the heading slot.
-   * By default, the avaible props are based on the h3 element.
+   * By default, the available props are based on the h3 element.
    */
   heading: SlotProps<'h3', AccordionHeadingSlotPropsOverrides, AccordionOwnerState>;
   /**
    * Props forwarded to the transition slot.
-   * By default, the avaible props are based on the [Collapse](https://mui.com/material-ui/api/collapse/#props) component.
+   * By default, the available props are based on the [Collapse](https://mui.com/material-ui/api/collapse/#props) component.
    */
   transition: SlotComponentProps<React.ElementType, TransitionProps & AccordionTransitionSlotPropsOverrides, AccordionOwnerState>;
   /**

package/esm/AccordionSummary/AccordionSummary.d.ts

@@ -28,17 +28,17 @@ export interface AccordionSummaryExpandIconWrapperSlotPropsOverrides {}
 export type AccordionSummarySlotsAndSlotProps = CreateSlotsAndSlotProps<AccordionSummarySlots, {
   /**
    * Props forwarded to the root slot.
-   * By default, the avaible props are based on the [ButtonBase](https://mui.com/material-ui/api/button-base/#props) component.
+   * By default, the available props are based on the [ButtonBase](https://mui.com/material-ui/api/button-base/#props) component.
    */
   root: SlotProps<React.ElementType<ButtonBaseProps>, AccordionSummaryRootSlotPropsOverrides, AccordionSummaryOwnerState>;
   /**
    * Props forwarded to the content slot.
-   * By default, the avaible props are based on a div element.
+   * By default, the available props are based on a div element.
    */
   content: SlotProps<'div', AccordionSummaryContentSlotPropsOverrides, AccordionSummaryOwnerState>;
   /**
    * Props forwarded to the expand icon wrapper slot.
-   * By default, the avaible props are based on a div element.
+   * By default, the available props are based on a div element.
    */
   expandIconWrapper: SlotProps<'div', AccordionSummaryExpandIconWrapperSlotPropsOverrides, AccordionSummaryOwnerState>;
 }>;

package/esm/Alert/Alert.d.ts

@@ -52,32 +52,32 @@ export interface AlertSlots {
 export type AlertSlotsAndSlotProps = CreateSlotsAndSlotProps<AlertSlots, {
   /**
    * Props forwarded to the root slot.
-   * By default, the avaible props are based on the [Paper](https://mui.com/material-ui/api/paper/#props) component.
+   * By default, the available props are based on the [Paper](https://mui.com/material-ui/api/paper/#props) component.
    */
   root: SlotProps<React.ElementType<PaperProps>, AlertRootSlotPropsOverrides, AlertOwnerState>;
   /**
    * Props forwarded to the icon slot.
-   * By default, the avaible props are based on a div element.
+   * By default, the available props are based on a div element.
    */
   icon: SlotProps<'div', AlertIconSlotPropsOverrides, AlertOwnerState>;
   /**
    * Props forwarded to the message slot.
-   * By default, the avaible props are based on a div element.
+   * By default, the available props are based on a div element.
    */
   message: SlotProps<'div', AlertMessageSlotPropsOverrides, AlertOwnerState>;
   /**
    * Props forwarded to the action slot.
-   * By default, the avaible props are based on a div element.
+   * By default, the available props are based on a div element.
    */
   action: SlotProps<'div', AlertActionSlotPropsOverrides, AlertOwnerState>;
   /**
    * Props forwarded to the closeButton slot.
-   * By default, the avaible props are based on the [IconButton](https://mui.com/material-ui/api/icon-button/#props) component.
+   * By default, the available props are based on the [IconButton](https://mui.com/material-ui/api/icon-button/#props) component.
    */
   closeButton: SlotProps<React.ElementType<IconButtonProps>, AlertCloseButtonSlotPropsOverrides, AlertOwnerState>;
   /**
    * Props forwarded to the closeIcon slot.
-   * By default, the avaible props are based on the [SvgIcon](https://mui.com/material-ui/api/svg-icon/#props) component.
+   * By default, the available props are based on the [SvgIcon](https://mui.com/material-ui/api/svg-icon/#props) component.
    */
   closeIcon: SlotProps<React.ElementType<SvgIconProps>, AlertCloseIconSlotPropsOverrides, AlertOwnerState>;
 }>;

package/esm/Avatar/Avatar.d.ts

@@ -30,17 +30,17 @@ export interface AvatarFallbackSlotPropsOverrides {}
 export type AvatarSlotsAndSlotProps = CreateSlotsAndSlotProps<AvatarSlots, {
   /**
    * Props forwarded to the root slot.
-   * By default, the avaible props are based on the div element.
+   * By default, the available props are based on the div element.
    */
   root: SlotProps<'div', AvatarRootSlotPropsOverrides, AvatarOwnProps>;
   /**
    * Props forwarded to the img slot.
-   * By default, the avaible props are based on the img element.
+   * By default, the available props are based on the img element.
    */
   img: SlotProps<'img', AvatarImgSlotPropsOverrides, AvatarOwnProps>;
   /**
    * Props forwarded to the fallback slot.
-   * By default, the avaible props are based on the [SvgIcon](https://mui.com/material-ui/api/svg-icon/#props) component.
+   * By default, the available props are based on the [SvgIcon](https://mui.com/material-ui/api/svg-icon/#props) component.
    */
   fallback: SlotProps<React.ElementType<SvgIconProps>, AvatarFallbackSlotPropsOverrides, AvatarOwnProps>;
 }>;

package/esm/Backdrop/Backdrop.d.ts

@@ -24,12 +24,12 @@ export interface BackdropTransitionSlotPropsOverrides {}
 export type BackdropSlotsAndSlotProps = CreateSlotsAndSlotProps<BackdropSlots, {
   /**
    * Props forwarded to the transition slot.
-   * By default, the avaible props are based on the div element.
+   * By default, the available props are based on the div element.
    */
   root: SlotProps<'div', BackdropComponentsPropsOverrides, BackdropOwnerState>;
   /**
    * Props forwarded to the transition slot.
-   * By default, the avaible props are based on the [Fade](https://mui.com/material-ui/api/fade/#props) component.
+   * By default, the available props are based on the [Fade](https://mui.com/material-ui/api/fade/#props) component.
    */
   transition: SlotComponentProps<React.ElementType, TransitionProps & BackdropTransitionSlotPropsOverrides, BackdropOwnerState>;
 }>;

package/esm/Badge/Badge.d.ts

@@ -24,12 +24,12 @@ export interface BadgeSlots {
 export type BadgeSlotsAndSlotProps = CreateSlotsAndSlotProps<BadgeSlots, {
   /**
    * Props forwarded to the root slot.
-   * By default, the avaible props are based on the span element.
+   * By default, the available props are based on the span element.
    */
   root: SlotProps<'span', BadgeRootSlotPropsOverrides, BadgeOwnerState>;
   /**
    * Props forwarded to the label slot.
-   * By default, the avaible props are based on the span element.
+   * By default, the available props are based on the span element.
    */
   badge: SlotProps<'span', BadgeBadgeSlotPropsOverrides, BadgeOwnerState>;
 }>;

package/esm/BottomNavigationAction/BottomNavigationAction.d.ts

@@ -20,12 +20,12 @@ export interface BottomNavigationActionSlots {
 export type BottomNavigationActionSlotsAndSlotProps = CreateSlotsAndSlotProps<BottomNavigationActionSlots, {
   /**
    * Props forwarded to the root slot.
-   * By default, the avaible props are based on the ButtonBase element.
+   * By default, the available props are based on the ButtonBase element.
    */
   root: SlotProps<React.ElementType<ButtonBaseProps>, {}, BottomNavigationActionOwnerState>;
   /**
    * Props forwarded to the label slot.
-   * By default, the avaible props are based on the span element.
+   * By default, the available props are based on the span element.
    */
   label: SlotProps<'span', {}, BottomNavigationActionOwnerState>;
 }>;

package/esm/CardActionArea/CardActionArea.d.ts

@@ -20,12 +20,12 @@ export interface CardActionAreaSlots {
 export type CardActionAreaSlotsAndSlotProps = CreateSlotsAndSlotProps<CardActionAreaSlots, {
   /**
    * Props forwarded to the root slot.
-   * By default, the avaible props are based on the span element.
+   * By default, the available props are based on the span element.
    */
   root: SlotProps<React.ElementType<ButtonBaseProps>, {}, CardActionAreaOwnerState>;
   /**
    * Props forwarded to the focusHighlight slot.
-   * By default, the avaible props are based on the span element.
+   * By default, the available props are based on the span element.
    */
   focusHighlight: SlotProps<'span', {}, CardActionAreaOwnerState>;
 }>;

package/esm/CardHeader/CardHeader.d.ts

@@ -48,32 +48,32 @@ export interface CardHeaderSlots {
 export type CardHeaderSlotsAndSlotProps = CreateSlotsAndSlotProps<CardHeaderSlots, {
   /**
    * Props forwarded to the root slot.
-   * By default, the avaible props are based on the div element.
+   * By default, the available props are based on the div element.
    */
   root: SlotProps<'div', CardHeaderRootSlotPropsOverrides, CardHeaderOwnerState>;
   /**
    * Props forwarded to the avatar slot.
-   * By default, the avaible props are based on the div element.
+   * By default, the available props are based on the div element.
    */
   avatar: SlotProps<'div', CardHeaderAvatarSlotPropsOverrides, CardHeaderOwnerState>;
   /**
    * Props forwarded to the action slot.
-   * By default, the avaible props are based on the div element.
+   * By default, the available props are based on the div element.
    */
   action: SlotProps<'div', CardHeaderActionSlotPropsOverrides, CardHeaderOwnerState>;
   /**
    * Props forwarded to the content slot.
-   * By default, the avaible props are based on the div element.
+   * By default, the available props are based on the div element.
    */
   content: SlotProps<'div', CardHeaderContentSlotPropsOverrides, CardHeaderOwnerState>;
   /**
    * Props forwarded to the title slot (as long as disableTypography is not `true`).
-   * By default, the avaible props are based on the [Typography](https://mui.com/material-ui/api/typography/#props) component.
+   * By default, the available props are based on the [Typography](https://mui.com/material-ui/api/typography/#props) component.
    */
   title: SlotProps<React.ElementType<TypographyProps>, CardHeaderTitleSlotPropsOverrides, CardHeaderOwnerState>;
   /**
    * Props forwarded to the subheader slot (as long as disableTypography is not `true`).
-   * By default, the avaible props are based on the [Typography](https://mui.com/material-ui/api/typography/#props) component.
+   * By default, the available props are based on the [Typography](https://mui.com/material-ui/api/typography/#props) component.
    */
   subheader: SlotProps<React.ElementType<TypographyProps>, CardHeaderSubheaderSlotPropsOverrides, CardHeaderOwnerState>;
 }>;

package/esm/Checkbox/Checkbox.d.ts

@@ -25,12 +25,12 @@ export interface CheckboxSlots {
 export type CheckboxSlotsAndSlotProps = CreateSlotsAndSlotProps<CheckboxSlots, {
   /**
    * Props forwarded to the root slot.
-   * By default, the avaible props are based on the div element.
+   * By default, the available props are based on the div element.
    */
   root: SlotProps<React.ElementType<SwitchBaseProps>, CheckboxRootSlotPropsOverrides, CheckboxOwnerState>;
   /**
    * Props forwarded to the input slot.
-   * By default, the avaible props are based on the input element.
+   * By default, the available props are based on the input element.
    */
   input: SlotProps<'input', CheckboxInputSlotPropsOverrides, CheckboxOwnerState>;
 }>;

package/esm/Chip/Chip.d.ts

@@ -20,12 +20,12 @@ export interface ChipSlots {
 export type ChipSlotsAndSlotProps = CreateSlotsAndSlotProps<ChipSlots, {
   /**
    * Props forwarded to the root slot.
-   * By default, the avaible props are based on the div element.
+   * By default, the available props are based on the div element.
    */
   root: SlotProps<'div', {}, ChipOwnerState>;
   /**
    * Props forwarded to the label slot.
-   * By default, the avaible props are based on the span element.
+   * By default, the available props are based on the span element.
    */
   label: SlotProps<'span', {}, ChipOwnerState>;
 }>;

package/esm/Chip/Chip.js

@@ -483,11 +483,11 @@ const Chip = /*#__PURE__*/React.forwardRef(function Chip(inProps, ref) {
       },
       onKeyDown: event => {
         handlers.onKeyDown?.(event);
-        handleKeyDown?.(event);
+        handleKeyDown(event);
       },
       onKeyUp: event => {
         handlers.onKeyUp?.(event);
-        handleKeyUp?.(event);
+        handleKeyUp(event);
       }
     })
   });

package/esm/CircularProgress/CircularProgress.d.ts

@@ -24,6 +24,12 @@ export interface CircularProgressProps extends StandardProps<React.HTMLAttribute
    * @default false
    */
   disableShrink?: boolean;
+  /**
+   * If `true`, a track circle slot is mounted to show a subtle background for the progress.
+   * The `size` and `thickness` apply to the track slot to be consistent with the progress circle.
+   * @default false
+   */
+  enableTrackSlot?: boolean;
   /**
    * The size of the component.
    * If using a number, the pixel unit is assumed.

package/esm/CircularProgress/CircularProgress.js

@@ -11,7 +11,7 @@ import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import capitalize from "../utils/capitalize.js";
 import createSimplePaletteValueFilter from "../utils/createSimplePaletteValueFilter.js";
 import { getCircularProgressUtilityClass } from "./circularProgressClasses.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const SIZE = 44;
 const circularRotateKeyframe = keyframes`
   0% {
@@ -58,6 +58,7 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['root', variant, `color${capitalize(color)}`],
     svg: ['svg'],
+    track: ['track'],
     circle: ['circle', `circle${capitalize(variant)}`, disableShrink && 'circleDisableShrink']
   };
   return composeClasses(slots, getCircularProgressUtilityClass, classes);
@@ -143,6 +144,15 @@ const CircularProgressCircle = styled('circle', {
     }
   }]
 })));
+const CircularProgressTrack = styled('circle', {
+  name: 'MuiCircularProgress',
+  slot: 'Track'
+})(memoTheme(({
+  theme
+}) => ({
+  stroke: 'currentColor',
+  opacity: (theme.vars || theme).palette.action.activatedOpacity
+})));
 
 /**
  * ## ARIA
@@ -160,6 +170,7 @@ const CircularProgress = /*#__PURE__*/React.forwardRef(function CircularProgress
     className,
     color = 'primary',
     disableShrink = false,
+    enableTrackSlot = false,
     size = 40,
     style,
     thickness = 3.6,
@@ -174,7 +185,8 @@ const CircularProgress = /*#__PURE__*/React.forwardRef(function CircularProgress
     size,
     thickness,
     value,
-    variant
+    variant,
+    enableTrackSlot
   };
   const classes = useUtilityClasses(ownerState);
   const circleStyle = {};
@@ -200,11 +212,20 @@ const CircularProgress = /*#__PURE__*/React.forwardRef(function CircularProgress
     role: "progressbar",
     ...rootProps,
     ...other,
-    children: /*#__PURE__*/_jsx(CircularProgressSVG, {
+    children: /*#__PURE__*/_jsxs(CircularProgressSVG, {
       className: classes.svg,
       ownerState: ownerState,
       viewBox: `${SIZE / 2} ${SIZE / 2} ${SIZE} ${SIZE}`,
-      children: /*#__PURE__*/_jsx(CircularProgressCircle, {
+      children: [enableTrackSlot ? /*#__PURE__*/_jsx(CircularProgressTrack, {
+        className: classes.track,
+        ownerState: ownerState,
+        cx: SIZE,
+        cy: SIZE,
+        r: (SIZE - thickness) / 2,
+        fill: "none",
+        strokeWidth: thickness,
+        "aria-hidden": "true"
+      }) : null, /*#__PURE__*/_jsx(CircularProgressCircle, {
         className: classes.circle,
         style: circleStyle,
         ownerState: ownerState,
@@ -213,7 +234,7 @@ const CircularProgress = /*#__PURE__*/React.forwardRef(function CircularProgress
         r: (SIZE - thickness) / 2,
         fill: "none",
         strokeWidth: thickness
-      })
+      })]
     })
   });
 });
@@ -248,6 +269,12 @@ process.env.NODE_ENV !== "production" ? CircularProgress.propTypes /* remove-pro
     }
     return null;
   }),
+  /**
+   * If `true`, a track circle slot is mounted to show a subtle background for the progress.
+   * The `size` and `thickness` apply to the track slot to be consistent with the progress circle.
+   * @default false
+   */
+  enableTrackSlot: PropTypes.bool,
   /**
    * The size of the component.
    * If using a number, the pixel unit is assumed.

package/esm/CircularProgress/circularProgressClasses.d.ts

@@ -11,6 +11,8 @@ export interface CircularProgressClasses {
   colorSecondary: string;
   /** Styles applied to the svg element. */
   svg: string;
+  /** Styles applied to the track slot if `enableTrackSlot={true}`. */
+  track: string;
   /** Styles applied to the `circle` svg path. */
   circle: string;
   /** Styles applied to the `circle` svg path if `variant="determinate"`.

package/esm/CircularProgress/circularProgressClasses.js

@@ -3,5 +3,5 @@ import generateUtilityClass from '@mui/utils/generateUtilityClass';
 export function getCircularProgressUtilityClass(slot) {
   return generateUtilityClass('MuiCircularProgress', slot);
 }
-const circularProgressClasses = generateUtilityClasses('MuiCircularProgress', ['root', 'determinate', 'indeterminate', 'colorPrimary', 'colorSecondary', 'svg', 'circle', 'circleDeterminate', 'circleIndeterminate', 'circleDisableShrink']);
+const circularProgressClasses = generateUtilityClasses('MuiCircularProgress', ['root', 'determinate', 'indeterminate', 'colorPrimary', 'colorSecondary', 'svg', 'track', 'circle', 'circleDeterminate', 'circleIndeterminate', 'circleDisableShrink']);
 export default circularProgressClasses;

package/esm/Dialog/Dialog.d.ts

@@ -41,27 +41,27 @@ export interface DialogRootSlotPropsOverrides {}
 export type DialogSlotsAndSlotProps = CreateSlotsAndSlotProps<DialogSlots, {
   /**
    * Props forwarded to the root slot.
-   * By default, the avaible props are based on the [Modal](https://mui.com/material-ui/api/modal/#props) component.
+   * By default, the available props are based on the [Modal](https://mui.com/material-ui/api/modal/#props) component.
    */
   root: SlotProps<React.ElementType<ModalProps>, DialogRootSlotPropsOverrides, DialogOwnerState>;
   /**
    * Props forwarded to the backdrop slot.
-   * By default, the avaible props are based on the [Backdrop](https://mui.com/material-ui/api/backdrop/#props) component.
+   * By default, the available props are based on the [Backdrop](https://mui.com/material-ui/api/backdrop/#props) component.
    */
   backdrop: SlotProps<React.ElementType<BackdropProps>, DialogBackdropSlotPropsOverrides, DialogOwnerState>;
   /**
    * Props forwarded to the container slot.
-   * By default, the avaible props are based on a div element.
+   * By default, the available props are based on a div element.
    */
   container: SlotProps<'div', DialogContainerSlotPropsOverrides, DialogOwnerState>;
   /**
    * Props forwarded to the transition slot.
-   * By default, the avaible props are based on the [Fade](https://mui.com/material-ui/api/fade/#props) component.
+   * 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>;
   /**
    * Props forwarded to the paper slot.
-   * By default, the avaible props are based on the [Paper](https://mui.com/material-ui/api/paper/#props) component.
+   * By default, the available props are based on the [Paper](https://mui.com/material-ui/api/paper/#props) component.
    */
   paper: SlotProps<React.ElementType<PaperProps>, DialogPaperSlotPropsOverrides, DialogOwnerState>;
 }>;

package/esm/Divider/Divider.js

@@ -294,7 +294,7 @@ process.env.NODE_ENV !== "production" ? Divider.propTypes /* remove-proptypes */
   /**
    * @ignore
    */
-  role: PropTypes /* @typescript-to-proptypes-ignore */.string,
+  role: PropTypes.string,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/esm/Drawer/Drawer.d.ts

@@ -45,27 +45,27 @@ export interface DrawerSlots {
 export type DrawerSlotsAndSlotProps = CreateSlotsAndSlotProps<DrawerSlots, {
   /**
    * Props forwarded to the root slot.
-   * By default, the avaible props are based on the [Modal](https://mui.com/material-ui/api/modal/#props) component.
+   * By default, the available props are based on the [Modal](https://mui.com/material-ui/api/modal/#props) component.
    */
   root: SlotProps<React.ElementType<ModalProps>, DrawerRootSlotPropsOverrides, DrawerOwnerState>;
   /**
    * Props forwarded to the backdrop slot.
-   * By default, the avaible props are based on the [Backdrop](https://mui.com/material-ui/api/backdrop/#props) component.
+   * By default, the available props are based on the [Backdrop](https://mui.com/material-ui/api/backdrop/#props) component.
    */
   backdrop: SlotProps<React.ElementType<BackdropProps>, DrawerBackdropSlotPropsOverrides, DrawerOwnerState>;
   /**
    * Props forwarded to the docked slot.
-   * By default, the avaible props are based on a div element.
+   * By default, the available props are based on a div element.
    */
   docked: SlotProps<'div', DrawerDockedSlotPropsOverrides, DrawerOwnerState>;
   /**
    * Props forwarded to the paper slot.
-   * By default, the avaible props are based on the [Paper](https://mui.com/material-ui/api/paper/#props) component.
+   * By default, the available props are based on the [Paper](https://mui.com/material-ui/api/paper/#props) component.
    */
   paper: SlotProps<React.ElementType<PaperProps>, DrawerPaperSlotPropsOverrides, DrawerOwnerState>;
   /**
    * Props forwarded to the transition slot.
-   * By default, the avaible props are based on the [Slide](https://mui.com/material-ui/api/slide/#props) component.
+   * 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>;
 }>;
@@ -137,7 +137,7 @@ export interface DrawerProps extends StandardProps<ModalProps, 'open' | 'childre
   variant?: 'permanent' | 'persistent' | 'temporary';
 }
 
-// omit `slots` and `slotProps` to prevent recusion
+// omit `slots` and `slotProps` to prevent recursion
 export interface DrawerOwnerState extends Omit<DrawerProps, 'slots' | 'slotProps'> {}
 
 /**