@mui/system 7.3.8 → 7.3.10

package/Box/Box.d.ts

@@ -23,11 +23,11 @@ type StandardSystemKeys = Extract<SimpleSystemKeys, keyof AllSystemCSSProperties
 export type SystemProps<Theme extends object = {}> = { [K in StandardSystemKeys]?: ResponsiveStyleValue<AllSystemCSSProperties[K]> | ((theme: Theme) => ResponsiveStyleValue<AllSystemCSSProperties[K]>) };
 export interface BoxOwnProps<Theme extends object = SystemTheme> extends SystemProps<Theme> {
   children?: React.ReactNode;
-  ref?: React.Ref<unknown>;
+  ref?: React.Ref<unknown> | undefined;
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx?: SxProps<Theme>;
+  sx?: SxProps<Theme> | undefined;
 }
 export interface BoxTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'div', Theme extends object = SystemTheme> {
   props: AdditionalProps & BoxOwnProps<Theme>;
@@ -40,6 +40,7 @@ export interface BoxTypeMap<AdditionalProps = {}, RootComponent extends React.El
  *
  * - [Box (Joy UI)](https://mui.com/joy-ui/react-box/)
  * - [Box (Material UI)](https://mui.com/material-ui/react-box/)
+ * - [Menubar (Material UI)](https://mui.com/material-ui/react-menubar/)
  * - [Box (MUI System)](https://mui.com/system/react-box/)
  *
  * API:
@@ -48,6 +49,6 @@ export interface BoxTypeMap<AdditionalProps = {}, RootComponent extends React.El
  */
 declare const Box: OverridableComponent<BoxTypeMap>;
 export type BoxProps<RootComponent extends React.ElementType = BoxTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<BoxTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
-  component?: React.ElementType;
+  component?: React.ElementType | undefined;
 };
 export default Box;

package/CHANGELOG.md

@@ -1,5 +1,91 @@
 # [Versions](https://mui.com/versions/)
 
+## 7.3.10
+
+<!-- generated comparing v7.3.9..v7.x -->
+
+_Apr 8, 2026_
+
+A big thanks to the 15 contributors who made this release possible. A few highlights ✨:
+
+- 📖 Added the Menubar component page to the docs.
+
+### `@mui/material@7.3.10`
+
+- [alert][dialog] Accessibility improvements (#48161) @silviuaavram
+- [autocomplete] Add `root` slot (#47916) @GerardasB
+- [autocomplete] Fix helper text focusing input when clicked (#48162) @mj12albert
+- [autocomplete] Fix popup reopening on window focus regain with openOnFocus (#47914) @aman44444
+- [autocomplete] Optimize selected option lookup (#48027) @anchmelev
+- [autocomplete] Support full slots for clearIndicator and popupIndicator (#47913) @silviuaavram
+- [button-base] Fix native button detection (#47994) @mj12albert
+- [input] Fix high contrast cutoff on first character (#48160) @silviuaavram
+- [list item text][card header] Revert cleanup of duplicated CSS rules (#47938) @sai6855
+- [popper] Add missing classes export (#48033) @mj12albert
+- [select] Fix focus visible always set on menu item (#48022) @silviuaavram
+- [slider] Accept readonly array for the value prop (#47961) @pcorpet
+- [switch] Add border to make it visible in high contrast mode (#48210) @silviuaavram
+- [theme] Do not create channel tokens for custom colors when `nativeColor` is used (#48144) @ZeeshanTamboli
+- [transitions] Performance improvements & misc fixes (#48217) @mj12albert
+
+### Docs
+
+- [codemod] Add v7 migration docs for deprecated Autocomplete APIs and Autocomplete codemod (#47954) @ZeeshanTamboli
+- [menubar] Add Menubar component page (#47942) @siriwatknp
+- [progress] Label all demo components (#48168) @mj12albert
+- [system] Update `styled` API docs for easier understanding (#47969) @olivier-lxo
+- Fix the dark mode footer row shadow for the Data Grid on the advanced components page (#48152) @arminmeh
+- Fix MUI X redirects (#47917) @cherniavskii
+- Use direct palette vars in Tailwind v4 snippet (#47955) @Ahmad-Alaziz
+
+### Core
+
+- [blog] Blogpost for upcoming price changes for MUI X (#47820) @DanailH
+- [blog] Update the 2026 price changes blogpost (#47944) @DanailH
+- [code-infra] Add pkg-pr-new as dev dependency (#48023) @silviuaavram
+- [docs-infra] Update Release Instructions and Search Index v7 (#48109) @dav-is
+
+All contributors of this release in alphabetical order: @Ahmad-Alaziz, @aman44444, @anchmelev, @arminmeh, @cherniavskii, @DanailH, @dav-is, @GerardasB, @mj12albert, @olivier-lxo, @pcorpet, @sai6855, @silviuaavram, @siriwatknp, @ZeeshanTamboli
+
+## 7.3.9
+
+<!-- generated comparing v7.3.8..v7.x -->
+
+_Mar 5, 2026_
+
+A big thanks to the 15 contributors who made this release possible.
+
+### `@mui/material@7.3.9`
+
+- Clean up duplicated CSS rules (#47893) @sai6855
+- [theme] Generate `color-mix` value on top of default generated Material UI CSS variables (#47791) @ZeeshanTamboli
+- [tooltip] Fix error is thrown when wrapping an input which is disabled while focused (#47841) @ZeeshanTamboli
+- [table cell][theme] Apply `alpha` before color mixing to border bottom color when nativeColor + cssVariables is used (#47840) @ZeeshanTamboli
+
+### Docs
+
+- Fix small typo in NumberField page (#47888) @arthur-plazanet
+- Fix Theme builder video (#47855) @oliviertassinari
+- Add updated community theme resource (#47853) @PeterTYLiu
+- Fix the keyboard navigation in GroupedMenu example (#47848) @silviuaavram
+- Few copy fixes (#47810) @pavan-sh
+- Fix JSX in Overriding component structure docs (#47805) @ZeeshanTamboli
+- Fix SSR flicker sentence grammar (#47794) @pavan-sh
+- [system] Update sizing docs to clarify `(0, 1]` behavior. (#47851) @matthias-ccri
+- [theme] Fix `nativeColor` docs (#47759) (#47789) @ZeeshanTamboli
+
+### Core
+
+- point v7 subdomain to MUI X v7 docs (#113) @vmakhaev
+- [blog] Blogpost for upcoming price changes for MUI X (#47748) (#47910) @DanailH
+- [blog] Company Update: What we've been working on (and why) (alethomas) (#47626) (#47908) @alelthomas
+- [core] Update releaseChangelog.mjs (#47862) @mnajdova
+- [code-infra] Detect browser envs that don't support layout (#47813) (#47873) @Janpot
+- [code-infra] Enable undefined addition to optional properties (#47815) @brijeshb42
+- [docs-infra] Reapply Cookie Banner with Design Fixes (#47744) @dav-is
+
+All contributors of this release in alphabetical order: @alelthomas, @arthur-plazanet, @brijeshb42, @DanailH, @dav-is, @Janpot, @matthias-ccri, @mnajdova, @oliviertassinari, @pavan-sh, @PeterTYLiu, @sai6855, @silviuaavram, @vmakhaev, @ZeeshanTamboli
+
 ## 7.3.8
 
 <!-- generated comparing v7.3.7..master -->

package/Container/ContainerProps.d.ts

@@ -9,12 +9,12 @@ export interface ContainerTypeMap<AdditionalProps = {}, DefaultComponent extends
     /**
      * Override or extend the styles applied to the component.
      */
-    classes?: Partial<ContainerClasses>;
+    classes?: Partial<ContainerClasses> | undefined;
     /**
      * If `true`, the left and right padding is removed.
      * @default false
      */
-    disableGutters?: boolean;
+    disableGutters?: boolean | undefined;
     /**
      * Set the max-width to match the min-width of the current breakpoint.
      * This is useful if you'd prefer to design for a fixed set of sizes
@@ -22,18 +22,18 @@ export interface ContainerTypeMap<AdditionalProps = {}, DefaultComponent extends
      * It's fluid by default.
      * @default false
      */
-    fixed?: boolean;
+    fixed?: boolean | undefined;
     /**
      * Determine the max-width of the container.
      * The container width grows with the size of the screen.
      * Set to `false` to disable `maxWidth`.
      * @default 'lg'
      */
-    maxWidth?: Breakpoint | false;
+    maxWidth?: Breakpoint | false | undefined;
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx?: SxProps<Theme>;
+    sx?: SxProps<Theme> | undefined;
   };
   defaultComponent: DefaultComponent;
 }

package/Container/createContainer.d.ts

@@ -9,10 +9,10 @@ interface StyleFnProps<Theme> extends ContainerProps {
 }
 type RequiredThemeStructure = Pick<DefaultTheme, 'breakpoints' | 'spacing'>;
 export default function createContainer<Theme extends RequiredThemeStructure = DefaultTheme>(options?: {
-  createStyledComponent?: (...styles: Array<Interpolation<StyleFnProps<Theme>>>) => StyledComponent<ContainerProps>;
-  useThemeProps?: (inProps: ContainerProps) => ContainerProps & {
-    component?: React.ElementType;
-  };
-  componentName?: string;
+  createStyledComponent?: ((...styles: Array<Interpolation<StyleFnProps<Theme>>>) => StyledComponent<ContainerProps>) | undefined;
+  useThemeProps?: ((inProps: ContainerProps) => ContainerProps & {
+    component?: React.ElementType | undefined;
+  }) | undefined;
+  componentName?: string | undefined;
 }): OverridableComponent<ContainerTypeMap<{}, "div">>;
 export {};

package/GlobalStyles/GlobalStyles.d.ts

@@ -2,8 +2,8 @@ import { Interpolation } from '@mui/styled-engine';
 import { Theme as SystemTheme } from "../createTheme/index.js";
 export interface GlobalStylesProps<Theme = SystemTheme> {
   styles: Interpolation<Theme>;
-  defaultTheme?: object;
-  themeId?: string;
+  defaultTheme?: object | undefined;
+  themeId?: string | undefined;
 }
 declare function GlobalStyles<Theme = SystemTheme>({
   styles,

package/Grid/GridProps.d.ts

@@ -18,28 +18,28 @@ export interface GridBaseProps {
    * The number of columns.
    * @default 12
    */
-  columns?: ResponsiveStyleValue<number>;
+  columns?: ResponsiveStyleValue<number> | undefined;
   /**
    * Defines the horizontal space between the type `item` components.
    * It overrides the value of the `spacing` prop.
    */
-  columnSpacing?: ResponsiveStyleValue<GridSpacing>;
+  columnSpacing?: ResponsiveStyleValue<GridSpacing> | undefined;
   /**
    * If `true`, the component will have the flex *container* behavior.
    * You should be wrapping *items* with a *container*.
    * @default false
    */
-  container?: boolean;
+  container?: boolean | undefined;
   /**
    * Defines the `flex-direction` style property.
    * It is applied for all screen sizes.
    * @default 'row'
    */
-  direction?: ResponsiveStyleValue<GridDirection>;
+  direction?: ResponsiveStyleValue<GridDirection> | undefined;
   /**
    * Defines the offset value for the type `item` components.
    */
-  offset?: ResponsiveStyleValue<GridOffset>;
+  offset?: ResponsiveStyleValue<GridOffset> | undefined;
   /**
    * @internal
    * The level of the grid starts from `0` and increases when the grid nests
@@ -67,16 +67,16 @@ export interface GridBaseProps {
    *     <Grid container> // level 0
    * ```
    */
-  unstable_level?: number;
+  unstable_level?: number | undefined;
   /**
    * Defines the vertical space between the type `item` components.
    * It overrides the value of the `spacing` prop.
    */
-  rowSpacing?: ResponsiveStyleValue<GridSpacing>;
+  rowSpacing?: ResponsiveStyleValue<GridSpacing> | undefined;
   /**
    * Defines the size of the the type `item` components.
    */
-  size?: ResponsiveStyleValue<GridSize>;
+  size?: ResponsiveStyleValue<GridSize> | undefined;
   /**
    * Defines the space between the type `item` components.
    * It can only be used on a type `container` component.
@@ -88,16 +88,16 @@ export interface GridBaseProps {
    * It's applied for all screen sizes.
    * @default 'wrap'
    */
-  wrap?: GridWrap;
+  wrap?: GridWrap | undefined;
 }
 export type GridOwnerState = PartiallyRequired<GridBaseProps, 'size' | 'offset' | 'unstable_level'>;
 export interface GridTypeMap<AdditionalProps = {}, DefaultComponent extends React.ElementType = 'div'> {
   props: AdditionalProps & GridBaseProps & {
-    sx?: SxProps<Theme>;
+    sx?: SxProps<Theme> | undefined;
   } & SystemProps<Theme>;
   defaultComponent: DefaultComponent;
 }
 export type GridProps<RootComponent extends React.ElementType = GridTypeMap['defaultComponent'], AdditionalProps = {
-  component?: React.ElementType;
+  component?: React.ElementType | undefined;
 }> = OverrideProps<GridTypeMap<AdditionalProps, RootComponent>, RootComponent>;
 export {};

package/Grid/createGrid.d.ts

@@ -5,9 +5,9 @@ import { GridTypeMap } from "./GridProps.js";
 declare const defaultCreateStyledComponent: import("@mui/styled-engine").CreateStyledComponent<import("../index.js").MUIStyledCommonProps<any>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}, any>;
 declare function useThemePropsDefault<T extends {}>(props: T): T;
 export default function createGrid(options?: {
-  createStyledComponent?: typeof defaultCreateStyledComponent;
-  useThemeProps?: typeof useThemePropsDefault;
-  useTheme?: typeof useThemeSystem;
-  componentName?: string;
+  createStyledComponent?: typeof defaultCreateStyledComponent | undefined;
+  useThemeProps?: typeof useThemePropsDefault | undefined;
+  useTheme?: typeof useThemeSystem | undefined;
+  componentName?: string | undefined;
 }): OverridableComponent<GridTypeMap<{}, "div">>;
 export {};

package/Grid/deleteLegacyGridProps.d.ts

@@ -6,6 +6,6 @@ import { Breakpoint, Breakpoints } from "../createTheme/index.js";
  * @param {Breakpoints} breakpoints The breakpoints object.
  */
 export default function deleteLegacyGridProps(props: {
-  item?: boolean;
-  zeroMinWidth?: boolean;
+  item?: boolean | undefined;
+  zeroMinWidth?: boolean | undefined;
 } & Partial<Record<Breakpoint, 'auto' | number | boolean>> & Record<string, any>, breakpoints: Breakpoints): void;

package/Grid/deleteLegacyGridProps.js

@@ -10,7 +10,7 @@ const getLegacyGridWarning = propName => {
   }
 
   // #host-reference
-  return `The \`${propName}\` prop has been removed. See https://mui.com/material-ui/migration/upgrade-to-grid-v2/ for migration instructions.`;
+  return `The \`${propName}\` prop has been removed. See https://v7.mui.com/material-ui/migration/upgrade-to-grid-v2/ for migration instructions.`;
 };
 const warnedAboutProps = [];
 

package/Grid/gridGenerator.d.ts

@@ -5,7 +5,7 @@ import { GridDirection, GridOwnerState } from "./GridProps.js";
 interface Props {
   theme: {
     breakpoints: Breakpoints;
-    spacing?: Spacing;
+    spacing?: Spacing | undefined;
   };
   ownerState: GridOwnerState;
 }

package/InitColorSchemeScript/InitColorSchemeScript.d.ts

@@ -6,39 +6,39 @@ export interface InitColorSchemeScriptProps {
    * The default mode when the storage is empty (user's first visit).
    * @default 'system'
    */
-  defaultMode?: 'system' | 'light' | 'dark';
+  defaultMode?: 'system' | 'light' | 'dark' | undefined;
   /**
    * The default color scheme to be used on the light mode.
    * @default 'light'
    */
-  defaultLightColorScheme?: string;
+  defaultLightColorScheme?: string | undefined;
   /**
    * The default color scheme to be used on the dark mode.
    * * @default 'dark'
    */
-  defaultDarkColorScheme?: string;
+  defaultDarkColorScheme?: string | undefined;
   /**
    * The node (provided as string) used to attach the color-scheme attribute.
    * @default 'document.documentElement'
    */
-  colorSchemeNode?: string;
+  colorSchemeNode?: string | undefined;
   /**
    * localStorage key used to store `mode`.
    * @default 'mode'
    */
-  modeStorageKey?: string;
+  modeStorageKey?: string | undefined;
   /**
    * localStorage key used to store `colorScheme`.
    * @default 'color-scheme'
    */
-  colorSchemeStorageKey?: string;
+  colorSchemeStorageKey?: string | undefined;
   /**
    * DOM attribute for applying color scheme.
    * @default 'data-color-scheme'
    * @example '.mode-%s' // for class based color scheme
    * @example '[data-mode-%s]' // for data-attribute without '='
    */
-  attribute?: 'class' | 'data' | string;
+  attribute?: 'class' | 'data' | string | undefined;
   /**
    * Nonce string to pass to the inline script for CSP headers.
    */

package/README.md

@@ -9,11 +9,11 @@ Install the package in your project directory with:
 <!-- #npm-tag-reference -->
 
 ```bash
-npm install @mui/system @emotion/react @emotion/styled
+npm install @mui/system@^7.0.0 @emotion/react @emotion/styled
 ```
 
 ## Documentation
 
 <!-- #host-reference -->
 
-Visit [https://mui.com/system/getting-started/](https://mui.com/system/getting-started/) to view the full documentation.
+Visit [https://v7.mui.com/system/getting-started/](https://v7.mui.com/system/getting-started/) to view the full documentation.

package/RtlProvider/index.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 interface RtlProviderProps {
   children?: React.ReactNode;
-  value?: boolean;
+  value?: boolean | undefined;
 }
 declare const RtlProvider: React.FC<RtlProviderProps>;
 export const useRtl: () => boolean;

package/Stack/StackProps.d.ts

@@ -13,12 +13,12 @@ export interface StackBaseProps {
    * It is applied for all screen sizes.
    * @default 'column'
    */
-  direction?: ResponsiveStyleValue<'row' | 'row-reverse' | 'column' | 'column-reverse'>;
+  direction?: ResponsiveStyleValue<'row' | 'row-reverse' | 'column' | 'column-reverse'> | undefined;
   /**
    * Defines the space between immediate children.
    * @default 0
    */
-  spacing?: ResponsiveStyleValue<number | string>;
+  spacing?: ResponsiveStyleValue<number | string> | undefined;
   /**
    * Add an element between each child.
    */
@@ -32,19 +32,19 @@ export interface StackBaseProps {
    * To enable this flag globally, follow the theme's default props configuration.
    * @default false
    */
-  useFlexGap?: boolean;
+  useFlexGap?: boolean | undefined;
 }
 export interface StackTypeMap<AdditionalProps = {}, DefaultComponent extends React.ElementType = 'div'> {
   props: AdditionalProps & StackBaseProps & {
     /**
      * The system prop, which allows defining system overrides as well as additional CSS styles.
      */
-    sx?: SxProps<Theme>;
+    sx?: SxProps<Theme> | undefined;
   } & SystemProps<Theme>;
   defaultComponent: DefaultComponent;
 }
 export type StackProps<RootComponent extends React.ElementType = StackTypeMap['defaultComponent'], AdditionalProps = {
-  component?: React.ElementType;
+  component?: React.ElementType | undefined;
 }> = OverrideProps<StackTypeMap<AdditionalProps, RootComponent>, RootComponent>;
 export interface StackOwnerState {
   direction: StackProps['direction'];

package/Stack/createStack.d.ts

@@ -17,8 +17,8 @@ export declare const style: ({
   theme
 }: StyleFunctionProps) => any;
 export default function createStack(options?: {
-  createStyledComponent?: typeof defaultCreateStyledComponent;
-  useThemeProps?: typeof useThemePropsDefault;
-  componentName?: string;
+  createStyledComponent?: typeof defaultCreateStyledComponent | undefined;
+  useThemeProps?: typeof useThemePropsDefault | undefined;
+  componentName?: string | undefined;
 }): OverridableComponent<StackTypeMap<{}, "div">>;
 export {};

package/ThemeProvider/ThemeProvider.d.ts

@@ -7,7 +7,7 @@ export interface ThemeProviderProps<Theme = DefaultTheme> {
   /**
    * The design system's unique id for getting the corresponded theme when there are multiple design systems.
    */
-  themeId?: string;
+  themeId?: string | undefined;
   /**
    * A theme object. You can provide a function to extend the outer theme.
    */

package/ThemeProvider/useLayerOrder.d.ts

@@ -3,5 +3,5 @@
  * Then on client-side, it injects the CSS layer order into the document head to ensure that the layer order is always present first before other Emotion styles.
  */
 export default function useLayerOrder(theme: {
-  modularCssLayers?: boolean | string;
+  modularCssLayers?: boolean | string | undefined;
 }): import("react/jsx-runtime").JSX.Element | null;

package/breakpoints/breakpoints.d.ts

@@ -5,8 +5,8 @@ import { ResponsiveStyleValue } from "../styleFunctionSx/index.js";
 import { StyleFunction } from "../style/index.js";
 export interface ResolveBreakpointValuesOptions<T> {
   values: ResponsiveStyleValue<T>;
-  breakpoints?: Breakpoints['values'];
-  base?: Record<string, boolean>;
+  breakpoints?: Breakpoints['values'] | undefined;
+  base?: Record<string, boolean> | undefined;
 }
 export function resolveBreakpointValues<T>(options: ResolveBreakpointValuesOptions<T>): Record<string, T>;
 export function mergeBreakpointsInOrder(breakpoints: Breakpoints, styles: CSSObject[]): CSSObject;

package/colorManipulator/colorManipulator.d.ts

@@ -3,7 +3,7 @@ export type ColorFormat = 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'color';
 export interface ColorObject {
   type: ColorFormat;
   values: [number, number, number] | [number, number, number, number];
-  colorSpace?: 'srgb' | 'display-p3' | 'a98-rgb' | 'prophoto-rgb' | 'rec-2020';
+  colorSpace?: 'srgb' | 'display-p3' | 'a98-rgb' | 'prophoto-rgb' | 'rec-2020' | undefined;
 }
 export function hexToRgb(hex: string): string;
 export function rgbToHex(color: string): string;

package/createBox/createBox.d.ts

@@ -2,8 +2,8 @@ import { OverridableComponent } from '@mui/types';
 import { BoxTypeMap } from "../Box/index.js";
 import { Theme as SystemTheme } from "../createTheme/index.js";
 export default function createBox<T extends object = SystemTheme, AdditionalProps extends Record<string, unknown> = {}>(options?: {
-  themeId?: string;
+  themeId?: string | undefined;
   defaultTheme: T;
-  defaultClassName?: string;
-  generateClassName?: (componentName: string) => string;
+  defaultClassName?: string | undefined;
+  generateClassName?: ((componentName: string) => string) | undefined;
 }): OverridableComponent<BoxTypeMap<AdditionalProps, 'div', T>>;

package/createBreakpoints/createBreakpoints.d.ts

@@ -26,13 +26,13 @@ export interface Breakpoints {
   /**
    * @param key - A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px.
    * @returns A media query string ready to be used with most styling solutions, which matches screen widths greater than the screen size given by the breakpoint key (inclusive).
-   * @see [API documentation](https://mui.com/material-ui/customization/breakpoints/#theme-breakpoints-up-key-media-query)
+   * @see [API documentation](https://v7.mui.com/material-ui/customization/breakpoints/#theme-breakpoints-up-key-media-query)
    */
   up: (key: Breakpoint | number) => string;
   /**
    * @param key - A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px.
    * @returns A media query string ready to be used with most styling solutions, which matches screen widths less than the screen size given by the breakpoint key (exclusive).
-   * @see [API documentation](https://mui.com/material-ui/customization/breakpoints/#theme-breakpoints-down-key-media-query)
+   * @see [API documentation](https://v7.mui.com/material-ui/customization/breakpoints/#theme-breakpoints-down-key-media-query)
    */
   down: (key: Breakpoint | number) => string;
   /**
@@ -40,14 +40,14 @@ export interface Breakpoints {
    * @param end - A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px.
    * @returns A media query string ready to be used with most styling solutions, which matches screen widths greater than
    *          the screen size given by the breakpoint key in the first argument (inclusive) and less than the screen size given by the breakpoint key in the second argument (exclusive).
-   * @see [API documentation](https://mui.com/material-ui/customization/breakpoints/#theme-breakpoints-between-start-end-media-query)
+   * @see [API documentation](https://v7.mui.com/material-ui/customization/breakpoints/#theme-breakpoints-between-start-end-media-query)
    */
   between: (start: Breakpoint | number, end: Breakpoint | number) => string;
   /**
    * @param key - A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px.
    * @returns A media query string ready to be used with most styling solutions, which matches screen widths starting from
    *          the screen size given by the breakpoint key (inclusive) and stopping at the screen size given by the next breakpoint key (exclusive).
-   * @see [API documentation](https://mui.com/material-ui/customization/breakpoints/#theme-breakpoints-only-key-media-query)
+   * @see [API documentation](https://v7.mui.com/material-ui/customization/breakpoints/#theme-breakpoints-only-key-media-query)
    */
   only: (key: Breakpoint) => string;
   /**

package/createStyled/createStyled.d.ts

@@ -4,24 +4,24 @@ import styleFunctionSx, { SxProps } from "../styleFunctionSx/index.js";
 import { Theme as DefaultTheme } from "../createTheme/index.js";
 export function shouldForwardProp(propName: PropertyKey): boolean;
 export interface MUIStyledCommonProps<Theme extends object = DefaultTheme> {
-  theme?: Theme;
-  as?: React.ElementType;
-  sx?: SxProps<Theme>;
+  theme?: Theme | undefined;
+  as?: React.ElementType | undefined;
+  sx?: SxProps<Theme> | undefined;
 }
 export interface MuiStyledOptions {
-  name?: string;
-  slot?: string;
+  name?: string | undefined;
+  slot?: string | undefined;
   // The difference between Interpolation and CSSInterpolation is that the former supports functions based on props
   // If we want to support props in the overrides, we will need to change the CSSInterpolation to Interpolation<Props>
-  overridesResolver?: (props: any, styles: Record<string, CSSInterpolation>) => CSSInterpolation;
-  skipVariantsResolver?: boolean;
-  skipSx?: boolean;
+  overridesResolver?: ((props: any, styles: Record<string, CSSInterpolation>) => CSSInterpolation) | undefined;
+  skipVariantsResolver?: boolean | undefined;
+  skipSx?: boolean | undefined;
 }
 export type CreateMUIStyled<Theme extends object = DefaultTheme> = CreateMUIStyledStyledEngine<MUIStyledCommonProps<Theme>, MuiStyledOptions, Theme>;
 export default function createStyled<Theme extends object = DefaultTheme>(options?: {
-  themeId?: string;
-  defaultTheme?: Theme;
-  rootShouldForwardProp?: (prop: PropertyKey) => boolean;
-  slotShouldForwardProp?: (prop: PropertyKey) => boolean;
-  styleFunctionSx?: typeof styleFunctionSx;
+  themeId?: string | undefined;
+  defaultTheme?: Theme | undefined;
+  rootShouldForwardProp?: ((prop: PropertyKey) => boolean) | undefined;
+  slotShouldForwardProp?: ((prop: PropertyKey) => boolean) | undefined;
+  styleFunctionSx?: typeof styleFunctionSx | undefined;
 }): CreateMUIStyled<Theme>;

package/createTheme/createTheme.d.ts

@@ -13,18 +13,18 @@ export interface Shadows {}
 export interface Transitions {}
 export interface ZIndex {}
 export interface ThemeOptions {
-  shape?: ShapeOptions;
-  breakpoints?: BreakpointsOptions;
-  direction?: Direction;
-  mixins?: Mixins;
-  palette?: Record<string, any>;
-  shadows?: Shadows;
-  spacing?: SpacingOptions;
-  transitions?: Transitions;
-  components?: Record<string, any>;
-  typography?: Typography;
-  zIndex?: ZIndex;
-  unstable_sxConfig?: SxConfig;
+  shape?: ShapeOptions | undefined;
+  breakpoints?: BreakpointsOptions | undefined;
+  direction?: Direction | undefined;
+  mixins?: Mixins | undefined;
+  palette?: Record<string, any> | undefined;
+  shadows?: Shadows | undefined;
+  spacing?: SpacingOptions | undefined;
+  transitions?: Transitions | undefined;
+  components?: Record<string, any> | undefined;
+  typography?: Typography | undefined;
+  zIndex?: ZIndex | undefined;
+  unstable_sxConfig?: SxConfig | undefined;
 }
 export interface Theme extends CssContainerQueries {
   shape: Shape;
@@ -33,13 +33,13 @@ export interface Theme extends CssContainerQueries {
   palette: Record<string, any> & {
     mode: 'light' | 'dark';
   };
-  shadows?: Shadows;
+  shadows?: Shadows | undefined;
   spacing: Spacing;
-  transitions?: Transitions;
-  components?: Record<string, any>;
-  mixins?: Mixins;
-  typography?: Typography;
-  zIndex?: ZIndex;
+  transitions?: Transitions | undefined;
+  components?: Record<string, any> | undefined;
+  mixins?: Mixins | undefined;
+  typography?: Typography | undefined;
+  zIndex?: ZIndex | undefined;
   applyStyles: ApplyStyles<'light' | 'dark'>;
   unstable_sxConfig: SxConfig;
   unstable_sx: (props: SxProps<Theme>) => CSSObject;