@mui/docs 9.0.0-alpha.0 → 9.0.0-alpha.2

package/{esm/Ad/Ad.js → Ad/Ad.mjs}

@@ -3,11 +3,11 @@ import * as React from 'react';
 import Typography from '@mui/material/Typography';
 import Box from '@mui/material/Box';
 import Paper from '@mui/material/Paper';
-import { useTranslate } from "../i18n/index.js";
-import AdCarbon from "./AdCarbon.js";
-import AdInHouse from "./AdInHouse.js";
-import { AdContext, adShape } from "./AdManager.js";
-import { useAdConfig } from "./AdProvider.js";
+import { useTranslate } from "../i18n/index.mjs";
+import AdCarbon from "./AdCarbon.mjs";
+import AdInHouse from "./AdInHouse.mjs";
+import { AdContext, adShape } from "./AdManager.mjs";
+import { useAdConfig } from "./AdProvider.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function PleaseDisableAdblock() {
   const t = useTranslate();

package/{esm/Ad/AdCarbon.js → Ad/AdCarbon.mjs}

@@ -1,9 +1,9 @@
 var _AdCarbonImage;
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
-import loadScript from "../utils/loadScript.js";
-import AdDisplay from "./AdDisplay.js";
-import { adBodyImageStyles } from "./ad.styles.js";
+import loadScript from "../utils/loadScript.mjs";
+import AdDisplay from "./AdDisplay.mjs";
+import { adBodyImageStyles } from "./ad.styles.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const CarbonRoot = styled('span')(({
   theme

package/{esm/Ad/AdDisplay.js → Ad/AdDisplay.mjs}

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
-import { useTranslate } from "../i18n/index.js";
-import { adShape } from "./AdManager.js";
-import { adBodyImageStyles, adBodyInlineStyles } from "./ad.styles.js";
-import { useAdConfig } from "./AdProvider.js";
+import { useTranslate } from "../i18n/index.mjs";
+import { adShape } from "./AdManager.mjs";
+import { adBodyImageStyles, adBodyInlineStyles } from "./ad.styles.mjs";
+import { useAdConfig } from "./AdProvider.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const InlineShape = styled('span')(({
   theme

package/{esm/Ad/AdGuest.js → Ad/AdGuest.mjs}

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Portal from '@mui/material/Portal';
-import { AdContext } from "./AdManager.js";
+import { AdContext } from "./AdManager.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 function AdGuest(props) {
   const {

package/{esm/Ad/AdInHouse.d.ts → Ad/AdInHouse.d.mts}

@@ -1,4 +1,4 @@
-import { AdParameters } from "./AdDisplay.js";
+import { AdParameters } from "./AdDisplay.mjs";
 export default function AdInHouse(props: {
   ad: Omit<AdParameters, 'poweredby' | 'label'>;
 }): import("react/jsx-runtime").JSX.Element;

package/{esm/Ad/AdInHouse.js → Ad/AdInHouse.mjs}

@@ -1,4 +1,4 @@
-import AdDisplay from "./AdDisplay.js";
+import AdDisplay from "./AdDisplay.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 export default function AdInHouse(props) {
   const {

package/{esm/Ad/ad.styles.d.ts → Ad/ad.styles.d.mts}

@@ -30,7 +30,7 @@ export declare const adBodyImageStyles: (theme: Theme) => {
     [x: string]: unknown;
     display: string;
     marginLeft: string;
-    '@font-face'?: import("@mui/material/styles/createMixins").Fontface | import("@mui/material/styles/createMixins").Fontface[];
+    '@font-face'?: import("@mui/material/styles/createMixins").Fontface | import("@mui/material/styles/createMixins").Fontface[] | undefined;
     accentColor?: import("csstype").Property.AccentColor | undefined;
     alignContent?: import("csstype").Property.AlignContent | undefined;
     alignItems?: import("csstype").Property.AlignItems | undefined;
@@ -893,7 +893,7 @@ export declare const adBodyImageStyles: (theme: Theme) => {
     display: string;
     marginTop: string;
     fontWeight: import("csstype").Property.FontWeight | undefined;
-    '@font-face'?: import("@mui/material/styles/createMixins").Fontface | import("@mui/material/styles/createMixins").Fontface[];
+    '@font-face'?: import("@mui/material/styles/createMixins").Fontface | import("@mui/material/styles/createMixins").Fontface[] | undefined;
     accentColor?: import("csstype").Property.AccentColor | undefined;
     alignContent?: import("csstype").Property.AlignContent | undefined;
     alignItems?: import("csstype").Property.AlignItems | undefined;
@@ -2782,7 +2782,7 @@ export declare const adBodyInlineStyles: (theme: Theme) => {
       ":xr-overlay"?: unknown;
     };
     display: string;
-    '@font-face'?: import("@mui/material/styles/createMixins").Fontface | import("@mui/material/styles/createMixins").Fontface[];
+    '@font-face'?: import("@mui/material/styles/createMixins").Fontface | import("@mui/material/styles/createMixins").Fontface[] | undefined;
     accentColor?: import("csstype").Property.AccentColor | undefined;
     alignContent?: import("csstype").Property.AlignContent | undefined;
     alignItems?: import("csstype").Property.AlignItems | undefined;
@@ -3645,7 +3645,7 @@ export declare const adBodyInlineStyles: (theme: Theme) => {
     color: string;
     display: string;
     fontWeight: import("csstype").Property.FontWeight | undefined;
-    '@font-face'?: import("@mui/material/styles/createMixins").Fontface | import("@mui/material/styles/createMixins").Fontface[];
+    '@font-face'?: import("@mui/material/styles/createMixins").Fontface | import("@mui/material/styles/createMixins").Fontface[] | undefined;
     accentColor?: import("csstype").Property.AccentColor | undefined;
     alignContent?: import("csstype").Property.AlignContent | undefined;
     alignItems?: import("csstype").Property.AlignItems | undefined;

package/Ad/ad.styles.d.ts

@@ -30,7 +30,7 @@ export declare const adBodyImageStyles: (theme: Theme) => {
     [x: string]: unknown;
     display: string;
     marginLeft: string;
-    '@font-face'?: import("@mui/material/styles/createMixins").Fontface | import("@mui/material/styles/createMixins").Fontface[];
+    '@font-face'?: import("@mui/material/styles/createMixins").Fontface | import("@mui/material/styles/createMixins").Fontface[] | undefined;
     accentColor?: import("csstype").Property.AccentColor | undefined;
     alignContent?: import("csstype").Property.AlignContent | undefined;
     alignItems?: import("csstype").Property.AlignItems | undefined;
@@ -893,7 +893,7 @@ export declare const adBodyImageStyles: (theme: Theme) => {
     display: string;
     marginTop: string;
     fontWeight: import("csstype").Property.FontWeight | undefined;
-    '@font-face'?: import("@mui/material/styles/createMixins").Fontface | import("@mui/material/styles/createMixins").Fontface[];
+    '@font-face'?: import("@mui/material/styles/createMixins").Fontface | import("@mui/material/styles/createMixins").Fontface[] | undefined;
     accentColor?: import("csstype").Property.AccentColor | undefined;
     alignContent?: import("csstype").Property.AlignContent | undefined;
     alignItems?: import("csstype").Property.AlignItems | undefined;
@@ -2782,7 +2782,7 @@ export declare const adBodyInlineStyles: (theme: Theme) => {
       ":xr-overlay"?: unknown;
     };
     display: string;
-    '@font-face'?: import("@mui/material/styles/createMixins").Fontface | import("@mui/material/styles/createMixins").Fontface[];
+    '@font-face'?: import("@mui/material/styles/createMixins").Fontface | import("@mui/material/styles/createMixins").Fontface[] | undefined;
     accentColor?: import("csstype").Property.AccentColor | undefined;
     alignContent?: import("csstype").Property.AlignContent | undefined;
     alignItems?: import("csstype").Property.AlignItems | undefined;
@@ -3645,7 +3645,7 @@ export declare const adBodyInlineStyles: (theme: Theme) => {
     color: string;
     display: string;
     fontWeight: import("csstype").Property.FontWeight | undefined;
-    '@font-face'?: import("@mui/material/styles/createMixins").Fontface | import("@mui/material/styles/createMixins").Fontface[];
+    '@font-face'?: import("@mui/material/styles/createMixins").Fontface | import("@mui/material/styles/createMixins").Fontface[] | undefined;
     accentColor?: import("csstype").Property.AccentColor | undefined;
     alignContent?: import("csstype").Property.AlignContent | undefined;
     alignItems?: import("csstype").Property.AlignItems | undefined;

package/Ad/index.d.mts

@@ -0,0 +1,5 @@
+export * from "./Ad.mjs";
+export * from "./AdManager.mjs";
+export * from "./AdProvider.mjs";
+export * from "./AdGuest.mjs";
+export { AdCarbonInline } from "./AdCarbon.mjs";

package/Ad/index.mjs

@@ -0,0 +1,7 @@
+/// <reference types="gtag.js" />
+
+export * from "./Ad.mjs";
+export * from "./AdManager.mjs";
+export * from "./AdProvider.mjs";
+export * from "./AdGuest.mjs";
+export { AdCarbonInline } from "./AdCarbon.mjs";

package/CHANGELOG.md

@@ -1,5 +1,79 @@
 # [Versions](https://mui.com/versions/)
 
+## 9.0.0-alpha.2
+
+<!-- generated comparing v9.0.0-alpha.1..master -->
+
+_Mar 5, 2026_
+
+A big thanks to the 4 contributors who made this release possible.
+
+### @mui/material@9.0.0-alpha.2
+
+- Clean up duplicated CSS rules (#47838) @sai6855
+
+### @mui/system@9.0.0-alpha.2
+
+- Refactor sortContainerQueries to define regex outside of sort function (#47817) @sai6855
+
+### Docs
+
+- Move shared components to @mui/docs package (#47672) @Janpot
+- Fix small typo in NumberField page (#47877) @arthur-plazanet
+
+### Core
+
+- [code-infra] Reduce paths for attw checks (#47896) @brijeshb42
+- [docs-infra] Run syncTeamMembers (#47900) @Janpot
+
+All contributors of this release in alphabetical order: @arthur-plazanet, @brijeshb42, @Janpot, @sai6855
+
+## 9.0.0-alpha.1
+
+<!-- generated comparing v9.0.0-alpha.0..master -->
+
+_Feb 26, 2026_
+
+A big thanks to the 13 contributors who made this release possible. Here are some highlights ✨:
+
+### @mui/material@9.0.0-alpha.1
+
+- [Autocomplete] Prevents Autocomplete menu from opening on right click (#47797) @silviuaavram
+- [Backdrop] Remove aria-hidden by default (#47798) @silviuaavram
+- [ButtonBase] Ensure that onClick propagates when non-native button is clicked (#47800) @silviuaavram
+- [Dialog][Modal] Remove `disableEscapeKeyDown` prop (#47695) @silviuaavram
+- [Grid] Remove system props support (#47846) @siriwatknp
+- [TableCell][theme] Apply `alpha` before color mixing to border bottom color when nativeColor + cssVariables is used (#47762) @ZeeshanTamboli
+- [theme] Remove MuiTouchRipple from theme component types (#47849) @siriwatknp
+- [Tooltip] Fix error is thrown when wrapping an input which is disabled while focused (#47684) @ZeeshanTamboli
+- [useAutocomplete] Improve isOptionEqualToValue value argument type (#47801) @silviuaavram
+
+### Docs
+
+- [docs] Add updated community theme resource (#47847) @PeterTYLiu
+- [docs] Few copy fixes (#47806) @pavan-sh
+- [docs] Fix IPA reader link in blog post (#47796) @pavan-sh
+- [docs] Fix JSX in Overriding component structure docs (#47799) @ZeeshanTamboli
+- [docs] Fix the keyboard navigation in GroupedMenu example (#47842) @silviuaavram
+- [docs] Fix Theme builder video (#47835) @oliviertassinari
+- [docs] Update pricing sankey as done (#47795) @alexfauquette
+- [docs][system] Update sizing docs to clarify `(0, 1]` behavior. (#47845) @matthias-ccri
+
+### Core
+
+- [blog] Blogpost for upcoming price changes for MUI X (#47748) @DanailH
+- [code-infra] Detect browser envs that don't support layout (#47813) @Janpot
+- [code-infra] Enable undefined addition to optional properties (#47750) @brijeshb42
+- [code-infra] Exclusively enable test mode in jsdom (#47812) @Janpot
+- [code-infra] Fix console.warn during test (#47802) @Janpot
+- [code-infra] Remove vale as a workspace dependency (#47860) @brijeshb42
+- [code-infra] Setup flat build for packages (#47670) @brijeshb42
+- [code-infra] Upgrade react-docgen to v8 (#47685) @JCQuintas
+- [docs-infra] Reapply Cookie Banner with Design Fixes (#47744) @dav-is
+- [internal] Remove legacy MUI Base API docs (#47804) @ZeeshanTamboli
+
+All contributors of this release in alphabetical order: @alexfauquette, @brijeshb42, @DanailH, @dav-is, @Janpot, @JCQuintas, @matthias-ccri, @oliviertassinari, @pavan-sh, @PeterTYLiu, @silviuaavram, @siriwatknp, @ZeeshanTamboli
+
 ## 9.0.0-alpha.0
 
 <!-- generated comparing v7.3.8..master -->

package/{esm/CodeCopy/CodeCopyButton.js → CodeCopy/CodeCopyButton.mjs}

@@ -1,5 +1,5 @@
 var _span, _span2;
-import useClipboardCopy from "./useClipboardCopy.js";
+import useClipboardCopy from "./useClipboardCopy.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function CodeCopyButton(props) {
   const {

package/CodeCopy/index.d.mts

@@ -0,0 +1,3 @@
+export * from "./CodeCopy.mjs";
+export * from "./CodeCopyButton.mjs";
+export { default as useClipboardCopy } from "./useClipboardCopy.mjs";

package/CodeCopy/index.mjs

@@ -0,0 +1,3 @@
+export * from "./CodeCopy.mjs";
+export * from "./CodeCopyButton.mjs";
+export { default as useClipboardCopy } from "./useClipboardCopy.mjs";

package/{esm/ComponentLinkHeader/ComponentLinkHeader.js → ComponentLinkHeader/ComponentLinkHeader.mjs}

@@ -6,13 +6,13 @@ import Tooltip from '@mui/material/Tooltip';
 import ChatRounded from '@mui/icons-material/ChatRounded';
 import GitHubIcon from '@mui/icons-material/GitHub';
 import { styled } from '@mui/material/styles';
-import MarkdownIcon from "../svgIcons/MarkdownIcon.js";
-import SketchIcon from "../svgIcons/SketchIcon.js";
-import FigmaIcon from "../svgIcons/FigmaIcon.js";
-import BundleSizeIcon from "../svgIcons/BundleSizeIcon.js";
-import W3CIcon from "../svgIcons/W3CIcon.js";
-import MaterialDesignIcon from "../svgIcons/MaterialDesignIcon.js";
-import { useTranslate } from "../i18n/index.js";
+import MarkdownIcon from "../svgIcons/MarkdownIcon.mjs";
+import SketchIcon from "../svgIcons/SketchIcon.mjs";
+import FigmaIcon from "../svgIcons/FigmaIcon.mjs";
+import BundleSizeIcon from "../svgIcons/BundleSizeIcon.mjs";
+import W3CIcon from "../svgIcons/W3CIcon.mjs";
+import MaterialDesignIcon from "../svgIcons/MaterialDesignIcon.mjs";
+import { useTranslate } from "../i18n/index.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Root = styled('ul')(({
   theme

package/{esm/ComponentLinkHeader/index.d.ts → ComponentLinkHeader/index.d.mts}

@@ -1,2 +1,2 @@
-export * from "./ComponentLinkHeader.js";
-export { ComponentLinkHeader as default } from "./ComponentLinkHeader.js";
+export * from "./ComponentLinkHeader.mjs";
+export { ComponentLinkHeader as default } from "./ComponentLinkHeader.mjs";

package/{esm/ComponentLinkHeader/index.js → ComponentLinkHeader/index.mjs}

@@ -1,2 +1,2 @@
-export * from "./ComponentLinkHeader.js";
-export { ComponentLinkHeader as default } from "./ComponentLinkHeader.js";
+export * from "./ComponentLinkHeader.mjs";
+export { ComponentLinkHeader as default } from "./ComponentLinkHeader.mjs";

package/{esm/DocsProvider/DocsProvider.d.ts → DocsProvider/DocsProvider.d.mts}

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { Translations } from "../i18n/index.js";
-import { AdConfig } from "../Ad/index.js";
+import { Translations } from "../i18n/index.mjs";
+import { AdConfig } from "../Ad/index.mjs";
 export interface DocsConfig {
   LANGUAGES: string[];
   LANGUAGES_SSR: string[];

package/{esm/DocsProvider/DocsProvider.js → DocsProvider/DocsProvider.mjs}

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { UserLanguageProvider } from "../i18n/index.js";
-import { AdProvider } from "../Ad/index.js";
+import { UserLanguageProvider } from "../i18n/index.mjs";
+import { AdProvider } from "../Ad/index.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 const DocsConfigContext = /*#__PURE__*/React.createContext(null);
 export function DocsProvider({

package/DocsProvider/index.d.mts

@@ -0,0 +1 @@
+export * from "./DocsProvider.mjs";

package/DocsProvider/index.mjs

@@ -0,0 +1 @@
+export * from "./DocsProvider.mjs";

package/{esm/HighlightedCode/HighlightedCode.js → HighlightedCode/HighlightedCode.mjs}

@@ -2,8 +2,8 @@ import * as React from 'react';
 import prism from '@mui/internal-markdown/prism';
 import { NoSsr } from '@mui/base/NoSsr';
 import { styled } from '@mui/material/styles';
-import { useCodeCopy, CodeCopyButton } from "../CodeCopy/index.js";
-import { MarkdownElement } from "../MarkdownElement/index.js";
+import { useCodeCopy, CodeCopyButton } from "../CodeCopy/index.mjs";
+import { MarkdownElement } from "../MarkdownElement/index.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Pre = styled('pre')(({
   theme

package/HighlightedCode/index.d.mts

@@ -0,0 +1 @@
+export * from "./HighlightedCode.mjs";

package/HighlightedCode/index.mjs

@@ -0,0 +1 @@
+export * from "./HighlightedCode.mjs";

package/{esm/HighlightedCodeWithTabs/HighlightedCodeWithTabs.js → HighlightedCodeWithTabs/HighlightedCodeWithTabs.mjs}

@@ -5,7 +5,7 @@ import { TabsList as TabsListBase } from '@mui/base/TabsList';
 import { TabPanel as TabPanelBase } from '@mui/base/TabPanel';
 import { Tab as TabBase } from '@mui/base/Tab';
 import useLocalStorageState from '@mui/utils/useLocalStorageState';
-import { HighlightedCode } from "../HighlightedCode/index.js";
+import { HighlightedCode } from "../HighlightedCode/index.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const PACKAGE_MANAGER_ORDER = new Map(['npm', 'pnpm', 'yarn'].map((manager, index) => [manager, index]));
 export const CodeTabList = styled(TabsListBase)(({

package/HighlightedCodeWithTabs/index.d.mts

@@ -0,0 +1,2 @@
+export * from "./HighlightedCodeWithTabs.mjs";
+export { HighlightedCodeWithTabs as default } from "./HighlightedCodeWithTabs.mjs";

package/HighlightedCodeWithTabs/index.mjs

@@ -0,0 +1,2 @@
+export * from "./HighlightedCodeWithTabs.mjs";
+export { HighlightedCodeWithTabs as default } from "./HighlightedCodeWithTabs.mjs";

package/IconImage/IconImage.d.mts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { Theme } from '@mui/material/styles';
+import { SxProps } from '@mui/system';
+export type IconImageProps = {
+  name: 'product-core' | 'product-advanced' | 'product-toolpad' | 'product-templates' | 'product-designkits' | 'pricing/x-plan-pro' | 'pricing/x-plan-premium' | 'pricing/x-plan-community' | 'pricing/yes' | 'pricing/no' | 'pricing/time' | 'companies/spotify' | 'companies/amazon' | 'companies/nasa' | 'companies/netflix' | 'companies/unity' | 'companies/shutterstock' | 'companies/southwest' | 'companies/siemens' | 'companies/deloitte' | 'companies/apple' | 'companies/twitter' | 'companies/salesforce' | 'companies/verizon' | 'companies/atandt' | 'companies/patreon' | 'companies/ebay' | 'companies/samsung' | 'companies/volvo' | 'companies/tesla' | string;
+  height?: number;
+  mode?: '' | 'light' | 'dark';
+  sx?: SxProps<Theme>;
+  width?: number;
+} & Omit<React.JSX.IntrinsicElements['img'], 'ref'>;
+export default function IconImage(props: IconImageProps): import("react/jsx-runtime").JSX.Element;

package/IconImage/IconImage.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { Theme } from '@mui/material/styles';
+import { SxProps } from '@mui/system';
+export type IconImageProps = {
+  name: 'product-core' | 'product-advanced' | 'product-toolpad' | 'product-templates' | 'product-designkits' | 'pricing/x-plan-pro' | 'pricing/x-plan-premium' | 'pricing/x-plan-community' | 'pricing/yes' | 'pricing/no' | 'pricing/time' | 'companies/spotify' | 'companies/amazon' | 'companies/nasa' | 'companies/netflix' | 'companies/unity' | 'companies/shutterstock' | 'companies/southwest' | 'companies/siemens' | 'companies/deloitte' | 'companies/apple' | 'companies/twitter' | 'companies/salesforce' | 'companies/verizon' | 'companies/atandt' | 'companies/patreon' | 'companies/ebay' | 'companies/samsung' | 'companies/volvo' | 'companies/tesla' | string;
+  height?: number;
+  mode?: '' | 'light' | 'dark';
+  sx?: SxProps<Theme>;
+  width?: number;
+} & Omit<React.JSX.IntrinsicElements['img'], 'ref'>;
+export default function IconImage(props: IconImageProps): import("react/jsx-runtime").JSX.Element;

package/IconImage/IconImage.js

@@ -0,0 +1,91 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = IconImage;
+var React = _interopRequireWildcard(require("react"));
+var _styles = require("@mui/material/styles");
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _ThemeContext = require("../ThemeContext");
+var _jsxRuntime = require("react/jsx-runtime");
+const Img = (0, _styles.styled)('img')({
+  display: 'inline-block',
+  verticalAlign: 'bottom'
+});
+let neverHydrated = true;
+function IconImage(props) {
+  const {
+    height: heightProp,
+    name,
+    width: widthProp,
+    mode: modeProp,
+    ...other
+  } = props;
+  const themeOptions = React.useContext(_ThemeContext.ThemeOptionsContext);
+  const [firstRender, setFirstRender] = React.useState(true);
+  React.useEffect(() => {
+    setFirstRender(false);
+    neverHydrated = false;
+  }, []);
+  let defaultWidth;
+  let defaultHeight;
+  const mode = modeProp ?? themeOptions.paletteMode;
+  if (name.startsWith('product-')) {
+    defaultWidth = 36;
+    defaultHeight = 36;
+  } else if (name.startsWith('pricing/x-plan-')) {
+    defaultWidth = 17;
+    defaultHeight = 20;
+  } else if (['pricing/yes', 'pricing/no', 'pricing/time'].includes(name)) {
+    defaultWidth = 18;
+    defaultHeight = 18;
+  }
+  const width = widthProp ?? defaultWidth;
+  const height = heightProp ?? defaultHeight;
+
+  // First time render with a theme depend image
+  if (firstRender && neverHydrated && mode !== '') {
+    if (other.loading === 'eager') {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Img, {
+          className: "only-light-mode-v2",
+          src: `/static/branding/${name}-light.svg`,
+          alt: "",
+          width: width,
+          height: height,
+          ...other,
+          loading: "lazy"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Img, {
+          className: "only-dark-mode-v2",
+          src: `/static/branding/${name}-dark.svg`,
+          alt: "",
+          width: width,
+          height: height,
+          ...other,
+          loading: "lazy"
+        })]
+      });
+    }
+
+    // Prevent hydration mismatch between the light and dark mode image source.
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      component: "span",
+      sx: {
+        width,
+        height,
+        display: 'inline-block'
+      }
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Img, {
+    src: `/static/branding/${name}${mode ? `-${mode}` : ''}.svg`,
+    alt: "",
+    loading: "lazy",
+    width: width,
+    height: height,
+    ...other
+  });
+}

package/IconImage/IconImage.mjs

@@ -0,0 +1,83 @@
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import { ThemeOptionsContext } from "../ThemeContext/index.mjs";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Img = styled('img')({
+  display: 'inline-block',
+  verticalAlign: 'bottom'
+});
+let neverHydrated = true;
+export default function IconImage(props) {
+  const {
+    height: heightProp,
+    name,
+    width: widthProp,
+    mode: modeProp,
+    ...other
+  } = props;
+  const themeOptions = React.useContext(ThemeOptionsContext);
+  const [firstRender, setFirstRender] = React.useState(true);
+  React.useEffect(() => {
+    setFirstRender(false);
+    neverHydrated = false;
+  }, []);
+  let defaultWidth;
+  let defaultHeight;
+  const mode = modeProp ?? themeOptions.paletteMode;
+  if (name.startsWith('product-')) {
+    defaultWidth = 36;
+    defaultHeight = 36;
+  } else if (name.startsWith('pricing/x-plan-')) {
+    defaultWidth = 17;
+    defaultHeight = 20;
+  } else if (['pricing/yes', 'pricing/no', 'pricing/time'].includes(name)) {
+    defaultWidth = 18;
+    defaultHeight = 18;
+  }
+  const width = widthProp ?? defaultWidth;
+  const height = heightProp ?? defaultHeight;
+
+  // First time render with a theme depend image
+  if (firstRender && neverHydrated && mode !== '') {
+    if (other.loading === 'eager') {
+      return /*#__PURE__*/_jsxs(React.Fragment, {
+        children: [/*#__PURE__*/_jsx(Img, {
+          className: "only-light-mode-v2",
+          src: `/static/branding/${name}-light.svg`,
+          alt: "",
+          width: width,
+          height: height,
+          ...other,
+          loading: "lazy"
+        }), /*#__PURE__*/_jsx(Img, {
+          className: "only-dark-mode-v2",
+          src: `/static/branding/${name}-dark.svg`,
+          alt: "",
+          width: width,
+          height: height,
+          ...other,
+          loading: "lazy"
+        })]
+      });
+    }
+
+    // Prevent hydration mismatch between the light and dark mode image source.
+    return /*#__PURE__*/_jsx(Box, {
+      component: "span",
+      sx: {
+        width,
+        height,
+        display: 'inline-block'
+      }
+    });
+  }
+  return /*#__PURE__*/_jsx(Img, {
+    src: `/static/branding/${name}${mode ? `-${mode}` : ''}.svg`,
+    alt: "",
+    loading: "lazy",
+    width: width,
+    height: height,
+    ...other
+  });
+}

package/IconImage/index.d.mts

@@ -0,0 +1 @@
+export { default, type IconImageProps } from "./IconImage.mjs";

package/IconImage/index.d.ts

@@ -0,0 +1 @@
+export { default, type IconImageProps } from "./IconImage.js";

package/IconImage/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _IconImage.default;
+  }
+});
+var _IconImage = _interopRequireDefault(require("./IconImage"));

package/IconImage/index.mjs

@@ -0,0 +1 @@
+export { default } from "./IconImage.mjs";

package/{esm/InfoCard/InfoCard.d.ts → InfoCard/InfoCard.d.mts}

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { TypographyProps } from '@mui/material/Typography';
-import { LinkProps } from "../Link/index.js";
+import { LinkProps } from "../Link/index.mjs";
 interface GlowingIconContainerProps {
   icon: React.ReactNode;
 }

package/{esm/InfoCard/InfoCard.js → InfoCard/InfoCard.mjs}

@@ -3,7 +3,7 @@ import { alpha } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Paper from '@mui/material/Paper';
 import Typography from '@mui/material/Typography';
-import { Link } from "../Link/index.js";
+import { Link } from "../Link/index.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function GlowingIconContainer({
   icon

package/InfoCard/index.d.mts

@@ -0,0 +1 @@
+export * from "./InfoCard.mjs";

package/InfoCard/index.mjs

@@ -0,0 +1 @@
+export * from "./InfoCard.mjs";

package/{esm/Link/Link.js → Link/Link.mjs}

@@ -3,8 +3,8 @@ import clsx from 'clsx';
 import { useRouter } from 'next/router';
 import NextLink from 'next/link';
 import MuiLink from '@mui/material/Link';
-import { useUserLanguage } from "../i18n/index.js";
-import { useDocsConfig } from "../DocsProvider/index.js";
+import { useUserLanguage } from "../i18n/index.mjs";
+import { useDocsConfig } from "../DocsProvider/index.mjs";
 
 /**
  * File to keep in sync with:

package/Link/index.d.mts

@@ -0,0 +1 @@
+export * from "./Link.mjs";

package/Link/index.mjs

@@ -0,0 +1 @@
+export * from "./Link.mjs";